roll20-character-sheets/The Worst Days/WorstDays_CSS.css

.AddButton {
    background-color: lightblue;
    font-size: x-small;
    border-radius: 5px;
    margin-left: 10px;
    height: 90%;
}

.Centered {
    text-align: center;
}

.ChkCol {
    width: 20%;
}

.Facet {
    margin-left: 15px;
}

.FullWidth {
    width: 100%;
}

.HighlightSection {
    background-color: yellow;
}

.RightColumnSection {
    border: 1px black solid;
    border-radius: 5px;
    width: 100%;
}

.SectionTitle {
    background-color: #a31d2d;
    color: white;
    font-weight: bolder;
    font-size: x-large;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
}

.SheetHeader {
    color: red;
    size: 2rem;
}

.SmallInput {
    width: 50px;
}

.SmallTitle {
    font-weight: bolder;
    font-size: large;
    width: 100%;
}

.Trait {
    font-weight: bolder;
    font-size: large;
    width: 110px;
}

.TraitSpaceColumn {
    width: 10%;
}

.TraitTextColumn {
    width: 45%;
    vertical-align: top;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid black;
    border-radius: 5px;
    max-width: 1000px;
    min-width: 700px;
}

.MainGrid {
    display: grid;
    grid-template-columns: [LeftSection] 60% [RightSection]40%;
    grid-template-rows: [TraitFacetRow] auto [QuirksRow] auto;
    width: 100%;
    max-width: 1000px;
    min-width: 700px;
}

.TraitsFacetsTable {
    grid-row: TraitFacetRow;
    grid-column: LeftSection;
    display: grid;
    grid-template-columns: [TraitsLeftColumn] 50% [TraitsRightColumn] 50%;
    grid-template-rows: [TraitsTitleRow] auto [TraitsRow1] auto [TraitsMiddleRow] auto [TraitsBottomRow] auto;
    width: 100%;
    max-width: 600px;
    min-width: 425px;
    border: solid 1px black;
    border-radius: 5px;
}

.TraitsTitle {
    grid-row: TraitsTitleRow;
    grid-column: TraitsLeftColumn / span 2;
}

.RightInfoTable {
    grid-row: TraitFacetRow / span 2;
    width: 100%;
}

.CunningTable {
    grid-row: TraitsRow1;
    grid-column: TraitsLeftColumn;
    width: 100%;
    margin-bottom: 10px;
}

.IntelligenceTable {
    grid-row: TraitsMiddleRow;
    grid-column: TraitsLeftColumn;
    width: 100%;
    margin-bottom: 10px;
}

.PhysicalTable {
    grid-row: TraitsBottomRow;
    grid-column: TraitsLeftColumn;
    width: 100%;
}

.SocialTable {
    grid-row: TraitsRow1;
    grid-column: TraitsRightColumn;
    width: 100%;
    margin-bottom: 10px;
}

.TechTable {
    grid-row: TraitsMiddleRow;
    grid-column: TraitsRightColumn;
    width: 100%;
    margin-bottom: 10px;
}

.WilLTable {
    grid-row: TraitsBottomRow;
    grid-column: TraitsRightColumn;
    width: 100%;
}

.QuirksTable {
    grid-row: QuirksRow;
    grid-column: LeftSection;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border: 1px solid black;
    border-radius: 5px;
}

.QuirkTitle {
    grid-column: 1 / span 2;
}

.QuirkLabel {
    font-weight: bold;
    text-align: left;
}

.QuirkDropdown input[type="text"] {
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
}

.QuirkNotes {
    grid-column: 1 / span 2;
}

.WoundTable {
    display: grid;
    grid-template-columns: 10% 80% 10%; /* Columns for checkboxes and dropdown */
    grid-template-rows: auto auto auto auto; /* Rows for title, checkboxes, labels, and text */
    align-items: center;
    justify-items: center; /* Centers items horizontally within their columns */
    border-bottom: 1px solid;
}

.WoundTitle {
    grid-column: 1 / span 3; /* Spans across all columns */
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.WoundACheck {
    grid-column: 1;
    grid-row: 2;
}

.WoundMiddle {
    grid-column: 2;
    grid-row: 2 / span 2; /* Spans rows 2 and 3 */
    justify-self: stretch; /* Ensures the dropdown stretches to fill the column */
}

.WoundMCheck {
    grid-column: 3;
    grid-row: 2;
}

.WoundALabel {
    grid-column: 1;
    grid-row: 3;
    text-align: right;
}

.WoundMLabel {
    grid-column: 3;
    grid-row: 3;
    text-align: right;
}

.WoundSelect {
    grid-column: 1 / span 3; /* Spans across all columns */
    grid-row: 4;
    text-align: center;
    margin-top: 10px;
}


.inner-grid-container {
    display: grid;
    grid-template-columns: auto auto;
}

.grid-item {
    padding: 10px;
}

.grid-item-label {
    grid-column: 1 / span 1;
}

.grid-item-button {
    grid-column: 2 / span 1;
}

.grid-row {
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.TraitTextColumnRight {
    width: 100%;
    vertical-align: top;
    margin-bottom: 20px;
}

.logo {
    text-align: center;
    width: 60%;
}

.mtLeftColumn {
    grid-column: 1 / span 2;
    border: 1px black solid;
    border-radius: 5px;
}

.mtRightColumn {
    grid-column: 3 / span 1;
    vertical-align: top;
    text-align: center;
}

.tfLeftColumn {
    grid-column: 1 / span1;
}

tfRightColumn {
    grid-column: 2/ span 1;
}

.widthEighty {
    width: 70%;
}

.widthFull {
    width: 100%;
}

input {
    background-color: #fff1f1;
}

.charsheet .sheet-character,
.charsheet .sheet-journal,
.charsheet .sheet-survey {
    display: none;
}

/* style the active button */
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {
    outline: 2px solid red;
}

.charsheet .sheet-tabstoggle[value="journal"] ~ div .sheet-button1 {
    outline: 2px solid red;
}

.charsheet .sheet-tabstoggle[value="survey"] ~ div .sheet-button2 {
    outline: 2px solid red;
}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
.charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal,
.charsheet .sheet-tabstoggle[value="survey"] ~ div.sheet-survey {
    display: block;
}

.survey-section {
    margin-bottom: 15px;
}

    .survey-section label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .survey-section textarea {
        width: 100%;
        height: 50px;
    }

.sheet-block-switch {
    display: none;
}

.sheet-block-a,
.charsheet .sheet-block-switch:checked ~ .sheet-block-b {
    display: block;
}

.charsheet .sheet-block-b,
.charsheet .sheet-block-switch:checked ~ .sheet-block-a {
    display: none;
}

.lock {
    font-family: 'Pictos';
}

.iconbutton {
    border: none;
    background-color: white;
}


.facet-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    margin-right: 5px;
}



.Trait {
    font-weight: bolder;
    font-size: large;
}

.Trait, .Facet {
    flex: 1;
    text-align: left;
}


.facet-group > button,
.facet-group > div {
    flex-shrink: 0;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.AddButton {
    background-color: lightblue;
    font-size: x-small;
    border-radius: 5px;
    margin-left: 10px;
    height: 90%;
}

input {
    background-color: #fff1f1;
}