WMGZON/static/css/style.css

185 lines
3.1 KiB
CSS

:root {
--bg: #282c34;
--bg-secondary: #474d57;
--bg-grad-1: #484e58;
--bg-grad-2: #4e5560;
--bg-grad-3: #59616d;
--bg-grad-4: #606a7b;
--bg-grad-5: #606978;
--input: #4e5560;
--fg: #ABB2BF;
--header: #E06C75;
--link: #FFF;
--hover: #888;
--green: #98C379;
--red: #E06C75;
}
html {
background-color: var(--bg);
color: var(--fg);
font-size: 160%;
font-weight: lighter;
font-family: 'InterVariable', 'Courier New', Courier, 'Inter';
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100%;
}
.navbar {
flex: 0 1 auto;
padding: 5px 30px;
display: flex;
flex-direction: column;
gap: .3rem;
}
/* Navbar styling*/
nav {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 120%;
}
nav form {
display: flex;
justify-content: center;
align-items: center;
}
.search-bar {
padding: .25rem;
margin-top: .25rem;
font-size: 1rem;
width: 15rem;
border: none;
transition: width 0.4s ease-in-out;
background-color: var(--fg);
}
@media (min-width:1500px) {
.search-bar:focus {
width: 30rem;
}
}
.search-button {
padding: .25rem .5rem;
margin-top: .25rem;
margin-right: .5rem;
background: #ddd;
font-size: 1rem;
border: none;
background-color: orange;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: -2rem;
}
.vert-align {
display: flex;
align-items: center;
gap: 1rem;
}
#logo {
width: 10rem;
height: auto;
}
#cart {
height: 4rem;
width: auto;
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
width: 26px;
border-radius: 13px;
background-clip: padding-box;
border: 10px solid transparent;
color: var(--fg);
}
*::-webkit-scrollbar-thumb:hover{
color: var(--link);
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}
@media (max-width:1000px) {
.not-required {
display: none;
}
}
a {
text-decoration: none;
position: relative;
color: var(--link);
white-space: nowrap;
transition: 0.4s;
align-content: center;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 15%;
width: 0%;
border-bottom: 2px solid var(--fg);
transition: 0.4s;
}
a:hover:after {
width: 70%;
color: var(--hover);
}
a:hover {
color: var(--hover);
}
a:active {
color: var(--header);
}
.categories {
background-color: var(--bg);
display: flex;
justify-content: center;
}
.category {
margin: 0;
padding: 0rem 1rem;
border-left: .125rem solid var(--fg);
}
.category:first-child {
border-left: none;
}
.container {
flex: 1 1 auto;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
flex-direction: column;
flex-grow: 1;
height: 1%;
}