134 lines
3.3 KiB
CSS
134 lines
3.3 KiB
CSS
|
@tailwind base;
|
||
|
|
@tailwind components;
|
||
|
|
@tailwind utilities;
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Cash Sans;
|
||
|
|
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
|
||
|
|
format("woff2");
|
||
|
|
font-weight: 400;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Cash Sans;
|
||
|
|
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
|
||
|
|
format("woff2");
|
||
|
|
font-weight: 500;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Cash Sans;
|
||
|
|
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Semibold.woff2)
|
||
|
|
format("woff2");
|
||
|
|
font-weight: 600;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: Cash Sans;
|
||
|
|
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Bold.woff2)
|
||
|
|
format("woff2");
|
||
|
|
font-weight: 700;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer base {
|
||
|
|
:root {
|
||
|
|
/* 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 */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes appear-top {
|
||
|
|
0% {
|
||
|
|
transform: translateY(-50%);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* view transitions */
|
||
|
|
a.transitioning .home-page-server-name,
|
||
|
|
.detail-page-server-name {
|
||
|
|
view-transition-name: server-name;
|
||
|
|
}
|