mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add styles
This commit is contained in:
parent
ef7ff8a97f
commit
480f45b80c
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -147,7 +147,7 @@
|
|||||||
"simple-home.vue.min.js": "7D7EF25D3628EEB09810D8A6F14C81483E2450AF2F61A442684552F6638D11E0",
|
"simple-home.vue.min.js": "7D7EF25D3628EEB09810D8A6F14C81483E2450AF2F61A442684552F6638D11E0",
|
||||||
"simple-home-categories.vue.min.js": "5CCB4D5D5EFFCFE2C498487FDF1B168980C3425523F8B4238D501BA3BA79EE3B",
|
"simple-home-categories.vue.min.js": "5CCB4D5D5EFFCFE2C498487FDF1B168980C3425523F8B4238D501BA3BA79EE3B",
|
||||||
"simple-home-feeds.vue.min.js": "EE124BFD22D450DA63E7B9DF8BB612DB5D62089F6CB912ACB87D0DF1BCBB099E",
|
"simple-home-feeds.vue.min.js": "EE124BFD22D450DA63E7B9DF8BB612DB5D62089F6CB912ACB87D0DF1BCBB099E",
|
||||||
"simple-home-normal-category.vue.min.js": "656BF1B07EB40166938FE6E0BB561BEFCA4E27AE06B8FFB2CCDE2107C741B533",
|
"simple-home-normal-category.vue.min.js": "C2035DB3E81EDD1202E5BB3F3FD9F32CEE2776B52662F25183E150366EBC8425",
|
||||||
"simplify-home.min.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
|
"simplify-home.min.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
|
||||||
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
|
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
|
||||||
"simplify-home.vue.min.js": "62F246FD5C9172676A077DD1DFB1F5ACE0E018952D13E1AAD89B3EA2FD00F961",
|
"simplify-home.vue.min.js": "62F246FD5C9172676A077DD1DFB1F5ACE0E018952D13E1AAD89B3EA2FD00F961",
|
||||||
@ -155,7 +155,7 @@
|
|||||||
"simplify-liveroom.min.js": "EF4E04DC4EE637EADE98FE756C81008EDEDF318352F9AEF7E44CA8C53250F409",
|
"simplify-liveroom.min.js": "EF4E04DC4EE637EADE98FE756C81008EDEDF318352F9AEF7E44CA8C53250F409",
|
||||||
"skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9",
|
"skip-charge-list.min.css": "D3C988CE131CEBFAC8A60360529C83EC4AE1B9EA122F9A6924F19963E25A4FE9",
|
||||||
"skip-charge-list.min.js": "D057258F8EE77D949147174585B1A8C640DDB74E0C0B711A50AEAC8D6792F49F",
|
"skip-charge-list.min.js": "D057258F8EE77D949147174585B1A8C640DDB74E0C0B711A50AEAC8D6792F49F",
|
||||||
"slideshow-cards.vue.min.js": "E56382EF5B5B64B2A83048FD7BEE715D73883560EF0091FDAF8F8FFF29E21397",
|
"slideshow-cards.vue.min.js": "5C26BEEB15430D2C069A5A4DC8EF92B69BEDEBBB660F65B8998AE73741D4F31F",
|
||||||
"slip.min.js": "0905C7F3B0BFA6535D48CA9A4D2DDCE0EDD83E66AA3D19AA3C1A6A53ECDD15FE",
|
"slip.min.js": "0905C7F3B0BFA6535D48CA9A4D2DDCE0EDD83E66AA3D19AA3C1A6A53ECDD15FE",
|
||||||
"style.min.css": "27223BD1ABBB5D8E529B13C009B5099F53F75B26AA713E4C660C205C1121495B",
|
"style.min.css": "27223BD1ABBB5D8E529B13C009B5099F53F75B26AA713E4C660C205C1121495B",
|
||||||
"superchat-translate.min.css": "F4874FE716A750AE0D21DA44393F286E5AABFFA949476E2FA06CDBE2748CF095",
|
"superchat-translate.min.css": "F4874FE716A750AE0D21DA44393F286E5AABFFA949476E2FA06CDBE2748CF095",
|
||||||
|
|||||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/simple-home-normal-category.vue.min.js
vendored
2
min/simple-home-normal-category.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/slideshow-cards.vue.min.js
vendored
2
min/slideshow-cards.vue.min.js
vendored
File diff suppressed because one or more lines are too long
@ -27,12 +27,20 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
:href="'https://www.bilibili.com/av' + c.aid"
|
:href="'https://www.bilibili.com/av' + c.aid"
|
||||||
>
|
>
|
||||||
<div class="cover">
|
<div v-if="index < 3" class="cover">
|
||||||
<dpi-img :src="c.coverUrl" :size="{ width: 200, height: 120 }"></dpi-img>
|
<dpi-img :src="c.coverUrl" :size="{ width: 200, height: 120 }"></dpi-img>
|
||||||
</div>
|
</div>
|
||||||
<div class="rank-number">{{index + 1}}</div>
|
<div class="rank-number">{{index + 1}}</div>
|
||||||
<div class="grow"></div>
|
<div v-if="index === 0 || index > 2" class="title">{{c.title}}</div>
|
||||||
<div class="title">{{c.title}}</div>
|
<!-- <div class="watchlater" v-if="c.watchlater !== null" :title="watchlater ? '已添加' : '稍后再看'">
|
||||||
|
<icon v-if="c.watchlater" type="mdi" icon="clock-outline"></icon>
|
||||||
|
<icon v-else type="mdi" icon="check-cricle"></icon>
|
||||||
|
</div>-->
|
||||||
|
<div class="details">
|
||||||
|
<div v-if="index > 0" class="title">{{c.title}}</div>
|
||||||
|
<div v-if="index > 0" class="cover">
|
||||||
|
<dpi-img :src="c.coverUrl" :size="{ width: 200, height: 120 }"></dpi-img>
|
||||||
|
</div>
|
||||||
<div class="up">
|
<div class="up">
|
||||||
<div class="points">
|
<div class="points">
|
||||||
<Icon icon="fire" type="mdi"></Icon>
|
<Icon icon="fire" type="mdi"></Icon>
|
||||||
@ -51,11 +59,9 @@
|
|||||||
<icon type="extended" icon="favorites"></icon>
|
<icon type="extended" icon="favorites"></icon>
|
||||||
<div class="number">{{c.favorites | bigNumber}}</div>
|
<div class="number">{{c.favorites | bigNumber}}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="watchlater" v-if="c.watchlater !== null" :title="watchlater ? '已添加' : '稍后再看'">
|
</div>
|
||||||
<icon v-if="c.watchlater" type="mdi" icon="clock-outline"></icon>
|
|
||||||
<icon v-else type="mdi" icon="check-cricle"></icon>
|
|
||||||
</div>-->
|
|
||||||
</a>
|
</a>
|
||||||
|
<div class="area-header">排行榜</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="new-activity loading"></div>
|
<div class="new-activity loading"></div>
|
||||||
@ -222,14 +228,23 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.category-view {
|
.category-view {
|
||||||
|
--loading-from: #d4d4d4;
|
||||||
|
--loading-to: #ddd;
|
||||||
|
--rank-width: 420px;
|
||||||
|
--rank-height: 250px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template:
|
grid-template:
|
||||||
'new-activity rank' 1fr
|
'new-activity rank' 1fr
|
||||||
'new-post rank' 1fr / 3fr 1fr;
|
'new-post rank' 1fr / 1fr var(--rank-width);
|
||||||
grid-gap: 24px;
|
grid-gap: 24px;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
--loading-from: #d4d4d4;
|
position: relative;
|
||||||
--loading-to: #ddd;
|
@media screen and (max-width: 1400px) {
|
||||||
|
& {
|
||||||
|
--rank-width: 290px;
|
||||||
|
--rank-height: 170px;
|
||||||
|
}
|
||||||
|
}
|
||||||
&,
|
&,
|
||||||
& *,
|
& *,
|
||||||
::after,
|
::after,
|
||||||
@ -258,20 +273,40 @@ export default {
|
|||||||
// height: 30vh;
|
// height: 30vh;
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
.area-header {
|
||||||
|
grid-area: header;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 11pt;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-flex;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
background-color: var(--theme-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.rank {
|
.rank {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 290px;
|
width: var(--rank-width);
|
||||||
grid-template:
|
grid-template:
|
||||||
'first first' 170px
|
'header header' auto
|
||||||
'second third' 85px/1fr 1fr;
|
'first first' calc(10px + var(--rank-height))
|
||||||
grid-gap: 10px;
|
'second third' calc(var(--rank-height) / 2 + 10px) / 1fr 1fr;
|
||||||
gap: 10px;
|
|
||||||
.rank-item {
|
.rank-item {
|
||||||
border-radius: 16px;
|
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
box-shadow: 0 4px 8px 0 #0001;
|
box-shadow: 0 4px 8px 0 #0001;
|
||||||
|
background-color: #fff;
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
body.dark & {
|
||||||
|
background-color: #282828;
|
||||||
|
}
|
||||||
.cover {
|
.cover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -301,33 +336,119 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background-color: #ddd;
|
z-index: 9;
|
||||||
body.dark & {
|
background-color: #8884;
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > :not(.cover):not(.rank-number) {
|
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
.be-icon {
|
.be-icon {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
&.mdi-fire {
|
||||||
|
transform: scale(calc(18 / 16));
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:first-child) {
|
||||||
|
& > .title {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 34px;
|
||||||
|
padding: 0 8px 0 34px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-color-30);
|
||||||
|
& > .title {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.details {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: calc(100% + 10px);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: var(--rank-width);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: stretch;
|
||||||
|
z-index: 10;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #fff;
|
||||||
|
padding: 8px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.cover {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: black;
|
||||||
|
img {
|
||||||
|
filter: blur(16px) brightness(0.5);
|
||||||
|
transform: scale(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.up,
|
||||||
|
.stats {
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
.be-icon:not(.mdi-fire) {
|
||||||
|
margin: 0 4px 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.up {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 10px 0 6px;
|
||||||
|
& > * {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stats {
|
||||||
|
margin: 8px;
|
||||||
|
.be-icon:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover .details {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child,
|
&:first-child,
|
||||||
&:nth-child(2),
|
&:nth-child(2),
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
|
border-radius: 16px;
|
||||||
.rank-number {
|
.rank-number {
|
||||||
background-color: var(--theme-color);
|
background-color: var(--theme-color);
|
||||||
color: var(--foreground-color);
|
color: var(--foreground-color);
|
||||||
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:nth-child(4) {
|
||||||
|
border-radius: 16px 16px 0 0;
|
||||||
|
}
|
||||||
|
&:nth-last-child(2) {
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
}
|
||||||
&:first-child {
|
&:first-child {
|
||||||
grid-area: first;
|
grid-area: first;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
&::after {
|
margin-bottom: 10px;
|
||||||
|
.details {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.cover::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -336,10 +457,7 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
background-image: linear-gradient(to top, #000a 0%, transparent 61%);
|
background-image: linear-gradient(to top, #000a 0%, transparent 61%);
|
||||||
z-index: 9;
|
z-index: 0;
|
||||||
}
|
|
||||||
.grow {
|
|
||||||
flex: 1 0 0;
|
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -347,6 +465,7 @@ export default {
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
.up {
|
.up {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -357,14 +476,11 @@ export default {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0 12px 0 6px;
|
padding: 0 12px 0 6px;
|
||||||
margin: 4px 0 8px 0;
|
margin: 4px 0 8px 0;
|
||||||
|
z-index: 10;
|
||||||
& > * {
|
& > * {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.mdi-fire {
|
|
||||||
transform: scale(calc(18 / 16));
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
.be-iconfont-up {
|
.be-iconfont-up {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
@ -392,6 +508,7 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 8px;
|
bottom: 8px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
.be-icon {
|
.be-icon {
|
||||||
margin: 0 2px 0 8px;
|
margin: 0 2px 0 8px;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@ -410,12 +527,22 @@ export default {
|
|||||||
}
|
}
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
grid-area: second;
|
grid-area: second;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
grid-area: third;
|
grid-area: third;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.new-activity {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
.new-post {
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
@each $name in ('new-activity', 'new-post', 'rank') {
|
@each $name in ('new-activity', 'new-post', 'rank') {
|
||||||
.#{$name} {
|
.#{$name} {
|
||||||
grid-area: unquote($name);
|
grid-area: unquote($name);
|
||||||
@ -425,6 +552,8 @@ export default {
|
|||||||
position: static;
|
position: static;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
.#{$name}:not(.loading) {
|
.#{$name}:not(.loading) {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@ -189,27 +189,9 @@ export default {
|
|||||||
--card-height: 300px;
|
--card-height: 300px;
|
||||||
--card-width: 500px;
|
--card-width: 500px;
|
||||||
grid-template:
|
grid-template:
|
||||||
'header header header' auto
|
'header header header header' auto
|
||||||
'cards operations info' var(--card-height) / var(--card-width) 1fr calc(1.2 *
|
'cards . operations info' var(--card-height) / var(--card-width) 40px 1fr calc(1.2 *
|
||||||
var(--card-width));
|
var(--card-width));
|
||||||
.area-header {
|
|
||||||
grid-area: header;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 11pt;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
display: inline-flex;
|
|
||||||
height: 10px;
|
|
||||||
width: 10px;
|
|
||||||
background-color: var(--theme-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.error {
|
.error {
|
||||||
grid-column: 1 / 4;
|
grid-column: 1 / 4;
|
||||||
grid-row: 2 / 3;
|
grid-row: 2 / 3;
|
||||||
@ -393,7 +375,7 @@ export default {
|
|||||||
& {
|
& {
|
||||||
--card-height: 200px;
|
--card-height: 200px;
|
||||||
--card-width: 330px;
|
--card-width: 330px;
|
||||||
grid-template-columns: var(--card-width) 1fr calc(1.4 * var(--card-width));
|
grid-template-columns: var(--card-width) 40px 1fr calc(1.4 * var(--card-width));
|
||||||
}
|
}
|
||||||
.info {
|
.info {
|
||||||
.title {
|
.title {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user