Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-09-11 17:42:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make relationships page responsive

Browse Source
This commit is contained in:
Corey Hickson
2024-07-22 20:03:51 -06:00
parent 60f911fb23
commit afccbb08bb
2 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Torchbearer 2E/src/scss/relationships.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@import './mixins.scss';
@import './variables.scss';
.ui-dialog .tab-content .charsheet .sheet-relationship-tab {
.sheet-relationship-tab {
.sheet-relationships-header {
@include section-header;
}
Torchbearer 2E/torchbearer.css
+44 -44
View File
@@ -231,9 +231,9 @@ input[type=radio].sheet-underlined + span,
-moz-appearance: number-input;
}
.sheet-persona-input.sheet-edit, .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-persona-input[class$=-input],
.sheet-persona-input.sheet-edit, .sheet-relationship-tab .sheet-persona-input[class$=-input],
.sheet-underlined-input.sheet-edit,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-underlined-input[class$=-input] {
.sheet-relationship-tab .sheet-underlined-input[class$=-input] {
border: none;
background-color: rgba(255, 255, 0, 0.2);
}
@@ -425,59 +425,59 @@ input[type=radio].sheet-tab.sheet-playing + span {
/* Edit/Play Mode Styles */
/* Common styles for sheet-edit */
.sheet-edit, .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input],
.sheet-edit, .sheet-relationship-tab [class$=-input],
.sheet-edit > select,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input] > select {
.sheet-relationship-tab [class$=-input] > select {
background-color: rgba(255, 255, 0, 0.2);
}
/* Define width for each specific sheet-edit */
.sheet-name .sheet-edit, .sheet-name .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-name [class$=-input] {
.sheet-name .sheet-edit, .sheet-name .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-name [class$=-input] {
width: 102px;
}
.sheet-stock .sheet-edit, .sheet-stock .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-stock [class$=-input] {
.sheet-stock .sheet-edit, .sheet-stock .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-stock [class$=-input] {
width: 103px;
}
.sheet-class .sheet-edit, .sheet-class .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-class [class$=-input] {
.sheet-class .sheet-edit, .sheet-class .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-class [class$=-input] {
width: 107px;
}
.sheet-home .sheet-edit, .sheet-home .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-home [class$=-input] {
.sheet-home .sheet-edit, .sheet-home .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-home [class$=-input] {
width: 101px;
}
.sheet-raiment .sheet-edit, .sheet-raiment .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-raiment [class$=-input] {
.sheet-raiment .sheet-edit, .sheet-raiment .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-raiment [class$=-input] {
width: 333px;
}
.sheet-parents .sheet-edit, .sheet-parents .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-parents [class$=-input] {
.sheet-parents .sheet-edit, .sheet-parents .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-parents [class$=-input] {
width: 90px;
}
.sheet-mentor .sheet-edit, .sheet-mentor .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-mentor [class$=-input] {
.sheet-mentor .sheet-edit, .sheet-mentor .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-mentor [class$=-input] {
width: 91px;
}
.sheet-friend .sheet-edit, .sheet-friend .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-friend [class$=-input] {
.sheet-friend .sheet-edit, .sheet-friend .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-friend [class$=-input] {
width: 98px;
}
.sheet-enemy .sheet-edit, .sheet-enemy .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-enemy [class$=-input] {
.sheet-enemy .sheet-edit, .sheet-enemy .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-enemy [class$=-input] {
width: 95px;
}
/* Hide sheet-edit when sheet-playing or sheet-editing is checked */
input[type=radio].sheet-playing:checked ~ .sheet-edit, .ui-dialog .tab-content .charsheet .sheet-relationship-tab input[type=radio].sheet-playing:checked ~ [class$=-input],
input[type=radio].sheet-playing:checked ~ .sheet-edit, .sheet-relationship-tab input[type=radio].sheet-playing:checked ~ [class$=-input],
input[type=radio].sheet-editing:checked ~ .sheet-play,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab input[type=radio].sheet-editing:checked ~ [class$=-display],
.sheet-relationship-tab input[type=radio].sheet-editing:checked ~ [class$=-display],
input[type=radio].sheet-playing:checked ~ .sheet-tabcontainer .sheet-edit,
input[type=radio].sheet-playing:checked ~ .sheet-tabcontainer .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input],
.ui-dialog .tab-content .charsheet .sheet-relationship-tab input[type=radio].sheet-playing:checked ~ .sheet-tabcontainer [class$=-input],
input[type=radio].sheet-playing:checked ~ .sheet-tabcontainer .sheet-relationship-tab [class$=-input],
.sheet-relationship-tab input[type=radio].sheet-playing:checked ~ .sheet-tabcontainer [class$=-input],
input[type=radio].sheet-editing:checked ~ .sheet-tabcontainer .sheet-play,
input[type=radio].sheet-editing:checked ~ .sheet-tabcontainer .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-display],
.ui-dialog .tab-content .charsheet .sheet-relationship-tab input[type=radio].sheet-editing:checked ~ .sheet-tabcontainer [class$=-display] {
input[type=radio].sheet-editing:checked ~ .sheet-tabcontainer .sheet-relationship-tab [class$=-display],
.sheet-relationship-tab input[type=radio].sheet-editing:checked ~ .sheet-tabcontainer [class$=-display] {
display: none;
}
@@ -836,10 +836,10 @@ input.sheet-condition-flag[value="1"] + .sheet-condition-display {
.sheet-town-abilities.sheet-nature {
width: 80px;
}
.sheet-raw-abilities input.sheet-edit, .sheet-raw-abilities .ui-dialog .tab-content .charsheet .sheet-relationship-tab input[class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-raw-abilities input[class$=-input],
.sheet-raw-abilities input.sheet-edit, .sheet-raw-abilities .sheet-relationship-tab input[class$=-input], .sheet-relationship-tab .sheet-raw-abilities input[class$=-input],
.sheet-town-abilities input.sheet-edit,
.sheet-town-abilities .ui-dialog .tab-content .charsheet .sheet-relationship-tab input[class$=-input],
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-town-abilities input[class$=-input] {
.sheet-town-abilities .sheet-relationship-tab input[class$=-input],
.sheet-relationship-tab .sheet-town-abilities input[class$=-input] {
width: 100px;
}
@@ -853,7 +853,7 @@ input.sheet-condition-flag[value="1"] + .sheet-condition-display {
.sheet-rating.sheet-nature {
width: 40px;
}
.sheet-rating.sheet-nature .sheet-edit, .sheet-rating.sheet-nature .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-rating.sheet-nature [class$=-input] {
.sheet-rating.sheet-nature .sheet-edit, .sheet-rating.sheet-nature .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-rating.sheet-nature [class$=-input] {
width: 12px !important;
}
.sheet-rating:not(.sheet-header-only) {
@@ -869,13 +869,13 @@ input.sheet-condition-flag[value="1"] + .sheet-condition-display {
line-height: 10px;
position: relative;
}
.sheet-advancement .sheet-edit, .sheet-advancement .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input], .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-advancement [class$=-input] {
.sheet-advancement .sheet-edit, .sheet-advancement .sheet-relationship-tab [class$=-input], .sheet-relationship-tab .sheet-advancement [class$=-input] {
width: 68px;
position: absolute;
top: -5px;
right: 0;
}
.sheet-advancement .sheet-edit select, .sheet-advancement .ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input] select, .ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-advancement [class$=-input] select {
.sheet-advancement .sheet-edit select, .sheet-advancement .sheet-relationship-tab [class$=-input] select, .sheet-relationship-tab .sheet-advancement [class$=-input] select {
width: 68px;
}
@@ -1477,7 +1477,7 @@ input.sheet-stigmata-flag[value="1"] ~ .sheet-stigmata {
width: 70px;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationships-header {
.sheet-relationship-tab .sheet-relationships-header {
color: #3155a4;
font-family: "Inknut Antiqua";
font-size: 20px;
@@ -1490,17 +1490,17 @@ input.sheet-stigmata-flag[value="1"] ~ .sheet-stigmata {
padding-left: 8px;
margin: 10px 0 5px;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationships-table-header > div {
.sheet-relationship-tab .sheet-relationships-table-header > div {
font-size: 12px;
font-weight: bold;
font-family: "Inknut Antiqua";
letter-spacing: -1px;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-input] {
.sheet-relationship-tab [class$=-input] {
padding: 4px 0;
text-indent: 4px;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab [class$=-display] {
.sheet-relationship-tab [class$=-display] {
word-wrap: break-word;
font-family: "Architects Daughter";
color: #3155a4;
@@ -1510,8 +1510,8 @@ input.sheet-stigmata-flag[value="1"] ~ .sheet-stigmata {
-webkit-text-stroke-color: #3155a4;
letter-spacing: normal;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationships-table-header,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-row {
.sheet-relationship-tab .sheet-relationships-table-header,
.sheet-relationship-tab .sheet-relationship-row {
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -1519,33 +1519,33 @@ input.sheet-stigmata-flag[value="1"] ~ .sheet-stigmata {
padding: 4px 0;
border-bottom: 1px solid rgba(150, 150, 150, 0.8);
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-row:last-child {
.sheet-relationship-tab .sheet-relationship-row:last-child {
margin-bottom: 4px;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-name-header,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-name-input,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-name-display {
.sheet-relationship-tab .sheet-relationship-name-header,
.sheet-relationship-tab .sheet-relationship-name-input,
.sheet-relationship-tab .sheet-relationship-name-display {
width: 0;
min-width: 150px;
flex-grow: 2;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-location-header,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-location-input,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-location-display {
.sheet-relationship-tab .sheet-relationship-location-header,
.sheet-relationship-tab .sheet-relationship-location-input,
.sheet-relationship-tab .sheet-relationship-location-display {
width: 0;
min-width: 150px;
flex-grow: 2;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-status-header,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-status-input,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-status-display {
.sheet-relationship-tab .sheet-relationship-status-header,
.sheet-relationship-tab .sheet-relationship-status-input,
.sheet-relationship-tab .sheet-relationship-status-display {
width: 0;
min-width: 100px;
flex-grow: 1;
}
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-notes-header,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-notes-input,
.ui-dialog .tab-content .charsheet .sheet-relationship-tab .sheet-relationship-notes-display {
.sheet-relationship-tab .sheet-relationship-notes-header,
.sheet-relationship-tab .sheet-relationship-notes-input,
.sheet-relationship-tab .sheet-relationship-notes-display {
width: 0;
min-width: 300px;
flex-grow: 8;