From ca8992b07aac8c5037f4ef7600a7637866f14100 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Sun, 29 Mar 2015 03:00:05 +0200 Subject: [PATCH] move css to style.css --- index.html | 293 +---------------------------------------------------- style.css | 290 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 291 insertions(+), 292 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 2c32351..6342a65 100644 --- a/index.html +++ b/index.html @@ -3,302 +3,11 @@ - + diff --git a/style.css b/style.css new file mode 100644 index 0000000..a5508ed --- /dev/null +++ b/style.css @@ -0,0 +1,290 @@ +.stroke-first { + paint-order: stroke; +} + +.tabs { + list-style: none; + display: flex; +} + +.tabs li { + flex: 1; + text-align: center; + padding: 0.5em; + cursor: pointer; +} + +.tabs li:hover { + background: rgba(0, 0, 0, 0.03); + color: #dc0067; +} + +.tabs .visible { + font-weight: bold; + border-bottom: 2pt solid black; +} + +.tab { + display: none; +} + +.tab.visible { + display: block; +} + +body { + margin: 0; + padding: 0; + font-family: 'Roboto Slab', serif; + font-size: 11pt; +} + +th.sort-header::selection { + background: transparent; +} + +th.sort-header { + cursor: pointer; +} + +table th.sort-header:after { + font-family: "ionicons"; + padding-left: 0.25em; + content: '\f10d'; + visibility: hidden; +} + +table th.sort-header:hover:after { + visibility: visible; +} + +table th.sort-up:after, table th.sort-down:after, table th.sort-down:hover:after { + visibility: visible; + opacity: 0.4; +} + +table th.sort-up:after { + content: '\f104'; +} + +table.attributes { + width: auto !important; +} + +table.attributes th { + text-align: left; + font-weight: bold; + vertical-align: top; + padding-right: 1em; + white-space: nowrap; +} + +table.attributes td { + text-align: left !important; +} + +.infobox .clients { + font-family: "ionicons"; + color: #1566A9; + word-spacing: -0.2em; +} + +.infobox { + position: relative; + box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24); + background: rgba(0, 0, 0, 0.02); + padding: 0.25em 0; +} + +button { + -webkit-tap-highlight-color: transparent; + font-family: "ionicons"; + box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24); + border-radius: 0.9em; + background: rgba(255, 255, 255, 0.7); + border: none; + cursor: pointer; + height: 1.8em; + width: 1.8em; + font-size: 20pt; + transition: box-shadow 0.5s, color 0.5s; + outline: none; +} + +button:hover { + background: white; + color: #dc0067; + box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); +} + +button:active { + box-shadow: inset 0px 5px 20px rgba(0, 0, 0, 0.19), inset 0px 3px 6px rgba(0, 0, 0, 0.23); +} + +button.close { + position: absolute; + right: 0.7em; + top: 0.7em; +} + +button.close:after { + content: "\f12a"; +} + +.sidebar h2, .sidebar h3 { + padding: 0 10pt; +} + +.sidebar p, .sidebar table, .sidebar pre, .sidebar ul { + padding: 0 10pt 1em; +} + +.sidebarhandle { + position: absolute; + right: -2.5em; + top: 0.7em; + z-index: 10; + transition: right 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s; +} + +.sidebarhandle:after { + padding-right: 0.125em; + content: "\f124"; +} + +.sidebar.hidden .sidebarhandle { + transform: scale(-1, 1); +} + +.hostname { +} + +.online { + color: #558020 !important; +} + +.offline { + color: #D43E2A !important; +} + +.sidebar { + z-index: 5; + width: 40em; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + background: white; + box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); + transition: left 0.5s; +} + +.sidebar.hidden { + left: -40em; +} + +.sidebar .container { + overflow: auto; + box-sizing: border-box; +} + +.sidebar .container, .map { + height: 100vh; +} + +.sidebar .icon { + padding: 0 0.25em; +} + +.sidebar table { + width: 100%; +} + +.sidebar table th { + text-align: left; +} + +.sidebar td:not(:first-child), .sidebar th:not(:first-child) { + text-align: right; +} + +.sidebar a { + color: #1566A9; +} + +.bar { + display: block; + height: 1.4em; + background: rgba(85, 128, 32, 0.5); + position: relative; +} + +.bar span { + display: inline-block; + height: 1.4em; + background: rgba(85, 128, 32, 0.8); +} + +.bar label { + font-weight: bold; + white-space: nowrap; + color: white; + position: absolute; + right: 0.5em; +} + +.map .node-alert { + -webkit-animation: blink 2s linear; + -webkit-animation-iteration-count: infinite; + animation: blink 2s linear; + animation-iteration-count: infinite; +} + +@-webkit-keyframes blink { + 0% { opacity: 1.0; } + 80% { opacity: 1.0; } + 90% { opacity: 0.0; } +} + +@keyframes blink { + 0% { opacity: 1.0; } + 80% { opacity: 1.0; } + 90% { opacity: 0.0; } +} + +@media screen and (max-width: 80em) { + .sidebar { + font-size: 0.8em; + } +} + +@media screen and (max-width: 60em) { + .sidebar .container { + overflow: visible; + height: auto; + padding-top: 1em; + } + + .sidebarhandle { + display: none; + } + + .map { + height: 60vh; + } + + .sidebar { + position: static; + margin-left: 0em !important; + width: auto; + height: auto; + } + + .sidebar.hidden { + width: auto; + } + + .sidebar.hidden .sidebar .container { + display: block; + } +}