, etc., y luego añade clases para Quetzalcóatl * Después, añade un modificador .quetzalcoatl a algunas clases de Bootstrap * Finalmente, añade clases que son específicas de Quetzalcóatl */ /* Antes que nada, define unas pseudo variables in :root */ :root { --qt-gray-bg: #eee; --qt-gray-bg-rgb: 238, 238, 238; --qt-dark-green: #1c461c; /* extraído de Quetzalcóatl */ --qt-dark-green-rgb: 28, 70, 28; --qt-green: #496b49; /* mix(while, dark-green, 20%) */ --qt-green-rgb: 73, 107, 73; --qt-light-green: #607e60; /* mix(white, dark-green, 30%) */ --qt-light-green-rgb: 96, 126, 96; --qt-gold: #e0cc5b; /* extraído de Quetzalcóatl */ --qt-gold-rgb: 224 204 91; --qt-dark-gold: #b3a349; /* mix(black, gold, 20%) */ --qt-dark-gold-rgb: 179, 163, 73; --qt-dark-red: #a20303; --qt-dark-red-rgb: 162, 3, 3; } body { --bs-body-bg: var(--qt-gray-bg); --bs-body-bg-rgb: var(--qt-gray-bg-rgb); padding: 0.5rem 1rem 1rem 1rem; color: var(--qt-main-color); } body.qt-green-theme { --qt-main-color: var(--qt-dark-green); --qt-main-color-rgb: var(--qt-dark-green-rgb); } body.qt-gold-theme { --qt-main-color: var(--qt-gold); --qt-main-color-rgb: var(--qt-gold-rgb); } body.qt-login { height: 100vh; background-image: url(../images/Quetzalcóatl/Quetzalcóatl.png), linear-gradient(to bottom right, rgba(var(--qt-dark-green-rgb), 1), 85%, rgba(var(--bs-white-rgb), 0)); background-repeat: no-repeat, no-repeat; background-position: bottom right, left; background-size: 40vw, auto; } @media(min-width: 576px) { body.qt-login { background-size: 30vw, auto; } } @media(min-width: 1200px) { body.qt-login { background-size: 20vw, auto; } } main, footer { padding: 1rem; } main.bg-qt-logo { --bs-bg-opacity: 0.075; background: no-repeat url(../images/Quetzalcóatl/Quetzalcóatl.png) bottom right/30vw; background-color: rgba(var(--qt-green-rgb), var(--bs-bg-opacity)) !important; } @media(min-width: 576px) { main.bg-qt-logo { background-size: 20vw; } } @media(min-width: 1200px) { main.bg-qt-logo { background-size: 15vw; } } main.quetzalcoatl, footer.quetzalcoatl { overflow: auto; margin-top: 1rem; background-color: var(--bs-white); border: 1px solid var(--bs-black); } header.quetzalcoatl { margin-top: 0; margin-bottom: 1.5rem; font-family: inherit; font-weight: 600; line-height: normal; font-size: 1.75rem; text-align: center; color: var(--qt-main-color); } input.qt-input, select.qt-select { border: 1px solid var(--qt-main-color); font-weight: 600; color: var(--qt-main-color); background-color: transparent; } form.qt-form { --qt-border-max-width: 35rem; max-width: var(--qt-border-max-width); padding: 1rem; margin: 0 auto; } form.qt-form-sm { --qt-border-max-width: 25rem; } .qt-label { --bs-text-opacity: 0.8; font-size: 115%; font-style: italic; font-weight: 600; color: rgba(var(--qt-main-color-rbg), var(--bs-text-opacity)); } .qt-static-value { font-size: 115%; font-style: italic; font-weight: 600; color: var(--qt-dark-red); } .hr-qt hr { border-top-color: var(--qt-main-color); border-top-width: 2px; } .alert-qt { --bs-alert-color: var(--qt-gold); --bs-alert-bg: var(--qt-light-green); --bs-alert-border-color: var(--qt-dark-gold); } .alert-qt .alert-link { color: var(--qt-dark-gold); } .alert-outline-qt { --bs-alert-color: var(--qt-gold); --bs-alert-bg: transparent; --bs-alert-border-color: var(--qt-gold); } .alert-outline-qt .alert-link { color: var(--qt-green); } .alert-qt-gold { --bs-alert-color: var(--qt-green); --bs-alert-bg: var(--qt-gold); --bs-alert-border-color: var(--qt-green); } .alert-qt-gold .alert-link { color: #000; } .alert-outline-qt-gold { --bs-alert-color: var(--qt-gold); --bs-alert-bg: transparent; --bs-alert-border-color: var(--qt-gold); } .alert-outline-qt-gold .alert-link { color: var(--qt-dark-gold); } .qt-alert-border { --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color); } .border-qt { --bs-border-opacity: 1; border-color: rgba(var(--qt-main-color-rgb), var(--bs-border-opacity)) !important; } .border-qt-dark-red { --bs-border-opacity: 1; border-color: rgba(var(--qt-dark-red-rgb), var(--bs-border-opacity)) !important; } .bg-qt { --bs-bg-opacity: 1; background-color: rgba(var(--qt-main-color-rgb), var(--bs-bg-opacity)) !important; } .bg-qt-green { --bs-bg-opacity: 1; background-color: rgba(var(--qt-green-rgb), var(--bs-bg-opacity)) !important; } .bg-qt-light-green { --bs-bg-opacity: 1; background-color: #c0cbc0; } .text-qt { --bs-text-opacity: 1; color: rgba(var(--qt-main-color-rgb), var(--bs-text-opacity)) !important; } .text-qt-muted { --bs-text-opacity: 0.5; color: rgba(var(--qt-main-color-rgb), var(--bs-text-opacity)) !important; } .text-qt-dark-red { --bs-text-opacity: 1; color: rgba(var(--qt-dark-red-rgb), var(--bs-text-opacity)) !important; } .text-qt-gold { --bs-text-opacity: 1; color: rgba(var(--qt-gold-rgb), var(--bs-text-opacity)) !important; } .link-qt { --bs-link-color: var(--qt-main-color); color: inherit !important; } .link-qt-dark-red { --bs-link-color: var(--qt-dark-red); } .select-qt-gold-marker { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0cc5b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; } .qt-navbar { --bs-navbar-padding-x: 1rem; border-radius: 0.25rem; } .qt-nav-button-dark { border: 1px solid var(--qt-gold); } .qt-nav-button { border: 1px solid var(--qt-green); } .qt-nav-button-dark, .qt-nav-button { border-radius: 0.25em; padding: 0.1em; } .qt-logo { display: inline-block; line-height: 1.0; margin-right: 0.25em; } .table-qt { --bs-table-color: #1c461c; /* dark-green => color */ --bs-table-bg: #d2dad2; /* mix(white, dark-green, 0.8) => background */ --bs-table-border-color: #c0cbc0; /* mix(color, background, 0.1) */ --bs-table-striped-bg: #c9d3c9; /* mix(color, background, 0.05) */ --bs-table-striped-color: #1c461c; /* color */ --bs-table-active-bg: #c0cbc0; /* mix(color, background, 0.1) */ --bs-table-active-color: #1c461c; /* color */ --bs-table-hover-bg: #c4cfc4; /* mix(color, background, 0.075) */ --bs-table-hover-color: #1c461c; /* color */ color: var(--bs-table-color); border-color: var(--bs-table-border-color); } /* A "dark" button and its outline */ .btn-qt { --bs-btn-font-weight: 600; /* semibold en vez de normal */ --bs-btn-color: #fff; /* contrast(background) => color */ --bs-btn-bg: #496b49; /* light-green => background */ --bs-btn-border-color: #496b49; /* light-green => border */ --bs-btn-hover-color: #fff; /* contrast */ --bs-btn-hover-bg: #3e5b3e; /* mix(black, background, 0.15) */ --bs-btn-hover-border-color: #3a563a; /* mix(black, border, 0.2) */ --bs-btn-focus-shadow-rgb: 100, 129, 100; /* mix(color, border, 0.15) en RGB */ --bs-btn-active-color: #fff; /* contrast */ --bs-btn-active-bg: #3a563a; /* mix(black, background, 0.2) */ --bs-btn-active-border-color: #375037; /* mix(black, border, 0.25) */ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; /* contrast */ --bs-btn-disabled-bg: #335933; /* background */ --bs-btn-disabled-border-color: #335933; /* border */ } .btn-outline-qt { --bs-btn-font-weight: 600; --bs-btn-color: #496b49; /* green => color */ --bs-btn-border-color: #496b49; /* color */ --bs-btn-hover-color: #fff; /* contrast */ --bs-btn-hover-bg: #496b49; /* color */ --bs-btn-hover-border-color: #496b49; /* color */ --bs-btn-focus-shadow-rgb: 73, 107, 73; /* color en RGB */ --bs-btn-active-color: #fff; /* contrast */ --bs-btn-active-bg: #496b49; /* color */ --bs-btn-active-border-color: #496b49; /* color */ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #496b49; /* color */ --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #496b49; /* color */ --bs-gradient: none; } /* A "light" button and its outline */ .btn-qt-gold { --bs-btn-font-weight: 600; --bs-btn-color: #000; /* contrast(gold) => color */ --bs-btn-bg: #e0cc5b; /* gold => background */ --bs-btn-border-color: #e0cc5b; /* gold => border */ --bs-btn-hover-color: #000; --bs-btn-hover-bg: #e5d474; /* mix(white, background, 0.15) */ --bs-btn-hover-border-color: #e3d16c; /* mix(white, border, 0.1) */ --bs-btn-focus-shadow-rgb: 190, 173, 77; --bs-btn-active-color: #000; --bs-btn-active-bg: #e6d67c; /* mix(white, background, 0.2) */ --bs-btn-active-border-color: #e3d16c; /* mix(white, border, 0.1) */ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #000; --bs-btn-disabled-bg: #e0cc5b; --bs-btn-disabled-border-color: #e0cc5b; } .btn-outline-qt-gold { --bs-btn-font-weight: 600; --bs-btn-color: #e0cc5b; /* gold => color */ --bs-btn-border-color: #e0cc5b; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #e0cc5b; --bs-btn-hover-border-color: #e0cc5b; --bs-btn-focus-shadow-rgb: 224, 204, 91; --bs-btn-active-color: #000; --bs-btn-active-bg: #e0cc5b; --bs-btn-active-border-color: #e0cc5b; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #e0cc5b; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #e0cc5b; --bs-gradient: none; }