krz/lincoln-crimes
Interactive visualizations of crime data in Lincoln, NE.
clone: git clone https://gitbay.org/krz/lincoln-crimes.git
main: assets/css/app.css · raw
1body {
2 background: #121212;
3}
4
5label {
6 color: #fff;
7 margin: 1rem 0 0.25rem 0;
8}
9
10.alert-warning {
11 color: rgb(249, 207, 0);
12 background-color: rgba(249, 207, 0, 0.25);
13 border-color: transparent;
14 margin: 2rem auto;
15}
16
17.custom-select {
18 background: #202020;
19 border: none;
20 color: #fff;
21}
22
23.custom-select:focus,
24.custom-select:active {
25 outline: 0;
26}
27
28.form-control,
29.form-control:focus,
30.form-control:active {
31 background: #202020;
32 border: none;
33 color: #fff;
34}
35
36.form-control:focus {
37 box-shadow: 0 0 0 0.2rem rgba(249, 207, 0, 0.25);
38}
39
40form {
41 margin: 2rem auto;
42}
43
44.js-plotly-plot .plotly .main-svg {
45 border-radius: 0.25rem;
46}
47
48.footer {
49 border-top: 1px solid #aaa;
50 margin: 2rem auto;
51 padding-top: 2rem;
52}
53
54.link,
55.link:hover {
56 color: rgb(249, 207, 0);
57}
58
59/* Toggle Button */
60.tgl {
61 display: none;
62}
63
64.tgl,
65.tgl:after,
66.tgl:before,
67.tgl *,
68.tgl *:after,
69.tgl *:before,
70.tgl + .tgl-btn {
71 box-sizing: border-box;
72}
73
74.tgl::-moz-selection,
75.tgl:after::-moz-selection,
76.tgl:before::-moz-selection,
77.tgl *::-moz-selection,
78.tgl *:after::-moz-selection,
79.tgl *:before::-moz-selection,
80.tgl + .tgl-btn::-moz-selection {
81 background: none;
82}
83
84.tgl::selection,
85.tgl:after::selection,
86.tgl:before::selection,
87.tgl *::selection,
88.tgl *:after::selection,
89.tgl *:before::selection,
90.tgl + .tgl-btn::selection {
91 background: none;
92}
93
94.tgl + .tgl-btn {
95 outline: 0;
96 display: block;
97 width: 4em;
98 height: 2em;
99 margin: 3px 0;
100 position: relative;
101 cursor: pointer;
102 -webkit-user-select: none;
103 -moz-user-select: none;
104 -ms-user-select: none;
105 user-select: none;
106}
107
108.tgl + .tgl-btn:after,
109.tgl + .tgl-btn:before {
110 position: relative;
111 display: block;
112 content: "";
113 width: 50%;
114 height: 100%;
115}
116
117.tgl + .tgl-btn:after {
118 left: 0;
119}
120
121.tgl + .tgl-btn:before {
122 display: none;
123}
124
125.tgl:checked + .tgl-btn:after {
126 left: 50%;
127}
128
129.tgl-light + .tgl-btn {
130 background: #3b3b3b;
131 border-radius: 2em;
132 padding: 2px;
133 transition: all 0.4s ease;
134}
135
136.tgl-light + .tgl-btn:after {
137 border-radius: 50%;
138 background: #121212;
139 transition: all 0.2s ease;
140}
141
142.tgl-light:checked + .tgl-btn {
143 background: rgb(249, 207, 0);
144}
145
146.btn-warning {
147 background: rgb(249, 207, 0);
148}
149
150.btn-warning:hover,
151.btn-warning:not(:disabled):not(.disabled).active,
152.btn-warning:not(:disabled):not(.disabled):active,
153.show > .btn-warning.dropdown-toggle {
154 background: rgb(199, 165, 0);
155 border-color: rgb(199, 165, 0);
156}