Add custom.css
This commit is contained in:
root
364
www/custom.css
Normal file
364
www/custom.css
Normal file
@@ -0,0 +1,364 @@
|
||||
:root {
|
||||
--color-primary: #145369;
|
||||
--color-primary-hover: #1b6d89;
|
||||
--color-primary-dark: #123d3f;
|
||||
--color-primary-darker: #185153;
|
||||
|
||||
--color-secondary: #71bdc1;
|
||||
--color-secondary-hover: #4eacb2;
|
||||
--color-secondary-dark: #267f82;
|
||||
|
||||
--color-navbar-bg: #e5e9e7;
|
||||
--color-navbar-active: #c2cbc7;
|
||||
--color-navbar-text: #333333;
|
||||
--color-navbar-brand: #000000;
|
||||
|
||||
--color-panel-heading-bg: #e5e9e7;
|
||||
--color-panel-heading-text: #4C5773;
|
||||
|
||||
--color-btn-modern-bg: #ffffff;
|
||||
--color-btn-modern-hover-bg: #92BFC0;
|
||||
--color-btn-modern-text: #000000;
|
||||
}
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a.text-primary:hover,
|
||||
a.text-primary:focus {
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
a.bg-primary:hover,
|
||||
a.bg-primary:focus {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.btn-primary:focus,
|
||||
.btn-primary.focus,
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
background-color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.btn-primary.disabled:hover,
|
||||
.btn-primary[disabled]:hover,
|
||||
fieldset[disabled] .btn-primary:hover,
|
||||
.btn-primary.disabled:focus,
|
||||
.btn-primary[disabled]:focus,
|
||||
fieldset[disabled] .btn-primary:focus,
|
||||
.btn-primary.disabled.focus,
|
||||
.btn-primary[disabled].focus,
|
||||
fieldset[disabled] .btn-primary.focus {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-primary .badge {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-primary .icon {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
html[theme="default"] .btn-primary:active {
|
||||
background-image: radial-gradient(circle, var(--color-primary-darker) 10%, var(--color-primary) 11%);
|
||||
}
|
||||
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-pills > li.active > a,
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: var(--color-navbar-bg);
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand {
|
||||
color: var(--color-navbar-brand);
|
||||
}
|
||||
|
||||
.navbar-brand #title,
|
||||
.navbar-brand .icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
color: var(--color-navbar-text);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus {
|
||||
background-color: var(--color-navbar-active);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .open > a,
|
||||
.navbar-inverse .navbar-nav > .open > a:hover,
|
||||
.navbar-inverse .navbar-nav > .open > a:focus {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: var(--color-secondary-dark);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
|
||||
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-link {
|
||||
color: var(--color-secondary-dark);
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-link {
|
||||
color: var(--color-secondary-dark);
|
||||
}
|
||||
|
||||
.navbar-inverse .close {
|
||||
color: var(--color-secondary-dark);
|
||||
}
|
||||
|
||||
.navbar-inverse .active .close,
|
||||
.navbar-inverse .active .close:hover,
|
||||
.navbar-inverse .active .close:focus {
|
||||
background-color: var(--color-navbar-active);
|
||||
}
|
||||
|
||||
|
||||
.pagination > li > a,
|
||||
.pagination > li > span {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > span,
|
||||
.pagination > .active > a:hover,
|
||||
.pagination > .active > span:hover,
|
||||
.pagination > .active > a:focus,
|
||||
.pagination > .active > span:focus {
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.label-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.label-primary[href]:hover,
|
||||
.label-primary[href]:focus {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.list-group-item.active > .badge,
|
||||
.nav-pills > .active > a > .badge {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
.list-group-item.active:focus {
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus,
|
||||
a.thumbnail.active {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.panel-default > .panel-heading {
|
||||
color: var(--color-panel-heading-text);
|
||||
background-color: var(--color-panel-heading-bg);
|
||||
}
|
||||
|
||||
.panel-default > .panel-heading .badge {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.panel-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.panel-primary > .panel-heading {
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.panel-primary > .panel-heading .badge {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
|
||||
border-bottom-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] textarea:focus,
|
||||
html[theme="default"] textarea.form-control:focus,
|
||||
html[theme="default"] input.form-control:focus,
|
||||
html[theme="default"] input[type=text]:focus,
|
||||
html[theme="default"] input[type=password]:focus,
|
||||
html[theme="default"] input[type=email]:focus,
|
||||
html[theme="default"] input[type=number]:focus,
|
||||
html[theme="default"] [type=text].form-control:focus,
|
||||
html[theme="default"] [type=password].form-control:focus,
|
||||
html[theme="default"] [type=email].form-control:focus,
|
||||
html[theme="default"] [type=tel].form-control:focus,
|
||||
html[theme="default"] [contenteditable].form-control:focus {
|
||||
-webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] select:focus,
|
||||
html[theme="default"] select.form-control:focus {
|
||||
-webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] input[type="radio"]:before,
|
||||
html[theme="default"] .radio input[type="radio"]:before,
|
||||
html[theme="default"] .radio-inline input[type="radio"]:before {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] input[type="radio"]:checked:after,
|
||||
html[theme="default"] .radio input[type="radio"]:checked:after,
|
||||
html[theme="default"] .radio-inline input[type="radio"]:checked:after {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] input[type="checkbox"]:focus:before,
|
||||
html[theme="default"] .checkbox input[type="checkbox"]:focus:before,
|
||||
html[theme="default"] .checkbox-inline input[type="checkbox"]:focus:before {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] input[type="checkbox"]:checked:before,
|
||||
html[theme="default"] .checkbox input[type="checkbox"]:checked:before,
|
||||
html[theme="default"] .checkbox-inline input[type="checkbox"]:checked:before,
|
||||
html[theme="default"] input[type="checkbox"]:indeterminate:before,
|
||||
html[theme="default"] .checkbox input[type="checkbox"]:indeterminate:before,
|
||||
html[theme="default"] .checkbox-inline input[type="checkbox"]:indeterminate:before {
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] .nav-tabs > li > a:hover,
|
||||
html[theme="default"] .nav-tabs > li > a:focus:hover {
|
||||
-webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] .nav-tabs > li.active > a,
|
||||
html[theme="default"] .nav-tabs > li.active > a:focus {
|
||||
-webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
box-shadow: inset 0 -2px 0 var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
html[theme="default"] .nav-tabs > li.active > a:hover,
|
||||
html[theme="default"] .nav-tabs > li.active > a:focus:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
.form-link.btn.btn-link > img.icon {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
.form-link.btn.btn-link svg {
|
||||
fill: initial !important;
|
||||
color: initial !important;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
|
||||
.btn-modern {
|
||||
background-color: var(--color-btn-modern-bg);
|
||||
color: var(--color-btn-modern-text);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-modern:hover {
|
||||
background-color: var(--color-btn-modern-hover-bg);
|
||||
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-modern:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user