Better folder tabs and preview

2022-01-10 18:40:18 -05:00
parent 6b1158f828
commit d98f734c49
3 changed files with 28 additions and 12 deletions
@@ -2,6 +2,7 @@
 .sheet-character,
 .sheet-journal {
 	display: none;
+	position: relative;
 }

 .sheet-stat-label {
@@ -501,23 +502,37 @@
 	display: none;
 }

-.charsheet .sheet-selected-tab {
-	border-radius: 5px 5px 0px 0px;
-	border-width: 2px;
-	border-bottom-width: 0;
-	border-color: black;
-	color: black;
-	background-color: #E8EBF1;
-/*	font-weight: bold;*/
+.charsheet .sheet-tabrow {
+	position: absolute;
+	top: 0;
 }
-.charsheet .sheet-unselected-tab {
+
+.charsheet .sheet-selected-tab,
+.charsheet .sheet-unselected-tab,
+.charsheet .sheet-stub-tab {
 	border-radius: 5px 5px 0px 0px;
+	border-width: 3px;
 	border-bottom-width: 0;
+	font-style: italic;
+}
+
+.charsheet .sheet-stub-tab {
+	visibility: hidden;
+}
+
+.charsheet .sheet-unselected-tab {
 	color: grey;
 	border-color: grey;
 	background-color: white;
 }

+.charsheet .sheet-selected-tab {
+	padding-bottom: 4px; /* Make it ovewrite the border */
+	border-color: black;
+	color: black;
+	background-color: #E8EBF1;
+}
+
 .charsheet .sheet-select-radio:checked + button {
 	background-color: blue;
 }
@@ -1,9 +1,9 @@
 <!DOCTYPE html>

 <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='character'/>
-
 <div class='sheet-character'>
-	<div>
+	<button type="action" class=sheet-stub-tab>CharacterJournal</button>
+	<div class=sheet-tabrow>
 		<button type="action" class=sheet-selected-tab name="act_character">Character</button>
 		<button type="action" class=sheet-unselected-tab name="act_journal">Journal</button>
 	</div>
@@ -383,7 +383,8 @@
 	</div>
 </div>
 <div class='sheet-journal'>
-	<div>
+	<button type="action" class=sheet-stub-tab>CharacterJournal</button>
+	<div class=sheet-tabrow>
 		<button type="action" class=sheet-unselected-tab name="act_character">Character</button>
 		<button type="action" class=sheet-selected-tab name="act_journal">Journal</button>
 	</div>