From 67c47cbbd09a84f530f15ededb577e39a0f30c41 Mon Sep 17 00:00:00 2001
From: Dominic <git@msrd0.de>
Date: Tue, 10 Sep 2024 18:08:58 +0200
Subject: [PATCH] Nicer indication for when you selected a template
---
examples/static/schild.css | 3 +++
frontend/src/main.less | 23 +++++++++++++++--------
2 files changed, 18 insertions(+), 8 deletions(-)
diff --git a/examples/static/schild.css b/examples/static/schild.css
index 4463980..44cf298 100644
--- a/examples/static/schild.css
+++ b/examples/static/schild.css
@@ -12,8 +12,11 @@ body {
font-family: "Noto Sans", sans-serif;
padding: 0;
margin: 0;
+ background-color: #fff;
+ color: #000;
display: flex;
flex-direction: column;
+
@media not print {
/* This magic constant approximately corresponds to 48px at A4 size, but scales
* with the viewport/iframe size
diff --git a/frontend/src/main.less b/frontend/src/main.less
index 89c0e53..88bdb6b 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -1,5 +1,7 @@
// the threshold at which we consider the screen "mobile"
@mobile_threshold: 700px;
+// the border around the preview (per color)
+@preview_border: .3rem;
* {
box-sizing: border-box;
@@ -132,8 +134,8 @@ main {
/* A4 aspect ratio: √2:1 */
aspect-ratio: 1.4142135623730951;
- background-color: #fff;
- color: #000;
+ border: @preview_border solid var(--bg);
+ padding: @preview_border;
}
.preview-small {
@@ -168,6 +170,7 @@ textarea {
fieldset {
display: flex;
flex-wrap: wrap;
+ gap: 2 * @preview_border;
}
fieldset > div {
@@ -198,13 +201,17 @@ fieldset input {
fieldset img,
fieldset iframe,
.preview-small {
- border: 3px solid lightgray;
- border-radius: 10px;
+ border-color: var(--fg);
+ border-radius: 3 * @preview_border;
}
-input[type="radio"]:checked {
- & + label > img,
- & + iframe {
- border:3px solid red;
+input[type="radio"] {
+ &:checked + label > img,
+ &:checked + iframe {
+ border-color: var(--accent2);
+ }
+
+ &:not(:checked) + iframe {
+ opacity: .8;
}
}
--
GitLab