45 lines
2.2 KiB
CSS
45 lines
2.2 KiB
CSS
:root {
|
|
--site-bg: #1C1C1C;
|
|
--alt-bg: #303030;
|
|
--alt-bg2: #242424;
|
|
--button-bg: #454545;
|
|
--button-hover-bg: #505050;
|
|
--border-color: #3E3E3E;
|
|
--border-color2: #1f1f1f;
|
|
}
|
|
|
|
* {box-sizing: border-box;}
|
|
|
|
body {background-color: var(--site-bg); color: #fffd; margin: 0; margin-top: 35px; font-family: Ubuntu, sans-serif;}
|
|
|
|
.container {max-width: 700px; padding: 25px; margin: auto;}
|
|
.departure-grid {display: grid; grid-template-columns: 30px 1fr max-content max-content; gap: 10px 20px; line-height: 31px;}
|
|
|
|
.departure-grid .header {line-height: 100%; opacity: .5; margin-bottom: 10px; font-size: 90%;}
|
|
|
|
.line {background-color: var(--alt-bg); border-radius: 3px; box-shadow: 0 0 5px 0 #0004; text-align: center; font-weight: 700; width: 30px; height: 30px; color: #fff; text-shadow: 0 0 15px #000;}
|
|
.last-stop {font-weight: 700;}
|
|
.departure {text-align: right;}
|
|
.delay {text-align: right; color: #ff6e6e; font-size: 80%;}
|
|
|
|
.line.type1 {background-color: #F0BE32;}
|
|
.line.type2 {background-color: #1E9641;}
|
|
.line.type3 {background-color: #CD2837;}
|
|
|
|
.icon {fill: #fff; width: 24px; height: 24px;}
|
|
.icon.icon-dropdown {fill: #fff5;}
|
|
|
|
.clickable {cursor: pointer;}
|
|
|
|
.nav {position: fixed; top: 0; left: 0; width: 100%; z-index: 10;}
|
|
.nav .inner {background: linear-gradient(to bottom, var(--site-bg) 70%, transparent 100%); padding: 20px 25px; margin: auto; max-width: 700px; padding-bottom: 30px; transition: padding .1s; display: grid; grid-template-columns: 1fr max-content; gap: 15px; align-items: center;}
|
|
.nav .inner > * {position: relative;}
|
|
.nav.top .inner {padding-bottom: 0px;}
|
|
.nav .inner::after {content: ""; position: fixed; bottom: 0; left: 0; height: 20px; width: 100%; background: linear-gradient(to top, var(--site-bg) 0%, transparent 100%);}
|
|
|
|
.nav .inner h3 {margin: 0; color: #fff; display: flex; gap: 5px; font-size: 20px;}
|
|
.nav .inner select {opacity: 0; float: left; position: absolute; top: 0px; height: 110%; width: 100%; cursor: pointer;}
|
|
|
|
button, input {background: var(--button-bg); border: 0px; border-radius: 6px; color: #fff; padding: 10px 14px; font: inherit;}
|
|
button, input[type=submit] {cursor: pointer;}
|
|
:is(button, input[type=submit]):hover {background: var(--button-hover-bg);} |