73 lines
7.8 KiB
CSS
73 lines
7.8 KiB
CSS
|
/* top menu - http://codepen.io/jetpacmonkey/pen/ktIJz */
|
||
|
|
*{box-sizing:border-box;}
|
||
|
|
html,body{min-height:100%;}
|
||
|
|
a{text-decoration:none;}
|
||
|
|
#main{transition: transform .3s ease; }
|
||
|
|
div.main-nav{position:fixed;top:0;left:0;width:250px;height:100%;background:#3B3B3B;color:#fff;overflow:hidden;transition:transform .3s ease;transform:translateX(-250px);display:block;}
|
||
|
|
.main-nav h2{color:#fff;font-size:20px;margin:0 0 15px 30px;}
|
||
|
|
.main-nav em{color:#6cf;font-style:normal;}
|
||
|
|
.main-nav .page-links a{display:block;background:linear-gradient(#3e3e3e,#383838);border-top:1px solid #484848;border-bottom:1px solid #2E2E2E;color:#FFF;white-space:nowrap;text-overflow:ellipsis;padding:10px;}
|
||
|
|
.main-nav a:hover,.main-nav a:focus{background:linear-gradient(#484848,#383838);color:#FFF;text-decoration:none;}
|
||
|
|
#main-nav-check:checked + #main-nav{width:250px;z-index:1;transform:translateX(0px);}
|
||
|
|
#main-nav-check:checked ~ #main {transform: translateX(250px);overflow:hidden;} /*{margin-left:250px;overflow:hidden;} */
|
||
|
|
#main-nav-check:checked ~ .main-header{opacity:1;}
|
||
|
|
#root #main-nav-check:checked ~ #main #banner h1{padding-left:0;}
|
||
|
|
#root p{margin:1em 0;}
|
||
|
|
#root #banner{margin:0;}
|
||
|
|
#root #banner h1{padding-left:30px;border:0;}
|
||
|
|
#root #banner h2{margin-right:100px;}
|
||
|
|
#root div#main h1,#root div#main h3{line-height:normal;margin:0;}
|
||
|
|
#root #main{margin:0;padding:0 15px 15px;}
|
||
|
|
.page-search{padding:10px;}
|
||
|
|
.search-prev,.search-next,.search-clear{font-size:11px;padding:6px 3px;}
|
||
|
|
.input-group-btn{width:auto;}
|
||
|
|
.input-group input.search.form-control{width:100%;font-size:14px;border-radius:4px 0 0 4px!important;-webkit-border-radius:4px 0 0 4px!important;background-clip:padding-box;}
|
||
|
|
.status{position:absolute;right:60px;top:1em;background:#FFF;color:#555;font-size:9px;}
|
||
|
|
.status.busy{width:20px;height:20px;margin-top:-4px;background:no-repeat center center;background-color:#fff!important;background-image:url(../../addons/pager/icons/loading.gif);text-indent:100%;white-space:nowrap;overflow:hidden;}
|
||
|
|
.status.label-danger{color:#FFF;background-color:#d9534f;cursor:pointer;}
|
||
|
|
.highlight{background:#FF0;color:#000;cursor:pointer;padding:0 3px;}
|
||
|
|
.highlight.selected{background:orange;}
|
||
|
|
.message{margin:2px auto;}
|
||
|
|
/* http://codepen.io/pedrocampos/pen/gufrx */
|
||
|
|
.main-header{background:#3B3B3B;color:#fff;text-align:center;vertical-align:middle;text-shadow:#222 0 -1px 1px;position:fixed;width:25px;height:25px;top:10px;left:10px;transition:transform .3s ease;border-radius:5px;-webkit-border-radius:5px;background-clip:padding-box;z-index:10;cursor:pointer;opacity:.5;filter:alpha(opacity=50);padding:5px;}
|
||
|
|
.main-header:hover{opacity:1;filter:alpha(opacity=100);}
|
||
|
|
.main-header span{position:relative;top:7px;-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;transition-duration:0;-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;margin:0 auto;}
|
||
|
|
.main-header span:before,.main-header span:after{position:absolute;content:'';}
|
||
|
|
.main-header span,.main-header span:before,.main-header span:after{width:15px;height:2px;background-color:#fff;display:block;}
|
||
|
|
.main-header span:before{margin-top:-5px;-webkit-transition-property:transform, 0;-moz-transition-property:transform, 0;-o-transition-property:transform, 0;transition-property:transform, transform;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-delay:.2s, 0;-moz-transition-delay:.2s, 0;-o-transition-delay:.2s, 0;transition-delay:.2s, 0;}
|
||
|
|
.main-header span:after{margin-top:5px;-webkit-transition-property:transform, 0;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-delay:.2s, 0;-moz-transition-delay:.2s, 0;-o-transition-delay:.2s, 0;transition-delay:.2s, 0;}
|
||
|
|
#main-nav-check:checked ~ .main-header span{background-color:rgba(0,0,0,0.0);-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;}
|
||
|
|
#main-nav-check:checked ~ .main-header span:before{margin-top:0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0 .2s;-moz-transition-delay:0 .2s;-o-transition-delay:0 .2s;transition-delay:0 .2s;}
|
||
|
|
#main-nav-check:checked ~ .main-header span:after{margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0 .2s;-moz-transition-delay:0 .2s;-o-transition-delay:0 .2s;transition-delay:0 .2s;}
|
||
|
|
/* http://www.cssflow.com/snippets/toggle-switches */
|
||
|
|
.search-options{padding-left:6px;}
|
||
|
|
.switch{position:relative;display:inline-block;height:26px;width:100px;margin-top:5px;background:rgba(0,0,0,0.25);border-radius:3px;-webkit-border-radius:3px;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.3), 0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 3px rgba(0,0,0,0.3), 0 1px rgba(255,255,255,0.1);}
|
||
|
|
.switch-label{position:relative;z-index:2;float:left;width:48px;line-height:26px;font-size:11px;color:rgba(255,255,255,0.35);text-align:center;text-shadow:0 1px 1px rgba(0,0,0,0.45);cursor:pointer;}
|
||
|
|
.switch-label:active{font-weight:700;}
|
||
|
|
.switch-label-off{padding-left:2px;}
|
||
|
|
.switch-label-on{padding-right:2px;}
|
||
|
|
.switch-input:checked + .switch-label{font-weight:700;color:#ddd;text-shadow:0 1px rgba(128,128,128,0.25);-webkit-transition:.15s ease-out;-moz-transition:.15s ease-out;-o-transition:.15s ease-out;transition:.15s ease-out;}
|
||
|
|
.switch-selection{display:block;position:absolute;z-index:1;top:2px;left:2px;width:48px;height:22px;border-radius:3px;-webkit-border-radius:3px;background-clip:padding-box;-webkit-transition:left .15s ease-out;-moz-transition:left .15s ease-out;-o-transition:left .15s ease-out;transition:left .15s ease-out;}
|
||
|
|
.main-nav-check,.switch-input{display:none;}
|
||
|
|
.switch-selection-right{left:50px;} /* separated from next line or IE ignores it */
|
||
|
|
.switch-input:checked + .switch-label-on ~ .switch-selection{left:50px;}
|
||
|
|
.glyphicon-question-sign{top:-6px;}
|
||
|
|
.glyphicon-question-sign:before{color: #666;text-shadow:#222 0 -1px 1px;}
|
||
|
|
.glyphicon-question-sign:before:hover{color: #357ebd;}
|
||
|
|
/* tipsy */
|
||
|
|
.tipsy{font-size:12px;position:absolute;z-index:100000;padding:5px;}
|
||
|
|
.tipsy-inner{background-color:#000;color:#FFF;max-width:250px;text-align:center;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px;}
|
||
|
|
.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #000;}
|
||
|
|
.tipsy-arrow-n{border-bottom-color:#000;}
|
||
|
|
.tipsy-arrow-s{border-top-color:#000;}
|
||
|
|
.tipsy-arrow-e{border-left-color:#000;}
|
||
|
|
.tipsy-arrow-w{border-right-color:#000;}
|
||
|
|
.tipsy-n .tipsy-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||
|
|
.tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||
|
|
.tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent;}
|
||
|
|
.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||
|
|
.tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||
|
|
.tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;}
|
||
|
|
.tipsy-e .tipsy-arrow{right:0;top:50%;margin-top:-5px;border-left-style:solid;border-right:none;border-top-color:transparent;border-bottom-color:transparent;}
|
||
|
|
.tipsy-w .tipsy-arrow{left:0;top:50%;margin-top:-5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;}
|