shlink-web-client/src/index.scss
2021-02-21 21:05:30 +01:00

179 lines
2.9 KiB
SCSS

@import './utils/base';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tagsinput.scss';
@import './theme/theme';
* {
outline: none !important;
}
html,
body,
#root {
height: 100%;
background: var(--secondary-color);
color: var(--text-color);
}
@media (min-width: $smMin) {
#root {
transition: filter 300ms;
}
.modal-open #root {
filter: blur(1.5px);
}
}
.bg-main {
background-color: $mainColor !important;
}
.card-body,
.card-header,
.list-group-item {
background-color: transparent;
}
.card-footer {
background-color: var(--primary-color-alfa);
}
.card {
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
background-color: var(--primary-color);
}
.list-group {
background-color: var(--primary-color);
}
.modal-content,
.page-link,
.page-item.disabled .page-link,
.dropdown-menu {
background-color: var(--primary-color);
}
.modal-header,
.modal-footer,
.card-header,
.card-footer,
.table thead th,
.table th,
.table td,
.page-link,
.page-link:hover,
.page-item.disabled .page-link,
.dropdown-divider {
border-color: var(--border-color);
}
.page-link:hover {
background-color: var(--secondary-color);
}
.page-item.active .page-link {
background-color: var(--brand-color);
border-color: var(--brand-color);
}
.pagination .page-link {
cursor: pointer;
}
.container-xl {
@media (min-width: $xlgMin) {
max-width: 1320px;
}
@media (max-width: $smMax) {
padding-right: 0;
padding-left: 0;
}
}
.dropdown-item {
color: var(--text-color);
}
.dropdown-item:not(:disabled) {
cursor: pointer;
}
.dropdown-item:focus:not(:disabled),
.dropdown-item:hover:not(:disabled),
.dropdown-item.active:not(:disabled),
.dropdown-item:active:not(:disabled) {
background-color: var(--active-color) !important;
color: var(--text-color) !important;
}
.badge-main {
color: #ffffff;
background-color: var(--brand-color);
}
.table,
.table-hover tbody tr:hover {
color: var(--text-color);
}
.table-hover tbody tr:hover {
background-color: var(--secondary-color);
}
.form-control,
.form-control:focus {
background-color: var(--primary-color);
border-color: var(--input-border-color);
}
.form-control.disabled,
.form-control:disabled {
background-color: var(--input-disabled-color);
cursor: not-allowed;
}
.card .form-control:not(:disabled),
.card .form-control:not(:disabled):hover {
background-color: var(--input-color);
}
.navbar-brand {
@media (max-width: $smMax) {
margin: 0 auto !important;
}
}
.indivisible {
white-space: nowrap;
}
.pointer {
cursor: pointer;
}
.text-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.progress-bar {
background-color: $mainColor;
}
.btn-xs-block {
@media (max-width: $xsMax) {
width: 100%;
display: block;
}
}
.btn-md-block {
@media (max-width: $mdMax) {
width: 100%;
display: block;
}
}