From cf13077f160f0716459e6d2d84d7c30bc1b60379 Mon Sep 17 00:00:00 2001 From: Martin Wasley Date: Tue, 11 Dec 2018 07:24:18 +0000 Subject: [PATCH] Update Rebellion sidebar elements scss code generated using http://sebastianpontow.de/css2compass --- misc/theme-rebellion/Makefile | 2 +- .../rebellion/assets/stylesheets/main.scss | 1868 ++++++++--------- .../www/themes/rebellion/build/css/main.css | 233 +- 3 files changed, 949 insertions(+), 1154 deletions(-) diff --git a/misc/theme-rebellion/Makefile b/misc/theme-rebellion/Makefile index 8436fa26d..ac07e4921 100644 --- a/misc/theme-rebellion/Makefile +++ b/misc/theme-rebellion/Makefile @@ -1,5 +1,5 @@ PLUGIN_NAME= theme-rebellion -PLUGIN_VERSION= 1.8 +PLUGIN_VERSION= 1.8.1 PLUGIN_COMMENT= A suitably dark theme PLUGIN_MAINTAINER= team-rebellion@queens-park.com diff --git a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/assets/stylesheets/main.scss b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/assets/stylesheets/main.scss index 18d2d6e7d..2e07008c1 100644 --- a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/assets/stylesheets/main.scss +++ b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/assets/stylesheets/main.scss @@ -1,76 +1,156 @@ -$colors: ( - orange: #EA7105, - lightgrey: #2B2B2B, - lightergrey: #232323, - darkgrey: #C1C1c1, - bordergrey: #E5E5E5, - rebelgrey: #404040, -); +//colors +$color_alto_approx: #d9d9d9; +$color_quill_gray_approx: lightgrey; +$color_log_cabin_approx: #222; +$black_15: rgba(0,0,0,.15); +$color_mine_shaft_approx: #333; +$color_shady_lady_approx: darkgrey; +$white: #fff; +$color_shark_approx: #2a2a2a; +$color_tuatara_approx: #393939; +$color_christine_approx: #ec6d12; +$color_fuscous_gray_approx: #515151; +$black_50: rgba(0, 0, 0, 0.5); +$black_75: rgba(0, 0, 0, 0.75); +$color_violet_eggplant_approx: #a1a; +$color_mango_tango_approx: #ea7105; +$color_tundora_approx: #454545; +$color_tan_hide_approx: #ed9a50; +$color_baltic_sea_approx: #2b2b2b; +$mercury: #e5e5e5; +$color_celeste_approx: #ccc; +$color_froly_approx: lightcoral; +$color_suva_gray_approx: #888888; +$color_gallery_approx: #eeeeee; +$color_chicago_approx: #565656; +$color_roof_terracotta_approx: #b13116; +$color_azure_radiance_approx: rgb(0, 151, 255); +$color_stack_approx: rgb(143, 143, 143); +$black: rgb(0, 0, 0); +$black_60: rgba(0, 0, 0, 0.6); +$color_gravel_approx: #4b4b4b; +$color_rangoon_green_approx: #1d1d1d; +$color_masala_approx: rgb(60, 60, 60); +$black_100: rgba(0, 0, 0, 1); +$color_flamenco_approx: rgb(255, 127, 14); +$color_corn_approx: #eac80a; -$zindex: ( - header: 2, - footer: 2, - main: 1, - sidebar: 3, -); +//fonts +$font_0: SourceSansProBold; +$font_1: SourceSansProSemibold; +$font_2: SourceSansProRegular; -// format dashboard widget headers -.widgetdiv { - .content-box-head { - background: #454545 !important; - color: map-get($colors, darkgrey) !important; - padding-bottom: 1px !important; - padding-top: 1px !important; - padding-right: 1px !important; - padding-left: 5px !important; - min-height: 25px !important; +//urls +$url_0: url(/ui/themes/opnsense/build/fonts/SourceSansPro-Bold/SourceSansPro-Bold.woff); +$url_1: url(/ui/themes/opnsense/build/fonts/SourceSansPro-Bold/SourceSansPro-Bold.ttf); +$url_2: url(/ui/themes/opnsense/build/fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.woff); +$url_3: url(/ui/themes/opnsense/build/fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.ttf); +$url_4: url(/ui/themes/opnsense/build/fonts/SourceSansPro-Regular/SourceSansPro-Regular.woff); +$url_5: url(/ui/themes/opnsense/build/fonts/SourceSansPro-Regular/SourceSansPro-Regular.ttf); +$url_6: url(/ui/themes/opnsense/build/images/caret.png); - .btn-group { - .btn { - color: map-get($colors, darkgrey) !important; - background: #454545 !important; - border: 0px; - .glyphicon { - color: map-get($colors, darkgrey) !important; - } - } - } - .list-inline { - li > h3 { - padding-top: 4px; - } - } - } +//@extend-elements +//original selectors +//#navigation.col-sidebar-left >div >nav >#mainmenu >div >div.collapse.in >div.collapse.in >a.list-group-item:hover, a.list-group-item:focus +%extend_1 { + text-decoration: none !important; + color: $color_christine_approx !important; + background-color: $color_shark_approx !important; } +//original selectors +//.nav-tabs >li >a, .nav-tabs >li >a:hover, .nav-tabs >li >a:focus +%extend_2 { + border-right: 1px solid darken($color_log_cabin_approx, 5%); + border-top: 1px solid darken($color_log_cabin_approx, 5%); + border-left: 1px solid darken($color_log_cabin_approx, 5%); + border-bottom: 1px solid darken(map-get($colors, bordergrey), 30%); +} + +//original selectors +//.nav-tabs >li.active >a, .nav-tabs >li.active >a:hover, .nav-tabs >li.active >a:focus +%extend_3 { + border-right: 1px solid darken(map-get($colors, bordergrey), 30%); + border-top: 1px solid darken(map-get($colors, bordergrey), 30%); + border-left: 1px solid darken(map-get($colors, bordergrey), 30%); +} + +//original selectors +//.active-menu-title, .active-menu a +%extend_4 { + text-decoration: none; + position: relative; + background-color: $color_shark_approx; + &: before; +} + +//original selectors +//&:hover, &:focus +%extend_5 { + color: $color_christine_approx; + text-decoration: underline; + border-color: $color_christine_approx !important; + background-color: $color_shark_approx !important; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: inset 0 1px 1px $black, 0 0 8px $black_60; +} + +//original selectors +//.bootgrid-header .actionBar .btn-group >.btn-group .dropdown-menu, .bootgrid-footer .infoBar .btn-group >.btn-group .dropdown-menu +%extend_6 { + color: $white; + background-color: $color_shark_approx; + border-color: $color_rangoon_green_approx; +} + +//original selectors +//.bootgrid-header .actionBar .btn-group >.btn-group .dropdown-menu .dropdown-item:hover, .bootgrid-footer .infoBar .btn-group >.btn-group .dropdown-menu .dropdown-item:hover, .bootgrid-header .actionBar .btn-group >.btn-group .dropdown-menu .dropdown-item:focus, .bootgrid-footer .infoBar .btn-group >.btn-group .dropdown-menu .dropdown-item:focus +%extend_7 { + color: $white !important; + text-decoration: none !important; + background-color: $color_christine_approx !important; +} + +//original selectors +//.bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon, .input-group-addon +%extend_8 { + top: 0; + background-color: $color_christine_approx !important; + border: 1px solid $color_christine_approx !important; +} + + +main { + &: 1 { + .content-box-head: ; + } + &.page-content.col-lg-12 { + padding-left: 90px; + } +} +.list-inline { + li >h3: ; + .btn-group-container { + [WRAPPING_QUERY_5]: ; + } +} @font-face { - font-family: 'SourceSansProBold'; - src: url('/ui/themes/opnsense/build/fonts/SourceSansPro-Bold/SourceSansPro-Bold.woff') format('woff'), - url('/ui/themes/opnsense/build/fonts/SourceSansPro-Bold/SourceSansPro-Bold.ttf') format('truetype'); + font-family: $font_0; + src: $url_0 format('woff'), $url_1 format('truetype'); } - @font-face { - font-family: 'SourceSansProSemibold'; - src: url('/ui/themes/opnsense/build/fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.woff') format('woff'), - url('/ui/themes/opnsense/build/fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.ttf') format('truetype'); + font-family: $font_1; + src: $url_2 format('woff'), $url_3 format('truetype'); } - @font-face { - font-family: 'SourceSansProRegular'; - src: url('/ui/themes/opnsense/build/fonts/SourceSansPro-Regular/SourceSansPro-Regular.woff') format('woff'), - url('/ui/themes/opnsense/build/fonts/SourceSansPro-Regular/SourceSansPro-Regular.ttf') format('truetype'); + font-family: $font_2; + src: $url_4 format('woff'), $url_5 format('truetype'); } - -// Core variables and mixins @import "bootstrap/variables"; @import "bootstrap/mixins"; - -// Reset and dependencies @import "bootstrap/normalize"; @import "bootstrap/print"; @import "bootstrap/glyphicons"; - -// Core CSS @import "bootstrap/scaffolding"; @import "bootstrap/type"; @import "bootstrap/code"; @@ -78,8 +158,6 @@ $zindex: ( @import "bootstrap/tables"; @import "bootstrap/forms"; @import "bootstrap/buttons"; - -// Components @import "bootstrap/component-animations"; @import "bootstrap/dropdowns"; @import "bootstrap/button-groups"; @@ -101,1081 +179,837 @@ $zindex: ( @import "bootstrap/responsive-embed"; @import "bootstrap/wells"; @import "bootstrap/close"; - -// Components w/ JavaScript @import "bootstrap/modals"; @import "bootstrap/tooltip"; @import "bootstrap/popovers"; @import "bootstrap/carousel"; - -// Utility classes @import "bootstrap/utilities"; @import "bootstrap/responsive-utilities"; - -*{ - -webkit-font-smoothing: antialiased; +* { } - -html, body{ - height: 100%; - font-family: 'SourceSansProRegular'; +html { + height: 100%; + font-family: $font_2; } - -body{ - touch-action: manipulation; - min-width: 320px; +body { + height: 100%; + font-family: $font_2; + touch-action: manipulation; + min-width: 320px; } - -.page-head{ - background: map-get($colors, rebelgrey); - top: 0; - left: 0; - position: fixed; - width: 100%; - z-index: map-get($zindex, header); +.page-head { + background: map-get($colors, rebelgrey); + top: 0; + left: 0; + position: fixed; + width: 100%; + z-index: map-get($zindex, header); } - -.page-content{ - height: calc(100% - 52px); - padding-top: 52px; - position: relative; - z-index: map-get($zindex, main); - - > .row{ - height: 100%; - } +.page-content { + height: calc(100% - 52px); + padding-top: 52px; + position: relative; + z-index: map-get($zindex, main); + >.row: ; } - -.page-content-head{ - background: map-get($colors, lightergrey); - border-bottom: 1px solid rgba(#D9D9D9, .50); - padding-bottom: 15px; - padding-top: 20px; - - .navbar-nav{ - width: 100%; - } - - h1,h2,h3{ - line-height: 1; - margin: 0; - } +.page-content-head { + background: map-get($colors, lightergrey); + border-bottom: 1px solid rgba($color_alto_approx, .50); + padding-bottom: 15px; + padding-top: 20px; + .navbar-nav: ; } - -.page-content-main{ - background: map-get($colors, lightgrey); - min-height: calc(100% - 64px); - padding: 15px 0 (15px + 58px); +h1 { + line-height: 1; + margin: 0; } - -.page-side{ - background: #222; - border-right: 1px solid rgba(0,0,0,.15); - height: 100% !important; - height: calc(100% - 52px) !important; - left: 0; - overflow: auto; - margin-top: 52px; - position: fixed; - top: 0; - z-index: map-get($zindex, sidebar); - - @extend .hidden-xs; +h2 { + line-height: 1; + margin: 0; +} +h3 { + line-height: 1; + margin: 0; + &: focus; +} +.page-content-main { + background: map-get($colors, $color_quill_gray_approx); + min-height: calc(100% - 64px); + padding: 15px 0(15px +58px); + [class^="col-"] + [class^="col-"] { + padding-top: ($grid-gutter-width/2); + } +} +.page-side { + background: $color_log_cabin_approx; + border-right: 1px solid $black_15; + height: 100% !important; + height: calc(100% - 52px) !important; + left: 0; + overflow: auto; + margin-top: 52px; + position: fixed; + top: 0; + z-index: map-get($zindex, sidebar); + @extend .hidden-xs: ; } - .page-side-nav { - - &--active{ - background: map-get($colors, lightgrey); - border-left: 3px solid map-get($colors, orange); - } + &--active: ; } - -.page-foot{ - background: map-get($colors, lightergrey); - bottom: 0; - border-top: 1px solid rgba(#D9D9D9, .50); - font-size: 12px; - padding: 20px 0; - position: fixed; - width: 100%; - z-index: map-get($zindex, footer); +.page-foot { + background: map-get($colors, lightergrey); + bottom: 0; + border-top: 1px solid rgba($color_alto_approx, .50); + font-size: 12px; + padding: 20px 0; + position: fixed; + width: 100%; + z-index: map-get($zindex, footer); } - -section.page-content-main { - div.tab-content { - border-top: 1px solid #999999 !important; - } - ul + div.tab-content { - border-top: 0px !important; - } +ul { + &.TokensContainer { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 3px; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s; + li.Token: ; + } + + div.tab-content { + border-top: 0 !important; + } } - -.content-box{ - background: #333; - border: 1px solid map-get($colors, bordergrey); - - @extend .clearfix; - - &-head{ - @extend .page-content-head; - } - - &-main{ - //background: map-get($colors, lightgrey); - padding-bottom: 15px; - padding-top: 15px; - } +.content-box { + background: $color_mine_shaft_approx; + border: 1px solid map-get($colors, bordergrey); + @extend .clearfix: ; + &-head: ; } - -.tab-content{ - border-top: 0px; - padding: 0px 0; - - > .tab-content{ - margin-bottom: 0; - padding: 0 15px; - } - - .tab-content:last-child{ - margin-bottom: 0; - } +&-main { + //background: map-get($colors, $color_quill_gray_approx); + padding-bottom: 15px; + padding-top: 15px; } - -.page-content-main [class^="col-"] + [class^="col-"]{ - padding-top: ($grid-gutter-width/2); +.tab-content { + border-top: 0; + padding: 0; + >.tab-content: ; + &:last-child { + margin-bottom: 0; + } } - -.brand-logo{ - display: none; - - @media (min-width: $screen-sm-min) { - display: inline-block; - } +.brand-logo { + display: none; + [WRAPPING_QUERY_0]: ; } - -.brand-icon{ - display: inline-block; - - @media (min-width: $screen-sm-min) { - display: none; - } +.brand-icon { + display: inline-block; + [WRAPPING_QUERY_1]: ; } - -.col-sm-disable-spacer{ - @media (min-width: $screen-sm-min) { - padding-top: 0 !important; - } +.col-sm-disable-spacer { + [WRAPPING_QUERY_2]: ; } - -.col-md-disable-spacer{ - @media (min-width: $screen-md-min) { - padding-top: 0 !important; - } +.col-md-disable-spacer { + [WRAPPING_QUERY_3]: ; } - -.col-lg-disable-spacer{ - @media (min-width: $screen-lg-min) { - padding-top: 0 !important; - } +.col-lg-disable-spacer { + [WRAPPING_QUERY_4]: ; } - -.page-login{ - background: map-get($colors, lightgrey); - - .container{ - min-height: 100%; - margin-bottom: -60px; - - &:after{ - height: 60px; - } - } +.page-login { + background: map-get($colors, $color_quill_gray_approx); + .container: ; } - -.login-foot{ - font-size: 12px; +.login-foot { + font-size: 12px; } - -.login-modal{ - - &-container{ - background: #222; - border: 1px solid map-get($colors, bordergrey); - max-width: 400px; - margin: 100px auto 15px auto; - } - - &-head{ - background: map-get($colors, darkgrey); - height: 75px; - padding: 0 20px; - } - - &-content{ - padding: 20px 20px 20px 20px; - } - - &-foot{ - background: map-get($colors, lightgrey); - border-top: 1px solid map-get($colors, bordergrey); - height: 60px; - padding: 20px 20px 0 20px; - - a{ - color: #7D7D7D; - text-decoration: none; - - &:hover{ - color: darken(#7D7D7D, 10%); - text-decoration: underline; - } - } - } +.login-modal { + &-container: ; } - -.list-inline .btn-group-container{ - @media (min-width:$screen-sm-min){ - float:right; - } +&-head { + background: map-get($colors, $color_shady_lady_approx); + height: 75px; + padding: 0 20px; } - -.btn.btn-fixed{ - max-width: 174px; - width: 100%; +&-content { + padding: 20px; } - -.progress-bar-placeholder{ - font-size: 12px; - position: absolute; - text-align: center; - width: 100%; - z-index: 1; +&-foot { + background: map-get($colors, $color_quill_gray_approx); + border-top: 1px solid map-get($colors, bordergrey); + height: 60px; + padding: 20px 20px 0 20px; + a: ; } - -/* BOOTSTRAP EDIT */ -.list-group-item{ - border-left: none; - border-right: none; - - &.collapsed .caret{ - border-bottom: 4px solid green; - border-top: 0; - } +.btn { + &.btn-fixed { + max-width: 174px; + width: 100%; + } + .glyphicon { + vertical-align: -1px; + } } - -/* COLLAPSE SIDEBAR */ - -main.page-content.col-lg-12 { - padding-left: 90px; +.progress-bar-placeholder { + font-size: 12px; + position: absolute; + text-align: center; + width: 100%; + z-index: 1; } - -#navigation.col-sidebar-left { - width: 70px; - background-color: transparent !important; - overflow: hidden; - > div { - &.row { - height: 100% !important; - > nav.page-side-nav { - width: 70px; - background-color: #202020 !important; - height: 100% !important; - } - } - > nav > #mainmenu > div > { - a.list-group-item { - font-size: 12px; - text-align: center; - > span { - &.fa, &.glyphicon { - visibility: visible; - font-size: 28px; - } - &.__iconspacer { - width: 50px; - height: 30px; - padding: 0px; - } - } - width: 70px; - height: 70px; - padding-left: 0px; - padding-right: 0px; - padding-top: 12px; - border-bottom: 2px solid #393939; - } - div { - &.collapsing > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; - display: block !important; - position: absolute !important; - left: 70px !important; - margin-top: -70px !important; - } - &.collapse.in > div.collapsing > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; - display: block !important; - position: absolute !important; - left: 148px !important; - margin-top: -28px !important; - } - } - a.list-group-item.active-menu-title { - color: #FFF !important; - background-color: #2a2a2a !important; - } - } - } +.list-group-item { + border-left: none; + border-right: none; + &.collapsed .caret: ; + overflow: hidden; + text-overflow: ellipsis; + +div.collapse: ; } - -a.list-group-item.active-menu-title.collapsed { - color: #FFF !important; - background-color: #2a2a2a !important; +#navigation { + &.col-sidebar-left { + width: 70px; + background-color: transparent !important; + overflow: hidden; + >div: ; + > div > nav > #mainmenu > div { + > { + a.list-group-item[aria-expanded="true"]: ; + } + > div { + &.collapse.in >a.list-group-item: ; + &.collapse.in > div.collapse.in > a.list-group-item:hover { + @extend %extend_1; + } + } + } + } + &.collapse.in { + display: block !important; + } + > .fa-search::before { + color: inherit !important; + } } - -#navigation.col-sidebar-left > div > nav > #mainmenu > div > { - a.list-group-item[aria-expanded="true"] { - color: #ec6d12 !important; - background-color: #2a2a2a !important; - } - div { - &.collapse { - &.in { - > a.list-group-item[aria-expanded="true"] { - color: #ec6d12 !important; - background-color: #2a2a2a !important; - } - > div.collapse.in > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; - background-color: #393939 !important; - &.menu-level-3-item.active { - color: #ec6d12 !important; - background-color: #2a2a2a !important; - } - } - } - > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; - background-color: #393939 !important; - } - > div.collapse > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; - } - } - &.collapsed > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; - } - &.collapse.in > a.list-group-item:hover { - color: #ec6d12 !important; - background-color: #2a2a2a !important; - } - } +& { + &.__iconspacer { + width: 50px; + height: 30px; + padding: 0; + } + &.collapsing { + left: 70px; + margin-top: -70px; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 2px 2px 1px 0 $black_50; + width: 0; + font-size: 12px; + position: absolute; + display: block; + z-index: 10; + left: 148px; + margin-top: -28px; + height: auto; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 2px 2px 1px 0 $black_75; + } + &:before { + background: $color_mango_tango_approx; + content: ""; + height: 42px; + min-height: 100%; + left: 0; + position: absolute; + top: 0; + width: 0; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: width .2s; + } + &.active { + background-color: $color_tundora_approx; + } + &:link { + color: $white; + text-decoration: underline; + } + &:hover { + @extend %extend_5; + background-color: $color_gravel_approx !important; + } + &:focus { + @extend %extend_5; + } + &.Dropdown { + border: 1px solid $color_chicago_approx !important; + background-color: $color_shark_approx !important; + color: $white !important; + } + &.Placeholder { + color: $color_fuscous_gray_approx !important; + } + &.collapse.in { + width: 150px; + font-size: 12px; + display: block; + z-index: 10; + position: absolute; + left: 70px; + margin-top: -70px; + height: auto; + border: 1px solid $color_fuscous_gray_approx; + //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) + transition: width 0.1s; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 2px 2px 1px 0 $black_50; + > div { + &.collapse.in: ; + &.collapsing > a.list-group-item { + padding-left: 10px !important; + font-size: 12px !important; + display: block !important; + position: absolute !important; + left: 148px !important; + margin-top: -28px !important; + } + } + > a.list-group-item:hover { + color: $color_christine_approx !important; + background-color: $color_shark_approx !important; + } + } + &.collapsed > a.list-group-item { + padding-left: 10px !important; + font-size: 12px !important; + } + &.active-menu.collapse.in > a.list-group-item.active { + color: $color_christine_approx !important; + background-color: $color_shark_approx !important; + } + &.TokensContainer li { + &.Token: ; + } + &.Token a.Close { + color: $white !important; + } } - -a.list-group-item:focus { - color: #ec6d12 !important; - background-color: #2a2a2a !important; +div { + &.collapsing >a.list-group-item: ; + &.collapse: ; + &.Tokenize ul { + &.TokensContainer: ; + } } - -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus { - text-decoration: none !important; - color: #ec6d12 !important; - background-color: #2a2a2a !important; +.list-group-submenu { + a { + padding-left: 56px; + } + .list-group-item:last-child { + border-bottom: none; + } } - -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div { - &.collapse.in > a.list-group-item { - &.active-menu-title, &.collapsed:focus, &:focus { - color: #ec6d12 !important; - background-color: #2a2a2a !important; - } - } - &.active-menu.collapse.in > a.list-group-item.active { - color: #ec6d12 !important; - background-color: #2a2a2a !important; - } - &.collapse.in { - width: 150px; - font-size: 12px; - display: block; - z-index: 10; - position: absolute; - left: 70px; - margin-top: -70px; - height: auto; - border: 1px solid #515151; - -webkit-transition: width 0.1s; - -o-transition: width 0.1s; - transition: width 0.1s; - -webkit-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - } - &.collapsing { - width: 0px; - font-size: 12px; - position: absolute; - display: block; - z-index: 10; - left: 70px; - margin-top: -70px; - height: auto; - -webkit-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - } - &.collapse.in > div { - &.collapse.in { - width: 150px; - font-size: 12px; - display: block; - z-index: 10; - position: absolute; - left: 148px; - margin-top: -28px; - height: auto; - border: 1px solid #515151; - -webkit-transition: width 0.1s; - -o-transition: width 0.1s; - transition: width 0.1s; - -webkit-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - } - &.collapsing { - width: 0px; - font-size: 12px; - position: absolute; - display: block; - z-index: 10; - left: 148px; - margin-top: -28px; - height: auto; - -webkit-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.75); - box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.75); - } - } -} - -/* Sub Level One */ - -/* Sub Level Two */ - -button.toggle-sidebar { - &.glyphicon { - &.glyphicon-chevron-left:focus, &.glyphicon-chevron-right:focus { - outline: none; - } - } - color: #FFF; - background-color: transparent; - font-size: 14px; - border: none; - margin-top: 18px; - float: left; -} - -/* COLLAPSE SIDEBAR END*/ - -#navigation.collapse.in{ - display: block !important; -} - -.list-group-submenu .list-group-item:last-child, -.collapse .list-group-item:last-child { - border-bottom: none; -} - -.dropdown-menu > li > a, .dropdown-header { - padding: 3px 10px; + padding: 3px 10px; } - .nav-tabs { - margin-right: 1px; - border-bottom: 1px solid darken(map-get($colors, bordergrey), 30%); + margin-right: 1px; + border-bottom: 1px solid darken(map-get($colors, bordergrey), 30%); + > li { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + //Instead of the line below you could use @include border-top-right-radius($radius) + border-top-right-radius: 10px; + margin-right: 2px; + > a { + background: $color_log_cabin_approx; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + //Instead of the line below you could use @include border-top-right-radius($radius) + border-top-right-radius: 10px; + margin-right: 0; + @extend %extend_2; + &:hover { + @extend %extend_2; + } + &:focus { + @extend %extend_2; + } + &.visible-lg-inline-block { + &.pull-right { + border-left: 0 !important; + padding-left: 5px !important; + padding-right: 10px !important; + } + &:not(.pull-right) { + //Instead of the line below you could use @include border-top-right-radius($radius) + border-top-right-radius: 0 !important; + padding-left: 10px !important; + padding-right: 5px !important; + } + } + } + &.active > a { + background: $color_fuscous_gray_approx !important; + @extend %extend_3; + &:hover { + @extend %extend_3; + } + &:focus { + @extend %extend_3; + } + } + } + &.nav-justified { + border-right: 1px solid map-get($colors, bordergrey); + >li: ; + .nav-tabs.nav-justified >.active >a: focus; + > li > a { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0 !important; + } + } } - -.nav-tabs > li { - border-radius: 0px; - border-top-right-radius: 10px; - margin-right: 2px; +> li { + &.active { + > a { + [WRAPPING_QUERY_7]: ; + } + + li > a { + [WRAPPING_QUERY_8]: ; + } + } + &:last-child > a { + border-right: 1px solid transparent !important; + [WRAPPING_QUERY_9]: ; + } } - -.nav-tabs > li > a { - background: #232323; - border-radius: 0px; - border-top-right-radius: 10px; - margin-right: 0px; +table { + width: 100%; } - -.nav-tabs > li > a, -.nav-tabs > li > a:hover, -.nav-tabs > li > a:focus { - border-right: 1px solid darken(#232323, 5%); - border-top: 1px solid darken(#232323, 5%); - border-left: 1px solid darken(#232323, 5%); - border-bottom: 1px solid darken(map-get($colors, bordergrey), 30%); -} - -.nav-tabs > li.active > a { - background: #555 !important; -} - -.nav-tabs > li.active > a, -.nav-tabs > li.active > a:hover, -.nav-tabs > li.active > a:focus { - border-right: 1px solid darken(map-get($colors, bordergrey), 30%); - border-top: 1px solid darken(map-get($colors, bordergrey), 30%); - border-left: 1px solid darken(map-get($colors, bordergrey), 30%); -} - -.nav-tabs > li > a.visible-lg-inline-block:not(.pull-right) { - border-top-right-radius: 0px !important; - padding-left: 10px !important; - padding-right: 5px !important; -} - -.nav-tabs > li > a.visible-lg-inline-block.pull-right { - border-left: 0px !important; - padding-left: 5px !important; - padding-right: 10px !important; -} - - -.nav-tabs.nav-justified{ - border-right:1px solid map-get($colors, bordergrey); - > li { - border-bottom:1px solid map-get($colors, bordergrey); - border-top:1px solid map-get($colors, bordergrey); - border-left:1px solid map-get($colors, bordergrey); - border-radius: 0px; - background: map-get($colors, lightgrey); - > a { - color: map-get($colors, darkgrey); - font-family: 'SourceSansProSemibold'; - - @media (min-width:$screen-sm-min){ - border-bottom: 1px solid transparent; - } - } - } - - > li.active > a{ - @media (max-width:$screen-xs-max){ - border-right: 0 !important; - } - } - } - - > li.active + li > a{ - @media (min-width:$screen-sm-min){ - border-left: 1px solid transparent; - } - } - - > li:last-child > a{ - border-right:1px solid transparent !important; - - @media (max-width:$screen-xs-max){ - margin-bottom: 0; - } - } - -.btn .glyphicon { - vertical-align: -1px; -} - -.btn-default .glyphicon { - color: #A1A1S1; -} - -table{ - width: 100%; -} - .table { - margin-bottom: 0px !important; + margin-bottom: 0 !important; + th { + font-family: $font_1; + font-weight: normal; + } + > tbody > tr > td:last-child { + padding-right: 15px; + } } - -.nav-tabs-justified, .nav-tabs.nav-justified { - .nav-tabs.nav-justified > .active > a:focus { - border: 0px !important; - } +.nav-tabs-justified { + .nav-tabs.nav-justified >.active >a: focus; + > li > a { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0 !important; + } } - -.table th, strong, b{ - font-family: 'SourceSansProSemibold'; - font-weight: normal; +strong { + font-family: $font_1; + font-weight: normal; } - -.table > tbody > tr > td:last-child{ - padding-right: 15px; +b { + font-family: $font_1; + font-weight: normal; } - -/* helpers */ -.__nowrap{ - white-space: nowrap; +.__nowrap { + white-space: nowrap; } - -.__nomb{ - margin-bottom: 0; +.__nomb { + margin-bottom: 0; } - -.__mb{ - margin-bottom: 15px; +.__mb { + margin-bottom: 15px; } - -.__mt{ - margin-top: 15px; +.__mt { + margin-top: 15px; } - -.__ml{ - margin-left: 15px; +.__ml { + margin-left: 15px; } - -.__mr{ - margin-right: 15px; +.__mr { + margin-right: 15px; } - -.__iconspacer{ - padding-right: 10px; +.__iconspacer { + padding-right: 10px; } - -#mainmenu .glyphicon{ - vertical-align: -2px; +.active-menu-title { + @extend %extend_4; } - -.list-group-item{ - overflow: hidden; - text-overflow: ellipsis; - - + div.collapse{ - margin-bottom: -1px; - } - - + div > a{ - padding-left: 44px; - } - - &:before{ - background: #EA7105; - content: ""; - height: 42px; - min-height: 100%; - left: 0; - position: absolute; - top: 0px; - width: 0; - - -webkit-transition: width .2s; - -moz-transition: width .2s; - -o-transition: width .2s; - transition: width .2s; - - } - +.navbar-brand { + padding: 10px 20px; } - -.list-group-submenu a{ - padding-left: 56px; -} - -.active-menu-title, .active-menu a{ - text-decoration: none; - position: relative; - background-color: #262626; - - &:before{ - width: 3px; - } - - &.active{ - background-color: #454545; - } -} - -.active-menu a:before{ - background: #ED9A50; -} - -.alert.alert-danger{ - color: #FFF !important; -} - -.nav-tabs-justified>li>a, .nav-tabs.nav-justified>li>a{ - border-radius: 0 !important; -} - -.navbar-brand{ - padding: 10px 20px; -} - .label-opnsense { - /* emulates btn */ - border: 1px solid transparent; - display: inline-block; - vertical-align: middle; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; + border: 1px solid transparent; + display: inline-block; + vertical-align: middle; + font-size: 12px; + line-height: 1.5; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 3px; } - .label-opnsense-sm { - /* emulates btn-sm */ - padding: 5px 10px; + padding: 5px 10px; } - .label-opnsense-xs { - /* emulates btn-xs */ - padding: 1px 5px; + padding: 1px 5px; } - ::-webkit-scrollbar { - width: 8px; + width: 8px; } ::-webkit-scrollbar-button { - width: 8px; - height:5px; + width: 8px; + height: 5px; } ::-webkit-scrollbar-track { - background: #2B2B2B; - box-shadow: 0px 0px 0px; - border-radius:0; + background: $color_baltic_sea_approx; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 0 0 0; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; } ::-webkit-scrollbar-thumb { - background: #e5e5e5; - border: thin solid #e5e5e5; - border-radius: 0px; + background: $mercury; + border: thin solid $mercury; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0; + &:hover { + background: $mercury; + } } -::-webkit-scrollbar-thumb:hover { - background:#e5e5e5; -} - .widgetdiv { - padding-top:0px !important; - padding-bottom:20px; + padding-top: 0 !important; + padding-bottom: 20px; } - select { - overflow: hidden; - border: 1px solid #ccc; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - background-repeat: no-repeat; - background-position: right; - background-image: url(/ui/themes/opnsense/build/images/caret.png) !important;} - - #grid-log th[data-column-id="__timestamp__"], -#filter-log-entries th[data-column-id="__timestamp__"] { - min-width: 3.5em; + overflow: hidden; + border: 1px solid $color_celeste_approx; + appearance: none; + cursor: pointer; + background-repeat: no-repeat; + background-position: right; + background-image: $url_6 !important; } - .table-responsive { - @media screen and (max-width: $screen-xs-max) { - margin-bottom: 0; - > .table { - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - white-space: normal; - } - } - } - } - } + [WRAPPING_QUERY_10]: ; } - -label>input[type="checkbox"], -label>input[type="radio"] { - margin-right: .4em; - float:left; +label { + > input[type="checkbox"] { + margin-right: .4em; + float: left; + } + > input[type="radio"] { + margin-right: .4em; + float: left; + } } - div[data-for*="help_for"] { - padding-top: .4em; + padding-top: .4em; } - -#log-settings label[for^="act"] { - margin-right: 1.5em; +#log-settings { + label[for^="act"] { + margin-right: 1.5em; + } + select { + &#filterlogentries { + width: 5em; + } + &#filterlogentriesupdateinterval { + width: 5em; + } + &#filterlogentriesinterfaces { + min-width: 100%; + max-width: 100%; + } + } + table > tbody > tr > td { + vertical-align: middle; + } } - -#log-settings table>tbody>tr>td { - vertical-align: middle; -} - -#log-settings select#filterlogentries, -#log-settings select#filterlogentriesupdateinterval { - width: 5em; -} - -#log-settings select#filterlogentriesinterfaces { - min-width: 100%; - max-width: 100%; -} - -/* fields in firewall schedule */ [data-state="lightcoral"] { - background-color: lightcoral; + background-color: $color_froly_approx; } [data-state="white"] { - background-color: inherit; + background-color: inherit; } [data-state="red"] { - background-color: #ec6d12; + background-color: $color_christine_approx; } .tokens-container { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } - #ipsec { - #ipsec-mobile, #ipsec-tunnel, #ipsec-overview { - background-color: #333333; - } - .ipsec-tab { - background-color: #555555; - color: white; - } - .ipsec-tab.activetab { - background-color: #888888; - color: #eeeeee; - } + #ipsec-mobile, #ipsec-tunnel, #ipsec-overview: ; } - -#tab_1 #maintabs { - border-bottom: 1px solid #565656; +.ipsec-tab { + background-color: $color_fuscous_gray_approx; + color: $white; + &.activetab { + background-color: $color_suva_gray_approx; + color: $color_gallery_approx; + } } - -textarea#update_status { - color: inherit !important; - background-color: none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - border: none !important; - &:hover { - color: inherit !important; - background-color: none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - border: none !important; - } -} - .fa-toggle-off::before { - color: #ec6d12 !important; - outline: none !important; + color: $color_christine_approx !important; + outline: none !important; } - .fa-toggle-on::before { - outline: none !important; + outline: none !important; } - -.fa-search, .glyphicon-search::before { - content: "\e003"; - color: #FFFFFF !important; +.fa-search { + content: "\e003"; + color: $white !important; +} +.glyphicon-search::before { + content: "\e003"; + color: $white !important; } - .fa-times-circle::before { - content: "\f057"; - color: #B13116; + content: "\f057"; + color: $color_roof_terracotta_approx; } - .fa-refresh::before { - content: "\f021"; - color: #FFF; + content: "\f021"; + color: $white; + color: inherit !important; } - .fa-question-circle::before { - content: "\f059"; - cursor: pointer; - color: #ec6d12; + content: "\f059"; + cursor: pointer; + color: $color_christine_approx; } - -#navigation > .fa-search::before, .fa-refresh::before { - color: inherit !important; -} - -#totals .fa-search::before { - color: #FFF !important; - background-color: #ec6d12; - padding: 5px; - border-radius: 4px; - border: 1px solid #5A5A5A; -} - -.panel-heading h3:hover { - color: #FFFFFF; - text-decoration: none; -} - -h3 { - &:focus { - color: #FFFFFF; - text-decoration: none; - } - &:link { - color: #FFFFFF; - text-decoration: underline; - } - &:hover, &:focus { - color: #ec6d12; - text-decoration: underline; - } -} - text { - &.nvd3, &.nv-axislabel, &.nv-legend-text { - fill: #FFFFFF; - } + &.nvd3, &.nv-axislabel, &.nv-legend-text: ; } - -.nvd3 .nv-axis { - fill: #FFFFFF; -} - .nv-series-0 { - stroke-opacity: 1; - stroke-width: 1.5; - fill-opacity: 0.5; - fill: rgb(0, 151, 255) !important; - stroke: rgb(0, 151, 255) !important; + stroke-opacity: 1; + stroke-width: 1.5; + fill-opacity: 0.5; + fill: $color_azure_radiance_approx !important; + stroke: $color_azure_radiance_approx !important; } - -.nv-controlsWrap.nvd3-svg circle.nv-legend-symbol { - stroke-width: 1 !important; - fill: rgb(143, 143, 143) !important; - stroke: rgb(143, 143, 143) !important; +.bootgrid-table { + th { + >.column-header-anchor: ; + } + td { + &.loading, &.no-results: ; + } } - -.table-condensed.table-hover { - border: 1px solid #515151; +.bootgrid-header { + .actionBar .btn-group > .btn-group .dropdown-menu { + @extend %extend_6; + .dropdown-item { + &:hover { + @extend %extend_7; + } + &:focus { + @extend %extend_7; + } + } + } + .search .glyphicon { + @extend %extend_8; + } } - -ul.TokensContainer { - border-radius: 3px; - -webkit-transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s; - -o-transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s; - transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s; - li.Token { - color: #FFFFFF !important; - } +.bootgrid-footer { + .infoBar .btn-group > .btn-group .dropdown-menu { + @extend %extend_6; + .dropdown-item { + &:hover { + @extend %extend_7; + } + &:focus { + @extend %extend_7; + } + } + } + .search .glyphicon { + @extend %extend_8; + } } - -div.Tokenize ul { - &.TokensContainer { - li.TokenSearch { - color: #FFFFFF !important; - } - &:hover, &:focus { - border-color: #ec6d12 !important; - background-color: #2a2a2a !important; - -webkit-box-shadow: inset 0 1px 1px rgb(0, 0, 0), 0 0 8px rgba(0, 0, 0, 0.6); - box-shadow: inset 0 1px 1px rgb(0, 0, 0), 0 0 8px rgba(0, 0, 0, 0.6); - } - border: 1px solid #5a5a5a !important; - background-color: #2a2a2a !important; - color: #FFFFFF !important; - } - &.Dropdown { - border: 1px solid #5a5a5a !important; - background-color: #2a2a2a !important; - color: #FFFFFF !important; - } - &.TokensContainer li { - &.Token { - background-color: #ce671c !important; - border: 1px solid #303030 !important; - } - &.Placeholder { - color: #505050 !important; - } - &.Token a.Close { - color: #FFFFFF !important; - } - } +.input-group-addon { + @extend %extend_8; } - -.bootgrid-table th { - > .column-header-anchor { - color: #fff !important; - > { - .icon, .glyphicon { - color: #fff !important; - } - } - } - &:hover { - background-color: #4b4b4b !important; - } -} - -.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu { - color: #fff; - background-color: #2a2a2a; - border-color: #1d1d1d; -} - -.btn-group.bootstrap-select { - &.open, &:hover { - border-color: #323232 !important; - color: #FFFFFF !important; - background-color: #2d2d2d !important; - } -} - -.bootgrid-table td { - &.loading, &.no-results { - background: none !important; - } -} - -.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover, .bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus { - color: #FFF !important; - text-decoration: none !important; - background-color: #ec6d12 !important; -} - -.bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon, .input-group-addon { - top: 0; - background-color: #ec6d12 !important; - border: 1px solid #ec6d12 !important; -} - .nvtooltip { - background-color: rgb(60, 60, 60) !important; - color: rgba(0, 0, 0, 1) !important; - border: 1px solid rgb(255, 127, 14) !important; + background-color: $color_masala_approx !important; + color: $black_100 !important; + border: 1px solid $color_flamenco_approx !important; } - .glyphicon { - &.glyphicon-play.text-muted, &.glyphicon-remove.text-muted, &.glyphicon-remove-sign.text-muted, &.glyphicon-info-sign.text-muted { - color: #eac80a !important; - } + &.glyphicon-play.text-muted, &.glyphicon-remove.text-muted, &.glyphicon-remove-sign.text-muted, &.glyphicon-info-sign.text-muted: ; +} +#chart { + background-color: $color_shark_approx; + border: 1px solid $color_fuscous_gray_approx; +} +#chart_intf_in { + background-color: $color_shark_approx; + border: 1px solid $color_fuscous_gray_approx; +} +#chart_intf_out { + background-color: $color_shark_approx; + border: 1px solid $color_fuscous_gray_approx; +} +#chart_top_ports { + background-color: $color_shark_approx; + border: 1px solid $color_fuscous_gray_approx; +} +#chart_top_sources { + background-color: $color_shark_approx; + border: 1px solid $color_fuscous_gray_approx; +} +#traffic_graph_widget_chart_in { + background-color: $color_shark_approx; + border: 1px solid $color_fuscous_gray_approx; +} +#traffic_graph_widget_chart_out { + background-color: $color_shark_approx; + border: 1px solid $color_fuscous_gray_approx; +} +$colors:(orange: #EA7105 { + .content-box-head: ; +} +lightgrey: #2B2B2B { + .content-box-head: ; +} +lightergrey: #232323 { + .content-box-head: ; +} +darkgrey: #C1C1c1 { + .content-box-head: ; +} +bordergrey: #E5E5E5 { + .content-box-head: ; +} +rebelgrey: #404040 { + .content-box-head: ; +} +);$zindex:(header: 2 { + .content-box-head: ; +} +footer: 2 { + .content-box-head: ; +} +sidebar: 3 { + .content-box-head: ; +} +);// format dashboard widget headers.widgetdiv { + .content-box-head: ; +} +section.page-content-main { + div.tab-content: ; +} +> nav > #mainmenu > div > { + a.list-group-item: ; +} +width: 70px; height: 70px; padding-left: 0px; padding-right: 0px; padding-top: 12px; border-bottom: 2px solid #393939; { +} +a.list-group-item { + &.active-menu-title { + color: $white !important; + background-color: $color_shark_approx !important; + &.collapsed { + color: $white !important; + background-color: $color_shark_approx !important; + } + } + &:focus { + color: $color_christine_approx !important; + background-color: $color_shark_approx !important; + @extend %extend_1; + } +} +> div.collapse { + &.in > a.list-group-item { + padding-left: 10px !important; + font-size: 12px !important; + background-color: $color_tuatara_approx !important; + &.menu-level-3-item.active: ; + } + > a.list-group-item { + padding-left: 10px !important; + font-size: 12px !important; + } +} +> a.list-group-item { + padding-left: 10px !important; + font-size: 12px !important; + background-color: $color_tuatara_approx !important; +} +button.toggle-sidebar { + &.glyphicon: ; +} +color: #FFF; background-color: transparent; font-size: 14px; border: none; margin-top: 18px; float: left; { +} +.collapse .list-group-item:last-child { + border-bottom: none; +} +.dropdown-menu > li > a { + padding: 3px 10px; +} +.btn-default .glyphicon { + color: $color_violet_eggplant_approx1s1; +} +#mainmenu .glyphicon { + vertical-align: -2px; +} ++ div > a { + padding-left: 44px; +} +.active-menu a { + @extend %extend_4; + &:before { + background: $color_tan_hide_approx; + } +} +.alert.alert-danger { + color: $white !important; +} +#grid-log th[data-column-id="__timestamp__"] { + min-width: 3.5em; +} +#filter-log-entries th[data-column-id="__timestamp__"] { + min-width: 3.5em; +} +#tab_1 #maintabs { + border-bottom: 1px solid $color_chicago_approx; +} +textarea#update_status { + color: inherit !important; + background-color: none !important; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: none !important; + border: none !important; + &: hover; +} +#totals .fa-search::before { + color: $white !important; + background-color: $color_christine_approx; + padding: 5px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 4px; + border: 1px solid $color_chicago_approx; +} +.panel-heading h3:hover { + color: $white; + text-decoration: none; +} +.nvd3 .nv-axis { + fill: $white; +} +.nv-controlsWrap.nvd3-svg circle.nv-legend-symbol { + stroke-width: 1 !important; + fill: $color_stack_approx !important; + stroke: $color_stack_approx !important; +} +.table-condensed.table-hover { + border: 1px solid $color_fuscous_gray_approx; +} +border: 1px solid #5a5a5a !important; background-color: #2a2a2a !important; color: #FFFFFF !important; { +} +.btn-group.bootstrap-select { + &.open, &: hover; } - .fa.fa-play.text-muted::before { - color: #eac80a !important; + color: $color_corn_approx !important; } - #system_log-widgets.content-box { - border: none; -} - -#chart, #chart_intf_in, #chart_intf_out, #chart_top_ports, #chart_top_sources, #traffic_graph_widget_chart_in, #traffic_graph_widget_chart_out { - background-color: #292929; - border: 1px solid #515151; -} + border: none; +} \ No newline at end of file diff --git a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/main.css b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/main.css index f7bcdf58f..54f31535c 100644 --- a/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/main.css +++ b/misc/theme-rebellion/src/opnsense/www/themes/rebellion/build/css/main.css @@ -7104,18 +7104,22 @@ main.page-content.col-lg-12 { } #navigation.col-sidebar-left { - width: 70px; + width:70px; background-color: transparent !important; overflow: hidden; } + #navigation.col-sidebar-left > div.row { - height: 100% !important; + height:100% !important; } + #navigation.col-sidebar-left > div.row > nav.page-side-nav { - width: 70px; - background-color: #202020 !important; - height: 100% !important; + width:70px; + background-color:#222222 !important; + height:100% !important; + border-right: 1px solid #000000; } + #navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item { font-size: 12px; text-align: center; @@ -7126,170 +7130,127 @@ main.page-content.col-lg-12 { padding-top:12px; border-bottom: 2px solid #lightergrey; } -#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.fa, #navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.glyphicon { + +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.fa, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.glyphicon { visibility: visible; - font-size: 28px; + font-size:20px; } + #navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.__iconspacer { - width: 50px; - height: 30px; - padding: 0px; + width:50px; + height:25px; + padding:0px; } + +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item { + width: 70px; + height: 70px; + padding-left: 0px; + padding-right: 0px; + padding-top:15px; + border-bottom:2px solid #000000; +} + #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 12px !important; + font-size: 14px !important; display: block !important; position: absolute !important; left: 70px !important; - margin-top: -70px !important; } + #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 12px !important; + font-size: 14px !important; display: block !important; position: absolute !important; - left: 148px !important; - margin-top: -28px !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item.active-menu-title { - color: #FFF !important; - background-color: #2a2a2a !important; + left: 166px !important; } -a.list-group-item.active-menu-title.collapsed { - color: #FFF !important; - background-color: #2a2a2a !important; +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item.active-menu-title, a.list-group-item.active-menu-title.collapsed, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item[aria-expanded="true"], +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item[aria-expanded="true"], +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item.menu-level-3-item.active { + color: #CCC!important; + background-color: #111 !important; } -#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item[aria-expanded=true] { - color: #ec6d12 !important; - background-color: #2a2a2a !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item[aria-expanded=true] { - color: #ec6d12 !important; - background-color: #2a2a2a !important; -} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > a.list-group-item, #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item { padding-left: 10px !important; - font-size: 12px !important; - background-color: #393939 !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item.menu-level-3-item.active { - color: #ec6d12 !important; - background-color: #2a2a2a !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; - background-color: #393939 !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > div.collapse > a.list-group-item { - padding-left: 10px !important; - font-size: 12x !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsed > a.list-group-item { - padding-left: 10px !important; - font-size: 12px !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:hover { - color: #ec6d12 !important; - background-color: #2a2a2a !important; + font-size: 14px !important; + background-color: #333333 !important; + opacity: 1.0; } -a.list-group-item:focus { - color: #ec6d12 !important; - background-color: #2a2a2a !important; +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > div.collapse > a.list-group-item, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsed > a.list-group-item { + padding-left: 10px !important; + font-size: 14px !important; +} + +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > a.list-group-item, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > div.collapse > a.list-group-item { + padding: 3px 8px !important; } #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus { text-decoration: none !important; - color: #ec6d12 !important; - background-color: #2a2a2a !important; + color: #ea7105!important; + background-color: #111 !important; } -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.active-menu-title, #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.collapsed:focus, #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:focus { - color: #ec6d12 !important; - background-color: #2a2a2a !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.active-menu.collapse.in > a.list-group-item.active { - color: #ec6d12 !important; - background-color: #2a2a2a !important; -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in { - width: 150px; - font-size: 11px; - display: block; - z-index: 10; - position: absolute; - left: 70px; - margin-top: -70px; - height: auto; - border: 1px solid #515151; - padding-bottom: 1px - -webkit-transition: width 0.1s; - -o-transition: width 0.1s; - transition: width 0.1s; - -webkit-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing { - width: 0px; - font-size: 12px; - position: absolute; - display: block; - z-index: 10; - left: 70px; - margin-top: -70px; - height: auto; - -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5); - box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5); -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in { - width: 150px; - font-size: 12px; - display: block; - z-index: 10; - position: absolute; - left: 148px; - margin-top: -28px; - height: auto; - border: 1px solid #515151; - -webkit-transition: width 0.1s; - -o-transition: width 0.1s; - transition: width 0.1s; - -webkit-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); - box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.5); -} -#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapsing { - width: 0px; - font-size: 12px; - position: absolute; - display: block; - z-index: 10; - left: 148px; - margin-top: -28px; - height: auto; - -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.75); - box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.75); +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.active-menu-title, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.collapsed:focus, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:focus, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.active-menu.collapse.in >a.list-group-item.active { + color: #ea7105!important; + background-color: #111 !important; } /* Sub Level One */ -/* Sub Level Two */ -button.toggle-sidebar { - color: #FFF; - background-color: transparent; - font-size: 14px; - border: none; - margin-top: 18px; - float: left; +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in { + width:168px; + font-size:14px; + z-index: 10; + position: absolute; + left: 70px; + margin-top:-70px; + border:1px solid #000000; + -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 1); + -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 1); + box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 1); } -button.toggle-sidebar.glyphicon.glyphicon-chevron-left:focus, button.toggle-sidebar.glyphicon.glyphicon-chevron-right:focus { - outline: none; +/* Sub Level Two */ +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in { + width:168px; + font-size:14px; + z-index: 10; + position: absolute; + left: 166px; + margin-top:-26px; + border:1px solid #1f3a4a; + -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 1); + -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 1); + box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 1); +} + +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing, +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapsing { + display:none; +} + +button.toggle-sidebar { + color:#FFF; + background-color:transparent; + font-size:14px; + border:none; + margin-top: 18px; + float:left; + outline:none; } /* COLLAPSE SIDEBAR END*/