thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 02:41:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Sanitize HTML and merge styles into single file

Browse Source
This commit is contained in:
thiloho
2024-08-25 15:06:55 +02:00
parent 1c1aaf28e6
commit e7acc9749f
8 changed files with 574 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web-app/template-styles/common-styles.css
View File

@@ -102,6 +102,104 @@ body {
min-block-size: 100vh;
}
button,
label,
select,
[role="button"],
[role="option"],
label[for="toggle-mobile-preview"],
summary {
cursor: pointer;
}
input,
button,
textarea,
select,
a[role="button"],
label[for="toggle-mobile-preview"],
summary {
font: inherit;
color: inherit;
border: var(--border-primary);
border-radius: var(--border-radius);
padding-inline: var(--space-2xs);
padding-block: var(--space-3xs);
}
input,
textarea,
select {
background-color: var(--bg-primary);
}
textarea {
resize: vertical;
}
input[type="file"] {
inline-size: 100%;
}
input[type="color"] {
padding: 0;
}
a[role="button"] {
display: inline-block;
max-inline-size: fit-content;
text-decoration: none;
}
summary {
max-inline-size: fit-content;
}
button,
a[role="button"],
label[for="toggle-mobile-preview"],
summary {
background-color: var(--bg-secondary);
}
:is(button, a[role="button"], label[for="toggle-mobile-preview"], summary):hover {
background-color: var(--bg-tertiary);
}
:is(button, input, textarea, select, a, summary):focus,
#toggle-mobile-preview:checked + label {
outline: 0.125rem solid var(--color-accent);
outline-offset: 0.25rem;
}
form {
display: flex;
flex-direction: column;
gap: var(--space-s);
}
form > button[type="submit"] {
max-inline-size: 30ch;
}
form label {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
max-inline-size: 30ch;
}
form label:has(textarea) {
max-inline-size: 75ch;
}
form .file-field {
display: flex;
align-items: end;
gap: var(--space-2xs);
flex-wrap: wrap;
}
section {
display: flex;
flex-direction: column;
@@ -220,12 +318,3 @@ td {
padding-block: var(--space-3xs);
border: var(--border-primary);
}
summary {
cursor: pointer;
}
:is(a, summary):focus {
outline: 0.125rem solid var(--color-accent);
outline-offset: 0.25rem;
}