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}