MediaWiki:Gadget-ImmersiveEditing.css

/* THIS IS CURRENTLY IN BETA, BUT (MAY BE) MADE AVAILABLE TO
   THE PUBLIC IN A TRIAL PERIOD.
   
   PLEASE GO TO USER:SOTO WITH ANY ISSUES. */

.action-edit #menus-cover {
    /* background-position-y: 90.2%; */
    background-position: revert;
}

@media screen and (min-width: 1340px) {
	:root.theme-dark .action-edit #mw-site-navigation .sidebar-chunk {
       -moz-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
    -webkit-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
         -o-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
        -ms-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
    		box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4);
}
    .action-edit #mw-site-navigation {
        width: 14.161em;
        padding-left: 0.044em;
        margin-left: -0.62em;
    }
    .action-edit #mw-related-navigation {
        position: fixed;
        right: 0;
        top: -2em;
        margin-right: 0.0688em;
    }
    /*.action-edit #mw-content {
        margin-right: 13.9em;
        margin-right: 14.302em;
    }*/
    .action-edit #mw-content-wrapper {
        /* margin-right: 14.212128em; */
        margin-right: 14.102128em;
        z-index: 1!important;
    }
    .action-edit #mw-content {
        /* margin-right: 0.08888em; */
        margin-right: 0.19888em;
    }
    .mw-editform {
        position: relative;
        left: 0.57162em;
    }
}
@media screen and (min-width: 1340px) and (max-width: 1418px) {
	.action-edit #mw-content {
    	box-shadow: 0 348.708em 0 0 #2e416836, -18vw 120.102em 0 0 #172c52e0, 24vw 108.708em 0 0 #172c52, 24vw 0 0 0 #091b3fe3, -32vw 35em 110em 0 #091831e3, -24vw 4011em 0 0 #122e63e3;
	}
}
@media screen and (min-width: 1419px) {
	.action-edit #mw-content {
    	box-shadow: 0 348.708em 0 0 #2e416836, -18vw 113.102em 0 0 #172c52e0, 24vw 108.708em 0 0 #172c52, 24vw 0 0 0 #091b3fe3, -32vw 35em 110em 0 #091831e3, -24vw 4011em 0 0 #122e63e3;
	}
}
@media screen and (min-width: 1542px) {
    .action-edit #mw-site-navigation {
        width: 14.061em;
        margin-left: 0;
    }
    .action-edit #mw-related-navigation {
        margin-right: 0.0488em;
    }
    .mw-editform {
        left: 0.54162em;
    }
}

@media screen and (min-width: 1100px) {
    .action-edit #mw-site-navigation .sidebar-chunk {
        border-right-color: #1b2f52;
    }
    .action-edit:not(.ns-8) #mw-site-navigation .sidebar-chunk {
        border-right-color: #616f8b;
    }
    .action-edit:not(.ns-8) #mw-site-navigation .sidebar-chunk:nth-child(2) {
        border-right-color: #172c52;
    }
    .action-edit #mw-related-navigation .sidebar-chunk:not(#page-tools) {
        box-shadow: 6px 0 0 10px #16274e;
        background: #13274a;
        top: 0.124em;
    }
    .action-edit #mw-wrapper:has(.mw-message-box-warning) #mw-related-navigation .sidebar-chunk:not(#page-tools) {
        box-shadow: 4px 0 0 10px #192d50, 14px 0 0 15px #203356, 14px 0 0 18px #0d1f43, 14px 7px 0 18px #2d4061, 11px 13px 0 18px #172c52;
        top: 1.004em;
    }
    .action-edit #mw-related-navigation .sidebar-chunk#page-tools {
        box-shadow: 10px 0 0 10px #334369, 9px -20em 0 7px #192d50;
        z-index: 400;
    }
    .action-edit #mw-wrapper:has(.mw-message-box-warning) #mw-related-navigation .sidebar-chunk#page-tools {
        box-shadow: 10px 0 0 10px #334369, 9px -20em 0 7px #192d50, 5.2px 3.28px 0 10px #0f2042;
    }

    .action-edit #mw-related-navigation:has(.sidebar-chunk + .sidebar-chunk)  .sidebar-chunk#page-tools .mw-inputbox-centered {
        display: none;
    }
}
    
@media screen and (min-width: 1860px) {
    .action-edit #mw-site-navigation .sidebar-chunk#site-navigation,
    .action-submit #mw-site-navigation .sidebar-chunk#site-navigation {
        left: 1.332em!important;
    }
}

.action-edit .sidebar-chunk#page-tools .mw-inputbox-centered .mw-ui-button {
    background: #2d3e68;
}

