achievements_project/frontend/webpage/static/styles/profile.css

#profile-page {
	max-width: 1600px;
}

.profile-list {
	width: 100%;
	height: max-content;

	border-radius: 8px;
	
	overflow: hidden;

	box-shadow: 0px 0px 8px 8px var(--shadow-color);
}

.profile-entry {
	overflow: hidden;

	height: 64px;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;

	background-color: var(--distinction);
}

.profile-entry-left {
	height: 100%;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.profile-entry-right {
	height: 100%;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.profile-entry-icon {
	width: 64px;

	flex-grow: 0;
}

.profile-entry-text {
	box-sizing: border-box;

	margin: 0;
	padding: 0px 16px;

	height: 100%;
	line-height: 64px;

	color: var(--foreground);

	font-size: 24px;

	border-top: 1px solid var(--background);

	flex-basis: max-content;
	flex-grow: 0;
}

.top > .profile-entry-text {
	border: 0;
}

.profile-entry-text.platform-name {
	flex-grow: 1;
}

#profile-section-1 {
	box-sizing: border-box;

	width: 100%;
	height: max-content;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

#profile-info {
	width: 50%;
	height: max-content;

	max-width: 480px;
}

#profile-info-username-text.active,
#profile-info-username-field {
	display: none;
}

#profile-info-username-field.active {
	display: block;
}

#profile-info-username-field {
	margin-right: 8px;
	padding: 4px;
	font-size: 24px;
	color: var(--background);
	background-color: var(--foreground);

	border-radius: 8px;

	border: 0;
	outline: none;
}

#profile-info-pfp-border {
	box-sizing: border-box;

	padding: 24px;
	background-color: var(--distinction);

	width: 100%;
	height: max-content;

	box-shadow: 0px 0px 8px 8px var(--shadow-color);

	border-radius: 8px;
}

#profile-info-pfp {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	border-radius: 8px;

	position: relative;
}

#profile-info-pfp-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	object-fit: contain;

	background-color: var(--background);

	position: absolute;
}

#profile-info-pfp-vignette {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	box-shadow: inset 0px 0px 30px 10px var(--shadow-color);

	border-radius: 8px;

	position: absolute;
	z-index: 1;
}

#profile-info-pfp-upload,
#profile-info-pfp-upload-hover,
#profile-info-pfp-upload-invalid {
	top: 0;
	left: 0;
	width: 100%;
	
	border-radius: 8px;

	background-color: var(--background);
	opacity: 0.8;

	display: block;

	visibility: hidden;
}

#profile-info-pfp-upload {
	position: relative;
}

#profile-info-pfp-upload-hover,
#profile-info-pfp-upload-invalid {
	position: absolute;
}

#profile-info-pfp         #profile-info-pfp-upload.active,
#profile-info-pfp.hover   #profile-info-pfp-upload-hover.active,
#profile-info-pfp.invalid #profile-info-pfp-upload-invalid.active {
	visibility: visible;
}

#profile-info-pfp.hover   #profile-info-pfp-upload.active,
#profile-info-pfp.invalid #profile-info-pfp-upload.active {
	visibility: hidden;
}

#profile-stats {
	flex-grow: 1;

	display: flex;
	flex-direction: row;
}

#profile-stats-numeric {
	flex-grow: 1;
	max-width: 300px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#profile-completion-stack {
	width: 100%;
	height: max-content;
	position: relative;
}

#profile-completion-background {
	width: 100%;
	display: block;
}

#profile-completion-canvas {
	width: 100%;
	height: 100%;

	position: absolute;
	left: 0;
	top: 0;
}

#profile-completion-text {
	margin: 0;

	width: 100%;
	height: 100%;

	color: var(--foreground);
	font-size: 64px;

	position: absolute;
	left: 0;
	top: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}

#profile-perfect-text {
	margin: 0;

	height: 48px;

	color: var(--foreground);

	font-size: 48px;
	line-height: 48px;
	text-align: center;
}

#profile-section-2 {
	box-sizing: border-box;

	width: 100%;
	height: max-content;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

#profile-hardest {
	flex-grow: 1;
	height: 100%;
}

#profile-platforms {
	flex-grow: 1;
	max-width: 480px;
}

#profile-platforms .profile-entry {
	display: none;
}

#profile-platforms .profile-entry-text {
	color: var(--foreground);
}

#profile-platforms .profile-entry.connected,
#profile-platforms .profile-entry.editing {
	display: flex;
}

#profile-page .profile-edit-stack,
#profile-page .profile-save-stack {
	display: none;
}

#profile-page.self .profile-edit-stack,
#profile-page.self .profile-save-stack.active {
	display: block;
	width: max-content;
	height: max-content;
}

#profile-page.self .profile-edit-stack.active,
#profile-page.self .profile-save-stack {
	display: none;
}

.profile-edit-stack:hover > .profile-edit-hover,
.profile-edit {
	display: block;
}

.profile-edit-stack:hover > .profile-edit,
.profile-edit-hover {
	display: none;
}

.profile-save-stack:hover > .profile-save-hover,
.profile-save {
	display: block;
}

.profile-save-stack:hover > .profile-save,
.profile-save-hover {
	display: none;
}

.profile-entry .platform-remove-stack,
.profile-entry .platform-add,
.profile-entry .platform-unsupported,
.profile-entry.connected.editing .platform-add {
	border-top: 1px solid var(--background);
	display: none;
}

.profile-entry.connected.editing .platform-remove-stack {
	box-sizing: border-box;
	display: block;
	height: 100%;
	width: max-content;
	flex-grow: 0;
}

.platform-remove, .platform-remove-hover {
	box-sizing: border-box;
	padding: 12px;
	height: 100%;
}

.profile-entry.connected.editing .platform-remove-stack .platform-remove,
.profile-entry.connected.editing .platform-remove-stack:hover .platform-remove-hover {
	display: block;
}

.profile-entry.connected.editing .platform-remove-stack:hover .platform-remove,
.profile-entry.connected.editing .platform-remove-stack .platform-remove-hover {
	display: none;
}

.profile-entry .platform-add {
	box-sizing: border-box;
	height: 100%;
	padding: 16px 8px;
}

.profile-entry.editing .platform-add {
	display: block;
}

.profile-entry.editing .platform-unsupported {
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 0% 2%;
	line-height: 63px;
	font-size: 24px;
	color: var(--foreground-disabled);
}

#profile-ratings {
	flex-grow: 1;
}