sloth.css/src/_config.css at e635fb7fda1d97717187215c4e7106aa22880d43 · devmount/sloth.css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
:root {
  /* Enable color schemes */
  color-scheme: light dark;

  /* Color definitions */
  --color-accent:        #e5aa70;
  --color-bg-base:       light-dark(#f4f4f4, #202631);
  --color-bg-page:       light-dark(#ffffff, #161a22);
  --color-border:        light-dark(#d5d5d5, #252b36);
  --color-selection:     #9e9e9e;
  --color-text-light:    #464646;
  --color-text-dark:     #e8e8ec;
  --color-text-em:       light-dark(#151515, #ffffff);
  --color-text-emverted: light-dark(#ffffff, #151515);
  --color-text-muted:    light-dark(#70777f, #90979f);
  --color-neutral:       #70777f;
  --color-positive:      #238636;
  --color-negative:      #da3633;
  --color-shadow:        light-dark(#00000033, #00000088);

  /* Color derivations */
  --color-text-base:     light-dark(var(--color-text-light), var(--color-text-dark));
  --color-text-inverted: light-dark(var(--color-text-dark), var(--color-text-light));
  --color-link:          light-dark(color-mix(in hsl, var(--color-accent) 70%, black), var(--color-accent));
  --color-link-hover:    light-dark(color-mix(in hsl, var(--color-accent) 90%, black), color-mix(in hsl, var(--color-accent) 70%, white));
  --color-outline:       color-mix(in srgb, var(--color-accent) 35%, transparent);
  --color-bg-accent:     color-mix(in hsl, var(--color-accent) 80%, black);
  --color-bg-muted:      color-mix(in srgb, var(--color-neutral) 15%, transparent);
  --color-bg-positive:   color-mix(in srgb, var(--color-positive) 15%, transparent);
  --color-bg-negative:   color-mix(in srgb, var(--color-negative) 15%, transparent);

  /* Screen dimensions */
  --screen-xs:  30rem; /*  480px */
  --screen-sm:  40rem; /*  640px */
  --screen-md:  48rem; /*  768px */
  --screen-lg:  64rem; /* 1024px */
  --screen-xl:  80rem; /* 1280px */
  --screen-2xl: 96rem; /* 1536px */

  /* Transitions */
  --transition-color:     color .1s ease, border-color .1s ease, outline-color .1s ease, background-color .1s ease;
  --transition-outline:   outline-width .1s ease;
  --transition-underline: text-underline-offset .1s ease;
  --transition-transform: transform .15s ease;
  --transition-opacity:   opacity .15s ease;
  --transition-spacing:   padding .15s ease, margin .15s ease;

  /* Fonts & text */
  --font-size:   16px; /* defines 1rem */
  --font-sans:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  --font-mono:   "SF Mono", "Segoe UI Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Courier, monospace;
  --line-height: 1.4rem;

  /* Shadows */
  --shadow-border: 0 0 0 1px inset;
  --shadow-inset:  0 2px .25rem 0 inset;
  --shadow-float:  0 .25rem .75rem -.4rem;

}

/* Animations */
@keyframes background-slide-x {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes pulse {
  50%  { box-shadow: 0 0 0 0 var(--color-bg-accent); }
  100% { box-shadow: 0 0 0 .5rem rgba(0, 0, 0, 0);   }
}
@keyframes rotate {
  0%   { transform: rotate(0);      }
  100% { transform: rotate(360deg); }
}