$colors: ( orange: #EA7105, lightgrey: #F7F7F7, lightergrey: #FBFBFB, darkgrey: #3C3C3B, bordergrey: #E5E5E5, ); $zindex: ( header: 2, footer: 2, main: 1, sidebar: 3, ); @font-face { font-family: 'SourceSansProBold'; src: url('/themes/opnsense/build/fonts/SourceSansPro-Bold/SourceSansPro-Bold.woff') format('woff'), url('/themes/opnsense/build/fonts/SourceSansPro-Bold/SourceSansPro-Bold.ttf') format('truetype'); } @font-face { font-family: 'SourceSansProSemibold'; src: url('/themes/opnsense/build/fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.woff') format('woff'), url('/themes/opnsense/build/fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.ttf') format('truetype'); } @font-face { font-family: 'SourceSansProRegular'; src: url('/themes/opnsense/build/fonts/SourceSansPro-Regular/SourceSansPro-Regular.woff') format('woff'), url('/themes/opnsense/build/fonts/SourceSansPro-Regular/SourceSansPro-Regular.ttf') format('truetype'); } // Core variables and mixins @import "bootstrap/variables"; @import "bootstrap/mixins"; // Reset and dependencies @import "bootstrap/normalize"; @import "bootstrap/print"; @import "bootstrap/glyphicons"; // Core CSS @import "bootstrap/scaffolding"; @import "bootstrap/type"; @import "bootstrap/code"; @import "bootstrap/grid"; @import "bootstrap/tables"; @import "bootstrap/forms"; @import "bootstrap/buttons"; // Components @import "bootstrap/component-animations"; @import "bootstrap/dropdowns"; @import "bootstrap/button-groups"; @import "bootstrap/input-groups"; @import "bootstrap/navs"; @import "bootstrap/navbar"; @import "bootstrap/breadcrumbs"; @import "bootstrap/pagination"; @import "bootstrap/pager"; @import "bootstrap/labels"; @import "bootstrap/badges"; @import "bootstrap/jumbotron"; @import "bootstrap/thumbnails"; @import "bootstrap/alerts"; @import "bootstrap/progress-bars"; @import "bootstrap/media"; @import "bootstrap/list-group"; @import "bootstrap/panels"; @import "bootstrap/responsive-embed"; @import "bootstrap/wells"; @import "bootstrap/close"; // Components w/ JavaScript @import "bootstrap/modals"; @import "bootstrap/tooltip"; @import "bootstrap/popovers"; @import "bootstrap/carousel"; // Utility classes @import "bootstrap/utilities"; @import "bootstrap/responsive-utilities"; *{ -webkit-font-smoothing: antialiased; } html, body{ height: 100%; font-family: 'SourceSansProRegular'; } body{ min-width: 320px; } .page-head{ background: map-get($colors, darkgrey); top: 0; left: 0; position: fixed; width: 100%; z-index: map-get($zindex, header); } .page-content{ height: calc(100% - 52px); padding-top: 52px; position: relative; z-index: map-get($zindex, main); > .row{ height: 100%; } } .page-content-head{ background: map-get($colors, lightergrey); border-bottom: 1px solid rgba(#D9D9D9, .50); padding-bottom: 15px; padding-top: 20px; .navbar-nav{ width: 100%; } h1,h2,h3{ line-height: 1; margin: 0; } } .page-content-main{ background: map-get($colors, lightgrey); min-height: calc(100% - 64px); padding: 15px 0 (15px + 58px); } .page-side{ background: #FFF; border-right: 1px solid rgba(0,0,0,.15); height: 100% !important; height: calc(100% - 52px) !important; left: 0; overflow: auto; margin-top: 52px; position: fixed; top: 0; z-index: map-get($zindex, sidebar); @extend .hidden-xs; } .page-side-nav { &--active{ background: map-get($colors, lightgrey); border-left: 3px solid map-get($colors, orange); } } .page-foot{ background: map-get($colors, lightergrey); bottom: 0; border-top: 1px solid rgba(#D9D9D9, .50); font-size: 12px; padding: 20px 0; position: fixed; width: 100%; z-index: map-get($zindex, footer); } .content-box{ background: #FFF; border: 1px solid map-get($colors, bordergrey);; @extend .clearfix; &-head{ @extend .page-content-head; } &-main{ //background: map-get($colors, lightgrey); padding-bottom: 15px; padding-top: 15px; } } .tab-content{ border-top: 0px; margin-bottom: 15px; padding: 15px 0; > .tab-content{ margin-bottom: 0; padding: 0 15px; } .tab-content:last-child{ margin-bottom: 0; } } .page-content-main [class^="col-"] + [class^="col-"]{ padding-top: ($grid-gutter-width/2); } .brand-logo{ display: none; @media (min-width: $screen-sm-min) { display: inline-block; } } .brand-icon{ display: inline-block; @media (min-width: $screen-sm-min) { display: none; } } .col-sm-disable-spacer{ @media (min-width: $screen-sm-min) { padding-top: 0 !important; } } .col-md-disable-spacer{ @media (min-width: $screen-md-min) { padding-top: 0 !important; } } .col-lg-disable-spacer{ @media (min-width: $screen-lg-min) { padding-top: 0 !important; } } .page-login{ background: map-get($colors, lightgrey); .container{ min-height: 100%; margin-bottom: -60px; &:after{ height: 60px; } } } .login-foot{ background: #FFF; border-top: 1px solid map-get($colors, bordergrey); color:#9F9F9F; font-size: 12px; height: 60px; p{ padding-top: 21px; } } .login-modal{ &-container{ background: #FFF; border: 1px solid map-get($colors, bordergrey); max-width: 400px; margin: 100px auto 15px auto; } &-head{ background: map-get($colors, darkgrey); height: 75px; padding: 0 20px; } &-content{ padding: 40px 20px 30px 20px; } &-foot{ background: map-get($colors, lightgrey); border-top: 1px solid map-get($colors, bordergrey); height: 60px; padding: 20px 20px 0 20px; a{ color: #7D7D7D; text-decoration: none; &:hover{ color: darken(#7D7D7D, 10%); text-decoration: underline; } } } } .list-inline .btn-group-container{ @media (min-width:$screen-sm-min){ float:right; } } .btn.btn-fixed{ max-width: 174px; width: 100%; } .table-sort{ > tbody > tr > th{ border-top: 0; height: 50px; &:hover{ background: #F2F2F2; cursor: pointer; } } > tbody > tr > td, > tbody > tr > th{ vertical-align: middle; } &-icon{ font-size: 10px; } .btn-group-table{ padding-right: 15px; } } .progress-bar-placeholder{ font-size: 12px; position: absolute; text-align: center; width: 100%; z-index: 1; } /* BOOTSTRAP EDIT */ .list-group-item{ border-left: none; border-right: none; &.collapsed .caret{ border-bottom: 4px solid green; border-top: 0; } } #navigation.collapse.in{ display: block !important; } .list-group-submenu .list-group-item:last-child, .collapse .list-group-item:last-child { border-bottom: none; } .nav-tabs > li.active > a{ background: #FFF !important; } .nav-tabs > li > a{ border-radius: 0px; margin-right: 0px; } .nav-tabs.nav-justified{ border-right:1px solid map-get($colors, bordergrey); > li > a{ border-bottom:1px solid map-get($colors, bordergrey); border-top:1px solid map-get($colors, bordergrey); border-left:1px solid map-get($colors, bordergrey); border-radius: 0px; background: map-get($colors, lightgrey); color: map-get($colors, darkgrey); font-family: 'SourceSansProSemibold'; @media (min-width:$screen-sm-min){ border-bottom: 1px solid transparent; } } > li.active a{ @media (max-width:$screen-xs-max){ border-right: 0 !important; } } > li.active + li > a{ @media (min-width:$screen-sm-min){ border-left: 1px solid transparent; } } > li:last-child > a{ border-right:1px solid transparent !important; @media (max-width:$screen-xs-max){ margin-bottom: 0; } } } .btn .glyphicon { vertical-align: -1px; } .btn-default .glyphicon { color: #757575; } table{ width: 100%; } .table th, strong, b{ font-family: 'SourceSansProSemibold'; font-weight: normal; } .table > tbody > tr > td:last-child{ padding-right: 15px; } /* helpers */ .__nowrap{ white-space: nowrap; } .__nomb{ margin-bottom: 0; } .__mb{ margin-bottom: 15px; } .__mt{ margin-top: 15px; } .__ml{ margin-left: 15px; } .__mr{ margin-right: 15px; } .__iconspacer{ padding-right: 10px; } #mainmenu .glyphicon{ vertical-align: -2px; } .list-group-item{ overflow: hidden; text-overflow: ellipsis; + div.collapse{ margin-bottom: -1px; } + div > a{ padding-left: 44px; } &:before{ background: #EA7105; content: ""; height: 42px; min-height: 100%; left: 0; position: absolute; top: 0px; width: 0; -webkit-transition: width .2s; -moz-transition: width .2s; -o-transition: width .2s; transition: width .2s; } } .list-group-submenu a{ padding-left: 56px; } .active-menu-title, .active-menu a{ text-decoration: none; position: relative; background-color: #F5F5F5; &:before{ width: 3px; } &.active{ background-color: #E8E8E8; } } .active-menu a:before{ background: #ED9A50; } .alert.alert-danger{ color: #FFF !important; } .nav-tabs-justified>li>a, .nav-tabs.nav-justified>li>a{ border-radius: 0 !important; } .navbar-brand{ padding: 10px 20px; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-button { width: 8px; height:5px; } ::-webkit-scrollbar-track { background: #f7f7f7; box-shadow: 0px 0px 0px; border-radius:0; } ::-webkit-scrollbar-thumb { background: #e5e5e5; border: thin solid #e5e5e5; border-radius: 0px; } ::-webkit-scrollbar-thumb:hover { background:#e5e5e5; } .widgetdiv { padding-top:0px !important; padding-bottom:20px; }