mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2025-04-29 12:03:31 +08:00
b7b1a9b5d3
In Firefox the horizontal scrollbar looks very small. With a width set to `auto`, it looks bigger and better. In Chromium, without an automatic height, the new color changes do not appear. Now the horizontal scrollbar looks consistent in both chromium and firefox.
94 lines
1.9 KiB
SCSS
94 lines
1.9 KiB
SCSS
.section-card {
|
|
border-radius: var(--card-border-radius);
|
|
background-color: var(--card-background);
|
|
padding: var(--small-card-padding);
|
|
box-shadow: var(--shadow-l1);
|
|
margin-bottom: var(--section-separation);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
--separation: 15px;
|
|
|
|
.section-term {
|
|
font-size: 2.2rem;
|
|
margin: 0;
|
|
margin-top: calc(var(--separation) / 2);
|
|
color: var(--card-text-color-main);
|
|
|
|
& + .section-description {
|
|
margin-top: var(--separation);
|
|
}
|
|
}
|
|
|
|
.section-description {
|
|
font-weight: normal;
|
|
color: var(--card-text-color-secondary);
|
|
font-size: 1.6rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-details {
|
|
flex-grow: 1;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.section-image {
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
.section-count {
|
|
color: var(--card-text-color-tertiary);
|
|
font-size: 1.4rem;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.subsection-list {
|
|
margin-bottom: var(--section-separation);
|
|
overflow-x: auto;
|
|
|
|
/* scrollbar styles for Firefox */
|
|
scrollbar-width: auto;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
|
|
/* scrollbar styles for Chromium */
|
|
&::-webkit-scrollbar {
|
|
height: auto;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: var(--scrollbar-track);
|
|
}
|
|
/**/
|
|
|
|
.article-list--tile {
|
|
display: flex;
|
|
padding-bottom: 15px;
|
|
|
|
article {
|
|
width: 250px;
|
|
height: 150px;
|
|
margin-right: 20px;
|
|
flex-shrink: 0;
|
|
|
|
.article-title {
|
|
margin: 0;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.article-details {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|