.action-edit #mw-content {
    box-shadow: 0 348.708em 0 0 #2e416836, -18vw 108.708em 0 0 #172c52e0, 24vw 108.708em 0 0 #172c52, 24vw 0 0 0 #091b3fe3, -32vw 35em 110em 0 #091831e3, -24vw 4011em 0 0 #122e63e3;
    border-top-left-radius: 12px;
}

.action-submit #mw-content {
    box-shadow: 0 348.708em 0 0 #2e416836, -18vw 328.708em 0 0 #172c5299, 24vw 344.708em 0 0 #18294b, 24vw 0 0 0 #152649e3, -24vw 18.2em 0 0 #0f2147c7, -24vw -20em 0 20em #0919363d;
    border-top-left-radius: 12px;
}

.action-edit:not(.ns-8) #mw-content {
    padding-bottom: 2.8px;
    margin-bottom: -3.4px;
    box-shadow: 0 348.708em 0 0 #2e416836, -18vw 124.235em 0 0 #172c52e0, 24vw 110.928em 0 0 #172c52, 24vw 108.906em 140px 0 #1b3056, -1.04vw 94.815em 0 0 #213458, 24vw 0 0 0 #091b3fe3, -24vw 35em 110em 0 #091831e3;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 38px;
    /
    color: #334667;
}
.action-edit:not(.ns-8) #mw-content:not(:has(.mw-message-box-warning)):not(:has(.article-type)):not(:has(.mw-editTools + div + div div)) {
    box-shadow: 0 348.708em 0 0 #2e416836, -18vw 118.235em 0 0 #172c52e0, 24vw 110.928em 0 0 #172c52, 24vw 108.906em 140px 0 #1b3056, -1.04vw 94.815em 0 0 #213458, -32vw 35em 110em 0 #091831e3, -24vw 4011em 0 0 #122e63e3;
}
.action-edit:not(.ns-8) #mw-content:not(:has(.mw-message-box-warning)):not(:has(.article-type)):has(.mw-editTools ~ div .mw-icon-arrow-expanded) {
    background: #192b4c;
    box-shadow: 0 105em 0 0 var(--primary-1) inset, 0 348.708em 0 0 #2e416847, 24vw 110.928em 0 0 #1f3254, 24vw 108.906em 140px 0 #1b3056, -1.04vw 94.815em 0 0 #213458, -18vw 111.235em 11em 0 #172c52bd, -32vw 35em 110em 0 #091831e3, -24vw 4011em 0 0 #122e63e3;
    margin-bottom: -60.8px;
}
.action-edit:not(.ns-8) #mw-content:has(.mw-message-box-warning) {
    box-shadow: 0 348.708em 0 0 #2e416836, -18vw 84.808em 20.7em 0 #172c52e0, 24vw 130.928em 0 0 #172c52, 24vw 108.906em 140px 0 #1b3056, -1.04vw 94.608em 0 0 #213458, 24vw 0 0 0 #091b3fe3, -24vw 35em 110em 0 #091831e3;
}

@media screen and (max-width: 1339px) {
	.action-edit:not(.ns-8) #mw-content:not(:has(.mw-message-box-warning)):not(:has(.article-type)):not(:has(.mw-editTools + div + div div)) {
    	box-shadow: 3.2864em 34.8084em 0em 0 #0819366e, 3.2864em -96.1916em 0em 0 #0b19326e, 4em 0 0 0 #0a172cba, 0 348.708em 0 0 #2e416836, -18vw 118.235em 0 0 #172c52e0, 24vw 110.928em 0 0 #172c52, 24vw 108.906em 140px 0 #1b3056, -1.04vw 94.815em 0 0 #213458, -32vw 35em 110em 0 #091831e3, -24vw 4011em 0 0 #122e63e3;
	}
}


.action-edit .mw-footer {
    padding-left: 10em;
    top: -2px;
    margin-bottom: -1.72px;
}
.action-edit #mw-wrapper:not(:has(.mw-message-box-warning)):not(:has(.article-type)):not(:has(.mw-editTools + div + div div)) .mw-footer {
    top: -15px;
    padding-left: 10.4em;
}
.action-edit #mw-wrapper:not(:has(.mw-message-box-warning)):not(:has(.article-type)):has(.mw-editTools ~ div .mw-icon-arrow-expanded) .mw-footer {
    top: 3px;
}

