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

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 1: Line 1:
/* <pre><nowiki> */
/* Fondo general de la wiki */
 
body {
/* Tolkien Gateway theme */
     background-color: #1a1a1f; /* Fondo de la wiki */
 
     font-family: 'Crimson Text', serif; /* Fuente para el texto ordinario */
/* Import fonts from Google Fonts: EB Garamond, Lora */
     color: #f5f5f5; /* Color del texto para contraste */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
 
/*
* Use customized system fonts as fallback for font stack
* Needed to avoid layout shift
*/
@font-face {
     font-family: "EB Garamond-fallback";
    size-adjust: 94.29999999999998%;
    ascent-override: 101%;
    descent-override: 36.40000000000171%;
    src: local("Times New Roman");
}
 
@font-face {
    font-family: "Lora-fallback";
    size-adjust: 105.20000000000005%;
    ascent-override: 92%;
    descent-override: 32.60000000000166%;
    src: local("Georgia");
}
 
/* CSS variables */
:root {
    /* Border */
    /* Border color */
    --tg-border-color-base: rgba(0, 0, 0, 0.08);
    --tg-border-color-subtle: rgba(0, 0, 0, 0.05);
    --tg-border-color-interactive: rgba(0, 0, 0, 0.11);
    /* Border radius */
    --tg-border-radius-sharp: 0;
    --tg-border-radius-small: 4px;
    --tg-border-radius-medium: 8px;
    --tg-border-radius-large: 12px;
    --tg-border-radius-pill: 9999px;
    --tg-border-radius-circle: 50%;
    /* Shorthand */
    --tg-border-base: 1px solid var(--tg-border-color-base);
 
    /* Color */
    /* Text color */
    --tg-color-emphasized: #1a1f15;
    --tg-color-base: #2a3025;
    --tg-color-subtle: #4e5a42;
    --tg-color-inverted-progressive: #fff;
    --tg-color-link: #36c;
    /* Background color */
     --tg-color-surface-0: #f9f4ee;
    --tg-color-surface-1: #fffbf6;
    --tg-color-surface-2: #f6ede0;
    --tg-color-surface-3: #f0e3cf;
    --tg-color-surface-4: #e6d9c5;
    --tg-color-surface-5: #e3d2b8;
    /* Progressive color */
    --tg-color-progressive: #507b07;
    --tg-color-progressive--hover: #588418;
    --tg-color-progressive--active: #4a710a;
 
    /* Font */
    /* Font family */
    --tg-font-family-heading: "EB Garamond", "EB Garamond-fallback", serif;
    --tg-font-family-body: "Lora", "Lora-fallback", serif;
    /* Font size */
    --tg-font-size-x-small: 0.8125rem;
    --tg-font-size-small: 0.875rem;
    --tg-font-size-medium: 1rem;
    --tg-font-size-large: 1.125rem;
    --tg-font-size-x-large: 1.25rem;
    --tg-font-size-xx-large: 1.5rem;
    --tg-font-size-xxx-large: 2rem;
    /* Font weight */
    --tg-font-weight-regular: 400;
    --tg-font-weight-medium: 500;
    --tg-font-weight-semibold: 600;
    /* Line height */
    --tg-line-height-xxx-small: 1.25;
    --tg-line-height-xx-small: 1.375;
    --tg-line-height: 1.6;
 
    /* Opacity */
    --tg-opacity-pattern: 0.08;
   
    /* Codex token backport */
    /* Quiet color */
    --background-color-button-quiet--hover: rgba(0, 0, 0, 0.07);
    --background-color-button-quiet--active: rgba(0, 0, 0, 0.09);
}
 
html {
    /* Force serif fonts to format number on the same line */
    font-variant-numeric: lining-nums;
}
 
/* Blockquote */
blockquote {
    padding-left: 1rem;
    border-left: 2px solid var(--tg-border-color-base);
    font-style: italic;
    /* Fallback for non-Chromium browsers */
    text-wrap: balance;
    /* Only works on Chromium browsers */
    text-wrap: pretty;
}
 
blockquote cite {
    color: var(--tg-color-subtle);
    font-size: var(--tg-font-size-x-small);
    font-style: normal;
}
 
blockquote cite::before {
    content: "―";
    margin-right: 0.5em;
}
 
blockquote > p:first-child::before {
    content: open-quote;
}
 
/* <cite> is wrapped in the last <p> */
blockquote:has(cite) > p:nth-last-child(2)::after,
blockquote:not(:has(cite)) > p:last-child::after {
    content: close-quote;
}
 
/* LINKS */
a {
    /*color: var(--tg-color-link);*/
}
 
.underlinelink a {
    text-decoration: underline !important;
}
.nounderlinelink a {
    text-decoration: none !important;
}
.nounderlinelink a:hover {
    text-decoration: underline !important;
}
 
/* SEQUENCE TEMPLATE */
 
td.seqwhite a {
    color: #ffffff !important;
}
td.seqwhite div span a {
    color: #ffffff !important;
}
td.seqcream a {
    color: #fffdd0 !important;
}
td.seqcream div span a {
     color: #fffdd0 !important;
}
td.seqgrey a {
    color: #2a2a2a !important;
}
td.seqgrey div span a {
    color: #2a2a2a !important;
}
 
/* REFERENCES TEMPLATE */
ol.references {
    font-size: var(--tg-font-size-x-small);
    margin-top: 0px;
    padding-top: 0px;
}
.references-small {
    font-size: 0.75rem;
}
ol.references > li:target {
    background-color: #ddeeff;
}
sup.reference:target {
    background-color: #ddeeff;
}
 
/* Infobox customizations so they scale for desktop and mobile appropriately */
@media only screen and (max-width: 600px) {
    .tginfobox {
        min-width: 100%;
    }
}
 
@media only screen and (min-width: 601px) {
    .tginfobox {
        width: 275px;
    }
}
 
@media screen and (max-width: 600px) {
    .spotify {
        float: center;
        margin-left: 10px;
    }
}
}


