Ir para o conteúdo

MediaWiki:Common.css

De Undertale Wiki

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

  • Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
  • Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
  • Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
  • Opera: Pressione Ctrl-F5.
/** Color configuration **/
html.skin-theme-clientpref-night, html.skin-theme-clientpref-os, html.skin-theme-clientpref-day {
    --color-visited: var(--color-progressive);
    --color-base--hover: var(--color-base);

    --background-color-error--active: var(--background-color-error--hover);
    --color-destructive: var(--border-color-error);
    --color-destructive--hover: var(--border-color-error--hover);
    --color-destructive--active: var(--border-color-error--hover);
    --color-destructive--visited: var(--border-color-error);

    --color-emphasized: var(--color-base);
    --color-progressive--active: var(--color-progressive--hover);
    --background-color-progressive-subtle: var(--background-color-progressive);
    --background-color-progressive--active: var(--background-color-progressive--hover);
    --border-color-progressive: var(--background-color-progressive);
    --border-color-progressive--active: var(--background-color-progressive--hover);
    --border-color-progressive--hover: var(--background-color-progressive--hover);

    --color-destructive--focus: var(--color-inverted-fixed);
    --color-progressive--focus: var(--color-progressive--hover);
    --box-shadow-color-progressive--focus: var(--background-color-progressive);
    --border-color-progressive--focus: var(--background-color-progressive);
    --background-color-progressive--focus: var(--background-color-progressive);
    --box-shadow-color-destructive--focus: var(--color-inverted-fixed);
    --background-color-destructive--focus: var(--color-inverted-fixed);
    --background-color-destructive-subtle: var(--background-color-error--hover);
    --border-color-destructive--focus: var(--color-inverted-fixed);
    --outline-color-progressive--focus: var(--color-inverted-fixed);

    --background-color-interactive-subtle: var(--background-color-neutral);
    --background-color-notice-subtle: var(--background-color-neutral);
    --border-color-interactive: var(--background-color-progressive);

    /* Colors on diff pages and byte difference counters */
    --color-content-added: var(--color-success);
    --color-content-removed: var(--background-color-error);
    --background-color-content-added: var(--color-success);
    --background-color-content-removed: var(--background-color-error);
    --border-color-content-added: var(--color-success);
    --border-color-content-removed: var(--background-color-error);

    /* Colors that generally don't change between skins */
    --color-error: #d33; /* hardcoded background for .error */
    --color-warning: #cf721c; /* --theme-warning-color */
    --color-success: #0c742f; /* --theme-success-color */
    --background-color-error: #bf0017; /* --theme-alert-color */
    --background-color-error--hover: #59000b; /* hardcoded background for the delete button */
    --color-base-fixed: rgba(0, 0, 0, 0.65);

    --background-color-error-subtle: rgba(191, 0, 23, 0.25); /* --theme-alert-color--rgb */
    --background-color-warning-subtle: rgba(207, 114, 28, 0.25); /* --theme-warning-color--rgb */
    --background-color-success-subtle: rgba(12, 116, 47, 0.25); /* --theme-success-color--rgb */
    --border-color-error: #e7001b; /* --theme-alert-color--secondary */
    --border-color-warning: #cf721c; /* --theme-warning-color--secondary */
    --border-color-success: #0d8636; /* --theme-success-color--secondary */
    --border-color-error--hover: #fe2540; /* --theme-alert-color--hover */

    --invert-on-dark: none;
}

