分享两个 Uptime Kuma 网络服务监控的css主题样式

[Polaris]

一、hotpink主题css

/* @import url("/css/defaults/placeholders.css"); */
@import url("/css/defaults/transparent.css");

:root {
  /* 使用您提供的颜色变量 */
  --main-bg-color: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%) center center/cover no-repeat fixed;

  --modal-bg-color: linear-gradient(-45deg, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
  --modal-header-color: linear-gradient(-45deg, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
  --modal-footer-color: linear-gradient(-45deg, #204c80 0%, #000 100%) center center/cover no-repeat fixed;

  --drop-down-menu-bg: #204c80;

  --button-color: #fb3f62;
  --button-color-hover: #cd4164;
  --button-text: #eee;
  --button-text-hover: #FFF;

  --accent-color: 251, 63, 98;
  --accent-color-hover: rgba(var(--accent-color), .8);
  --link-color: rgb(0, 255, 157);
  --link-color-hover: rgba(0, 255, 157, 0.8);
  --label-text-color: #282a36;
  
  --text: #eee;
  --text-hover: #fff;
  --text-muted: #999;
  
  /* 透明度变量 */
  --transparency-dark-15: rgba(251, 63, 98, 0.15);
  --transparency-dark-20: rgba(251, 63, 98, 0.2);
  --transparency-dark-25: rgba(251, 63, 98, 0.25);
  --transparency-dark-35: rgba(251, 63, 98, 0.35);
  --transparency-dark-45: rgba(251, 63, 98, 0.45);
  
  --transparency-light-10: rgba(255, 255, 255, 0.1);
  --transparency-light-15: rgba(255, 255, 255, 0.15);
  --transparency-light-25: rgba(255, 255, 255, 0.25);
  --transparency-light-45: rgba(255, 255, 255, 0.45);
}

*:not(#floatingInput)::-webkit-input-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus::-webkit-input-placeholder {
  color: var(--text-hover) !important;
}

/* Firefox < 19 */
*:not(#floatingInput):-moz-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus:-moz-placeholder {
  color: var(--text-hover) !important;
}

/* Firefox > 19 */
*:not(#floatingInput)::-moz-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus::-moz-placeholder {
  color: var(--text-hover) !important;
}

/* Internet Explorer 10 */
*:not(#floatingInput):-ms-input-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus:-ms-input-placeholder {
  color: var(--text-hover) !important;
}

body,
.dark {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--text);
  text-align: var(--bs-body-text-align);
  background: var(--main-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* TEXT */
.text-secondary {
  color: var(--text-muted) !important;
}

.text-dark,
.form-text {
  color: var(--text);
}

.stats p,
.word,
footer {
  color: var(--text) !important;
}

.title {
  color: rgb(var(--accent-color)) !important
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  color: var(--text-hover)
}

a:hover:not(.btn),
.nav-link:hover,
.dark a:hover:not(.btn) {
  color: var(--link-color-hover);
}

a,
.nav-link,
.dark a,
.dark .nav-link,
.dark a:not(.btn),
.dark .table,
.dark .nav-link {
  color: var(--link-color);
}

.url a {
  color: var(--link-color) !important;
  text-decoration: underline;
}

mark,
.mark {
  padding: 0 0.3em;
  background-color: rgb(var(--accent-color));
  color: var(--label-text-color);
}

/* CARDS */
.shadow-box,
.dark .shadow-box,
.dark .shadow-box:not(.alert) {
  box-shadow: 0px 0px 20px 10px rgba(251, 63, 98, 0.2);
  background: var(--transparency-dark-25);
}

.dark .settings-content .settings-content-header {
  background: transparent !important;
}

.dark .list-header {
  background: transparent !important;
}

.settings-content .settings-content-header {
  border-bottom: 1px solid var(--transparency-light-10) !important;
}

.list .item:hover {
  background: var(--transparency-light-15) !important;
}

.list-header {
  border-bottom: 1px solid var(--transparency-light-15) !important;
}

.dark .list .item.active,
.list .item.active {
  background: var(--transparency-dark-25) !important;
}

.dark .hp-bar-big .beat.empty,
.hp-bar-big .beat.empty {
  background: var(--transparency-light-45) !important;
}

canvas {
  filter: invert(1)
}

/* TABLES */
th {
  color: var(--text-hover)
}

td {
  color: var(--text);
}

.dark .table-hover>tbody>tr:hover,
.table-hover>tbody>tr:hover {
  --bs-table-accent-bg: var(--transparency-dark-20);
  color: var(--text);
}

.table {
  --bs-table-hover-bg: var(--transparency-dark-15) !important;
  --bs-table-hover-color: var(--text-hover) !important;
}

.dark .table-hover>tbody>tr:hover>* {
  --bs-table-accent-bg: var(--transparency-dark-15);
  color: var(--text-hover);
}

/* MENUS */
.dropdown-menu {
  color: var(--text) !important;
  background: var(--drop-down-menu-bg) !important;
}

.dropdown-item {
  color: var(--text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text-hover) !important;
  background: var(--transparency-light-10) !important;
}

.dark .dropdown-clear-data ul {
  border-color: #0000 !important;
  color: var(--text) !important;
  background: var(--drop-down-menu-bg) !important;
}

.dropdown-item-text {
  color: var(--text);
}

.dropdown-profile-pic .dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--transparency-light-25) !important;
}

.dark .dropdown-profile-pic.dropdown-menu.dropdown-item.active {
  color: var(--text-hover);
  background-color: var(--transparency-dark-15) !important;
}

/* HEADER */
.dark header,
#app>div>header {
  background: var(--transparency-dark-15) !important;
  border-bottom-color: rgba(255, 255, 255, 0) !important;
}

