wurstscript.github.io/_sass/theme-default.scss at master · wurstscript/wurstscript.github.io · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
:root {

    --color-primary: hsl(181, 49%, 50%);
    --color-primary-light: hsl(181, 49%, 55%);
    --color-primary-lightest: hsl(181, 49%, 70%);
    --color-primary-dark: hsl(181, 49%, 45%);
    --color-primary-darker: hsl(181, 49%, 40%);
    --color-primary-darkest: hsl(181, 49%, 35%);
    --color-green: hsl(129, 38%, 61%);
    --color-green-lightest: hsl(129, 38%, 81%);
    --color-green-dark: hsl(129, 38%, 56%);
    --color-green-darker: hsl(129, 38%, 51%);
    --color-green-darkest: hsl(129, 38%, 46%);
    --color-red: hsl(7, 90%, 69%);
    --color-red-lightest: hsl(7, 90%, 89%);
    --color-red-dark: hsl(7, 90%, 64%);
    --color-red-darker: hsl(7, 90%, 59%);
    --color-red-darkest: hsl(7, 90%, 54%);
    --color-blue: hsl(200, 82%, 64%);
    --color-blue-lightest: hsl(200, 82%, 84%);
    --color-blue-dark: hsl(200, 82%, 59%);
    --color-blue-darker: hsl(200, 82%, 54%);
    --color-blue-darkest: hsl(200, 82%, 49%);
    --color-orange: hsl(28, 93%, 58%);
    --color-orange-lightest: hsl(28, 93%, 78%);
    --color-orange-dark: hsl(28, 93%, 53%);
    --color-orange-darker: hsl(28, 93%, 48%);
    --color-orange-darkest: hsl(28, 93%, 43%);
    --color-pink: hsl(334, 78%, 62%);
    --color-pink-lightest: hsl(334, 78%, 82%);
    --color-pink-dark: hsl(334, 78%, 57%);
    --color-pink-darker: hsl(334, 78%, 52%);
    --color-pink-darkest: hsl(334, 78%, 47%);
    --color-purple: hsl(283, 45%, 45%);
    --color-purple-lightest: hsl(283, 45%, 65%);
    --color-purple-dark: hsl(283, 45%, 40%);
    --color-purple-darker: hsl(283, 45%, 35%);
    --color-purple-darkest: hsl(283, 45%, 30%);

    --banner-color: hsl(216, 24%, 31%);
    --text-color: hsl(216, 24%, 31%);
    --text-color-dark: hsl(216, 24%, 16%);
    --text-color-secondary: hsl(216, 24%, 41%);
    --grey: hsl(216, 24%, 41%);
    --light-grey: hsl(216, 24%, 46%);
    --black: #000;
    --smoky-white: #f5f5f5;
    --smoky-grey: #fafafa;
    --divider: hsl(0, 0%, 94%);
    --divider-dark: hsl(0, 0%, 89%);
    --divider-darker: hsl(0, 0%, 84%);
}

@media (prefers-color-scheme: dark) {
  /* For the scrollbar track (background) */
  ::-webkit-scrollbar {
      background-color: #2e2e2e; /* Dark grey background */
  }

  /* For the scrollbar handle */
  ::-webkit-scrollbar-thumb {
      background-color: #555; /* Darker grey scrollbar handle */
      border-radius: 6px; /* Rounded corners on the scrollbar handle */
      border: 3px solid #2e2e2e; /* Creates a small border with the same color as the track */
  }

  /* For the scrollbar handle on hover */
  ::-webkit-scrollbar-thumb:hover {
      background-color: #888; /* Lighter grey on hover */
  }
  /*
   * Dark Colors
   * -------------------------------------------
   */

  body {
    --color-primary: hsl(181, 49%, 50%);
    --color-primary-light: hsl(181, 49%, 55%);
    --color-primary-lightest: hsl(181, 49%, 70%);
    --color-primary-dark: hsl(181, 49%, 45%);
    --color-primary-darker: hsl(181, 49%, 40%);
    --color-primary-darkest: hsl(181, 49%, 35%);
    --color-green: hsl(129, 38%, 61%);
    --color-green-lightest: hsl(129, 38%, 81%);
    --color-green-dark: hsl(129, 38%, 56%);
    --color-green-darker: hsl(129, 38%, 51%);
    --color-green-darkest: hsl(129, 38%, 46%);
    --color-red: hsl(7, 90%, 69%);
    --color-red-lightest: hsl(7, 90%, 89%);
    --color-red-dark: hsl(7, 90%, 64%);
    --color-red-darker: hsl(7, 90%, 59%);
    --color-red-darkest: hsl(7, 90%, 54%);
    --color-blue: hsl(200, 82%, 64%);
    --color-blue-lightest: hsl(200, 82%, 84%);
    --color-blue-dark: hsl(200, 82%, 59%);
    --color-blue-darker: hsl(200, 82%, 54%);
    --color-blue-darkest: hsl(200, 82%, 49%);
    --color-orange: hsl(28, 93%, 58%);
    --color-orange-lightest: hsl(28, 93%, 78%);
    --color-orange-dark: hsl(28, 93%, 53%);
    --color-orange-darker: hsl(28, 93%, 48%);
    --color-orange-darkest: hsl(28, 93%, 43%);
    --color-pink: hsl(334, 78%, 62%);
    --color-pink-lightest: hsl(334, 78%, 82%);
    --color-pink-dark: hsl(334, 78%, 57%);
    --color-pink-darker: hsl(334, 78%, 52%);
    --color-pink-darkest: hsl(334, 78%, 47%);
    --color-purple: hsl(283, 45%, 45%);
    --color-purple-lightest: hsl(283, 45%, 65%);
    --color-purple-dark: hsl(283, 45%, 40%);
    --color-purple-darker: hsl(283, 45%, 35%);
    --color-purple-darkest: hsl(283, 45%, 30%);

    --banner-color: hsl(216, 24%, 31%);
    --text-color: hsl(225, 25%, 97%);
    --text-color-dark: hsl(225, 25%, 82%);
    --text-color-secondary: hsl(216, 24%, 41%);
    --grey: hsl(216, 24%, 41%);
    --light-grey: hsl(216, 24%, 46%);
    --black: #000;
    --smoky-white: #1e2023;
    --smoky-grey: #222428;
    --divider: #383a3e;
    --divider-dark: #222428;
    --divider-darker: #1e2023;
  }
}