html.skin-theme-clientpref-night {
    --background-image: url("/bg-dark.png");
    --background-color-base: black; /* --theme-page-background-color */
    --color-base: #e6e6e6; /* --theme-page-text-color */
    --color-base--rgb: 230, 230, 230;
    --color-progressive: #0093ad; /* --theme-link-color */
    --color-progressive--hover: #14dbff; /* --theme-link-color--hover */
    --color-inverted-fixed: #fff; /* --theme-accent-label-color. Wikimedia says this should be unchanging between light and dark themes, then proceeds to use it in label colors... */
    --border-color-base: #3a3a3a; /* --theme-border-color */
    --background-color-neutral: #262626; /* --theme-page-background-color--secondary */
    --background-color-neutral-subtle: #131313; /* Wikitable background, between --background-color-base and --background-color-neutral */
    --background-color-progressive: #163f44; /* --theme-accent-color */
    --background-color-progressive--hover: #2e8691; /* --theme-accent-color--hover */
    --background-color-progressive-subtle: rgba(0, 147, 173, 0.3); /* --theme-link-color--rgb */

    /* Used for the temporary user banner and disabled buttons */
    --color-inverted: #101418;
    --border-color-inverted: #101418;
    --background-color-inverted: #f8f9fa;
    --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
    --background-color-backdrop-dark: rgba(255, 255, 255, 0.65);

    --invert-on-dark: invert(1);

    /* I don't know how to remap these colors */
    --color-notice: #f8f9fa;
    --color-base--subtle: #a2a9b1;
    --background-color-interactive: #27292d;
    --background-color-disabled: #54595d;
    --background-color-disabled-subtle: #404244;
    --border-color-subtle: #54595d;
    --border-color-muted: #404244;
    --border-color-disabled: #54595d;
    --border-color-notice: #c8ccd1;
    --box-shadow-color-inverted: #000;
}

html.skin-theme-clientpref-os, html.skin-theme-clientpref-day {
    --background-image: url("/bg-light.png");
    --background-color-base: #E5F1FA;
    --color-base: #161f50;
    --color-base--rgb: 230,230,230;
    --color-progressive: #2170c2;
    --color-progressive--hover: #159ae9;
    --color-inverted-fixed: #dfe5f3;
    --border-color-base: #6087a9;
    --background-color-neutral: #C1D7EB;
    --background-color-neutral-subtle: #abcee4;
    --background-color-progressive: #2b3e76;
    --background-color-progressive--hover: #00bbc8;
    --background-color-progressive-subtle: rgba(8, 132, 136, 0.3);
    --color-inverted: #fff;
    --border-color-inverted: #fff;
    --background-color-inverted: #101418;
    --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
    --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
    --color-notice: #202122;
    --color-base--subtle: #54595d;
    --background-color-interactive: #eaecf0;
    --background-color-disabled: #c8ccd1;
    --background-color-disabled-subtle: #eaecf0;
    --border-color-subtle: #c8ccd1;
    --border-color-muted: #dadde3;
    --border-color-disabled: #c8ccd1;
    --border-color-notice: #54595d;
    --box-shadow-color-inverted: #fff;
}

@media screen and ( prefers-color-scheme: dark ) {
    html.skin-theme-clientpref-os {
        --background-image: url("/bg-dark.png");
        --background-color-base: black; /* --theme-page-background-color */
        --color-base: #e6e6e6; /* --theme-page-text-color */
        --color-base--rgb: 230, 230, 230;
        --color-progressive: #0093ad; /* --theme-link-color */
        --color-progressive--hover: #14dbff; /* --theme-link-color--hover */
        --color-inverted-fixed: #fff; /* --theme-accent-label-color. Wikimedia says this should be unchanging between light and dark themes, then proceeds to use it in label colors... */
        --border-color-base: #3a3a3a; /* --theme-border-color */
        --background-color-neutral: #262626; /* --theme-page-background-color--secondary */
        --background-color-neutral-subtle: #131313; /* Wikitable background, between --background-color-base and --background-color-neutral */
        --background-color-progressive: #163f44; /* --theme-accent-color */
        --background-color-progressive--hover: #2e8691; /* --theme-accent-color--hover */
        --background-color-progressive-subtle: rgba(0, 147, 173, 0.3); /* --theme-link-color--rgb */
    
        /* Used for the temporary user banner and disabled buttons */
        --color-inverted: #101418;
        --border-color-inverted: #101418;
        --background-color-inverted: #f8f9fa;
        --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
        --background-color-backdrop-dark: rgba(255, 255, 255, 0.65);
    
        --invert-on-dark: invert(1);
    
        /* I don't know how to remap these colors */
        --color-notice: #f8f9fa;
        --color-base--subtle: #a2a9b1;
        --background-color-interactive: #27292d;
        --background-color-disabled: #54595d;
        --background-color-disabled-subtle: #404244;
        --border-color-subtle: #54595d;
        --border-color-muted: #404244;
        --border-color-disabled: #54595d;
        --border-color-notice: #c8ccd1;
        --box-shadow-color-inverted: #000;
    }
}

