ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Spent way too much time on styling

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-27 16:38:50 -07:00
parent 7c1cc97bd2
commit 86d1529f4c
2 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -150,10 +150,10 @@
<div> <div>
<!-- <img class="logo" src="logo-davion.png" /> --> <!-- <img class="logo" src="logo-davion.png" /> -->
<p> <p>
Davion
<button type="button" class="clear-firing-arcs" data-allegiance="davion"> <button type="button" class="clear-firing-arcs" data-allegiance="davion">
Clear Firing Arcs Clear Firing Arcs
</button> </button>
<strong>Davion</strong>
<br> <br>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry --> 17th Kestral Mechanized Infantry -->
@ -211,10 +211,10 @@
<div> <div>
<!-- <img class="logo" src="logo-liao.png" /> --> <!-- <img class="logo" src="logo-liao.png" /> -->
<p> <p>
Liao
<button type="button" class="clear-firing-arcs" data-allegiance="liao"> <button type="button" class="clear-firing-arcs" data-allegiance="liao">
Clear Firing Arcs Clear Firing Arcs
</button> </button>
<strong>Liao</strong>
<br> <br>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard --> Aldebaran Home Guard -->

58
style.css
View File

@ -15,11 +15,18 @@ svg {
} }
div#content { div#content {
border-left: 1px solid gray;
flex-basis: 0; flex-basis: 0;
/* overflow: scroll; */ /* overflow: scroll; */
max-height: 100vh; max-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* padding: 2px; */
}
#content > div:first-of-type {
padding: 2px;
border-bottom: 1px solid gray;
} }
#record-sheet { #record-sheet {
@ -28,18 +35,36 @@ div#content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* display: none; */ /* display: none; */
background-color: gray;
} }
#record-sheet > div { #record-sheet > div {
padding: 0 2px; /* padding: 0 2px; */
max-height: 50%;
overflow-y: auto; 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 { #record-sheet > div > div {
border: 1px solid black; /* border: 1px solid black; */
margin: 2px 0; margin-bottom: 1px;
padding: 2px; 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;
} }
circle#point { circle#point {
@ -119,6 +144,7 @@ line.ruler {
display: inline-block; display: inline-block;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
background-color: white;
} }
image#img1 { image#img1 {
@ -169,10 +195,30 @@ rect#debug-view-box {
@media (width >= 1800px) { @media (width >= 1800px) {
#record-sheet { #record-sheet {
flex-direction: row; flex-direction: row;
/* gap: 2px; */
}
#record-sheet > div > p {
margin-top: 0;
} }
#record-sheet > div { #record-sheet > div {
max-height: unset; /* max-height: unset; */
overflow-y: unset; overflow-y: unset;
height: min-content;
}
#record-sheet div:last-of-type {
margin-top: 0;
}
#record-sheet > div:first-of-type > div {
/* margin-left: 1px; */
margin-right: 1px;
}
#record-sheet > div:last-of-type > div {
margin-left: 1px;
/* margin-right: 1px; */
} }
} }