diff options
author | Kevin Pfeifer <kevin.pfeifer@sunlime.at> | 2019-12-19 21:46:21 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2020-03-18 15:19:08 +0300 |
commit | 1d138eee59be2439beed23b0f3211401aa2af088 (patch) | |
tree | f5e7aedab76b9fd4d022e146d410337101bfd92f /css | |
parent | 838081e5799a5c6afb670e421dbed3a2b74283d4 (diff) |
reseted fork to upstream/master and applied patch gracefully provided by kesselb
Signed-off-by: Kevin Pfeifer <kevin.pfeifer@sunlime.at>
Diffstat (limited to 'css')
-rw-r--r-- | css/style.css | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..385e134 --- /dev/null +++ b/css/style.css @@ -0,0 +1,242 @@ +.server-info-wrapper { + max-width: 100vw; +} + +.table-wrapper { + overflow-x: auto; +} + +.server-infos-table { + margin-bottom: 25px; +} + +.server-infos-table td:first-child { + width: 120px; +} + +.monitoring-wrapper { + display: -webkit-flex; + display: flex; +} + +.monitoring-wrapper > input { + flex: 1 0 auto; +} + +.rambox { + height: 10px; + width: 10px; + background-color: #555; +} + +.swapbox { + height: 10px; + width: 10px; + background-color: #222; +} + +.info { + font-weight: bold; + color: #777; +} + +.smallinfo { + color: #888; + font-size: 11px; +} + +.infobox { + display: flex; + flex-wrap: nowrap; + align-items: center; + + border: 1px solid #ddd; + padding: 15px; + margin: 15px 0; + color: #555; + background-color: #f9f9f9; + border-radius: 6px; + box-shadow: 1px 1px 9px 1px #eee; +} + +.diskchart-container { + width: 100px; + border: 1px black; +} + +@media only screen and (max-width: 768px){ + .infobox { + display: block; + text-align: center; + } + .diskchart-container { + margin: 0 auto; + } +} + +.diskinfo-container { + flex: 1 0 auto; +} + +.infobox h2 { + color: #555; + font-size: 18px; + font-weight: bold; + padding: 5px; + margin: 0; +} + +.infobox h3 { + color: #555; + font-size: 22px; + font-weight: bold; + padding: 5px 0 10px 0; + margin: 0; +} + +.infoicon { + width: 28px; + float: left; + padding: 5px; +} + +.chart-container { + position: relative; + margin: 10px; +} + +.clipboardButton { + display: inline-block; + position: relative; + top: 2px; + margin-left: 5px; +} + +/* GRID SYSTEM */ + +.row { + display: -webkit-flex; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin-left: -15px; + margin-right: -15px; +} + +.col { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + padding-left: 15px; + padding-right: 15px; +} + +.col-1 { + flex-basis: 8.333%; + max-width: 8.333%; + min-width: 8.333%; +} + +.col-2 { + flex-basis: 16.666%; + max-width: 16.666%; + min-width: 16.666%; +} + +.col-3 { + flex-basis: 25%; + max-width: 25%; + min-width: 25%; +} + +.col-4 { + flex-basis: 33.333%; + max-width: 33.333%; + min-width: 33.333%; +} + +.col-5 { + flex-basis: 41.666%; + max-width: 41.666%; + min-width: 41.666%; +} + +.col-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; +} + +.col-7 { + flex-basis: 58.333%; + max-width: 58.333%; + min-width: 58.333%; +} + +.col-8 { + flex-basis: 66.666%; + max-width: 66.666%; + min-width: 66.666%; +} + +.col-9 { + flex-basis: 75%; + max-width: 75%; + min-width: 75%; +} + +.col-10 { + flex-basis: 83.333%; + max-width: 83.333%; + min-width: 83.333%; +} + +.col-11 { + flex-basis: 91.666%; + max-width: 91.666%; + min-width: 91.666%; +} + +.col-12 { + flex-basis: 100%; + max-width: 100%; + min-width: 100%; +} + + +@media only screen and (max-width: 1200px) { + .col-xl-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; + } +} + +@media only screen and (max-width: 1024px) { + .col-l-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; + } + + .col-l-12 { + flex-basis: 100%; + max-width: 100%; + min-width: 100%; + } +} + +@media only screen and (max-width: 768px) { + .col-m-6 { + flex-basis: 50%; + max-width: 50%; + min-width: 50%; + } + + .col-m-12 { + flex-basis: 100%; + max-width: 100%; + min-width: 100%; + } +} |