142 lines
3.5 KiB
CSS
142 lines
3.5 KiB
CSS
:root,
|
|
[lang^="en"],
|
|
[lang="en"] {
|
|
--md-typography-type: "regular";
|
|
--title-size: 1.25rem;
|
|
--title-weight: 500;
|
|
--subheading-size: 1.125rem;
|
|
--body-size: 1rem;
|
|
--body2-weight: 500;
|
|
--caption-size: 0.875rem;
|
|
--button-size: 1rem;
|
|
--button-weight: 500;
|
|
--button-text-transform: uppercase;
|
|
|
|
@media (min-width: 1024px) {
|
|
& {
|
|
--subheading-size: 1.0625rem;
|
|
--body-size: 0.9375rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
[lang^="zh"],
|
|
[lang="zh"],
|
|
[lang^="kr"],
|
|
[lang="kr"],
|
|
[lang^="ja"],
|
|
[lang="ja"] {
|
|
--md-typography-type: "dense";
|
|
--title-size: 1.4375rem;
|
|
--subheading-size: 1.1875rem;
|
|
--body-size: 1.0625rem;
|
|
--caption-size: 0.9375rem;
|
|
--button-size: 1.0625rem;
|
|
--button-text-transform: none;
|
|
|
|
@media (min-width: 1024px) {
|
|
& {
|
|
--subheading-size: 1.125rem;
|
|
--body-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--tutu-color-primary: #673ab7;
|
|
/* Deep Purple 500 */
|
|
--tutu-color-on-primary: white;
|
|
--tutu-color-primary-d: #512da8;
|
|
/* 700 */
|
|
--tutu-color-on-primary-d: white;
|
|
--tutu-color-primary-dd: #4527a0;
|
|
/* 800 */
|
|
--tutu-color-on-primary-dd: white;
|
|
--tutu-color-primary-l: #9575cd;
|
|
/* 200 */
|
|
--tutu-color-on-primary-l: white;
|
|
--tutu-color-primary-ll: #b39ddb;
|
|
/* 100 */
|
|
--tutu-color-on-primary-ll: black;
|
|
|
|
--tutu-color-secondary: #ffd740;
|
|
/* Amber A200 */
|
|
--tutu-color-on-secondary: black;
|
|
|
|
--tutu-color-surface-l: white;
|
|
--tutu-color-surface: #fafafa;
|
|
--tutu-color-surface-d: #99999928;
|
|
--tutu-color-surface-dd: #99999920;
|
|
--tutu-color-on-surface: black;
|
|
--tutu-color-secondary-text-on-surface: rgba(0, 0, 0, 0.5);
|
|
--tutu-color-error-on-surface: #d32f2f;
|
|
--tutu-color-inactive-on-surface: #757575;
|
|
|
|
--tutu-shadow-e1: 0px 1px 2px 0px #9e9e9e;
|
|
/* Switch */
|
|
--tutu-shadow-e2: 0px 2px 4px 0px #9e9e9e;
|
|
/* (Resting) cards, raised button, quick entry / search bar */
|
|
--tutu-shadow-e3: 0px 3px 6px 0px #9e9e9e;
|
|
/* Refresh indicator, quick entry / search bar (scrolled) */
|
|
--tutu-shadow-e4: 0px 4px 8px 0px #9e9e9e;
|
|
/* App bar */
|
|
--tutu-shadow-e6: 0px 6px 12px 0px #9e9e9e;
|
|
/* Snack bar, FAB (resting) */
|
|
--tutu-shadow-e8: 0px 8px 16px 0px #9e9e9e;
|
|
/* Menu, (picked-up) cards, (pressed) raise button */
|
|
--tutu-shadow-e9: 0px 9px 18px 0px #9e9e9e;
|
|
/* Submenu (+1dp for each submenu) */
|
|
--tutu-shadow-e12: 0px 12px 24px 0px #9e9e9e;
|
|
/* (pressed) FAB */
|
|
--tutu-shadow-e16: 0px 16px 32px 0px #9e9e9e;
|
|
/* Nav drawer, right drawer, modal bottom sheet */
|
|
--tutu-shadow-e24: 0px 24px 48px 0px #9e9e9e;
|
|
/* Dialog, picker */
|
|
|
|
--tutu-anim-curve-std: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--tutu-anim-curve-deceleration: cubic-bezier(0, 0, 0.2, 1);
|
|
--tutu-anim-curve-aceleration: cubic-bezier(0.4, 0, 1, 1);
|
|
--tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);
|
|
|
|
@media (max-width: 300px) {
|
|
/* XS screen, like wearables */
|
|
& {
|
|
--tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
/* Mobile */
|
|
& {
|
|
--tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
/* Tablet */
|
|
& {
|
|
--tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std);
|
|
}
|
|
}
|
|
|
|
/* Desktop */
|
|
--tutu-transition-shadow: box-shadow 175ms var(--tutu-anim-curve-std);
|
|
|
|
--tutu-zidx-nav: 1100;
|
|
}
|
|
|
|
* {
|
|
font-family:
|
|
Roboto,
|
|
"Noto Sans",
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
sans-serif;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-size: var(--body-size, 1rem);
|
|
}
|