/* BUTTONS */
.dark .btn-primary {
  color: var(--button-text);
}

.btn-primary,
.btn-info {
  color: var(--button-text);
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.btn-primary:hover,
.btn-info:hover {
  color: var(--button-text-hover);
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
  color: var(--button-text-hover);
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5)
}

.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
  color: var(--button-text-hover);
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:checked+.btn-primary:focus,
.btn-check:active+.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5)
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: var(--button-text);
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.btn-outline-primary,
.btn-outline-secondary {
  color: var(--button-color);
  border-color: var(--button-color);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  color: var(--button-text-hover) !important;
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5);
}

.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: var(--button-text-hover) !important;
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:checked+.btn-outline-primary:focus,
.btn-check:active+.btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--button-color);
  background-color: transparent
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--button-text) !important;
  background-color: var(--button-color);
}

.dark #importBackup::file-selector-button,
#importBackup::file-selector-button {
  color: var(--button-text) !important;
  background-color: var(--button-color) !important;
}

.dark #importBackup[data-v-d684482e]:hover:not(:disabled):not([readonly])::file-selector-button,
#importBackup[data-v-d684482e]:hover:not(:disabled):not([readonly])::file-selector-button {
  color: var(--button-text-hover) !important;
  background-color: var(--button-color-hover) !important;
}

/* FORMS */
.dark .form-control,
.dark .form-select,
.form-select,
.form-control {
  color: var(--text);
  background: var(--transparency-dark-25);
  background-repeat: no-repeat;
}

.dark .form-select:focus,
.form-select:focus {
  color: var(--text-color);
  background: var(--drop-down-menu-bg);
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
  border-color: rgba(var(--accent-color), 0.25);
}

.dark .form-control:focus,
.form-control:focus {
  color: var(--text-color);
  background: var(--transparency-dark-35);
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
  border-color: rgba(var(--accent-color), 0.25);
}

.dark .form-control,
.dark .form-select,
.form-select,
.form-control {
  border-color: #0000;
}

.input-group-text {
  color: var(--button-text);
  background-color: var(--button-color);
  border: 1px solid var(--button-color);
}

