/* IMPORTS */ @font-face { font-family: DINPro; font-weight: normal; src: url(../../res/fonts/DINPro-Light.ttf); } @font-face { font-family: DINPro; font-weight: bold; src: url(../../res/fonts/DINPro-Bold.ttf); } /* GENERAL SETUP */ * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { font-family: DINPro; overflow: hidden; } /* UTILITY CLASSES */ .smooth { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } [contenteditable=true]:empty:before { content: attr(placeholder); display: block; /* For Firefox */ } /* LOGIN PANEL */ .loginPanel { width: 100%; height: 100%; top: 0%; left: 0%; display: flex; align-items: center; justify-content: center; position: fixed; z-index: 20; //background: rgba(30,30,30,.9); background: rgba(31, 45, 84, 1); } .loginPanel>div { box-shadow: 0 0 2em #000; } .loginPanel .login-logo { width: 70%; } /* MAIN FRAMEWORK */ .wrapper-main { height: 100%; width: 100%; display: grid; grid-template-columns: 280px auto; } .wrapper-sidebar { z-index: 10; grid-column: 1; height: 100%; overflow-y: auto; position: fixed; background: #222; color: #fff; box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); } .wrapper-sidebar .navbar li { float: none; display: block; } .wrapper-sidebar ul li a { color: inherit; } .wrapper-sidebar ul li a:hover, .wrapper-sidebar ul li a:active, .wrapper-sidebar ul li a:focus { color: #000; } .wrapper-sidebar>div { padding: 1em; } .wrapper-sidebar .sidebar-logo { width: 100%; } .wrapper-content { height: 100vh; grid-column: 2; background: #eee; /*width: 100%;*/ overflow: auto; } /* MAIN NAVBAR */ .navbar-main .container-fluid>ul>li { float: left; } /* LOG BAR */ .alertCont { position: fixed; z-index: 10000; left: 50%; top: 10px; transform: translateX(-50%); } /* ANNOUNCE TOOL */ .selected{ background: #98FB98; } .featured{ background: salmon; } .selectedcolor{ background: #98FB98; } .featuredcolor{ background: salmon; }