From 23891fbea89a266cb84f7188e5804c80605eda0b Mon Sep 17 00:00:00 2001 From: marjohn56 Date: Tue, 10 Jul 2018 08:25:04 +0100 Subject: [PATCH] Cicada Theme Update --- .../cicada/assets/stylesheets/main.scss | 308 +++++++++++++++++- .../www/themes/cicada/build/css/main.css | 162 ++++++++- 2 files changed, 451 insertions(+), 19 deletions(-) diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss index 51cd1a311..50f78149c 100644 --- a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/main.scss @@ -8665,6 +8665,14 @@ button.close { } } +/* COLLAPSE SIDEBAR @media*/ +@media (max-width: 768px), (max-height: 669px) { + .toggle-sidebar { + display: none !important; + } +} + +/* COLLAPSE SIDEBAR @media END*/ @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; @@ -8962,6 +8970,245 @@ body { } } +/* BOOTSTRAP EDIT END */ + +/* COLLAPSE SIDEBAR */ + +main.page-content.col-lg-12 { + padding-left: 90px; +} + +#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: 11px; + text-align: center; + > span { + &.fa, &.glyphicon { + visibility: visible; + font-size: 28px; + } + &.__iconspacer { + padding-left: 7px; + padding-right: 7px; + } + } + width: 70px; + height: 70px; + padding-left: 10px; + padding-right: 10px; + padding-top: 15px; + padding-bottom: 15px; + border-bottom: 2px solid #393939; + } + div { + &.collapsing > a.list-group-item { + padding-left: 10px !important; + font-size: 11px !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: 11px !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; + } + } + } +} + +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[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: 11px !important; + background-color: #393939e6 !important; + &.menu-level-3-item.active { + color: #ec6d12 !important; + background-color: #2a2a2a !important; + } + } + } + > a.list-group-item { + padding-left: 10px !important; + font-size: 11px !important; + background-color: #393939e6 !important; + } + > div.collapse > a.list-group-item { + padding-left: 10px !important; + font-size: 11px !important; + } + } + &.collapsed > a.list-group-item { + padding-left: 10px !important; + font-size: 11px !important; + } + &.collapse.in > a.list-group-item:hover { + color: #ec6d12 !important; + background-color: #2a2a2a !important; + } + } +} + +a.list-group-item:focus { + color: #ec6d12 !important; + background-color: #2a2a2a !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; +} + +#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: 11px; + 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: 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); + } + &.collapsing { + width: 0px; + font-size: 11px; + 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); + } + &.collapse.in > div { + &.collapse.in { + width: 150px; + font-size: 11px; + 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: 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); + } + &.collapsing { + width: 0px; + font-size: 11px; + 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); + } + } +} + +/* Sub Level One */ + +/* Sub Level Two */ + +button.toggle-sidebar { + &.glyphicon { + &.glyphicon-chevron-left, &.glyphicon-chevron-right { + position: absolute; + -webkit-transition: all 0.1s ease; + -moz-transition: all 0.1s ease; + -o-transition: all 0.1s ease; + -ms-transition: all 0.1s ease; + transition: all 0.1s ease; + } + &.glyphicon-chevron-left:active, &.glyphicon-chevron-right:active { + position: absolute; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + &.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; } @@ -9304,7 +9551,7 @@ label > input { /* fields in firewall schedule */ [data-state="lightcoral"] { - background-color: lightcoral; + background-color: #ec6d12; } [data-state="white"] { @@ -9366,6 +9613,10 @@ textarea#update_status { color: #ec6d12; } +#navigation > .fa-search::before, .fa-refresh::before { + color: inherit !important; +} + #totals .fa-search::before { color: #FFF !important; background-color: #ec6d12; @@ -9427,16 +9678,20 @@ ul.TokensContainer { -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; - } +} + +::before, ::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +Element { + width: 17px; } div.Tokenize ul { &.TokensContainer { - li.TokenSearch { - color: #FFFFFF !important; - } &:hover, &:focus { border-color: #ec6d12 !important; background-color: #2a2a2a !important; @@ -9452,18 +9707,47 @@ div.Tokenize ul { background-color: #2a2a2a !important; color: #FFFFFF !important; } - &.TokensContainer li { - &.Token { +} + +.tokenize { + > .tokens-container > { + .token { background-color: #ce671c !important; border: 1px solid #303030 !important; } - &.Placeholder { + .placeholder { color: #505050 !important; } - &.Token a.Close { + .token > .dismiss::after { color: #FFFFFF !important; } } + &.focus > .tokens-container { + border-color: #ec6d12 !important; + background-color: #2a2a2a !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + > .tokens-container { + border-radius: 3px; + border: 1px solid #5a5a5a !important; + background-color: #2a2a2a !important; + > { + .tokenize > .tokens-container > .token-search { + color: #FFFFFF !important; + border: none !important; + } + .token, .placeholder { + border: none !important; + } + .token-search { + border: none !important; + > input { + border: none !important; + } + } + } + } } .bootgrid-table th { @@ -9535,4 +9819,4 @@ div.Tokenize ul { #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; -} +} \ No newline at end of file diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css index df8ef9acd..961427dc3 100644 --- a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/main.css @@ -5629,6 +5629,11 @@ button.close { @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } +/* COLLAPSE SIDEBAR @media*/ +@media (max-width: 768px), (max-height: 669px) { + .toggle-sidebar { + display: none !important; } } +/* COLLAPSE SIDEBAR @media END*/ @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @@ -5850,7 +5855,122 @@ body { .list-group-item.collapsed .caret { border-bottom: 4px solid green; border-top: 0; } +/* BOOTSTRAP EDIT END */ +/* COLLAPSE SIDEBAR */ +main.page-content.col-lg-12 { padding-left: 90px; } +#navigation.col-sidebar-left {width:70px;background-color: transparent !important; overflow: hidden;} +#navigation.col-sidebar-left > div.row {height:100% !important;} +#navigation.col-sidebar-left > div.row > nav.page-side-nav {width:70px; background-color:#202020 !important; height:100% !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item {font-size:11px;text-align:center;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.fa {visibility: visible; font-size:28px;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.glyphicon {visibility: visible; font-size:28px;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item > span.__iconspacer {padding-left:7px;padding-right:7px;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item { + width: 70px; + height: 70px; + padding-left: 10px; + padding-right: 10px; + padding-top:15px; + padding-bottom:15px; + border-bottom:2px solid #393939; } +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing > a.list-group-item {padding-left: 10px !important;font-size: 11px !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: 11px !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, 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[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 {padding-left: 10px !important;font-size: 11px !important; background-color: #393939e6 !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item {padding-left: 10px !important;font-size: 11px !important; background-color: #393939e6 !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 > div.collapse > a.list-group-item {padding-left: 10px !important;font-size: 11px !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsed > a.list-group-item {padding-left: 10px !important; font-size: 11px !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus {color: #ec6d12 !important;background-color: #2a2a2a !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;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.active-menu-title {color: #ec6d12 !important;background-color: #2a2a2a !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.collapsed:focus {color: #ec6d12 !important;background-color: #2a2a2a !important;} +#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;} + +/* Sub Level One */ +#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; + -webkit-transition: width 0.1s; + -o-transition: width 0.1s; + transition: width 0.1s; + -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.50); + -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.50); + box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.50);} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing { + width:0px; + font-size:11px; + 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.50); + -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.50); + box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.50);} + +/* Sub Level Two */ +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in { + width:150px; + font-size:11px; + 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: 5px 5px 6px 0px rgba(0, 0, 0, 0.50); + -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.50); + box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.50);} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapsing { + width:0px; + font-size:11px; + 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);} + +button.toggle-sidebar.glyphicon.glyphicon-chevron-left, button.toggle-sidebar.glyphicon.glyphicon-chevron-right{ + position:absolute; + -webkit-transition: all 0.1s ease; + -moz-transition: all 0.1s ease; + -o-transition: all 0.1s ease; + -ms-transition: all 0.1s ease; + transition: all 0.1s ease; +} +button.toggle-sidebar.glyphicon.glyphicon-chevron-left:active, button.toggle-sidebar.glyphicon.glyphicon-chevron-right:active { + position:absolute; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +button.toggle-sidebar.glyphicon.glyphicon-chevron-left:focus, button.toggle-sidebar.glyphicon.glyphicon-chevron-right:focus { outline:none;} +button.toggle-sidebar {color:#FFF; background-color:transparent; font-size:14px;border:none;margin-top: 18px;float:left;} + +/* COLLAPSE SIDEBAR END*/ #navigation.collapse.in { display: block !important; } @@ -6106,7 +6226,7 @@ label > input[type="radio"] { /* fields in firewall schedule */ [data-state="lightcoral"] { - background-color: lightcoral; } + background-color: #ec6d12; } [data-state="white"] { background-color: inherit; } @@ -6147,6 +6267,8 @@ textarea#update_status, textarea#update_status:hover { cursor: pointer; color: #ec6d12; } +#navigation > .fa-search::before, .fa-refresh::before { + color:inherit !important; } #totals .fa-search::before { color: #FFF !important; background-color: #ec6d12; @@ -6190,9 +6312,14 @@ ul.TokensContainer { -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; } -ul.TokensContainer li.Token, div.Tokenize ul.TokensContainer li.TokenSearch { - color:#FFFFFF !important; } - +::before, ::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +Element { + width: 17px; +} div.Tokenize ul.TokensContainer:hover, div.Tokenize ul.TokensContainer:focus { border-color:#ec6d12 !important; background-color:#2a2a2a !important; @@ -6203,16 +6330,37 @@ div.Tokenize ul.TokensContainer, div.Tokenize ul.Dropdown { border: 1px solid #5a5a5a !important; background-color: #2a2a2a !important; color:#FFFFFF !important; } -div.Tokenize ul.TokensContainer li.Token { +.tokenize > .tokens-container > .token { background-color: #ce671c !important; border: 1px solid #303030 !important; } -div.Tokenize ul.TokensContainer li.Placeholder { +.tokenize > .tokens-container > .placeholder { color:#505050 !important; } -div.Tokenize ul.TokensContainer li.Token a.Close { +.tokenize > .tokens-container > .token > .dismiss::after { color:#FFFFFF !important; } + +.tokenize.focus > .tokens-container { + border-color:#ec6d12 !important; + background-color:#2a2a2a !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } +.tokenize > .tokens-container { + border-radius: 3px; + border: 1px solid #5a5a5a !important; + background-color: #2a2a2a !important;} + +.tokenize > .tokens-container > .tokenize > .tokens-container > .token-search { + color:#FFFFFF !important; + border:none !important;} + +.tokenize > .tokens-container > .token, .tokenize > .tokens-container > .placeholder, .tokenize > .tokens-container > .token-search { + border:none !important;} + +.tokenize > .tokens-container > .token-search > input { + border:none !important;} + .bootgrid-table th > .column-header-anchor, .bootgrid-table th > .column-header-anchor > .icon, .bootgrid-table th > .column-header-anchor > .glyphicon { color: #fff !important; } .bootgrid-table th:hover {