diff --git a/misc/theme-tukan/Makefile b/misc/theme-tukan/Makefile index 4b0012056..51492463d 100644 --- a/misc/theme-tukan/Makefile +++ b/misc/theme-tukan/Makefile @@ -1,5 +1,5 @@ PLUGIN_NAME= theme-tukan -PLUGIN_VERSION= 1.0 +PLUGIN_VERSION= 1.1 PLUGIN_COMMENT= The tukan theme - blue/white PLUGIN_MAINTAINER= martin@team-rebellion.net diff --git a/misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/main.scss b/misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/main.scss index 077b28ad4..5c330bc47 100644 --- a/misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/main.scss +++ b/misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/main.scss @@ -2460,7 +2460,7 @@ legend margin-bottom: 20px font-size: 21px line-height: inherit - color: #2d2d2d333 + color: #2d2d2d border: 0 border-bottom: 1px solid #e5e5e5 @@ -6473,7 +6473,7 @@ a.list-group-item-danger .badge color: #f5f5f5 - background-color: #2d2d2d333 + background-color: #2d2d2d .panel-footer + .panel-collapse > .panel-body border-bottom-color: #c2c2c2 @@ -6494,8 +6494,8 @@ a.list-group-item-danger color: #FF8B00 background-color: #fff - .panel-footer + .panel-collapse > .panel-body - border-bottom-color: #FF8B00 + .panel-footer + .panel-collapse > .panel-body + border-bottom-color: #FF8B00 .panel-success border-color: #9BD275 @@ -7340,6 +7340,12 @@ button.close .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 @@ -7592,6 +7598,219 @@ body 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 + + > div + &.row + height: 100% !important + + > nav.page-side-nav + width: 70px + background-color: #172c38 !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 #1b313e + + 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, &[aria-expanded="true"] + color: #000 !important + background-color: #FFF !important + + div + &.collapse + &.in + > a.list-group-item[aria-expanded="true"] + color: #000 !important + background-color: #FFF !important + + > div.collapse.in > a.list-group-item + padding-left: 10px !important + font-size: 11px !important + background-color: #294C5FE6 !important + + &.menu-level-3-item.active + color: #000 !important + background-color: #FFF !important + + > a.list-group-item + padding-left: 10px !important + font-size: 11px !important + background-color: #294C5FE6 !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 + background-color: #FFF !important + + &.collapse.in > a.list-group-item:hover + color: #000 !important + background-color: #FFF !important + +a.list-group-item:focus + color: #000 !important + background-color: #FFF !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: #000 !important + background-color: #FFF !important + +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div + &.collapse.in > a.list-group-item + &.active-menu-title, &.collapsed:focus, &:focus + color: #000 !important + background-color: #FFF !important + + &.active-menu.collapse.in > a.list-group-item.active + color: #000 !important + background-color: #FFF !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 #1f3a4a + -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 #1f3a4a + -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 @@ -7884,7 +8103,7 @@ label > input /* fields in firewall schedule [data-state="lightcoral"] - background-color: lightcoral + background-color: #ffe83e [data-state="white"] background-color: inherit @@ -7935,6 +8154,9 @@ textarea#update_status .fa-search::before, .fa-refresh::before color: #FFFFFF !important +#navigation > .fa-search::before, .fa-refresh::before + color: inherit !important + #totals .fa-search::before color: #FFF !important background-color: #ff7e25 diff --git a/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/main.css b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/main.css index b38895345..1213d9025 100644 --- a/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/main.css +++ b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/main.css @@ -72,7 +72,7 @@ a { outline: 0; } a:link, a:active { - outline: 0; } + outline: 0; } a:hover, a:focus { color: #FF6C06; @@ -2036,7 +2036,7 @@ th { padding: 10px 0px 10px 20px; line-height: 1.42857; vertical-align: top; - border-top: 1px solid #e3e3e3; } + border-top: 1px solid #e3e3e3; } .table > thead > tr > th { vertical-align: bottom; border-bottom: 1px solid #bababa4d; } @@ -2049,8 +2049,8 @@ th { border-top: 0; font-family: 'SourceSansProSemibold'; font-weight: normal; - border-bottom: 1px solid #bdbdbd; - background-color: #e3e3e3;} + border-bottom: 1px solid #bdbdbd; + background-color: #e3e3e3;} .table > tbody + tbody { border-top: 2px solid #eee; } .table .table { @@ -2327,10 +2327,10 @@ input[type="color"] input[type="tel"]:hover, input[type="color"]:hover { - color: #000; - background-color: none; + color: #000; + background-color: none; border-color: #00A7FF; - outline: 0; } + outline: 0; } select:focus, textarea:focus, @@ -2351,9 +2351,9 @@ input[type="color"] { color: #000; - border-color: #00A7FF; - background-color: none; - outline: 0; } + border-color: #00A7FF; + background-color: none; + outline: 0; } select::-moz-placeholder, textarea::-moz-placeholder, @@ -2374,7 +2374,7 @@ input[type="color"] { color: #b7b7b7; opacity: 1; - filter: alpha(opacity=100); } + filter: alpha(opacity=100); } select:-ms-input-placeholder, textarea:-ms-input-placeholder, @@ -2461,12 +2461,12 @@ input[type="color"] input[type="color"][readonly], fieldset[disabled] input[type="color"] { - cursor: not-allowed; - background-color: #f0f0f0; - opacity: 1.0; - filter: alpha(opacity=100); - border-color: #4d83a1; - color:#a8a8a8;} + cursor: not-allowed; + background-color: #f0f0f0; + opacity: 1.0; + filter: alpha(opacity=100); + border-color: #4d83a1; + color:#a8a8a8;} select[disabled]:hover, select[readonly]:hover, fieldset[disabled]:hover, textarea[disabled]:hover, @@ -2516,13 +2516,13 @@ input[type="color"] input[type="color"]:hover { - cursor: not-allowed; - background-color: #f0f0f0; - color:#a8a8a8; - opacity: 1.0; - filter: alpha(opacity=100); - -webkit-box-shadow: none; - box-shadow: none; } + cursor: not-allowed; + background-color: #f0f0f0; + color:#a8a8a8; + opacity: 1.0; + filter: alpha(opacity=100); + -webkit-box-shadow: none; + box-shadow: none; } textarea { height: auto; } @@ -2902,23 +2902,23 @@ select[multiple].input-lg, .btn:active, .btn.active, .open > .btn.dropdown-toggle { color: #FFF; background-color: #30596f; - outline:0; + outline:0; border-color: #1d1d1d; - text-decoration: none; } + text-decoration: none; } .btn:hover, .btn:focus { - background-color: #315a71; - color: #FFF; - border-radius: 3px; - border: 1px solid #1b4257; - text-decoration: none;} + background-color: #315a71; + color: #FFF; + border-radius: 3px; + border: 1px solid #1b4257; + text-decoration: none;} .btn:active, .btn.active, .open > .btn.dropdown-toggle { background-image: none; - outline:0; } + outline:0; } .btn.disabled, .btn.disabled:hover, .btn.disabled:focus, .btn.disabled:active, .btn.disabled.active, .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus, .btn[disabled]:active, .btn[disabled].active, fieldset[disabled] .btn, fieldset[disabled] .btn:hover, fieldset[disabled] .btn:focus, fieldset[disabled] .btn:active, fieldset[disabled] .btn.active { background-color: #FFFFFF; border-color: #1d1d1d; - outline:0; } + outline:0; } .btn .badge { color: #FFFFFF; @@ -2927,7 +2927,7 @@ select[multiple].input-lg, outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; - outline:0; } + outline:0; } .btn:active, .btn.active { outline: 0; } @@ -2940,22 +2940,22 @@ select[multiple].input-lg, box-shadow: none; } .act_flush:hover, .act_flush:focus { - color: #FFF; + color: #FFF; background-color: #336480; border-color: 1px solid #1d1d1d; - outline:0; } + outline:0; } .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle { background-image: none; - outline:0; } + outline:0; } .btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { background-color: #FFFFFF; border-color: 1px solid #1d1d1d; - outline:0; } + outline:0; } .btn-default .badge { color: #FFFFFF; background-color: #3e3e3e; - outline:0; } + outline:0; } .btn-primary { color: #fff; @@ -2966,14 +2966,14 @@ select[multiple].input-lg, color: #fff; background-color: #EC7726; border-color: 1px solid #6c6c6c; - outline:0; } + outline:0; } .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { background-image: none; } .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active { background-color: #FF8B00; border-color: #323232; - outline:0; } + outline:0; } .btn-primary .badge { color: #FF8B00; @@ -2987,13 +2987,13 @@ select[multiple].input-lg, color: #fff; background-color: #7fc54f; border-color: #6db53b; - outline:0; } + outline:0; } .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { background-image: none; } .btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success[disabled].active, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active { background-color: #9BD275; border-color: #8dcc62; - outline:0; } + outline:0; } .btn-success .badge { color: #9BD275; @@ -3174,7 +3174,7 @@ tbody.collapse.in { .dropdown-menu.pull-right { right: 0; left: auto; - background-color: #e5e5e5;} + background-color: #e5e5e5;} .dropdown-menu .divider { height: 1px; @@ -3189,7 +3189,7 @@ tbody.collapse.in { line-height: 1.42857; color: #FFFFFF; white-space: nowrap; - outline:0;} + outline:0;} .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { text-decoration: none; @@ -3279,9 +3279,9 @@ tbody.collapse.in { .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 2; - -webkit-transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s !important; - -o-transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s !important; - transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s !important; } + -webkit-transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s !important; + -o-transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s !important; + transition: border-color ease-in-out 0.1s, box-shadow ease-in-out 0.1s !important; } .btn-group > .btn:focus, .btn-group-vertical > .btn:focus { outline: 0; } @@ -3543,32 +3543,32 @@ tbody.collapse.in { position: relative; display: block; } .nav > li > a, .nav-tabs > li > a { - position: relative; - display: block; - padding: 10px 15px; - color: #FFF; - border-radius: 0px; - border-top-right-radius: 10px; - margin-right: 0px; - background-color: #315a71; - opacity: 0.6; - filter: alpha(opacity=50);} - .nav > li#menu_messages > a { + position: relative; + display: block; + padding: 10px 15px; + color: #FFF; + border-radius: 0px; + border-top-right-radius: 10px; + margin-right: 0px; + background-color: #315a71; + opacity: 0.6; + filter: alpha(opacity=50);} + .nav > li#menu_messages > a { position: relative; display: block; padding: none; - color:#FF7E25; - background-color:transparent; - margin-right: 10px; - border:none; - opacity: 1.0;} + color:#FF7E25; + background-color:transparent; + margin-right: 10px; + border:none; + opacity: 1.0;} .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #315a71; - color: #FFF; - opacity: 0.8; } - .nav > li#menu_messages > a:hover, a:focus { - text-decoration: underline; } + color: #FFF; + opacity: 0.8; } + .nav > li#menu_messages > a:hover, a:focus { + text-decoration: underline; } .nav > li.disabled > a { color: #777777; } @@ -3580,7 +3580,7 @@ tbody.collapse.in { .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #336480; - cursor:pointer; } + cursor:pointer; } .nav .nav-divider { height: 1px; @@ -3596,25 +3596,25 @@ tbody.collapse.in { float: left; } .nav-tabs > li > a { line-height: 1.42857; - border:none; - cursor:pointer;} - .nav-tabs > li > a:hover {opacity: 0.8; filter: alpha(opacity=80);} + border:none; + cursor:pointer;} + .nav-tabs > li > a:hover {opacity: 0.8; filter: alpha(opacity=80);} .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #FFF; background-color: #393939; border-bottom-color: transparent; cursor: pointer; - opacity: 1; - filter: alpha(opacity=100);} + opacity: 1; + filter: alpha(opacity=100);} - .nav-pills > li { + .nav-pills > li { float: left; } .nav-pills > li > a { border-radius: 0; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #1b4257; - opacity: 1.0; } + opacity: 1.0; } .nav-stacked > li { float: none; } @@ -3942,7 +3942,7 @@ tbody.collapse.in { background-color: #555; } .navbar-default .navbar-toggle .icon-bar { background-color: #FFF; } - .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { + .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #2b2b2b; color: #555; } @media (max-width: 767px) { @@ -4067,7 +4067,7 @@ tbody.collapse.in { background-color: #427795; border: 1px solid #355f77; margin-left: -1px; - cursor: pointer; } + cursor: pointer; } .pagination > li:first-child > a, .pagination > li:first-child > span { @@ -4082,7 +4082,7 @@ tbody.collapse.in { .pagination > li > span:hover, .pagination > li > span:focus { color: #FFFFFF; - background-color: #FF7E25; } + background-color: #FF7E25; } .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, @@ -4090,7 +4090,7 @@ tbody.collapse.in { .pagination > .active > span:focus { z-index: 2; color: #FFFFFF; - background-color: #FF7E25; + background-color: #FF7E25; cursor: default; } .pagination > .disabled > span, @@ -4197,7 +4197,7 @@ a.label:hover, a.label:focus { background-color: #777777; } .label-default[href]:hover, .label-default[href]:focus { background-color: #5e5e5e; - border-color: #323232;} + border-color: #323232;} .label-primary { @@ -4211,28 +4211,28 @@ a.label:hover, a.label:focus { border-color: #323232;} .label-success[href]:hover, .label-success[href]:focus { background-color: #7fc54f; - border-color: #323232; } + border-color: #323232; } .label-info { background-color: #B0CDDB; } .label-info[href]:hover, .label-info[href]:focus { background-color: #8db7cb; - border-color: #323232; } + border-color: #323232; } .label-warning { background-color: #f0ad4e; } .label-warning[href]:hover, .label-warning[href]:focus { background-color: #ec971f; - border-color: #323232;} + border-color: #323232;} .label-danger { background-color: #DA4829; } .label-danger[href]:hover, .label-danger[href]:focus { background-color: #ec2121; - border-color: #323232;} + border-color: #323232;} .badge { @@ -4364,26 +4364,26 @@ a.thumbnail.active { color: #72bd3e; } .alert-info { - background-color: #fbfbfb; - border-color: #a5a5a5; - color: #000;} + background-color: #fbfbfb; + border-color: #a5a5a5; + color: #000;} .alert-info hr { border-top-color: #DA4829; } .alert-info .alert-link { color: #DA4829; } .alert-warning { - background-color: #fff; - border: 1px solid #d12d0a; - color: #000;} + background-color: #fff; + border: 1px solid #d12d0a; + color: #000;} .alert-warning hr { border-top-color: #f7e1b5; } .alert-warning .alert-link { color: #df8a13; } .alert-danger { - background-color: #30596f; - border-color: #c2c2c2; } + background-color: #30596f; + border-color: #c2c2c2; } .alert-danger hr { border-top-color: #DA4829; } .alert-danger .alert-link { @@ -4407,7 +4407,7 @@ a.thumbnail.active { border-radius: 3px; position: relative; -webkit-box-shadow: inset 1px 1px 2px rgb(63, 63, 63); - box-shadow: inset 1px 1px 2px rgb(63, 63, 63); } + box-shadow: inset 1px 1px 2px rgb(63, 63, 63); } .progress-bar { float: left; @@ -4829,11 +4829,11 @@ a.list-group-item-danger { .panel-group .panel-footer + .panel-collapse .panel-body { border-bottom: 1px solid #ddd; } .panel-default { - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); } .panel-default > .panel-heading { - color: #fff; - border-color: #c2c2c2; } + color: #fff; + border-color: #c2c2c2; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #c2c2c2; } .panel-default > .panel-heading .badge { @@ -4842,7 +4842,7 @@ a.list-group-item-danger { .panel-default > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #c2c2c2; } .panel-primary { - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); } .panel-primary > .panel-heading { color: #FFF; @@ -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; } } @@ -5762,7 +5767,7 @@ body { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30); } .content-box hr { - border:none; } + border:none; } .content-box-main { padding-bottom: 15px; padding-top: 15px; } @@ -5856,7 +5861,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:#172c38 !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 #1b313e; } +#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 {color: #000 !important;background-color: #FFF !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item[aria-expanded="true"] {color: #000 !important;background-color: #FFF !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item[aria-expanded="true"] {color: #000 !important;background-color: #FFF !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: #294C5FE6 !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: #294C5FE6 !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: #000 !important;background-color: #FFF !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;background-color:#FFF !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus {color: #000 !important;background-color: #FFF !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: #000 !important;background-color: #FFF !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.active-menu-title {color: #000 !important;background-color: #FFF !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item.collapsed:focus {color: #000 !important;background-color: #FFF !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:focus {color: #000 !important;background-color: #FFF !important;} +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.active-menu.collapse.in >a.list-group-item.active {color: #000 !important;background-color: #FFF !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 #1f3a4a; + -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 #1f3a4a; + -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; } @@ -5996,8 +6116,8 @@ padding-right: 15px; } .active-menu-title:before, .active-menu a:before { width: 3px; } .active-menu-title.active, .active-menu a.active { - background-color: #fff; - color: #000; } + background-color: #fff; + color: #000; } .active-menu a:before { background: #FF8B00; } @@ -6082,7 +6202,7 @@ select:hover, select:active, select:focus { option:hover, option:active, option:focus { background-color:#FF7E25; - } + } #grid-log th[data-column-id="__timestamp__"], #filter-log-entries th[data-column-id="__timestamp__"] { @@ -6123,7 +6243,7 @@ label > input[type="radio"] { /* fields in firewall schedule */ [data-state="lightcoral"] { - background-color: lightcoral; } + background-color: #ffe83e; } [data-state="white"] { background-color: inherit; } @@ -6137,10 +6257,10 @@ label > input[type="radio"] { border-bottom: 1px solid #c2c2c2; } textarea#update_status, textarea#update_status:hover { - color:inherit !important; - -webkit-box-shadow:none !important; - box-shadow:none !important; - border:none !important; } + color:inherit !important; + -webkit-box-shadow:none !important; + box-shadow:none !important; + border:none !important; } .fa-toggle-off::before { color:#FF8B00 !important; @@ -6151,9 +6271,9 @@ textarea#update_status, textarea#update_status:hover { .page-head .fa-search, .glyphicon-search::before { content: "\e003"; - color: #FFFFFF; } + color: #FFFFFF; } .glyphicon.glyphicon-search::before { - color:#000 !important; } + color:#000 !important; } .fa-times-circle::before { content: "\f057"; color: #DA4829; } @@ -6163,15 +6283,17 @@ textarea#update_status, textarea#update_status:hover { cursor: pointer; } .fa-search::before, .fa-refresh::before { color: #FFFFFF !important; } +#navigation > .fa-search::before, .fa-refresh::before { + color:inherit !important; } #totals .fa-search::before { - color: #FFF !important; + color: #FFF !important; background-color: #ff7e25; - padding: 5px; - border-radius: 4px; - border: 1px solid #8A8A8A; } + padding: 5px; + border-radius: 4px; + border: 1px solid #8A8A8A; } .panel-heading h3:hover, h3:focus {color: #FFFFFF; - text-decoration: none; } + text-decoration: none; } h3:link {color:#FFFFFF;text-decoration: underline;} @@ -6181,10 +6303,10 @@ h3:hover, h3:focus {text-decoration: underline; } .nvd3 .nv-axis { fill: #000 !important;} .nv-series-0 { stroke-opacity: 1; - stroke-width: 0.5; - fill-opacity: 0.5; - fill: rgb(31, 119, 180) !important; - stroke: rgb(31, 119, 180) !important; } + stroke-width: 0.5; + fill-opacity: 0.5; + fill: rgb(31, 119, 180) !important; + stroke: rgb(31, 119, 180) !important; } .nv-controlsWrap.nvd3-svg circle.nv-legend-symbol { stroke-width: 1 !important; @@ -6192,71 +6314,71 @@ fill: rgb(143, 143, 143) !important; stroke: rgb(143, 143, 143) !important; } .table-condensed.table-hover { - border: 1px solid #bdbdbd; } + border: 1px solid #bdbdbd; } 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; } + 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; } ul.TokensContainer li.Token, div.Tokenize ul.TokensContainer li.TokenSearch { - color: #000 !important; } + color: #000 !important; } div.Tokenize ul.TokensContainer:hover, div.Tokenize ul.TokensContainer:focus { - border-color: #00A7FF !important; - background-color:none !important; } + border-color: #00A7FF !important; + background-color:none !important; } div.Tokenize ul.TokensContainer, div.Tokenize ul.Dropdown { - border: 1px solid #4d83a1 !important; - background-color: #fff !important; - color: #000 !important; } + border: 1px solid #4d83a1 !important; + background-color: #fff !important; + color: #000 !important; } div.Tokenize ul.TokensContainer li.Token { - background-color: #ffe83e !important; - border: 1px solid #303030 !important; } + background-color: #ffe83e !important; + border: 1px solid #303030 !important; } div.Tokenize ul.TokensContainer li.Placeholder { - color: #000 !important; - opacity: 0.2; - filter: alpha(opacity=20);} + color: #000 !important; + opacity: 0.2; + filter: alpha(opacity=20);} div.Tokenize ul.TokensContainer li.Token a.Close { - color:#000 !important; } + color:#000 !important; } .bootgrid-table th > .column-header-anchor, .bootgrid-table th > .column-header-anchor > .icon, .bootgrid-table th > .column-header-anchor > .glyphicon { - color: #000 !important; } + color: #000 !important; } .bootgrid-table th:hover { - background-color:#f2fafe !important; } + background-color:#f2fafe !important; } .bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu, .bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu { - color: #FFF; - background-color: #30596f; - border-color: #1d1d1d; } + color: #FFF; + background-color: #30596f; + border-color: #1d1d1d; } .btn-group.bootstrap-select.open, .btn-group.bootstrap-select:hover { - border-color: #323232 !important; - color:#FFFFFF !important; } + border-color: #323232 !important; + color:#FFFFFF !important; } .bootgrid-table td.loading, .bootgrid-table td.no-results { - background:none !important; } + 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:#ff7e25 !important; } + background-color:#ff7e25 !important; } .bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon,.input-group-addon { top: 0; - background-color: #FF7E25 !important; - border: 1px solid #FF7E25 !important;} + background-color: #FF7E25 !important; + border: 1px solid #FF7E25 !important;} .nvtooltip { - background-color: #fff !important; - color: rgba(0,0,0,1.0) !important; - border: 1px solid rgb(0, 0, 0) !important; + background-color: #fff !important; + color: rgba(0,0,0,1.0) !important; + border: 1px solid rgb(0, 0, 0) !important; } .nvtooltip table { background-color:#FFF !important; } .glyphicon.glyphicon-play.text-muted, .glyphicon.glyphicon-remove.text-muted, .glyphicon.glyphicon-remove-sign.text-muted, .glyphicon.glyphicon-info-sign.text-muted, .fa.fa-play.text-muted::before { - color: #000 !important;} + color: #000 !important;} #system_log-widgets.content-box {border:none; box-shadow: 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: #FFF; border: 1px solid #c2c2c2; } +#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: #FFF; border: 1px solid #c2c2c2; } \ No newline at end of file