Realm for Pathbuilder 2e by mattermill

/* ==UserStyle==
@name           ? - Dec 2023
@namespace      github.com/mattermill/realm-pathbuilder
@version        1.0.0
@description    Realm UI overhaul for Pathbuilder 2e
@author         mattermill
==/UserStyle== */
@-moz-document domain("pathbuilder2e.com") {

    @import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&display=swap');

    html,
    body {
        font-size: 14px;
    }
    html,
    body,
    .layout-tabbed-line,
    .rounded-rectangle,
    .modal-content {
        background: #232628;
        color: #FFF;
    }

    /* GLOBALS */    
    * {
        box-sizing: border-box !important;
    }
    .layout-tabbed-line {
        background: none;
        padding: 12px !important;
        margin: 0;
        border-radius: 0;
        box-shadow: inset 0 -1px #5E5953;
    }
    .subtitle {
        margin-left: 0 !important;
    }
    .modal-content .dialog-top-bar,
    .div-listview-info .top-div .listview-title {
        font-family: 'Averia Serif Libre' !important;
    }
    /* MENU */
    .sidenav {
        background: #40372A;
    }
    .sidenav-part.sidenav-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: none;
        text-align: center;
        padding: 0px 24px;
        height: auto;
        margin: 2em 0;
        position: relative;
    }
    .sidenav-part.sidenav-header:before,
    .sidenav-part.sidenav-header:after {
        display: block;
        width: 100%;
        height: 32px;
        content: '';
    }
    .sidenav-part.sidenav-header:before {
        background: url('https://sssaves.com/realm/border-top.svg') no-repeat center center;
    }
    .sidenav-part.sidenav-header:after {
        background: url('https://sssaves.com/realm/border-bottom.svg') no-repeat center center;
    }
    .sidenav-part.sidenav-header h2 {
        margin: 24px 0 8px 0;
    }
    .sidenav-part.sidenav-header p {
        margin: 0 0 24px 0;
        color: #AA916E;
    }
    .sidenav-part.sidenav-header br {
        display: none;
    }
    .menu-group-header {
        text-align: center;
        color: #AA916E;
        font-weight: 500;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 8px;
    }
    .sidenav-part .menu-group {
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    .sidenav-part .menu-group .sidenav-link {
        flex: 0 0 100%;
    }
    .modal-button, .sidenav-link {
        text-align: center;
        width: auto !important;
        margin: 0.2em;
        padding: 8px 16px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 0;
        background: linear-gradient(180deg, #7B7268 0.01%, #7B6F5F 50%, #6A6052 50.01%, #6A5A47 88.54%, #847158 100%);
        box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid #AA916E;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
        transition: all 0.3s;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .modal-button {
        font-size:14px !important;
        font-family: 'Averia Serif Libre' !important;
    }
    .menu-group .sidenav-link:before, .modal-button:before, .modal-content .small-margin-right-bottom.div-button.padding-standard.centered-flex:before {
        display: block;
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        content: '';
        background: linear-gradient(180deg, #821E32 0.01%, #9C2B42 50%, #5A141E 50.01%, #500A14 88.54%, #7B1B2E 100%);
        transition: all 0.1s;
    }
    .menu-group .sidenav-link:hover, .modal-button:hover, .modal-content .small-margin-right-bottom.div-button.padding-standard.centered-flex:hover {
        border-color: #C7B293;
        filter: drop-shadow(0px 0px 4px rgba(187, 165, 133, 0.55));
        color:#FFF;
    }
    .menu-group .sidenav-link:hover:before, .modal-button:hover:before {
        top: 0;
    }
    .modal-button:nth-child(2), #sidenav-load, #sidenav-save, #sidenav-new  {
        background: linear-gradient(180deg, #38474C 0.01%, #2E3D42 50%, #253439 50.01%, #27363B 88.54%, #38474C 100%);
        border-color:#7E7165;
    }
    .modal-button:nth-child(3), .modal-button:nth-child(4),.modal-button:nth-child(5), .modal-content .small-margin-right-bottom.div-button.padding-standard.centered-flex {
        text-align: center;
        width: auto !important;
        margin: 0.2em;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 0;
        background:none;
        box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid #5E5953;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
        transition: all 0.3s;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    /* Menu Signin */
    #menu-header-signin {
        display: none;
    }
    .menu-group:nth-child(3) {
        border: 0;
    }
    #sidenav-logout {
        background: #322C23;
        border: 0;
        box-shadow: none;
        display: flex;
    }

    /* Menu Character */
    .menu-group:nth-child(5) {
        flex-direction: column-reverse;
    }
    /* TOP NAV */
    .top-bar {
        background: #111;
        border: none;
        display: flex;
        justify-content: center;
        height: 40px;
        position: fixed;
        width: 100%;
        z-index: 1;
    }
    #active-builds {
        color: #40372A;
        /* earth */
    }
    .active-build-section-active {
        border-bottom: 3px solid #AA916E;
    }
    #menu {
        display: flex;
        align-items: center;
    }
    .menu-title.button-text {
        display: none;
    }
    #menu:after {
        display: block;
        content: "Pathbuilder 2e";
        font-size: 1.25em;
        font-weight: bold;
    }
    /* MAIN LAYOUT */
    #main-container {
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: scroll;
    }
    .main-column-right {
        width: calc(100% - 320px) !important;
        margin: 0 auto;
        margin-top: 40px;
    }
    #container-row-0,
    #container-row-2 {
        max-width: 980px;
        margin: 0 auto;
    }
    /* PLANNER */
    .main-column-left {
        width: 320px;
        margin-top:40px;
        padding-top: 40px;
        background: #5A141E;
        top:40px;
        position: sticky;
        height: calc(100vh - 40px);
    }
    .main-column-left .rounded-rectangle,
    .rounded-rectangle-white {
        background: none;
        color: #E6E1D7 !important;
    }
    .main-column-left .rounded-rectangle .div-button,
    .button-show-plan {
        background: #470E16 !important;
        border: 1px solid #821E32 !important;
        padding: 8px;
    }
    .main-column-left .rounded-rectangle .div-button:hover,
    .button-show-plan:hover {
        background: #400A12 !important;
        border: 1px solid #A7233D !important;
        color: #FFF;
    }
    .main-column-left .rounded-rectangle .div-button:has(.button-selection.red-text) {
        border: 1px dashed #A7233D !important;
    }
    .main-column-left .rounded-rectangle .div-button:has(.button-selection.red-text) .small-text.grey-text {
        color: #BB8487!important;
    }
    .button-selection.red-text {
        color: #ec5f67!important;
    }
    .build-section .centered-div-holder {
        justify-content: center;
    }
    .build-section .centered-div-holder #id_header {
        font-family: 'Averia Serif Libre' !important;
        font-size:1.5em;
        width:100%;
        text-align:center;
    }
    .build-section .centered-div-holder #id_header:before {
        display:block;
        height:32px;
        content:'';
        background:url("https://sssaves.com/realm/border-top.svg") no-repeat center center;
        margin-bottom:1em;
    }
    .main-column-left .small-text.grey-text {
        color: #BEA988 !important;
    }
    .button-show-plan {
        width: auto;
        height: 32px;
        position: fixed;
        padding: 0 8px;
        left: 18px;
        top: 52px;
        border-radius: 8px;
        box-shadow: 10px 6px #000 0.6;
    }
    .cogButton .centred-parent img {
        width: 32px;
    }
    #divBuild .button-column {
        margin: 4px;
        padding: 0;
    }
    #divBuild .button-column .button-icon {
        margin: 0;
        width: 32px;
    }
    /* FORMS */
    .section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(2) .div-button,
    .section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(3) .div-button,
    .section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(4) .div-button,
    .details-buttons .div-button,
    .edittext-dark,
    .textarea-notes,
    .button-money,
    .edittext-custom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 8px;
        border-radius: 0;
    }
    .section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(2) .div-button,
    .section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(3) .div-button,
    .section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(4) .div-button,
    .details-buttons .div-button,
    .edittext-dark,
    .textarea-notes,
    .button-money,
    .spinner-dark,
    .edittext-custom {
        background: #1C1F21 !important;
        border: 1px solid #1C1F21 !important;
        padding: 8px;
        border-radius: 0;
        color: #D2CDBE !important;
    }
    .custom-div .small-text.grey-text {
        margin-bottom:0.5em;
        
    }
    .section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(2) .div-button:hover,
    .section-top.rounded-rectangle > div:first-child > div...