459 lines
9.2 KiB
SCSS
459 lines
9.2 KiB
SCSS
@use './animation.scss';
|
|
|
|
.text-shadow {
|
|
text-shadow:
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'dcalc';
|
|
src: url('@/assets/fonts/dcalc.ttf');
|
|
}
|
|
|
|
:root {
|
|
font-size: 16px;
|
|
--cursor-pointer:
|
|
url('@/assets/cursor/basic.cur'), url('@/assets/cursor/cursor.png'), pointer !important;
|
|
--cursor-active:
|
|
url('@/assets/cursor/basic_press.cur'), url('@/assets/cursor/cursor.png'), pointer !important;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
[data-v-app] {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
// letter-spacing: -0.05px;
|
|
|
|
// font-family: "ArkPixel", "Consola", sans-serif;
|
|
}
|
|
|
|
* {
|
|
// font-family: "ArkPixel", "Consola", sans-serif;
|
|
font-family: 'dcalc', 'SimSun';
|
|
// font-family: "STSong";
|
|
font-size: 12px;
|
|
text-shadow:
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000,
|
|
0 0 1px #000;
|
|
// image-rendering:pixelated;
|
|
// text-rendering: geometricPrecision;
|
|
// letter-spacing: -0.5px;
|
|
}
|
|
|
|
@mixin pointer() {
|
|
cursor: var(--cursor-pointer);
|
|
|
|
&:active {
|
|
cursor: var(--cursor-active);
|
|
}
|
|
}
|
|
|
|
* {
|
|
user-select: none;
|
|
@include pointer();
|
|
}
|
|
|
|
.cursor-pointer {
|
|
@include pointer();
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
background: rgb(0, 0, 0, 0.9);
|
|
width: 11px;
|
|
margin: 0px 0px 0px 0px;
|
|
@include pointer();
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgb(36, 36, 36);
|
|
border: 1px solid rgb(76, 61, 39);
|
|
border-radius: 1px;
|
|
|
|
&:hover {
|
|
background: rgb(52, 52, 52);
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:single-button:start {
|
|
width: 11px;
|
|
// 添加标题栏后调整相关位置
|
|
background: url('@/assets/img/icon/up.png') 0px 1px no-repeat;
|
|
}
|
|
|
|
::-webkit-scrollbar-button:vertical:single-button:end {
|
|
width: 11px;
|
|
background: url('@/assets/img/icon/down.png') 0px 1px no-repeat;
|
|
}
|
|
|
|
.divider {
|
|
width: calc(100% - 4px);
|
|
height: 1px;
|
|
background-color: rgba(58, 57, 58, 0.8);
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.mask-full {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
position: relative;
|
|
}
|
|
|
|
.icon-lay:not(.active) {
|
|
position: absolute;
|
|
width: 28px;
|
|
height: 28px;
|
|
z-index: 2;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.tooltip {
|
|
width: 210px;
|
|
float: left;
|
|
border: 1px solid rgb(128, 128, 128);
|
|
padding: 10px 5px 10px 5px;
|
|
font-size: 0.75rem;
|
|
|
|
.name {
|
|
padding: 0px 5px 0px 5px;
|
|
&::after {
|
|
content: '';
|
|
width: 210px;
|
|
height: 8px;
|
|
background: url('@/assets/img/underline.png');
|
|
display: block;
|
|
background-size: contain;
|
|
left: 5px;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-equipment {
|
|
@extend .tooltip;
|
|
}
|
|
|
|
.tooltip-skill {
|
|
@extend .tooltip;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
.name {
|
|
color: rgb(197, 172, 72);
|
|
}
|
|
|
|
.name-p {
|
|
@extend .name;
|
|
color: rgb(139, 254, 133);
|
|
}
|
|
|
|
.info {
|
|
color: rgb(132, 119, 78);
|
|
margin: 5px;
|
|
}
|
|
}
|
|
|
|
.subitem {
|
|
background-color: rgb(11, 11, 11);
|
|
|
|
.head-sec {
|
|
color: #b99460;
|
|
// font-size: 12px;
|
|
text-align: center;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
background-image: linear-gradient(#2d281a, #16120c);
|
|
border-top: #443c2b solid 1px;
|
|
border-bottom: #211e10 solid 1px;
|
|
border-right: none;
|
|
border-left: none;
|
|
}
|
|
|
|
.body-sec {
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
|
|
.app-header {
|
|
// -webkit-app-region: drag;
|
|
background-image: url('@/assets/img/control/title.png');
|
|
background-size: 100% 100%;
|
|
color: #9d8c5b;
|
|
border-top: 1px solid #6c81a7;
|
|
border-bottom: 1px solid #232d41;
|
|
}
|
|
|
|
.min-icon {
|
|
-webkit-app-region: no-drag;
|
|
background: url('@/assets/img/icon/min.png') no-repeat;
|
|
|
|
background-size: 10px 10px;
|
|
background-position: center;
|
|
}
|
|
|
|
.close-icon {
|
|
-webkit-app-region: no-drag;
|
|
background: url('@/assets/img/icon/exit.png') no-repeat;
|
|
background-size: 10px 10px;
|
|
background-position: center;
|
|
}
|
|
|
|
.normal {
|
|
color: #ffffff;
|
|
}
|
|
.advanced {
|
|
color: #68d5ed;
|
|
}
|
|
.rare {
|
|
color: #9879da;
|
|
}
|
|
.artifact {
|
|
color: #ef28c1;
|
|
}
|
|
.legend {
|
|
color: #ff7700;
|
|
}
|
|
.epic {
|
|
color: #fcb600;
|
|
}
|
|
.chronicle {
|
|
color: #ff6666;
|
|
}
|
|
.myth {
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
left bottom,
|
|
color-stop(0, #f8c63d),
|
|
color-stop(1, #cc66e7)
|
|
);
|
|
color: transparent;
|
|
background-clip: text;
|
|
text-shadow: none;
|
|
-webkit-background-clip: text;
|
|
> span {
|
|
text-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.primeval {
|
|
background-image: linear-gradient(to bottom, #5aff62, #58c6ff);
|
|
color: transparent;
|
|
background-clip: text;
|
|
text-shadow: none;
|
|
-webkit-background-clip: text;
|
|
> span {
|
|
text-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
// @keyframes primeval {
|
|
// 0% {
|
|
// background-image: url("@/assets/img/effect/primeval/0.png");
|
|
// }
|
|
// 3.45% {
|
|
// background-image: url("@/assets/img/effect/primeval/1.png");
|
|
// }
|
|
// 6.9% {
|
|
// background-image: url("@/assets/img/effect/primeval/2.png");
|
|
// }
|
|
// 10.35% {
|
|
// background-image: url("@/assets/img/effect/primeval/3.png");
|
|
// }
|
|
// 13.8% {
|
|
// background-image: url("@/assets/img/effect/primeval/4.png");
|
|
// }
|
|
// 17.25% {
|
|
// background-image: url("@/assets/img/effect/primeval/5.png");
|
|
// }
|
|
// 20.7% {
|
|
// background-image: url("@/assets/img/effect/primeval/6.png");
|
|
// }
|
|
// 24.15% {
|
|
// background-image: url("@/assets/img/effect/primeval/7.png");
|
|
// }
|
|
// 27.6% {
|
|
// background-image: url("@/assets/img/effect/primeval/8.png");
|
|
// }
|
|
// 31.05% {
|
|
// background-image: url("@/assets/img/effect/primeval/9.png");
|
|
// }
|
|
// 34.5% {
|
|
// background-image: url("@/assets/img/effect/primeval/10.png");
|
|
// }
|
|
// 37.95% {
|
|
// background-image: url("@/assets/img/effect/primeval/11.png");
|
|
// }
|
|
// 41.4% {
|
|
// background-image: url("@/assets/img/effect/primeval/12.png");
|
|
// }
|
|
// 44.85% {
|
|
// background-image: url("@/assets/img/effect/primeval/13.png");
|
|
// }
|
|
// 48.3% {
|
|
// background-image: url("@/assets/img/effect/primeval/14.png");
|
|
// }
|
|
// 51.75% {
|
|
// background-image: url("@/assets/img/effect/primeval/15.png");
|
|
// }
|
|
// 55.2% {
|
|
// background-image: url("@/assets/img/effect/primeval/16.png");
|
|
// }
|
|
// 58.65% {
|
|
// background-image: url("@/assets/img/effect/primeval/17.png");
|
|
// }
|
|
// 62.1% {
|
|
// background-image: url("@/assets/img/effect/primeval/18.png");
|
|
// }
|
|
// 65.55% {
|
|
// background-image: url("@/assets/img/effect/primeval/19.png");
|
|
// }
|
|
// 69% {
|
|
// background-image: url("@/assets/img/effect/primeval/20.png");
|
|
// }
|
|
// 72.45% {
|
|
// background-image: url("@/assets/img/effect/primeval/21.png");
|
|
// }
|
|
// 75.9% {
|
|
// background-image: url("@/assets/img/effect/primeval/22.png");
|
|
// }
|
|
// 79.35% {
|
|
// background-image: url("@/assets/img/effect/primeval/23.png");
|
|
// }
|
|
// 82.8% {
|
|
// background-image: url("@/assets/img/effect/primeval/24.png");
|
|
// }
|
|
// 86.25% {
|
|
// background-image: url("@/assets/img/effect/primeval/25.png");
|
|
// }
|
|
// 89.7% {
|
|
// background-image: url("@/assets/img/effect/primeval/26.png");
|
|
// }
|
|
// 93.15% {
|
|
// background-image: url("@/assets/img/effect/primeval/27.png");
|
|
// }
|
|
// 96.6% {
|
|
// background-image: url("@/assets/img/effect/primeval/28.png");
|
|
// }
|
|
// 100% {
|
|
// background-image: url("@/assets/img/effect/primeval/29.png");
|
|
// }
|
|
// }
|
|
|
|
// .primeval_effect {
|
|
// // 应用动画到div上
|
|
// width: 27px;
|
|
// height: 27px;
|
|
// background-size: cover;
|
|
// animation: primeval 2s infinite;
|
|
// // 设置动画名称，持续时间，和循环次数
|
|
// mix-blend-mode: color-dodge;
|
|
// }
|
|
|
|
.lvInfo {
|
|
background-image: url('@/assets/img/specificity/lv.png');
|
|
background-repeat: no-repeat !important;
|
|
background-size: auto auto !important;
|
|
width: 30px;
|
|
height: 16px;
|
|
z-index: 10;
|
|
color: #4e3d1b;
|
|
}
|
|
|
|
.lvInfoActive {
|
|
background-image: url('@/assets/img/specificity/lv_active.png');
|
|
background-repeat: no-repeat !important;
|
|
background-size: auto auto !important;
|
|
width: 30px;
|
|
height: 16px;
|
|
z-index: 10;
|
|
color: #feb300;
|
|
}
|
|
|
|
.lvInfoMaster {
|
|
background-image: url('@/assets/img/specificity/lv_master.png');
|
|
background-repeat: no-repeat !important;
|
|
background-size: auto auto !important;
|
|
width: 30px;
|
|
height: 16px;
|
|
z-index: 10;
|
|
color: #feb300;
|
|
}
|