mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
245 lines
4.2 KiB
SCSS
245 lines
4.2 KiB
SCSS
/* stylelint-disable no-descending-specificity */
|
|
|
|
@import './utils/base';
|
|
@import 'node_modules/bootstrap/scss/bootstrap.scss';
|
|
@import './common/react-tag-autocomplete.scss';
|
|
@import './utils/theme/theme';
|
|
@import './utils/mixins/text-ellipsis';
|
|
@import './utils/table/ResponsiveTable';
|
|
@import './utils/StickyCardPaginator';
|
|
|
|
* {
|
|
outline: none !important;
|
|
}
|
|
|
|
:root {
|
|
scroll-behavior: auto;
|
|
color-scheme: var(--color-scheme);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
background: var(--secondary-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
a,
|
|
.btn-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* stylelint-disable-next-line selector-max-pseudo-class */
|
|
a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):not(.dropdown-item):hover,
|
|
.btn-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.bg-main {
|
|
background-color: $mainColor !important;
|
|
}
|
|
|
|
.bg-warning {
|
|
color: $lightTextColor;
|
|
}
|
|
|
|
.card-body,
|
|
.card-header,
|
|
.list-group-item {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.card-footer {
|
|
background-color: var(--primary-color-alfa);
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0 .125rem .25rem rgb(0 0 0 / .075);
|
|
background-color: var(--primary-color);
|
|
border-color: var(--border-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,
|
|
.dropdown-menu,
|
|
.list-group-item,
|
|
.modal-content,
|
|
hr {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.table-bordered,
|
|
.table-bordered thead th,
|
|
.table-bordered thead td {
|
|
border-color: var(--table-border-color);
|
|
}
|
|
|
|
.page-link:hover,
|
|
.page-link:focus {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* Deprecated. Brought from bootstrap 4 */
|
|
.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary,
|
|
.btn-primary:hover,
|
|
.btn-primary:active,
|
|
.btn-primary.active,
|
|
.btn-outline-primary:hover,
|
|
.btn-outline-primary:active,
|
|
.btn-outline-primary.active, {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dropdown-item,
|
|
.dropdown-item-text {
|
|
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;
|
|
}
|
|
|
|
.dropdown-item--danger.dropdown-item--danger {
|
|
color: $dangerColor;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&.active {
|
|
color: $dangerColor !important;
|
|
}
|
|
}
|
|
|
|
.badge-main {
|
|
color: #ffffff;
|
|
background-color: var(--brand-color);
|
|
}
|
|
|
|
.close,
|
|
.close:hover,
|
|
.table,
|
|
.table-hover > tbody > tr:hover > *,
|
|
.table-hover > tbody > tr > * {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.btn-close {
|
|
filter: var(--btn-close-filter);
|
|
}
|
|
|
|
.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);
|
|
color: var(--input-text-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);
|
|
}
|
|
|
|
.table-active,
|
|
.table-active > th,
|
|
.table-active > td {
|
|
background-color: var(--table-highlight-color) !important;
|
|
}
|
|
|
|
.navbar-brand {
|
|
@media (max-width: $smMax) {
|
|
margin: 0 auto !important;
|
|
}
|
|
}
|
|
|
|
.indivisible {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.text-ellipsis {
|
|
@include text-ellipsis();
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|