Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

User:Justarandomamerican/globalUserLock.js: Difference between revisions

From WikiOasis Meta
Fix
Dark mode
Line 115: Line 115:


mw.util.addCSS( `
mw.util.addCSS( `
/* ── GUL colour tokens (light defaults) ─────────────────────────────── */
.gul-body,
.gul-results-wrap,
.gul-select-all-row,
.gul-actions,
.gul-checkbox-row {
--gul-bg:          #fff;
--gul-bg-subtle:    #f8f9fa;
--gul-bg-muted:    #eaecf0;
--gul-border:      #c8ccd1;
--gul-border-input: #a2a9b1;
--gul-text:        #202122;
--gul-text-muted:  #555;
/* status — info */
--gul-info-bg:      #eaf3fb;
--gul-info-border:  #72a0d3;
--gul-info-text:    #0645ad;
/* status — success */
--gul-ok-bg:        #d5fdf4;
--gul-ok-border:    #14866d;
--gul-ok-text:      #14866d;
/* status — error */
--gul-err-bg:      #fee7e6;
--gul-err-border:  #d73333;
--gul-err-text:    #b32424;
/* status — warning */
--gul-warn-bg:      #fef6e7;
--gul-warn-border:  #fc3;
--gul-warn-text:    #b45a00;
/* badges */
--gul-badge-neutral-bg:  #eaecf0;
--gul-badge-neutral-text: #555;
--gul-badge-locked-bg:    #d5fdf4;
--gul-badge-locked-text:  #14866d;
--gul-badge-failed-bg:    #fee7e6;
--gul-badge-failed-text:  #d73333;
--gul-badge-skipped-bg:  #fef6e7;
--gul-badge-skipped-text: #b45a00;
/* buttons */
--gul-btn-bg:          #fff;
--gul-btn-border:      #a2a9b1;
--gul-btn-text:        #202122;
--gul-primary-bg:      #3366cc;
--gul-primary-bg-hover: #2a4b8d;
--gul-danger-bg:        #d73333;
--gul-danger-bg-hover:  #b32424;
/* progress track */
--gul-track-bg:  #eaecf0;
--gul-track-fill: #3366cc;
}
/* ── Dark mode: system preference ───────────────────────────────────── */
@media ( prefers-color-scheme: dark ) {
.gul-body,
.gul-results-wrap,
.gul-select-all-row,
.gul-actions,
.gul-checkbox-row {
--gul-bg:          #1e2124;
--gul-bg-subtle:    #27292d;
--gul-bg-muted:    #2e3136;
--gul-border:      #3d4146;
--gul-border-input: #54595d;
--gul-text:        #eaecf0;
--gul-text-muted:  #a2a9b1;
--gul-info-bg:      #162032;
--gul-info-border:  #3a6ea8;
--gul-info-text:    #8ab4f8;
--gul-ok-bg:        #0d2b24;
--gul-ok-border:    #1d6b58;
--gul-ok-text:      #4dd0a8;
--gul-err-bg:      #2d1212;
--gul-err-border:  #a02020;
--gul-err-text:    #f08080;
--gul-warn-bg:      #2b2100;
--gul-warn-border:  #a87f00;
--gul-warn-text:    #f0c040;
--gul-badge-neutral-bg:  #2e3136;
--gul-badge-neutral-text: #a2a9b1;
--gul-badge-locked-bg:    #0d2b24;
--gul-badge-locked-text:  #4dd0a8;
--gul-badge-failed-bg:    #2d1212;
--gul-badge-failed-text:  #f08080;
--gul-badge-skipped-bg:  #2b2100;
--gul-badge-skipped-text: #f0c040;
--gul-btn-bg:          #2e3136;
--gul-btn-border:      #54595d;
--gul-btn-text:        #eaecf0;
--gul-primary-bg:      #3a6ea8;
--gul-primary-bg-hover: #2a5298;
--gul-danger-bg:        #a02020;
--gul-danger-bg-hover:  #7a1818;
--gul-track-bg:  #2e3136;
--gul-track-fill: #3a6ea8;
}
}
/* ── Dark mode: Vector 2022 manual toggle (.skin-theme-clientpref-night)
      and Timeless/Monobook night variants ──────────────────────────── */
.skin-theme-clientpref-night .gul-body,
.skin-theme-clientpref-night .gul-results-wrap,
.skin-theme-clientpref-night .gul-select-all-row,
.skin-theme-clientpref-night .gul-actions,
.skin-theme-clientpref-night .gul-checkbox-row {
--gul-bg:          #1e2124;
--gul-bg-subtle:    #27292d;
--gul-bg-muted:    #2e3136;
--gul-border:      #3d4146;
--gul-border-input: #54595d;
--gul-text:        #eaecf0;
--gul-text-muted:  #a2a9b1;
--gul-info-bg:      #162032;
--gul-info-border:  #3a6ea8;
--gul-info-text:    #8ab4f8;
--gul-ok-bg:        #0d2b24;
--gul-ok-border:    #1d6b58;
--gul-ok-text:      #4dd0a8;
--gul-err-bg:      #2d1212;
--gul-err-border:  #a02020;
--gul-err-text:    #f08080;
--gul-warn-bg:      #2b2100;
--gul-warn-border:  #a87f00;
--gul-warn-text:    #f0c040;
--gul-badge-neutral-bg:  #2e3136;
--gul-badge-neutral-text: #a2a9b1;
--gul-badge-locked-bg:    #0d2b24;
--gul-badge-locked-text:  #4dd0a8;
--gul-badge-failed-bg:    #2d1212;
--gul-badge-failed-text:  #f08080;
--gul-badge-skipped-bg:  #2b2100;
--gul-badge-skipped-text: #f0c040;
--gul-btn-bg:          #2e3136;
--gul-btn-border:      #54595d;
--gul-btn-text:        #eaecf0;
--gul-primary-bg:      #3a6ea8;
--gul-primary-bg-hover: #2a5298;
--gul-danger-bg:        #a02020;
--gul-danger-bg-hover:  #7a1818;
--gul-track-bg:  #2e3136;
--gul-track-fill: #3a6ea8;
}
/* ── Layout & structure ─────────────────────────────────────────────── */
.gul-body {
.gul-body {
padding: 14px 16px;
padding: 14px 16px;
font-family: inherit;
font-family: inherit;
color: var( --gul-text );
}
}
.gul-body fieldset {
.gul-body fieldset {
border: 1px solid #c8ccd1;
border: 1px solid var( --gul-border );
border-radius: 3px;
border-radius: 3px;
padding: 10px 14px;
padding: 10px 14px;
margin: 0 0 14px;
margin: 0 0 14px;
background: #fff;
background: var( --gul-bg );
color: var( --gul-text );
}
}
.gul-body legend {
.gul-body legend {
Line 130: Line 296:
padding: 0 4px;
padding: 0 4px;
font-size: 0.95em;
font-size: 0.95em;
color: var( --gul-text );
}
}
.gul-body label {
.gul-body label {
Line 135: Line 302:
margin-bottom: 4px;
margin-bottom: 4px;
font-size: 0.92em;
font-size: 0.92em;
color: var( --gul-text );
}
}
.gul-body input[type="text"],
.gul-body input[type="text"],
Line 141: Line 309:
box-sizing: border-box;
box-sizing: border-box;
padding: 5px 7px;
padding: 5px 7px;
border: 1px solid #a2a9b1;
border: 1px solid var( --gul-border-input );
border-radius: 2px;
border-radius: 2px;
font-size: 0.93em;
font-size: 0.93em;
font-family: inherit;
font-family: inherit;
background: #fff;
background: var( --gul-bg );
color: var( --gul-text );
}
.gul-body input[type="text"]:focus,
.gul-body textarea:focus {
outline: 2px solid var( --gul-track-fill );
outline-offset: 1px;
}
}
.gul-body textarea {
.gul-body textarea {
Line 151: Line 325:
min-height: 60px;
min-height: 60px;
}
}
/* ── Checkboxes ─────────────────────────────────────────────────────── */
.gul-checkbox-row {
.gul-checkbox-row {
display: flex;
display: flex;
Line 157: Line 333:
margin-top: 8px;
margin-top: 8px;
font-size: 0.92em;
font-size: 0.92em;
color: var( --gul-text );
}
}
.gul-checkbox-row input[type="checkbox"] {
.gul-checkbox-row input[type="checkbox"] {
width: auto;
width: auto;
margin: 0;
margin: 0;
accent-color: var( --gul-track-fill );
}
}
/* ── Buttons ────────────────────────────────────────────────────────── */
.gul-actions {
.gul-actions {
display: flex;
display: flex;
Line 170: Line 350:
.gul-actions button {
.gul-actions button {
padding: 6px 14px;
padding: 6px 14px;
border: 1px solid #a2a9b1;
border: 1px solid var( --gul-btn-border );
border-radius: 2px;
border-radius: 2px;
cursor: pointer;
cursor: pointer;
font-size: 0.92em;
font-size: 0.92em;
font-family: inherit;
font-family: inherit;
background: #fff;
background: var( --gul-btn-bg );
color: var( --gul-btn-text );
}
}
.gul-actions button.gul-primary {
.gul-actions button.gul-primary {
background: #36c;
background: var( --gul-primary-bg );
color: #fff;
color: #fff;
border-color: #2a4b8d;
border-color: var( --gul-primary-bg-hover );
font-weight: bold;
font-weight: bold;
}
}
.gul-actions button.gul-primary:hover { background: #2a4b8d; }
.gul-actions button.gul-primary:hover { background: var( --gul-primary-bg-hover ); }
.gul-actions button.gul-danger {
.gul-actions button.gul-danger {
background: #d73333;
background: var( --gul-danger-bg );
color: #fff;
color: #fff;
border-color: #b32424;
border-color: var( --gul-danger-bg-hover );
font-weight: bold;
font-weight: bold;
}
}
.gul-actions button.gul-danger:hover { background: #b32424; }
.gul-actions button.gul-danger:hover { background: var( --gul-danger-bg-hover ); }
.gul-actions button:disabled {
.gul-actions button:disabled {
opacity: 0.5;
opacity: 0.5;
cursor: not-allowed;
cursor: not-allowed;
}
}
/* ── Status banners ─────────────────────────────────────────────────── */
.gul-status {
.gul-status {
margin: 10px 0 0;
margin: 10px 0 0;
Line 202: Line 385:
display: none;
display: none;
}
}
.gul-status.info   { background: #eaf3fb; border: 1px solid #72a0d3; display: block; }
.gul-status.info {
.gul-status.success { background: #d5fdf4; border: 1px solid #14866d; display: block; }
background: var( --gul-info-bg );
.gul-status.error   { background: #fee7e6; border: 1px solid #d73333; display: block; }
border: 1px solid var( --gul-info-border );
.gul-status.warning { background: #fef6e7; border: 1px solid #fc3;   display: block; }
color: var( --gul-info-text );
display: block;
}
.gul-status.success {
background: var( --gul-ok-bg );
border: 1px solid var( --gul-ok-border );
color: var( --gul-ok-text );
display: block;
}
.gul-status.error {
background: var( --gul-err-bg );
border: 1px solid var( --gul-err-border );
color: var( --gul-err-text );
display: block;
}
.gul-status.warning {
background: var( --gul-warn-bg );
border: 1px solid var( --gul-warn-border );
color: var( --gul-warn-text );
display: block;
}
 
/* ── Progress bar ───────────────────────────────────────────────────── */
.gul-progress {
.gul-progress {
height: 8px;
height: 8px;
background: #eaecf0;
background: var( --gul-track-bg );
border-radius: 4px;
border-radius: 4px;
overflow: hidden;
overflow: hidden;
Line 217: Line 422:
.gul-progress-bar {
.gul-progress-bar {
height: 100%;
height: 100%;
background: #36c;
background: var( --gul-track-fill );
width: 0%;
width: 0%;
transition: width 0.3s ease;
transition: width 0.3s ease;
}
}
/* ── Results table ──────────────────────────────────────────────────── */
.gul-results-wrap {
.gul-results-wrap {
display: none;
display: none;
Line 232: Line 439:
margin-bottom: 6px;
margin-bottom: 6px;
font-size: 0.91em;
font-size: 0.91em;
color: var( --gul-text );
}
}
.gul-count {
.gul-count {
color: #555;
color: var( --gul-text-muted );
font-size: 0.88em;
font-size: 0.88em;
margin-left: auto;
margin-left: auto;
Line 242: Line 450:
border-collapse: collapse;
border-collapse: collapse;
font-size: 0.89em;
font-size: 0.89em;
background: #fff;
background: var( --gul-bg );
color: var( --gul-text );
}
}
.gul-results-table th,
.gul-results-table th,
.gul-results-table td {
.gul-results-table td {
border: 1px solid #c8ccd1;
border: 1px solid var( --gul-border );
padding: 5px 8px;
padding: 5px 8px;
text-align: left;
text-align: left;
vertical-align: middle;
vertical-align: middle;
}
}
.gul-results-table th { background: #eaecf0; font-weight: bold; }
.gul-results-table th {
.gul-results-table tr:nth-child(even) td { background: #f8f9fa; }
background: var( --gul-bg-muted );
font-weight: bold;
color: var( --gul-text );
}
.gul-results-table tr:nth-child(even) td {
background: var( --gul-bg-subtle );
}
.gul-status-cell { text-align: center; white-space: nowrap; }
.gul-status-cell { text-align: center; white-space: nowrap; }
/* ── Badges ─────────────────────────────────────────────────────────── */
.gul-badge {
.gul-badge {
display: inline-block;
display: inline-block;
Line 261: Line 478:
font-weight: bold;
font-weight: bold;
}
}
.gul-badge-pending { background: #eaecf0; color: #555; }
.gul-badge-pending,
.gul-badge-active   { background: #eaecf0; color: #555; }
.gul-badge-active {
.gul-badge-locked   { background: #d5fdf4; color: #14866d; }
background: var( --gul-badge-neutral-bg );
.gul-badge-failed   { background: #fee7e6; color: #d73333; }
color: var( --gul-badge-neutral-text );
.gul-badge-skipped { background: #fef6e7; color: #b45a00; }
}
.gul-badge-locked {
background: var( --gul-badge-locked-bg );
color: var( --gul-badge-locked-text );
}
.gul-badge-failed {
background: var( --gul-badge-failed-bg );
color: var( --gul-badge-failed-text );
}
.gul-badge-skipped {
background: var( --gul-badge-skipped-bg );
color: var( --gul-badge-skipped-text );
}
 
/* ── Summary footer ─────────────────────────────────────────────────── */
.gul-summary {
.gul-summary {
font-size: 0.9em;
font-size: 0.9em;
margin-top: 10px;
margin-top: 10px;
padding: 8px 12px;
padding: 8px 12px;
background: #fff;
background: var( --gul-bg );
border: 1px solid #c8ccd1;
border: 1px solid var( --gul-border );
border-radius: 2px;
border-radius: 2px;
color: var( --gul-text );
}
}
` );
` );
Cookies help us deliver our services. By using our services, you agree to our use of cookies.