32 lines
1.6 KiB
CSS
32 lines
1.6 KiB
CSS
:root {
|
|
--site-bg: #1C1C1C;
|
|
--site-alt-bg: #272727;
|
|
}
|
|
|
|
* {box-sizing: border-box;}
|
|
|
|
body {background-color: var(--site-bg); color: #fffd; margin: 0; margin-top: 35px; font-family: 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;}
|
|
|
|
.header {line-height: 100%; opacity: .5; margin-bottom: 10px; font-size: 90%;}
|
|
|
|
.line {background-color: var(--site-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;}
|
|
|
|
h3 {color: #fff; display: flex; align-items: center; gap: 5px;}
|
|
.icon {fill: #fff5; width: 24px; height: 24px;}
|
|
|
|
.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: 5px 25px; margin: auto; max-width: 700px; padding-bottom: 25px; transition: padding .1s; 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 select {opacity: 0; float: left; position: relative; top: -60px; height: 50px; width: 100%; cursor: pointer;}
|