mirror of
https://github.com/louislam/dockge.git
synced 2026-05-22 06:22:17 +00:00
wip
This commit is contained in:
Louis Lam
664
frontend/src/styles/main.scss
Normal file
664
frontend/src/styles/main.scss
Normal file
@@ -0,0 +1,664 @@
|
||||
@import "vars.scss";
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
@import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
|
||||
|
||||
#app {
|
||||
font-family: BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
border-radius: 19px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.bg-maintenance {
|
||||
color: white !important;
|
||||
background-color: $maintenance !important;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-maintenance {
|
||||
color: $maintenance !important;
|
||||
}
|
||||
|
||||
.incident a,
|
||||
.bg-maintenance a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
border-radius: 0.75rem;
|
||||
|
||||
.dark & {
|
||||
.list-group-item {
|
||||
background-color: $dark-bg;
|
||||
color: $dark-font-color;
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// optgroup
|
||||
optgroup {
|
||||
color: #b1b1b1;
|
||||
option {
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
optgroup {
|
||||
color: #535864;
|
||||
option {
|
||||
color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollbar
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.dark & {
|
||||
box-shadow: 0 15px 70px rgb(0 0 0);
|
||||
background-color: $dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.VuePagination__count {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shadow-box {
|
||||
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.big-padding {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: white;
|
||||
background: $primary-gradient;
|
||||
|
||||
&:hover, &:active, &:focus, &.active {
|
||||
color: white;
|
||||
background: $primary-gradient-active;
|
||||
border-color: $highlight;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
color: $dark-font-color2;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-normal {
|
||||
$bg-color: #F5F5F5;
|
||||
|
||||
background-color: $bg-color;
|
||||
border-color: $bg-color;
|
||||
|
||||
&:hover {
|
||||
$hover-color: darken($bg-color, 3%);
|
||||
background-color: $hover-color;
|
||||
border-color: $hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
color: white;
|
||||
|
||||
&:hover, &:active, &:focus, &.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
color: white;
|
||||
|
||||
&:hover, &:active, &:focus, &.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background-color: #161B22;
|
||||
}
|
||||
|
||||
.btn-outline-normal {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 25px;
|
||||
background-color: transparent;
|
||||
|
||||
.dark & {
|
||||
color: $dark-font-color;
|
||||
border: 1px solid $dark-font-color2;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $highlight-white;
|
||||
|
||||
.dark & {
|
||||
background-color: $dark-font-color2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.table-shadow-box {
|
||||
padding: 10px !important;
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
.shadow-box {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
margin-top: 0 !important;
|
||||
padding: 4px 10px !important;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
|
||||
td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td:nth-child(-n+3) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid $dark-font-color;
|
||||
display: block;
|
||||
padding: 4px;
|
||||
|
||||
.badge {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Theme override here
|
||||
.dark {
|
||||
background-color: #090c10;
|
||||
color: $dark-font-color;
|
||||
|
||||
mark, .mark {
|
||||
background-color: #b6ad86;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
|
||||
background: $dark-border-color;
|
||||
}
|
||||
|
||||
.shadow-box {
|
||||
&:not(.alert) {
|
||||
background-color: $dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
background-color: $dark-bg2;
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: #282f39;
|
||||
border-color: $dark-border-color;
|
||||
color: $dark-font-color;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
border-color: $primary; // Re-apply bootstrap border
|
||||
}
|
||||
|
||||
.form-switch .form-check-input {
|
||||
background-color: #232f3b;
|
||||
}
|
||||
|
||||
a:not(.btn),
|
||||
.table,
|
||||
.nav-link {
|
||||
color: $dark-font-color;
|
||||
|
||||
&.btn-info {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.incident a,
|
||||
.bg-maintenance a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus,
|
||||
.form-select,
|
||||
.form-select:focus {
|
||||
color: $dark-font-color;
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
|
||||
.form-select:disabled {
|
||||
color: rgba($dark-font-color, 0.7);
|
||||
background-color: $dark-bg;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
|
||||
.form-control:disabled, .form-control[readonly] {
|
||||
background-color: #232f3b;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.table-hover > tbody > tr:hover > * {
|
||||
--bs-table-accent-bg: #070a10;
|
||||
color: $dark-font-color;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
||||
color: $dark-font-color2;
|
||||
background: $primary-gradient;
|
||||
|
||||
&:hover {
|
||||
background: $primary-gradient-active;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
color: $dark-font-color2;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-normal {
|
||||
$bg-color: $dark-header-bg;
|
||||
|
||||
color: $dark-font-color;
|
||||
background-color: $bg-color;
|
||||
border-color: $bg-color;
|
||||
|
||||
&:hover {
|
||||
$hover-color: darken($bg-color, 3%);
|
||||
background-color: $hover-color;
|
||||
border-color: $hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
color: $dark-font-color2;
|
||||
|
||||
&:hover, &:active, &:focus, &.active {
|
||||
color: $dark-font-color2;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
box-shadow: none;
|
||||
filter: invert(1);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-color: $dark-bg;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-color: $dark-bg;
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.page-item.disabled .page-link {
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-border-color;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-border-color;
|
||||
color: $dark-font-color;
|
||||
}
|
||||
|
||||
.monitor-list {
|
||||
.item {
|
||||
&:hover {
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.table-shadow-box {
|
||||
tbody {
|
||||
.shadow-box {
|
||||
background-color: $dark-bg2;
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid $dark-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
&.bg-info,
|
||||
&.bg-warning,
|
||||
&.bg-danger,
|
||||
&.bg-maintenance,
|
||||
&.bg-light {
|
||||
color: $dark-font-color2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Floating Label
|
||||
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {
|
||||
background-color: transparent;
|
||||
|
||||
|
||||
}
|
||||
.form-floating > label {
|
||||
.dark & {
|
||||
color: $dark-font-color3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Transitions
|
||||
*/
|
||||
|
||||
// page-change
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.2s $easing-in;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s $easing-in;
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateY(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-fade-right-enter-active {
|
||||
transition: all 0.2s $easing-in;
|
||||
}
|
||||
|
||||
.slide-fade-right-leave-active {
|
||||
transition: all 0.2s $easing-in;
|
||||
}
|
||||
|
||||
.slide-fade-right-enter-from,
|
||||
.slide-fade-right-leave-to {
|
||||
transform: translateX(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-fade-up-enter-active {
|
||||
transition: all 0.2s $easing-in;
|
||||
}
|
||||
|
||||
.slide-fade-up-leave-active {
|
||||
transition: all 0.2s $easing-in;
|
||||
}
|
||||
|
||||
.slide-fade-up-enter-from,
|
||||
.slide-fade-up-leave-to {
|
||||
transform: translateY(-50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.monitor-list {
|
||||
&.scrollbar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 770px) {
|
||||
&.scrollbar {
|
||||
height: calc(100% - 97px);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 13px 15px 10px 15px;
|
||||
border-radius: 10px;
|
||||
transition: all ease-in-out 0.15s;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.info {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $highlight-white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #cdf8f4;
|
||||
}
|
||||
.tags {
|
||||
// Removes margin to line up tags list with uptime percentage
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #122f21;
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #055160;
|
||||
background-color: #cff4fc;
|
||||
border-color: #cff4fc;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #842029;
|
||||
background-color: #f8d7da;
|
||||
border-color: #f8d7da;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #4caf50;
|
||||
border-color: #4caf50;
|
||||
}
|
||||
|
||||
|
||||
[contenteditable=true] {
|
||||
transition: all $easing-in 0.2s;
|
||||
background-color: rgba(239, 239, 239, 0.7);
|
||||
border-radius: 8px;
|
||||
|
||||
&.no-bg {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0 solid #eee;
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(239, 239, 239, 0.8);
|
||||
}
|
||||
|
||||
.dark & {
|
||||
background-color: rgba(239, 239, 239, 0.2);
|
||||
}
|
||||
|
||||
/*
|
||||
&::after {
|
||||
margin-left: 5px;
|
||||
content: "🖊️";
|
||||
font-size: 13px;
|
||||
color: #eee;
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
.action {
|
||||
transition: all $easing-in 0.2s;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.prism-editor__textarea {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
h5.settings-subheading::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50%;
|
||||
padding-top: 8px;
|
||||
border-bottom: 1px solid $dark-border-color;
|
||||
}
|
||||
|
||||
/* required class */
|
||||
.code-editor, .css-editor {
|
||||
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
|
||||
|
||||
border-radius: 1rem;
|
||||
padding: 10px 5px;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
.dark & {
|
||||
background: $dark-bg2;
|
||||
border: 1px solid $dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$shadow-box-padding: 20px;
|
||||
|
||||
.shadow-box-with-fixed-bottom-bar {
|
||||
padding-top: $shadow-box-padding;
|
||||
padding-bottom: 0;
|
||||
padding-right: $shadow-box-padding;
|
||||
padding-left: $shadow-box-padding;
|
||||
}
|
||||
|
||||
.fixed-bottom-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin-left: -$shadow-box-padding;
|
||||
margin-right: -$shadow-box-padding;
|
||||
z-index: 100;
|
||||
background-color: rgba(white, 0.2);
|
||||
backdrop-filter: blur(2px);
|
||||
border-radius: 0 0 10px 10px;
|
||||
|
||||
.dark & {
|
||||
background-color: rgba($dark-header-bg, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 770px) {
|
||||
.toast-container {
|
||||
margin-bottom: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.toast-container {
|
||||
margin-bottom: 126px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#terminal {
|
||||
.xterm-viewport {
|
||||
border-radius: 10px;
|
||||
background-color: $dark-bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Localization
|
||||
@import "localization.scss";
|
||||
Reference in New Issue
Block a user