576 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			CSS
		
	
	
	
			
		
		
	
	
			576 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			CSS
		
	
	
	
| a:focus {
 | |
|     outline: thin dotted;
 | |
| }
 | |
| a:active,
 | |
| a:hover {
 | |
|     outline: 0;
 | |
| }
 | |
| /**:link,
 | |
| *:visited,
 | |
| *:hover,
 | |
| *:active,
 | |
| *:focus,
 | |
| .transition {
 | |
|   -webkit-transition: all .2s linear;
 | |
|      -moz-transition: all .2s linear;
 | |
|        -o-transition: all .2s linear;
 | |
|           transition: all .2s linear;
 | |
| }
 | |
| .dont-move, #sidebar, #main-wrap, #sidebar-menu .scroller, .sub-nav-block-list {
 | |
|   -webkit-transition: none;
 | |
|      -moz-transition: none;
 | |
|        -o-transition: none;
 | |
|           transition: none;
 | |
| }*/
 | |
| ::selection {
 | |
|   color: white;
 | |
|   background: black;
 | |
|   text-shadow: none !important;
 | |
| }
 | |
| /*::-webkit-scrollbar {
 | |
|     width: 10px;
 | |
| }
 | |
| ::-webkit-scrollbar-track {
 | |
|     background: #FFF;
 | |
|     -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
 | |
| }
 | |
| ::-webkit-scrollbar-thumb {
 | |
|     background: #CCC;
 | |
|     -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
 | |
| }
 | |
| ::-webkit-scrollbar-thumb:hover {
 | |
|     background: #AAA;
 | |
| }
 | |
| ::-webkit-scrollbar-thumb:active {
 | |
|     background: #888;
 | |
|     -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
 | |
| }*/
 | |
| input:focus::-webkit-input-placeholder {
 | |
|     color: transparent;
 | |
| }
 | |
| body {
 | |
|   background-color: #F3F3F3;
 | |
|   font-family: 'Chivo';
 | |
| }
 | |
| body.modalBlur > nav,
 | |
| body.modalBlur > section {
 | |
|   -webkit-filter: blur(5px);
 | |
| }
 | |
| .label {
 | |
|   font-family: 'Open Sans';
 | |
| }
 | |
| .btn {
 | |
|   font-family: 'Varela Round';
 | |
|   letter-spacing: -.4px;
 | |
| }
 | |
| h1,
 | |
| h2,
 | |
| h3,
 | |
| h4,
 | |
| h5,
 | |
| h6,
 | |
| label,
 | |
| legend {
 | |
|   font-family: 'Raleway';
 | |
| }
 | |
| 
 | |
| 
 | |
| /* Sidebar */
 | |
| #sidebar {
 | |
|   top: 0;
 | |
|   left: 0;
 | |
|   bottom: 0;
 | |
|   min-width: 61px;
 | |
|   z-index: 1030;
 | |
|   position: fixed;
 | |
|   background-color: #171717;
 | |
|   -webkit-box-shadow: inset -1px 0px 10px #000000;
 | |
|      -moz-box-shadow: inset -1px 0px 10px #000000;
 | |
|        -o-box-shadow: inset -1px 0px 10px #000000;
 | |
|           box-shadow: inset -1px 0px 10px #000000;
 | |
| }
 | |
| #sidebar #sidebar-menu {
 | |
|   position: absolute;
 | |
|   top: 88px;
 | |
|   bottom: 0;
 | |
|   z-index: 1;
 | |
|   display: block;
 | |
|   width: 61px;
 | |
|   /*overflow: auto;*/
 | |
| }
 | |
| #sidebar .scroller {
 | |
|   position: absolute;
 | |
|   z-index:1;
 | |
|   /*-webkit-touch-callout:none;*/
 | |
|   -webkit-tap-highlight-color:rgba(0,0,0,0);
 | |
|   width:100%;
 | |
|   padding:0;
 | |
| }
 | |
| #sidebar-menu .content,
 | |
| #sidebar-menu .pane {
 | |
|   margin-top: 88px;
 | |
| }
 | |
| #sidebar .sidebar-nav {
 | |
|   margin: 0;
 | |
|   padding: 0;
 | |
|   height: 100%;
 | |
|   font-size: 1em;
 | |
|   width: 61px;
 | |