/** Main body styling **/
body {
    background: var(--background-image);
    /* Used to color the bottom bar on mobile browsers */
    background-color: var(--background-color-base);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/** Fonts **/
@font-face {
    font-family: "Determination Mono";
    font-display: swap;
    src: url("/determination.woff2") format("woff2");
}

/** Button styling **/
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled,
.mw-ui-button {
    background-color: var(--background-color-progressive);
    border-width: 0;
    color: var(--color-inverted-fixed);
}

.cdx-button:enabled:hover,
.cdx-button:enabled:active,
.cdx-button:enabled.cdx-button--is-active,
.cdx-button.cdx-button--fake-button--enabled:hover,
.cdx-button.cdx-button--fake-button--enabled:active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--is-active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button,
.mw-ui-button:not(:disabled):hover {
    background-color: var(--background-color-progressive--hover);
    color: var(--color-inverted-fixed);
}

/** Table styling **/
.wikitable {
    background-color: var(--background-color-base);
    border: 0;
    display: block;
    overflow-x: auto;
    text-align: center;
    width: 100%;
}

.wikitable td {
    background-color: var(--background-color-neutral-subtle);
}

.wikitable tr:target td {
    background-color: var(--background-color-progressive-subtle);
}

.wikitable ul {
    list-style-type: none;
    margin: 0;
}

.wikitable li {
    margin: 0;
}

table.wikitable > * > tr > th {
    background-color: var(--background-color-progressive);
    color: var(--color-inverted-fixed);
}

@media screen and (max-width: 720px) {
    .wikitable:not(.mobile-nowrap) td, .wikitable:not(.mobile-nowrap) th {
        min-width: 200px;
    }
    .wikitable.mobile-nowrap td, .wikitable.mobile-nowrap th {
        white-space: nowrap;
    }
}

/** Infobox styling **/
.portable-infobox {
    background-color: var(--background-color-base);
    border: 1px solid var(--border-color-base);
    border-radius: 8px;
    font-weight: normal;
    padding: 0.5em;
    text-align: center;
    width: 40%;
}

@media screen and (max-width: 720px) {
    .portable-infobox {
        box-sizing: border-box;
        width: 100%;
    }
}

.portable-infobox img {
    height: auto;
    max-width: 100%;
}

.portable-infobox .pi-media {
    margin-top: 10px;
}

.portable-infobox .pi-title {
    background: var(--background-color-progressive);
    border-radius: 5px;
    color: var(--color-inverted-fixed);
    font-family: "Determination Mono", sans-serif;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    margin: 0 0 0.5em;
    padding: 9px 12px;
    text-align: center;
}

.portable-infobox .pi-secondary-background {
    background-color: var(--background-color-progressive);
    color: var(--color-inverted-fixed);
    font-size: 14px;
    font-weight: 700;
    padding: 9px;
}

.portable-infobox .pi-navigation {
    background-color: var(--background-color-base);
}

.portable-infobox .pi-section-navigation,
.portable-infobox .pi-media-collection-tabs {
    flex-wrap: nowrap;
    font-size: 16px;
    gap: 10px;
    justify-content: initial;
    overflow-x: auto;
    margin-bottom: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pi-section-navigation::-webkit-scrollbar,
.pi-media-collection-tabs::-webkit-scrollbar {
    display: none;
}


.pi-section-navigation .pi-section-tab,
.pi-media-collection li.pi-tab-link {
    border: 0;
    border-bottom: 3px solid var(--color-base);
    overflow: visible;
    max-width: 100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
    background: none;
    border-bottom: 3px solid var(--background-color-progressive);
}

.portable-infobox .pi-data-label {
    font-size: 12px;
    line-height: 1.5;
}

.pi-image {
    margin: 0.5em auto;
    text-align: center;
}

.portable-infobox .pi-border-color {
    border: none;
}

.pi-data-value {
    margin: auto;
}

.pi-caption {
    text-align: center;
}

.portable-infobox ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
}

.pi-data[data-source="caption"] .pi-data-value,
.pi-data[data-source="battle"] .pi-data-value,
.pi-data[data-source="shop"] .pi-data-value,
.pi-data[data-source="flavortext"] .pi-data-value,
.pi-data[data-source="usetext"] .pi-data-value {
    font-style: italic;
}

body:not(.page-Lightners):not(.page-Darkners) .pi-data[data-source="caption"] .pi-data-value:before,
body:not(.page-Lightners):not(.page-Darkners) .pi-data[data-source="caption"] .pi-data-value:after {
    content: "\"";
}

.portable-infobox.pi-theme-person div[data-source="links"] ul {
    column-count: 2;
    list-style-type: none;
}

.portable-infobox.pi-theme-person .pi-group:nth-of-type(2) .pi-data-value {
    width: 100%;
}

/** [[Template:Navbox]] **/
.portable-infobox.pi-theme-navbox {
    border-radius: 5px;
    float: none;
    margin: 0;
    /* fallback width */
    width: 100%;
    /* (1px border + 0.5em padding) * 2 = 16px */
    width: calc(100% - 1em - 2px);
}

.pi-theme-navbox .pi-header a {
    color: var(--color-inverted-fixed);
    font-family: "Determination Mono", sans-serif;
}

.pi-theme-navbox .pi-data-value {
    flex-basis: 600px;
    width: 100%;
}

.pi-theme-navbox .pi-data-label {
    flex-basis: 200px;
}

.portable-infobox .pi-horizontal-group .pi-header {
    text-align: center;
}

@media screen and (max-width: 639px) {
    .portable-infobox table.pi-horizontal-group {
        display: table;
    }
}

@media screen and (max-width: 720px) {
    .pi-media-collection-tabs {
        display: none;
    }

    .pi-media-collection {
        display: flex;
        overflow-x: auto;
    }

    .pi-media-collection-tab-content {
        display: block;
        min-width: calc(-1.5rem + 50vw);
    }
    
    .pi-data {
        --pi-item-spacing: 10px;
        flex-direction: column;
        text-align: left;
    }

    .pi-data .pi-data-label {
        flex-basis: unset;
        font-size: 1em;
    }
        
    .pi-data .pi-data-value {
        box-sizing: border-box;
        flex-basis: unset;
        margin: 0 10px;
    }

    
    .portable-infobox ul {
        text-align: left;
    }
}

/** [[Template:Quote]] **/
blockquote.quote {
    font-size: inherit;
    line-height: inherit;
    margin: 0.1em 0.2em 0.6em 2em;
    width: 300px;
}

blockquote.quote > p:first-of-type {
    background-color: var(--background-color-progressive);
    border-radius: 8px;
    color: var(--color-inverted-fixed);
    font-style: italic;
    padding: 0.5em 1em;
}

blockquote.quote > p > cite:before {
    content: "— ";
}

.mw-body blockquote.quote {
    margin-top: 0.1em;
}

/** [[Template:For]], [[Template:Main]] **/
.hatnote {
    background-color: var(--background-color-interactive-subtle);
    font-style: italic;
    margin-bottom: 0.5em;
    padding-left: 1.6em;
}

/** [[Template:Stub]], [[Template:Delete]] **/
.mbox {
    border: 1px solid var(--border-color-progressive);
    display: grid;
    gap: 5px;
    grid-template-areas:
        'image header'
        'image content';
    grid-template-columns: 50px 1fr;
    padding: 10px;
}

@media screen and (min-width: 719px) {
    .mbox {
        margin: 0 10%;
    }
}

.mbox-image {
    align-items: center;
    display: flex;
    grid-area: image;
    justify-content: center;
}

.mw-body .mbox-header {
    grid-area: header;
    margin: 0;
    padding: 0;
}

.mw-body .mbox-content {
    font-style: italic;
    grid-area: content;
    margin: 0;
    padding: 0;
}

/** [[Template:Clear]] **/
.clear {
    clear: both;
}

/** Easy formatting **/
/* Colors */
.red {
    color: #F4001C;
}

.orange {
    color: #F4A521;
}

.yellow {
    color: #FBFF29;
}

html.skin-theme-clientpref-day .yellow {
    text-shadow: 1px 1px 1px #000,
                -1px -1px 1px #000,
                 1px 0 1px #000,
                -1px 0 1px #000,
                 0 1px 1px #000,
                 0 -1px 1px #4d4508;
}

@media screen and ( prefers-color-scheme: light ) {
    html.skin-theme-clientpref-os .yellow {
        text-shadow: 1px 1px 1px #000,
                    -1px -1px 1px #000,
                     1px 0 1px #000,
                    -1px 0 1px #000,
                     0 1px 1px #000,
                     0 -1px 1px #4d4508;
    }
}

.green {
    color: #34C217;
}

.cyan, .aqua {
    color: #67FDFE;
}

.blue {
    color: #3627FC;
}

.purple {
    color: #CE1BD6;
}

/* Fonts */
.csans, .sans {
    font-family: "Comic Sans MS",
                 "Comic Sans",
                 "Chalkboard SE",
                 sans-serif;
}

.papyrus {
    font-family: "Papyrus", sans-serif;
}

.dt {
    font-family: "Determination Mono", monospace;
}

/** <poem> styling **/
.poem {
    font-style: italic;
}

/** <code> styling **/
code {
    word-break: break-all;
}

/** Make the wiki wordmark smaller on mobile **/
@media screen and (max-width: 720px) {
    .mw-logo-wordmark {
        height: 2em !important;
        width: 8em !important;
    }
}

/** File frames **/
li.gallerybox div.thumb {
    background-color: inherit;
    border: 0;
}

li.gallerybox div.thumb img {
    border: 1px solid var(--border-color-base);
    image-rendering: pixelated;
}

figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element,
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
figure[typeof~='mw:File/Thumb'] > figcaption,
figure[typeof~='mw:File/Frame'] > figcaption {
    background-color: transparent;
    border: 0;
}

@media (max-width: calc(639px)) {
    .mw-content-ltr figure[typeof~='mw:File/Thumb'],
    .mw-content-ltr figure[typeof~='mw:File/Frame'] {
        width: 100%;
    }
}

.mw-file-description::after {
    display: none;
}

.mw-default-size, figure[typeof~='mw:File/Thumb'] {
    min-width: 100px;
}

.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after, .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
    background-image: none;
}

/** RelatedArticles **/
#mw-data-after-content {
    padding: 0 20px 20px 20px;
}

.read-more-container-card-list li {
    box-shadow: 0 1px 1px color-mix(in srgb, var(--background-color-progressive) 50%, transparent);
    height: 5rem;
    min-width: 0;
}

.read-more-container-card-list .cdx-card__text {
    width: 85%;
}

.read-more-container-card-list .cdx-card__text__title {
    font-size: 1.1em;
    font-weight: bold;
    text-transform: none;
}

.read-more-container-card-list .cdx-card__text__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.read-more-container-card-list .cdx-thumbnail__image {
    background-position: top;
}

/** Fix for [[Special:Version]] **/
.wikitable.mw-installed-software th:nth-child(5),
.mw-installed-software th:nth-child(4) {
    width: 13em;
}
Disponível em “https://pt-br.undertale.wiki/w/MediaWiki:Common.css?oldid=12521”
Adicionar tópico