diff --git a/stroll.html b/stroll.html
index f3545ba..bd48fd0 100644
--- a/stroll.html
+++ b/stroll.html
@@ -420,8 +420,8 @@
-
+
@@ -494,10 +494,6 @@
@@ -566,17 +566,17 @@
-
+
-
+
-
+
@@ -598,8 +598,8 @@
-
+
@@ -647,8 +647,8 @@
-
+
@@ -698,8 +698,8 @@
-
+
@@ -708,31 +708,27 @@
@@ -758,21 +754,21 @@
-
+
-
+
-
+
-
+
@@ -803,8 +799,8 @@
-
+
diff --git a/style.css b/style.css
index 5404d4e..79b2db9 100644
--- a/style.css
+++ b/style.css
@@ -299,10 +299,6 @@ body.dark input[type="checkbox"]:checked+
width: 500px;
}
-.flex-outer label {
- flex: 1 1 200px;
-}
-
.flex-outer input[type="radio"],
.flex-outer input[type="checkbox"] {
display: none;
@@ -311,6 +307,7 @@ body.dark input[type="checkbox"]:checked+
.flex-outer input[type="radio"] + label:not(.custom-header),
.flex-outer input[type="checkbox"] + label:not(.custom-header) {
user-select: none;
+ flex: 1 0 300px;
}
body.dark .flex-outer input[type="radio"] + label:not(.custom-header),
@@ -337,37 +334,28 @@ body.light .flex-outer input[type="checkbox"]:checked + label:not(.custom-header
background: #afa;
}
-.flex-outer > li > label + *,
-.flex-outer label + *,
-.flex-inner {
- flex: 1 0 100px;
+.flex-outer label {
+ flex: 0 1 40%;
+}
+
+.flex-outer label + * {
+ flex: 1 1 20%;
}
.preview {
- flex: 1 0 100px;
+ flex: 1 1 10%;
}
.flex-outer-sub {
padding: 0px;
+ align-items: center;
}
-.flex-outer-sub li,
-.flex-inner {
+.flex-outer-sub li {
display: flex;
flex-wrap: wrap;
align-items: center;
- width: 400px;
-}
-
-.flex-outer-sub label,
-.flex-outer-sub > div > div > li > label {
- flex: 1 0 150px;
-}
-
-.flex-outer-sub > li > label + *,
-.flex-outer-sub label + *,
-.flex-inner {
- flex: 1 0 200px;
+ width: 80%;
}
body.light .has-tooltip {