From 1818218abb9451a96ad779ecba875d01878d77ef Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 20 May 2024 12:56:42 -0700
Subject: WIP: record sheet layout
---
public/assets/css/style.css | 256 +++++++++++++++++++-------------------------
1 file changed, 108 insertions(+), 148 deletions(-)
(limited to 'public/assets/css/style.css')
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 3e6842f..244b85f 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -53,98 +53,6 @@ div#status {
font-family: monospace;
}
-div#content {
- display: flex;
- border-left: 1px solid gray;
- flex-basis: 0;
- /* overflow: scroll; */
- max-height: 100vh;
- flex-direction: column;
- /* padding: 2px; */
- position: relative;
-}
-
-#content > div:first-of-type {
- padding: 2px;
- border-bottom: 1px solid gray;
-}
-
-#content #buttons {
- line-height: 1.5em;
-}
-
-#content input[type="checkbox"].visible {
- position: absolute;
- right: 0;
-}
-
-#record-sheet {
- /* max-height: 100%; */
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- /* display: none; */
- background-color: gray;
-}
-
-#record-sheet .name {
- text-transform: capitalize;
-}
-
-#record-sheet > div {
- /* padding: 0 2px; */
- overflow-y: auto;
- /* border: 1px solid black; */
-}
-
-#record-sheet > div > p {
- margin: 0;
- margin-top: 0px;
- margin-bottom: 1px;
- padding: 6px 2px;
- background-color: lightgray;
-}
-
-#record-sheet > div > div {
- /* border: 1px solid black; */
- margin-bottom: 1px;
- padding: 6px 4px;
- /* border-radius: 4px; */
-}
-
-#record-sheet > div:last-of-type {
- margin-top: 2px;
-}
-
-#record-sheet > div > div:last-of-type {
- margin-bottom: 0;
-}
-
-svg > defs > #point {
- fill: inherit;
- fill-opacity: inherit;
- stroke: inherit;
- stroke-width: inherit;
- stroke-opacity: inherit;
-}
-
-use[href="#point"] {
- opacity: 0;
- fill: teal;
- fill-opacity: 0.2;
- stroke: black;
- stroke-width: 0.5px;
-}
-
-use[href="#point"]:hover, use[href="#point"].hover {
- opacity: 1;
- fill: orange;
-}
-
-use[href="#point"].active {
- opacity: 0.2;
-}
-
polyline.move-trace {
stroke: gray;
stroke-dasharray: 2;
@@ -159,17 +67,6 @@ g#grid {
fill: #bacae3;
}
-#map2 {
- transform-origin: 0px 0px;
- transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
-}
-
-#map3 {
- transform-origin: 0px 0px;
- /* transform: translateY(1518px); */
- transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
-}
-
#panel {
display: none;
position: absolute;
@@ -196,12 +93,6 @@ g#grid {
transform: rotate(180deg);
}
-.weapon-symbol :not(use[href="#counter-base"]) {
- stroke: white;
- stroke-width: 0.75;
- fill: none;
-}
-
g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
@@ -227,33 +118,6 @@ g.troop-counter [href="#counter-prone"] {
transform: translate(-5px, 6px);
}
-g#points g use.counter {
- r: 5px;
-}
-
-g#points g.hover use[href="#point"] {
- opacity: 1;
- fill: orange;
-}
-
-g#points g.hover use.counter {
- r: 7px;
-}
-
-g#points use.clone {
- stroke: white;
- stroke-width: 0.5px;
- stroke-dasharray: 1;
-}
-
-g#points use[data-allegiance="defender"].clone {
- fill: rgb(255, 126, 126);
-}
-
-g#points use[data-allegiance="attacker"].clone {
- fill: rgb(130, 190, 130);
-}
-
text.counter, #troop-counter text {
font-size: 12px;
font-weight: bold;
@@ -269,14 +133,6 @@ text.counter, #troop-counter text {
user-select: none;
}
-polygon.firing-arc[data-allegiance="defender"] {
- fill: red;
-}
-
-polygon.firing-arc[data-allegiance="attacker"] {
- fill: blue;
-}
-
#shapes {
opacity: 0.1;
}
@@ -312,7 +168,11 @@ button.set-firing-arc img {
margin-right: .4em;
}
-.soldier-record[data-allegiance="attacker"] svg {
+polygon.firing-arc[data-allegiance="defender"] {
+ fill: red;
+}
+
+polygon.firing-arc[data-allegiance="attacker"] {
fill: blue;
}
@@ -320,6 +180,10 @@ button.set-firing-arc img {
fill: red;
}
+.soldier-record[data-allegiance="attacker"] svg {
+ fill: blue;
+}
+
.soldier-record svg {
width: 20px;
height: 20px;
@@ -336,6 +200,12 @@ button.set-firing-arc img {
font-family: monospace;
}
+.weapon-symbol :not(use[href="#counter-base"]) {
+ stroke: white;
+ stroke-width: 0.75;
+ fill: none;
+}
+
.soldier-record.selected {
background-color: khaki;
}
@@ -383,10 +253,91 @@ input[type="file"] {
display: none;
}
-@media (width >= 1800px) {
+
+
+div#content {
+ display: flex;
+ border-left: 1px solid gray;
+ flex-basis: 0;
+ /* overflow: scroll; */
+ max-height: 100vh;
+ flex-direction: column;
+ /* padding: 2px; */
+ position: relative;
+}
+
+#content > div:first-of-type {
+ padding: 2px;
+ border-bottom: 1px solid gray;
+}
+
+#content #buttons {
+ line-height: 1.5em;
+}
+
+#content input[type="checkbox"].visible {
+ position: absolute;
+ right: 0;
+}
+
+#record-sheet {
+ /* max-height: 100%; */
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ /* display: none; */
+ background-color: gray;
+}
+
+#record-sheet .name {
+ text-transform: capitalize;
+}
+
+#record-sheet > div {
+ /* padding: 0 2px; */
+ overflow-y: auto;
+ /* border: 1px solid black; */
+}
+
+#record-sheet > div > p {
+ margin: 0;
+ margin-top: 0px;
+ margin-bottom: 1px;
+ padding: 6px 2px;
+ background-color: lightgray;
+}
+
+#record-sheet .soldier-record {
+ /* border: 1px solid black; */
+ margin-bottom: 1px;
+ padding: 6px 4px;
+ /* border-radius: 4px; */
+}
+
+#record-sheet > div:last-of-type {
+ margin-top: 2px;
+}
+
+#record-sheet > div > div:last-of-type {
+ margin-bottom: 0;
+}
+
+
+
+/* @media (width >= 1800px) { */
+@media (width >= 10px) {
#record-sheet {
flex-direction: row;
/* gap: 2px; */
+ overflow-y: unset;
+ min-height: 0;
+ flex-grow: 1;
+ /* height: 100%;
+ max-height: 100%; */
+ }
+
+ #record-sheet * {
+ /* display: none; */
}
#record-sheet > div > p {
@@ -395,8 +346,17 @@ input[type="file"] {
#record-sheet > div {
/* max-height: unset; */
- overflow-y: unset;
- height: min-content;
+ /* overflow-y: unset; */
+ /* height: min-content; */
+ display: flex;
+ flex-direction: column;
+ }
+
+ #record-sheet .records {
+ /* max-height: 100vh; */
+ /* height: 561px; */
+ /* height: min-content; */
+ overflow-y: auto;
}
#record-sheet div:last-of-type {
--
cgit v1.2.3