b6e06ee6fc
Broken in49bc2364by the use of @extend. Here's what happened. There are two CSS rules that both apply to pool links: * a:link { color: var(--link-color); } * .pool-category-series a { color: var(--series-pool-color); } These rules have equal specificity (0-1-1). This means the rule that is defined last takes priority. This means the order in which CSS files are included matters.49bc2364used the @extend directive in a rule for popup menus, which required an @import, which changed the order of the CSS files, which made the a:link rule suddenly take priority over the series pool rule. The proper fix would be to use Sass's new @use directive instead of @import, but that requires the latest version of Sass, which requires the latest version of Webpacker, which we can't upgrade to yet because of breaking changes. The real moral of the story is: our CSS is very fragile because of specificity rules. It's very important that rules are defined in a certain order, otherwise our CSS will break. * https://sass-lang.com/documentation/at-rules/use * https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
71 lines
1.5 KiB
SCSS
71 lines
1.5 KiB
SCSS
:root {
|
|
--text-xs: 0.8em;
|
|
--text-sm: 0.9em;
|
|
--text-md: 1em;
|
|
--text-lg: 1.16667em;
|
|
--text-xl: 1.5em;
|
|
--text-xxl: 2em;
|
|
--header-font: Tahoma, Verdana, Helvetica, sans-serif;
|
|
--body-font: Verdana, Helvetica, sans-serif;
|
|
--monospace-font: 1.2em monospace;
|
|
}
|
|
|
|
$h1_padding: 0.8em 0 0.25em 0;
|
|
$h2_padding: 0.8em 0 0.25em 0;
|
|
$h3_padding: 0.8em 0 0.25em 0;
|
|
$h4_padding: 0.8em 0 0.25em 0;
|
|
|
|
@mixin animated-icon {
|
|
content: "►";
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--preview-icon-color);
|
|
background: var(--preview-icon-background);
|
|
margin: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
@mixin sound-icon {
|
|
content: "♪";
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--preview-icon-color);
|
|
background: var(--preview-icon-background);
|
|
margin: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
|
|
@mixin fa-solid-icon($content) {
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
content: $content;
|
|
}
|
|
|
|
@mixin active-link {
|
|
color: var(--link-color);
|
|
|
|
&:hover, &:focus {
|
|
background-color: var(--subnav-menu-background-color);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
@mixin inactive-link {
|
|
color: var(--muted-text-color);
|
|
|
|
&:hover {
|
|
color: var(--link-hover-color);
|
|
background-color: var(--subnav-menu-background-color);
|
|
}
|
|
}
|