mirror of
https://github.com/hi2shark/nazhua.git
synced 2026-01-15 00:30:43 +08:00
93 lines
2.5 KiB
SCSS
93 lines
2.5 KiB
SCSS
// 原生CSS变量 -- 顶级作用域
|
|
:root {
|
|
--layout-header-height: 60px;
|
|
--layout-main-height: calc(100vh - var(--layout-header-height));
|
|
|
|
--list-container-width: 1300px;
|
|
|
|
--detail-container-width: 900px;
|
|
|
|
--global-background-color: #392f41;
|
|
--global-text-color: #ddd;
|
|
--global-link-color: #2ca9e1;
|
|
|
|
--layout-main-bg-color: rgba(20, 30, 40, 0.75);
|
|
--layout-bg-color: #252748;
|
|
|
|
--world-map-point-color: #fff143;
|
|
|
|
--duration-color: #89c3eb;
|
|
--transfer-color: #f9ed69;
|
|
--transfer-in-color: var(--transfer-color);
|
|
--transfer-out-color: #90f2ff;
|
|
--net-speed-in-color: #f5b199;
|
|
--net-speed-out-color: #89c3eb;
|
|
--conn-color: #89c3eb;
|
|
--conn-tcp-color: var(--conn-color);
|
|
--conn-udp-color: #2ca9e1;
|
|
--load-color: #90f2ff;
|
|
--process-color: #f5b199;
|
|
|
|
--list-item-price-color: #eee;
|
|
--list-item-buy-link-color: #ffc300;
|
|
--list-item-buy-link-color-hover: #ff9900;
|
|
--public-note-tag-color: #ccc;
|
|
--public-note-tag-bg: linear-gradient(125deg, #676ef7, #41459c);
|
|
|
|
--option-high-color: #ff7500;
|
|
--option-high-color-active: rgba(255, 177, 0, 0.75);
|
|
|
|
--server-status-value-color: #a1eafb;
|
|
--server-status-label-color: #ddd;
|
|
--server-status-content-color: #eee;
|
|
|
|
// 针对1440px以下的屏幕
|
|
@media screen and (max-width: 1440px) {
|
|
--list-container-width: 1120px;
|
|
}
|
|
|
|
// 针对1280px以下的屏幕
|
|
@media screen and (max-width: 1280px) {
|
|
--list-container-width: 1024px;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
--list-container-width: 800px;
|
|
--detail-container-width: 800px;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
--list-container-width: 720px;
|
|
--detail-container-width: 720px;
|
|
}
|
|
|
|
@media screen and (max-width: 720px) {
|
|
--list-container-width: 100vw;
|
|
--detail-container-width: 100vw;
|
|
}
|
|
}
|
|
|
|
body.simple-color-mode {
|
|
|
|
--world-map-point-color: #cbf1f5;
|
|
|
|
--simple-color: #ccc;
|
|
--duration-color: var(--simple-color);
|
|
--transfer-color: var(--simple-color);
|
|
--transfer-in-color: var(--transfer-color);
|
|
--transfer-out-color: var(--simple-color);
|
|
--net-speed-in-color: var(--simple-color);
|
|
--net-speed-out-color: var(--simple-color);
|
|
|
|
--list-item-price-color: #eee;
|
|
--list-item-buy-link-color: var(--simple-color);
|
|
--list-item-buy-link-color-hover: draken(#cbf1f5, 10%);
|
|
--public-note-tag-color: #eee;
|
|
--public-note-tag-bg: transparent;
|
|
|
|
--option-high-color: rgb(93, 122, 126);
|
|
--option-high-color-active: rgba(93, 122, 126, 0.75);
|
|
|
|
--server-status-value-color: var(--simple-color);
|
|
}
|