html { overflow-y: scroll; height: 100%; } body { padding-bottom: 10px; } .panel-default > .panel-heading, .panel-footer, .jumbotron, pre, .input-group-addon { background-image: url('bg.png'); } .form-narrow { max-width: 320px; } .form-control:focus { z-index: 2; } .slx-default, .slx-notebox { color: #888; font-size: 90%; font-style: italic; } .slx-ga { min-width: 8em; text-align: left; } .slx-ga2 { min-width: 12em; text-align: left; } .slx-dialog { width: 100%; min-width: 600px; max-width: 820px; } .bootstrap-tagsinput { width: 100%; margin: 0px; border-radius: 0; height: 34px; } .slx-litehead { margin: 0px 10px 5px 10px; color: #aaa; text-transform: uppercase; font-weight: bold; } .red { color: #b00; } .orange { color: #b70; } .green { color: #0b0; } .gray { color: gray; } .monospace { font-family: monospace, monospace; } .slx-label { font-weight: bold; margin: auto; } .slx-table td { padding-right: 9px; padding-bottom: 2px; } .input-group { margin-bottom: 2px; } .slx-md-width { max-width: 600px; } .slx-storechart { max-width: 140px; margin: 5px; padding: 3px; float: left; background-color: #eee; } .slx-space { margin-top: 1em; margin-bottom: 1em; } .slx-smallspace { margin-top: 4px; margin-bottom: 4px; } .slx-rotation { animation-name: rotateThis; animation-duration: .75s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotateThis { from { transform: scale( 1 ) rotate( 0deg ); } to { transform: scale( 1 ) rotate( 360deg ); } } .slx-footer { color: #999; padding: 5px; } .slx-bold { font-weight: bold; } .slx-fade { opacity: 0.5; } .slx-pointer { cursor: pointer; } .slx-nopointer { cursor: default; } .slx-strike { text-decoration: line-through; } /* File upload */ .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; background: red; cursor: inherit; display: block; cursor: pointer; } input[readonly] { background-color: white !important; cursor: text !important; } .timebar { position: relative; background: #afc; border: 1px solid #0a2; border-radius: 3px; overflow: hidden; } .timebar div { position: absolute; top: 0px; overflow: hidden; } .slx-well { border: 1px solid #E3E3E3; border-top: none; box-shadow: rgba(0,0,0,0.047) 0px 1px 1px 0px inset; border-radius: 4px; border-top-left-radius: 0px; border-top-right-radius: 0px; margin: 0px; padding: 19px; } .slx-visible-rows > div.row { border-style: solid; border-color: #ddd; border-width: 1px 0px; } .slx-smallcol { width: 1px; overflow: visible; white-space: nowrap; } .slx-visible-rows > div.row + div.row { border-top: none; } .slx-visible-rows > div.row > div > * { margin: 3px; } .slx-textpreview, .slx-textpreview-200 { max-height: 60px; overflow-y: auto; overflow-x: hidden; } .slx-textpreview-200 { max-height: 200px; } .slx-decollapse { display: none; } .collapse + .slx-decollapse { display: table-row; } /* * Sidebar */ nav.sidebar.navbar { border-radius: 0px; } nav.sidebar, .main { -webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; } .sidebar-bg { -webkit-transition: width 200ms ease-out; -moz-transition: width 200ms ease-out; -o-transition: width 200ms ease-out; transition: width 200ms ease-out; } nav.sidebar li { -webkit-transition: width 10ms linear; -moz-transition: width 10ms linear; -o-transition: width 10ms linear; transition: width 10ms linear; } /* Add gap to nav and right windows.*/ .main { padding: 10px 10px 0 10px; margin-top: 0px; } .slx-topbar { position: absolute; top: 10px; padding: 0px; z-index: 100; } .slx-topbar div { margin-left: 270px; } .sidebar-bg { position: fixed; } .sidebar-visible-inline, .sidebar-visible-block { display: none; } /* .....NavBar: Fully showing nav bar..... */ @media (min-width: 1200px) { nav.navbar.sidebar { z-index: 200; } .navbar-right { float: left !important; margin-top: 30px; } .navbar-nav > li { width: 100%; } .slx-topbar { background:#F2DEDE; width:100%; } .main { float: right; width: 900px; width: calc(100% - 240px); /* needed for roomplanner */ margin-left: 240px; margin-top: 32px; min-width: 900px; position: absolute; } .navbar-inverse,.sidebar-bg { background-color:#373D47; border:none; } .sidebar-bg { height:5000px; width:240px; z-index:-10; } .dropdown-menu-autoexpand, .sidebar-visible-block { display: block; } .sidebar-visible-inline { display: inline; } .sidebar-hide, .dropdown-menu .divider { display: none; } nav .dropdown-toggle { background-color: transparent !important; color: #fff !important; padding-bottom: 0 !important; padding-left: 8px !important; font-size: 115%; } nav.sidebar .navbar-brand,nav.sidebar .navbar-header { margin-left:0; text-align:center; width:100%; } nav.sidebar a { padding-right:13px; } nav.sidebar .navbar-nav .dropdown-menu { -webkit-box-shadow:none; background-color:transparent; border:0; box-shadow:none; float:none; margin-top:0; position:static; width:auto; } nav.sidebar .navbar-collapse,nav.sidebar .container-fluid { padding:0; } .navbar-inverse .navbar-nav .dropdown-menu>li>a { color:#CCC; } .navbar-inverse .navbar-nav li { width: 100%; } .navbar-inverse .navbar-nav li > span, .navbar-inverse .navbar-nav li > form { color: #fff; font-weight: bold; margin: 2px 5px; text-align: center; } nav.sidebar { float: left; height: 100%; margin-bottom: 0; margin-left: 0; width: 240px; } nav.sidebar .navbar-nav .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .dropdown-menu>li>a:focus { background-color: #2C323D; box-shadow: 0px 0px 16px rgba(255,255,255,.1) inset; color:#DDD; } nav.sidebar .navbar-nav .dropdown-menu>li.active > a { background-color: #24272D; box-shadow: 3px 3px 3px rgba(0,0,0,.2) inset, -3px -3px 6px rgba(255,255,255,.07) inset; color:#DDD; } } @media (min-width: 1440px) { .main { min-width: 1150px; max-width: 1300px; } } html, .main { background: #fff; } section{ padding-left: 15px; } li.slx-submenu a { font-size: 80%; font-weight: bold; padding-left: 3em; } nav.navbar.sidebar { color: #eee; } .slx-smallsubmenu > li { display: inline-block; } .slx-smallsubmenu > li + li:before { padding: 0 3px; content: "\2022\00a0"; color: #ccc; } .slx-smallsubmenu a { color: #fff; } .red-bg, input[type="checkbox"]:checked { background:#f77; } /* this is based on https://github.com/flatlogic/awesome-bootstrap-checkbox and "fixes" the style of radio buttons and check boxes. it only applies if they're in a container that has the checkbox class */ .checkbox, .radio { padding-left: 20px; margin-top: 5px; margin-bottom: 2px; } .checkbox label, .radio label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; } .checkbox label::before, .radio label::before { top: 1px; content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .radio label::before { border-radius: 50%; } .checkbox label::after, .radio label::after { display: inline-block; position: absolute; content: " "; width: 16px; height: 16px; left: 0; top: 1px; margin-left: -20px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #555555; } .radio label::after { width: 11px; height: 11px; left: 3px; top: 4px; border-radius: 50%; color: inherit; background-color: #555555; transform: scale(0, 0); } .radio input[type="radio"]:checked + label::after { transform: scale(1, 1); } .checkbox input[type="checkbox"], .radio input[type="radio"] { opacity: 0; z-index: 1; width: 17px; height: 17px; } .checkbox input[type="checkbox"]:focus + label::before, .radio input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .checkbox input[type="checkbox"]:checked + label::after { font-family: "Glyphicons Halflings"; content: "\E013"; } .checkbox input[type="checkbox"]:disabled, .radio input[type="radio"]:disabled { cursor: not-allowed; } .checkbox input[type="checkbox"]:disabled + label, .radio input[type="radio"]:disabled + label { opacity: 0.65; } .checkbox input[type="checkbox"]:disabled + label::before, .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .radio.radio-inline { margin-top: 0; } .input-group-addon > .checkbox, .input-group-addon > .radio { margin: 0; line-height: normal; text-align: left; } .checkbox input[type="checkbox"] + label:empty, .radio input[type="radio"] + label:empty { padding: 0; } /* Hack to get ellipsis in containers without absolute width */ /* Use:
my text bla bla
*/ table.slx-ellipsis { width:100%; table-layout: fixed; margin: 0; border-collapse: collapse; } table.slx-ellipsis td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; } div.disabled, ul.nav > li.disabled, label.disabled { cursor: not-allowed; } ul.nav > li.disabled > a { pointer-events: none; } div.disabled input, div.disabled label, div.disabled .btn { pointer-events: none; } .input-group-addon > label { font-weight: normal; margin-bottom: inherit; } div.disabled-hack { cursor: not-allowed; margin: 0; padding: 0; display: inline-block; } label.disabled { color: #888; } /* Override for selectize.js which renders disabled inputs not like bootstrap */ .selectize-input.disabled, .selectize-input.disabled * { cursor: not-allowed !important; background-color: #eee !important; opacity: 1 !important; }