diff --git a/Midgard German RPG/Midgard.css b/Midgard German RPG/Midgard.css index 34e0b7475c..2845148137 100644 --- a/Midgard German RPG/Midgard.css +++ b/Midgard German RPG/Midgard.css @@ -1,10 +1,10 @@ /* Set the min-width so that when the window is resized the look will stay consistant */ -.charsheet { +.charsheet { background-color: #ddd; - min-width: 1200px; + min-width: 1220px; } - + /* Universal styling applied to all elements of these types */ h2 { @@ -30,6 +30,7 @@ img { textarea { resize: vertical; + height: 300px; } /* Targetted styling that only effects elements with these classes */ @@ -39,27 +40,27 @@ input.sheet-short { input.sheet-checkbox { width: 14px; - height: 14px; + height: 14px; } select.sheet-ziel { - vertical-align: top; - width: 100px; + vertical-align: top; + width: 100px; } select.sheet-art { - vertical-align: top; - width: 100px; + vertical-align: top; + width: 100px; } select.sheet-prozess { - vertical-align: top; - width: 130px; + vertical-align: top; + width: 130px; } select.sheet-dtype { - vertical-align: top; - width: 60px; + vertical-align: top; + width: 60px; } span.sheet-dee { @@ -88,9 +89,13 @@ span.sheet-dee { } .sheet-columns { - display: flex; - justify-content: space-between; - width: 400px; + display: flex; + justify-content: space-between; + width: 400px; +} + +.sheet-hidden { + visibility: hidden; } @@ -98,7 +103,7 @@ span.sheet-dee { .sheet-Datenblatt, .sheet-Fertigkeiten, .sheet-Sprachen, -.sheet-Zauber, +.sheet-Zauber, .sheet-KampfK, .sheet-KampfZ, .sheet-Ausrustung, @@ -108,13 +113,61 @@ span.sheet-dee { } /* show the selected tab */ -.sheet-tabstoggle[value="Datenblatt"] ~ div.sheet-Datenblatt, -.sheet-tabstoggle[value="Fertigkeiten"] ~ div.sheet-Fertigkeiten, -.sheet-tabstoggle[value="Sprachen"] ~ div.sheet-Sprachen, -.sheet-tabstoggle[value="Zauber"] ~ div.sheet-Zauber, -.sheet-tabstoggle[value="KampfK"] ~ div.sheet-KampfK, -.sheet-tabstoggle[value="KampfZ"] ~ div.sheet-KampfZ, -.sheet-tabstoggle[value="Ausrustung"] ~ div.sheet-Ausrustung, -.sheet-tabstoggle[value="Notizen"] ~ div.sheet-Notizen, -.sheet-tabstoggle[value="NSC"] ~ div.sheet-NSC { - display: block; +.sheet-tabstoggle[value="Datenblatt"]~div.sheet-Datenblatt, +.sheet-tabstoggle[value="Fertigkeiten"]~div.sheet-Fertigkeiten, +.sheet-tabstoggle[value="Sprachen"]~div.sheet-Sprachen, +.sheet-tabstoggle[value="Zauber"]~div.sheet-Zauber, +.sheet-tabstoggle[value="KampfK"]~div.sheet-KampfK, +.sheet-tabstoggle[value="KampfZ"]~div.sheet-KampfZ, +.sheet-tabstoggle[value="Ausrustung"]~div.sheet-Ausrustung, +.sheet-tabstoggle[value="Notizen"]~div.sheet-Notizen, +.sheet-tabstoggle[value="NSC"]~div.sheet-NSC { + display: block; } + +/* Configure a container for the toggle */ +.sheet-toggle-container { + display: inline-flex; + flex-wrap: nowrap; + align-content: space-between; + align-items: center; + } + + /* Configure the button styling. This example makes it look like a checkbox. */ + button.sheet-toggle { + padding: 0; + border: solid 1px #a8a8a8; + cursor: pointer; + + width: 16px; + height: 16px; + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + + font-size: 12px; + } + + /* Hide the "checked" section of the toggle if the attribute value is not "1". */ + input.sheet-toggle:not([value="1"]) ~ button.sheet-toggle > span.sheet-checked { + display: none; + } + +/* CSS für Textareas bei Zaubern und Fertigkeiten (einklappen/ausklappen) */ + + div.sheet-section-hide { + display: none; +} + +input.sheet-section-toggle[value='1']~div.sheet-section-hide { + display: inline; +} + +/* CSS für Zauber und Fertigkeiten auf Kampfblättern */ + +div.sheet-repeating-display { + display:none; +} +input.sheet-repeating-show[value="1"] ~ div.sheet-repeating-display { + display: inline-block; +} \ No newline at end of file diff --git a/Midgard German RPG/Midgard.html b/Midgard German RPG/Midgard.html index cafd84fea3..1f9d3e5433 100644 --- a/Midgard German RPG/Midgard.html +++ b/Midgard German RPG/Midgard.html @@ -1,16 +1,23 @@ -

