123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817 |
- //skin-3 should be used along with "no-skin" because of some overlappings
- //<body class="no-skin skin-3">
- /* skin 3 */
- .skin-3 {
- @body-background: #BBB;
- @navbar-background: #404040;
- @sidebar-background: #DBDBDB;
- @sidebar-border: #A4C6DD;
- @nav-item-background: #E3E3E3;
- @nav-item-color: #5A5A5A;
- @nav-item-border: #F2F2F2;
- //different states
- @nav-item-color-hover: mix(#1963AA , #4D96CB);
- @nav-item-background-hover: #FFF;
-
- @nav-item-color-open: @nav-item-color-hover;
- @nav-item-background-open: #F8F8F8;
- @nav-item-background-active: lighten(saturate(#EEF8FF , 10%), 1%);
- @nav-item-color-active: #4D96CB;
-
- @nav-item-border-active: #A4C6DD;
- @nav-item-border-hover: desaturate(darken(@nav-item-border-active , 5%) , 5%);
- //submenu colors
- @submenu-background: #FFF;
- @submenu-border: #E5E5E5;
- @submenu-background-active: #FFF; //darken(@submenu-background-active , 2.5%);
- @submenu-border-active: #E5E5E5;
- @submenu-item-color: #616161;
- @submenu-item-border: #E4E4E4;
- @submenu-item-background: transparent;
- @submenu-item-background-hover: #F1F5F9;
- @submenu-item-background-active: #F5F7FA;
-
- @breadcrumbs-background: #E7F2F8;
- @sidebar-toggle-icon-color: #FFF;
- @sidebar-toggle-background: #D0D0D0;
- @shortcuts-background: @sidebar-background;
- @shortcuts-border: @nav-item-border;
-
- background-color: @body-background;
-
- //add a lined-paper like effect
- .main-container {
- &:before {
- background: #FFF;
- background: -moz-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
- background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEF5FA), color-stop(4%, #FFF)) 0 4px;
- background: -webkit-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
- background: -o-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
- background: -ms-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
- background: linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
- -moz-background-size: 100% 26px;
- -webkit-background-size: 100% 26px;
- -o-background-size: 100% 26px;
- -ms-background-size: 100% 26px;
- background-size: 100% 26px;
- }
-
- @media (min-width: @screen-sm-min) {
- &.container:before {
- .box-shadow(~"0 0 0 1px rgba(50, 100, 200, 0.1)");
- }
- }
- }
-
-
- .navbar {
- background: @navbar-background;
- }
- .sidebar {
- background-color: @sidebar-background;
-
- border-style: solid;
- border-width: 0 1px 0 0;
- border-color: @sidebar-border;
- }
- .nav-list > li {
- border-color: @nav-item-border;// !important;
- > a {
- background-color: @nav-item-background;
- color: @nav-item-color;
- > .arrow {
- color: inherit;
- }
-
- &:focus {
- background-color: lighten(@nav-item-background , 2%);
- color: @nav-item-color;
- }
- }
- &:hover {
- border-color: @nav-item-border-hover !important;
- & + li {
- border-top-color: @nav-item-border-hover !important;
- }
- }
- &.open {
- border-color: @nav-item-border-hover !important;
- & + li {
- border-top-color: @nav-item-border-hover !important;
- }
- }
- &.active {
- border-color: @nav-item-border-active !important;
- & + li {
- border-color: @nav-item-border-active !important;
- &:last-child {
- border-bottom-color: @nav-item-border !important;
- &:hover {
- border-bottom-color: @nav-item-border-hover !important;
- }
- }
- }
- }
- &:hover > a {
- background-color: @nav-item-background-hover;
- color: @nav-item-color-hover;
- }
- &.open > a , &.open:hover > a {
- color: @nav-item-color-open;
- background-color: @nav-item-background-open;
- }
- &.open > a > .arrow {
- color: inherit;
- }
- &.active > a , &.active.highlight > a {
- background-color: @nav-item-background-active !important;
- color: @nav-item-color-active !important;
- }
- }
- .nav-list > li:hover:before , .nav-list > li.open:before {
- display: block;
- background-color: saturate(lighten(mix(#4D96CB , #444) , 10%), 10%) !important;
- }
- .nav-list > li.active:before {
- display: block;
- background-color: #4D96CB !important;
- }
- .page-content {
- background-color:transparent;
- //so that .main-content's background can be seen
- }
- .infobox-container .infobox:not(.infobox-dark) {
- border-style: solid;
- background-color: transparent;
- }
- .nav-list > li.active:after {
- display: none;
- }
- .nav-list li.active > a:after {
- border-right-color: #FFF;
- -moz-border-right-colors: #FFF;
-
- //border-width: 16px 10px;
- //top: 3px;
-
- border-width: 12px 8px;
- top: 7px;
-
- right: -1px;
- }
- .nav-list li.active > a:before {
- display: block;
- content: "";
-
- position: absolute;
-
- background-color: transparent;
-
- border-style: solid;
- border-color: transparent;
-
- border-right-color: darken(@sidebar-border , 5%);
- -moz-border-right-colors: darken(@sidebar-border , 5%);
- //border-width: 16px 10px;
- //top: 3px;
- right: 0;
-
- border-width: 12px 8px;
- top: 7px;
- }
-
- .nav-list > li.active > .submenu li.active > a {
- &:before, &:after {
- //top: 6px;
- top: 4px;
- }
- }
-
-
- .nav-list li.active.open > a:before {
- display: none;
- }
- .nav-list li.highlight.active.open > a:before {
- display: block;
- }
-
- .nav-list li.active:not(.open) li.active > a:before {
- //hide the active caret when parent submenu is being closed (not open)
- display: none !important;
- }
-
-
-
-
- .nav-list > li.highlight.active > a:after {
- border-left-color: @nav-item-background-active;
- -moz-border-left-colors: @nav-item-background-active;
- }
- .nav-list > li.highlight.active > a:before {
- border-left-color: darken(@sidebar-border , 5%);
- -moz-border-left-colors: darken(@sidebar-border , 5%);
- }
- .nav-list li > .arrow:before {
- border-right-color: darken(#A4C6DD , 10%);
- -moz-border-right-colors: darken(#A4C6DD , 10%);
- }
-
-
- .nav-list > li .submenu > li {
- &.active:not(.open) > a {
- background-color: @submenu-item-background-active;
- &:hover {
- background-color: @submenu-item-background-hover;
- }
- }
- }
-
-
- @media only screen and (max-width: @grid-float-breakpoint-max) {
- .sidebar.responsive .nav-list > li.active.open > a:after {
- display: none;
- }
- }
-
-
- .enable_submenu_hover_skin_3() when(@enable-submenu-hover = true) {
- @media only screen and (min-width: @screen-hover-menu) {
- .nav-list li.hover > .submenu {
- border-color: darken(@sidebar-border , 3%);
- }
- }//@media
- @media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
- .nav-list li.hover {
- &.active > a:before {
- display: block;
- }
- .submenu > li.active > a:before {
- display: none ;
- }
- }
- }
- }
- .enable_submenu_hover_skin_3();
- .menu_min_skin_3() {
- .nav-list > li > a > .menu-text {
- background-color: lighten(#EDF3F7 , 1%);
- border-color: #A4C6DD;
- }
- .nav-list > li.active > a > .menu-text {
- background-color: #EDF3F7;
- }
- .nav-list > li > .submenu {
- border-color: #A4C6DD;
- border-top-color: #C9DAE5;
- }
-
- .nav-list > li.active > .arrow:before {
- border-right-color: #709FBF;
- -moz-border-right-colors: #709FBF;
- }
- .nav-list > li > .arrow:after {
- border-right-color: #EDF3F7;
- -moz-border-right-colors: #EDF3F7;
- }
-
-
- .nav-list li.active > a {
- &:after , &:before {
- display: none;
- }
- }
- .nav-list > li.active > a {
- &:after, &:before {
- display: block;
- border-width: 9px 7px;
- top: 10px;
- }
- }
-
-
-
- .nav-list > li.active.highlight > a {
- &:after, &:before {
- border-width: 20px 0 21px 10px;
- top: -1px;
- }
- }
- .nav-list > li.active:hover > a, .nav-list > li.active.hover-show > a{
- &:after, &:before {
- display: none;
- }
- }
-
-
- .sidebar-shortcuts-large {
- background-color: #F5F5F5;
- }
- }
-
- .enable_sidebar_collapse_skin_3() when(@enable-sidebar-collapse = true) {
- .sidebar.menu-min {
- .menu_min_skin_3();
-
- .enable_responsive_menu_tmp_in1() when(@enable-responsive-menu = true) {
- @media only screen and (max-width: @grid-float-breakpoint-max) {
- &.responsive .nav-list > li.active > a {
- &:after, &:before {
- display: none;
- }
- }
- }
- }
- .enable_responsive_menu_tmp_in1();
- }
- }
- .enable_sidebar_collapse_skin_3();
-
-
- @media only screen and (max-width: @grid-float-breakpoint-max) {
- .sidebar.responsive {
- border-bottom-width: 1px !important;
-
- .nav-list > li.active.open > a:after {
- display: none;
- }
- .nav-list > li.active.highlight > a:after,
- .nav-list > li.active.highlight > a:before {
- display: block;
- }
- }
- .sidebar.navbar-collapse {
- border-bottom-color: #A4C6DD;
- }
-
- .nav-list li.active > a {
- &:after , &:before {
- display: none;
- }
- }
-
- .enable_minimized_responsive_menu_skin_3() when(@enable-minimized-responsive-menu = true) {
- .sidebar.responsive-min {
- .menu_min_skin_3();
- }
- .sidebar.responsive-max {
- border-width: 0 1px 1px 0;
- .nav-list li.hover.active > a:before {
- display: none;
- }
- .nav-list > li.active.open > a:after {
- display: none;
- }
- .nav-list > li.active.highlight > a:after,
- .nav-list > li.active.highlight > a:before {
- display: block;
- }
- }
- }
- .enable_minimized_responsive_menu_skin_3();
-
- .sidebar.navbar-collapse .sidebar-shortcuts-large {
- background-color: transparent;
- }
- }
-
-
- //extra
- .sidebar-shortcuts , .sidebar-shortcuts-mini {
- background-color: @shortcuts-background;
- //border-color: @shortcuts-border;
- }
- .sidebar-shortcuts-large > .btn:focus {
- outline: none;
- }
- .sidebar > .nav-search {
- background-color: @shortcuts-background;
- //border-color: @shortcuts-border;
- }
- .sidebar-toggle {
- background-color: @sidebar-toggle-background;
- border-color: @nav-item-border;
- //border-width: 0 0 1px;
- &:before {
- border-color: @nav-item-border;
- }
- > .@{icon} {
- background-color: @sidebar-toggle-icon-color;
- background-color:#FFF;
- border-color:#999;
- color:#999;
- }
- }
- .sidebar-scroll .nav-wrap-up + .sidebar-toggle:after {
- display: block;
- content: "";
- position: absolute;
- top: 0;
- bottom: 0;
- right: -1px;
- border-right: 1px solid @sidebar-border;//to cover the active item caret when scrolling
- }
-
- .enable_collapsible_responsive_menu_skin_3_tmpp() when(@enable-collapsible-responsive-menu = true) {
- @media only screen and (max-width: @grid-float-breakpoint-max) {
- .sidebar.navbar-collapse {
- .nav-list > li:before {
- height: @nav-item-height + 4 !important;
- }
- .sidebar-shortcuts {
- padding: 0 0 3px !important;
- }
- }
- }
- }
- .enable_collapsible_responsive_menu_skin_3_tmpp();
-
-
-
- @media only screen and (min-width: @screen-hover-menu) {
- .nav-list > li.active.hover {
- &:hover, &.hover-show {
- > a.dropdown-toggle:after, > a.dropdown-toggle:before {
- display: none;
- }
- }
- }
- }
-
-
- .enable_old_menu_toggle_button_skin_3() when(@enable-old-menu-toggle-button = true) {
- .main-container .menu-toggler {
- background-color: #62A8D1;
- color: #FFF;
-
- &:before, &:after {
- border-color: #FFF;
- }
-
- > .toggler-text {
- border-top-color: #62A8D1;
- -moz-border-top-colors: #62A8D1;
- &:after {
- color: #FFF;
- }
- }
- }
- }
- .enable_old_menu_toggle_button_skin_3();
- .navbar .navbar-toggle {
- //box-shadow: none;
- //border-radius: 0;
- border-color: rgba(255, 255, 255, 0.15);
- transition: background-color 0.1s ease 0s;
- background-color: #648CAE;
-
- &:focus {
- background-color: #648CAE;
- border-color: rgba(255, 255, 255, 0.15);
- }
- &:hover {
- background-color: darken(#648CAE , 4%);
- border-color: rgba(255, 255, 255, 0.15);
- }
- &.display, &[data-toggle=collapse]:not(.collapsed) {
- background-color: darken(#648CAE , 8%);
- border-color: rgba(255, 255, 255, 0.3);
- }
- }
- .enable_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
- .breadcrumbs {
- border-width: 0;
- background-color: @breadcrumbs-background;
- border-radius: 4px;
-
- margin: 8px 8px 0;
- }
-
- @media only screen and (max-width: @grid-float-breakpoint-max) {
- .breadcrumbs {
- margin: 5px 5px 0;
- }
-
- .menu-toggler + .sidebar.responsive + .main-content .breadcrumbs {
- margin: 0;
- border-radius: 0;
- }
- }
- .enable_fixed_breadcrumbs_skin_3() when(@enable-fixed-breadcrumbs = true) {
- @media (min-width: @screen-fixed-breadcrumbs) {
- .breadcrumbs.breadcrumbs-fixed + .page-content {
- padding-top: @page-content-padding-top + @breadcrumb-height + 8;
- }
- }
- @media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) {
- .breadcrumbs.breadcrumbs-fixed + .page-content {
- padding-top: @page-content-padding-top + @breadcrumb-height + 5;
- }
- .menu-toggler + .sidebar.reponsive + .main-content .breadcrumbs.breadcrumbs-fixed + .page-content {
- padding-top: @page-content-padding-top + @breadcrumb-height;
- }
- }
- .enable_container_breadcrumbs_skin_3() when(@enable-breadcrumbs = true) {
- //because breadcrumbs has 8px margin on left and right
- .container.main-container {
- @media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs, @screen-compact-menu)) and (max-width: @grid-float-breakpoint-max) {
- .sidebar.compact + .main-content .breadcrumbs-fixed {
- width: @container-sm - 10;
- }
- }
- @media (min-width: max(@screen-sm-min , @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
- .breadcrumbs-fixed {
- width: @container-sm - 10;
- }
- .sidebar.menu-min + .main-content .breadcrumbs-fixed {
- width: @container-sm - 10;
- }
-
- .sidebar.responsive-min + .main-content .breadcrumbs-fixed {
- width: @container-sm - @sidebar-min-width - 10;
- }
- }
- @media (min-width: max(@screen-compact-menu, @screen-md-min)) {
- .sidebar.compact + .main-content .breadcrumbs-fixed {
- width: @container-md - @sidebar-compact-width - 16;
- }
- }
- @media (min-width: @screen-md-min) {
- .breadcrumbs-fixed {
- width: @container-md;
- }
- .sidebar + .main-content .breadcrumbs-fixed {
- width: @container-md - @sidebar-width - 16;
- }
- .sidebar.menu-min + .main-content .breadcrumbs-fixed {
- width: @container-md - @sidebar-min-width - 16;
- }
- }
-
- @media (min-width: max(@screen-compact-menu, @screen-lg-min)) {
- .sidebar.compact + .main-content .breadcrumbs-fixed {
- width: @container-lg - @sidebar-compact-width - 16;
- }
- }
- @media (min-width: @screen-lg-min) {
- .breadcrumbs-fixed {
- width: @container-lg - 16;
- }
- .sidebar + .main-content .breadcrumbs-fixed {
- width: @container-lg - @sidebar-width - 16;
- }
- .sidebar.menu-min + .main-content .breadcrumbs-fixed {
- width: @container-lg - @sidebar-min-width - 16;
- }
- }
- }
- }
- .enable_container_breadcrumbs_skin_3();
- }
- .enable_fixed_breadcrumbs_skin_3();
- }
- .enable_breadcrumbs_skin_3();
-
- @media only screen and (max-width: @grid-float-breakpoint-max) {
- .nav-list li.active > a:before, .nav-list li.active > a:after {
- display: none;
- }
- }
- .sidebar-shortcuts-large > .btn {
- line-height: 26px;
- border-width: 1px;
- }
- .sidebar-shortcuts-mini {
- padding-top: 3px;
- padding-bottom: 3px;
- padding-left: 1px;
- }
- .sidebar-shortcuts-mini > .btn {
- border-width: 1px;
- opacity: 1;
- padding: 7px;
- margin: 1px 1px 0 0;
- }
-
-
-
- .enable_horizontal_menu_skin_3() when(@enable-horizontal-menu = true) {
- @media only screen and (min-width: @grid-float-breakpoint) {
- //top menu
- .sidebar.h-sidebar {
- background-color: @nav-item-background;
- &:before {
- background-color: #CBD0D6;
- border-bottom-width: 0;
- }
-
- .sidebar-shortcuts-mini > .btn {
- padding: 8px;
- }
- .sidebar-shortcuts-large {
- background-color: #FFF;
- line-height: 36px;
- }
-
- + .main-content .breadcrumbs {
- border-color: desaturate(darken(@breadcrumbs-background , 5%) , 5%);
- top: 2px;
- }
-
- .nav-list > li.hover > .submenu {
- //border-color: #CCC;
- border-color: #A4C6DD;
- }
-
- .nav-list > li {
- border-color: @nav-item-border;
- &:hover , &:hover + li {
- border-left-color: @nav-item-border-hover;
- }
- &:last-child:hover {
- border-right-color: @nav-item-border-hover;
- }
- &.active , &.active + li , &:hover + li.active {
- border-left-color: @nav-item-border-active;
- }
- &.active:last-child {
- border-right-color: @nav-item-border-active;
- }
- }
-
- .nav-list > li.active > a:after {
- left: 0;
- top: auto;
- right: auto;
- bottom: -2px;
-
- left: 50%;
- margin-left: -7px;
-
- border-color: transparent;
- -moz-border-right-colors: none;
- border-width: 8px 7px !important;
- border-bottom-color: #FFF;
- -moz-border-bottom-colors: #FFF;
- }
- .nav-list > li.active > a:before {
- display: block;
- left: 0;
- top: auto;
- right: auto;
-
- bottom: -1px;
-
- left: 50%;
- margin-left: -8px !important;
-
- border-width: 8px !important;
-
- border-color: transparent;
- -moz-border-right-colors: none;
-
- border-bottom-color: lighten(#4D96CB, 10%);
- -moz-border-bottom-colors: lighten(#4D96CB, 10%);
- }
-
-
- .nav-list > li.hover {
- > .arrow:before {
- -moz-border-right-colors: none;
- border-right-color: transparent;
-
- border-bottom-color: darken(#A4C6DD , 10%);
- -moz-border-bottom-colors: darken(#A4C6DD , 10%);
- }
- }
-
-
-
- &.menu-min {
- .sidebar-shortcuts {
- max-width: 52px;
- padding-left: 2px;
- padding-right: 2px;
- }
- .sidebar-shortcuts-mini > .btn {
- padding: 7px;
- }
-
- .nav-list > li.hover > .submenu {
- border-top-color: #C9DAE5;
- }
-
- .nav-list > li.active > a > .menu-text {
- border-left-color: #A4C6DD;
- }
- .nav-list > li > .arrow:after {
- -moz-border-bottom-colors: #EDF3F7;
- border-bottom-color: #EDF3F7;
- }
- }
-
- }
- }//@media
- }
- .enable_horizontal_menu_skin_3();
- .sidebar-scroll {
- .sidebar-shortcuts {
- //border-bottom: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
- border-bottom-color: 1px solid #99B6C9;
- }
- .sidebar-toggle {
- //border-top: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
- border-top-color: #99B6C9;
- }
- }
-
- @media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
- .navbar.navbar-collapse {
- background-color: transparent;
- &:before , .navbar-container {
- background: @navbar-background;
- }
- }
- }
- //disabled state
- .nav-list > li.disabled:before {
- display: none !important;
- }
- }//.skin-3
|