Skip to content
Snippets Groups Projects
Commit 769b1519 authored by Axel Hahn's avatar Axel Hahn
Browse files

css: beautify admin navigation and help buttons

parent aedd46ae
No related branches found
No related tags found
1 merge request!39V0.19
......@@ -135,9 +135,10 @@ nav a{
font-size: 0.8em;
}
nav a:hover{
background: #ffeee2;
text-decoration: none;
}
a.active{
nav a.active{
background: #fff;
border-top: 2px solid var(--header-bordercolor);
border-left: 2px solid var(--header-bordercolor);
......@@ -306,6 +307,7 @@ fieldset{
.button-danger{color: #fff; background: #dc3545;}
.button-primary{color:#fff; background: #08b;}
.button-success{color:#fff; background: #097;}
.button-help{background: #dee;}
#showForm + div {
display: none;
......
:root{--main-bg:#f8f8f8;--main-color:#335;--main-link:#33a;--lsb-bg:#7250ced3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");--lsb-color:#eee;--lsb-width:300px;--header-bg:#cec;--header-bordercolor:#0a3;--header-bordercolor:#adc;--header-color:#557;--article-bg:#fff;--article-color:default;--footer-bg:rgba(0,0,0,.04);--footer-color:default;--ico-color:#75a;--bigbtn-bg:#f0f0f0;--bigbtn-border:2px solid var(--bigbtn-bg);--bigbtn-color:var(--main-color);--bigbtn-hover-bg:#f8f8f8;--bigbtn-hover-border:2px solid var(--header-bordercolor);--bigbtn-hover-color:var(--main-color);}a{color:var(--main-link)}aside{background:var(--lsb-bg);color:var(--lsb-color);border-left:.5em solid rgba(0,0,0,.3);min-height:4.55em;;}aside a{color:var(--lsb-color);text-decoration:none;;}aside div{padding:.2em 0 0 0;float:left;}aside h1 span{font-size:50%;opacity:.7;}aside .button-app{float:left;margin-top:0;padding:1.0;}body{background:var(--main-bg);color:var(--main-color);font-family:Arial,Helvetica,sans-serif;font-size:1.0;margin:0;}main>div{padding:0;}article{background:var(--article-bg);color:var(--article-color);margin:0 0 7em;padding:1em}h1{margin:.5em .5em 0;float:left;}h2{margin:-.3em .6em .3em 0;float:left;}h3{font-size:2em;margin:0 0 1em;opacity:.7;}h4{font-size:1.7em;margin:0;opacity:.5;}header{border-bottom:2px solid var(--header-bordercolor);color:var(--header-color);padding:0;}header a{text-decoration:none}header a:hover{text-decoration:underline;}header span{float:right;}header span a{background:#fff;padding:.3em .5em;}header nav{font-size:120%;font-weight:bold;display:inline;}nav a{padding:.7em .7em .7em .4em;color:#889;font-size:.8em;}nav a:hover{text-decoration:none;}a.active{background:#fff;border-top:2px solid var(--header-bordercolor);border-left:2px solid var(--header-bordercolor);border-right:2px solid var(--header-bordercolor);color:var(--header-color);padding-bottom:.9em}footer{background:var(--footer-bg);border-top-left-radius:1em;color:var(--footer-color);padding:1em;position:fixed;bottom:1em;right:1em;}hr{color:#eee;}pre,code{background:#f4f4f4;overflow-x:scroll;}code{padding:.2em;}code.int{color:#080;}code.string{color:#00c;}pre{border-radius:1em;padding:1em;}td{vertical-align:top;}.bigbutton{background:var(--bigbtn-bg);border:var(--bigbtn-border);border-radius:1em;color:var(--bigbtn-color);font-weight:bold;display:inline-block;padding:2em;text-align:center;text-decoration:none;margin:0 1em 1em 0;}.bigbutton i{font-size:300%;}.bigbutton:hover{background:var(--bigbtn-hover-bg);border:var(--bigbtn-hover-border);color:var(--bigbtn-hover-color);}code.secret{padding:1em;font-size:150%;}div.floatbox{float:left;width:400px;margin:0 1em 1em 0;}i{font-size:130%;opacity:.7;margin-right:.1em;}header i,.bigbutton i{color:var(--ico-color);}.bigbutton.button-primary i{color:inherit;}input.big{font-size:150%;margin-right:1em;}div.context{border-left:1px solid #ccc;border-radius:1em;;float:right;margin-left:1em;max-width:40%;}div.context .content{padding:1em 0 1em 1em;}span.badge{background:var(--main-color);border-radius:.5em;color:var(--main-bg);opacity:.3;margin-left:.5em;position:relative;;bottom:.75em;padding:.1em .5em;}.barcontainer{display:block;float:left;border-right:1px solid #ccc;border-bottom:1px solid #ccc;position:relative;width:3em;}.bar{background:#bcd;float:left;height:1em;}div.msg{padding:.5em;margin-bottom:1em;}div.msg.error{background:#fcc;color:#800;}div.msg.success{background:#cfc;color:#080;}span.appid{color:#478;}span.secret{color:#c66;}fieldset{background:#f8fafc;}.button-app{background:#fff;transition:all .2s;}.button-app.mfa-solved{background:#afc;}.button-app:hover{background:#fff;}.button-danger{color:#fff;background:#dc3545;}.button-primary{color:#fff;background:#08b;}.button-success{color:#fff;background:#097;}#showForm + div{display:none;}.searchfield{border:none;border-bottom:2px solid #eee;padding:.5em;margin:0 0 1em;width:40%;}button.resetfilter{background-color:#800;border:none;border-radius:.3em;color:#fff;display:none;padding:.6em 1em;}.clear{clear:both;}.disabled{opacity:.5;}a.disabled{cursor:not-allowed;}.float-right{float:right;}@media (min-width:1024px){aside{background:var(--lsb-bg);color:var(--lsb-color);display:block;float:left;height:100vh;margin:0;padding:0;position:fixed;;text-align:center;;width:var(--lsb-width)}aside .button-app{margin-top:2em;float:none;width:105%;--f:1em;--r:2em;--t:2em;padding:2em 0 3em 0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),var(--r) calc(50% - var(--f)/2));box-shadow:0 calc(-1*var(--f)) 0 inset #0005}aside div{display:block;float:none;margin-top:2em;text-align:center;font-size:160%;}aside h1{font-size:130%;text-shadow:.05em .05em .1em #459;text-align:center;float:none}main{padding:1em 2em 2em 3em;margin-left:var(--lsb-width)}article{background:var(--article-bg);border-radius:1em;box-shadow:.1em .3em 1em #0002;color:var(--article-color);margin:2em 0 7em 0;padding:1em}}
\ No newline at end of file
:root{--main-bg:#f8f8f8;--main-color:#335;--main-link:#33a;--lsb-bg:#7250ced3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");--lsb-color:#eee;--lsb-width:300px;--header-bg:#cec;--header-bordercolor:#0a3;--header-bordercolor:#adc;--header-color:#557;--article-bg:#fff;--article-color:default;--footer-bg:rgba(0,0,0,.04);--footer-color:default;--ico-color:#75a;--bigbtn-bg:#f0f0f0;--bigbtn-border:2px solid var(--bigbtn-bg);--bigbtn-color:var(--main-color);--bigbtn-hover-bg:#f8f8f8;--bigbtn-hover-border:2px solid var(--header-bordercolor);--bigbtn-hover-color:var(--main-color);}a{color:var(--main-link)}aside{background:var(--lsb-bg);color:var(--lsb-color);border-left:.5em solid rgba(0,0,0,.3);min-height:4.55em;;}aside a{color:var(--lsb-color);text-decoration:none;;}aside div{padding:.2em 0 0 0;float:left;}aside h1 span{font-size:50%;opacity:.7;}aside .button-app{float:left;margin-top:0;padding:1.0;}body{background:var(--main-bg);color:var(--main-color);font-family:Arial,Helvetica,sans-serif;font-size:1.0;margin:0;}main>div{padding:0;}article{background:var(--article-bg);color:var(--article-color);margin:0 0 7em;padding:1em}h1{margin:.5em .5em 0;float:left;}h2{margin:-.3em .6em .3em 0;float:left;}h3{font-size:2em;margin:0 0 1em;opacity:.7;max-width:80%;}h4{font-size:1.7em;margin:0;opacity:.5;}header{border-bottom:2px solid var(--header-bordercolor);color:var(--header-color);padding:1em .5em 0;}header a{text-decoration:none}header a:hover{text-decoration:underline;}header span{float:right;}header span a{background:#fff;padding:.3em .5em;}header nav{font-size:120%;font-weight:bold;display:inline;}nav a{padding:.7em .7em .7em .4em;color:#889;font-size:.8em;}nav a:hover{background:#ffeee2;text-decoration:none;}nav a.active{background:#fff;border-top:2px solid var(--header-bordercolor);border-left:2px solid var(--header-bordercolor);border-right:2px solid var(--header-bordercolor);color:var(--header-color);padding-bottom:.9em}footer{background:var(--footer-bg);border-top-left-radius:1em;color:var(--footer-color);padding:1em;position:fixed;bottom:1em;right:1em;}hr{color:#eee;}pre,code{background:#f4f4f4;overflow-x:scroll;}code{padding:.2em;}code.int{color:#080;}code.string{color:#00c;}pre{border-radius:1em;padding:1em;}td{vertical-align:top;}.bigbutton{background:var(--bigbtn-bg);border:var(--bigbtn-border);border-radius:1em;color:var(--bigbtn-color);font-weight:bold;display:inline-block;padding:2em;text-align:center;text-decoration:none;margin:0 1em 1em 0;}.bigbutton i{font-size:300%;}.bigbutton:hover{background:var(--bigbtn-hover-bg);border:var(--bigbtn-hover-border);color:var(--bigbtn-hover-color);}.helplink{float:right;z-index:100;margin-top:0;}.infobox{float:right;background:var(--main-bg);border:1px dotted #0006;border-radius:1em;padding:1em;width:300px;}code.secret{padding:1em;font-size:150%;}div.floatbox{float:left;width:400px;margin:0 1em 1em 0;}i{font-size:130%;opacity:.7;margin-right:.1em;}header i,.bigbutton i{color:var(--ico-color);}.bigbutton.button-primary i{color:inherit;}input.big{font-size:150%;margin-right:1em;}div.context{border-left:1px solid #ccc;border-radius:1em;;float:right;margin-left:1em;max-width:40%;}div.context .content{padding:1em 0 1em 1em;}span.badge{background:var(--main-color);border-radius:.5em;color:var(--main-bg);opacity:.3;margin-left:.5em;position:relative;;bottom:.75em;padding:.1em .5em;}.barcontainer{display:block;float:left;border-right:1px solid #ccc;border-bottom:1px solid #ccc;position:relative;width:3em;}.bar{background:#bcd;float:left;height:1em;}div.msg{padding:.5em;margin-bottom:1em;}div.msg.error{background:#fcc;color:#800;}div.msg.success{background:#cfc;color:#080;}span.appid{color:#478;}span.secret{color:#c66;}fieldset{background:#f8fafc;}.button-app{background:#fff;transition:all .2s;}.button-app.mfa-solved{background:#afc;}.button-app:hover{background:#fff;}.button-danger{color:#fff;background:#dc3545;}.button-primary{color:#fff;background:#08b;}.button-success{color:#fff;background:#097;}.button-help{background:#dee;}#showForm + div{display:none;}.searchfield{border:none;border-bottom:2px solid #eee;padding:.5em;margin:0 0 1em;width:40%;}button.resetfilter{background-color:#800;border:none;border-radius:.3em;color:#fff;display:none;padding:.6em 1em;}.clear{clear:both;}.disabled{opacity:.5;}a.disabled{cursor:not-allowed;}.float-right{float:right;}@media (min-width:1024px){aside{background:var(--lsb-bg);color:var(--lsb-color);display:block;float:left;height:100vh;margin:0;padding:0;position:fixed;;text-align:center;;width:var(--lsb-width)}aside .button-app{margin-top:2em;float:none;width:105%;--f:1em;--r:2em;--t:2em;padding:2em 0 3em 0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),var(--r) calc(50% - var(--f)/2));box-shadow:0 calc(-1*var(--f)) 0 inset #0005}aside div{display:block;float:none;margin-top:2em;text-align:center;font-size:160%;}aside h1{font-size:130%;text-shadow:.05em .05em .1em #459;text-align:center;float:none}main{padding:1em 2em 2em 3em;margin-left:var(--lsb-width)}article{background:var(--article-bg);border-radius:1em;box-shadow:.1em .3em 1em #0002;color:var(--article-color);margin:2em 0 7em 0;padding:1em}header{padding:0}}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment