slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modus für hohen Kontrast

Browse Source 
Modus für hohen Kontrast integriert
This commit is contained in:
Gorthian
2021-12-02 22:34:09 +01:00
parent 0aaf32bc05
commit b6d4148306
3 changed files with 86 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IAS-Freude-schoener-Goetterfunken/README.md
+3
View File
@@ -18,6 +18,9 @@ Das Projekt wurde inspiriert von Hitdice, die auch den Entwicklungsprozess in ve
# History
## 2021-11-28
- Feature: Hoher Kontrast einstellbar
## 2021-11-23
- Bugfix: Reroll bei 5 Würfeln
IAS-Freude-schoener-Goetterfunken/fsg.css
+67 -29
View File
@@ -1,27 +1,58 @@
/*
EDITED by Gorthian
INSPIRED by Hitdice (https://www.youtube.com/c/Hitdice)
Version 1.1
Letzte Änderung 2021-11-23
Version 1.2
Letzte Änderung 2021-11-28
GitHub https://github.com/Gorthian/FSG_CharacterSheet_Roll20
Wiki https://github.com/Gorthian/FSG_CharacterSheet_Roll20/wiki
*/
/************************************/
/* Normaler Kontrast */
/************************************/
.sheet-wrapper {
--sheet-bg : #645A51;
--sheet-text-color : #000000;
--container-bg : #645A51;
--title-bg : #D4B938;
--title-border : none;
--box-bg : #C2AF80;
--box-border : 1px solid #B5A883;
--input-border : 1px solid #000000;
--button-text-color : #000000;
}
/************************************/
/* Hoher Kontrast */
/************************************/
input.sheet-toggle-contrast:checked ~ .sheet-wrapper {
--sheet-bg : #FFFFFF;
--sheet-text-color : #FFFFFF;
--container-bg : #FFFFFF;
--title-bg : #000000;
--title-border : 1px solid #FFFFFF;
--box-bg : #000000;
--box-border : 1px solid #FFFFFF;
--input-border : 1px solid #FFFFFF;
--button-text-color : #000000;
}
/************************************/
/* GRID-Layout */
/************************************/
.sheet-fsg {
background-color : #645a51;
.sheet-fsg {
background-color : var(--sheet-bg);
color : var(--sheet-text-color);
display : grid;
grid-template-columns : auto 150px;
grid-template-areas : "status-effects sidebar"
"sheet-content sidebar"
"inventory inventory"
"who who"
"footer footer";
"high-contrast high-contrast"
"footer footer";
}
div.sheet-status-effects {
@@ -41,6 +72,7 @@ div.sheet-general {
"skills specials specials"
}
div.sheet-high-contrast {grid-area: high-contrast;}
div.sheet-eat {grid-area: eat;}
div.sheet-drink {grid-area: drink;}
div.sheet-home {grid-area: home;}
@@ -110,24 +142,28 @@ div.sheet-item-empty{grid-area: item-empty;}
/* Allgemeine Layouts */
/************************************/
.sheet-box {
background-color : #c2af80;
display : grid;
border : 1px solid #b5a883;
border-radius : 10px;
margin : 2px;
.sheet-hidden {
display : none;
}
.sheet-container {
background-color : #645a51;
display : grid;
border : none;
margin : 0;
.sheet-box {
background-color : var(--box-bg);
border : var(--box-border);
display : grid;
border-radius : 10px;
margin : 2px;
}
.sheet-container {
background-color : var(--container-bg);
display : grid;
border : none;
margin : 0;
}
div.sheet-status-stress, div.sheet-status-exhaustion, div.sheet-status-pain, div.sheet-status-hunger,
div.sheet-status-misc, div.sheet-status-advantage, div.sheet-status-disadvantage {
text-align : center;
text-align : center;
}
img.sheet-reserve-image, img.sheet-status-image {
@@ -135,15 +171,15 @@ img.sheet-reserve-image, img.sheet-status-image {
}
div.sheet-title, span.sheet-title {
background-color : #d4b938;
background-color : var(--title-bg);
border : var(--title-border);
max-height : min-content;
font-weight : bold;
border-radius : 10px;
}
span.sheet-attribute, span.sheet-skill, div.sheet-inventory input.sheet-number {
border : 1px black;
border-style : solid;
border : var(--input-border);
border-radius : 10px;
}
@@ -160,7 +196,7 @@ span.sheet-label {
span.sheet-reserve {
position : relative;
left : -10px;
border : 1px black;
border : var(--input-border);
border-style : solid solid solid none;
border-radius : 10px;
}
@@ -237,6 +273,7 @@ button.sheet-challenge:hover{
}
button.sheet-reroll {
color : var(--button-text-color);
position : relative;
top : 35px;
}
@@ -301,22 +338,23 @@ input[type=number] {
}
input.sheet-number {
color : var(--sheet-text-color);
width : 25px !important;
text-align : center;
border : 0;
background-color : rgba(0, 0, 0, 0);
color : black;
}
input.sheet-title {
color : var(--sheet-text-color);
font-weight : bold;
}
textarea.sheet-text, input.sheet-text {
color : var(--sheet-text-color);
width : 98%;
border : 0;
background-color : rgba(0, 0, 0, 0);
color : black;
}
textarea.sheet-text {
@@ -369,19 +407,19 @@ input.sheet-supress-effect:checked + span::before
/************************************/
.sheet-rolltemplate-challenge .sheet-template-container {
border : 1px solid;
background-color : #645a51 !important;
border : 1px solid #B5A883;
background-color : #645A51 !important;
}
.sheet-rolltemplate-challenge .sheet-template-header {
background-color : #d4b938;
background-color : #D4B938;
max-height : min-content;
font-weight : bold;
border-radius : 10px;
}
.sheet-rolltemplate-challenge .sheet-template-row {
background-color : #c2af80 !important;
background-color : #C2AF80 !important;
font-weight : bold;
display : grid;
@@ -395,4 +433,4 @@ input.sheet-supress-effect:checked + span::before
.sheet-rolltemplate-challenge .sheet-template-value {
grid-area : value;
}
}
IAS-Freude-schoener-Goetterfunken/fsg.html
+16 -11
View File
@@ -1,16 +1,17 @@
<!--
EDITED by Gorthian
INSPIRED by Hitdice (https://www.youtube.com/c/Hitdice)
Version 1.1
Letzte Änderung 2021-11-23
Version 1.2
Letzte Änderung 2021-11-28
GitHub https://github.com/Gorthian/FSG_CharacterSheet_Roll20
Wiki https://github.com/Gorthian/FSG_CharacterSheet_Roll20/wiki
//-->
<!-- Sheet //-->
<div class="sheet-wrapper sheet-content sheet-fsg">
<div class="sheet-container sheet-status-effects">
<input type="checkbox" class="sheet-toggle-contrast sheet-hidden" name="attr_HighContrast" /> <!-- Verstecktes Hilfsfeld zum Wechseln des Kontrasts //-->
<div class="sheet-wrapper sheet-content sheet-fsg">
<div class="sheet-container sheet-status-effects">
<div class="sheet-title sheet-status-stress">
<img class="sheet-status-image" src="https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/status-icon.png" />
<br/><button type="action" class="sheet-minus" name="act_stress-minus"></button><input type="number" class="sheet-number" name="attr_stress" placeholder="0" /><button type="action" class="sheet-plus" name="act_stress-plus"></button>
@@ -42,8 +43,8 @@
<br/><span data-i18n="disadvantage-u"></span>/<span data-i18n="advantage-u"></span>
</div>
</div>
<div class="sheet-container sheet-content">
<div class="sheet-general">
<div class="sheet-container sheet-content">
<div class="sheet-general">
<div class="sheet-box sheet-name">
<span class="sheet-title">
<input type="text" class="sheet-text" name="attr_name" placeholder="Name" />
@@ -153,9 +154,11 @@
</span>
</fieldset>
</div>
<div class="sheet-box sheet-specials">
<fieldset class="repeating_specials">
<span class="sheet-title"><input class="sheet-text sheet-title" type="text" name="attr_special_name" placeholder="Name der Spezialfähigkeit"/></span>
<div class="sheet-box sheet-specials">
<fieldset class="repeating_specials">
<span class="sheet-title">
<input class="sheet-text sheet-title" type="text" name="attr_special_name" placeholder="Name der Spezialfähigkeit"/>
</span>
<textarea class="sheet-text" name="attr_special_description" value=""></textarea>
</fieldset>
</div>
@@ -208,8 +211,7 @@
</div>
</div>
<div class="sheet-box sheet-sidebar">
<span class="sheet-title" data-i18n="challenge-u"></span>
<span class="sheet-title" data-i18n="challenge-u"></span>
<table>
<tr>
<td colspan="2">
@@ -376,6 +378,9 @@
<span data-i18n="i-hate-u"></span>
<textarea class="sheet-text" name="attr_i-hate" value=""></textarea>
</div>
<div class="sheet-high-contrast sheet-title">
<span>&nbsp;Hoher Kontrast&nbsp;</span><input type="checkbox" class="sheet-toggle-contrast" name="attr_HighContrast" /> <!-- Hohen Kontrast de/aktivieren //-->
</div>
<div class="sheet-box sheet-footer">
Created by Gorthian | Inspired by Hitdice | Copyright by Donnerhaus
<br/>More Infos: https://github.com/Gorthian/FSG_CharacterSheet_Roll20