Files
purple-explorer/public/css/style.scss
T
2020-12-20 18:21:51 -07:00

656 lines
19 KiB
SCSS

@use 'theme-selector' as theme-selector;
@use './themes/Cerulean/variables' as Cerulean;
@use './themes/Cosmo/variables' as Cosmo;
@use './themes/Cyborg/variables' as Cyborg;
@use './themes/Darkly/variables' as Darkly;
@use './themes/Flatly/variables' as Flatly;
@use './themes/Journal/variables' as Journal;
@use './themes/Litera/variables' as Litera;
@use './themes/Lumen/variables' as Lumen;
@use './themes/Lux/variables' as Lux;
@use './themes/Materia/variables' as Materia;
@use './themes/Minty/variables' as Minty;
@use './themes/Pulse/variables' as Pulse;
@use './themes/Sandstone/variables' as Sandstone;
@use './themes/Simplex/variables' as Simplex;
@use './themes/Sketchy/variables' as Sketchy;
@use './themes/Slate/variables' as Slate;
@use './themes/Solar/variables' as Solar;
@use './themes/Spacelab/variables' as Spacelab;
@use './themes/Superhero/variables' as Superhero;
@use './themes/United/variables' as United;
@use './themes/Yeti/variables' as Yeti;
@mixin table-border-color() {
@if theme-selector.$theme-name == "Cerulean" {
border-color: Cerulean.$gray-300;
} @else if theme-selector.$theme-name == "Cosmo" {
border-color: Cosmo.$gray-300;
} @else if theme-selector.$theme-name == "Cyborg" {
border-color: Cyborg.$table-border-color;
} @else if theme-selector.$theme-name == "Darkly" {
border-color: Darkly.$table-border-color;
} @else if theme-selector.$theme-name == "Flatly" {
border-color: Flatly.$gray-300;
} @else if theme-selector.$theme-name == "Journal" {
border-color: Journal.$gray-300;
} @else if theme-selector.$theme-name == "Litera" {
border-color: Litera.$table-border-color;
} @else if theme-selector.$theme-name == "Lumen" {
border-color: Lumen.$gray-300;
} @else if theme-selector.$theme-name == "Lux" {
border-color: Lux.$table-border-color;
} @else if theme-selector.$theme-name == "Materia" {
border-color: Materia.$gray-300;
} @else if theme-selector.$theme-name == "Minty" {
border-color: Minty.$table-border-color;
} @else if theme-selector.$theme-name == "Pulse" {
border-color: Pulse.$table-border-color;
} @else if theme-selector.$theme-name == "Sandstone" {
border-color: Sandstone.$gray-300;
} @else if theme-selector.$theme-name == "Simplex" {
border-color: Simplex.$gray-300;
} @else if theme-selector.$theme-name == "Sketchy" {
border-color: Sketchy.$table-border-color;
} @else if theme-selector.$theme-name == "Slate" {
border-color: Slate.$table-border-color;
} @else if theme-selector.$theme-name == "Solar" {
border-color: Solar.$table-border-color;
} @else if theme-selector.$theme-name == "Spacelab" {
border-color: Spacelab.$gray-300;
} @else if theme-selector.$theme-name == "Superhero" {
border-color: Superhero.$table-border-color;
} @else if theme-selector.$theme-name == "United" {
border-color: United.$gray-300;
} @else if theme-selector.$theme-name == "Yeti" {
border-color: Yeti.$gray-300;
} @else {
border-color: #000000;
}
}
@mixin thead-dark-border-color() {
@if theme-selector.$theme-name == "Cerulean" {
border-color: #454d55; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Cosmo" {
border-color: #494d50; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Cyborg" {
border-color: #757575; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Darkly" {
border-color: #434343; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Flatly" {
border-color: #454d55; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Journal" {
border-color: #464646; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Litera" {
border-color: #454d55; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Lumen" {
border-color: #464646; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Lux" {
border-color: #454d55; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Materia" {
border-color: #353535; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Minty" {
border-color: Minty.$table-border-color;
} @else if theme-selector.$theme-name == "Pulse" {
border-color: Pulse.$table-border-color;
} @else if theme-selector.$theme-name == "Sandstone" {
border-color: #52534c; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Simplex" {
border-color: #494d50; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Sketchy" {
border-color: #464646; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Slate" {
border-color: Slate.$table-border-color;
} @else if theme-selector.$theme-name == "Solar" {
border-color: #a5adb6; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Spacelab" {
border-color: #464646; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Superhero" {
border-color: Superhero.$gray-200;
} @else if theme-selector.$theme-name == "United" {
border-color: #642246; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "Yeti" {
border-color: #464646; /* Hardcoded value not present in _variables.scss */
} @else {
border-color: #000000;
}
}
@mixin thead-light-border-color() {
@if theme-selector.$theme-name == "Cerulean" {
border-color: Cerulean.$gray-300;
} @else if theme-selector.$theme-name == "Cosmo" {
border-color: Cosmo.$gray-300;
} @else if theme-selector.$theme-name == "Cyborg" {
border-color: Cyborg.$gray-700;
} @else if theme-selector.$theme-name == "Darkly" {
border-color: Darkly.$gray-700;
} @else if theme-selector.$theme-name == "Flatly" {
border-color: Flatly.$gray-300;
} @else if theme-selector.$theme-name == "Journal" {
border-color: Journal.$gray-300;
} @else if theme-selector.$theme-name == "Litera" {
border-color: Litera.$table-border-color;
} @else if theme-selector.$theme-name == "Lumen" {
border-color: Lumen.$gray-300;
} @else if theme-selector.$theme-name == "Lux" {
border-color: Lux.$table-border-color;
} @else if theme-selector.$theme-name == "Materia" {
border-color: Materia.$gray-300;
} @else if theme-selector.$theme-name == "Minty" {
border-color: Minty.$table-border-color;
} @else if theme-selector.$theme-name == "Pulse" {
border-color: Pulse.$table-border-color;
} @else if theme-selector.$theme-name == "Sandstone" {
border-color: Sandstone.$gray-300;
} @else if theme-selector.$theme-name == "Simplex" {
border-color: Simplex.$gray-300;
} @else if theme-selector.$theme-name == "Sketchy" {
border-color: Sketchy.$gray-800;
} @else if theme-selector.$theme-name == "Slate" {
border-color: Slate.$table-border-color;
} @else if theme-selector.$theme-name == "Solar" {
border-color: Solar.$gray-800;
} @else if theme-selector.$theme-name == "Spacelab" {
border-color: Spacelab.$gray-300;
} @else if theme-selector.$theme-name == "Superhero" {
border-color: Superhero.$table-border-color;
} @else if theme-selector.$theme-name == "United" {
border-color: United.$gray-300;
} @else if theme-selector.$theme-name == "Yeti" {
border-color: Yeti.$gray-300;
} @else {
border-color: #dee2e6;
}
}
@mixin thead-dark() {
@if theme-selector.$theme-name == "Cerulean" {
color: Cerulean.$white;
background-color: Cerulean.$gray-800;
} @else if theme-selector.$theme-name == "Cosmo" {
color: Cosmo.$white;
background-color: Cosmo.$gray-800;
} @else if theme-selector.$theme-name == "Cyborg" {
color: Cyborg.$white;
background-color: Cyborg.$gray-500;
} @else if theme-selector.$theme-name == "Darkly" {
color: Darkly.$white;
background-color: Darkly.$gray-800;
} @else if theme-selector.$theme-name == "Flatly" {
color: Flatly.$white;
background-color: Flatly.$gray-800;
} @else if theme-selector.$theme-name == "Journal" {
color: Journal.$white;
background-color: Journal.$gray-800;
} @else if theme-selector.$theme-name == "Litera" {
color: Litera.$white;
background-color: Litera.$gray-800;
} @else if theme-selector.$theme-name == "Lumen" {
color: Lumen.$white;
background-color: Lumen.$gray-800;
} @else if theme-selector.$theme-name == "Lux" {
color: Lux.$white;
background-color: Lux.$gray-800;
} @else if theme-selector.$theme-name == "Materia" {
color: Materia.$white;
background-color: Materia.$gray-800;
} @else if theme-selector.$theme-name == "Minty" {
color: Minty.$white;
background-color: Minty.$primary;
} @else if theme-selector.$theme-name == "Pulse" {
color: Pulse.$white;
background-color: Pulse.$secondary;
} @else if theme-selector.$theme-name == "Sandstone" {
color: Sandstone.$white;
background-color: Sandstone.$gray-800;
} @else if theme-selector.$theme-name == "Simplex" {
color: Simplex.$white;
background-color: Simplex.$gray-800;
} @else if theme-selector.$theme-name == "Sketchy" {
color: Sketchy.$white;
background-color: Sketchy.$gray-800;
} @else if theme-selector.$theme-name == "Slate" {
color: Slate.$white;
background-color: Slate.$gray-800;
} @else if theme-selector.$theme-name == "Solar" {
color: Solar.$white;
background-color: Solar.$gray-500;
} @else if theme-selector.$theme-name == "Spacelab" {
color: Spacelab.$white;
background-color: Spacelab.$gray-800;
} @else if theme-selector.$theme-name == "Superhero" {
color: Superhero.$white;
background-color: #abb6c2; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "United" {
color: United.$white;
background-color: United.$purple;
} @else if theme-selector.$theme-name == "Yeti" {
color: Yeti.$white;
background-color: Yeti.$gray-800;
} @else {
color: #FFFFFF;
background-color: #343a40;
}
@include thead-dark-border-color;
}
@mixin thead-light() {
@if theme-selector.$theme-name == "Cerulean" {
color: Cerulean.$gray-700;
background-color: Cerulean.$gray-200;
} @else if theme-selector.$theme-name == "Cosmo" {
color: Cosmo.$gray-700;
background-color: Cosmo.$gray-200;
} @else if theme-selector.$theme-name == "Cyborg" {
color: Cyborg.$gray-700;
background-color: Cyborg.$gray-200;
} @else if theme-selector.$theme-name == "Darkly" {
color: Darkly.$gray-700;
background-color: Darkly.$gray-200;
} @else if theme-selector.$theme-name == "Flatly" {
color: Flatly.$gray-700;
background-color: Flatly.$gray-200;
} @else if theme-selector.$theme-name == "Journal" {
color: Journal.$gray-700;
background-color: Journal.$gray-200;
} @else if theme-selector.$theme-name == "Litera" {
color: Litera.$gray-700;
background-color: Litera.$gray-200;
} @else if theme-selector.$theme-name == "Lumen" {
color: Lumen.$gray-700;
background-color: Lumen.$gray-200;
} @else if theme-selector.$theme-name == "Lux" {
color: Lux.$gray-700;
background-color: Lux.$gray-200;
} @else if theme-selector.$theme-name == "Materia" {
color: Materia.$gray-700;
background-color: Materia.$gray-200;
} @else if theme-selector.$theme-name == "Minty" {
color: Minty.$gray-700;
background-color: Minty.$gray-200;
} @else if theme-selector.$theme-name == "Pulse" {
color: Pulse.$gray-700;
background-color: Pulse.$gray-200;
} @else if theme-selector.$theme-name == "Sandstone" {
color: Sandstone.$gray-700;
background-color: Sandstone.$gray-200;
} @else if theme-selector.$theme-name == "Simplex" {
color: Simplex.$gray-700;
background-color: Simplex.$gray-200;
} @else if theme-selector.$theme-name == "Sketchy" {
color: Sketchy.$gray-700;
background-color: Sketchy.$gray-200;
} @else if theme-selector.$theme-name == "Slate" {
color: Slate.$gray-700;
background-color: Slate.$gray-200;
} @else if theme-selector.$theme-name == "Solar" {
color: Solar.$gray-700;
background-color: Solar.$gray-200;
} @else if theme-selector.$theme-name == "Spacelab" {
color: Spacelab.$gray-700;
background-color: Spacelab.$gray-200;
} @else if theme-selector.$theme-name == "Superhero" {
color: Superhero.$gray-700;
background-color: #abb6c2; /* Hardcoded value not present in _variables.scss */
} @else if theme-selector.$theme-name == "United" {
color: United.$gray-700;
background-color: United.$gray-200;
} @else if theme-selector.$theme-name == "Yeti" {
color: Yeti.$gray-700;
background-color: Yeti.$gray-200;
} @else {
color: #52575c;
background-color: #e9ecef;
}
@include thead-light-border-color;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
p {
margin-top: 0.4rem;
margin-bottom: 0.4rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.2rem;
margin-top: 0.5rem;
}
.footer {
p {
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
.nav-link {
padding: 0.1rem 0.1rem;
}
label {
margin-bottom: 0.1rem;
}
.poweredby {
margin-right: 0.2rem;
font-size: 80%;
}
.social-link {
margin-right: 0.2rem;
font-size: 100%;
img {
width: 40px;
margin: 5px 5px;
}
}
}
.footer-logo {
height: 40px;
position: absolute;
bottom: 0px;
}
.navbar {
padding: 0.2rem 0.4rem;
}
.nav-tabs {
border-width: 1px;
> .nav-item > .nav-link {
border-width: 1px;
}
}
#index-search {
width: 80%;
}
.block-last {
margin: 0;
margin-right: 10px;
}
.block-next {
margin: 0;
margin-left: 10px;
}
table.table > thead > tr > th {
border-top: 0;
border-bottom: 0;
}
table {
width: 100% !important;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
@include table-border-color;
a:not(.btn), &.table a:not(.btn) {
text-decoration: none;
}
&.table-paging {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
&.order-table {
margin-top: 0 !important;
border-top: 0;
border-right: 0;
> thead > tr {
> th {
border-bottom: 1px solid #000000;
@include table-border-color;
}
> th:last-child {
border-left: 1px solid #000000;
@include table-border-color;
}
> th:nth-child(2) {
border-right: 0;
}
}
> thead.thead-dark > tr > th:last-child {
@include thead-dark-border-color;
}
> thead.thead-light > tr > th:last-child {
@include thead-light-border-color;
}
> tbody > tr {
> td:last-child {
border-left: 1px solid #000000;
@include table-border-color;
}
> td:nth-child(2) {
border-right: 0;
}
}
}
&.history-table {
border-left: 0;
border-right: 0;
}
&.table-bordered:not(.table-paging) th, &.table-bordered:not(.table-paging) td {
border-left-width: 0;
}
&.table-bordered:not(.table-paging):not(.right-border-0) th:last-child, &.table-bordered:not(.table-paging):not(.right-border-0) td:last-child {
border-right-width: 0;
}
&.table-bordered.right-border-0 th:last-child, &.table-bordered.right-border-0 td:last-child {
border-right-width: 1px;
}
}
.dataTables_info, .dataTables_length {
padding-left: 10px;
}
.dataTables_info {
padding-top: 15px !important;
}
.dataTables_length {
padding-top: 10px;
}
.dataTables_paginate {
padding-right: 5px;
}
.dataTables_scrollHeadInner {
padding-right: 16px !important;
border-right: 1px solid #000000;
@include table-border-color;
}
.card-default.thead-dark .dataTables_scrollHeadInner {
@include thead-dark;
}
.card-default.thead-light .dataTables_scrollHeadInner {
@include thead-light;
}
.pagination {
margin-top: 6px !important;
justify-content: flex-start;
display: inline-block;
> .paginate_button > a, > .paginate_button.disabled > a {
border: 1px solid black;
}
> li {
display: inline;
> a {
float: left;
}
}
}
.table > tbody > tr > td.addr-summary {
line-height: 7.7;
font-size: 1.3em;
font-weight: 800;
text-align: center;
}
.dataTables_wrapper {
border-top: 1px solid #000000;
@include table-border-color;
> .row:first-child {
margin-right: 0;
> div:first-child > .dataTables_length {
border-left: 1px solid #000000;
@include table-border-color;
}
> div:last-child {
border-right: 1px solid #000000;
@include table-border-color;
}
}
> .row:last-child {
margin-left: 0;
margin-right: 0;
border: 1px solid #000000;
border-top: 0;
@include table-border-color;
> div:first-child {
padding-left: 0;
}
> div:last-child {
padding-right: 0;
}
}
}
tr {
width: 100%;
}
@media(max-width:575px) {
.dataTables_paginate {
font-size: 80%;
}
#marketChart {
display: none;
}
table.table-paging:not(.mobile-border-right), table.summary-table:not(.mobile-border-right) {
border-right-width: 0;
}
}
@media(max-width:992px) {
.navbar .nav-link {
padding-left: 10px;
}
}
.tab-pane .dataTables_wrapper, .tab-pane > .card-default > table, .wrapper-border-0 .dataTables_wrapper {
border-top: 0;
}
.tab-pane {
margin-top: 5px;
> .card {
border-radius: 0;
}
}
.summary-table {
margin: 0px !important;
> tbody > tr > td {
border-width: 1px;
}
}
.table-bordered {
border: 1px solid #000000;
@include table-border-color;
> thead > tr > th, > tbody > tr > td {
border-width: 1px;
border-bottom-width: 0;
}
}
.margin-left-5 {
margin-left: 5px;
}
#lblConnections {
margin-left: 10px;
}
.header-panel span {
margin: 0 5px 0 5px;
top: 0;
}
.badge {
a:link, a:visited, a:hover, a:active {
color: #ffffff;
}
}
#body-container {
padding: 0 40px;
}
@media(max-width:767px) {
#body-container {
padding-left:0;
padding-right:0;
}
.dataTables_wrapper {
> .row:first-child > div:first-child {
border-right: 1px solid #000000;
@include table-border-color;
}
}
}
.logo-main {
padding: 0 15px;
}
.decimal {
font-size: 0.7em;
}
.cardSpacer {
margin-bottom: 10px;
}
.breakWord {
word-break: break-word;
}
.entryField {
max-width: 600px;
}
.container {
padding-left: 0;
padding-right: 0;
}
.card-body, .card-default.border-0 > .card-header {
border: 1px solid #000000;
@include table-border-color;
}
.card-body {
border: 1px solid #000000;
@include table-border-color;
}
.card-default.border-0 > .card-header {
border: 1px solid #000000;
border-bottom-width: 0;
@include table-border-color;
}
.right-border-0 {
border-right: 0;
}