移除列表选择框,新增键盘选择机制

This commit is contained in:
lyswhut
2020-04-26 22:06:13 +08:00
parent 3d52fa059e
commit cdbedf3d64
13 changed files with 608 additions and 129 deletions
+6
View File
@@ -53,6 +53,9 @@ table {
&:hover {
background-color: @color-theme_2-hover;
}
&.active {
background-color: @color-theme_2-active;
}
&:first-child {
border-top: none;
}
@@ -213,6 +216,9 @@ each(@themes, {
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&.active {
background-color: ~'@{color-@{value}-theme_2-active}';
}
}
}
}
+26 -26
View File
@@ -17,8 +17,8 @@
@color-theme_2: rgba(255, 255, 255, .9);
@color-theme_2-background_1: #fff;
@color-theme_2-background_2: fadeout(@color-theme_2-background_1, 2%);
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%);
@color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%);
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%);
@color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
@color-theme_2-font: darken(@color-theme_2, 70%);
@color-theme_2-font-label: fadeout(@color-theme_2-font, 40%);
@color-theme_2-line: lighten(@color-theme, 35%);
@@ -78,8 +78,8 @@
@color-green-theme_2: #fff;
@color-green-theme_2-background_1: #fff;
@color-green-theme_2-background_2: fadeout(@color-green-theme_2-background_1, 2%);
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
@color-green-theme_2-active: fadeout(darken(@color-green-theme, 5%), 70%);
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%);
@color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
@color-green-theme_2-font: darken(@color-green-theme_2, 70%);
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 40%);
@color-green-theme_2-line: lighten(@color-green-theme, 45%);
@@ -128,8 +128,8 @@
@color-yellow-theme_2: #fff;
@color-yellow-theme_2-background_1: #fff;
@color-yellow-theme_2-background_2: fadeout(@color-yellow-theme_2-background_1, 2%);
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 60%);
@color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 60%);
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
@color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
@color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 40%);
@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
@@ -177,8 +177,8 @@
@color-orange-theme_2: #fff;
@color-orange-theme_2-background_1: #fff;
@color-orange-theme_2-background_2: fadeout(@color-orange-theme_2-background_1, 2%);
@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 80%);
@color-orange-theme_2-active: fadeout(lighten(@color-orange-theme, 10%), 70%);
@color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 40%);
@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
@@ -226,8 +226,8 @@
@color-blue-theme_2: #fff;
@color-blue-theme_2-background_1: #fff;
@color-blue-theme_2-background_2: fadeout(@color-blue-theme_2-background_1, 2%);
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%);
@color-blue-theme_2-active: fadeout(darken(@color-blue-theme, 5%), 70%);
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%);
@color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
@color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 40%);
@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
@@ -273,8 +273,8 @@
@color-red-theme-font: #fff;
@color-red-theme-font-label: lighten(@color-red-theme, 35%);
@color-red-theme_2: #fff;
@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%);
@color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%);
@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 80%);
@color-red-theme_2-active: fadeout(lighten(@color-red-theme, 10%), 70%);
@color-red-theme_2-background_1: #fff;
@color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
@color-red-theme_2-font: darken(@color-red-theme_2, 70%);
@@ -326,8 +326,8 @@
@color-pink-theme_2: #fff;
@color-pink-theme_2-background_1: #fff;
@color-pink-theme_2-background_2: fadeout(@color-pink-theme_2-background_1, 2%);
@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 60%);
@color-pink-theme_2-active: fadeout(darken(@color-pink-theme, 5%), 60%);
@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%);
@color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
@color-pink-theme_2-font: darken(@color-pink-theme_2, 70%);
@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 40%);
@color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
@@ -375,8 +375,8 @@
@color-purple-theme_2: #fff;
@color-purple-theme_2-background_1: #fff;
@color-purple-theme_2-background_2: fadeout(@color-purple-theme_2-background_1, 2%);
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%);
@color-purple-theme_2-active: fadeout(darken(@color-purple-theme, 5%), 70%);
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%);
@color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
@color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 40%);
@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
@@ -424,8 +424,8 @@
@color-grey-theme_2: #fff;
@color-grey-theme_2-background_1: #fff;
@color-grey-theme_2-background_2: fadeout(@color-grey-theme_2-background_1, 2%);
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
@color-grey-theme_2-active: fadeout(darken(@color-grey-theme, 5%), 70%);
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%);
@color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
@color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 40%);
@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
@@ -472,8 +472,8 @@
@color-ming-theme-font: #fff;
@color-ming-theme-font-label: lighten(@color-ming-theme, 35%);
@color-ming-theme_2: #fff;
@color-ming-theme_2-hover: fadeout(lighten(@color-ming-theme, 10%), 75%);
@color-ming-theme_2-active: fadeout(darken(@color-ming-theme, 5%), 70%);
@color-ming-theme_2-hover: fadeout(lighten(@color-ming-theme, 10%), 85%);
@color-ming-theme_2-active: fadeout(lighten(@color-ming-theme, 10%), 75%);
@color-ming-theme_2-background_1: #fff;
@color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
@color-ming-theme_2-font: darken(@color-ming-theme_2, 70%);
@@ -525,8 +525,8 @@
@color-mid_autumn-theme_2: rgba(255, 255, 255, .93);
@color-mid_autumn-theme_2-background_1: #eeedef;
@color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 65%);
@color-mid_autumn-theme_2-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%);
@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
@color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
@color-mid_autumn-theme_2-font: darken(@color-mid_autumn-theme_2, 70%);
@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 63%);
@@ -574,8 +574,8 @@
@color-naruto-theme_2: rgba(255, 255, 255, 0.8);
@color-naruto-theme_2-background_1: #e9faff;
@color-naruto-theme_2-background_2: fadeout(@color-naruto-theme_2-background_1, 2%);
@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 65%);
@color-naruto-theme_2-active: fadeout(darken(@color-naruto-theme, 5%), 70%);
@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 75%);
@color-naruto-theme_2-active: fadeout(lighten(@color-naruto-theme, 10%), 65%);
@color-naruto-theme_2-font: darken(@color-naruto-theme_2, 80%);
@color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
@color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
@@ -623,8 +623,8 @@
@color-happy_new_year-theme_2: rgba(255, 199, 199, 0.8);
@color-happy_new_year-theme_2-background_1: #f2a4a4;
@color-happy_new_year-theme_2-background_2: fadeout(@color-happy_new_year-theme_2-background_1, 2%);
@color-happy_new_year-theme_2-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%);
@color-happy_new_year-theme_2-active: fadeout(darken(@color-happy_new_year-theme, 5%), 70%);
@color-happy_new_year-theme_2-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 65%);
@color-happy_new_year-theme_2-active: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%);
@color-happy_new_year-theme_2-font: darken(@color-happy_new_year-theme_2, 90%);
@color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
@color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);