diff options
author | Matthias <ilovemilk@wusa.io> | 2020-04-10 13:25:49 +0300 |
---|---|---|
committer | Matthias <ilovemilk@wusa.io> | 2020-04-10 13:25:49 +0300 |
commit | 133a820b88a78a4281e017d88d11bed169b5fdbf (patch) | |
tree | 0bd785eb085699b18a8283891248d77b194f5c12 /css | |
parent | 0a92726e3f3d082ad87101dfb9819e736bcd9df7 (diff) |
add first vuejs ui version
Diffstat (limited to 'css')
-rw-r--r-- | css/style.scss | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/css/style.scss b/css/style.scss index 6833c2c..7ecd889 100644 --- a/css/style.scss +++ b/css/style.scss @@ -325,3 +325,194 @@ table { cursor: default !important; opacity: 0.6; } + +.logs { + width: 100%; + white-space: normal; + margin-bottom: 14px; + table-layout: fixed; + + th { + color: #888; + } + + td, th { + vertical-align: top; + padding: .8em; + text-align: left; + font-weight: normal; + position: relative; + word-wrap: break-word; + border-bottom: 1px solid #eee; + } + + th.level.active .log-settings-toggle, + th.level:hover .log-settings-toggle { + opacity: 1; + } + + .time { + width: 180px; + } + + .time.relative { + width: 100px; + } + + .app { + width: 100px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + td.app, th.app { + @media only screen and (max-width: 1100px) { + display: none; + } + } + + .level { + width: 100px; + } + + /* warning*/ + .level_2 td.level { + border-left: 5px solid #FEEFB3; + } + + /*error*/ + .level_3 td.level { + border-left: 5px solid #FFBABA; + } + + /*fatal*/ + .level_4 td.level { + border-left: 5px solid #ff8080; + } + + div.column { + box-sizing: border-box; + padding: 7px; + } + + div.level { + font-weight: bold; + } + + div.level, div.app, div.time { + display: inline-block; + width: 33%; + } + + div.time { + padding-right: 20px; + } + + div.row { + position: relative; + } + + div.message { + border-bottom: 1px solid #888; + } + + td.copy, th.copy { + position: relative; + width: 42px; + margin: 0; + overflow: visible; + + button { + position: relative; + opacity: 0; + transition: opacity 0.5s; + top: -5px; + padding: 0; + background-color: transparent; + border: none; + width: 42px; + } + } + + tr:hover { + td.copy button { + opacity: 0.5; + + &:hover { + opacity: 1; + } + } + } + + tr.active td.copy button { + opacity: 1; + } + + div.level_1 { + + } + + div.level_2 { + border-left: 5px solid #FEEFB3; + } + + div.level_3 { + border-left: 5px solid #FFBABA; + } + + div.level_4 { + border-left: 5px solid #ff8080; + } + + tr.empty td { + border-bottom: none; + } + tr.empty td:hover { + background-color: white; + } + + tr.highlight { + background-color: #f8f8f8; + } + } + + .smallHeader, + th.level { + overflow: visible; + + > span { + margin: -0.8em; + padding: .8em; + display: block; + width: 100%; + height: 100%; + cursor: pointer; + } + + .log-settings-toggle { + cursor: pointer; + display: block; + float: right; + margin: 2px; + opacity: 0.5; + transition: opacity 0.2s; + } + } + + .smallHeader { + margin-left: 44px; + width: 62px; + padding: 10px; + + .log-settings-toggle:hover { + opacity: 1; + } + } + + .copyMenu { + right: -10px; + top: 50px; + width: 150px; + } + |