//skin-3 should be used along with "no-skin" because of some overlappings // /* 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 { right: -1px; top: 3px; border-width: 16px 10px; border-right-color: #FFF; -moz-border-right-colors: #FFF; } .nav-list li.active > a:before { display: block; content: ""; position: absolute; top: 3px; right: 0; 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; } .nav-list > li.active > .submenu li.active > a { &:before, &:after { top: 1px; } } .nav-list li.active.open > a:before { display: none; } .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; } } } .enable_submenu_hover_skin_3() when(@enable-submenu-hover = true) { .nav-list li.hover > .submenu { border-color: darken(@sidebar-border , 3%); } @media only screen and (min-width: @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; } } .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(); .nav-list > li.active.highlight > a { &:after, &:before { border-width: 20px 0 21px 10px; top: -1px; } } .nav-list > li.active:hover > 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_sidebar_collapse_skin_3(); @media only screen and (max-width: @grid-float-breakpoint-max) { .sidebar.responsive { border-bottom-width: 1px !important; } .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; } } } .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; } } .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(); .nav-list > li.active.hover:hover > a.dropdown-toggle:after, .nav-list > li.active.hover:hover > 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; } .navbar:not(.navbar-fixed-top):not(.h-navbar) + .main-container .breadcrumbs { margin-top: auto;//margin-top moves .sidebar down as well top: 8px; margin-bottom: 8px; } @media only screen and (max-width: @grid-float-breakpoint-max) { .breadcrumbs { margin: 5px 5px 0; } .navbar:not(.navbar-fixed-top):not(.h-navbar) + .main-container .breadcrumbs, .navbar:not(.navbar-fixed-top) + .main-container .breadcrumbs { margin-top: auto;//margin-top moves .sidebar down as well top: 5px; margin-bottom: 5px; } .menu-toggler + .sidebar.responsive + .main-content .breadcrumbs { margin: 0; top: auto; 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)) and (max-width: @grid-float-breakpoint-max) { .breadcrumbs-fixed { width: @container-sm - 10; } .sidebar.compact + .main-content .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: @screen-md-min) { .breadcrumbs-fixed { width: @container-md - @sidebar-width - 16; } .sidebar.compact + .main-content .breadcrumbs-fixed { width: @container-md - @sidebar-compact-width - 16; } .sidebar.menu-min + .main-content .breadcrumbs-fixed { width: @container-md - @sidebar-min-width - 16; } } @media (min-width: @screen-lg-min) { .breadcrumbs-fixed { width: @container-lg - @sidebar-width - 16; } .sidebar.compact + .main-content .breadcrumbs-fixed { width: @container-lg - @sidebar-compact-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 !important; opacity: 1; padding: 7px !important; 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 !important; } .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 { border-color: @nav-item-border-hover; } &.active { border-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%); } } } }//@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; } //.nav-list li.active > a:before, .nav-list li.active > a:after { //display: none !important; //} .scroll-track { background-color: transparent; } .scroll-bar { background-color: #CCC; background-color: rgba(0,0,0,0.2); } } @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; } } } }//.skin-3