@import url("https://fonts.googleapis.com/css2?family=Martel:wght@400;800&family=Roboto:wght@300;400;500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Didact+Gothic"); @font-face { font-family: "atwriter"; src: url("../assets/font/another-typewriter/atwriter.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ } @font-face { font-family: TypeWriterCondensed; src: url("../assets/font/typewriter-condensed/typewcond_regular.otf") format("opentype"); } @font-face { font-family: TypeWriterCondensed; font-weight: bold; src: url("../assets/font/typewriter-condensed/typewcond_bold.otf") format("opentype"); } @font-face { font-family: TypeWriterCondensed; font-weight: 600; src: url("../assets/font/typewriter-condensed/typewcond_demi.otf") format("opentype"); } @font-face { font-family: "SpecialElite"; src: url("../assets/font/special_elite/SpecialElite-Regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ } @font-face { font-family: "PublicSans"; src: url("../assets/font/public-sans/PublicSans-VariableFont_wght.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ } /* Global styles */ .deltagreen section.window-content { scrollbar-color: #215112 #111 !important; padding: 0.5rem; color: black; /* Override for when in Foundry's dark mode */ input[type="checkbox"]:checked::before { color: black; /* Override for when in Foundry's dark mode */ } input[type="text"], input[type="number"], input[type="password"] { height: unset; line-height: 1.5rem; } } /* Character Sheet Style Options */ .window-content.outlaw-style, .window-content.cowboy-style { background: url("../assets/img/StainedPlainPaper10b.webp") !important; background-size: 100% !important; } .window-content.program-style { background: url("../assets/img/StainedPlainPaper10a.webp") !important; background-size: 100% !important; } .cowboy-style { font-family: "SpecialElite", sans-serif !important; } .outlaw-style, .program-style { font-family: "PublicSans", sans-serif !important; } .outlaw-style .cowboy-style .tabs [data-action="tab"] { background: rgba(173, 151, 101, 0.3); } .program-style .tabs [data-action="tab"] { background: rgba(138, 136, 133, 0.3); } .old-paper-background { background: url("../assets/img/StainedPlainPaper10.webp") !important; } .default-parchment-background { background: url("/ui/parchment.jpg") repeat !important; } .typewriter-condensed-font { font-family: "TypeWriterCondensed", sans-serif !important; } .martel-font { font-family: "Martel", sans-serif !important; } .signika-font { font-family: "Signika", sans-serif !important; } .atwriter-font { font-family: "atwriter", sans-serif !important; } .special-elite-font { font-family: "SpecialElite", sans-serif !important; } .public-sans-font { font-family: "PublicSans", sans-serif !important; } .rollable:hover, .rollable:focus { color: #000; text-shadow: 0 0 5px #374e13; cursor: pointer; } button.rollable.inline-roll { display: inline; margin: 0; padding: 0; border: none; background: transparent; font: inherit; color: inherit; line-height: inherit; vertical-align: baseline; } .not-rollable { color: #999999; } input.breaking-point-hit { color: rgb(255, 255, 255); background-color: rgb(117, 0, 0); font-weight: bold; } .dg-red { color: rgb(117, 0, 0); } .bottom-margin-5px { margin-bottom: 5px !important; } .grid-1col { display: grid; grid-column: span 1 / span 1; gap: 3px; } .grid, .grid-2col { display: grid; grid-column: span 2 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0px 0; padding: 0; } .grid-3col { grid-column: span 3 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4col { grid-column: span 4 / span 4; grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5col { grid-column: span 5 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6col { grid-column: span 5 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-7col { grid-column: span 7 / span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid-8col { grid-column: span 8 / span 8; grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid-9col { grid-column: span 9 / span 9; grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid-10col { grid-column: span 10 / span 10; grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid-11col { grid-column: span 11 / span 11; grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid-12col { grid-column: span 12 / span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); } /* If the user wishes to sort skills by column, we need to explicitly define a number of rows, rather than columns. */ .grid-13row { grid-template-rows: repeat(13, minmax(0, auto)) !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; grid-auto-flow: column !important; } .flex-group-center, .flex-group-left, .flex-group-right { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 2px; } .flex-thin-border { border: 1px solid #999; border-radius: 2px; border-left-color: darkslategray; border-left-width: 4px; } /* Make sure Special Training boxes are the same height as all other skill boxes */ .flex-thin-border.special-training-box { min-height: 27px; } .flex-mid-border { border: 1.5px solid rgb(0, 0, 0); border-radius: 2px; } .flex-group-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; padding: 0; } .flex-group-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: right; } .flex-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .flex-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .horizontal-flex-column { display: flex; flex-direction: column; } .flex-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; } .deltagreen .sheet-header { -webkit-box-flex: 0; -ms-flex: 0 0 400px; flex: 0 0 auto; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 8px; } .deltagreen .sheet-header .profile-img { height: 100px; flex: 0 0 100px; -webkit-box-flex: 0; -ms-flex: 0 0 100px; cursor: var(--cursor-pointer); /* Variable name from Foundry */ border: 1px solid black; margin-right: 5px; } .deltagreen .sheet-header .header-fields { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .deltagreen .sheet-header h1.charname { height: 55px; font-family: inherit; font-size: 2rem; padding: 0px; border-bottom: 0; margin-bottom: 0; } .deltagreen .sheet-header h1.charname input { width: 100%; height: 100%; margin: 0; } .deltagreen .resource-label { font-weight: bold; } .sheet nav.sheet-tabs { border-bottom: transparent !important; border-top: transparent !important; } .deltagreen .tabs { height: 1.5rem; line-height: 1.5rem; text-align: center; vertical-align: middle; margin-bottom: 0px !important; padding-bottom: 0px !important; } .deltagreen .tabs [data-action="tab"] { font-weight: bold; color: inherit; vertical-align: middle !important; height: inherit; line-height: inherit; padding-inline: 5px; border-radius: 5px 5px 0px 0px; border-color: #000; border: gray; border-width: 1px 1px 0px 1px; border-style: solid; } .deltagreen .tabs [data-action="tab"].active { text-shadow: none; font-style: italic; border: #000; border-width: 2px 2px 0px 2px; border-style: solid; } .deltagreen .tab { height: 100%; overflow-y: auto; border-color: #000; border-width: 2px; border-style: solid; border-radius: 3px; padding: 5px; } .deltagreen .program-style .tabs [data-action="tab"].active { background-color: #000000; color: #ffffff; } .deltagreen .cowboy-style .tabs [data-action="tab"].active { background-color: rgba(156, 115, 18, 0.3); color: #000000; } .deltagreen .items-list { list-style: none; /*margin: 7px 0; */ padding: 0; overflow-y: auto; } .deltagreen .items-list .item-header { font-weight: bold; display: flex; justify-content: center; align-items: center; } .deltagreen .items-list .item { min-height: 30px; line-height: 24px; padding: 3px 0; border-bottom: 1px solid #bbb; } .deltagreen .items-list .item .item-image { -webkit-box-flex: 0; -ms-flex: 0 0 24px; flex: 0 0 24px; margin-right: 5px; } .deltagreen .items-list .item .item-bond-damage { -webkit-box-flex: 0; -ms-flex: 0 0 24px; flex: 0 0 24px; margin: 0; align-self: center; justify-self: center; } .deltagreen .items-list .item img { display: block; } .deltagreen .items-list .item-name { display: flex; align-content: center; word-wrap: break-word; margin: 0; } .deltagreen .items-list .item-controls { -webkit-box-flex: 0; -ms-flex: 0 0 86px; flex: 0 0 86px; text-align: right; } .deltagreen .skill-and-training-controls { flex: 0 0 35px; } .deltagreen .action-pill { padding: 2px; border-radius: 2.5px; font-size: 0.8rem; font-weight: bold; background-color: rgba(0, 0, 0, 0.185); } .deltagreen[id^="dg-settings"] { .window-content > div.flexcol { gap: 1rem; } .form-group label { flex: unset; } } a.btn-tiny { height: 26px; margin-left: 5px; margin-right: 5px; font-size: 13px; padding-top: 1px; padding-bottom: 1px; padding-right: 5px; padding-left: 5px; text-decoration: none; background-color: #eeeeee; color: #333333; border-radius: 4px; line-height: 25px; border: 1px solid #333333; min-width: 20px; text-align: center; } span.left-aligned-label { justify-content: left; margin-left: 5px; } span.max-attribute-value-label { border: 1px solid rgb(122, 121, 113); border-radius: 3px; padding-top: 3px; padding-bottom: 1px; padding-left: 3px; padding-right: 3px; height: 26px; } .deltagreen .skill-label { margin: 2px; align-content: flex-start; } .deltagreen .skill-type-label { margin: 2px; } input.percentile-skill-input { flex: 0 0 40px; margin: 0 5px; height: 1.2rem; align-self: center; text-align: center; } input.checkbox-skill-input { flex: 0 0 20px; line-height: 10px; width: 1px; } input.checkbox-skill-input:disabled { visibility: hidden; } .deltagreen .sheet-header .header-top { margin-bottom: 5px; } .deltagreen .sheet-header .charname input { /* font-family: "SpecialElite", sans-serif; */ } .deltagreen .sheet-header h2.profession { font-family: inherit; font-size: 1.5rem; border-bottom: 0; margin-top: 5px; margin-bottom: 0; } .deltagreen .sheet-header h2.profession input { width: 100%; height: 40px; margin: 0; } div .simple-centered-flex-div { display: flex; align-items: center; } div input.fill-remaining-space { flex: 1; margin: 1px; text-align: left; } div span.bio-grid-label { margin: 1px; text-align: left; } .bio-grid-2col { display: grid; grid-template-columns: 100px auto; align-items: center; padding-bottom: 10px; row-gap: 10px; } .bio-grid-top-border { border-top: 0px solid #aaa; padding-top: 10px; } .bio-grid-5col { display: grid; grid-template-columns: 100px 100px 20px 120px auto; align-items: center; padding-bottom: 10px; } .bonds-grid-3col { display: grid; grid-template-columns: auto 50px max-content; align-items: center; padding-bottom: 10px; } .centered { text-align: center !important; } .breaking-point-grid-3col { display: grid; grid-template-columns: 20% 70px 65px; border-top: 0px solid #aaa; margin-bottom: 10px; border-bottom: 1px solid #aaa; align-content: center; justify-content: left; align-items: center; padding-bottom: 10px; padding-top: 10px; } .adaptation-grid-5col { display: grid; grid-template-columns: 30% 50px 50px 50px 200px; margin-top: 10px; margin-bottom: 10px; align-content: center; justify-content: left; align-items: center; padding-bottom: 5px; border-bottom: 0px solid #aaa; } .adapted-label { font-weight: bold; font-style: italic; color: rgb(139, 0, 0); } .weapon-grid-2col { display: grid; grid-template-columns: 48% 48%; margin-top: 10px; margin-bottom: 5px; justify-content: left; align-items: flex-end; padding: 0px; column-gap: 4%; } .centered-item-property { text-align: center; } .bolded-label { font-weight: bold; } .resource .labeled-resource-checkbox { vertical-align: middle; margin-bottom: 0; } .resource .first-aid-label { vertical-align: bottom; } div .motivation-section { border-bottom: 1px solid #aaa; margin-bottom: 10px; } div .bottom-left-justified-resource { vertical-align: bottom; text-align: left; } div .first-aid-received-section { display: grid; grid-template-columns: 40% 70px; border-bottom: 1px solid #aaa; margin-bottom: 10px; } div .exhausted-section { display: grid; grid-template-columns: 40% 70px; border-bottom: 1px solid #aaa; margin-bottom: 10px; } .exhausted-section input[type="number"] { width: 75px; color: rgb(139, 0, 0); text-align: center; background-color: rgba(0, 0, 0, 0.05); border: 1px solid rgb(122, 121, 113); border-radius: 3px; margin-left: 10px; margin-bottom: 5px; } .resource .exhaustion-label { vertical-align: middle; } .bonds-section-header { /* border-top: 1px solid #AAA; */ width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; } .about-section-header { border-top: 1px solid #aaa; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; } .tab.about { .dg-about-links { gap: 0.5rem; margin-bottom: 1rem; a { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; i { flex: 0 0 auto; } span { flex: 1 1 auto; line-height: 1.4; text-align: left; } } } .dg-about-legal { p { margin: 0.5rem 0; } } } textarea.wounds { resize: none; height: 100px; width: 100%; } .resource-inner-grid-3col { display: grid; grid-template-columns: 35% 30% 35%; align-items: center; text-align: center; } .resource-outer-grid-1col { display: grid; grid-template-columns: 100%; align-items: center; justify-content: center; border: 1.5px solid #000000; padding: 5px; grid-gap: 3px; text-align: center; border-radius: 2px; } div.max-resource-value { border: 1px solid rgb(122, 121, 113); border-radius: 3px; height: 100%; display: flex; justify-content: center; align-items: center; } .physical-stats-outer-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-content: center; text-align: center; padding: 5px; grid-gap: 5px; } .physical-stats-and-feature { border-radius: 2px; border: 1.5px solid #000000; } .attributes-wrapper { margin-block-end: 12px; } div.horizontal-bar-section-divider { display: grid; grid-template-columns: 100%; justify-content: center; align-items: center; text-align: center; margin-bottom: 3px; background: #000; color: #fff; height: 30px; border-radius: 3px 3px 3px 3px; } div.horizontal-bar-section-divider.skills-header { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; align-items: center; text-align: center; margin-bottom: 3px; background: #000; color: #fff; height: 30px; border-radius: 3px 3px 3px 3px; } .horizontal-bar-section-divider .skills-header-title { grid-column: 2; } .horizontal-bar-section-divider .toggle-untrained { grid-column: 3; padding-right: 0.5rem; justify-self: end; } div.horizontal-bar-section-header { display: grid; grid-template-columns: 100%; justify-content: center; align-items: center; text-align: center; margin-bottom: 3px; background: #000; color: #fff; height: 50px; } .physical-description-label { font-weight: bold; } .notes-wrapper { height: 100%; margin-block-start: 12px; } div.motivation-editor-container div.editor { height: 400px; min-height: 100% !important; } .deltagreen .editor-host { align-items: stretch; height: 100%; } .deltagreen .editor-host .editor { height: 100% !important; } .deltagreen .editor .editor-container { height: 100% !important; } /* I think all the stuff below is now obsolete .editor-host .tox .tox-editor-container { background: none !important; } .deltagreen .editor-host .tox { height: 100% !important; display: block; } .deltagreen .editor-host .tox-tinymce { height: 100% !important; display: block; } .deltagreen .editor-host .tox .tox-edit-area { position: inherit; min-height: 20px; height: 300px; } .deltagreen .tox-editor-header { background: none !important; } .deltagreen .tox .tox-edit-area { padding: 0 8px; } */ /* Item Sheet Common CSS */ .item-img { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; height: 100px; border: 0px solid black; } input.item-sheet-short-input { width: 75px; margin-right: 5px; margin-left: 5px; text-align: center !important; } .item-grid-button-row { vertical-align: middle !important; line-height: inherit; padding: 5px 0px 0px 10px; } /* Bonds Item Sheet */ .bond-sheet-grid-2col { display: grid; grid-template-columns: 25% 75%; align-items: center; justify-content: center; text-align: center; padding-left: 5px; grid-gap: 5px; } .bond-sheet-horizontal-grid-2col { display: grid; grid-template-columns: 150px auto; align-items: center; text-align: left; padding-bottom: 10px; column-gap: 10px; row-gap: 10px; padding-right: 5px; } /* Motivation Item Sheet */ .motivation-sheet-horizontal-grid-2col { display: grid; grid-template-columns: 50% 50%; align-items: center; justify-content: center; text-align: left; padding-left: 5px; grid-gap: 5px; } /* Armor Item Sheet */ .armor-sheet-grid-2col { display: grid; grid-template-columns: 25% 75%; align-items: center; justify-content: center; text-align: center; grid-gap: 5px; padding-bottom: 10px; padding-left: 5px; } .armor-sheet-horizontal-grid-2col { display: grid; grid-template-columns: 100px auto; align-items: center; text-align: left; column-gap: 10px; row-gap: 10px; padding-bottom: 10px; padding-right: 5px; } .armor-sheet-secondary-grid-2col { display: grid; grid-template-columns: 25% 75%; align-items: center; justify-content: left; text-align: left; grid-gap: 5px; padding-bottom: 10px; } /* Gear Item Sheet */ .gear-sheet-grid-2col { display: grid; grid-template-columns: 25% 75%; align-items: center; justify-content: center; text-align: center; grid-gap: 5px; padding-left: 5px; } .gear-sheet-horizontal-grid-2col { display: grid; grid-template-columns: 100px auto; align-items: center; text-align: left; column-gap: 10px; row-gap: 10px; padding-bottom: 10px; padding-right: 5px; } /* Weapon Item Sheet */ .weapon-sheet-grid-2col { display: grid; grid-template-columns: 25% 75%; align-items: center; justify-content: center; text-align: center; grid-gap: 5px; padding-left: 5px; } .weapon-sheet-horizontal-grid-2col { display: grid; grid-template-columns: 100px auto; align-items: center; text-align: left; column-gap: 10px; row-gap: 10px; padding-bottom: 10px; padding-right: 5px; } .weapon-sheet-outer-grid-2col { display: grid; grid-template-columns: 60% 40%; align-items: center; justify-content: center; text-align: center; padding-left: 5px; padding-right: 5px; column-gap: 10px; row-gap: 5px; } .weapon-sheet-horizontal-grid-left-2col { display: grid; grid-template-columns: 50% 50%; align-items: center; text-align: left; padding-bottom: 10px; column-gap: 10px; row-gap: 10px; padding-right: 10px; } .weapon-sheet-horizontal-grid-right-2col { display: grid; grid-template-columns: 60% 40%; align-items: center; text-align: left; padding-bottom: 10px; column-gap: 10px; row-gap: 10px; padding-right: 10px; } .weapon-sheet-secondary-grid-2col { display: grid; grid-template-columns: 40% 60%; align-items: center; justify-content: left; text-align: left; grid-gap: 5px; padding-right: 5px; } /* Tome Item Sheet */ .tome-sheet-horizontal-grid-2col { display: grid; grid-template-columns: 100px auto; align-items: center; text-align: left; column-gap: 10px; row-gap: 10px; padding-bottom: 10px; padding-right: 5px; } .tome-sheet-handler-info-horizontal-grid-2col { display: grid; grid-template-columns: max-content auto; align-items: center; text-align: left; column-gap: 10px; row-gap: 10px; padding-bottom: 10px; padding-right: 5px; } /* Unnatural Character Sheet Specific Classes */ .unnatural-notes-section { display: grid; grid-template-columns: 100%; align-items: left; justify-content: left; border: 1px solid #999; padding: 5px; grid-gap: 3px; text-align: left; } .skill-util-buttons { margin: 5px; .typed-skill-add { margin-right: 5px; } } a[data-action="applySkillImprovements"] { float: right; } .yellow-king { color: #a0912f; } .yellow-sign { font-weight: bold; text-shadow: 1px 1px #313a00; } .yellow-king-rotate1 { transform: rotate(3deg); } .yellow-king-rotate4 { transform: rotate(4deg); } .yellow-king-rotate2 { transform: rotate(-1deg); } .yellow-king-rotate3 { transform: rotate(5deg); } .yellow-king-grid-9col { display: grid; grid-template-columns: max-content 5px max-content max-content 20px max-content max-content 10px 35px; align-items: center; padding-bottom: 10px; } .yellow-king-grid-5col { display: grid; grid-template-columns: min-content 275px 20px min-content auto; align-items: center; padding-bottom: 10px; } .yellow-king-label { margin-right: 10px; } .yellow-king input, .yellow-king select, .yellow-king textarea { color: #a0912f; font-weight: bold; } .yellow-king textarea:focus, .yellow-king input:focus { color: #a0912f; } .top-div-border { border-top: 1px solid #aaa; margin-bottom: 10px; padding-bottom: 10px; padding-top: 10px; } .stat-block-input { min-height: 300px; resize: none; } .weapon-name-flexcontainer { display: flex; justify-content: flex-start; flex-direction: row; column-gap: 10px; } .weapon-name-flexitem { flex: content; align-self: flex-start; text-align: left; } .armor-piercing-chat-card-img { border-radius: 10%; height: 20px !important; width: 20px !important; margin: 0px; vertical-align: text-bottom; } /* Custom UI Styling Elements */ :root :not(.no-theme) { --color-shadow-primary: #374e13; --color-shadow-highlight: #406539; --color-border-highlight: #406539; --color-border-highlight-alt: #374e13; --color-underline-header: #406539; --color-text-dark-header: #406539; scrollbar-color: var(--color-text-dark-header) #111; } #pause img { content: url(../assets/img/DG_Pause_Icon.webp); } #interface:not(.no-theme) * { --color-shadow-primary: #215112 !important; --color-shadow-highlight: #215112 !important; --color-border-highlight: #215112 !important; --color-border-highlight-alt: #215112 !important; --color-underline-header: #215112 !important; --color-text-dark-header: #215112 !important; scrollbar-color: var(--color-text-dark-header) #111 !important; } #interface:not(.theme-light) * { --control-border-color: #215112; --control-hover-border-color: #215112; } /* The logo is defunct as of v13 */ #logo { content: url("../assets/img/Delta_Green_Logo.webp"); width: 90px; height: auto; padding-top: 10px; padding-bottom: 10px; } .target-proficiency-mod { color: #247c14; } .rollback-section { order: 99; display: flex; margin-top: 5px; align-items: center; justify-content: center; > i { margin: 5px; } } [data-action="rollback-skill-failure-state"] { align-items: center; display: inline-flex; justify-content: center; min-height: unset; width: 20px; height: 20px; margin-left: 5px; font-size: 12px; } .strike { text-decoration: line-through; } .actor-sheet-v2 { .window-content { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; width: 100%; height: 100%; } .left-bar { grid-column: 1; grid-row: 1 / -1; padding: 3px; } .window-content > nav.sheet-tabs { grid-column: 2; grid-row: 1; align-self: start; width: 100%; box-sizing: border-box; margin-bottom: 0; position: relative; z-index: 2; } .window-content > [data-application-part="rightBar"], .window-content > .right-bar { grid-column: 2; grid-row: 2; width: 100%; min-height: 0; box-sizing: border-box; padding-right: 0; margin-right: 0; } .right-bar { display: flex; flex-direction: column; min-height: 0; height: 100%; } .right-bar > .tab { flex: 1 1 auto; min-height: 0; } /* Match V1: flat top edge on panel; active tab overlaps the panel top border */ .right-bar > .tab.active { border-top-left-radius: 0; border-top-right-radius: 0; } .tabs [data-action="tab"].active { position: relative; z-index: 1; margin-bottom: -2px; padding-bottom: 2px; } .profile-img { width: 100%; height: auto; } .physical-stats-outer-grid-3col { display: contents; } .physical-stats-outer-grid-3col, .resources { font-size: 12px; } .resource-inner-grid-3col input { padding: 1px; } .breaking-point { justify-content: space-between; display: flex; align-items: center; input { width: 40px; } } .mb-10 { margin-bottom: 10px; } .stats { input { margin: 1px; } } .horizontal-bar-section-divider.skills-header { display: flex; } .adaptation-grid-4col { display: grid; grid-template-columns: 50% 25px 25px 25px; align-content: center; justify-content: left; align-items: center; row-gap: 0; margin-bottom: 0; } .adaptation-grid-4col .adapted-label-slot { grid-column: 1 / -1; min-height: 1.35em; } .adaptation-grid-4col .adapted-label-slot .adapted-label { display: block; margin: 0; } .adaptation-block { border: 1px solid black; padding: 3px; } } .stats-wrapper { position: relative; } /* Edit icon */ .stats-edit-btn { position: absolute; top: -10px; right: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-border-dark, #444); color: #fff; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; } /* Show on hover of whole stats block */ .stats-wrapper:hover .stats-edit-btn { opacity: 1; transform: scale(1.05); } /* Hover feedback */ .stats-edit-btn:hover { background: var(--color-border-highlight, #c9a227); } .edit-stat-form { label { color: var(--color-text-primary); } } .physical-stats-outer-grid-2col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; text-align: center; padding: 5px; grid-gap: 5px; }