diff --git a/Discworld/discworld.css b/Discworld/discworld.css index e9ace2eb6d..1950a2cfb9 100644 --- a/Discworld/discworld.css +++ b/Discworld/discworld.css @@ -1371,7 +1371,7 @@ body.sheet-darkmode .tab-content .charsheet { .flexcol { display: flex; flex-direction: column; - align-items: center; + align-items: start; } /* --- Header & Portrait Styles --- */ @@ -1386,9 +1386,10 @@ header.sheet-header > * { font-size: 1rem; } header.sheet-header .portrait-container { - flex: 0 0 calc(var(--sheet-header-height) * 1.2); - height: calc(var(--sheet-header-height) * 1.2); + flex: 0 0 calc(var(--sheet-header-height) * 1.5); + height: calc(var(--sheet-header-height) * 1.5); margin-right: unset; + margin-bottom: 1.5rem; filter: drop-shadow(2px 2px 6px var(--portrait-shadow)); overflow: hidden; position: relative; @@ -1410,7 +1411,7 @@ header.sheet-header .portrait-container .placeholder-avatar { z-index: 1; } header.sheet-header .portrait-container .portrait { - object-fit: cover; + object-fit: contain; mask-size: contain; mask-repeat: no-repeat; visibility: visible; @@ -1562,33 +1563,24 @@ header.sheet-header .header-data-container .document-details .detail-left.luck-c align-items: center; gap: 0.5ch; } +header.sheet-header .header-data-container .document-details .detail-left .input-label { + font-weight: bold; + font-size: 1.25rem; + font-family: var(--fontHeader); +} header.sheet-header .header-data-container .document-details .detail-left .number-input-container { display: flex; align-items: center; } -header.sheet-header .header-data-container .document-details .detail-left .luck-input[type=text][readonly] { +header.sheet-header .header-data-container .document-details .detail-left .luck-input { width: 2rem; - height: 1.8rem; - text-align: center; - border: 1px solid var(--placeholder-color); - background-color: transparent; - color: var(--font-color); - font-size: 1rem; - padding: 0; - -moz-appearance: textfield; -} -header.sheet-header .header-data-container .document-details .detail-left .luck-input[type=text][readonly]::-webkit-inner-spin-button, header.sheet-header .header-data-container .document-details .detail-left .luck-input[type=text][readonly]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; + font-weight: bold; } header.sheet-header .header-data-container .document-details .detail-left .number-input-controls { display: flex; flex-direction: column; - margin-left: 2px; } header.sheet-header .header-data-container .document-details .detail-left .arrow-button { - background: var(--callout-primary); - border: 1px solid var(--highlight-color); color: var(--title); height: 0.9rem; width: 1.2rem; @@ -1795,8 +1787,8 @@ section.tabs--discworld__container--traits hr { color: var(--title); border: none; height: 2px; - margin-top: 5px; - margin-bottom: 5px; + margin-top: 0px; + margin-bottom: 10px; background-image: linear-gradient(90deg, transparent 0%, var(--title) 50%, transparent 100%); } section.tabs--discworld__container--traits .trait-type { @@ -1867,7 +1859,7 @@ section.tabs--discworld__container--traits .trait-type .trait-list fieldset { } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item { display: grid; - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; position: relative; @@ -1875,6 +1867,12 @@ section.tabs--discworld__container--traits .trait-type .trait-list .trait-item { width: 100%; min-width: 0; } +section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .flexrow.trait-name > .adaptive--text { + width: fit-content; + flex-grow: 0; + min-width: 6rem; + margin-top: 2px; +} section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-roll-button { background-color: var(--title); z-index: 20; @@ -1934,8 +1932,8 @@ section.tabs--discworld__container--traits .trait-type .trait-list .trait-item . border: none; height: 2px; width: 100%; - margin-top: -5px; - margin-bottom: -5px; + margin-top: 0px; + margin-bottom: 5px; background-image: linear-gradient(90deg, transparent 0%, var(--placeholder-color) 0%, transparent 80%) !important; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded input, @@ -1944,30 +1942,35 @@ section.tabs--discworld__container--traits .trait-type .trait-list .trait-item . color: var(--font-color); } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded .adaptive--text { - flex: 1 1 auto; - min-width: 0; + flex: 0 0 auto; + width: 100%; min-height: 2rem; - max-height: 5rem; - padding-bottom: 0 !important; + font-size: 0.9rem; + line-height: 1.3; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded .adaptive--text__span { - display: block; - white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; + white-space: pre-wrap; + overflow: hidden; + font-size: inherit; + line-height: inherit; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded textarea.adaptive--text__textarea { - font-size: 0.8rem; - white-space: pre-wrap; + font-size: inherit; + line-height: inherit; word-wrap: break-word; overflow-wrap: break-word; + white-space: pre-wrap; + overflow: hidden; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded textarea.adaptive--text__textarea:focus { - min-height: 4rem; + min-height: 3rem; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .severity-row { gap: 0.25rem; flex: wrap; + margin-bottom: 5px; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .severity-row .severity-label { flex: 0 0 auto; @@ -1989,15 +1992,15 @@ section.tabs--discworld__container--traits .trait-type .trait-list .trait-item . section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .severity-row select option { color: var(--font-color); } -section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .adaptive--text { +section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-name .adaptive--text { overflow: hidden; min-width: 0; display: grid; align-content: center; width: 100%; } -section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .adaptive--text .adaptive--text__textarea, -section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .adaptive--text .adaptive--text__span { +section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-name .adaptive--text .adaptive--text__textarea, +section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-name .adaptive--text .adaptive--text__span { resize: none; background: transparent; border: none; diff --git a/Discworld/discworld.html b/Discworld/discworld.html index 067ad2fc2d..44c2137f7e 100644 --- a/Discworld/discworld.html +++ b/Discworld/discworld.html @@ -87,20 +87,24 @@