@media screen and (min-width: 1100px) and (max-width: 1339px) {
    .action-edit #mw-site-navigation {
        z-index: 5;
        left: -0.235em!important;
    }
    .action-edit #mw-related-navigation {
        z-index: 4;
        margin-top: -4.287em;
    }
    .action-edit #mw-site-navigation .sidebar-chunk#site-navigation {
        box-shadow: -2px 0 0 var(--contrast-color-7) inset, 0.518em 0 0 0 #0d1f43;
        border-top-right-radius: 0;
    }
    .action-edit #mw-site-navigation .sidebar-chunk#site-tools {
        margin-top: 15.9px;
        margin-left: 8px;
    }
    .action-edit #mw-related-navigation .sidebar-chunk#page-tools {
        box-shadow: 1.122px 0 0 7.8px #16274e, -9px -20em 0 7px #192d50, -5px -20em 0 7px #192d50;
    }
    .action-edit #mw-related-navigation .sidebar-chunk:not(#page-tools) {
        box-shadow: -0.262px 0 0 10.8px #263a5e;
        background: #182d53;
    }
    .action-edit #mw-content {
        margin-left: 13.84em;
    }
    .action-edit .mw-footer-container {
        z-index: 3;
        margin-top: -0.8em;
        background: #1c3259;
        box-shadow: 0 -7em #34456b, 0 -1em #223659, 0 -1em #3b4e71 inset;
    }
    .action-edit #editpage-specialchars {
        left: 25.2px;
        box-shadow: 0px 0px 29px 0px #1c2943, -12px 4.06px 0 38px #172c52, -15px -14.06px 0 40px #0e2348, -101px 4.48px 0 43px #1a2e53!important;
    }
    
}

.action-edit.long-page #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    top: 187.8px;
    filter: brightness(1.8) hue-rotate(16deg);
}
.action-edit:not(.ns-8) #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    top: 182.82px;
    left: 2.84px;
}
.action-edit:not(.ns-8) #mw-wrapper:not(:has(.mw-message-box-warning)):not(:has(.article-type)) #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    top: 185.82px;
    left: -4.88px;
}
.action-edit:not(.ns-8) #mw-wrapper:not(:has(.mw-message-box-warning)):not(:has(.article-type)):has(.mw-editTools + div + div div) #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    top: 207.82px;
    left: 10.75px;
}
.action-edit:not(.ns-8) #mw-content-container:has(.mw-message-box-warning) #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    /
    position: fixed;
    /
    top: auto;
    /* left: 16.4px!important; */
    bottom: 134.32px;
    top: 220px;
    left: 14.4px;
}
.action-submit.long-page #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    position: fixed;
    left: auto;
    right: 10px;
    top: auto;
    bottom: 13px;
}


.wikiEditor-ui-toolbar {
    background-color: #adbde3;
}


div.editOptions {
    position: relative;
    z-index: 9999;
}

#editpage-specialchars {
    background: #162448!important;
    background: #626f8f!important;
    background: #6275a4!important;
    background: #34436b!important;
    background: #2b3a64!important;
    background: #263a5e!important;
    border-color: #1a315c!important;
    box-shadow: 0px 0px 29px 0px #1c2943, 10px -4.06px 0 40px #172c52, 10px -11.06px 0 45px #0e2348, 10px 4.48px 0 49px #1a2e53!important;
    background: #1a2e53;
    position: relative;
    top: 12px;
    z-index: 1;
}
.action-submit #editpage-specialchars {
    top: 1.8px;
}

.mw-editTools ~ div:has(div) {
    position: relative;
    z-index: 400;
    left: -0.02px;
    background: #11213b; /*192c50*/
    border-radius: 20px;
    padding: 8.4px;
}
.mw-editform > .mw-editTools + div:has(.mw-icon-arrow-expanded) {
    background: #132548!important;
    box-shadow: 0 0 0 10.8px #182b4e, 0 0 0 17.8px #263a5e!important;
    margin-bottom: 3px;
}
.mw-editform:not(:has(.mw-editTools + div + div div)) > .mw-editTools ~ div:has(.mw-icon-arrow-expanded) {
    margin-bottom: 21px;
}
.mw-editform:has(.mw-editTools + div + div div) > .mw-editTools + div:has(div) {
    background: #112346;
    box-shadow: 0.202em 0 0 #182e53;
    border-bottom-right-radius: 0;
    margin-top: 2.58em;
    margin-top: 2.58em;
    box-shadow: 0.06em -0.88em 0 0.68em #263a5e, 0.7em -0.88em 0 0.68em #263a5e;
    position: relative;
    z-index: 300;
}
.mw-editTools + div:has(div) + div:has(div) {
    border-top-left-radius: 26px;
    border-top-right-radius: 0;
    box-shadow: 0.42em 0.2em 0 1em #263a5e, 0.4em -4.2em 0 1em #263a5e, -0.58em 1.22em 0 #263a5e, -0.58em -1.58em 0 #263a5e, -0.58em -6.24em 0 #263a5e;
    position: relative;
    z-index: 200;
}
.mw-editTools + div:has(.mw-icon-arrow-expanded) + div:has(div) {
    margin-right: 2px;
    margin-bottom: -20px;
    box-shadow: 0.42em 0.2em 0 1em #263a5e, 0.4em -4.2em 0 1em #263a5e, -0.58em 1.22em 0 #263a5e, -0.58em -1.58em 0 #263a5e, -0.58em -6.24em 0 #263a5e, calc(1.42em + 3px) -0.2em 0 0 #0e2348;
}

