Unify borders in layouts

This commit is contained in:
the1812 2021-12-19 21:56:52 +08:00
parent ac118759ef
commit a8cd53c237
4 changed files with 19 additions and 14 deletions

File diff suppressed because one or more lines are too long

View File

@ -22,7 +22,8 @@ body {
--home-max-width: var(--home-max-width-override, 1440px);
--home-content-height: 250px;
--home-card-radius: 12px;
--home-card-shadow: inset 0 0 0 1px #8882, 0 4px 12px 0 rgba(0, 0, 0, 0.05);
--home-card-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
--home-card-border: 1px solid #8882;
background-color: var(--home-base-color);
color: var(--home-color);
font-size: 12px;
@ -34,7 +35,7 @@ body {
--home-base-color: #181818;
--home-background-color: #282828;
--home-color: #eee;
--home-card-shadow: inset 0 0 0 1px #8882, 0 4px 12px 0 rgba(0, 0, 0, 0.2);
--home-card-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
}
}
html {

View File

@ -88,6 +88,7 @@ export default Vue.extend({
border-radius: var(--home-card-radius);
background-color: var(--home-background-color);
box-shadow: var(--home-card-shadow);
border: var(--home-card-border);
overflow: hidden;
@include v-stretch();
&-primary {
@ -109,7 +110,7 @@ export default Vue.extend({
}
&-other {
flex: 1;
padding: 8px;
padding: 6px;
@include h-stretch();
a {
flex: 1 0 0;

View File

@ -123,11 +123,13 @@ $max-card-count: 16;
&-cards {
display: flex;
--blackboard-width: 350px;
--blackboard-width-without-border: calc(var(--blackboard-width) - 2px);
--blackboard-height: var(--home-content-height);
--image-height: 197px;
width: var(--blackboard-width);
height: var(--blackboard-height);
box-shadow: var(--home-card-shadow);
border: var(--home-card-border);
border-radius: var(--home-card-radius);
background-color: var(--home-background-color);
overflow: hidden;
@ -179,9 +181,10 @@ $max-card-count: 16;
width: 40px;
}
&:checked:nth-of-type(#{$i}) ~ .fresh-home-blackboard-cards .fresh-home-blackboard-card {
transform: translateX(calc(-1 * #{$i - 1} * var(--blackboard-width))) scale(0.9);
transform:
translateX(calc(-1 * #{$i - 1} * var(--blackboard-width-without-border))) scale(0.9);
&:nth-of-type(#{$i}) {
transform: translateX(calc(-1 * #{$i - 1} * var(--blackboard-width)));
transform: translateX(calc(-1 * #{$i - 1} * var(--blackboard-width-without-border)));
img {
border-radius: var(--home-card-radius) var(--home-card-radius) 0 0;
}