@speedcubing/cookie/public/css/main.css

Speedcubing Online's UI design.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
	--dark-primary: #0B0E11;
	--dark-primary-light: #151A21;
	--dark-secondary: #242C37;
	--dark-muted: #6c757d;
	--accent: #4287f5;

	--font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

body {
	margin: 0;
	background-color: var(--dark-primary);
	font-family: var(--font-family);
}

a {
	color: var(--accent);
}

.navbar {
	position: fixed;
	width: 100%;
	padding-top: .4em;
	z-index: 10;
	display: flex;
}

.navbar-wrapper {
	margin: 0;
	padding: 0;
	display: flex;
}

.navbar-wrapper > .navbar-brand {
	font-weight: bold;
	margin-right: 1em;
}

.navbar-brand > .navbar-text {
	text-decoration: none;
	color: var(--accent);
}

.navbar-content {
	width: 70%;
	margin: auto;
	display: flex;
	justify-content: space-between;
}

.navbar-item {
	display: inline-block;
	padding-left: 1em;
	padding-right: 1em;
	color: white;
	font-weight: bold;
	text-decoration: none;
}

.navbar-item:hover {
	color: var(--accent);
}

.navbar-dropdown {
	display: inline-block;
	color: white;
	font-weight: bold;
}

.navbar-dropdown-content {
	background-color: var(--dark-primary-light);
	position: fixed;
	display: block;
	border-radius: 3px;
	transform: translateX(.6em) translateY(.35em);
	min-width: 8em;
	padding-top: .25em;
	padding-bottom: .25em;
	z-index: 20;
}

.navbar-dropdown-item {
	color: white;
	text-decoration: none;
	display: block;
	padding: .40em;
	padding-left: .75em;
	width: 100%;
}

.navbar-dropdown-item:hover {
	color: var(--accent);
}

.navbar-dropdown-hide {
	display: none;
}

.body-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	color: white;
	transform: translateY(2em);
	z-index: -1;
	
}

.body-grid {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	width: 70%;
	z-index: -1;
}

.body-grid-item {
	padding: 1em;
	z-index: -1;
}

.users-item {
	display: flex;
	padding-top: .75em;
	padding-bottom: .75em;
}

.users-item-picture-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.users-item-picture {
	display: inline;
	height: 100%;
	width: auto;
}

.users-item-name-wrapper {
	padding-left: 1.5em;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.users-item-name {
	text-decoration: none;
	color: white;
	display: block;
}

.bold {
	font-weight: bold;
}

.body-content-item {
	background-color: var(--dark-primary-light);
	border-radius: 3px;
	padding: .5em;
}

.content-title {
	font-weight: bold;
	font-size: 36px;
}

.content-body {
	padding: 0px;
	margin-top: .25em;
}

#body-alert {
	background-color :red;
	bottom: 0;
	position: fixed;
	z-index: 11;
	margin: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: .75em;
	color: white;
	font-weight: bold;
}

.loading-bar-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
}

.loading-bar {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.search-bar {
	width: 100%;
	display: flex;
}

.search-bar-input {
	width: 100%;
	background-color: var(--dark-primary-light);
	border: 1px solid var(--dark-secondary);
	border-radius: 4px;
	height: 1em;
	padding: .5em;
	color: white;
	outline: none !important;
	font-weight: bold;
	font-family: var(--font-family);
}

.body-overlay {
	position: fixed;
	width: 35%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 30;
	border-radius: 3px;
	padding: 1em;
	color: white;
	justify-content: center;
}

.form-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
}

.form {
	margin-top: 1em;
	width: 50%;
}

.form-input {
	width: 100%;
	background-color: var(--dark-primary-light);
	border: 1px solid var(--dark-secondary);
	border-radius: 4px;
	padding: .5em;
	color: white;
	outline: none !important;
	font-weight: bold;
	font-family: var(--font-family);
	font-size: 1em;
	margin-bottom: .5em;
}

.form-submit {
	width: 100%;
	background-color: var(--dark-primary-light);
	border: 1px solid var(--dark-secondary);
	border-radius: 4px;
	padding: .5em;
	color: var(--accent);
	outline: none !important;
	font-weight: bold;
	font-family: var(--font-family);
	font-size: 1em;
	margin-bottom: .5em;
	box-sizing: content-box;
}

.form-submit:hover {
	color: white;
	cursor: pointer;
}

.profile-view {
	display: flex;
	justify-content: center;
	margin-bottom: .5em;
}

.profile-view-picture-wrapper {
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 50%;
	width: 150px;
	height: 150px;
}

.profile-view-picture {
	display: inline-block;
	height: 100%;
	width: auto;
}

.profile-description {
	width: 100%;
}

.profile-wrapper {
	display: block;
}

.text-muted {
	color: var(--dark-muted);
}

.search-loading-bar-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.search-loading-bar {
	position: relative;
	top: 50%;
	left: 50%;
}