traxxx/assets/css/_theme.scss

128 lines
3.2 KiB
SCSS
Raw Normal View History

2019-10-29 00:47:16 +00:00
/* $primary: #ff886c; */
$breakpoint0: 540px;
$breakpoint: 720px;
$breakpoint2: 900px;
$breakpoint3: 1200px;
$breakpoint4: 1500px;
2019-10-29 00:47:16 +00:00
$primary: #ff6c88;
$background: #fff;
2019-11-14 00:18:19 +00:00
$background-dim: #fafafa;
$text: #222;
$text-contrast: #fff;
$shadow: rgba(0, 0, 0, .5);
$shadow-extreme: rgba(0, 0, 0, .9);
$shadow-strong: rgba(0, 0, 0, .7);
$shadow-weak: rgba(0, 0, 0, .2);
$shadow-hint: rgba(0, 0, 0, .1);
$highlight: rgba(255, 255, 255, .5);
$highlight-extreme: rgba(255, 255, 255, .9);
$highlight-strong: rgba(255, 255, 255, .7);
$highlight-weak: rgba(255, 255, 255, .2);
$highlight-hint: rgba(255, 255, 255, .075);
2020-03-23 03:58:23 +00:00
$logo-shadow: drop-shadow(1px 0 0 var(--shadow-weak)) drop-shadow(-1px 0 0 var(--shadow-weak)) drop-shadow(0 1px 0 var(--shadow-weak)) drop-shadow(0 -1px 0 var(--shadow-weak));
$logo-highlight: drop-shadow(0 0 1px var(--highlight));
2019-12-10 21:35:00 +00:00
$profile: #222;
$tile: #2a2a2a;
$link: #dd6688;
$empty: #333;
$male: #0af;
$female: #f0a;
2020-03-23 00:43:49 +00:00
:root {
--primary: #ff6c88;
--text-dark: #222;
--text-light: #fff;
--darken: rgba(0, 0, 0, .5);
--darken-strong: rgba(0, 0, 0, .7);
--darken-extreme: rgba(0, 0, 0, .9);
2020-03-23 00:43:49 +00:00
--darken-weak: rgba(0, 0, 0, .2);
--darken-hint: rgba(0, 0, 0, .1);
2020-03-23 00:43:49 +00:00
--lighten: rgba(255, 255, 255, .5);
--lighten-strong: rgba(255, 255, 255, .7);
--lighten-extreme: rgba(255, 255, 255, .9);
2020-03-23 00:43:49 +00:00
--lighten-weak: rgba(255, 255, 255, .2);
--lighten-hint: rgba(255, 255, 255, .1);
2020-03-23 03:58:23 +00:00
--logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
--logo-highlight: drop-shadow(0 0 1px $highlight);
2020-05-25 00:02:28 +00:00
--male: #0af;
--female: #f0a;
--alert: #f00;
--warn: #fa0;
2020-05-25 02:39:58 +00:00
--success: #5c2;
2020-03-23 00:43:49 +00:00
}
.light {
--text: #222;
--text-contrast: #fff;
2020-03-23 03:58:23 +00:00
2020-03-23 00:43:49 +00:00
--background: #fff;
--background-dim: #fafafa;
2020-05-25 00:02:28 +00:00
--background-soft: #fdfdfd;
2020-03-23 00:43:49 +00:00
--profile: #222;
--tile: #2a2a2a;
--link: #dd6688;
2020-03-23 00:43:49 +00:00
--empty: #333;
2020-05-25 00:02:28 +00:00
--crease: #eaeaea;
2020-03-23 00:43:49 +00:00
--shadow: rgba(0, 0, 0, .5);
--shadow-extreme: rgba(0, 0, 0, .9);
--shadow-strong: rgba(0, 0, 0, .7);
--shadow-modest: rgba(0, 0, 0, .3);
2020-03-23 00:43:49 +00:00
--shadow-weak: rgba(0, 0, 0, .2);
--shadow-hint: rgba(0, 0, 0, .1);
--highlight: rgba(255, 255, 255, .5);
--highlight-extreme: rgba(255, 255, 255, .9);
--highlight-strong: rgba(255, 255, 255, .7);
--highlight-modest: rgba(255, 255, 255, .3);
2020-03-23 00:43:49 +00:00
--highlight-weak: rgba(255, 255, 255, .2);
--highlight-hint: rgba(255, 255, 255, .075);
}
.dark {
--text: #fff;
--text-contrast: #222;
2020-03-23 03:58:23 +00:00
--background: #222;
--background-dim: #181818;
2020-05-25 00:02:28 +00:00
--background-soft: #111;
2020-03-23 00:43:49 +00:00
--profile: #222;
--tile: #2a2a2a;
--link: #dd6688;
2020-03-23 00:43:49 +00:00
--empty: #333;
2020-05-25 00:02:28 +00:00
--crease: #222;
2020-03-23 00:43:49 +00:00
--shadow: rgba(255, 255, 255, .5);
--shadow-extreme: rgba(255, 255, 255, .9);
--shadow-strong: rgba(255, 255, 255, .7);
--shadow-modest: rgba(255, 255, 255, .3);
2020-03-23 00:43:49 +00:00
--shadow-weak: rgba(255, 255, 255, .2);
--shadow-hint: rgba(255, 255, 255, .075);
--highlight: rgba(0, 0, 0, .5);
--highlight-extreme: rgba(0, 0, 0, .9);
--highlight-strong: rgba(0, 0, 0, .7);
--highlight-modest: rgba(0, 0, 0, .3);
2020-03-23 00:43:49 +00:00
--highlight-weak: rgba(0, 0, 0, .2);
--highlight-hint: rgba(0, 0, 0, .1);
}