.form-check-input:checked {
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.dark .multiselect__content-wrapper,
.multiselect__content-wrapper {
  background: var(--drop-down-menu-bg) !important;
  border-color: var(--transparency-light-15) !important;
}

.multiselect {
  color: var(--text);
}

.multiselect__option--highlight {
  background: rgb(var(--accent-color)) !important;
  outline: none;
  color: var(--label-text-color) !important;
}

.multiselect__option--highlight:after {
  content: attr(data-select);
  background: rgb(var(--accent-color)) !important;
  color: var(--label-text-color);
}

.multiselect__option--selected:after {
  content: attr(data-selected);
  color: var(--label-text-color) !important;
}

.multiselect__option--selected,
.dark .multiselect__option--selected {
  background: var(--transparency-dark-45);
  color: var(--text-hover) !important;
}

.dark .multiselect__option--selected::after,
.multiselect__option--selected::after {
  color: var(--text-hover) !important;
}

.multiselect__tag,
.dark .multiselect__tag {
  background: var(--button-color) !important;
  color: var(--button-text) !important;
}

.dark .multiselect__tags,
.multiselect__tags {
  color: var(--text);
  background: var(--transparency-dark-25);
  border-color: transparent;
}

.dark .multiselect__input,
.dark .multiselect__single,
.multiselect__input,
.multiselect__single {
  background: var(--transparency-dark-25) !important;
  color: var(--text-hover) !important;
}

/* MODAL */
.dark .modal-header,
.modal-header {
  border-color: rgb(var(--accent-color));
  border-radius: 1rem 1rem 0 0;
  background: var(--modal-header-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

.dark .modal-footer,
.modal-footer {
  border-color: rgb(var(--accent-color));
  background: var(--modal-footer-color);
  border-radius: 0 0 1rem 1rem;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

.dark .modal-content,
.modal-content {
  box-shadow: 0 15px 70px #000;
  background: var(--modal-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

.vue-image-crop-upload .vicp-wrap {
  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 23%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 23%);
  background-color: var(--modal-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

/* SETTINGS */
.settings-menu .active .menu-item {
  background: var(--transparency-dark-15) !important;
}

.settings-menu .menu-item:hover {
  background: var(--transparency-light-10) !important;
}

h5.settings-subheading:after,
.settings-subheading.h5:after {
  border-bottom: 1px solid var(--transparency-light-10);
}

.dark .cert-exp-days .cert-exp-day-row,
.cert-exp-days .cert-exp-day-row {
  border-bottom: 1px solid var(--transparency-light-10) !important;
}

[contenteditable=true] {
  background-color: var(--transparency-dark-25);
}

[contenteditable=true]:hover {
  background-color: var(--transparency-dark-35);
}

[dir=ltr] .sidebar .sidebar-footer {
  border-right: 1px solid var(--transparency-light-10) !important;
  left: 0;
}

.sidebar .sidebar-footer {
  border-top: 1px solid var(--transparency-light-10) !important;
  background-color: var(--transparency-light-10) !important;
}

.item:hover {
  background-color: rgb(var(--accent-color), .10) !important;
}

@media (max-width: 550px) {
  .dark .table-shadow-box tbody .shadow-box {
    background-color: transparent !important;
  }

  .dark .table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: transparent color: var(--text-hover);
  }

  .dark .table-shadow-box tbody .shadow-box td {
    border-bottom: 1px solid var(--transparency-light-10);
  }
}

.dark .monitor-list .item:hover,
.dark .monitor-list .item.active,
.monitor-list .item.active,
.monitor-list .item:hover {
  background-color: rgb(var(--accent-color), .10);
}

.active.dropdown-item.active,
.dark .dropdown-profile-pic .dropdown-menu .dropdown-item.active,
#app>div>header>ul>li>div>ul>li>a.active {
  background: var(--transparency-dark-25) !important;
  background-color: var(--transparency-dark-25) !important;
}

/* CUSTOM EFFECTS */
.hp-bar-big .beat.full {
  background: #fb3f62 !important;
  box-shadow: 0 0 10px #fb3f62;
}

.dark .hp-bar .beat.full,
.hp-bar .beat.full {
  background: #fb3f62 !important;
}

/* 闪光效果的状态指示器 */
.badge-status-up {
  background-color: #fb3f62 !important;
  box-shadow: 0 0 8px #fb3f62;
}

/* 监控计数器的样式 */
.badge-count {
  background-color: #fb3f62 !important;
  border: 1px solid #204c80;
}

/* 添加的特殊效果，强调青色链接 */
a:hover {
  text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
}

/* 按钮过渡效果 */
.btn-primary, .btn-info, .btn-outline-primary, .btn-outline-secondary {
  transition: all 0.3s ease;
}

hotline 主题

/* @import url("/css/defaults/placeholders.css"); */
@import url("/css/defaults/transparent.css");

:root {
  /* 使用新的颜色变量 */
  --main-bg-color: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;

  --modal-bg-color: linear-gradient(-90deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
  --modal-header-color: linear-gradient(-90deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
  --modal-footer-color: linear-gradient(-90deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed;
  
  --drop-down-menu-bg: #5e61ab;

  --button-color: #f98dc9;
  --button-color-hover: #ff4cb1;
  --button-text: #eee;
  --button-text-hover: #fff;
  
  --accent-color: 249, 141, 201;
  --accent-color-hover: rgb(var(--accent-color),.8);
  --link-color: rgb(255, 179, 222);
  --link-color-hover: #d7fffe;
  --label-text-color: #fff;
    
  --text: #ddd;
  --text-hover: #fff;
  --text-muted: #999;
  
  /* 透明度变量 */
  --transparency-dark-15: rgba(249, 141, 201, 0.15);
  --transparency-dark-20: rgba(249, 141, 201, 0.2);
  --transparency-dark-25: rgba(249, 141, 201, 0.25);
  --transparency-dark-35: rgba(249, 141, 201, 0.35);
  --transparency-dark-45: rgba(249, 141, 201, 0.45);
  
  --transparency-light-10: rgba(255, 255, 255, 0.1);
  --transparency-light-15: rgba(255, 255, 255, 0.15);
  --transparency-light-25: rgba(255, 255, 255, 0.25);
  --transparency-light-45: rgba(255, 255, 255, 0.45);
  
  /*Specials*/
  --arr-queue-color: #f98dc9; /* Servarr apps + Bazarr*/
  --plex-poster-unwatched: #f765b8;
  --petio-spinner: invert(78%) sepia(17%) saturate(4447%) hue-rotate(290deg) brightness(109%) contrast(95%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ 
  --gitea-color-primary-dark-4: 215,255,254;
  --overseerr-gradient: linear-gradient(0deg, rgba(247,101,184,.9) 0%, rgb(21, 95, 165,.9) 100%) center center/cover no-repeat fixed;
}

*:not(#floatingInput)::-webkit-input-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus::-webkit-input-placeholder {
  color: var(--text-hover) !important;
}

/* Firefox < 19 */
*:not(#floatingInput):-moz-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus:-moz-placeholder {
  color: var(--text-hover) !important;
}

/* Firefox > 19 */
*:not(#floatingInput)::-moz-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus::-moz-placeholder {
  color: var(--text-hover) !important;
}

/* Internet Explorer 10 */
*:not(#floatingInput):-ms-input-placeholder {
  color: var(--text-muted) !important;
}

*:not(#floatingInput):focus:-ms-input-placeholder {
  color: var(--text-hover) !important;
}

body,
.dark {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--text);
  text-align: var(--bs-body-text-align);
  background: var(--main-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* TEXT */
.text-secondary {
  color: var(--text-muted) !important;
}

.text-dark,
.form-text {
  color: var(--text);
}

.stats p,
.word,
footer {
  color: var(--text) !important;
}

.title {
  color: rgb(var(--accent-color)) !important
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  color: var(--text-hover)
}

a:hover:not(.btn),
.nav-link:hover,
.dark a:hover:not(.btn) {
  color: var(--link-color-hover);
}

a,
.nav-link,
.dark a,
.dark .nav-link,
.dark a:not(.btn),
.dark .table,
.dark .nav-link {
  color: var(--link-color);
}

.url a {
  color: var(--link-color) !important;
  text-decoration: underline;
}

mark,
.mark {
  padding: 0 0.3em;
  background-color: rgb(var(--accent-color));
  color: var(--label-text-color);
}

/* CARDS */
.shadow-box,
.dark .shadow-box,
.dark .shadow-box:not(.alert) {
  box-shadow: 0px 0px 20px 10px rgba(247, 101, 184, 0.2);
  background: var(--transparency-dark-25);
}

.dark .settings-content .settings-content-header {
  background: transparent !important;
}

.dark .list-header {
  background: transparent !important;
}

.settings-content .settings-content-header {
  border-bottom: 1px solid var(--transparency-light-10) !important;
}

.list .item:hover {
  background: var(--transparency-light-15) !important;
}

.list-header {
  border-bottom: 1px solid var(--transparency-light-15) !important;
}

.dark .list .item.active,
.list .item.active {
  background: var(--transparency-dark-25) !important;
}

.dark .hp-bar-big .beat.empty,
.hp-bar-big .beat.empty {
  background: var(--transparency-light-45) !important;
}

canvas {
  filter: invert(1)
}

/* TABLES */
th {
  color: var(--text-hover)
}

td {
  color: var(--text);
}

.dark .table-hover>tbody>tr:hover,
.table-hover>tbody>tr:hover {
  --bs-table-accent-bg: var(--transparency-dark-20);
  color: var(--text);
}

.table {
  --bs-table-hover-bg: var(--transparency-dark-15) !important;
  --bs-table-hover-color: var(--text-hover) !important;
}

.dark .table-hover>tbody>tr:hover>* {
  --bs-table-accent-bg: var(--transparency-dark-15);
  color: var(--text-hover);
}

/* MENUS */
.dropdown-menu {
  color: var(--text) !important;
  background: var(--drop-down-menu-bg) !important;
}

.dropdown-item {
  color: var(--text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text-hover) !important;
  background: var(--transparency-light-10) !important;
}

.dark .dropdown-clear-data ul {
  border-color: #0000 !important;
  color: var(--text) !important;
  background: var(--drop-down-menu-bg) !important;
}

.dropdown-item-text {
  color: var(--text);
}

.dropdown-profile-pic .dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--transparency-light-25) !important;
}

.dark .dropdown-profile-pic.dropdown-menu.dropdown-item.active {
  color: var(--text-hover);
  background-color: var(--transparency-dark-15) !important;
}

/* HEADER */
.dark header,
#app>div>header {
  background: var(--transparency-dark-15) !important;
  border-bottom-color: rgba(255, 255, 255, 0) !important;
}

/* BUTTONS */
.dark .btn-primary {
  color: var(--button-text);
}

.btn-primary,
.btn-info {
  color: var(--button-text);
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.btn-primary:hover,
.btn-info:hover {
  color: var(--button-text-hover);
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
  color: var(--button-text-hover);
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5)
}

.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
  color: var(--button-text-hover);
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:checked+.btn-primary:focus,
.btn-check:active+.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5)
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: var(--button-text);
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.btn-outline-primary,
.btn-outline-secondary {
  color: var(--button-color);
  border-color: var(--button-color);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  color: var(--button-text-hover) !important;
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5);
}

.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: var(--button-text-hover) !important;
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.btn-check:checked+.btn-outline-primary:focus,
.btn-check:active+.btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--accent-color), .5);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--button-color);
  background-color: transparent
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--button-text) !important;
  background-color: var(--button-color);
}

