204 lines
7.7 KiB
Plaintext
204 lines
7.7 KiB
Plaintext
@import './variables.less';
|
|
|
|
|
|
/*自动隐藏文字*/
|
|
.mixin-ellipsis-1() {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.mixin-ellipsis(@n: 1) {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
white-space: normal !important;
|
|
-webkit-line-clamp: @n;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.mixin-ellipsis-2() {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
white-space: normal !important;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.stroke(@stroke, @color) {
|
|
@maxi: @stroke + 1;
|
|
.i-loop (@i) when (@i > 0) {
|
|
@maxj: @stroke + 1;
|
|
.j-loop (@j) when (@j > 0) {
|
|
text-shadow+: (@i - 1)*(1px) (@j - 1)*(1px) 0 @color;
|
|
text-shadow+: (@i - 1)*(1px) (@j - 1)*(-1px) 0 @color;
|
|
text-shadow+: (@i - 1)*(-1px) (@j - 1)*(-1px) 0 @color;
|
|
text-shadow+: (@i - 1)*(-1px) (@j - 1)*(1px) 0 @color;
|
|
.j-loop(@j - 1);
|
|
}
|
|
.j-loop (0) {}
|
|
.j-loop(@maxj);
|
|
.i-loop(@i - 1);
|
|
}
|
|
.i-loop (0) {}
|
|
.i-loop(@maxi);
|
|
text-shadow+: 0 0 0 @color;
|
|
}
|
|
|
|
.stroke4(@color) {
|
|
text-shadow:
|
|
0.02em -0.02em 0 var(--color-lyric-shadow),
|
|
// -0.02em 0.02em 0 var(--color-lyric-shadow),
|
|
// 0.02em 0.02em 0 var(--color-lyric-shadow),
|
|
// 0.02em -0.02em 0 var(--color-lyric-shadow),
|
|
-0.02em -1px 0 var(--color-lyric-shadow),
|
|
-0.02em 1px 0 var(--color-lyric-shadow),
|
|
0.02em 1px 0 var(--color-lyric-shadow),
|
|
0.02em -1px 0 var(--color-lyric-shadow),
|
|
-0.02em 0px 0 var(--color-lyric-shadow),
|
|
-0.02em 0px 0 var(--color-lyric-shadow),
|
|
0.02em 0px 0 var(--color-lyric-shadow),
|
|
0.02em 0px 0 var(--color-lyric-shadow),
|
|
// -1px -0.02em 0 var(--color-lyric-shadow),
|
|
// -1px 0.02em 0 var(--color-lyric-shadow),
|
|
// 1px 0.02em 0 var(--color-lyric-shadow),
|
|
// 1px -0.02em 0 var(--color-lyric-shadow),
|
|
-1px -1px 0 var(--color-lyric-shadow),
|
|
-1px 1px 0 var(--color-lyric-shadow),
|
|
1px 1px 0 var(--color-lyric-shadow),
|
|
1px -1px 0 var(--color-lyric-shadow),
|
|
-1px 0px 0 var(--color-lyric-shadow),
|
|
-1px 0px 0 var(--color-lyric-shadow),
|
|
1px 0px 0 var(--color-lyric-shadow),
|
|
1px 0px 0 var(--color-lyric-shadow)
|
|
// 0px -0.02em 0 var(--color-lyric-shadow),
|
|
// 0px 0.02em 0 var(--color-lyric-shadow),
|
|
// 0px 0.02em 0 var(--color-lyric-shadow),
|
|
// 0px -0.02em 0 var(--color-lyric-shadow),
|
|
// 0px -1px 0 var(--color-lyric-shadow),
|
|
// 0px 1px 0 var(--color-lyric-shadow),
|
|
// 0px 1px 0 var(--color-lyric-shadow),
|
|
// 0px -1px 0 var(--color-lyric-shadow)
|
|
;
|
|
// text-shadow:
|
|
// -0.04em -0.04em 0 var(--color-lyric-shadow),
|
|
// // -0.04em 0.04em 0 var(--color-lyric-shadow),
|
|
// 0.04em 0.04em 0 var(--color-lyric-shadow),
|
|
// 0.04em -0.04em 0 var(--color-lyric-shadow),
|
|
// -0.04em 0px 0 var(--color-lyric-shadow),
|
|
// -0.04em 0px 0 var(--color-lyric-shadow),
|
|
// 0.04em 0px 0 var(--color-lyric-shadow),
|
|
// 0.04em 0px 0 var(--color-lyric-shadow),
|
|
// // 0px -0.03em 0 var(--color-lyric-shadow),
|
|
// 0px 0.04em 0 var(--color-lyric-shadow),
|
|
// // 0px 0.03em 0 var(--color-lyric-shadow),
|
|
// 0px -0.04em 0 var(--color-lyric-shadow);
|
|
|
|
// @maxi: 2 + 1;
|
|
// .i-loop (@i) when (@i > 0) {
|
|
// @maxj: 2 + 1;
|
|
// .j-loop (@j) when (@j > 0) {
|
|
// text-shadow+: (@i - 1)*(-1px) (@j - 1)*(-1px) 0 @color;
|
|
// text-shadow+: (@i - 1)*(-1px) (@j - 1)*(1px) 0 @color;
|
|
// text-shadow+: (@i - 1)*(1px) (@j - 1)*(1px) 0 @color;
|
|
// text-shadow+: (@i - 1)*(1px) (@j - 1)*(-1px) 0 @color;
|
|
// .j-loop(@j - 1);
|
|
// }
|
|
// .j-loop (0) {}
|
|
// .j-loop(@maxj);
|
|
// .i-loop(@i - 1);
|
|
// }
|
|
// .i-loop (0) {}
|
|
// .i-loop(@maxi);
|
|
// text-shadow+: 0 0 0 @color;
|
|
}
|
|
|
|
.stroke3(@color) {
|
|
text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
0.04em -0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.04em -0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
-0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
-0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
0.01em -0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.01em -0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
-0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
0.01em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
0.01em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
-0.01em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
-0.01em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
0px 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
0px -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
0px -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
0px 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
0px 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
0px -0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
0px -0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
0px 0.01em 0 var(--color-lyric-shadow-font-mode);
|
|
// text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.04em -0.02em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.04em -0.02em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.04em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.02em -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.02em 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.01em -0.02em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.02em -0.02em 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.02em 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.01em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// 0.01em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.02em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// -0.02em 0px 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px -0.03em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px 0.04em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px 0.01em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px -0.02em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px -0.02em 0 var(--color-lyric-shadow-font-mode),
|
|
// 0px 0.01em 0 var(--color-lyric-shadow-font-mode);
|
|
}
|
|
|
|
.stroke2(@color) {
|
|
text-shadow: 2px 0 @color, -2px 0 @color, 0 2px @color, 0 -2px @color,
|
|
1px 1px @color, -1px -1px @color, 1px -1px @color, -1px 1px @color;
|
|
}
|
|
// .stroke2(@color) {
|
|
// // text-shadow: 1px 1px 2px @color;
|
|
// // text-shadow:
|
|
// // -1px -1px 0px @color,
|
|
// // 0px -1px 0px @color,
|
|
// // 1px -1px 0px @color,
|
|
// // -1px 0px 0px @color,
|
|
// // 1px 0px 0px @color,
|
|
// // -1px 1px 0px @color,
|
|
// // 0px 1px 0px @color,
|
|
// // 1px 1px 0px @color;
|
|
// // -webkit-text-stroke: 0.03em black;
|
|
// // -webkit-text-fill-color: @color;
|
|
// }
|