public_library_map/website/style.css

359 lines
5.3 KiB
CSS
Raw Permalink Normal View History

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
html,
2021-01-17 19:47:25 +11:00
body {
font-family: "Calibri", Arial, Tahoma, sans-serif;
2021-01-17 19:47:25 +11:00
margin: 0;
padding: 0;
}
code,
pre {
font-family: "Jetbrains Mono", "Consolas", "Courier New", monospace;
background-color: #eee;
padding: 0 0.5em;
2021-01-24 13:06:51 +11:00
word-wrap: break-word;
}
a,
a:active {
color: #FF3961;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
header {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: auto 1fr auto;
font-family: "Calibri", Arial, Tahoma, sans-serif;
background-color: #000;
color: #fff;
}
/* NAVIGATION */
/* ========== */
nav {
margin: 0;
padding: 0;
grid-row: 3;
}
nav ul {
font-family: "Calibri", Arial, Tahoma, sans-serif;
background-color: #000;
margin: 0;
padding-left: 2em;
}
nav li {
padding: 0.5em;
border: 1px solid white;
border-bottom: none;
background-color: #000;
color: #fff;
display: inline-block;
}
nav li a {
color: #fff;
}
nav li a:active,
nav li a:hover {
color: #FF3961;
}
.active-tab,
.active-tab {
color: #000;
background-color: #fff;
border-top-right-radius: 10px;
}
#title {
display: flex;
align-items: center;
margin: 0;
padding: 0.5em 1em;
}
#logo {
height: 4em;
margin: 0 1em;
}
/* loading */
/* ======= */
2021-01-17 19:47:25 +11:00
#loading {
font-family: "Calibri", Arial, Tahoma, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 1em;
color: #fff;
background-color: #FF3961;
}
#mapid {
2021-01-17 19:47:25 +11:00
height: 75vh;
width: 90vw;
margin: 0 auto 5em;
2021-01-17 19:47:25 +11:00
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin: 10px 10px -5px 0;
}
.leaflet-control-layers-expanded {
width: 16em;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
width: 16em;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.intro {
margin: 0.5em 1em;
border-radius: 5px;
font-family: "Calibri", Arial, Tahoma, sans-serif;
}
footer {
border-top: 1px solid #eee;
width: 100%;
text-align: center;
2021-01-17 19:47:25 +11:00
}
#mode-switch {
display: grid;
2021-01-18 10:46:01 +11:00
grid-template-columns: 1fr auto;
width: 90vw;
min-width: 90vw;
margin: auto;
background-color: #000;
2021-01-17 19:47:25 +11:00
}
#mode-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
2021-01-18 10:46:01 +11:00
border: 0;
2021-01-17 19:47:25 +11:00
border-radius: 0;
2021-01-18 10:46:01 +11:00
color: #000;
2021-01-17 19:47:25 +11:00
background-color: #fff;
font-family: Tahoma, sans-serif;
2021-01-18 10:46:01 +11:00
width: fit-content;
margin: 5px 1em;
padding: 0.5em;
2021-01-17 19:47:25 +11:00
}
.info-page,
.sources,
.who-else {
max-width: 36em;
margin: 2em auto;
2021-01-17 19:47:25 +11:00
}
table {
border-collapse: collapse;
table-layout: fixed;
border: 1px solid #000;
margin: 0 auto 0 -25%;
width: 150%;
max-width: 54em;
2021-01-17 19:47:25 +11:00
}
thead {
color: #000;
background-color: #bbb;
height: 2em;
}
tbody tr:nth-child(odd) {
background-color: #eee;
}
tbody td {
border: 1px solid #aaa;
padding: 0.5em 1em;
}
ul#libraries {
list-style-type: none;
margin-top: 2em;
}
ul#libraries li {
margin-top: 0.5em;
}
#form {
display: grid;
grid: auto, auto;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
margin: 2em 0;
padding: 2em 0;
}
#form select,
#form button {
all: unset;
border: 2px solid #333;
padding: 0.5em;
margin: 0.5em;
cursor: pointer;
}
#form button {
margin-top:2em;
border: 4px solid #FF3961;
text-align: center;
}
2024-06-29 11:43:14 +10:00
/* rules map key styles */
.fine-free {
background-color: #4dac26
}
.fine-free-unconfirmed {
background-color: #b8e186
}
.fine-free-kids {
background-color: #f1b6da
}
.fine-varies {
background-color: #abd9e9
}
.fine-all {
background-color: #d01c8b
}
.fine-unknown {
background-color: #bbb
}
2024-06-29 12:01:10 +10:00
.two-weeks {
background:
radial-gradient(4px 4px at 6px 6px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 16px 6px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 2px 12px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 12px 12px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 20px 12px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 8px 18px, #3a3a3a 50%, transparent 75%);
background-repeat: no-repeat;
border: 1px solid black;
}
.three-weeks {
background: repeating-linear-gradient(
0deg,
#3a3a3a,
#3a3a3a 2px,
#fff 2px,
#3a3a3a 4px
)
}
.four-weeks {
background: repeating-linear-gradient(
45deg,
#3a3a3a,
#3a3a3a 3px,
#fff 1px,
#3a3a3a 4px
)
}
.six-weeks {
background: repeating-linear-gradient(
135deg,
#fff,
#fff 8px,
#3a3a3a 2px,
#fff 10px
)
}
.unknown-weeks {
background-color: #bbb;
}
2024-06-29 11:43:14 +10:00
@media only screen and (max-width: 800px) {
nav ul {
margin-left: 0;
padding-left: 0;
}
nav li {
display: block;
margin: 0;
padding: 0.5em 0 0.5em 1em;
border-color: #777;
border-left: none;
border-right: none;
}
}
/* when below max width of para */
@media only screen and (max-width: 54em) {
.info-page,
.sources,
.who-else {
width: 95vw;
padding: 0 2.5vw;
}
table {
margin: 0 auto;
width: 100%;
max-width: 100vw;
font-size: smaller;
}
td {
line-break: anywhere;
}
}