iconoir/iconoir.com/styles/theme.css
Luca Burgio 2720cccb2b
feat: new website (#261)
* add: website redesign and optimization

* fix: additional improvements in home, support, and doc

* fix: typography and spacing

* fix: moved praise to support page

* fix: redesigned support page

* feat: added new pillars and paragraphs

* fix: changed table colors

* fix: shortened home

* fix: small improvements to support page

* fix: optimized mobile version

* feat: added Ad on mobile

* Remove outdated color prop from CurrentVersion

* Small format fixes

* fix: removed prefixes in Slider.tsx

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: removed prefixes in Button.tsx

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: removed unused const

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: correctly renamed const Overlay

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: applied same button style to the Copy button

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: Removed unnecessary prefix properties, fixed transition

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: Added non prefixed property in Stats.tsx

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: Added transition effect on mouse out as well

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: Removed a repeated property in Input.tsx

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: Changed home title

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

* fix: Changed icons to icon

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
2023-03-19 21:23:43 +01:00

108 lines
1.8 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;
padding: 50px 30px;
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);
}
@media (min-width: 1100px) {
body {
padding: 30px 50px 50px 50px;
}
}