|   text-align: center;
 | |
|   list-style: none;
 | |
| }
 | |
| #sidebar > h2.position {
 | |
|   top: 40px;
 | |
|   margin: 0;
 | |
|   width: 61px;
 | |
|   color: #FFFFFF;
 | |
|   font-weight: normal;
 | |
|   font-size: 2.4em;
 | |
|   line-height: 47px;
 | |
|   line-height: 46px\9;
 | |
|   text-align: center;
 | |
|   position: absolute;
 | |
|   background-color: #08c;
 | |
|   background-image: -moz-linear-gradient(top, #08c, #006091);
 | |
|   background-image: -ms-linear-gradient(top, #08c, #006091);
 | |
|   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#006091));
 | |
|   background-image: -webkit-linear-gradient(top, #08c, #006091);
 | |
|   background-image: -o-linear-gradient(top, #08c, #006091);
 | |
|   background-image: linear-gradient(top, #08c, #006091);
 | |
|   -webkit-box-shadow: 0px 1px 0px #333333;
 | |
|      -moz-box-shadow: 0px 1px 0px #333333;
 | |
|        -o-box-shadow: 0px 1px 0px #333333;
 | |
|           box-shadow: 0px 1px 0px #333333;
 | |
| }
 | |
| #sidebar > h2.position:after {
 | |
|   left: 50%;
 | |
|   bottom: 0;
 | |
|   width: 0px;
 | |
|   height: 0px;
 | |
|   content: " ";
 | |
|   display: block;
 | |
|   margin-left: -6px;
 | |
|   position: absolute;
 | |
|   margin-bottom: -1px;
 | |
|   border-style: solid;
 | |
|   border-width: 0 6px 6px 6px;
 | |
|   border-color: transparent transparent #171717 transparent;
 | |
| }
 | |
| #sidebar > h2.position a {
 | |
|   color: #FFFFFF;
 | |
|   padding: 6px 6px 5px;
 | |
|   text-decoration: none;
 | |
|   -webkit-text-shadow: 0px -1px 0px #333333;
 | |
|      -moz-text-shadow: 0px -1px 0px #333333;
 | |
|        -o-text-shadow: 0px -1px 0px #333333;
 | |
|           text-shadow: 0px -1px 0px #333333;
 | |
| }
 | |
| #sidebar .sidebar-nav > li {
 | |
|   min-width: 61px;
 | |
|   height: 45px;
 | |
| }
 | |
| #sidebar .sidebar-nav > li.active {
 | |
|   font-size: 1.2em;
 | |
| }
 | |
| #sidebar .sidebar-nav > li.active .sub-nav-block {
 | |
|   display: block;
 | |
| }
 | |
| #sidebar .sidebar-nav > li.active > a > span {
 | |
|   color: #FFFFFF;
 | |
|   cursor: pointer;
 | |
|   -webkit-text-shadow: 0px -1px 0px #636363;
 | |
|      -moz-text-shadow: 0px -1px 0px #636363;
 | |
|        -o-text-shadow: 0px -1px 0px #636363;
 | |
|           text-shadow: 0px -1px 0px #636363;
 | |
| }
 | |
| #sidebar .sidebar-nav > li > a > span {
 | |
|   padding: 10px;
 | |
|   color: #B0B0B0;
 | |
|   display: block;
 | |
|   -webkit-text-shadow: 0px 1px 0px #000000;
 | |
|      -moz-text-shadow: 0px 1px 0px #000000;
 | |
|        -o-text-shadow: 0px 1px 0px #000000;
 | |
|           text-shadow: 0px 1px 0px #000000;
 | |
| }
 | |
| #sidebar .sidebar-nav > li > a > span > i {
 | |
|   font-size: 1.7em;
 | |
| }
 | |
| #sidebar .sub-nav-block-list {
 | |
|   top: 40px;
 | |
|   bottom: 0;
 | |
|   left: 61px;
 | |
|   position: fixed;
 | |
|   text-align: left;
 | |
|   /*overflow: hidden;*/
 | |
|   -webkit-box-shadow: -1px 0px 10px rgba(33, 33, 33, .8);
 | |
|      -moz-box-shadow: -1px 0px 10px rgba(33, 33, 33, .8);
 | |
