This commit is contained in:
parent
ff2a3a25e5
commit
a4a99789a9
23 changed files with 294 additions and 298 deletions
|
|
@ -1,23 +1,12 @@
|
|||
/*
|
||||
* 1. Utilise un meilleur modèle de boîte.
|
||||
* 2. Fait que seul font-size puisse influencer la taille du texte.
|
||||
* 3. Applique les schémas de couleurs.
|
||||
* 4. Utilise une indentation plus étroite.
|
||||
* 5. Permet l'usage de propriétés intrinsèques comme auto ou fit-content dans les animations.
|
||||
*/
|
||||
html {
|
||||
box-sizing: border-box; /* 1 */
|
||||
tab-size: 2; /* 4 */
|
||||
color-scheme: dark light; /* 3 */
|
||||
interpolate-size: allow-keywords; /* 6 */
|
||||
/* stylelint-disable */
|
||||
-moz-text-size-adjust: none; /* 2 */
|
||||
-webkit-text-size-adjust: none; /* 2 */
|
||||
text-size-adjust: none; /* 2 */
|
||||
box-sizing: border-box;
|
||||
tab-size: 2;
|
||||
color-scheme: dark light;
|
||||
interpolate-size: allow-keywords;
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
block-size: 100%;
|
||||
/* stylelint-enable */
|
||||
|
||||
/* scrollbar-gutter: stable; */
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -32,46 +21,24 @@ body {
|
|||
line-height: var(--line-height-comfortable);
|
||||
text-decoration-skip-ink: auto;
|
||||
text-rendering: geometricprecision;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Hérite le modèle de boîte de l'élément racine.
|
||||
* 2. Désactive toute marge pour partir de bases saines.
|
||||
* 3. Hérite toute propriété typographique et de couleur pour éviter des redéfinitions.
|
||||
*/
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
padding: 0; /* 2 */
|
||||
font: inherit; /* 3 */
|
||||
font-feature-settings: inherit; /* 3 */
|
||||
font-variation-settings: inherit; /* 3 */
|
||||
color: inherit; /* 3 */
|
||||
letter-spacing: inherit; /* 3 */
|
||||
word-spacing: inherit; /* 3 */
|
||||
}
|
||||
|
||||
/* Utilise une couleur particulière pour l'arrière-plan des éléments sélectionnés avec le curseur. */
|
||||
*::selection {
|
||||
color: var(--color-secondary);
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
/* TODO: Prendre en compte a11y-dialog */
|
||||
|
||||
/* Empêche le défilement de la page quand une modale est ouverte. */
|
||||
:where(html:has(dialog:modal[open])) {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
/* Retire les bordures et applique un modèle d'arrière-plan plus sain. */
|
||||
*:where(:not(progress, meter)) {
|
||||
box-sizing: inherit;
|
||||
border: 0 solid transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
color: inherit;
|
||||
letter-spacing: inherit;
|
||||
word-spacing: inherit;
|
||||
}
|
||||
|
||||
/* Classe pour cacher visuellement tout en restant accessible par les lecteurs d'écran. */
|
||||
:where(.visually-hidden:not(:focus, :active, :focus-within)) {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
|
@ -81,17 +48,14 @@ body {
|
|||
clip-path: inset(50%);
|
||||
}
|
||||
|
||||
/* Cache les éléments cachés. */
|
||||
:where([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Affiche un curseur « Désactivé » pour les éléments désactivés. */
|
||||
:where([disabled]) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Applique des contours de focus visibles. */
|
||||
:where(:focus-visible) {
|
||||
outline: currentcolor solid 0.2rem;
|
||||
outline-offset: 0.2rem;
|
||||
|
|
@ -101,12 +65,10 @@ body {
|
|||
scroll-margin-block: 8vh;
|
||||
}
|
||||
|
||||
/* Active une transition de page simple. */
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
/* Désactive animations et transitions pour les Utilisateurs le demandant explicitement. */
|
||||
@media (prefers-reduced-motion) {
|
||||
*, *::before, *::after {
|
||||
scroll-behavior: auto !important;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,11 @@
|
|||
/* Réinitialise l'apparence d'éléments interactifs. */
|
||||
:where(button, fieldset, input, select, legend, textarea) {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* Désactive le comportement étrange des <legend> au sein de <fieldset>. */
|
||||
:where(fieldset > legend) {
|
||||
float: left;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
/* Hauteur de ligne plus étroite pour les éléments interactifs. */
|
||||
:where(button, fieldset, input, label, select, textarea) {
|
||||
line-height: var(--line-height-compact);
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
@supports (resize: block) {
|
||||
:where(textarea) {
|
||||
resize: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Curseur de main pour les éléments interactifs cliquables. */
|
||||
:where(button, input, label, select) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -42,18 +23,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Évite le dépassement des textes. */
|
||||
:where(p, h1, h2, h3, h4, h5, h6) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) {
|
||||
inline-size: fit-content;
|
||||
display: inline-block;
|
||||
inline-size: auto;
|
||||
|
||||
@supports (inline-size: fit-content) {
|
||||
& {
|
||||
inline-size: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Les médias doivent occuper toute la longueur disponible au sein de leur propre bloc. */
|
||||
:where(img, picture, video, canvas, svg) {
|
||||
:where(img, picture, video, svg) {
|
||||
display: block;
|
||||
inline-size: auto;
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
}
|
||||
|
|
@ -62,50 +49,7 @@
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
:where(.fields) {
|
||||
padding: var(--s-4);
|
||||
}
|
||||
|
||||
:where(input[type="text"], input[type="number"]) {
|
||||
padding: var(--s-4);
|
||||
}
|
||||
|
||||
:where(input[type="radio"]) {
|
||||
position: relative;
|
||||
aspect-ratio: 1/1;
|
||||
inline-size: var(--s-1);
|
||||
block-size: var(--s-1);
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 50%;
|
||||
background: var(--color-secondary);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
inline-size: var(--s-2);
|
||||
block-size: var(--s-2);
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
+ label {
|
||||
padding-left: var(--s-2);
|
||||
}
|
||||
}
|
||||
|
||||
:where(input[type="radio"]:checked) {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:where(fieldset > legend) {
|
||||
margin-block-end: var(--s0);
|
||||
}
|
||||
/* Formulaires */
|
||||
|
||||
/*
|
||||
* Empêche les marqueurs de listes de modifier la hauteur de ligne sur Firefox.
|
||||
|
|
@ -114,3 +58,22 @@
|
|||
::marker {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
:where(input[type="text"], input[type="number"]) {
|
||||
min-inline-size: initial;
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
resize: vertical;
|
||||
|
||||
@supports (resize: block) {
|
||||
& {
|
||||
resize: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:where(fieldset > legend) {
|
||||
float: left;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@
|
|||
--color-tertiary: dimgrey;
|
||||
--color-quartary: #be2727;
|
||||
|
||||
/* Typographie */
|
||||
|
||||
/* Hauteurs de ligne */
|
||||
--line-height-comfortable: 1.4;
|
||||
--line-height-compact: 1.1;
|
||||
|
||||
/* Espacements de lettres */
|
||||
--letter-spacing-small: 1px;
|
||||
--letter-spacing-medium: 1.5px;
|
||||
|
||||
/* Échelles */
|
||||
--ratio: 1.4;
|
||||
--s-5: calc(var(--s-4) / var(--ratio));
|
||||
|
|
|
|||
|
|
@ -1,43 +1,47 @@
|
|||
.dialog {
|
||||
position: fixed; /* 1 */
|
||||
z-index: 2; /* 1 */
|
||||
inset: 0; /* 1 */
|
||||
display: flex; /* 2 */
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
background: var(--bg25-secondary);
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
display: none; /* 1 */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
position: relative; /* 2 */
|
||||
min-inline-size: 40ch;
|
||||
max-inline-size: 80ch;
|
||||
margin: auto; /* 1 */
|
||||
padding: initial;
|
||||
border: 1px solid var(--color-primary);
|
||||
background-color: var(--color-secondary);
|
||||
box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary);
|
||||
.dialog-content {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
border: 1px solid var(--color-primary);
|
||||
background-color: var(--color-secondary);
|
||||
box-shadow: 0.5rem 0.5rem 0 0 var(--color-primary);
|
||||
|
||||
header {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-block-end: 1px solid var(--color-primary);
|
||||
header {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-block-end: 1px solid var(--color-primary);
|
||||
|
||||
h2 {
|
||||
padding-inline: var(--s-1);
|
||||
font-size: var(--s1);
|
||||
h2 {
|
||||
padding-inline: var(--s-1);
|
||||
font-size: var(--s1);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: var(--s-1);
|
||||
font-family: Banquise, monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: var(--s-1);
|
||||
font-family: Banquise, monospace;
|
||||
font-weight: 500;
|
||||
main {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: start;
|
||||
padding: var(--s0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[aria-current] {
|
||||
font-weight: 125;
|
||||
}
|
||||
|
|
@ -1,17 +1,5 @@
|
|||
/*
|
||||
* 1. Affiche une bordure pour les thèmes à haut contraste sans augmenter la taille de la boîte.
|
||||
*/
|
||||
.box {
|
||||
padding: var(--s0, 1rem);
|
||||
background-color: var(--color-secondary, #fff);
|
||||
outline: 0.125rem solid transparent; /* 1 */
|
||||
outline-offset: -0.125rem; /* 1 */
|
||||
|
||||
/* border: 1px solid var(--color-primary); */
|
||||
}
|
||||
|
||||
/* Inverse les couleurs de la boîte. */
|
||||
.box.invert {
|
||||
color: var(--color-secondary, #fff);
|
||||
background-color: var(--color-primary, #000);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
/*
|
||||
* 1. Utilise un modèle de boîte excluant les marges internes du calcul de la longueur.
|
||||
* 2. Centre l'Élément avec des marges externes automatiques en ligne et une longueur maximale.
|
||||
* 3. Assure que des espaces latéraux sont présents.
|
||||
*/
|
||||
.center {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
box-sizing: content-box; /* 1 */
|
||||
max-inline-size: var(--max-width, 80rem); /* 2 */
|
||||
margin-inline: auto; /* 2 */
|
||||
padding-inline: var(--s0, 1rem) var(--s0, 1rem); /* 3 */
|
||||
box-sizing: content-box;
|
||||
max-inline-size: var(--layout-center-max-width);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--layout-center-inline-padding) var(--layout-center-inline-padding);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
.cluster {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: var(--s0, 1rem);
|
||||
gap: var(--layout-cluster-gap);
|
||||
align-items: center;
|
||||
|
||||
/* justify-content: center; */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
.with-sidebar {
|
||||
--gutter: var(--s0);
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: var(--gutter, var(--s0));
|
||||
gap: var(--layout-sidebar-gap);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.with-sidebar > :first-child {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-inline-size: 65%;
|
||||
min-inline-size: var(--layout-sidebar-first-child-min-inline-size);
|
||||
}
|
||||
|
||||
.with-sidebar > :last-child {
|
||||
flex-basis: 15ch;
|
||||
flex-basis: var(--layout-sidebar-last-child-basis);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
.stack {
|
||||
--space: var(--s0, 1rem);
|
||||
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -11,7 +9,7 @@
|
|||
}
|
||||
|
||||
.stack > * + * {
|
||||
margin-block-start: var(--space);
|
||||
margin-block-start: var(--layout-stack-margin-between-children);
|
||||
}
|
||||
|
||||
.stack:only-child {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,37 @@
|
|||
@import url("./default/animations.css");
|
||||
@import url("./default/buttons.css");
|
||||
@import url("./default/forms.css");
|
||||
@import url("./default/headings.css");
|
||||
|
||||
:root {
|
||||
--brkly-font-weight-regular: 100;
|
||||
--brkly-font-weight-semibold: 120;
|
||||
--banquise-font-weight: 400;
|
||||
|
||||
--root-background-color: var(--color-secondary);
|
||||
--root-text-color: var(--color-primary);
|
||||
--root-font-weight: var(--brkly-font-weight-regular);
|
||||
|
||||
--layout-center-max-width: 80rem;
|
||||
--layout-center-inline-padding: var(--s0);
|
||||
--layout-cluster-gap: var(--s0);
|
||||
--layout-sidebar-gap: var(--s0);
|
||||
--layout-sidebar-first-child-min-inline-size: 65%;
|
||||
--layout-sidebar-last-child-basis: 15rem;
|
||||
--layout-stack-margin-between-children: var(--s0);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: BRKLY, sans-serif;
|
||||
font-weight: 100;
|
||||
background: var(--color-secondary);
|
||||
color: var(--root-text-color);
|
||||
font-weight: var(--root-font-weight);
|
||||
background-color: var(--root-background-color);
|
||||
}
|
||||
|
||||
/* Pseudo-éléments et pseudos-sélecteurs */
|
||||
*::selection {
|
||||
color: var(--root-background-color);
|
||||
background-color: var(--root-text-color);
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
|
|
@ -12,20 +39,16 @@ body {
|
|||
}
|
||||
|
||||
.invert {
|
||||
font-weight: 120;
|
||||
color: var(--color-secondary);
|
||||
background-color: var(--color-primary);
|
||||
font-weight: var(--brkly-font-weight-semibold);
|
||||
color: var(--root-background-color);
|
||||
background-color: var(--root-text-color);
|
||||
|
||||
&::selection {
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--root-text-color);
|
||||
background-color: var(--root-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Banquise, monospace;
|
||||
}
|
||||
|
||||
.container {
|
||||
--max-width: 100%;
|
||||
--space: var(--s1);
|
||||
|
|
@ -52,23 +75,3 @@ main {
|
|||
#last-watched-media {
|
||||
--space: var(--s2);
|
||||
}
|
||||
|
||||
:is(input[type="text"], input[type="number"]) {
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0%, 49% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
src/styles/themes/default/animations.css
Normal file
15
src/styles/themes/default/animations.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes fade-in {
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0%, 49% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,27 @@
|
|||
button {
|
||||
--button-background-color: var(--color-secondary);
|
||||
--button-border-color: var(--color-primary);
|
||||
--button-background-color: var(--root-background-color);
|
||||
--button-border-color: var(--root-text-color);
|
||||
--button-font-weight: 100;
|
||||
--button-padding: var(--s-2);
|
||||
--button-text-color: var(--color-primary);
|
||||
--button-text-color: var(--root-text-color);
|
||||
|
||||
padding: var(--button-padding);
|
||||
border: 1px solid var(--button-border-color);
|
||||
font-weight: var(--button-font-weight);
|
||||
color: var(--button-text-color);
|
||||
background-color: var(--button-background-color);
|
||||
box-shadow: 4px 4px 0 0 var(--color-primary);
|
||||
box-shadow: 4px 4px 0 0 var(--root-text-color);
|
||||
|
||||
&:hover {
|
||||
--button-background-color: var(--color-primary);
|
||||
--button-border-color: var(--color-secondary);
|
||||
--button-font-weight: 120;
|
||||
--button-text-color: var(--color-secondary);
|
||||
--button-background-color: var(--root-text-color);
|
||||
--button-border-color: var(--root-background-color);
|
||||
--button-font-weight: var(--brkly-font-weight-semibold);
|
||||
--button-text-color: var(--root-background-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateX(2px) translateY(2px);
|
||||
box-shadow: 1px 1px 0 0 var(--color-primary);
|
||||
box-shadow: 1px 1px 0 0 var(--root-text-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
|
@ -30,11 +30,11 @@ button {
|
|||
|
||||
/* Inversion des couleurs. */
|
||||
&.invert {
|
||||
--button-background-color: var(--color-primary);
|
||||
--button-border-color: var(--color-secondary);
|
||||
--button-text-color: var(--color-secondary);
|
||||
--button-background-color: var(--root-text-color);
|
||||
--button-border-color: var(--root-background-color);
|
||||
--button-text-color: var(--root-background-color);
|
||||
|
||||
outline-color: var(--color-secondary);
|
||||
outline-color: var(--root-background-color);
|
||||
}
|
||||
|
||||
/* TODO: Déplacer dans un Composant. */
|
||||
|
|
@ -44,7 +44,7 @@ button {
|
|||
border: initial;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
color: var(--root-text-color);
|
||||
background: var(--bg75-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ button {
|
|||
outline-offset: initial;
|
||||
|
||||
&:hover {
|
||||
--button-border-color: var(--color-primary);
|
||||
--button-border-color: var(--root-text-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
|
@ -72,8 +72,8 @@ button {
|
|||
|
||||
&:active {
|
||||
transform: initial;
|
||||
border: 1px solid var(--color-primary);
|
||||
outline: 1px solid var(--color-secondary);
|
||||
border: 1px solid var(--root-text-color);
|
||||
outline: 1px solid var(--root-background-color);
|
||||
outline-offset: -0.1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
57
src/styles/themes/default/forms.css
Normal file
57
src/styles/themes/default/forms.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
:root {
|
||||
--fields-padding: var(--s-4);
|
||||
--fieldset-legend-spacing: var(--s0);
|
||||
--input-border: 1px solid var(--root-text-color);
|
||||
--radio-marker-size: var(--s-2);
|
||||
--radio-marker-background-color: var(--root-text-color);
|
||||
--radio-background-color: var(--root-background-color);
|
||||
--radio-label-spacing: var(--s-2);
|
||||
}
|
||||
|
||||
/* Groupe de champs. */
|
||||
.fields {
|
||||
padding: var(--fields-padding);
|
||||
}
|
||||
|
||||
input[type="text"], input[type="number"] {
|
||||
padding: var(--fields-padding);
|
||||
border: var(--input-border);
|
||||
|
||||
&::selection {
|
||||
color: var(--root-text-color);
|
||||
background-color: var(--root-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: relative;
|
||||
aspect-ratio: 1/1;
|
||||
inline-size: var(--s-1);
|
||||
block-size: var(--s-1);
|
||||
border: var(--input-border);
|
||||
border-radius: 50%;
|
||||
background: var(--radio-background-color);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
inline-size: var(--radio-marker-size);
|
||||
block-size: var(--radio-marker-size);
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
background: var(--radio-marker-background-color);
|
||||
}
|
||||
|
||||
+ label {
|
||||
padding-left: var(--radio-label-spacing);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
:root {
|
||||
--headings-font-family: Banquise, monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Banquise, monospace;
|
||||
font-family: var(--headings-font-family);
|
||||
font-size: var(--s3);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1.5px;
|
||||
letter-spacing: var(--letter-spacing-medium);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Banquise, monospace;
|
||||
font-family: var(--headings-font-family);
|
||||
font-size: var(--s2);
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: var(--letter-spacing-small);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: Banquise, monospace;
|
||||
font-family: var(--headings-font-family);
|
||||
font-size: var(--s1);
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: var(--letter-spacing-small);
|
||||
}
|
||||
|
|
|
|||
5
src/styles/themes/default/links.css
Normal file
5
src/styles/themes/default/links.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
a {
|
||||
&[aria-current] {
|
||||
font-weight: var(--brkly-font-weight-semibold);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue