style.css (view raw)
1:root {
2 --jumbotron-padding-y: 3rem;
3 /* Using Open Color 1.9.1: https://yeun.github.io/open-color/ */
4 --background0: #212529; /* GRAY 9 */
5 --background1: #343a40; /* GRAY 8 */
6 --accent: #1864ab; /* BLUE 9 */
7 --title: #339af0; /* BLUE 5 */
8 --text: #f8f9fa; /* GRAY 0 */
9 }
10
11 .jumbotron {
12 padding-top: var(--jumbotron-padding-y);
13 padding-bottom: var(--jumbotron-padding-y);
14 margin-bottom: 0;
15 background-color: var(--background1);
16 }
17 @media (min-width: 768px) {
18 .jumbotron {
19 padding-top: calc(var(--jumbotron-padding-y) * 2);
20 padding-bottom: calc(var(--jumbotron-padding-y) * 2);
21 }
22 }
23
24 .jumbotron p:last-child {
25 margin-bottom: 0;
26 }
27
28 .jumbotron-heading {
29 font-weight: 300;
30 color: var(--title);
31 }
32
33 .jumbotron .container {
34 max-width: 40rem;
35 }
36
37 footer {
38 padding-top: 3rem;
39 padding-bottom: 3rem;
40 }
41
42 footer p {
43 margin-bottom: .25rem;
44 }
45
46 .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
47
48 .entry-disabled {
49 opacity: 0.25
50 }
51
52#main_container, .jumbotron {
53 padding: 20px!important;
54}
55
56.card-controls {
57 flex-direction: row-reverse;
58}
59
60.card-text {
61 text-decoration: underline !important;
62}
63
64body {
65 background-color: var(--background0);
66 color: var(--text);
67 color-scheme: dark;
68}
69
70.lead {
71 color: var(--text);
72}
73
74.btn-go {
75 color: var(--text);
76 background-color: var(--accent);
77 border-color: var(--accent);
78}
79
80a {
81 color: var(--text);
82 cursor: pointer;
83}
84a:hover {
85 color: var(--text);
86}
87
88.my-card{
89 background-color: var(--background1);
90}
91
92#opacity_range {
93 accent-color: var(--accent);
94}
95
96#month_input {
97 background-color: var(--background0);
98 color: var(--text);
99 color-scheme: dark;
100}