.action-edit:not(.ns-8) .hiddencats:has(.mw-collapsed) {
    min-height: 69.36px;
}
.action-edit:not(.ns-8) #mw-wrapper:has(.mw-message-box-warning) .hiddencats:has(.mw-collapsed) {
    min-height: 49.42px;    
}

.wikiEditor-ui .CodeMirror {
    /* max-height: 494.309px!important; */
    /* max-height: 564.689px!important; */
}


.action-edit:not(.ns-8) .hiddencats .mw-collapsed {
    /display: block!important;
}

.action-edit:not(.ns-8) #mw-wrapper:has(.mw-message-box-warning) .mw-footer {
    margin-bottom: -24.2px;
    top: -14.02px;
}

.editOptions input {
    background: #a9b0bd;
}

.mw-editform:has(.mw-editTools + div div) .mw-editTools {
    margin-top: -9.2px;
}
.mw-editform .mw-editTools {
    margin-top: -1.82px;
}

/* Light mode */

:root.theme-light .action-edit #mw-content {
    /*background: #132036;
    background: #1a2e4f;
    background: #99a8c2;*/
    /*background: #212935;
    background: #233755;
    background: #31425b;
    background: #293d59;*/
    background: #2b384b;
    box-shadow: 0 348.708em 0 0 #2e416836, -18vw 108.708em 0 0 #5c7399, 24vw 108.708em 0 0 #5c7399, 24vw 9.4em 0 12em #647aa5e3, -32vw 35em 110em 0 #1a3e7d9e, -24vw 4011em 0 0 #122e63e3;
}
:root.theme-light .action-edit .tools-inline .mw-list-item {
    filter: invert(1) hue-rotate(180deg);
}
:root.theme-light .action-edit .tools-inline .mw-list-item.selected {
    background: var(--primary-3);
    color: var(--text-color);
}
:root.theme-light .action-edit .tools-inline .mw-list-item.selected a {
    color: var(--alt-text-color-3);
}

@media screen and (min-width: 1100px) {
    :root.theme-light .action-edit #mw-site-navigation .sidebar-chunk {
        border-right-color: #8996ad;
        box-shadow: .153em 1.2px 0 #8694af inset, 0 -2px 0 6px #6c7b97;
    }
    :root.theme-light .action-edit #mw-site-navigation .sidebar-chunk#site-navigation {
        box-shadow: .153em 1.2px 0 #8694af inset, 0 -2px 0 6px #687a99;
    }
    :root.theme-light .action-edit #mw-related-navigation .sidebar-chunk#page-tools {
        box-shadow: 10px 0 0 10px #94a0be, 9px -20em 0 7px #46608c;
    }
    :root.theme-light .action-edit #mw-related-navigation .sidebar-chunk:not(#page-tools) {
        box-shadow: 6px 0 0 10px #9aa2b5;
        box-shadow: 6px 0 0 10px #6d7ea7;
        background: var(--primary-10);
    }
}

:root.theme-light .editOptions {
    background: #43567b;
    box-shadow: 0 0 0 11px #53688f;
}
:root.theme-light #editpage-specialchars {
    background: #616f88 !important;
    color: var(--alt-text-color-2);
    border-color: #c0c1cd !important;
    box-shadow: 10px -4.06px 0 40px #4a5c7d, 10px -11.06px 0 45px #8191ad, 10px 4.48px 0 49px #31415f, 10px 4.48px 0 100px #405a85!important;
}
:root.theme-light #editpage-specialchars a {
    color: #c4d0e4;
}
:root.theme-light #editpage-specialchars #warning {
    color: #ffb7b7;
}
:root.theme-light form#editform {
    box-shadow: 10px 12px 0 7px #354a6f, 10px 12px 0 17px #2c3f5f;
    box-shadow: 10px 12px 0 7px #142035, 10px 12px 0 17px #2c3f5f;
}
:root.theme-light .action-edit.long-page #mw-site-navigation .sidebar-chunk:last-of-type:not(:first-of-type):after {
    filter: invert(1) brightness(1.8) hue-rotate(16deg);
}