shlink-web-client/src/index.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;
  }
}