|        -o-box-shadow: -1px 0px 10px rgba(33, 33, 33, .8);
 | |
|           box-shadow: -1px 0px 10px rgba(33, 33, 33, .8);
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block {
 | |
|   top: 0;
 | |
|   left: 0;
 | |
|   right: 0;
 | |
|   bottom: 0;
 | |
|   display: none;
 | |
|   position: absolute;
 | |
|   background-color: #0088CC;
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block.show {
 | |
|   display: block;
 | |
|   overflow: hidden;
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block:before {
 | |
|   bottom: 0px;
 | |
|   right: -20px;
 | |
|   opacity: .1;
 | |
|   color: #FFFFFF;
 | |
|   font-size: 14em;
 | |
|   line-height: 150px;
 | |
|   position: absolute;
 | |
|   display: none\9; /* 用IE的去死 */
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block h4 {
 | |
|   color: #FFFFFF;
 | |
|   margin-top: 15px;
 | |
|   font-weight: normal;
 | |
|   padding: 0 15px 10px;
 | |
|   border-bottom: 1px solid #1C9BCC;
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block > ul {
 | |
|   position: relative;
 | |
|   z-index: 2;
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block a {
 | |
|   line-height: 25px;
 | |
|   color: #90D0FA;
 | |
|   -webkit-text-shadow: none;
 | |
|      -moz-text-shadow: none;
 | |
|        -o-text-shadow: none;
 | |
|           text-shadow: none;
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block li.active a {
 | |
|   background-color: #EEEEEE;
 | |
|   color: #0081c2;
 | |
|   position: relative;
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block li.active a:after {
 | |
|   top: 50%;
 | |
|   right: 10px;
 | |
|   width: auto;
 | |
|   height: auto;
 | |
|   display: inline;
 | |
|   content: "\e0d4";
 | |
|   font-size: 1.3em;
 | |
|   position: absolute;
 | |
|   font-style: normal;
 | |
|   font-weight: normal;
 | |
|   margin-top: -0.75em;
 | |
|   font-family: 'entypo';
 | |
|   text-decoration: inherit;
 | |
| }
 | |
| #sidebar .sub-nav-block-list .sub-nav-block a:hover {
 | |
|   color: #0081c2;
 | |
| }
 | |
| #sidebar .sub-nav-arrow {
 | |
|   left: 53px;
 | |
|   top: -10px;
 | |
|   width: 0px;
 | |
|   height: 0px;
 | |
|   z-index: -1;
 | |
|   position: absolute;
 | |
|   border-style: solid;
 | |
|   border-width: 8px 8px 8px 0;
 | |
|   border-color: transparent #0088CC transparent transparent;
 | |
|   display: none\9; /* 用IE的去死 */
 | |
| }
 | |
| 
 | |
| 
 | |
| /* Vertical Scrollbar */
 | |
| #sidebar .myScrollbarV {
 | |
|   position: absolute;
 | |
|   z-index: 100;
 | |
|   width: 2px;
 | |
|   bottom: 2px;
 | |
|   top: 2px;
 | |
|   left: 1px
 | |
| }
 | |
| 
 | |
| #sidebar .myScrollbarV > div {
 | |
|   position: absolute;
 | |
|   z-index: 100;
 | |
|   width: 100%;
 | |
|   border-radius: 1px;
 | |
|   background-color: rgba(0, 136, 204, .3);
 | |
| }
 | |
| 
 | |
| 
 | |
| /* Main Wrap */
 | |
| #main-wrap {
 | |
|   padding-top: 40px;
 | |
| }
 | |
| #main-wrap .wrap-inner {
 | |
|   padding: 60px 20px 20px;
 | |
| }
 | |
| #main-wrap .wrap-inner.initial {
 | |
|   padding: 20px 20px 20px;
 | |
| }
 | |
| 
 | |
| 
 | |
| /* Member Filter */
 | |
| #member-filter.modal {
 | |
|   width: 80%;
 | |
|   margin-left: -40%;
 | |
| }
 | |
| #member-filter.modal.fade.in {
 | |
|   top: 50px;
 | |
| }
 | |
| #member-filter .modal-body {
 | |
|   max-height: 425px;
 | |
| }
 | |
| #member-filter .modal-body form {
 | |
|   margin-bottom: 0px;
 | |
| }
 | |
