mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-25 15:45:23 +00:00
269 lines
4.4 KiB
SCSS
Executable file
269 lines
4.4 KiB
SCSS
Executable file
// Quartz 5.0.2
|
|
// Bootswatch
|
|
|
|
|
|
// Variables
|
|
|
|
$body-bg-image: linear-gradient(90deg, shade-color($cyan, 10%), shade-color($purple, 10%), shade-color($pink, 5%)) !default;
|
|
$frosted-opacity: .3 !default;
|
|
|
|
@mixin glass($opacity: $frosted-opacity, $bg: $white) {
|
|
border: none;
|
|
box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1), $box-shadow;
|
|
@include frost($opacity, $bg);
|
|
|
|
a {
|
|
color: $card-color;
|
|
}
|
|
|
|
.text-muted {
|
|
color: rgba($card-color, .7) !important;
|
|
}
|
|
}
|
|
|
|
@mixin frost($opacity: $frosted-opacity, $bg: $white) {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(125deg, rgba($bg, ($opacity)), rgba($bg, ($opacity - .1)) 70%);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
// Body
|
|
|
|
body {
|
|
background-image: $body-bg-image;
|
|
}
|
|
|
|
// Tables
|
|
|
|
.table-secondary {
|
|
--bs-table-hover-color: $white;
|
|
}
|
|
|
|
// Buttons
|
|
|
|
.btn {
|
|
&-secondary {
|
|
border: none;
|
|
color: $white;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $white;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-group > .btn:not(:first-child),
|
|
.btn-group > .btn-group:not(:first-child) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.btn-group-vertical > .btn:not(:first-child),
|
|
.btn-group-vertical > .btn-group:not(:first-child) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.bg-light .btn {
|
|
background-color: rgba($black, .2);
|
|
}
|
|
|
|
// Forms
|
|
|
|
.input-group-text,
|
|
.form-control::-webkit-file-upload-button {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(125deg, rgba($white, .3), rgba($white, .2) 70%);
|
|
border: none;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.input-group-text {
|
|
box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1);
|
|
}
|
|
|
|
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
|
margin-left: 0;
|
|
border-left: none;
|
|
}
|
|
|
|
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
|
|
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
|
|
border-right: none;
|
|
}
|
|
|
|
.form-select:not([multiple]) {
|
|
transition: border-color .15s ease-in-out;
|
|
option {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
.bg-light .form-control {
|
|
border-color: rgba($black, .2);
|
|
color: $gray-800;
|
|
|
|
&::placeholder {
|
|
color: rgba($black, .2);
|
|
}
|
|
}
|
|
|
|
// Navs
|
|
|
|
.dropdown-menu {
|
|
@include glass(.3);
|
|
}
|
|
|
|
.nav-tabs {
|
|
.nav-link {
|
|
transition: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $white;
|
|
isolation: auto;
|
|
}
|
|
|
|
&,
|
|
&.disabled {
|
|
background-color: $progress-bg;
|
|
}
|
|
}
|
|
|
|
.nav-item:first-child > .nav-link {
|
|
border-radius: $border-radius 0 0 $border-radius;
|
|
}
|
|
|
|
.nav-item:last-child > .nav-link {
|
|
border-radius: 0 $border-radius $border-radius 0;
|
|
}
|
|
|
|
.nav-item .nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
@include glass(1, $white);
|
|
border-radius: $border-radius;
|
|
transform: scale(1.1);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $gray-800;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.nav-pills {
|
|
.nav-link {
|
|
transition: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $white;
|
|
isolation: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Indicators
|
|
|
|
.alert {
|
|
@include glass();
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: $white;
|
|
|
|
@each $color, $value in $theme-colors {
|
|
$opacity: .7;
|
|
&-#{$color}::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: .5rem;
|
|
height: 100%;
|
|
background-color: $value;
|
|
}
|
|
}
|
|
|
|
.alert-link {
|
|
color: $card-color;
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
&.bg-light {
|
|
color: $gray-800;
|
|
}
|
|
}
|
|
|
|
// Containers
|
|
|
|
.list-group {
|
|
@include glass();
|
|
}
|
|
|
|
.card {
|
|
@include glass();
|
|
|
|
@each $color, $value in $theme-colors {
|
|
&.bg-#{$color} {
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
&.bg-light {
|
|
.card-header,
|
|
.card-body {
|
|
color: $gray-800;
|
|
}
|
|
}
|
|
|
|
&.border {
|
|
@each $color, $value in $theme-colors {
|
|
&-#{$color} {
|
|
@include glass();
|
|
|
|
.card-header {
|
|
background-color: $value !important;
|
|
border-bottom: none;
|
|
|
|
@if ($color == light) {
|
|
color: $gray-800;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-header {
|
|
font-weight: $headings-font-weight;
|
|
}
|
|
}
|
|
|
|
.toast {
|
|
@include glass();
|
|
}
|
|
|
|
.popover {
|
|
@include glass();
|
|
|
|
&-header {
|
|
border-bottom-color: $border-color;
|
|
}
|
|
}
|
|
|
|
.tooltip {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.modal-content {
|
|
@include glass();
|
|
}
|
|
|