diff --git a/misc/theme-cicada/Makefile b/misc/theme-cicada/Makefile index 44167d7cd..6ae2fc5f4 100644 --- a/misc/theme-cicada/Makefile +++ b/misc/theme-cicada/Makefile @@ -1,5 +1,5 @@ PLUGIN_NAME= theme-cicada -PLUGIN_VERSION= 1.3 +PLUGIN_VERSION= 1.4 PLUGIN_COMMENT= The cicada theme - grey/orange PLUGIN_MAINTAINER= rene@team-rebellion.net diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/bootstrap-dialog.less b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/bootstrap-dialog.less index 0542c7ee8..b649c0bc5 100644 --- a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/bootstrap-dialog.less +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/bootstrap-dialog.less @@ -1,8 +1,9 @@ .modal-backdrop { - z-index: -1; + z-index: -1; } + .bootstrap-dialog { - /*** Icon animation* Copied from font-awesome: http://fontawesome.io; + .modal-header { border-top-left-radius: 4px; border-top-right-radius: 4px; @@ -16,18 +17,75 @@ } .bootstrap-dialog-close-button { float: right; - filter: alpha(opacity=90); - -moz-opacity: 0.9; + filter:alpha(opacity=90); + -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9; + &:hover { + cursor: pointer; + filter: alpha(opacity=100); + -moz-opacity: 1; + -khtml-opacity: 1; + opacity: 1; + } } - .bootstrap-dialog-close-button:hover { - cursor: pointer; - filter: alpha(opacity=100); - -moz-opacity: 1; - -khtml-opacity: 1; - opacity: 1; + + /* dialog types */ + &.type-default { + .modal-header { + background-color: #fff; + } + .bootstrap-dialog-title { + color: #333; + } } + + &.type-info { + .modal-header { + background-color: #c35d12; + } + } + + &.type-primary { + .modal-header { + background-color: #EA7105; + } + } + + &.type-success { + .modal-header { + background-color: #c35d12; + } + } + + &.type-warning { + .modal-header { + background-color: #b82800; + } + } + + &.type-danger { + .modal-header { + background-color: #ee7822; + } + } + + &.size-large { + .bootstrap-dialog-title { + font-size: 24px; + } + .bootstrap-dialog-close-button { + font-size: 30px; + } + .bootstrap-dialog-message { + font-size: 18px; + } + } + + /** + * Icon animation + * Copied from font-awesome: http://fontawesome.io/ + **/ .icon-spin { display: inline-block; -moz-animation: spin 2s infinite linear; @@ -35,98 +93,45 @@ -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } -} -.bootstrap-dialog.type-default { - .modal-header { - background-color: #fff; - } - .bootstrap-dialog-title { - color: #333; - } -} -.bootstrap-dialog.type-info { - .modal-header { - background-color: #c35d12; - } -} -.bootstrap-dialog.type-primary { - .modal-header { - background-color: #EA7105; - } -} -.bootstrap-dialog.type-success { - .modal-header { - background-color: #9BD275; - } -} -.bootstrap-dialog.type-warning { - .modal-header { - background-color: #b82800; - } -} -.bootstrap-dialog.type-danger { - .modal-header { - background-color: #ee7822; - } -} -.bootstrap-dialog.size-large { - .bootstrap-dialog-title { - font-size: 24px; - } - .bootstrap-dialog-close-button { - font-size: 30px; - } - .bootstrap-dialog-message { - font-size: 18px; - } -} -@-moz-keyframes { - spin { - 0%; - } -} --moz-transform: { - rotate(0deg); { - 100%; - } -} -@-webkit-keyframes { - spin { - 0%; - } -} --webkit-transform: { - rotate(0deg); { - 100%; - } -} -@-o-keyframes { - spin { - 0%; - } -} --o-transform: { - rotate(0deg); { - 100%; - } -} -@-ms-keyframes { - spin { - 0%; - } -} --ms-transform: { - rotate(0deg); { - 100%; - } -} -@keyframes { - spin { - 0%; - } -} -transform: { - rotate(0deg); { - 100%; - } + @-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + } + } + @-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + } + } + @-o-keyframes spin { + 0% { + -o-transform: rotate(0deg); + } + 100% { + -o-transform: rotate(359deg); + } + } + @-ms-keyframes spin { + 0% { + -ms-transform: rotate(0deg); + } + 100% { + -ms-transform: rotate(359deg); + } + } + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } + } + /** End of icon animation **/ } 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 c008ad222..a29c32e24 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 @@ -1164,7 +1164,7 @@ html { body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; background-color: none; } @@ -1196,7 +1196,7 @@ img { .img-thumbnail { padding: 4px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -1643,7 +1643,7 @@ dl { } dt, dd { - line-height: 1.42857; + line-height: 1.428571429; } dt { @@ -1706,7 +1706,7 @@ blockquote { footer, small, .small { display: block; font-size: 80%; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; } footer:before, small:before, .small:before { @@ -1754,7 +1754,7 @@ blockquote { address { margin-bottom: 20px; font-style: normal; - line-height: 1.42857; + line-height: 1.428571429; } code, kbd, pre, samp { @@ -1788,7 +1788,7 @@ pre { padding: 9.5px; margin: 0 0 10px; font-size: 13px; - line-height: 1.42857; + line-height: 1.428571429; word-break: break-all; word-wrap: break-word; color: #FFFFFF; @@ -2562,7 +2562,7 @@ th { thead > tr > { th, td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #303030; } @@ -2570,7 +2570,7 @@ th { tbody > tr > { th, td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #303030; } @@ -2578,7 +2578,7 @@ th { tfoot > tr > { th, td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #303030; } @@ -3032,7 +3032,7 @@ legend { margin-bottom: 20px; font-size: 21px; line-height: inherit; - color: #2d2d2d; + color: #2d2d2d333; border: 0; border-bottom: 1px solid #e5e5e5; } @@ -3082,7 +3082,7 @@ output { display: block; padding-top: 7px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; } @@ -3092,7 +3092,7 @@ select, textarea { height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #FFF; background-color: #2a2a2a; background-image: none; @@ -3112,7 +3112,7 @@ input { height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #FFF; background-color: #2a2a2a; background-image: none; @@ -4442,7 +4442,7 @@ select[multiple].input-lg, .form-horizontal .form-group-lg select[multiple].form white-space: nowrap; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; @@ -5106,7 +5106,7 @@ tbody.collapse.in { padding: 3px 20px; clear: both; font-weight: normal; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; white-space: nowrap; outline: 0; @@ -5167,7 +5167,7 @@ tbody.collapse.in { display: block; padding: 3px 20px; font-size: 12px; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; white-space: nowrap; } @@ -5522,7 +5522,6 @@ tbody.collapse.in { font-size: 14px; font-weight: normal; line-height: 1; - color: #555555; text-align: center; background-color: #eeeeee; border: 1px solid #ccc; @@ -5746,7 +5745,7 @@ a:focus { margin-bottom: -1px; > a { margin-right: 2px; - line-height: 1.42857; + line-height: 1.428571429; border-radius: 3px 3px 0 0; cursor: pointer; &:hover { @@ -6445,7 +6444,7 @@ fieldset[disabled] .navbar-inverse .btn-link { li { display: inline-block; + li:before { - content: "/ "; + content: "/ "; padding: 0 5px; color: #ccc; } @@ -6469,7 +6468,7 @@ fieldset[disabled] .navbar-inverse .btn-link { position: relative; float: left; padding: 6px 12px; - line-height: 1.42857; + line-height: 1.428571429; text-decoration: none; color: #FFFFFF; background-color: #505050; @@ -6856,7 +6855,7 @@ a.badge { display: block; padding: 4px; margin-bottom: 20px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -7696,7 +7695,7 @@ a.list-group-item-danger { } .badge { color: #f5f5f5; - background-color: #2d2d2d; + background-color: #2d2d2d333; } } .panel-footer + .panel-collapse > .panel-body { @@ -7865,7 +7864,7 @@ a.list-group-item-danger { opacity: 1; filter: alpha(opacity = 100); &:hover, &:focus { - color: #B0B0B0; + color: #000; text-decoration: none; cursor: pointer; opacity: 1; @@ -7925,7 +7924,7 @@ button.close { .modal-content { position: relative; background-color: #383838; - border: 1px solid #565656; + border: 1px solid #565656cc; border-radius: 3px; -webkit-box-shadow: 0 5px 15px rgb(30, 30, 30); box-shadow: 0 5px 15px rgb(5, 5, 5); @@ -7966,7 +7965,7 @@ button.close { .modal-title { margin: 0; - line-height: 1.42857; + line-height: 1.428571429; } .modal-body { @@ -8821,7 +8820,7 @@ body { bottom: 0; border: none; font-size: 12px; - padding: 20px 0; + padding: 0; width: 100%; z-index: 2; } @@ -8993,7 +8992,7 @@ main.page-content.col-lg-12 { } > nav > #mainmenu > div > { a.list-group-item { - font-size: 11px; + font-size: 12px; text-align: center; > span { &.fa, &.glyphicon { @@ -9001,22 +9000,22 @@ main.page-content.col-lg-12 { font-size: 28px; } &.__iconspacer { - padding-left: 7px; - padding-right: 7px; + width: 50px; + height: 30px; + padding: 0px; } } width: 70px; height: 70px; - padding-left: 10px; - padding-right: 10px; - padding-top: 15px; - padding-bottom: 15px; - border-bottom: 2px solid #393939; + padding-left: 0px; + padding-right: 0px; + padding-top: 12px; + border-bottom: 2px solid #2a2a2a; } div { &.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; display: block !important; position: absolute !important; left: 70px !important; @@ -9024,7 +9023,7 @@ main.page-content.col-lg-12 { } &.collapse.in > div.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; display: block !important; position: absolute !important; left: 148px !important; @@ -9058,7 +9057,7 @@ a.list-group-item.active-menu-title.collapsed { } > div.collapse.in > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; background-color: #393939e6 !important; &.menu-level-3-item.active { color: #ec6d12 !important; @@ -9068,17 +9067,17 @@ a.list-group-item.active-menu-title.collapsed { } > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; background-color: #393939e6 !important; } > div.collapse > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; } } &.collapsed > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; } &.collapse.in > a.list-group-item:hover { color: #ec6d12 !important; @@ -9111,12 +9110,13 @@ a.list-group-item:focus { } &.collapse.in { width: 150px; - font-size: 11px; + font-size: 12px; display: block; z-index: 10; position: absolute; left: 70px; margin-top: -70px; + padding-bottom: 1px; height: auto; border: 1px solid #515151; -webkit-transition: width 0.1s; @@ -9128,7 +9128,7 @@ a.list-group-item:focus { } &.collapsing { width: 0px; - font-size: 11px; + font-size: 12px; position: absolute; display: block; z-index: 10; @@ -9142,12 +9142,12 @@ a.list-group-item:focus { &.collapse.in > div { &.collapse.in { width: 150px; - font-size: 11px; + font-size: 12px; display: block; z-index: 10; position: absolute; left: 148px; - margin-top: -28px; + margin-top: -29px; height: auto; border: 1px solid #515151; -webkit-transition: width 0.1s; @@ -9159,12 +9159,12 @@ a.list-group-item:focus { } &.collapsing { width: 0px; - font-size: 11px; + font-size: 12px; position: absolute; display: block; z-index: 10; left: 148px; - margin-top: -28px; + margin-top: -29px; 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); @@ -9179,22 +9179,6 @@ a.list-group-item:focus { 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; } @@ -9562,6 +9546,24 @@ label > input { background-color: #ec6d12; } +.dashboard_grid_column table { + table-layout: fixed; +} + +#ipsec { + #ipsec-mobile, #ipsec-tunnel, #ipsec-overview { + background-color: #393939; + } + .ipsec-tab { + background-color: #3e3e3e; + color: #928873; + &.activetab { + background-color: #2a2a2a; + color: #ec6d12; + } + } +} + /*additional extensions for theme-cicada*/ #tab_1 #maintabs { @@ -9592,9 +9594,8 @@ textarea#update_status { outline: none !important; } -.fa-search, .glyphicon-search::before { +.fa-search::before, .glyphicon-search::before { content: "\e003"; - color: #FFFFFF !important; } .fa-times-circle::before { @@ -9604,7 +9605,6 @@ textarea#update_status { .fa-refresh::before { content: "\f021"; - color: #FFF; } .fa-question-circle::before { @@ -9613,16 +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; - padding: 5px; - border-radius: 4px; - border: 1px solid #5A5A5A; +div.container-fluid > { + .fa-search::before, .fa-refresh::before { + color: #FFFFFF !important; + } } .panel-heading h3:hover { @@ -9645,129 +9639,14 @@ h3 { } } -text { - &.nvd3, &.nv-axislabel, &.nv-legend-text { - fill: #FFFFFF; - } -} - -.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; -} - -.nv-controlsWrap.nvd3-svg circle.nv-legend-symbol { - stroke-width: 1 !important; - fill: rgb(143, 143, 143) !important; - stroke: rgb(143, 143, 143) !important; -} - .table-condensed.table-hover { border: 1px solid #515151; } -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; -} - -::before, ::after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -Element { - width: 17px; -} - -div.Tokenize ul { - &.TokensContainer { - &: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; - } -} - -.tokenize { - > .tokens-container > { - .token { - background-color: #ce671c !important; - border: 1px solid #303030 !important; - } - .placeholder { - color: #505050 !important; - } - .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 { - > .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; +.bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon, .input-group-addon { + top: 0; + background-color: #ec6d12; + border: 1px solid #ec6d12; } .btn-group.bootstrap-select { @@ -9778,30 +9657,6 @@ div.Tokenize ul { } } -.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; -} - .glyphicon { &.glyphicon-play.text-muted, &.glyphicon-remove.text-muted, &.glyphicon-remove-sign.text-muted, &.glyphicon-info-sign.text-muted { color: #eac80a !important; @@ -9820,6 +9675,3 @@ div.Tokenize ul { background-color: #292929; border: 1px solid #515151; } -.bootstrap-dialog.type-success .modal-header { - background-color: #c35d12 !important; -} diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/tokenize2.scss b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/tokenize2.scss new file mode 100644 index 000000000..53860ad56 --- /dev/null +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/tokenize2.scss @@ -0,0 +1,163 @@ +.tokenize { + > .tokens-container { + position: relative; + list-style: none; + padding: 0 0 5px 5px; + height: auto; + min-height: 34px; + cursor: text; + border-radius: 3px; + border: 1px solid #5a5a5a; + background-color: #2a2a2a; + &.disabled { + background-color: #eee; + cursor: not-allowed; + } + } + &.focus > .tokens-container { + outline: 0; + border-color: #ec6d12; + background-color: #2a2a2a; + -webkit-box-shadow: none; + box-shadow: none; + } + > .tokens-container { + &.input-sm { + padding: 0 0 4px 4px; + min-height: 30px; + } + &.input-lg { + padding: 0 0 9px 9px; + min-height: 46px; + } + > { + .token { + padding: 0 1.2em 0 5px; + background-color: #ce671c; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + display: inline-block; + margin: 5px 5px 0 0; + position: relative; + vertical-align: middle; + } + .placeholder, .token-search { + display: inline-block; + margin: 5px 5px 0 0; + position: relative; + vertical-align: middle; + } + } + } + &.sortable > .tokens-container > .token { + cursor: move; + } + &.single > .tokens-container > .token { + display: block; + border-color: #fff; + background-color: transparent; + } + &.sortable > .tokens-container > .token.shadow { + border-color: #ccc; + background-color: #ccc; + filter: alpha(opacity = 50); + opacity: .2; + } + > .tokens-container { + > { + .placeholder { + color: #6b6b6b; + padding: 0; + } + .token-search { + color: #fff; + padding: 0; + } + } + &:hover { + border-color: #ec6d12; + background-color: #2a2a2a; + -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); + } + > .token-search > input { + padding: 0; + margin: 0; + line-height: 1em; + background: transparent; + border: none; + outline: none; + width: 100%; + &::-ms-clear { + display: none; + } + } + &.input-sm > { + .placeholder, .token-search, .token { + margin: 4px 4px 0 0; + } + } + &.input-lg > { + .placeholder, .token-search, .token { + margin: 9px 9px 0 0; + } + } + > .token { + &.pending-delete { + background-color: #5b72a4; + border-color: #425c96; + color: #fff; + > .dismiss { + color: #fff; + } + } + > .dismiss { + position: absolute; + right: 5px; + color: #a9b9d8; + text-decoration: none; + cursor: pointer; + &:after { + content: "×"; + color: #fff; + } + } + } + } +} + +.tokenize-dropdown { + position: absolute; + display: none; + > .dropdown-menu { + min-height: 10px; + width: 100%; + display: block; + margin: -1px 0 0 0; + visibility: visible; + opacity: 1; + li { + cursor: pointer; + > a .tokenize-highlight { + font-weight: bold; + } + &.locked { + padding: 3px 20px; + color: #333; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + } + > a { + text-overflow: ellipsis; + overflow-x: hidden; + } + &:not(.active) a { + &:hover, &:focus { + background-color: transparent; + } + } + } + } +} diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/bootstrap-dialog.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/bootstrap-dialog.css index 904b8af96..3f804ab26 100644 --- a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/bootstrap-dialog.css +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/bootstrap-dialog.css @@ -47,7 +47,7 @@ background-color: #EA7105; } .bootstrap-dialog.type-success .modal-header { - background-color: #9BD275; + background-color: #c35d12; } .bootstrap-dialog.type-warning .modal-header { background-color: #b82800; diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/jquery.bootgrid.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/jquery.bootgrid.css new file mode 100644 index 000000000..c455999db --- /dev/null +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/jquery.bootgrid.css @@ -0,0 +1,154 @@ +/*! + * jQuery Bootgrid v1.3.1 - 09/11/2015 + * Copyright (c) 2014-2015 Rafael Staib (http://www.jquery-bootgrid.com) + * Licensed under MIT http://www.opensource.org/licenses/MIT + */ +.bootgrid-header, +.bootgrid-footer { + margin: 15px 0; +} +.bootgrid-header a, +.bootgrid-footer a { + outline: 0; +} +.bootgrid-header .search, +.bootgrid-footer .search { + display: inline-block; + margin: 0 20px 0 0; + vertical-align: middle; + width: 180px; +} +.bootgrid-header .search .glyphicon, +.bootgrid-footer .search .glyphicon { + top: 0; +} +.bootgrid-header .search .fa, +.bootgrid-footer .search .fa { + display: table-cell; +} +.bootgrid-header .search.search-field::-ms-clear, +.bootgrid-footer .search.search-field::-ms-clear, +.bootgrid-header .search .search-field::-ms-clear, +.bootgrid-footer .search .search-field::-ms-clear { + display: none; +} +.bootgrid-header .pagination, +.bootgrid-footer .pagination { + margin: 0 !important; +} +.bootgrid-header .actionBar, +.bootgrid-footer .infoBar { + text-align: right; +} +.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; + text-align: left; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item { + cursor: pointer; + display: block; + margin: 0; + padding: 3px 20px; + white-space: nowrap; +} +.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; + text-decoration: none; + background-color: #ec6d12; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox { + margin: 0 2px 4px 0; + vertical-align: middle; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled { + cursor: not-allowed; +} +.bootgrid-table { + table-layout: fixed; +} +.bootgrid-table a { + outline: 0; +} +.bootgrid-table th > .column-header-anchor { + color: #fff; + cursor: not-allowed; + display: block; + position: relative; + text-decoration: none; +} +.bootgrid-table th > .column-header-anchor.sortable { + cursor: pointer; +} +.bootgrid-table th > .column-header-anchor > .text { + display: block; + margin: 0 16px 0 0; + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.bootgrid-table th > .column-header-anchor > .icon { + color: #fff; + display: block; + position: absolute; + right: 0; + top: 2px; +} +.bootgrid-table th > .column-header-anchor > .glyphicon { + color: #fff; +} +.bootgrid-table th:hover, +.bootgrid-table th:active { + background: #4b4b4b; +} +.bootgrid-table td { + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.bootgrid-table td.loading, +.bootgrid-table td.no-results { + background: none; + text-align: center; +} +.bootgrid-table th.select-cell, +.bootgrid-table td.select-cell { + text-align: center; + width: 30px; +} +.bootgrid-table th.select-cell .select-box, +.bootgrid-table td.select-cell .select-box { + margin: 0; + outline: 0; +} +.table-responsive .bootgrid-table { + table-layout: inherit !important; +} +.table-responsive .bootgrid-table th > .column-header-anchor > .text { + overflow: inherit !important; + -ms-text-overflow: inherit !important; + -o-text-overflow: inherit !important; + text-overflow: inherit !important; + white-space: inherit !important; +} +.table-responsive .bootgrid-table td { + overflow: inherit !important; + -ms-text-overflow: inherit !important; + -o-text-overflow: inherit !important; + text-overflow: inherit !important; + white-space: inherit !important; +} 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 d84290196..ce09f0c4f 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 @@ -924,7 +924,7 @@ html { body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; background-color: none; } @@ -953,7 +953,7 @@ img { .img-thumbnail { padding: 4px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -1213,7 +1213,7 @@ dl { dt, dd { - line-height: 1.42857; } + line-height: 1.428571429; } dt { font-weight: bold; } @@ -1261,7 +1261,7 @@ blockquote { blockquote .small { display: block; font-size: 80%; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; } blockquote footer:before, blockquote small:before, @@ -1297,7 +1297,7 @@ blockquote:after { address { margin-bottom: 20px; font-style: normal; - line-height: 1.42857; } + line-height: 1.428571429; } code, kbd, @@ -1329,7 +1329,7 @@ pre { padding: 9.5px; margin: 0 0 10px; font-size: 13px; - line-height: 1.42857; + line-height: 1.428571429; word-break: break-all; word-wrap: break-word; color: #FFFFFF; @@ -2033,7 +2033,7 @@ th { .table > tfoot > tr > th, .table > tfoot > tr > td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top:1px solid #303030; } .table > thead > tr > th { @@ -2271,7 +2271,7 @@ output { display: block; padding-top: 7px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; } select, @@ -2296,7 +2296,7 @@ input[type="color"] height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #FFF; background-color: #2a2a2a; background-image: none; @@ -2887,7 +2887,7 @@ select[multiple].input-lg, white-space: nowrap; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; @@ -3184,7 +3184,7 @@ tbody.collapse.in { padding: 3px 20px; clear: both; font-weight: normal; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; white-space: nowrap; outline:0;} @@ -3228,7 +3228,7 @@ tbody.collapse.in { display: block; padding: 3px 20px; font-size: 12px; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; white-space: nowrap; } @@ -3468,7 +3468,6 @@ tbody.collapse.in { font-size: 14px; font-weight: normal; line-height: 1; - color: #555555; text-align: center; background-color: #eeeeee; border: 1px solid #ccc; @@ -3596,7 +3595,7 @@ tbody.collapse.in { margin-bottom: -1px; } .nav-tabs > li > a { margin-right: 2px; - line-height: 1.42857; + line-height: 1.428571429; border-radius: 3px 3px 0 0; cursor:pointer;} .nav-tabs > li > a:hover { @@ -4062,7 +4061,7 @@ tbody.collapse.in { position: relative; float: left; padding: 6px 12px; - line-height: 1.42857; + line-height: 1.428571429; text-decoration: none; color: #FFFFFF; background-color: #505050; @@ -4304,7 +4303,7 @@ a.badge:hover, a.badge:focus { display: block; padding: 4px; margin-bottom: 20px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -4965,7 +4964,7 @@ a.list-group-item-danger { opacity: 1; filter: alpha(opacity=100); } .close:hover, .close:focus { - color: #B0B0B0; + color: #000; text-decoration: none; cursor: pointer; opacity: 1; @@ -5052,7 +5051,7 @@ button.close { .modal-title { margin: 0; - line-height: 1.42857; } + line-height: 1.428571429; } .modal-body { position: relative; @@ -5750,7 +5749,7 @@ body { bottom: 0; border:none; font-size: 12px; - padding: 20px 0; + padding: 0; width: 100%; z-index: 2; } @@ -5858,119 +5857,225 @@ 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;} -#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;} +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 { - 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;} + font-size:12px; + 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 { + width:50px; + height:30px; + 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:12px; + border-bottom:2px solid #2a2a2a; +} + +#navigation.col-sidebar-left > div > nav > #mainmenu > div > 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; +} + +#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; + 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: 12px !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: 12px !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: 12px !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, 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);} + width:150px; + font-size:12px; + display: block; + z-index: 10; + position: absolute; + left: 70px; + margin-top:-70px; + padding-bottom: 1px; + 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);} + 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.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);} + width:150px; + font-size:12px; + display: block; + z-index: 10; + position: absolute; + left: 148px; + margin-top:-29px; + 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; + width:0px; + font-size:12px; + position: absolute; + display: block; + z-index: 10; + left: 148px; + margin-top:-29px; + 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: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;} +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; } @@ -6229,174 +6334,119 @@ label > input[type="radio"] { background-color: #ec6d12; } [data-state="white"] { - background-color: inherit; } + background-color: inherit; +} [data-state="red"] { - background-color: #ec6d12; } + background-color: #ec6d12; +} + +.dashboard_grid_column table { + table-layout: fixed; +} + +#ipsec #ipsec-mobile, #ipsec #ipsec-tunnel, #ipsec #ipsec-overview { + background-color: #393939; +} + +#ipsec .ipsec-tab { + background-color: #3e3e3e; + color: #928873; +} + +#ipsec .ipsec-tab.activetab { + background-color: #2a2a2a; + color: #ec6d12; +} /*additional extensions for theme-cicada*/ #tab_1 #maintabs { - border-bottom: 1px solid #565656; } + border-bottom: 1px solid #565656; +} textarea#update_status, textarea#update_status:hover { - color:inherit !important; - background-color:none !important; - -webkit-box-shadow:none !important; - box-shadow:none !important; - border:none !important; } + 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; } + outline:none !important; +} .fa-toggle-on::before { - outline:none !important; } + outline:none !important; +} + +.fa-search::before, .glyphicon-search::before { + content: "\e003"; +} -.fa-search, .glyphicon-search::before { - content: "\e003"; - color: #FFFFFF !important; } .fa-times-circle::before { - content: "\f057"; - color: #B13116; } + content: "\f057"; + color: #B13116; +} + .fa-refresh::before { - content: "\f021"; - color: #FFF; } + content: "\f021"; +} + .fa-question-circle::before { - content: "\f059"; - cursor: pointer; - color: #ec6d12; + content: "\f059"; + cursor: pointer; + color: #ec6d12; } -#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; + +div.container-fluid > .fa-search::before, div.container-fluid > .fa-refresh::before { + color: #FFFFFF !important; } -.panel-heading h3:hover, h3:focus {color: #FFFFFF; - text-decoration: none; } -h3:link {color:#FFFFFF;text-decoration: underline;} +.panel-heading h3:hover, h3:focus { + color: #FFFFFF; + text-decoration: none; +} -h3:hover, h3:focus {color: #ec6d12; - text-decoration: underline; } +h3:link { + color:#FFFFFF; + text-decoration: underline; +} -text.nvd3 { - fill:#FFFFFF; } -text.nv-axislabel, text.nv-legend-text { - fill:#FFFFFF; } - -.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; } - -.nv-controlsWrap.nvd3-svg circle.nv-legend-symbol { -stroke-width: 1 !important; -fill: rgb(143, 143, 143) !important; -stroke: rgb(143, 143, 143) !important; } +h3:hover, h3:focus { + color: #ec6d12; + text-decoration: underline; +} .table-condensed.table-hover { - border: 1px solid #515151; } - -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; } - -::before, ::after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + border: 1px solid #515151; } -Element { - width: 17px; + +.bootgrid-header .search .glyphicon, +.bootgrid-footer .search .glyphicon, +.input-group-addon { + top: 0; + background-color: #ec6d12; + border: 1px solid #ec6d12; } -div.Tokenize ul.TokensContainer:hover, div.Tokenize ul.TokensContainer: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); } - -div.Tokenize ul.TokensContainer, div.Tokenize ul.Dropdown { - border: 1px solid #5a5a5a !important; - background-color: #2a2a2a !important; - color:#FFFFFF !important; } -.tokenize > .tokens-container > .token { - background-color: #ce671c !important; - border: 1px solid #303030 !important; } - -.tokenize > .tokens-container > .placeholder { - color:#505050 !important; } - -.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 { - 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, .btn-group.bootstrap-select:hover { - border-color: #323232 !important; - color:#FFFFFF !important; - background-color: #2d2d2d !important; } - -.bootgrid-table td.loading, .bootgrid-table td.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.0) !important; - border: 1px solid rgb(255, 127, 14) !important; + border-color: #323232 !important; + color:#FFFFFF !important; + background-color: #2d2d2d !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: #eac80a !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; } -.bootstrap-dialog.type-success .modal-header { - background-color: #c35d12 !important; + color: #eac80a !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; } diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/nv.d3.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/nv.d3.css new file mode 100644 index 000000000..0a0d18a67 --- /dev/null +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/nv.d3.css @@ -0,0 +1,657 @@ +/* nvd3 version 1.8.6 (https://github.com/novus/nvd3) 2017-08-23 */ +.nvd3 .nv-axis { + pointer-events:none; + opacity: 1; +} + +.nvd3 .nv-axis path { + fill: none; + stroke: #000; + stroke-opacity: .75; + shape-rendering: crispEdges; +} + +.nvd3 .nv-axis path.domain { + stroke-opacity: .75; +} + +.nvd3 .nv-axis.nv-x path.domain { + stroke-opacity: 0; +} + +.nvd3 .nv-axis line { + fill: none; + stroke: #e5e5e5; + shape-rendering: crispEdges; +} + +.nvd3 .nv-axis .zero line, + /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero { + stroke-opacity: .75; +} + +.nvd3 .nv-axis .nv-axisMaxMin text { + font-weight: bold; +} + +.nvd3 .x .nv-axis .nv-axisMaxMin text, +.nvd3 .x2 .nv-axis .nv-axisMaxMin text, +.nvd3 .x3 .nv-axis .nv-axisMaxMin text { + text-anchor: middle; +} + +.nvd3 .nv-axis.nv-disabled { + opacity: 0; +} + +.nvd3 .nv-bars rect { + fill-opacity: .75; + + transition: fill-opacity 250ms linear; +} + +.nvd3 .nv-bars rect.hover { + fill-opacity: 1; +} + +.nvd3 .nv-bars .hover rect { + fill: lightblue; +} + +.nvd3 .nv-bars text { + fill: rgba(0,0,0,0); +} + +.nvd3 .nv-bars .hover text { + fill: rgba(0,0,0,1); +} + +.nvd3 .nv-multibar .nv-groups rect, +.nvd3 .nv-multibarHorizontal .nv-groups rect, +.nvd3 .nv-discretebar .nv-groups rect { + stroke-opacity: 0; + + transition: fill-opacity 250ms linear; +} + +.nvd3 .nv-multibar .nv-groups rect:hover, +.nvd3 .nv-multibarHorizontal .nv-groups rect:hover, +.nvd3 .nv-candlestickBar .nv-ticks rect:hover, +.nvd3 .nv-discretebar .nv-groups rect:hover { + fill-opacity: 1; +} + +.nvd3 .nv-discretebar .nv-groups text, +.nvd3 .nv-multibarHorizontal .nv-groups text { + font-weight: bold; + fill: rgba(0,0,0,1); + stroke: rgba(0,0,0,0); +} + +/* boxplot CSS */ +.nvd3 .nv-boxplot circle { + fill-opacity: 0.5; +} + +.nvd3 .nv-boxplot circle:hover { + fill-opacity: 1; +} + +.nvd3 .nv-boxplot rect:hover { + fill-opacity: 1; +} + +.nvd3 line.nv-boxplot-median { + stroke: black; +} + +.nv-boxplot-tick:hover { + stroke-width: 2.5px; +} +/* bullet */ +.nvd3.nv-bullet { font: 10px sans-serif; } +.nvd3.nv-bullet .nv-measure { fill-opacity: .8; } +.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; } +.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; } +.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; } +.nvd3.nv-bullet .nv-markerLine { stroke: #000; stroke-width: 1.5px; } +.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; } +.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; } +.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; } +.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; } +.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; } +.nvd3.nv-bullet .nv-subtitle { fill: #999; } + +.nvd3.nv-bullet .nv-range { + fill: #bababa; + fill-opacity: .4; +} + +.nvd3.nv-bullet .nv-range:hover { + fill-opacity: .7; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick { + stroke-width: 1px; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover { + stroke-width: 2px; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect { + stroke: #2ca02c; + fill: #2ca02c; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect { + stroke: #d62728; + fill: #d62728; +} + +.with-transitions .nv-candlestickBar .nv-ticks .nv-tick { + transition: stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-candlestickBar .nv-ticks line { + stroke: #333; +} + +.nv-force-node { + stroke: #fff; + stroke-width: 1.5px; +} + +.nv-force-link { + stroke: #999; + stroke-opacity: .6; +} + +.nv-force-node text { + stroke-width: 0px; +} + +.nvd3 .nv-legend .nv-disabled rect { + /*fill-opacity: 0;*/ +} + +.nvd3 .nv-check-box .nv-box { + fill-opacity:0; + stroke-width:2; +} + +.nvd3 .nv-check-box .nv-check { + fill-opacity:0; + stroke-width:4; +} + +.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check { + fill-opacity:0; + stroke-opacity:0; +} + +.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check { + opacity: 0; +} + +/* line plus bar */ +.nvd3.nv-linePlusBar .nv-bar rect { + fill-opacity: .75; +} + +.nvd3.nv-linePlusBar .nv-bar rect:hover { + fill-opacity: 1; +} +.nvd3 .nv-groups path.nv-line { + fill: none; +} + +.nvd3 .nv-groups path.nv-area { + stroke: none; +} + +.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { + fill-opacity: 0; + stroke-opacity: 0; +} + +.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { + fill-opacity: .5 !important; + stroke-opacity: .5 !important; +} + + +.with-transitions .nvd3 .nv-groups .nv-point { + transition: stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-scatter .nv-groups .nv-point.hover, +.nvd3 .nv-groups .nv-point.hover { + stroke-width: 7px; + fill-opacity: .95 !important; + stroke-opacity: .95 !important; +} + + +.nvd3 .nv-point-paths path { + stroke: #aaa; + stroke-opacity: 0; + fill: #eee; + fill-opacity: 0; +} + + +.nvd3 .nv-indexLine { + cursor: ew-resize; +} + +/******************** + * SVG CSS + */ + +/******************** + Default CSS for an svg element nvd3 used +*/ +svg.nvd3-svg { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: block; + width:100%; + height:100%; +} + +/******************** + Box shadow and border radius styling +*/ +.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip { + background-color: rgb(60, 60, 60); + color: rgba(0,0,0,1.0); + border: 1px solid rgb(255, 127, 14); +} + + +.nvd3 text { + font: normal 12px Arial, sans-serif; + fill:#FFF; +} + +.nvd3 .title { + font: bold 14px Arial, sans-serif; +} + +.nvd3 .nv-background { + fill: white; + fill-opacity: 0; +} + +.nvd3.nv-noData { + font-size: 18px; + font-weight: bold; + fill:#fff; +} + + +/********** +* Brush +*/ + +.nv-brush .extent { + fill-opacity: .125; + shape-rendering: crispEdges; +} + +.nv-brush .resize path { + fill: #eee; + stroke: #666; +} + + +/********** +* Legend +*/ + +.nvd3 .nv-legend .nv-series { + cursor: pointer; +} + +.nv-legend-symbol { + stroke-width: 1 !important; + fill: rgb(255, 255, 255) !important; + fill-opacity: 1; + stroke: rgb(255, 255, 255) !important; +} + +.nvd3 .nv-legend .nv-disabled circle { + fill-opacity: 0; +} + +/* focus */ +.nvd3 .nv-brush .extent { + fill-opacity: 0 !important; +} + +.nvd3 .nv-brushBackground rect { + stroke: #000; + stroke-width: .4; + fill: #fff; + fill-opacity: .7; +} + +/********** +* Print +*/ + +@media print { + .nvd3 text { + stroke-width: 0; + fill-opacity: 1; + } +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick { + stroke-width: 1px; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover { + stroke-width: 2px; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive { + stroke: #2ca02c; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative { + stroke: #d62728; +} + + +.nvd3 .background path { + fill: none; + stroke: #EEE; + stroke-opacity: .4; + shape-rendering: crispEdges; +} + +.nvd3 .foreground path { + fill: none; + stroke-opacity: .7; +} + +.nvd3 .nv-parallelCoordinates-brush .extent { + fill: #fff; + fill-opacity: .6; + stroke: gray; + shape-rendering: crispEdges; +} + +.nvd3 .nv-parallelCoordinates .hover { + fill-opacity: 1; + stroke-width: 3px; +} + + +.nvd3 .missingValuesline line { + fill: none; + stroke: black; + stroke-width: 1; + stroke-opacity: 1; + stroke-dasharray: 5, 5; +} + +.nvd3.nv-pie path { + stroke-opacity: 0; + transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-pie .nv-pie-title { + font-size: 24px; + fill: rgba(19, 196, 249, 0.59); +} + +.nvd3.nv-pie .nv-slice text { + stroke: #000; + stroke-width: 0; +} + +.nvd3.nv-pie path { + stroke: #fff; + stroke-width: 1px; + stroke-opacity: 1; +} + +.nvd3.nv-pie path { + fill-opacity: .7; +} + +.nvd3.nv-pie .hover path { + fill-opacity: 1; +} + +.nvd3.nv-pie .nv-label { + pointer-events: none; +} + +.nvd3.nv-pie .nv-label rect { + fill-opacity: 0; + stroke-opacity: 0; +} + +/* scatter */ +.nvd3 .nv-groups .nv-point.hover { + stroke-width: 20px; + stroke-opacity: .5; +} + +.nvd3 .nv-scatter .nv-point.hover { + fill-opacity: 1; +} + +.nv-noninteractive { + pointer-events: none; +} + +.nv-distx, .nv-disty { + pointer-events: none; +} + +/* sparkline */ +.nvd3.nv-sparkline path { + fill: none; +} + +.nvd3.nv-sparklineplus g.nv-hoverValue { + pointer-events: none; +} + +.nvd3.nv-sparklineplus .nv-hoverValue line { + stroke: #333; + stroke-width: 1.5px; +} + +.nvd3.nv-sparklineplus, +.nvd3.nv-sparklineplus g { + pointer-events: all; +} + +.nvd3 .nv-hoverArea { + fill-opacity: 0; + stroke-opacity: 0; +} + +.nvd3.nv-sparklineplus .nv-xValue, +.nvd3.nv-sparklineplus .nv-yValue { + stroke-width: 0; + font-size: .9em; + font-weight: normal; +} + +.nvd3.nv-sparklineplus .nv-yValue { + stroke: #f66; +} + +.nvd3.nv-sparklineplus .nv-maxValue { + stroke: #2ca02c; + fill: #2ca02c; +} + +.nvd3.nv-sparklineplus .nv-minValue { + stroke: #d62728; + fill: #d62728; +} + +.nvd3.nv-sparklineplus .nv-currentValue { + font-weight: bold; + font-size: 1.1em; +} +/* stacked area */ +.nvd3.nv-stackedarea path.nv-area { + fill-opacity: .7; + stroke-opacity: 0; + transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-stackedarea path.nv-area.hover { + fill-opacity: .9; +} + + +.nvd3.nv-stackedarea .nv-groups .nv-point { + stroke-opacity: 0; + fill-opacity: 0; +} + +.nvtooltip { + position: absolute; + background-color: rgb(60, 60, 60); + color: rgba(0,0,0,1.0); + border: 1px solid rgb(255, 127, 14); + padding: 1px; + z-index: 10000; + display: block; + + font-family: Arial, sans-serif; + font-size: 13px; + text-align: left; + pointer-events: none; + + white-space: nowrap; + + -webkit-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; +} + +/*Give tooltips that old fade in transition by + putting a "with-transitions" class on the container div. +*/ +.nvtooltip.with-transitions, .with-transitions .nvtooltip { + transition: opacity 50ms linear; + + transition-delay: 200ms; +} + +.nvtooltip.x-nvtooltip, +.nvtooltip.y-nvtooltip { + padding: 8px; +} + +.nvtooltip h3 { + margin: 0; + padding: 4px 14px; + line-height: 18px; + font-weight: normal; + background-color: rgba(247,247,247,0.75); + color: rgba(0,0,0,1.0); + text-align: center; + + border-bottom: 1px solid #ebebeb; + + border-radius: 5px 5px 0 0; +} + +.nvtooltip p { + margin: 0; + padding: 5px 14px; + text-align: center; +} + +.nvtooltip span { + display: inline-block; + margin: 2px 0; +} + +.nvtooltip table { + margin: 6px; + border-spacing:0; +} + + +.nvtooltip table td { + padding: 2px 9px 2px 0; + vertical-align: middle; +} + +.nvtooltip table td.key { + font-weight: normal; +} + +.nvtooltip table td.key.total { + font-weight: bold; +} + +.nvtooltip table td.value { + text-align: right; + font-weight: bold; +} + +.nvtooltip table td.percent { + color: darkgray; +} + +.nvtooltip table tr.highlight td { + padding: 1px 9px 1px 0; + border-bottom-style: solid; + border-bottom-width: 1px; + border-top-style: solid; + border-top-width: 1px; +} + +.nvtooltip table td.legend-color-guide div { + width: 8px; + height: 8px; + vertical-align: middle; +} + +.nvtooltip table td.legend-color-guide div { + width: 12px; + height: 12px; + border: 1px solid #999; +} + +.nvtooltip .footer { + padding: 3px; + text-align: center; +} + +.nvtooltip-pending-removal { + pointer-events: none; + display: none; +} + + +/**** +Interactive Layer +*/ +.nvd3 .nv-interactiveGuideLine { + pointer-events:none; +} + +.nvd3 line.nv-guideline { + stroke: #ccc; +} diff --git a/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/tokenize2.css b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/tokenize2.css new file mode 100644 index 000000000..d3036d7d7 --- /dev/null +++ b/misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/tokenize2.css @@ -0,0 +1,171 @@ +.tokenize > .tokens-container { + position: relative; + list-style: none; + padding: 0 0 5px 5px; + height: auto; + min-height: 34px; + cursor: text; + border-radius: 3px; + border: 1px solid #5a5a5a; + background-color: #2a2a2a; +} + +.tokenize > .tokens-container.disabled { + background-color: #eee; + cursor: not-allowed; +} + +.tokenize.focus > .tokens-container { + outline: 0; + border-color:#ec6d12; + background-color:#2a2a2a; + -webkit-box-shadow: none; + box-shadow: none; +} + +.tokenize > .tokens-container.input-sm { + padding: 0 0 4px 4px; + min-height: 30px; +} + +.tokenize > .tokens-container.input-lg { + padding: 0 0 9px 9px; + min-height: 46px; +} + +.tokenize > .tokens-container > .token { + padding: 0 1.2em 0 5px; + background-color: #ce671c; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} + +.tokenize > .tokens-container > .token, +.tokenize > .tokens-container > .placeholder, +.tokenize > .tokens-container > .token-search { + display: inline-block; + margin: 5px 5px 0 0; + position: relative; + vertical-align: middle; +} + +.tokenize.sortable > .tokens-container > .token { + cursor: move; +} + +.tokenize.single > .tokens-container > .token { + display: block; + border-color: #fff; + background-color: transparent; +} + +.tokenize.sortable > .tokens-container > .token.shadow { + border-color: #ccc; + background-color: #ccc; + filter: alpha(opacity=50); + opacity: .2; +} + +.tokenize > .tokens-container > .placeholder { + color:#6b6b6b; + padding: 0; +} +.tokenize > .tokens-container > .token-search { + color:#fff; + padding: 0; +} +.tokenize > .tokens-container:hover { + border-color:#ec6d12; + background-color:#2a2a2a; + -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); +} + +.tokenize > .tokens-container > .token-search > input { + padding: 0; + margin: 0; + line-height: 1em; + background: transparent; + border:none; + outline: none; + width: 100%; +} + +.tokenize > .tokens-container > .token-search > input::-ms-clear { + display: none; +} + +.tokenize > .tokens-container.input-sm > .placeholder, +.tokenize > .tokens-container.input-sm > .token-search, +.tokenize > .tokens-container.input-sm > .token { + margin: 4px 4px 0 0; +} + +.tokenize > .tokens-container.input-lg > .placeholder, +.tokenize > .tokens-container.input-lg > .token-search, +.tokenize > .tokens-container.input-lg > .token { + margin: 9px 9px 0 0; +} + +.tokenize > .tokens-container > .token.pending-delete { + background-color: #5b72a4; + border-color: #425c96; + color: #fff +} + +.tokenize > .tokens-container > .token > .dismiss { + position: absolute; + right: 5px; + color: #a9b9d8; + text-decoration: none; + cursor: pointer; +} + +.tokenize > .tokens-container > .token > .dismiss:after { + content: "×"; + color: #fff; +} + +.tokenize > .tokens-container > .token.pending-delete > .dismiss { + color: #fff; +} + +.tokenize-dropdown { + position: absolute; + display: none; +} + +.tokenize-dropdown > .dropdown-menu { + min-height: 10px; + width: 100%; + display: block; + margin: -1px 0 0 0; + visibility: visible; + opacity: 1; +} + +.tokenize-dropdown > .dropdown-menu li { + cursor: pointer; +} + +.tokenize-dropdown > .dropdown-menu li > a .tokenize-highlight { + font-weight: bold; +} + +.tokenize-dropdown > .dropdown-menu li.locked { + padding: 3px 20px; + color: #333; + white-space: nowrap; +} + +.tokenize-dropdown > .dropdown-menu li.locked, +.tokenize-dropdown > .dropdown-menu li > a { + text-overflow: ellipsis; + overflow-x: hidden; +} + +.tokenize-dropdown > .dropdown-menu li:not(.active) a:hover, +.tokenize-dropdown > .dropdown-menu li:not(.active) a:focus { + background-color: transparent; +} diff --git a/misc/theme-rebellion/Makefile b/misc/theme-rebellion/Makefile index 9b1e38e6b..6ff6a7b85 100644 --- a/misc/theme-rebellion/Makefile +++ b/misc/theme-rebellion/Makefile @@ -1,5 +1,5 @@ PLUGIN_NAME= theme-rebellion -PLUGIN_VERSION= 1.5 +PLUGIN_VERSION= 1.6 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 5e19fd3f1..8f2567a66 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 @@ -385,7 +385,7 @@ main.page-content.col-lg-12 { } > nav > #mainmenu > div > { a.list-group-item { - font-size: 11px; + font-size: 12px; text-align: center; > span { &.fa, &.glyphicon { @@ -393,22 +393,22 @@ main.page-content.col-lg-12 { font-size: 28px; } &.__iconspacer { - padding-left: 7px; - padding-right: 7px; + width: 50px; + height: 30px; + padding: 0px; } } width: 70px; height: 70px; - padding-left: 10px; - padding-right: 10px; - padding-top: 15px; - padding-bottom: 15px; + 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: 11px !important; + font-size: 12px !important; display: block !important; position: absolute !important; left: 70px !important; @@ -416,7 +416,7 @@ main.page-content.col-lg-12 { } &.collapse.in > div.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; display: block !important; position: absolute !important; left: 148px !important; @@ -450,7 +450,7 @@ a.list-group-item.active-menu-title.collapsed { } > div.collapse.in > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; background-color: #393939 !important; &.menu-level-3-item.active { color: #ec6d12 !important; @@ -460,17 +460,17 @@ a.list-group-item.active-menu-title.collapsed { } > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; background-color: #393939 !important; } > div.collapse > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; } } &.collapsed > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; } &.collapse.in > a.list-group-item:hover { color: #ec6d12 !important; @@ -503,7 +503,7 @@ a.list-group-item:focus { } &.collapse.in { width: 150px; - font-size: 11px; + font-size: 12px; display: block; z-index: 10; position: absolute; @@ -514,27 +514,27 @@ a.list-group-item:focus { -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); + -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: 11px; + 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); + -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: 11px; + font-size: 12px; display: block; z-index: 10; position: absolute; @@ -545,22 +545,22 @@ a.list-group-item:focus { -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); + -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: 11px; + 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); + -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); } } } @@ -571,22 +571,6 @@ a.list-group-item:focus { 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; } @@ -953,6 +937,29 @@ div[data-for*="help_for"] { [data-state="red"] { background-color: #ec6d12; } +.tokens-container { + margin-top: 0px; + margin-bottom: 0px; +} + +.dashboard_grid_column table { + table-layout: fixed; +} + +#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; + } +} + #tab_1 #maintabs { border-bottom: 1px solid #565656; } 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 156d16354..befc03389 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 @@ -7117,27 +7117,27 @@ main.page-content.col-lg-12 { height: 100% !important; } #navigation.col-sidebar-left > div > nav > #mainmenu > div > a.list-group-item { - font-size: 11px; + font-size: 12px; text-align: center; width: 70px; height: 70px; - padding-left: 10px; - padding-right: 10px; - padding-top: 15px; - padding-bottom: 15px; - border-bottom: 2px solid #393939; + padding-left: 0px; + padding-right: 0px; + 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 { 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; + width: 50px; + height: 30px; + padding: 0px; } #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; display: block !important; position: absolute !important; left: 70px !important; @@ -7145,7 +7145,7 @@ main.page-content.col-lg-12 { } #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; + font-size: 12px !important; display: block !important; position: absolute !important; left: 148px !important; @@ -7171,7 +7171,7 @@ a.list-group-item.active-menu-title.collapsed { } #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; + 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 { @@ -7180,16 +7180,16 @@ a.list-group-item.active-menu-title.collapsed { } #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse > a.list-group-item { padding-left: 10px !important; - font-size: 11px !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: 11px !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: 11px !important; + font-size: 12px !important; } #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > a.list-group-item:hover { color: #ec6d12 !important; @@ -7225,16 +7225,17 @@ a.list-group-item:focus { 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: 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); + -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: 11px; + font-size: 12px; position: absolute; display: block; z-index: 10; @@ -7247,7 +7248,7 @@ a.list-group-item:focus { } #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in { width: 150px; - font-size: 11px; + font-size: 12px; display: block; z-index: 10; position: absolute; @@ -7258,13 +7259,13 @@ a.list-group-item:focus { -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); + -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: 11px; + font-size: 12px; position: absolute; display: block; z-index: 10; @@ -7286,22 +7287,7 @@ button.toggle-sidebar { margin-top: 18px; float: left; } -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; } @@ -7653,6 +7639,21 @@ div[data-for*=help_for] { background-color: #ec6d12; } +.tokens-container { + margin-top: 0px; + margin-bottom: 0px; } + +.dashboard_grid_column table { + table-layout: fixed; } + +#ipsec #ipsec-mobile, #ipsec #ipsec-tunnel, #ipsec #ipsec-overview { + background-color: #333333; } +#ipsec .ipsec-tab { + background-color: #555555; + color: black; } +#ipsec .ipsec-tab.activetab { + background-color: #888888; + color: #eeeeee; } #tab_1 #maintabs { border-bottom: 1px solid #565656; } diff --git a/misc/theme-tukan/Makefile b/misc/theme-tukan/Makefile index 6ae76485e..c1655b03a 100644 --- a/misc/theme-tukan/Makefile +++ b/misc/theme-tukan/Makefile @@ -1,5 +1,5 @@ PLUGIN_NAME= theme-tukan -PLUGIN_VERSION= 1.2 +PLUGIN_VERSION= 1.3 PLUGIN_COMMENT= The tukan theme - blue/white PLUGIN_MAINTAINER= rene@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 fe95ad205..a0122c509 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 @@ -800,12 +800,10 @@ td, th { .glyphicon-chevron-up:before { content: "\e113"; - color: #FFFFFF !important; } .glyphicon-chevron-down:before { content: "\e114"; - color: #FFFFFF !important; } .glyphicon-retweet:before { @@ -1165,7 +1163,7 @@ html { body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #000; background-color: none; } @@ -1197,7 +1195,7 @@ img { .img-thumbnail { padding: 4px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -1644,7 +1642,7 @@ dl { } dt, dd { - line-height: 1.42857; + line-height: 1.428571429; } dt { @@ -1707,7 +1705,7 @@ blockquote { footer, small, .small { display: block; font-size: 80%; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; } footer:before, small:before, .small:before { @@ -1755,7 +1753,7 @@ blockquote { address { margin-bottom: 20px; font-style: normal; - line-height: 1.42857; + line-height: 1.428571429; } code, kbd, pre, samp { @@ -1789,7 +1787,7 @@ pre { padding: 9.5px; margin: 0 0 10px; font-size: 13px; - line-height: 1.42857; + line-height: 1.428571429; word-break: break-all; word-wrap: break-word; color: #000; @@ -2563,7 +2561,7 @@ th { thead > tr > { th, td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #e3e3e3; } @@ -2571,7 +2569,7 @@ th { tbody > tr > { th, td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #e3e3e3; } @@ -2579,7 +2577,7 @@ th { tfoot > tr > { th, td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #e3e3e3; } @@ -3086,7 +3084,7 @@ output { display: block; padding-top: 7px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #000; } @@ -3096,7 +3094,7 @@ select, textarea { height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #000; background-color: #FFF; background-image: none; @@ -3116,7 +3114,7 @@ input { height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #000; background-color: #FFF; background-image: none; @@ -4478,7 +4476,7 @@ select[multiple].input-lg, .form-horizontal .form-group-lg select[multiple].form white-space: nowrap; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; @@ -5142,7 +5140,7 @@ tbody.collapse.in { padding: 3px 20px; clear: both; font-weight: normal; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; white-space: nowrap; outline: 0; @@ -5203,7 +5201,7 @@ tbody.collapse.in { display: block; padding: 3px 20px; font-size: 12px; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; white-space: nowrap; } @@ -5550,7 +5548,7 @@ tbody.collapse.in { font-size: 14px; font-weight: normal; line-height: 1; - color: #555555; + color: #FFF; text-align: center; background-color: #eeeeee; border: 1px solid #ccc; @@ -5777,7 +5775,7 @@ a:focus { > li { float: left; > a { - line-height: 1.42857; + line-height: 1.428571429; border: none; cursor: pointer; &:hover { @@ -6482,7 +6480,7 @@ fieldset[disabled] .navbar-inverse .btn-link { li { display: inline-block; + li:before { - content: "/ "; + content: "/ "; padding: 0 5px; color: #ccc; } @@ -6506,7 +6504,7 @@ fieldset[disabled] .navbar-inverse .btn-link { position: relative; float: left; padding: 6px 12px; - line-height: 1.42857; + line-height: 1.428571429; text-decoration: none; color: #FFFFFF; background-color: #427795; @@ -6887,7 +6885,7 @@ a.badge { display: block; padding: 4px; margin-bottom: 20px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -7999,7 +7997,7 @@ button.close { .modal-title { margin: 0; - line-height: 1.42857; + line-height: 1.428571429; } .modal-body { @@ -8862,7 +8860,7 @@ body { bottom: 0; border: none; font-size: 12px; - padding: 20px 0; + padding: 0; width: 100%; z-index: 2; } @@ -9038,7 +9036,7 @@ main.page-content.col-lg-12 { } > nav > #mainmenu > div > { a.list-group-item { - font-size: 11px; + font-size: 12px; text-align: center; > span { &.fa, &.glyphicon { @@ -9046,22 +9044,22 @@ main.page-content.col-lg-12 { font-size: 28px; } &.__iconspacer { - padding-left: 7px; - padding-right: 7px; + width: 50px; + height: 30px; + padding: 0px; } } width: 70px; height: 70px; - padding-left: 10px; - padding-right: 10px; - padding-top: 15px; - padding-bottom: 15px; + padding-left: 0px; + padding-right: 0px; + padding-top: 12px; border-bottom: 2px solid #1b313e; } div { &.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 11px !important; + font-size: 12px !important; display: block !important; position: absolute !important; left: 70px !important; @@ -9069,56 +9067,66 @@ main.page-content.col-lg-12 { } &.collapse.in > div.collapsing > a.list-group-item { padding-left: 10px !important; - font-size: 11px !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, &[aria-expanded="true"] { + a.list-group-item.active-menu-title { + color: #000 !important; + background-color: #FFF !important; + } + } + } +} + +a.list-group-item.active-menu-title.collapsed { + 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; + } + div { + &.collapse { + &.in { + > a.list-group-item[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 { + > div.collapse.in > 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; + font-size: 12px !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: 12px !important; + background-color: #294C5FE6 !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; + background-color: #FFF !important; + } + &.collapse.in > a.list-group-item:hover { + color: #000 !important; + background-color: #FFF !important; } } } @@ -9147,7 +9155,7 @@ a.list-group-item:focus { } &.collapse.in { width: 150px; - font-size: 11px; + font-size: 12px; display: block; z-index: 10; position: absolute; @@ -9164,7 +9172,7 @@ a.list-group-item:focus { } &.collapsing { width: 0px; - font-size: 11px; + font-size: 12px; position: absolute; display: block; z-index: 10; @@ -9178,12 +9186,12 @@ a.list-group-item:focus { &.collapse.in > div { &.collapse.in { width: 150px; - font-size: 11px; + font-size: 12px; display: block; z-index: 10; position: absolute; left: 148px; - margin-top: -28px; + margin-top: -29px; height: auto; border: 1px solid #1f3a4a; -webkit-transition: width 0.1s; @@ -9195,12 +9203,12 @@ a.list-group-item:focus { } &.collapsing { width: 0px; - font-size: 11px; + font-size: 12px; position: absolute; display: block; z-index: 10; left: 148px; - margin-top: -28px; + margin-top: -29px; 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); @@ -9215,22 +9223,6 @@ a.list-group-item:focus { 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; } @@ -9611,6 +9603,24 @@ label > input { background-color: #ffe83e; } +.dashboard_grid_column table { + table-layout: fixed; +} + +#ipsec { + #ipsec-mobile, #ipsec-tunnel, #ipsec-overview { + background-color: #f0f0f0; + } + .ipsec-tab { + background-color: #839caa; + color: #FFF; + &.activetab { + background-color: #315a71; + color: #FFF; + } + } +} + /*additional extensions for theme-tukan*/ #tab_1 #maintabs { @@ -9639,9 +9649,8 @@ textarea#update_status { outline: none !important; } -.page-head .fa-search, .glyphicon-search::before { +.fa-search::before, .glyphicon-search::before { content: "\e003"; - color: #FFFFFF; } .glyphicon.glyphicon-search::before { @@ -9659,16 +9668,14 @@ textarea#update_status { cursor: pointer; } -.fa-search::before, .fa-refresh::before { - color: #FFFFFF !important; +.fa-refresh::before { + content: "\f021"; } -#totals .fa-search::before { - color: #FFF !important; - background-color: #ff7e25; - padding: 5px; - border-radius: 4px; - border: 1px solid #8A8A8A; +div.container-fluid > { + .fa-search::before, .fa-refresh::before { + color: #FFFFFF !important; + } } .panel-heading h3:hover { @@ -9690,77 +9697,14 @@ h3 { } } -.nvd3 .nv-axis { - line { - stroke: #d8d8d8 !important; - } - 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; -} - -.nv-controlsWrap.nvd3-svg circle.nv-legend-symbol { - stroke-width: 1 !important; - fill: rgb(143, 143, 143) !important; - stroke: rgb(143, 143, 143) !important; -} - .table-condensed.table-hover { border: 1px solid #bdbdbd; } -.tokenize { - > .tokens-container > .token { - background-color: #ffe83e !important; - border: 1px solid #303030 !important; - > .dismiss::after { - color: #000 !important; - } - } - &.focus > .tokens-container { - border-color: #00A7FF !important; - background-color: none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - } - > .tokens-container { - border: 1px solid #4d83a1 !important; - background-color: #FFFFFF !important; - > { - .tokenize > .tokens-container > .token-search { - color: #FFFFFF !important; - } - .token-search > input { - border: none !important; - } - } - } -} - -.bootgrid-table th { - > .column-header-anchor { - color: #000 !important; - > { - .icon, .glyphicon { - color: #000 !important; - } - } - } - &:hover { - 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; +.bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon, .input-group-addon { + top: 0; + background-color: #FF7E25; + border: 1px solid #FF7E25; } .btn-group.bootstrap-select { @@ -9770,33 +9714,6 @@ h3 { } } -.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: #ff7e25 !important; -} - -.bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon, .input-group-addon { - top: 0; - background-color: #FF7E25 !important; - border: 1px solid #FF7E25 !important; -} - -.nvtooltip { - background-color: #fff !important; - color: rgba(0, 0, 0, 1) !important; - border: 1px solid rgb(0, 0, 0) !important; - table { - background-color: #FFF !important; - } -} - .glyphicon { &.glyphicon-play.text-muted, &.glyphicon-remove.text-muted, &.glyphicon-remove-sign.text-muted, &.glyphicon-info-sign.text-muted { color: #000 !important; @@ -9816,6 +9733,3 @@ h3 { background-color: #FFF; border: 1px solid #c2c2c2; } -.bootstrap-dialog.type-success .modal-header { - background-color: #427795 !important; -} diff --git a/misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/tokenizer2.scss b/misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/tokenizer2.scss new file mode 100644 index 000000000..106ce7bfc --- /dev/null +++ b/misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/tokenizer2.scss @@ -0,0 +1,162 @@ +.tokenize { + > .tokens-container { + position: relative; + list-style: none; + padding: 0 0 5px 5px; + height: auto; + min-height: 34px; + cursor: text; + border-radius: 3px; + border: 1px solid #4d83a1; + background-color: #ffffff; + &.disabled { + background-color: #eee; + cursor: not-allowed; + } + } + &.focus > .tokens-container { + outline: 0; + border-color: #00A7FF; + background-color: none; + -webkit-box-shadow: none; + box-shadow: none; + } + > .tokens-container { + &.input-sm { + padding: 0 0 4px 4px; + min-height: 30px; + } + &.input-lg { + padding: 0 0 9px 9px; + min-height: 46px; + } + > { + .token { + padding: 0 1.2em 0 5px; + background-color: #ffe83e; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + border: 1px solid #303030; + display: inline-block; + margin: 5px 5px 0 0; + position: relative; + vertical-align: middle; + } + .placeholder, .token-search { + display: inline-block; + margin: 5px 5px 0 0; + position: relative; + vertical-align: middle; + } + } + } + &.sortable > .tokens-container > .token { + cursor: move; + } + &.single > .tokens-container > .token { + display: block; + border-color: #fff; + background-color: transparent; + } + &.sortable > .tokens-container > .token.shadow { + border-color: #ccc; + background-color: #ccc; + filter: alpha(opacity = 50); + opacity: .2; + } + > .tokens-container { + > { + .placeholder { + color: #c9c9c9; + padding: 0; + } + .token-search { + color: #000; + padding: 0; + } + } + &:hover { + border-color: #00A7FF; + background-color: none; + } + > .token-search > input { + padding: 0; + margin: 0; + line-height: 1em; + background: transparent; + border: none; + outline: none; + width: 100%; + &::-ms-clear { + display: none; + } + } + &.input-sm > { + .placeholder, .token-search, .token { + margin: 4px 4px 0 0; + } + } + &.input-lg > { + .placeholder, .token-search, .token { + margin: 9px 9px 0 0; + } + } + > .token { + &.pending-delete { + background-color: #5b72a4; + border-color: #425c96; + color: #fff; + > .dismiss { + color: #fff; + } + } + > .dismiss { + position: absolute; + right: 5px; + color: #a9b9d8; + text-decoration: none; + cursor: pointer; + &:after { + content: "×"; + color: #000; + } + } + } + } +} + +.tokenize-dropdown { + position: absolute; + display: none; + > .dropdown-menu { + min-height: 10px; + width: 100%; + display: block; + margin: -1px 0 0 0; + visibility: visible; + opacity: 1; + li { + cursor: pointer; + > a .tokenize-highlight { + font-weight: bold; + } + &.locked { + padding: 3px 20px; + color: #333; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + } + > a { + text-overflow: ellipsis; + overflow-x: hidden; + } + &:not(.active) a { + &:hover, &:focus { + background-color: transparent; + } + } + } + } +} diff --git a/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/jquery.bootgrid.css b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/jquery.bootgrid.css new file mode 100644 index 000000000..6bddcc427 --- /dev/null +++ b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/jquery.bootgrid.css @@ -0,0 +1,158 @@ +/*! + * jQuery Bootgrid v1.3.1 - 09/11/2015 + * Copyright (c) 2014-2015 Rafael Staib (http://www.jquery-bootgrid.com) + * Licensed under MIT http://www.opensource.org/licenses/MIT + */ +.bootgrid-header, +.bootgrid-footer { + margin: 15px 0; +} +.bootgrid-header a, +.bootgrid-footer a { + outline: 0; +} +.bootgrid-header .search, +.bootgrid-footer .search { + display: inline-block; + margin: 0 20px 0 0; + vertical-align: middle; + width: 180px; +} + +.bootgrid-header .search .glyphicon, +.bootgrid-footer .search .glyphicon, +.input-group-addon { + top: 0; + background-color: #FF7E25; + border: 1px solid #FF7E25; +} +.bootgrid-header .search .fa, +.bootgrid-footer .search .fa { + display: table-cell; +} +.bootgrid-header .search.search-field::-ms-clear, +.bootgrid-footer .search.search-field::-ms-clear, +.bootgrid-header .search .search-field::-ms-clear, +.bootgrid-footer .search .search-field::-ms-clear { + display: none; +} +.bootgrid-header .pagination, +.bootgrid-footer .pagination { + margin: 0 !important; +} +.bootgrid-header .actionBar, +.bootgrid-footer .infoBar { + text-align: right; +} +.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; + text-align: left; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item { + cursor: pointer; + display: block; + margin: 0; + padding: 3px 20px; + white-space: nowrap; +} +.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; + text-decoration: none; + background-color: #ff7e25; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox, +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox { + margin: 0 2px 4px 0; + vertical-align: middle; +} +.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled, +.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled { + cursor: not-allowed; +} +.bootgrid-table { + table-layout: fixed; +} +.bootgrid-table a { + outline: 0; +} +.bootgrid-table th > .column-header-anchor { + color: #000; + cursor: not-allowed; + display: block; + position: relative; + text-decoration: none; +} +.bootgrid-table th > .column-header-anchor.sortable { + cursor: pointer; +} +.bootgrid-table th > .column-header-anchor > .text { + display: block; + margin: 0 16px 0 0; + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.bootgrid-table th > .column-header-anchor > .icon { + color: #000; + display: block; + position: absolute; + right: 0; + top: 2px; +} +.bootgrid-table th > .column-header-anchor > .glyphicon { + color: #000; +} +.bootgrid-table th:hover, +.bootgrid-table th:active { + background: #f2fafe; +} +.bootgrid-table td { + overflow: hidden; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.bootgrid-table td.loading, +.bootgrid-table td.no-results { + background: none; + text-align: center; +} +.bootgrid-table th.select-cell, +.bootgrid-table td.select-cell { + text-align: center; + width: 30px; +} +.bootgrid-table th.select-cell .select-box, +.bootgrid-table td.select-cell .select-box { + margin: 0; + outline: 0; +} +.table-responsive .bootgrid-table { + table-layout: inherit !important; +} +.table-responsive .bootgrid-table th > .column-header-anchor > .text { + overflow: inherit !important; + -ms-text-overflow: inherit !important; + -o-text-overflow: inherit !important; + text-overflow: inherit !important; + white-space: inherit !important; +} +.table-responsive .bootgrid-table td { + overflow: inherit !important; + -ms-text-overflow: inherit !important; + -o-text-overflow: inherit !important; + text-overflow: inherit !important; + white-space: inherit !important; +} 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 0fe0255a0..503485487 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 @@ -646,12 +646,10 @@ th { content: "\e112"; } .glyphicon-chevron-up:before { - content: "\e113"; - color:#FFFFFF !important; } + content: "\e113"; } .glyphicon-chevron-down:before { - content: "\e114"; - color:#FFFFFF !important; } + content: "\e114"; } .glyphicon-retweet:before { content: "\e115"; } @@ -925,7 +923,7 @@ html { body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #000; background-color: none; } @@ -954,7 +952,7 @@ img { .img-thumbnail { padding: 4px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -1214,7 +1212,7 @@ dl { dt, dd { - line-height: 1.42857; } + line-height: 1.428571429; } dt { font-weight: bold; } @@ -1262,7 +1260,7 @@ blockquote { blockquote .small { display: block; font-size: 80%; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; } blockquote footer:before, blockquote small:before, @@ -1298,7 +1296,7 @@ blockquote:after { address { margin-bottom: 20px; font-style: normal; - line-height: 1.42857; } + line-height: 1.428571429; } code, kbd, @@ -1330,7 +1328,7 @@ pre { padding: 9.5px; margin: 0 0 10px; font-size: 13px; - line-height: 1.42857; + line-height: 1.428571429; word-break: break-all; word-wrap: break-word; color: #000; @@ -2034,7 +2032,7 @@ th { .table > tfoot > tr > th, .table > tfoot > tr > td { padding: 10px 0px 10px 20px; - line-height: 1.42857; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #e3e3e3; } .table > thead > tr > th { @@ -2273,7 +2271,7 @@ output { display: block; padding-top: 7px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #000; } select, @@ -2298,7 +2296,7 @@ input[type="color"] height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; color: #000; background-color: #FFF; background-image: none; @@ -2889,7 +2887,7 @@ select[multiple].input-lg, white-space: nowrap; padding: 6px 12px; font-size: 14px; - line-height: 1.42857; + line-height: 1.428571429; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; @@ -3186,7 +3184,7 @@ tbody.collapse.in { padding: 3px 20px; clear: both; font-weight: normal; - line-height: 1.42857; + line-height: 1.428571429; color: #FFFFFF; white-space: nowrap; outline:0;} @@ -3230,7 +3228,7 @@ tbody.collapse.in { display: block; padding: 3px 20px; font-size: 12px; - line-height: 1.42857; + line-height: 1.428571429; color: #777777; white-space: nowrap; } @@ -3466,7 +3464,7 @@ tbody.collapse.in { font-size: 14px; font-weight: normal; line-height: 1; - color: #555555; + color: #FFF; text-align: center; background-color: #eeeeee; border: 1px solid #ccc; @@ -3595,7 +3593,7 @@ tbody.collapse.in { .nav-tabs > li { float: left; } .nav-tabs > li > a { - line-height: 1.42857; + line-height: 1.428571429; border:none; cursor:pointer;} .nav-tabs > li > a:hover {opacity: 0.8; filter: alpha(opacity=80);} @@ -4061,7 +4059,7 @@ tbody.collapse.in { position: relative; float: left; padding: 6px 12px; - line-height: 1.42857; + line-height: 1.428571429; text-decoration: none; color: #FFFFFF; background-color: #427795; @@ -4301,7 +4299,7 @@ a.badge:hover, a.badge:focus { display: block; padding: 4px; margin-bottom: 20px; - line-height: 1.42857; + line-height: 1.428571429; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; @@ -5050,7 +5048,7 @@ button.close { .modal-title { margin: 0; - line-height: 1.42857; } + line-height: 1.428571429; } .modal-body { position: relative; @@ -5755,7 +5753,7 @@ body { bottom: 0; border:none; font-size: 12px; - padding: 20px 0; + padding: 0; width: 100%; z-index: 2; } @@ -5864,119 +5862,226 @@ 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;} -#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;} +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 { - 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;} + font-size:12px; + 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 { + width:50px; height:30px; 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:12px; + 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: 12px !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; + 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: #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: 12px !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: 12px !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: 12px !important; +} + +#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsed > a.list-group-item { + padding-left: 10px !important; + font-size: 12px !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);} + width:150px; + font-size:12px; + 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);} + 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.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);} + width:150px; + font-size:12px; + display: block; + z-index: 10; + position: absolute; + left: 148px; + margin-top:-29px; + 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; + width:0px; + font-size:12px; + position: absolute; + display: block; + z-index: 10; + left: 148px; + margin-top:-29px; + 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: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;} +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; } @@ -6243,135 +6348,120 @@ label > input[type="radio"] { /* fields in firewall schedule */ [data-state="lightcoral"] { - background-color: #ffe83e; } + background-color: #ffe83e; +} [data-state="white"] { - background-color: inherit; } + background-color: inherit; +} [data-state="red"] { - background-color: #ffe83e; } + background-color: #ffe83e; +} + +.dashboard_grid_column table { + table-layout: fixed; +} + +#ipsec #ipsec-mobile, #ipsec #ipsec-tunnel, #ipsec #ipsec-overview { + background-color: #f0f0f0; +} + +#ipsec .ipsec-tab { + background-color: #839caa; + color: #FFF; +} + +#ipsec .ipsec-tab.activetab { + background-color: #315a71; + color: #FFF; +} /*additional extensions for theme-tukan*/ #tab_1 #maintabs { - border-bottom: 1px solid #c2c2c2; } + 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; outline:none !important; } .fa-toggle-on::before { - outline:none !important; } + outline:none !important; +} + +.fa-search::before, .glyphicon-search::before { + content: "\e003"; +} -.page-head .fa-search, .glyphicon-search::before { - content: "\e003"; - color: #FFFFFF; } .glyphicon.glyphicon-search::before { - color:#000 !important; } + color:#000 !important; +} + .fa-times-circle::before { - content: "\f057"; - color: #DA4829; } + content: "\f057"; + color: #DA4829; +} + .fa-question-circle::before { - content: "\f059"; - color: #ff7e25; - cursor: pointer; } -.fa-search::before, .fa-refresh::before { - color: #FFFFFF !important; } -#totals .fa-search::before { - color: #FFF !important; - background-color: #ff7e25; - padding: 5px; - border-radius: 4px; - border: 1px solid #8A8A8A; } + content: "\f059"; + color: #ff7e25; + cursor: pointer; +} +.fa-refresh::before { + content: "\f021"; +} -.panel-heading h3:hover, h3:focus {color: #FFFFFF; - text-decoration: none; } +div.container-fluid >.fa-search::before, div.container-fluid >.fa-refresh::before { + color: #FFFFFF !important; } -h3:link {color:#FFFFFF;text-decoration: underline;} +.panel-heading h3:hover, h3:focus { + color: #FFFFFF; + text-decoration: none; +} -h3:hover, h3:focus {text-decoration: underline; } +h3:link { + color:#FFFFFF;text-decoration: underline; +} -.nvd3 .nv-axis line {stroke: #d8d8d8 !important; } -.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; } - -.nv-controlsWrap.nvd3-svg circle.nv-legend-symbol { -stroke-width: 1 !important; -fill: rgb(143, 143, 143) !important; -stroke: rgb(143, 143, 143) !important; } +h3:hover, h3:focus { + text-decoration: underline; +} .table-condensed.table-hover { - border: 1px solid #bdbdbd; } + border: 1px solid #bdbdbd; +} -.tokenize > .tokens-container > .token { - background-color: #ffe83e !important; - border: 1px solid #303030 !important; } - -.tokenize > .tokens-container > .token > .dismiss::after { - color:#000 !important; } - -.tokenize.focus > .tokens-container { - border-color: #00A7FF !important; - background-color:none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important;} - -.tokenize > .tokens-container { - border: 1px solid #4d83a1 !important; - background-color: #FFFFFF !important;} - -.tokenize > .tokens-container > .tokenize > .tokens-container > .token-search { - color:#FFFFFF !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: #000 !important; } -.bootgrid-table th:hover { - 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; } +.bootgrid-header .search .glyphicon, +.bootgrid-footer .search .glyphicon, +.input-group-addon { + top: 0; + background-color: #FF7E25; + border: 1px solid #FF7E25; +} .btn-group.bootstrap-select.open, .btn-group.bootstrap-select:hover { - border-color: #323232 !important; - color:#FFFFFF !important; } - -.bootgrid-table td.loading, .bootgrid-table td.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:#ff7e25 !important; } - -.bootgrid-header .search .glyphicon, .bootgrid-footer .search .glyphicon,.input-group-addon { - top: 0; - 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; + border-color: #323232 !important; + color:#FFFFFF !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;} -#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; } -.bootstrap-dialog.type-success .modal-header {background-color: #427795 !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; +} diff --git a/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/nv.d3.css b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/nv.d3.css new file mode 100644 index 000000000..0e7e5e960 --- /dev/null +++ b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/nv.d3.css @@ -0,0 +1,654 @@ +/* nvd3 version 1.8.6 (https://github.com/novus/nvd3) 2017-08-23 */ +.nvd3 .nv-axis { + pointer-events:none; + opacity: 1; + fill: #000; +} + +.nvd3 .nv-axis path { + fill: none; + stroke: #000; + stroke-opacity: .75; + shape-rendering: crispEdges; +} + +.nvd3 .nv-axis path.domain { + stroke-opacity: .75; +} + +.nvd3 .nv-axis.nv-x path.domain { + stroke-opacity: 0; +} + +.nvd3 .nv-axis line { + fill: none; + stroke: #d8d8d8; + shape-rendering: crispEdges; +} + +.nvd3 .nv-axis .zero line, + /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero { + stroke-opacity: .75; +} + +.nvd3 .nv-axis .nv-axisMaxMin text { + font-weight: bold; +} + +.nvd3 .x .nv-axis .nv-axisMaxMin text, +.nvd3 .x2 .nv-axis .nv-axisMaxMin text, +.nvd3 .x3 .nv-axis .nv-axisMaxMin text { + text-anchor: middle; +} + +.nvd3 .nv-axis.nv-disabled { + opacity: 0; +} + +.nvd3 .nv-bars rect { + fill-opacity: .75; + + transition: fill-opacity 250ms linear; +} + +.nvd3 .nv-bars rect.hover { + fill-opacity: 1; +} + +.nvd3 .nv-bars .hover rect { + fill: lightblue; +} + +.nvd3 .nv-bars text { + fill: rgba(0,0,0,0); +} + +.nvd3 .nv-bars .hover text { + fill: rgba(0,0,0,1); +} + +.nvd3 .nv-multibar .nv-groups rect, +.nvd3 .nv-multibarHorizontal .nv-groups rect, +.nvd3 .nv-discretebar .nv-groups rect { + stroke-opacity: 0; + + transition: fill-opacity 250ms linear; +} + +.nvd3 .nv-multibar .nv-groups rect:hover, +.nvd3 .nv-multibarHorizontal .nv-groups rect:hover, +.nvd3 .nv-candlestickBar .nv-ticks rect:hover, +.nvd3 .nv-discretebar .nv-groups rect:hover { + fill-opacity: 1; +} + +.nvd3 .nv-discretebar .nv-groups text, +.nvd3 .nv-multibarHorizontal .nv-groups text { + font-weight: bold; + fill: rgba(0,0,0,1); + stroke: rgba(0,0,0,0); +} + +/* boxplot CSS */ +.nvd3 .nv-boxplot circle { + fill-opacity: 0.5; +} + +.nvd3 .nv-boxplot circle:hover { + fill-opacity: 1; +} + +.nvd3 .nv-boxplot rect:hover { + fill-opacity: 1; +} + +.nvd3 line.nv-boxplot-median { + stroke: black; +} + +.nv-boxplot-tick:hover { + stroke-width: 2.5px; +} +/* bullet */ +.nvd3.nv-bullet { font: 10px sans-serif; } +.nvd3.nv-bullet .nv-measure { fill-opacity: .8; } +.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; } +.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; } +.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; } +.nvd3.nv-bullet .nv-markerLine { stroke: #000; stroke-width: 1.5px; } +.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; } +.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; } +.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; } +.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; } +.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; } +.nvd3.nv-bullet .nv-subtitle { fill: #999; } + +.nvd3.nv-bullet .nv-range { + fill: #bababa; + fill-opacity: .4; +} + +.nvd3.nv-bullet .nv-range:hover { + fill-opacity: .7; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick { + stroke-width: 1px; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover { + stroke-width: 2px; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect { + stroke: #2ca02c; + fill: #2ca02c; +} + +.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect { + stroke: #d62728; + fill: #d62728; +} + +.with-transitions .nv-candlestickBar .nv-ticks .nv-tick { + transition: stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-candlestickBar .nv-ticks line { + stroke: #333; +} + +.nv-force-node { + stroke: #fff; + stroke-width: 1.5px; +} + +.nv-force-link { + stroke: #999; + stroke-opacity: .6; +} + +.nv-force-node text { + stroke-width: 0px; +} + +.nvd3 .nv-legend .nv-disabled rect { + /*fill-opacity: 0;*/ +} + +.nvd3 .nv-check-box .nv-box { + fill-opacity:0; + stroke-width:2; +} + +.nvd3 .nv-check-box .nv-check { + fill-opacity:0; + stroke-width:4; +} + +.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check { + fill-opacity:0; + stroke-opacity:0; +} + +.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check { + opacity: 0; + stroke-width: 1; + fill: rgb(143, 143, 143); + stroke: rgb(143, 143, 143); +} + +/* line plus bar */ +.nvd3.nv-linePlusBar .nv-bar rect { + fill-opacity: .75; +} + +.nvd3.nv-linePlusBar .nv-bar rect:hover { + fill-opacity: 1; +} +.nvd3 .nv-groups path.nv-line { + fill: none; +} + +.nvd3 .nv-groups path.nv-area { + stroke: none; +} + +.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { + fill-opacity: 0; + stroke-opacity: 0; +} + +.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { + fill-opacity: .5 !important; + stroke-opacity: .5 !important; +} + + +.with-transitions .nvd3 .nv-groups .nv-point { + transition: stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-scatter .nv-groups .nv-point.hover, +.nvd3 .nv-groups .nv-point.hover { + stroke-width: 7px; + fill-opacity: .95 !important; + stroke-opacity: .95 !important; +} + + +.nvd3 .nv-point-paths path { + stroke: #aaa; + stroke-opacity: 0; + fill: #eee; + fill-opacity: 0; +} + + +.nvd3 .nv-indexLine { + cursor: ew-resize; +} + +/******************** + * SVG CSS + */ + +/******************** + Default CSS for an svg element nvd3 used +*/ +svg.nvd3-svg { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: block; + width:100%; + height:100%; +} + +/******************** + Box shadow and border radius styling +*/ +.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip { + background-color: rgb(60, 60, 60); + color: rgba(0,0,0,1.0); + border: 1px solid rgb(255, 127, 14); +} + + +.nvd3 text { + font: normal 12px Arial, sans-serif; +} + +.nvd3 .title { + font: bold 14px Arial, sans-serif; +} + +.nvd3 .nv-background { + fill: white; + fill-opacity: 0; +} + +.nvd3.nv-noData { + font-size: 18px; + font-weight: bold; + fill:#000; +} + + +/********** +* Brush +*/ + +.nv-brush .extent { + fill-opacity: .125; + shape-rendering: crispEdges; +} + +.nv-brush .resize path { + fill: #eee; + stroke: #666; +} + + +/********** +* Legend +*/ + +.nvd3 .nv-legend .nv-series { + cursor: pointer; +} + +.nvd3 .nv-legend .nv-disabled circle { + fill-opacity: 0; +} + +/* focus */ +.nvd3 .nv-brush .extent { + fill-opacity: 0 !important; +} + +.nvd3 .nv-brushBackground rect { + stroke: #000; + stroke-width: .4; + fill: #fff; + fill-opacity: .7; +} + +/********** +* Print +*/ + +@media print { + .nvd3 text { + stroke-width: 0; + fill-opacity: 1; + } +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick { + stroke-width: 1px; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover { + stroke-width: 2px; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive { + stroke: #2ca02c; +} + +.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative { + stroke: #d62728; +} + + +.nvd3 .background path { + fill: none; + stroke: #EEE; + stroke-opacity: .4; + shape-rendering: crispEdges; +} + +.nvd3 .foreground path { + fill: none; + stroke-opacity: .7; +} + +.nvd3 .nv-parallelCoordinates-brush .extent { + fill: #fff; + fill-opacity: .6; + stroke: gray; + shape-rendering: crispEdges; +} + +.nvd3 .nv-parallelCoordinates .hover { + fill-opacity: 1; + stroke-width: 3px; +} + + +.nvd3 .missingValuesline line { + fill: none; + stroke: black; + stroke-width: 1; + stroke-opacity: 1; + stroke-dasharray: 5, 5; +} + +.nvd3.nv-pie path { + stroke-opacity: 0; + transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-pie .nv-pie-title { + font-size: 24px; + fill: rgba(19, 196, 249, 0.59); +} + +.nvd3.nv-pie .nv-slice text { + stroke: #000; + stroke-width: 0; +} + +.nvd3.nv-pie path { + stroke: #fff; + stroke-width: 1px; + stroke-opacity: 1; +} + +.nvd3.nv-pie path { + fill-opacity: .7; +} + +.nvd3.nv-pie .hover path { + fill-opacity: 1; +} + +.nvd3.nv-pie .nv-label { + pointer-events: none; +} + +.nvd3.nv-pie .nv-label rect { + fill-opacity: 0; + stroke-opacity: 0; +} + +/* scatter */ +.nvd3 .nv-groups .nv-point.hover { + stroke-width: 20px; + stroke-opacity: .5; +} + +.nvd3 .nv-scatter .nv-point.hover { + fill-opacity: 1; +} + +.nv-noninteractive { + pointer-events: none; +} + +.nv-distx, .nv-disty { + pointer-events: none; +} + +/* sparkline */ +.nvd3.nv-sparkline path { + fill: none; +} + +.nvd3.nv-sparklineplus g.nv-hoverValue { + pointer-events: none; +} + +.nvd3.nv-sparklineplus .nv-hoverValue line { + stroke: #333; + stroke-width: 1.5px; +} + +.nvd3.nv-sparklineplus, +.nvd3.nv-sparklineplus g { + pointer-events: all; +} + +.nvd3 .nv-hoverArea { + fill-opacity: 0; + stroke-opacity: 0; +} + +.nvd3.nv-sparklineplus .nv-xValue, +.nvd3.nv-sparklineplus .nv-yValue { + stroke-width: 0; + font-size: .9em; + font-weight: normal; +} + +.nvd3.nv-sparklineplus .nv-yValue { + stroke: #f66; +} + +.nvd3.nv-sparklineplus .nv-maxValue { + stroke: #2ca02c; + fill: #2ca02c; +} + +.nvd3.nv-sparklineplus .nv-minValue { + stroke: #d62728; + fill: #d62728; +} + +.nvd3.nv-sparklineplus .nv-currentValue { + font-weight: bold; + font-size: 1.1em; +} +/* stacked area */ +.nvd3.nv-stackedarea path.nv-area { + fill-opacity: .7; + stroke-opacity: 0; + transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; +} + +.nvd3.nv-stackedarea path.nv-area.hover { + fill-opacity: .9; +} + + +.nvd3.nv-stackedarea .nv-groups .nv-point { + stroke-opacity: 0; + fill-opacity: 0; +} + +.nvtooltip { + position: absolute; + color: rgba(0,0,0,1.0); + background-color: #fff; + border: 1px solid rgb(0, 0, 0); + padding: 1px; + z-index: 10000; + display: block; + + font-family: Arial, sans-serif; + font-size: 13px; + text-align: left; + pointer-events: none; + + white-space: nowrap; + + -webkit-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; +} + +/*Give tooltips that old fade in transition by + putting a "with-transitions" class on the container div. +*/ +.nvtooltip.with-transitions, .with-transitions .nvtooltip { + transition: opacity 50ms linear; + + transition-delay: 200ms; +} + +.nvtooltip.x-nvtooltip, +.nvtooltip.y-nvtooltip { + padding: 8px; +} + +.nvtooltip h3 { + margin: 0; + padding: 4px 14px; + line-height: 18px; + font-weight: normal; + background-color: rgba(247,247,247,0.75); + color: rgba(0,0,0,1.0); + text-align: center; + + border-bottom: 1px solid #ebebeb; + + border-radius: 5px 5px 0 0; +} + +.nvtooltip p { + margin: 0; + padding: 5px 14px; + text-align: center; +} + +.nvtooltip span { + display: inline-block; + margin: 2px 0; +} + +.nvtooltip table { + margin: 6px; + border-spacing:0; + background-color:#FFF; +} + + +.nvtooltip table td { + padding: 2px 9px 2px 0; + vertical-align: middle; +} + +.nvtooltip table td.key { + font-weight: normal; +} + +.nvtooltip table td.key.total { + font-weight: bold; +} + +.nvtooltip table td.value { + text-align: right; + font-weight: bold; +} + +.nvtooltip table td.percent { + color: darkgray; +} + +.nvtooltip table tr.highlight td { + padding: 1px 9px 1px 0; + border-bottom-style: solid; + border-bottom-width: 1px; + border-top-style: solid; + border-top-width: 1px; +} + +.nvtooltip table td.legend-color-guide div { + width: 8px; + height: 8px; + vertical-align: middle; +} + +.nvtooltip table td.legend-color-guide div { + width: 12px; + height: 12px; + border: 1px solid #999; +} + +.nvtooltip .footer { + padding: 3px; + text-align: center; +} + +.nvtooltip-pending-removal { + pointer-events: none; + display: none; +} + + +/**** +Interactive Layer +*/ +.nvd3 .nv-interactiveGuideLine { + pointer-events:none; +} + +.nvd3 line.nv-guideline { + stroke: #ccc; +} diff --git a/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/tokenize2.css b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/tokenize2.css new file mode 100644 index 000000000..6cc09737c --- /dev/null +++ b/misc/theme-tukan/src/opnsense/www/themes/tukan/build/css/tokenize2.css @@ -0,0 +1,170 @@ +.tokenize > .tokens-container { + position: relative; + list-style: none; + padding: 0 0 5px 5px; + height: auto; + min-height: 34px; + cursor: text; + border-radius: 3px; + border: 1px solid #4d83a1; + background-color: #ffffff; +} + +.tokenize > .tokens-container.disabled { + background-color: #eee; + cursor: not-allowed; +} + +.tokenize.focus > .tokens-container { + outline: 0; + border-color:#00A7FF; + background-color:none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.tokenize > .tokens-container.input-sm { + padding: 0 0 4px 4px; + min-height: 30px; +} + +.tokenize > .tokens-container.input-lg { + padding: 0 0 9px 9px; + min-height: 46px; +} + +.tokenize > .tokens-container > .token { + padding: 0 1.2em 0 5px; + background-color: #ffe83e; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + border: 1px solid #303030; +} + +.tokenize > .tokens-container > .token, +.tokenize > .tokens-container > .placeholder, +.tokenize > .tokens-container > .token-search { + display: inline-block; + margin: 5px 5px 0 0; + position: relative; + vertical-align: middle; +} + +.tokenize.sortable > .tokens-container > .token { + cursor: move; +} + +.tokenize.single > .tokens-container > .token { + display: block; + border-color: #fff; + background-color: transparent; +} + +.tokenize.sortable > .tokens-container > .token.shadow { + border-color: #ccc; + background-color: #ccc; + filter: alpha(opacity=50); + opacity: .2; +} + +.tokenize > .tokens-container > .placeholder { + color:#c9c9c9; + padding: 0; +} +.tokenize > .tokens-container > .token-search { + color:#000; + padding: 0; +} +.tokenize > .tokens-container:hover { + border-color:#00A7FF; + background-color:none; +} + +.tokenize > .tokens-container > .token-search > input { + padding: 0; + margin: 0; + line-height: 1em; + background: transparent; + border:none; + outline: none; + width: 100%; +} + +.tokenize > .tokens-container > .token-search > input::-ms-clear { + display: none; +} + +.tokenize > .tokens-container.input-sm > .placeholder, +.tokenize > .tokens-container.input-sm > .token-search, +.tokenize > .tokens-container.input-sm > .token { + margin: 4px 4px 0 0; +} + +.tokenize > .tokens-container.input-lg > .placeholder, +.tokenize > .tokens-container.input-lg > .token-search, +.tokenize > .tokens-container.input-lg > .token { + margin: 9px 9px 0 0; +} + +.tokenize > .tokens-container > .token.pending-delete { + background-color: #5b72a4; + border-color: #425c96; + color: #fff +} + +.tokenize > .tokens-container > .token > .dismiss { + position: absolute; + right: 5px; + color: #a9b9d8; + text-decoration: none; + cursor: pointer; +} + +.tokenize > .tokens-container > .token > .dismiss:after { + content: "×"; + color: #000; +} + +.tokenize > .tokens-container > .token.pending-delete > .dismiss { + color: #fff; +} + +.tokenize-dropdown { + position: absolute; + display: none; +} + +.tokenize-dropdown > .dropdown-menu { + min-height: 10px; + width: 100%; + display: block; + margin: -1px 0 0 0; + visibility: visible; + opacity: 1; +} + +.tokenize-dropdown > .dropdown-menu li { + cursor: pointer; +} + +.tokenize-dropdown > .dropdown-menu li > a .tokenize-highlight { + font-weight: bold; +} + +.tokenize-dropdown > .dropdown-menu li.locked { + padding: 3px 20px; + color: #333; + white-space: nowrap; +} + +.tokenize-dropdown > .dropdown-menu li.locked, +.tokenize-dropdown > .dropdown-menu li > a { + text-overflow: ellipsis; + overflow-x: hidden; +} + +.tokenize-dropdown > .dropdown-menu li:not(.active) a:hover, +.tokenize-dropdown > .dropdown-menu li:not(.active) a:focus { + background-color: transparent; +}