mirror of
https://github.com/block/bitcoin-treasury.git
synced 2025-04-19 14:41:18 +00:00
156 lines
3.6 KiB
CSS
156 lines
3.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* custom slate */
|
|
--slate: #393838;
|
|
|
|
/* block */
|
|
--block-teal: #13bbaf;
|
|
--block-orange: #ff4f00;
|
|
|
|
/* start arcade colors */
|
|
--constant-white: #ffffff;
|
|
--constant-black: #000000;
|
|
--grey-10: #101010;
|
|
--grey-20: #1e1e1e;
|
|
--grey-50: #666666;
|
|
--grey-60: #959595;
|
|
--grey-80: #cccccc;
|
|
--grey-85: #dadada;
|
|
--grey-90: #e8e8e8;
|
|
--grey-95: #f0f0f0;
|
|
--dark-grey-15: #1a1a1a;
|
|
--dark-grey-25: #232323;
|
|
--dark-grey-30: #2a2a2a;
|
|
--dark-grey-40: #333333;
|
|
--dark-grey-45: #595959;
|
|
--dark-grey-60: #878787;
|
|
--dark-grey-90: #e1e1e1;
|
|
|
|
--background-app: var(--constant-white);
|
|
--background-prominent: var(--grey-80);
|
|
--background-standard: var(--grey-90);
|
|
--background-subtle: var(--grey-95);
|
|
|
|
--border-divider: var(--grey-90);
|
|
--border-inverse: var(--constant-white);
|
|
--border-prominent: var(--grey-10);
|
|
--border-standard: var(--grey-60);
|
|
--border-subtle: var(--grey-90);
|
|
|
|
--icon-disabled: var(--grey-60);
|
|
--icon-extra-subtle: var(--grey-60);
|
|
--icon-inverse: var(--constant-white);
|
|
--icon-prominent: var(--grey-10);
|
|
--icon-standard: var(--grey-20);
|
|
--icon-subtle: var(--grey-50);
|
|
|
|
--text-placeholder: var(--grey-60);
|
|
--text-prominent: var(--grey-10);
|
|
--text-standard: var(--grey-20);
|
|
--text-subtle: var(--grey-50);
|
|
|
|
&.dark {
|
|
--background-app: var(--constant-black);
|
|
--background-prominent: var(--dark-grey-40);
|
|
--background-standard: var(--dark-grey-25);
|
|
--background-subtle: var(--dark-grey-15);
|
|
|
|
--border-divider: var(--dark-grey-25);
|
|
--border-inverse: var(--constant-black);
|
|
--border-prominent: var(--constant-white);
|
|
--border-standard: var(--dark-grey-45);
|
|
--border-subtle: var(--dark-grey-25);
|
|
|
|
--icon-disabled: var(--dark-grey-45);
|
|
--icon-extra-subtle: var(--dark-grey-45);
|
|
--icon-inverse: var(--constant-black);
|
|
--icon-prominent: var(--constant-white);
|
|
--icon-standard: var(--dark-grey-90);
|
|
--icon-subtle: var(--dark-grey-60);
|
|
|
|
--text-placeholder: var(--dark-grey-45);
|
|
--text-prominent: var(--constant-white);
|
|
--text-standard: var(--dark-grey-90);
|
|
--text-subtle: var(--dark-grey-60);
|
|
}
|
|
/* end arcade colors */
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Cash Sans";
|
|
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
|
|
format("woff2"),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
|
|
format("woff");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Cash Sans Mono";
|
|
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2)
|
|
format("woff2"),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff)
|
|
format("woff");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* flap overrides */
|
|
|
|
.perspective-1000 {
|
|
perspective: 1000px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* Loading bar animation */
|
|
@keyframes loading {
|
|
0% {
|
|
width: 0;
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
width: 60%;
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
width: 90%;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.loading-bar {
|
|
animation: loading 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
width: 0;
|
|
}
|
|
|
|
/* Fade in animation */
|
|
.transition-opacity {
|
|
transition-property: opacity;
|
|
}
|
|
|
|
.duration-1000 {
|
|
transition-duration: 1000ms;
|
|
}
|
|
|
|
.ease-in-out {
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.opacity-0 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.opacity-100 {
|
|
opacity: 1;
|
|
}
|