81 lines
1.2 KiB
SCSS
81 lines
1.2 KiB
SCSS
@use "sass:color";
|
|
|
|
// Palette: Catppuccin Mocha
|
|
// https://catppuccin.com/palette/
|
|
$base: #1e1e2e;
|
|
$text: #cdd6f4;
|
|
|
|
$mantle: #181825;
|
|
$crust: #11111b;
|
|
|
|
$overlay0: #6c7086;
|
|
$overlay1: #7f849c;
|
|
$overlay2: #9399b2;
|
|
|
|
$surface0: #313244;
|
|
$surface1: #45475a;
|
|
$surface2: #585b70;
|
|
|
|
$subtext0: #a6adc8;
|
|
$subtext1: #bac2de;
|
|
|
|
$red: #f38ba8;
|
|
$green: #a6e3a1;
|
|
$peach: #fab387;
|
|
$blue: #89b4fa;
|
|
$mauve: #8839ef;
|
|
|
|
h3 {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.qr {
|
|
img { width: 100% }
|
|
p { text-align: center; }
|
|
|
|
&.blocks {
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
width: calc(100vw - 1rem);
|
|
max-width: 45rem;
|
|
scroll: {
|
|
behavior: smooth;
|
|
snap-type: x mandatory;
|
|
}
|
|
|
|
&::-webkit-scrollbar { display: none; }
|
|
|
|
&:hover .block.qr:not(:hover) {
|
|
filter: blur(5px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
&.block {
|
|
flex: 0 0 calc(100vw - 2rem);
|
|
scroll-snap-align: start;
|
|
max-width: 13.666rem;
|
|
}
|
|
}
|
|
|
|
table, tbody {
|
|
vertical-align: baseline;
|
|
border-collapse: collapse;
|
|
|
|
tr {
|
|
border-radius: 10px;
|
|
|
|
&:hover {
|
|
background-color: color.change($surface1, $alpha:75%);
|
|
}
|
|
|
|
th {
|
|
text-align: unset;
|
|
}
|
|
|
|
th + td, td + td {
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
}
|