iconoir/iconoir.com/styles/theme.css

101 lines
1.7 KiB
CSS

:root {
/* Colors */
--black-40: rgba(0, 0, 0, 0.4);
--black-60: rgba(0, 0, 0, 0.6);
--black-80: rgba(0, 0, 0, 0.8);
--black: #000000;
--darker-gray: #484848;
--dark-gray: #626262;
--pink: #ffebe4;
--blue: #e4f9ff;
--green: #e4ffe4;
--gray: #e7e7e7;
--gray-100: #cdcdd3;
--gray-200: #f9f9fa;
--g0: #1c2226;
--g1: #4f5d69;
--g4: #bcc9d2;
--g5: #e0e6eb;
--g6: #ecf0f4;
--g7: #f8fafd;
--light-gray: #f2f2f2;
--lighter-gray: #f9f9f9;
--super-light-gray: #fbfbfb;
--white-80: rgba(255, 255, 255, 0.8);
--white: #ffffff;
--accent: #1e5af6;
--code-family: 'IBM Plex Mono', monospace;
--font-family: 'DM Sans', sans-serif;
}
body {
margin: 0;
background: var(--white);
overflow-x: hidden;
}
a {
color: var(--g0);
text-decoration: underline;
}
* {
font-weight: 400;
font-family: var(--font-family);
letter-spacing: -0.02em;
}
@keyframes bottomAnimation {
0% {
transform: translateX(-50%) translateY(200px);
opacity: 0;
}
10% {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.bottom-notification {
position: fixed;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
text-align: center;
background: var(--g0);
color: var(--white);
border-radius: 10px;
padding: 15px 30px;
text-align: center;
font-size: 15px;
font-weight: 700;
animation: 3s cubic-bezier(0.16, 1, 0.3, 1) bottomAnimation;
z-index: 2000;
}
.carbon-img img {
border-radius: 10px;
}
::placeholder {
color: var(--g1);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: var(--g1);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: var(--g1);
}