.dark #importBackup::file-selector-button,
#importBackup::file-selector-button {
  color: var(--button-text) !important;
  background-color: var(--button-color) !important;
}

.dark #importBackup[data-v-d684482e]:hover:not(:disabled):not([readonly])::file-selector-button,
#importBackup[data-v-d684482e]:hover:not(:disabled):not([readonly])::file-selector-button {
  color: var(--button-text-hover) !important;
  background-color: var(--button-color-hover) !important;
}

/* FORMS */
.dark .form-control,
.dark .form-select,
.form-select,
.form-control {
  color: var(--text);
  background: var(--transparency-dark-25);
  background-repeat: no-repeat;
}

.dark .form-select:focus,
.form-select:focus {
  color: var(--text-color);
  background: var(--drop-down-menu-bg);
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
  border-color: rgba(var(--accent-color), 0.25);
}

.dark .form-control:focus,
.form-control:focus {
  color: var(--text-color);
  background: var(--transparency-dark-35);
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
  border-color: rgba(var(--accent-color), 0.25);
}

.dark .form-control,
.dark .form-select,
.form-select,
.form-control {
  border-color: #0000;
}

.input-group-text {
  color: var(--button-text);
  background-color: var(--button-color);
  border: 1px solid var(--button-color);
}

.form-check-input:checked {
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.dark .multiselect__content-wrapper,
.multiselect__content-wrapper {
  background: var(--drop-down-menu-bg) !important;
  border-color: var(--transparency-light-15) !important;
}

.multiselect {
  color: var(--text);
}

.multiselect__option--highlight {
  background: rgb(var(--accent-color)) !important;
  outline: none;
  color: var(--label-text-color) !important;
}

.multiselect__option--highlight:after {
  content: attr(data-select);
  background: rgb(var(--accent-color)) !important;
  color: var(--label-text-color);
}

.multiselect__option--selected:after {
  content: attr(data-selected);
  color: var(--label-text-color) !important;
}

.multiselect__option--selected,
.dark .multiselect__option--selected {
  background: var(--transparency-dark-45);
  color: var(--text-hover) !important;
}

.dark .multiselect__option--selected::after,
.multiselect__option--selected::after {
  color: var(--text-hover) !important;
}

.multiselect__tag,
.dark .multiselect__tag {
  background: var(--button-color) !important;
  color: var(--button-text) !important;
}

.dark .multiselect__tags,
.multiselect__tags {
  color: var(--text);
  background: var(--transparency-dark-25);
  border-color: transparent;
}

.dark .multiselect__input,
.dark .multiselect__single,
.multiselect__input,
.multiselect__single {
  background: var(--transparency-dark-25) !important;
  color: var(--text-hover) !important;
}

/* MODAL */
.dark .modal-header,
.modal-header {
  border-color: rgb(var(--accent-color));
  border-radius: 1rem 1rem 0 0;
  background: var(--modal-header-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

.dark .modal-footer,
.modal-footer {
  border-color: rgb(var(--accent-color));
  background: var(--modal-footer-color);
  border-radius: 0 0 1rem 1rem;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

.dark .modal-content,
.modal-content {
  box-shadow: 0 15px 70px #000;
  background: var(--modal-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

.vue-image-crop-upload .vicp-wrap {
  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 23%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 23%);
  background-color: var(--modal-bg-color);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: center center, center center;
  background-size: auto, cover;
  -webkit-background-size: auto, cover;
  -moz-background-size: auto, cover;
  -o-background-size: auto, cover;
}

/* SETTINGS */
.settings-menu .active .menu-item {
  background: var(--transparency-dark-15) !important;
}

.settings-menu .menu-item:hover {
  background: var(--transparency-light-10) !important;
}

h5.settings-subheading:after,
.settings-subheading.h5:after {
  border-bottom: 1px solid var(--transparency-light-10);
}

.dark .cert-exp-days .cert-exp-day-row,
.cert-exp-days .cert-exp-day-row {
  border-bottom: 1px solid var(--transparency-light-10) !important;
}

[contenteditable=true] {
  background-color: var(--transparency-dark-25);
}

[contenteditable=true]:hover {
  background-color: var(--transparency-dark-35);
}

[dir=ltr] .sidebar .sidebar-footer {
  border-right: 1px solid var(--transparency-light-10) !important;
  left: 0;
}

.sidebar .sidebar-footer {
  border-top: 1px solid var(--transparency-light-10) !important;
  background-color: var(--transparency-light-10) !important;
}

.item:hover {
  background-color: rgb(var(--accent-color), .10) !important;
}

@media (max-width: 550px) {
  .dark .table-shadow-box tbody .shadow-box {
    background-color: transparent !important;
  }

  .dark .table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: transparent color: var(--text-hover);
  }

  .dark .table-shadow-box tbody .shadow-box td {
    border-bottom: 1px solid var(--transparency-light-10);
  }
}

.dark .monitor-list .item:hover,
.dark .monitor-list .item.active,
.monitor-list .item.active,
.monitor-list .item:hover {
  background-color: rgb(var(--accent-color), .10);
}

.active.dropdown-item.active,
.dark .dropdown-profile-pic .dropdown-menu .dropdown-item.active,
#app>div>header>ul>li>div>ul>li>a.active {
  background: var(--transparency-dark-25) !important;
  background-color: var(--transparency-dark-25) !important;
}

/* CUSTOM EFFECTS */
.hp-bar-big .beat.full {
  background: #f765b8 !important;
  box-shadow: 0 0 10px #f765b8;
}

.dark .hp-bar .beat.full,
.hp-bar .beat.full {
  background: #f765b8 !important;
}

/* 闪光效果的状态指示器 */
.badge-status-up {
  background-color: #f98dc9 !important;
  box-shadow: 0 0 8px #f98dc9;
}

/* 监控计数器样式 */
.badge-count {
  background-color: #f98dc9 !important;
  border: 1px solid #5e61ab;
}

/* 链接悬停效果 */
a:hover {
  text-shadow: 0 0 5px rgba(215, 255, 254, 0.5);
}

/* 按钮过渡效果 */
.btn-primary, .btn-info, .btn-outline-primary, .btn-outline-secondary {
  transition: all 0.3s ease;
}

/* Shannon-x 2025-02-26 定制增强 */
.monitor-list .item {
  border-radius: 8px;
  margin-bottom: 4px;
  transition: all 0.2s ease;
}

.monitor-list .item:hover {
  transform: translateX(5px);
}

.shadow-box {
  border-radius: 12px;
  transition: box-shadow 0.3s ease;
}

.shadow-box:hover {
  box-shadow: 0px 0px 25px 12px rgba(249, 141, 201, 0.25) !important;
}

.btn {
  border-radius: 8px;
}

.modal-content {
  border-radius: 16px;
}

/* 添加卡片效果 */
.monitor-detail {
  border-radius: 12px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 添加温和的脉动效果到状态指示器 */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(249, 141, 201, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(249, 141, 201, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 141, 201, 0); }
}

.badge-status-up {
  animation: pulse 2s infinite;
}