.pi-type-film .pi-secondary-background {
/* Fondo del pie de página */
     background: rgb(238, 249, 238);
#footer, .mw-footer {
     background: linear-gradient(
     background-color: #1a1a1f; /* Fondo del pie de página */
        90deg,
     color: #f5f5f5; /* Color del texto en el pie de página */
        rgba(238, 249, 238, 1) 0%,
        rgba(171, 194, 171, 1) 35%,
        rgba(114, 139, 114, 1) 100%
    );
}
}


.pi-data {
/* Títulos en fuente Garamond */
     display: flex;
h1, h2, h3, h4, h5, h6 {
     align-items: center;
    font-family: 'Garamond', serif; /* Fuente para los títulos */
     border-bottom: none; /* Elimina la línea debajo de los títulos */
     margin-bottom: 1em; /* Añade un espacio debajo de los títulos */
}
}


.spotify {
/* Color de subrayado en amarillo */
    float: right;
::selection {
     width: 300px;
     background-color: #ffff00; /* Color amarillo para el fondo de selección */
     height: 100px;
     color: #1a1a1f; /* Color del texto cuando está subrayado */
}
}


@media screen and (max-width: 850px) {
/* Color amarillo para los enlaces */
     #p-logo-text {
a, a:visited {
        /* Tighten the logo a bit more to the left on mobile devices to prevent overlapping */
     color: #ffff00; /* Color de los enlaces */
        left: 3em;
    }
}
}


/* Print styles */
/* Estilo de enlaces al pasar el cursor */
@media print {
a:hover, a:active {
     :root {
     color: #e6e600; /* Color de los enlaces al pasar el cursor */
        /* Border */
        /* Border color */
        --tg-border-color-base: #aaa !important;
        --tg-border-color-subtle: #ddd !important;
        --tg-border-color-interactive: #000 !important;
        /* Color */
        /* Text color */
        --tg-color-emphasized: #000 !important;
        --tg-color-base: #222 !important;
        --tg-color-subtle: #444 !important;
        /* Background color */
        --tg-color-surface-0: #fff !important;
        --tg-color-surface-1: #fff !important;
        --tg-color-surface-2: #fff !important;
        --tg-color-surface-3: #fff !important;
        --tg-color-surface-4: #fff !important;
        --tg-color-surface-5: #fff !important;
        /* Progressive color */
        --tg-color-progressive: #000 !important;
    }
}
}


/* </nowiki></pre> */
/* Importar las fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=Garamond:wght@400;700&display=swap');

Revision as of 13:46, 5 November 2024

/* Fondo general de la wiki */
body {
    background-color: #1a1a1f; /* Fondo de la wiki */
    font-family: 'Crimson Text', serif; /* Fuente para el texto ordinario */
    color: #f5f5f5; /* Color del texto para contraste */
}

/* Fondo del pie de página */
#footer, .mw-footer {
    background-color: #1a1a1f; /* Fondo del pie de página */
    color: #f5f5f5; /* Color del texto en el pie de página */
}

/* Títulos en fuente Garamond */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Garamond', serif; /* Fuente para los títulos */
    border-bottom: none; /* Elimina la línea debajo de los títulos */
    margin-bottom: 1em; /* Añade un espacio debajo de los títulos */
}

/* Color de subrayado en amarillo */
::selection {
    background-color: #ffff00; /* Color amarillo para el fondo de selección */
    color: #1a1a1f; /* Color del texto cuando está subrayado */
}

/* Color amarillo para los enlaces */
a, a:visited {
    color: #ffff00; /* Color de los enlaces */
}

/* Estilo de enlaces al pasar el cursor */
a:hover, a:active {
    color: #e6e600; /* Color de los enlaces al pasar el cursor */
}

/* Importar las fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=Garamond:wght@400;700&display=swap');