From b4820f591dbec04bc2e76a1254f2b1efd903fd78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bodo=20H=C3=BCsemann?= <bhuesemann@informationsfabrik.de>
Date: Thu, 20 Jan 2022 23:47:42 +0100
Subject: [PATCH] css fixes

---
 The One Ring 2e/sheet.css  | 53 ++++++++++++++++++-------------------
 The One Ring 2e/sheet.html | 54 +++++++++++++++++++-------------------
 2 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/The One Ring 2e/sheet.css b/The One Ring 2e/sheet.css
index 1f804685e5..73898fcd03 100644
--- a/The One Ring 2e/sheet.css	
+++ b/The One Ring 2e/sheet.css	
@@ -33,14 +33,25 @@
     font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
     font-weight: normal;
 }
+.charsheet {
+    /* Define CSS variables */
+    --red: rgb(176, 33, 30); 
+    --gray: rgb(104, 104, 104);
+    --solidborder: 1px solid var(--gray);
+    --borderred: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png');
+    --borderbrown: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png');
+    --background: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/background1.webp');
+	padding: 0px;
+}
+
 /*Configure the tab buttons*/
 .charsheet :is(.sheet-pc,.sheet-adversary) {
     display: none;
     position: relative;
-    background: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/background1.webp');
+    background: var(--background);
     background-color: #FEFCF0;
     border: 8px solid transparent;
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png');
+    border-image-source: var(--borderred);
     border-image-slice: 8 8 8 8;
     border-image-repeat: repeat;
     padding-right: 10px;
@@ -57,15 +68,6 @@
 .charsheet .sheet-tabstoggle[value="isAdversary"] ~ div.sheet-adversary {
     display: block;
 }
-.charsheet {
-    /* Define CSS variables */
-    --red: rgb(176, 33, 30); 
-    --gray: rgb(104, 104, 104);
-    --solidborder: 1px solid var(--gray);
-    --borderred: https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png;
-    --borderbrown: https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png;
-	padding: 0px;
-}
 /* Generic element styls */
 .charsheet :is(h1,h2,h3){
     font-family: "Aniron", "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
@@ -284,7 +286,7 @@ input[type='radio'] {
     justify-self: center;
     border: 4px solid transparent;
     background-color: var(--bg-color);
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png');
+    border-image-source: var(--borderbrown);
     border-image-slice: 8 8 8 8;
     border-image-repeat: repeat;
     width: 35px;
@@ -292,7 +294,7 @@ input[type='radio'] {
     transform: rotate(45deg);
 }
 .charsheet span.diamond-red {
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png');
+    border-image-source: var(--borderred);
 }
 .charsheet span[class|="diamond"] input[type="number"]{
     border-bottom: 0;
@@ -311,7 +313,7 @@ input[type='radio'] {
     justify-content: center;
     border: 4px solid transparent;
     background-color: var(--bg-color);
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png');
+    border-image-source: var(--borderbrown);
     border-image-slice: 8 8 8 8;
     border-image-repeat: repeat;
     width: 20px;
@@ -319,7 +321,7 @@ input[type='radio'] {
     transform: rotate(45deg);
 }
 .charsheet span.diamond-small-red {
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png');
+    border-image-source: var(--borderred);
 }
 .charsheet :is(span.diamond-small-red,span.diamond-small) span {
     background-color: var(--bg-color);
@@ -330,7 +332,7 @@ input[type='radio'] {
 .charsheet #content :is(#strength,#wits,#skill-strength,#skill-heart,#skill-wits,#conditions,#mount) {
 	border: 5px solid transparent;
 	/* background-color: var(--bg-color); */
-	border-image-source: url(https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png);
+	border-image-source: var(--borderbrown);
 	border-image-repeat: repeat;
 	margin: 0; 
 	box-sizing: border-box;
@@ -596,12 +598,6 @@ input[type='radio'] {
 .charsheet div.attribute input {
 	text-align: center;
 }
-.charsheet div.attribute .span2 {
-	column-span: 2;
-}
-.charsheet div.attribute .span3 {
-	column-span: 3;
-}
 
 /* Skills */
 .charsheet #skill-strength{
@@ -863,8 +859,9 @@ input[type='radio'] {
     --color-gray: rgb(104, 104, 104);
     --solidborder: 1px solid var(--gray);
     --bg-color: #FEFCF0;
-    --borderred: https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png;
-    --borderbrown: https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png;
+    --borderred: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png');
+    --borderbrown: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png');
+    --background: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/background1.webp');
 }
 .sheet-rolltemplate-tor * {	  
     font-family: Papyrus, 'Book Antiqua', Palatino, serif, sans-serif;
@@ -874,10 +871,10 @@ input[type='radio'] {
     margin-left: -7px;
 }
 .sheet-rolltemplate-tor .sheet-container {
-    background: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/background1.webp');
+    background: var(--background);
     background-color: #FEFCF0;
     border: 5px solid transparent;
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png');
+    border-image-source: var(--borderred);
     border-image-slice: 8 8 8 8;
     border-image-repeat: repeat;
 }
@@ -957,7 +954,7 @@ input[type='radio'] {
     justify-self: center;
     border: 4px solid transparent;
     background-color: var(--bg-color);
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-brown.png');
+    border-image-source: var(--borderbrown);
     border-image-slice: 8 8 8 8;
     border-image-repeat: repeat;
     width: 30px;
@@ -1002,7 +999,7 @@ input[type='radio'] {
     width: 45px !important;
     height: 45px !important;
     border: 5px solid transparent;
-    border-image-source: url('https://raw.githubusercontent.com/bhuesemann/roll20-character-sheets/tor2e_02-00-00/The%20One%20Ring%202e/assets/boxline-border-red.png');
+    border-image-source: var(--borderred);
     border-image-slice: 8 8 8 8;
     border-image-repeat: repeat;
 }
diff --git a/The One Ring 2e/sheet.html b/The One Ring 2e/sheet.html
index c33e434867..5ee43d81a8 100644
--- a/The One Ring 2e/sheet.html	
+++ b/The One Ring 2e/sheet.html	
@@ -1882,53 +1882,53 @@
 <rolltemplate class="sheet-rolltemplate-tor">
     <div class="sheet-container sheet-color-{{color}}">
         <div class="sheet-header">
-            {{#character-name}}<div class="sheet-title charname text-center">{{character-name}}</div>{{/character-name}}
-            {{#roll-name}}<div class="sheet-subtitle rollname text-center">{{roll-name}}</div>{{/roll-name}}
+            {{#character-name}}<div class="sheet-title sheet-text-center">{{character-name}}</div>{{/character-name}}
+            {{#roll-name}}<div class="sheet-subtitle sheet-text-center">{{roll-name}}</div>{{/roll-name}}
         </div>
         <div class="sheet-content">
-            <div class="full-col center die-title target-number">Target Number</div>
-            <div class="full-col center die-result target-number">
-                <span class="rotated-box"><span class="die-result">{{computed::target}}</span></span>
+            <div class="sheet-full-col sheet-center sheet-die-title sheet-target-number">Target Number</div>
+            <div class="sheet-full-col sheet-center sheet-die-result sheet-target-number">
+                <span class="sheet-rotated-box"><span class="sheet-die-result">{{computed::target}}</span></span>
             </div>
-            <div class="half-col die-title feat-label">Feat Die</div>
-            <div class="half-col die-title success-label">Success<br /> Dice</div>
+            <div class="sheet-half-col sheet-die-title sheet-feat-label">Feat Die</div>
+            <div class="sheet-half-col sheet-die-title sheet-success-label">Success<br /> Dice</div>
             {{#rollWasCrit() feat}}
-            <div class="half-col die-result feat-die">
-                <span class="rotated-box fullcrit">{{feat}}</span><span class="gandalf"></span>
+            <div class="sheet-half-col sheet-die-result sheet-feat-die">
+                <span class="sheet-rotated-box sheet-fullcrit">{{feat}}</span><span class="sheet-gandalf"></span>
             </div>
             {{/rollWasCrit() feat}}
             {{#rollWasFumble() feat}}
-            <div class="half-col die-result feat-die">
-                <span class="rotated-box fullfail">{{feat}}</span><span class="eye"></span>
+            <div class="sheet-half-col sheet-die-result sheet-feat-die">
+                <span class="sheet-rotated-box sheet-fullfail">{{feat}}</span><span class="sheet-eye"></span>
             </div>
             {{/rollWasFumble() feat}}
             {{#rollBetween() feat 1 10}}
-            <div class="half-col die-result feat-die">
-                <span class="rotated-box">{{feat}}</span>
+            <div class="sheet-half-col sheet-die-result sheet-feat-die">
+                <span class="sheet-rotated-box">{{feat}}</span>
             </div>
             {{/rollBetween() feat 1 10}}{{^feat}}
-            <div class="half-col die-result feat-die"><span class="rotated-box"><span>-</span></span></div>
+            <div class="sheet-half-col sheet-die-result sheet-feat-die"><span class="sheet-rotated-box"><span>-</span></span></div>
             {{/feat}}
-            <div class="half-col die-result success-die"><span class="rotated-box">{{r1}}</span></div>
-            <div class="half-col die-comment favoured">
+            <div class="sheet-half-col sheet-die-result sheet-success-die"><span class="sheet-rotated-box">{{r1}}</span></div>
+            <div class="sheet-half-col sheet-die-comment sheet-favoured">
                 {{#favoured}}{{favoured}}{{/favoured}}
             </div>
-            <div class="half-col die-comment modification">
+            <div class="sheet-half-col sheet-die-comment sheet-modification">
                 {{#modification}}Bonus {{modification}}{{/modification}}
             </div>
-            <div class="half-col die-comment favoured red">
+            <div class="sheet-half-col sheet-die-comment sheet-favoured sheet-red">
                 {{#miserable}}{{miserable}}{{/miserable}}
             </div>
-            <div class="half-col die-comment weary red">
+            <div class="sheet-half-col sheet-die-comment sheet-weary sheet-red">
                 {{#weary}}{{weary}}{{/weary}}
             </div>
-            <div class="full-col center die-result roll-total"><span class="rotated-box">{{computed::total}}</span>
+            <div class="sheet-full-col sheet-center sheet-die-result sheet-roll-total"><span class="sheet-rotated-box">{{computed::total}}</span>
             </div>
-            <div class="full-col center die-title roll-total">Total</div>
+            <div class="sheet-full-col sheet-center sheet-die-title sheet-roll-total">Total</div>
 <!-- 			<div class="full-col center die-result roll-diff"><span class="rotated-box">{{computed::diff}}</span></div>
             <div class="full-col center die-title roll-diff">Diff</div> -->
-            <div class="full-col center roll-outcome">
-                <div class="center die-title">
+            <div class="sheet-full-col sheet-center sheet-roll-outcome">
+                <div class="sheet-center sheet-die-title">
                     {{#rollLess() computed::outcome 1}}
                     {{#rollTotal() computed::outcome -2}}Miserable&nbsp;&nbsp;{{/rollTotal() computed::outcome -2}}
                     {{#rollTotal() computed::outcome -1}}Weary&nbsp;&nbsp;{{/rollTotal() computed::outcome -1}}
@@ -1948,15 +1948,15 @@
         </div>
         <div class="sheet-footer">
             {{#weaponinfo}}
-            <div class="full-col center additional">
-                <div class="center">
+            <div class="sheet-full-col sheet-center sheet-additional">
+                <div class="sheet-center">
                     {{weaponinfo}}
                 </div>
             </div>
             {{/weaponinfo}}
             {{#additional}}
-            <div class="full-col center additional">
-                <div class="center">
+            <div class="sheet-full-col sheet-center sheet-additional">
+                <div class="sheet-center">
                     {{additional}}
                 </div>
             </div>