Nemcio/Batflat
1
0
Fork 0
mirror of https://github.com/sruupl/batflat.git synced 2026-01-12 00:42:04 +01:00
Code Issues Packages Projects Releases Activity
Files
master
Batflat/themes/admin/css/style.css
Paweł Klockiewicz 1ebaccd4d4 Update default themes
2018-05-27 17:32:35 +02:00

812 lines
19 KiB
CSS
Raw Permalink Blame History

@charset "UTF-8";
@import url('//cdn.jsdelivr.net/animatecss/3.5.0/animate.min.css');
html {
height: 100%;
}
body {
padding-bottom: 30px;
position: relative;
min-height: 100%;
}
a, .btn {
transition: background 0.2s, color 0.2s;
}
a:hover,
a:focus {
text-decoration: none;
}
/* 1. MAIN WRAPPER
--------------------------------------------------------- */
#wrapper {
padding-left: 0;
transition: all 0.5s ease;
position: relative;
}
#wrapper.toggled {
padding-left: 250px;
}
/* 2. SIDEBAR
--------------------------------------------------------- */
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
overflow-x: hidden;
background: #222;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
.sidebar-brand {
position: absolute;
top: 0;
width: 250px;
text-align: center;
padding: 20px 0;
}
.sidebar-brand img {
width: auto;
height: 30px;
display: inline-block;
margin-right: 2px;
}
.sidebar-brand h2 {
display: inline-block;
margin: 0;
vertical-align: middle;
font-weight: 600;
font-size: 24px;
}
.sidebar-brand h2 span {
color: #fff;
}
.sidebar-nav {
position: absolute;
top: 75px;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav > li {
text-indent: 10px;
line-height: 42px;
}
.sidebar-nav > li.sortable-placeholder {
background: rgba(255,255,255,0.03);
border-top: 1px solid rgba(255,255,255,0.075);
border-bottom: 1px solid rgba(255,255,255,0.075);
padding: 21px 0;
}
.sidebar-nav > li a {
display: block;
text-decoration: none;
color: #757575;
font-weight: 600;
}
.sidebar-nav > li > a:hover,
.sidebar-nav > li.active > a {
text-decoration: none;
color: #fff;
background: #F8BE12;
}
.sidebar-nav > li > a:active,
.sidebar-nav > li > a:focus {
text-decoration: none;
}
.sidebar-nav > li > a i.fa {
padding-right: 10px;
font-size: 14px;
cursor: move;
}
.sidebar-nav > li > ul {
background: rgba(255,255,255,0.03);
list-style: none;
margin: 0;
padding: 0 0 0 24px;
border-left: 1px solid #222;
position: relative;
}
.sidebar-nav > li > ul:before {
content: "";
height: 100%;
width: 1px;
position: absolute;
background: rgba(255,255,255,0.075);
left: 24px;
top: 0;
}
.sidebar-nav > li > ul li {
line-height: 35px;
}
.sidebar-nav > li > ul li a {
font-weight: 400;
font-size: 90%;
padding: 0 8px;
position: relative;
}
.sidebar-nav > li > ul li a:hover {
color: #fff;
}
.sidebar-nav > li > ul li a:before {
content: "";
width: 8px;
height: 1px;
background: rgba(255,255,255,0.075);
position: absolute;
left: 1px;
top: 17px;
}
.sidebar-nav > li > ul li.active a {
color: #fff;
}
/* 3. NAVBAR
--------------------------------------------------------- */
#navbar-wrapper {
width: 100%;
position: absolute;
z-index: 2;
}
#wrapper.toggled #navbar-wrapper {
position: absolute;
margin-right: -250px;
}
#navbar-wrapper .navbar {
padding: 10px 15px;
border-width: 0 0 0 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
font-size: 24px;
margin-bottom: 0;
}
#navbar-wrapper .navbar .navbar-header {
float: left;
}
#navbar-wrapper .navbar .navbar-header .navbar-brand {
font-size: 24px;
}
#navbar-wrapper .navbar ul.navbar-nav {
float: right;
}
#navbar-wrapper .navbar ul.navbar-nav li {
float: left;
}
#navbar-wrapper .navbar ul.navbar-nav li:not(.hello) a {
color: #F8BE12;
}
#navbar-wrapper .navbar ul.navbar-nav li:not(.hello) a:hover {
color: #656565;
}
#navbar-wrapper .navbar ul.navbar-nav li.hello a {
pointer-events: none;
}
#navbar-wrapper .navbar ul.navbar-nav li.hello a span {
font-size: 70%;
position: relative;
bottom: 2px;
}
/* 4. CONTENT
--------------------------------------------------------- */
#content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
top: 100px;
}
#wrapper.toggled #content-wrapper {
position: absolute;
margin-right: -250px;
}
.content-title {
margin: 11px 0 30px 0;
}
h3.panel-title {
font-weight: 400;
}
h3.panel-title .btn {
color: #fff;
}
.panel-heading {
position: relative;
}
.panel-heading .nav-tabs {
position: absolute;
bottom: 0;
right: 13px;
border-bottom: 0;
}
.panel-heading .nav-tabs > li a {
padding: 5px 10px;
margin-left: 2px;
}
.panel-heading .nav-tabs > li.active a {
border-bottom: 1px solid #fff;
background-color: #fff;
color: #616262;
}
#notify {
display: none;
width: 100%;
position: absolute;
padding: 12px 30px;
color: #fff;
box-sizing: border-box;
margin: 0;
top: 75px;
}
#notify.alert-danger:before {
content: '\f071';
font-family: 'FontAwesome';
padding-right: 1em;
}
#notify.alert-success:before {
content: '\f00c';
font-family: 'FontAwesome';
padding-right: 1em;
}
#notify .close {
position: static;
}
/* 5. FOOTER
--------------------------------------------------------- */
footer {
position: absolute;
right: 10px;
bottom: 5px;
height: 20px;
width: calc(100% - 15px);
text-align: right;
font-size: 12px;
}
/* 6. LOGIN
--------------------------------------------------------- */
#login {
width: 90%;
max-width: 420px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
#login .panel {
border: 0;
box-shadow: none;
background: none;
}
#login .panel-heading {
background-color: #222;
color: #F8BE12;
text-align: center;
border: 0;
margin-top: -1px;
}
#login .panel-heading img {
height: 25px;
width: auto;
display: inline-block;
vertical-align: middle;
margin-right: 2px;
}
#login .panel-heading h2 {
font-weight: 600;
display: inline-block;
vertical-align: middle;
margin: 0;
font-size: 21px;
}
#login .panel-heading h2 span {
color: #FFF;
}
#login .panel-body {
background: #FFF;
}
#login .panel-body .remember-me {
margin-top: 8px;
font-weight: 400;
font-size: 14px;
}
#login #notify {
display: block;
position: static;
width: 100%;
display: block;
margin-top: 20px;
text-align: center;
}
#login .fa-lock {
padding: 0 1px 0 1px;
}
/* 7. CUSTOM CHECKBOXES & RADIO BUTTONS
--------------------------------------------------------- */
.toggle,
.toggleR {
position: relative;
background: #fff;
border: 1px solid #ccc;
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
padding: 2px;
margin-right: 5px;
}
.toggle.checked:after {
content: '\2713';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #F8BE12;
font-weight: bold;
}
.toggleR {
border-radius: 50%;
}
.toggleR.checked:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
background-color: #F8BE12;
border-radius: 50%;
}
.toggle.disabled,
.toggleR.disabled {
opacity: .7;
}
.checkbox .toggle,
.checkbox-inline .toggle,
.radio .toggleR,
.radio-inline .toggleR {
margin-left: -20px;
}
/* 8. CUSTOM SELECTORS
--------------------------------------------------------- */
#selectator_dimmer {
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: 100;
}
.selectator_element {
width: 100%;
border: 1px solid #ccc;
box-sizing: border-box;
background-color: #fff;
display: inline-block;
text-decoration: none;
vertical-align: middle;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.selectator_element * {
box-sizing: border-box;
text-decoration: none;
}
.selectator_element img {
display: block;
}
.selectator_element.disabled {
background-color: #f5f5f5;
cursor: not-allowed;
}
.selectator_element.disabled * {
cursor: not-allowed !important;
}
.selectator_element.multiple {
padding: 4px 20px 4px 12px !important;
}
.selectator_element.single {
height: 39px;
padding: 9px 12px !important;
}
.selectator_element.focused {
border: 1px solid #ffce54;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 206, 84, 0.6);
}
.selectator_element:after {
position: absolute;
content: '\25BC';
font-size: 70%;
transform: scaleY(0.75);
right: 4px;
color: #434a54;
top: 50%;
line-height: 0;
}
.selectator_element.loading:before {
border: 3px solid rgba(0, 0, 0, 0.1);
border-top: 3px solid rgba(0, 0, 0, 0.5);
border-radius: 50%;
width: 14px;
line-height: 0;
height: 14px;
margin-top: -10px;
animation: selectator_spinner 500ms linear infinite;
content: '';
position: absolute;
right: 20px;
top: 50%;
}
.selectator_selected_items .selectator_placeholder {
font-size: 80%;
color: rgba(0, 0, 0, 0.5);
}
.single .selectator_selected_items {
display: block;
}
.multiple .selectator_selected_items {
display: inline;
}
.selectator_selected_items .selectator_selected_item {
color: rgba(0, 0, 0, 0.75);
position: relative;
vertical-align: top;
}
.single .selectator_selected_items .selectator_selected_item {
background-color: transparent;
display: block;
margin: 0;
padding: 0;
font-size: inherit;
text-decoration: none;
}
.multiple .selectator_selected_items .selectator_selected_item {
background-color: #f5f5f5;
display: inline-block;
margin: 2.5px 5px 2.5px 0;
padding: 0 20px 0 5px;
font-size: 80%;
border: 1px solid #ccc;
line-height: 22px;
}
.selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
float: left;
}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
float: left;
width: 30px;
}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_left img {
height: 22px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
float: left;
width: 22px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_left img {
height: 18px;
}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_title {
height: auto;
line-height: 1.3;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_title {
float: left;
font-weight: 700;
}
.selectator_selected_items .selectator_selected_item .selectator_selected_item_subtitle {
display: none;
}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_right {
float: right;
background-color: #ac6;
color: #fff;
font-weight: bold;
font-size: 80%;
text-align: center;
line-height: 16px;
border-radius: 12px;
padding: 2px 12px;
margin-right: 40px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_right {
display: none;
}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove {
display: block;
position: absolute;
right: 16px;
cursor: pointer;
font-size: 75%;
font-weight: bold;
color: rgba(0, 0, 0, 0.75);
padding: 2px;
line-height: 0;
top: 50%;
transform: scaleX(1.2);
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove {
display: inline-block;
font-weight: bold;
color: rgba(0, 0, 0, 0.75);
margin: 0 0 0 5px;
cursor: pointer;
font-size: 100%;
font-weight: 700;
line-height: 22px;
vertical-align: top;
border-radius: 0 2px 2px 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: 0 5px 0 5px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.selectator_input, .selectator_textlength {
border: 0;
display: inline-block;
margin: 0;
background-color: transparent;
font-size: 13px;
outline: none;
}
.multiple .selectator_input, .multiple .selectator_textlength {
padding: 3px 0 0 0;
margin: 3px 0 2px 5px;
}
.single .selectator_input {
border: 1px solid #ccc;
position: absolute;
bottom: -41px;
left: -1px;
z-index: 101;
padding: 9px 12px;
width: 100%;
width: calc(100% + 2px);
border-bottom: 0;
background-color: #f5f5f5;
color: #333;
font-size: inherit;
}
.single.options-hidden .selectator_input {
opacity: 0;
position: absolute;
left: -10000px;
}
.single.options-visible .selectator_input {
opacity: 1;
}
.disable_search .selectator_input {
opacity: 0;
padding: 0 1px 1px 0 !important;
}
.selectator_options {
margin: 0;
padding: 0;
border: 1px solid #ccc;
position: absolute;
box-sizing: border-box;
z-index: 101;
background-color: #fff;
overflow-y: auto;
list-style: none;
left: -1px;
right: -1px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.disable_search .selectator_options {
border-top: 1px solid #ccc;
}
.single.disable_search .selectator_options {
padding-top: 0;
}
.options-hidden .selectator_options {
display: none;
}
.selectator_options .selectator_group {
padding: 5px;
font-weight: bold;
}
.selectator_options .selectator_option {
padding: 5px;
cursor: pointer;
color: #434a54;
}
.selectator_options .selectator_option.selectator_group_option {
padding-left: 20px;
}
.selectator_options .selectator_option:before, .selectator_options .selectator_option:after {
content: "";
display: table;
}
.selectator_options .selectator_option:after {
clear: both;
}
.selectator_options .selectator_option .selectator_option_left {
float: left;
margin: 0 8px 0 12px;
}
.selectator_options .selectator_option .selectator_option_left img {
height: 30px;
border-radius: 2px;
}
.selectator_options .selectator_option .selectator_option_title {
margin-left: 12px;
}
.selectator_options .selectator_option .selectator_option_subtitle {
font-size: 70%;
color: rgba(0, 0, 0, 0.5);
margin-top: -4px;
margin-bottom: -1px;
margin-left: 12px;
}
.selectator_options .selectator_option .selectator_option_right {
float: right;
color: #434a54;
font-weight: bold;
font-size: 80%;
text-align: center;
line-height: 16px;
border-radius: 12px;
padding: 2px 12px;
margin-top: 4px;
}
.selectator_options .selectator_option.active {
background-color: #f5f5f5;
}
.selectator_options .selectator_option.active .selectator_option_subtitle {
color: rgba(255, 255, 255, 0.6);
}
@keyframes selectator_spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 9. OTHER STUFF
--------------------------------------------------------- */
[class*="bg-"] {
padding: 15px;
}
.well .label {
font-size: 80%;
padding: .4em .9em .4em;
}
.tooltip-inner {
white-space: pre;
}
.table>tbody>tr>td {
vertical-align: middle;
}
.table a:not(.btn),
table a:not(.btn) {
text-decoration: none;
}
.pagination {
margin: 21px 0 0 0;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: #f5f5f5;
}
select[multiple].form-control {
height: 39px;
}
.text-muted {
color:#bababa;
}
.modal-title {
font-weight: 400;
}
/* 10. HELPERS
--------------------------------------------------------- */
.no-margin {
margin: 0;
}
.no-top-margin {
margin-top: 0;
}
.no-bottom-margin {
margin-bottom: 0;
}
.margin-tiny {
margin-bottom: 1rem;
}
.margin-small {
margin-bottom: 2rem;
}
.margin-medium {
margin-bottom: 4rem;
}
.margin-large {
margin-bottom: 6rem;
}
/* 11. MEDIA QUERIES
--------------------------------------------------------- */
.panel-heading .tinynav {
position: absolute;
top: 7px;
right: 15px;
display: block
}
.panel-heading .nav-tabs {
display: none
}
@media(min-width: 768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#navbar-wrapper {
position: relative;
}
#content-wrapper {
position: relative;
top: 0;
}
#wrapper.toggled #navbar-wrapper,
#wrapper.toggled #content-wrapper {
position: relative;
margin-right: 0;
}
#notify {
position: relative;
top: 0;
}
.panel-heading .tinynav {
display: none;
}
.panel-heading .nav-tabs {
display: block;
}
}
Reference in New Issue View Git Blame Copy Permalink