| #member-filter .modal-body form fieldset {
 | |
|   min-height: 360px;
 | |
| }
 | |
| #member-filter .modal-body .radio.inline,
 | |
| #member-filter .modal-body .checkbox.inline {
 | |
|   display: inline-block;
 | |
|   padding-top: 5px;
 | |
|   margin-bottom: 0;
 | |
|   vertical-align: middle;
 | |
|   min-width: 100px;
 | |
|   margin-left: 0;
 | |
| }
 | |
| #member-filter .modal-body .form-actions {
 | |
|   margin: 20px 0 0;
 | |
|   padding: 10px 0 0;
 | |
|   background-color: transparent;
 | |
|   text-align: right;
 | |
| }
 | |
| #member-filter .modal-body .form-actions.condition {
 | |
|   margin: 10px 0 0 195px;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano {
 | |
|   width: 160px;
 | |
|   min-height: 425px;
 | |
|   float: left;
 | |
|   margin-right: 10px;
 | |
|   padding-right: 20px;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano .content {
 | |
|   right: 20px;
 | |
|   outline: none;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano .pane {
 | |
|   right: 0px;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs {
 | |
|   width: 140px;
 | |
|   float: left;
 | |
|   margin-bottom: 0;
 | |
|   margin-right: 0;
 | |
|   border-right: 1px solid #ddd;
 | |
|   border-bottom: none;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li {
 | |
|   float: none;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li > a {
 | |
|   min-width: 74px;
 | |
|   margin-right: 0;
 | |
|   margin-bottom: 3px;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li > a {
 | |
|   margin-right: -1px;
 | |
|   -webkit-border-radius: 4px 0 0 4px;
 | |
|      -moz-border-radius: 4px 0 0 4px;
 | |
|           border-radius: 4px 0 0 4px;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs > li > a:hover {
 | |
|   border-color: #eeeeee #dddddd #eeeeee #eeeeee;
 | |
| }
 | |
| #member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs .active > a,
 | |
| #member-filter .modal-body .tabs-left > .nano > .content > .nav-tabs .active > a:hover {
 | |
|   border-color: #ddd transparent #ddd #ddd;
 | |
|   *border-right-color: #ffffff;
 | |
| }
 | |
| #member-filter .member-filter-options {
 | |
|   float: left;
 | |
|   display: inline-block;
 | |
|   width: 175px;
 | |
|   min-height: 425px;
 | |
|   margin-right: 10px;
 | |
|   padding: 0 10px 0 0;
 | |
| }
 | |
| #member-filter .member-filter-options select {
 | |
|   width: 165px; 
 | |
| }
 | |
| #member-filter .member-filter-options .btn {
 | |
|   display: block;
 | |
| }
 | |
| #member-filter .member-filter-result {
 | |
|   padding-left: 15px;
 | |
|   min-height: 370px;
 | |
|   width: auto;
 | |
| }
 | |
| 
 | |
| /* Search Clear */
 | |
| .searchClear {
 | |
|   position: relative;
 | |
| }
 | |
| .searchClear .icon-search {
 | |
|   position: absolute;
 | |
|   color: #A3A3A3;
 | |
|   top: 10px;
 | |
|   left: 18px;
 | |
|   font-size: 1.2em;
 | |
| }
 | |
| .searchClear #filter-input {
 | |
|   padding-left: 25px;
 | |
|   padding-right: 25px;
 | |
| }
 | |
| .searchClear .search-clear {
 | |
|   position: absolute;
 | |
|   color: #A3A3A3;
 | |
|   right: 8px;
 | |
|   top: 10px;
 | |
|   font-size: 1.2em;
 | |
| }
 | |
| 
 | |
| 
 | |
| /* Edit link in structure */
 | |
| .editable {
 | |
|   position: relative;
 | |
|   padding: 0px;
 | |
|   margin: 0px;
 | |
|   min-height: 50px;
 | |
|   width: 100%;
 | |
|   height: 100%;
 | |
| }
 | |
| .edit_link {
 | |
|   position: absolute;
 | |
|   left: 2px;
 | |
|   right: 2px;
 | |
|   top: 2px;
 | |
|   bottom: 2px;
 | |
|   border: 2px dashed #1769ff;
 | |
|   border-radius: 5px;
 | |
|   z-index: 1000;
 | |
|   opacity: .3;
 | |
|   filter: alpha(opacity = 30);
 | |
|   background-color: #FFF;
 | |
|   -webkit-transition: all .2s linear;
 | |
|      -moz-transition: all .2s linear;
 | |
|        -o-transition: all .2s linear;
 | |
|           transition: all .2s linear;
 | |
| }
 | |
| .edit_link a {
 | |
|   color: #333;
 | |
|   position: absolute;
 | |
|   left: 0px;
 | |
|   top: 0px;
 | |
|   right: 0px;
 | |
|   bottom: 0px;
 | |
|   text-indent: -99999px;
 | |
|   text-align: left;
 | |
| }
 | |
| .edit_link a:before {
 | |
|   content: "\f044";
 | |
|   font-family: FontAwesome;
 | |
|   position: absolute;
 | |
|   top: 50%;
 | |
|   left: 50%;
 | |
|   display: block;
 | |
|   font-size: 1.5em;
 | |
|   width: 24px;
 | |
|   height: 24px;
 | |
|   margin: -12px 0 0 -12px;
 | |
|   text-indent: 0px;
 | |
|   opacity: .4;
 | |
|   filter: alpha(opacity = 40);
 | |
|   -webkit-transition: all .2s linear;
 | |
|      -moz-transition: all .2s linear;
 | |
|        -o-transition: all .2s linear;
 | |
|           transition: all .2s linear;
 | |
| }
 | |
| .editable:hover .edit_link {
 | |
|   opacity: .8;
 | |
|   border: 3px dashed #1769ff;
 | |
|   border-radius: 8px;
 | |
|   filter: alpha(opacity = 80);
 | |
| }
 | |
| .editable:hover .edit_link a:before {
 | |
|   font-size: 1.8em;
 | |
|   width: 28px;
 | |
|   height: 28px;
 | |
|   margin: -10px 0 0 -14px;
 | |
|   opacity: 1;
 | |
|   filter: alpha(opacity = 100);
 | |
|   -webkit-transition: all .2s linear;
 | |
|      -moz-transition: all .2s linear;
 | |
|        -o-transition: all .2s linear;
 | |
|           transition: all .2s linear;
 | |
| }
 | |
| 
 | |
| /* tooltip */
 | |
| #sideset .ui-tooltip.sidebar-tooltip {
 | |
|   color: #FFFFFF;
 | |
|   padding: 0px 5px;
 | |
|   position: absolute;
 | |
|   z-index: 9999;
 | |
|   max-width: 500px;
 | |
|   border-radius: 3px;
 | |
|   background-color: #0088CC;
 | |
|   white-space: nowrap;
 | |
| }
 | |
