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:07 +0300 |
commit | aad42e4a3ab66d06f25598b203e558ed412d45fe (patch) | |
tree | 2034d69330a1fc181fc0b065d0f4d8d803355479 /css | |
parent | b609cc7897f29666ef37744b10bb26b0f2d903ec (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 | 257 |
1 files changed, 188 insertions, 69 deletions
diff --git a/css/style.css b/css/style.css index 9fbad5d..385e134 100644 --- a/css/style.css +++ b/css/style.css @@ -1,75 +1,97 @@ -.barchart { - max-width: 200px; - max-height: 350px; +.server-info-wrapper { + max-width: 100vw; } -.clipboardButton { - display: inline-block; - position: relative; - top: 2px; - margin-left: 5px; +.table-wrapper { + overflow-x: auto; +} + +.server-infos-table { + margin-bottom: 25px; +} + +.server-infos-table td:first-child { + width: 120px; } -#ocsEndPoint { - margin-bottom: 10px; +.monitoring-wrapper { + display: -webkit-flex; + display: flex; } -#monitoring-endpoint-url { - width: 80%; - max-width: 415px; +.monitoring-wrapper > input { + flex: 1 0 auto; } .rambox { - padding: 0px; - margin: 0px; - height: 10px; - width: 10px; - background-color: #555; - border-radius: 20%; + height: 10px; + width: 10px; + background-color: #555; } .swapbox { - height: 10px; - width: 10px; - background-color: #222; - border-radius: 20%; + height: 10px; + width: 10px; + background-color: #222; } .info { font-weight: bold; - text-color: #777777; + color: #777; } .smallinfo { - color: #888888; + color: #888; font-size: 11px; } .infobox { - width: 400px; - border: 1px solid #DDDDDD; - margin: 10px 0px 20px 0px; + display: flex; + flex-wrap: nowrap; + align-items: center; + + border: 1px solid #ddd; padding: 15px; - color: #555555; - background-color: #F9F9F9; + margin: 15px 0; + color: #555; + background-color: #f9f9f9; border-radius: 6px; - box-shadow: 1px 1px 9px 1px #EEEEEE; + box-shadow: 1px 1px 9px 1px #eee; } -.infobox h3 { - color: #555555; - font-size: 22px; - font-weight: bold; - padding: 5px 0px 10px 0px; - margin: 0px; +.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: #555555; + color: #555; font-size: 18px; font-weight: bold; - padding: 5px 5px 5px 5px; - margin: 0px; + padding: 5px; + margin: 0; +} + +.infobox h3 { + color: #555; + font-size: 22px; + font-weight: bold; + padding: 5px 0 10px 0; + margin: 0; } .infoicon { @@ -79,45 +101,142 @@ } .chart-container { - height:300px; - width: 800px; - margin: 5px 10px 5px 5px; + position: relative; + margin: 10px; } -.diskchart-container { - position: static; +.clipboardButton { display: inline-block; - height:130px; - width:130px; - float:left; - border: 1px black; - margin: 5px 10px 5px 5px; + 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%; } -.wrapper { - overflow:hidden; +.col-9 { + flex-basis: 75%; + max-width: 75%; + min-width: 75%; } -.wrapper div { - min-height: 100px; - padding: 0px; +.col-10 { + flex-basis: 83.333%; + max-width: 83.333%; + min-width: 83.333%; } -#one { - float:left; - width:440px; - margin-right: 10px; + +.col-11 { + flex-basis: 91.666%; + max-width: 91.666%; + min-width: 91.666%; } -#two { - overflow:hidden; - width:440px; - min-height:100px; +.col-12 { + flex-basis: 100%; + max-width: 100%; + min-width: 100%; } -@media screen and (max-width: 1000px) { - #one { - float: none; - margin-right:0; - width:auto; - } + +@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%; + } } |