adam/aprsNotifyJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move css into separate files

Browse Source
This commit is contained in:
Adam Goldsmith 2018-08-01 10:13:14 +01:00
parent 8ec3b8d230
commit cd79de89e4
4 changed files with 71 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/index.css Normal file
View File

@ -0,0 +1,21 @@
table.stations {
border-collapse: collapse;
}
table.stations td, table.stations th{
border: 1px solid black;
padding: 2px;
}
table.stations tr.timedOut {
background-color: red;
}
table.stations tr.lowVoltage {
background-color: yellow;
}
table.stations tr.neverHeard {
background-color: purple;
color: #eee;
}

24
src/index.html
View File

@ -1,29 +1,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="./index.js"></script> <script src="./index.js"></script>
<style> <link rel="stylesheet" type="text/css" href="index.css">
table.stations {
border-collapse: collapse;
}
table.stations td, table.stations th{
border: 1px solid black;
padding: 2px;
}
table.stations tr.timedOut {
background-color: red;
}
table.stations tr.lowVoltage {
background-color: yellow;
}
table.stations tr.neverHeard {
background-color: purple;
color: #eee;
}
</style>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">

48
src/map.css Normal file
View File

@ -0,0 +1,48 @@
html, body {
height: 100%;
margin: 0;
}
.map {
height: 100%;
width: 100%;
}
.ol-control.layer-toggles {
top: 0.5em;
right: 0.5em;
background-color: rgba(70, 115, 164, 0.7);
color: #eee;
white-space: nowrap;
max-height: calc(100vh - 1em);
overflow-y: auto;
}
.layer-toggles > div {
margin: 0.5em;
margin-right: 1em;
}
.ol-control.layer-toggles:hover {
background-color: rgba(0,60,136,0.7);
}
.layer-toggles > div > label {
display: block;
}
.expand {
display: none;
}
.expand + span::before {
content: '\25B6';
}
.expand:checked + span::before {
content: '\25BC';
}
.expand ~ .collapsible-content {
display: none;
}
.expand:checked ~ .collapsible-content {
display: block;
}
.collapsible-content {
margin-left: 0.8em;
}
.collapsible-content label {
display: block;
}

51
src/map.html
View File

@ -1,56 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<style> <link rel="stylesheet" type="text/css" href="map.css">
html, body {
height: 100%;
margin: 0;
}
.map {
height: 100%;
width: 100%;
}
.ol-control.layer-toggles {
top: 0.5em;
right: 0.5em;
background-color: rgba(70, 115, 164, 0.7);
color: #eee;
white-space: nowrap;
max-height: calc(100vh - 1em);
overflow-y: auto;
}
.layer-toggles > div {
margin: 0.5em;
margin-right: 1em;
}
.ol-control.layer-toggles:hover {
background-color: rgba(0,60,136,0.7);
}
.layer-toggles > div > label {
display: block;
}
.expand {
display: none;
}
.expand + span::before {
content: '\25B6';
}
.expand:checked + span::before {
content: '\25BC';
}
.expand ~ .collapsible-content {
display: none;
}
.expand:checked ~ .collapsible-content {
display: block;
}
.collapsible-content {
margin-left: 0.8em;
}
.collapsible-content label {
display: block;
}
</style>
<title>OpenLayers example</title> <title>OpenLayers example</title>
</head> </head>
<body> <body>