| #sideset .ui-tooltip.sidebar-tooltip:after {
 | |
|   display: none;
 | |
| }
 | |
| .ui-tooltip {
 | |
|   color: #FFFFFF;
 | |
|   padding: 0px 5px;
 | |
|   position: absolute;
 | |
|   z-index: 9999;
 | |
|   max-width: 500px;
 | |
|   border-radius: 3px;
 | |
|   background-color: #000000;
 | |
|   white-space: nowrap;
 | |
| }
 | |
| .ui-tooltip:after {
 | |
|   content: '';
 | |
|   position: absolute;
 | |
|   left: 50%;
 | |
|   bottom: -3px;
 | |
|   margin-left: -4px;
 | |
|   width: 0px;
 | |
|   height: 0px;
 | |
|   border-style: solid;
 | |
|   border-width: 4px 4px 0 4px;
 | |
|   border-color: #000000 transparent transparent transparent;
 | |
| }
 | |
| 
 | |
| /* IE go die */
 | |
| :root #sidebar .sub-nav-block:before {
 | |
|   display: block\9;
 | |
| }
 | |
| 
 | |
| 
 | |
| /* Responsive */
 | |
| @media (max-width: 767px) {
 | |
|   body {
 | |
|     padding: 0;
 | |
|   }
 | |
|   #member-filter.modal {
 | |
|     width: auto;
 | |
|     margin-left: auto;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @media (max-width: 480px) {
 | |
|   /* Main Wrap */
 | |
|   #main-wrap .wrap-inner {
 | |
|     padding: 20px 0;
 | |
|   }
 | |
| } |