, also add modifier classes to a few standard tags * Next, add a .iquiniela modifier to some Bootstrap classes * At the end, a few iQuiniela-specific classes */ :root { --iq-gray-bg: #eee; --iq-gray-bg-rgb: 238, 238, 238; --iq-dark-green: #1c461c; /* Taken from Quetzalcoatl */ --iq-dark-green-rgb: 28, 70, 28; --iq-green: #1f8035; /* "winner" highlight in picks */ --iq-green-rgb: 31, 128, 53; --iq-dark-teal: #257; /* Traditional iquiniela color */ --iq-dark-teal-rgb: 34, 85, 119; --iq-teal: #4e7792; /* mix(white, dark-teal, 20% */ --iq-teal-rgb: 78, 119, 146; --iq-light-teal: #6f91a7; /* mix(white, dark-teal, 35%) */ --iq-light-teal-rgb: 100, 136, 160; --iq-teal-bg: #d3dde4; /* mix(white, dark-teal, 80%) */ --iq-teal-bg-rgb: 211, 221, 228; --iq-dark-red: #a20303; /* Traditional iquiniela highlight */ --iq-dark-red-rgb: 162, 3, 3; --iq-light-red: #be4f4f; /* mix(white, dark-red, 30%) */ --iq-light-red-rgb: 190, 79, 79; --iq-red-bg: #edcdcd; /* mix(white, dark-red, 80%) */ --iq-red-bg-rgb: 237, 205, 205; } body { --bs-body-bg: var(--iq-gray-bg); --bs-body-bg-rgb: var(--iq-gray-bg-rgb); --iq-main-color: var(--iq-teal); --iq-main-color-rgb: var(--iq-teal-rgb); --iq-light-color: var(--iq-teal-bg); --iq-light-color-rgb: var(--iq-teal-bg-rgb); --iq-dark-color: var(--iq-dark-teal); --iq-dark-color-rgb: var(--iq-dark-teal-rgb); --iq-alt-color: var(--iq-dark-red); --iq-alt-color-rgb: var(--iq-dark-red-rgb); --iq-alt-light: var(--iq-red-bg); --iq-alt-light-rgb: var(--iq-red-bg-rgb); padding: 0.5rem 1rem 1rem 1rem; color: var(--iq-dark-color); } main, footer { padding: 1rem; } main.iq-login { margin-top: 3rem; text-align: center; } main.iquiniela, footer.iquiniela { --bs-body-bg: var(--bs-white); --bs-body-bg-rgb: var(--bs-white-rgb); overflow: visible; margin-top: 1rem; background-color: var(--bs-body-bg); border: 1px solid var(--iq-gray-bg); box-shadow: 0 0 0.25rem var(--bs-gray-700); } header.iquiniela { 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(--iq-dark-color); } hr { /* Change bootstrap's a bit */ margin: 0.5rem 0; border-top-width: 2px; opacity: 0.5; } form { max-width: var(--iq-border-max-width); padding: 1rem; margin: 0 auto; } .iq-form { --iq-border-max-width: 35rem; } .iq-form-sm { --iq-border-max-width: 24rem; } .iq-form-lg { --iq-border-max-width: 50rem; } .iq-login-form { --iq-border-max-width: 24rem; border-radius: 0.5rem; border: 1px solid var(--iq-dark-color); box-shadow: 0 0 0.25em var(--iq-main-color); } .iq-login-logo { display: inline-block; border: 1px solid var(--iq-main-color); border-radius: 0.25em; line-height: 1.0; margin-right: 0.25em; padding: 0.1em; } select.iq-select, input.iq-input { border: 1px solid var(--iq-dark-color); font-weight: 600; color: var(--iq-dark-color); background-color: transparent; } .iq-label { --bs-text-opacity: 0.8; font-size: 115%; font-style: italic; font-weight: 600; color: rgba(var(--iq-dark-color-rbg), var(--bs-text-opacity)); } .iq-static-value { font-size: 115%; font-style: italic; font-weight: 600; color: var(--iq-alt-color); } .navbar-iquiniela { --bs-navbar-padding-x: 1rem; --bs-bg-opacity: 1; background-color: rgba(var(--iq-dark-color-rgb), var(--bs-bg-opacity)); border-radius: 0.25rem; } .navbar-text { /* modify bootstrap's */ color: var(--iq-light-color) !important; } .iq-navbar-button { --bs-btn-color: var(--iq-light-color) !important; --bs-btn-disabled-color: var(--iq-light-color) !important; --bs-btn-border-color: var(--iq-light-color) !important; --bs-btn-hover-border-color: var(--iq-light-color) !important; --bs-btn-active-border-color: #fff !important; --bs-btn-padding-x: 0.4rem; --bs-btn-padding-y: 0; } .iq-navbar-button.active { box-shadow: 0 0 0.25rem #fff; } .iq-navbar-logo { line-height: 1.0; margin-right: 0.5rem; padding: 0.1rem; } .iq-navbar-logo, .iq-navbar-toggler { box-shadow: 0 0 0.25rem var(--iq-light-color); border: 1px solid var(--iq-main-color); border-radius: 0.375rem; } .alert-iq-red { --bs-alert-color: #610202; /* mix(black, dark-red, 0.4) => color */ --bs-alert-bg: #edcdcd; /* mix(white, dark-red, 0.8) (same as --iq-red-bg) */ --bs-alert-border-color: #e3b3b3; /* mix(white, dark-red, 0.7) */ } .alert-iq-red .alert-link { color: #4e0202; /* mix(black, color, 0.2) */ } .alert-iq-green { --bs-alert-color: #1f351f; /* mix(black, #335933, 0.4) (green chosen via GIMP palette) => color */ --bs-alert-bg: #d6ded6; --bs-alert-border-color: #c2cdc2; } .alert-iq-green .alert-link { color: #192a19; } .alert-iq-blue { --bs-alert-color: #2f4758; /* mix(black, teal, 0.4) => color */ --bs-alert-bg: #d6e4e9; --bs-alert-border-color: #cad6de; } .alert-iq-blue .alert-link { color: #263946; } .alert-outline-iq-blue { --bs-alert-color: var(--iq-dark-color); --bs-alert-bg: transparent; --bs-alert-border-color: var(--iq-dark-color); } .alert-outline-iq-blue .alert-link { color: #000; } .iq-alert-border { --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color); } .dropdown-iquiniela { --bs-dropdown-color: var(--iq-light-color); --bs-dropdown-bg: var(--iq-dark-color); /* dark-teal => background */ --bs-dropdown-border-color: var(--bs-border-color-translucent); --bs-dropdown-link-color: var(--iq-light-color); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-divider-bg: var(--bs-border-color-translucent); --bs-dropdown-link-hover-bg: rgba(0, 0, 0, 0.15); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--iq-dark-color); --bs-dropdown-link-disabled-color: var(--iq-light-color); --bs-dropdown-header-color: var(--iq-light-color); } .dropdown-iq-outline { --bs-dropdown-color: var(--iq-dark-color); /* dark-teal => color */ --bs-dropdown-bg: #fff; --bs-dropdown-link-color: var(--iq-dark-color); --bs-dropdown-link-hover-color: var(--iq-dark-color); --bs-dropdown-link-hover-bg: rgba(var(--iq-light-color-rgb), 0.5); --bs-dropdown-link-active-color: #000; --bs-dropdown-link-active-bg: var(--iq-light-color); --bs-dropdown-link-disabled-color: var(--iq-main-color); --bs-dropdown-header-color: var(--iq-main-color); } .btn-iquiniela { --bs-btn-font-weight: 600; /* semibold instead of normal */ --bs-btn-color: #fff; /* contrast(background) => color */ --bs-btn-bg: #225577; /* dark-teal => background */ --bs-btn-border-color: #225577; /* dark-teal => border */ --bs-btn-hover-color: #fff; /* contrast */ --bs-btn-hover-bg: #1d4865; /* mix(black, background, 0.15) */ --bs-btn-hover-border-color: #1b445f; /* mix(black, border, 0.2) */ --bs-btn-focus-shadow-rgb: 67, 111, 139; /* mix(color, border, 0.15) en RGB */ --bs-btn-active-color: #fff; /* contrast */ --bs-btn-active-bg: #1b445f; /* mix(black, background, 0.2) */ --bs-btn-active-border-color: #1a4059; /* 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: #225577; /* background */ --bs-btn-disabled-border-color: #4e7792; /* border */ } .btn-outline-iquiniela { --bs-btn-font-weight: 600; --bs-btn-color: #225577; /* dark-teal => color */ --bs-btn-border-color: #225577; /* color */ --bs-btn-hover-color: #fff; /* contrast */ --bs-btn-hover-bg: #225577; /* color */ --bs-btn-hover-border-color: #225577; /* color */ --bs-btn-focus-shadow-rgb: 34, 85, 119; /* color en RGB */ --bs-btn-active-color: #fff; /* contrast */ --bs-btn-active-bg: #225577; /* color */ --bs-btn-active-border-color: #225577; /* color */ --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #225577; /* color */ --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #225577; /* color */ --bs-gradient: none; } .btn-outline-iq-alt { --bs-btn-font-weight: 600; --bs-btn-color: #a20303; /* dark-red => color */ --bs-btn-border-color: #a20303; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a20303; --bs-btn-hover-border-color: #a20303; --bs-btn-focus-shadow-rgb: 162, 3, 3; --bs-btn-active-color: #fff; --bs-btn-active-bg: #a20303; --bs-btn-active-border-color: #a20303; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #a20303; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #a20303; --bs-gradient: none; } .btn-iq-clear { --bs-btn-font-weight: 600; --bs-btn-color: var(--iq-dark-color); /* dark-teal */ --bs-btn-border-color: transparent; --bs-btn-hover-color: #ef0505; /* hovering color (bright red) */ --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-color: #a20303; /* dark-red */ --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--iq-light-color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-gradient: none; } .table-iquiniela { --bs-table-color: var(--iq-dark-color); /* dark-teal => color */ --bs-table-bg: #e9eef1; /* mix(white, teal, 0.9) => background (it's 0.8 in bootstrap) */ --bs-table-border-color: #cbd7df; /* mix(color, background, 0.15) (bs: 0.1) */ --bs-table-striped-bg: #dfe6eb; /* mix(color, background, 0.05) */ --bs-table-striped-color: var(--iq-dark-color); /* color */ --bs-table-active-bg: #c1cfd9; /* mix(color, background, 0.2) (bs: 0.1) */ --bs-table-active-color: #000; /* black (it's color in bootstrap) */ --bs-table-hover-bg: #d5dfe5; /* mix(color, background, 0.1) (bs: 0.075) */ --bs-table-hover-color: var(--iq-dark-color); /* color */ color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-iq-alt { --bs-table-color: var(--iq-alt-color); /* dark-red => color */ --bs-table-bg: #f6e6e6; /* mix(white, dark-red, 0.9) => background (bs: 0.8) */ --bs-table-border-color: #e9c4c4; /* mix(color, background, 0.15) (bs: 0.1) */ --bs-table-striped-bg: #f1dbdb; /* mix(color, background, 0.05) */ --bs-table-striped-color: var(--iq-alt-color); /* color */ --bs-table-active-bg: #e5b9b9; /* mix(color, background, 0.2) (bs: 0.1) */ --bs-table-active-color: #000; /* black (it's color in bootstrap) */ --bs-table-hover-bg: #eecfcf; /* mix(color, background, 0.1) (bs: 0.075) */ --bs-table-hover-color: var(--iq-alt-color); /* color */ color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .table-iq-success { foo: 31, 128, 53; --bs-table-color: #1f8035; /* green => color */ --bs-table-bg: #d2e6d7; /* mix(white, dark-green, 0.8) => background */ --bs-table-border-color: #c0dcc7; /* mix(color, background, 0.1) */ --bs-table-striped-bg: #c9e1cf; /* mix(color, background, 0.05) */ --bs-table-striped-color: #1f8035; /* color */ --bs-table-active-bg: #c0dcc7; /* mix(color, background, 0.1) */ --bs-table-active-color: #1f8035; /* color */ --bs-table-hover-bg: #c5decb; /* mix(color, background, 0.075) */ --bs-table-hover-color: #1f8035; /* color */ color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .bg-iquiniela { --bs-bg-opacity: 1; /* background-color: rgba(var(--iq-light-color-rgb), var(--bs-bg-opacity)) !important; */ background-color: #e9eef1 !important; } .bg-iq-alt { --bs-bg-opacity: 1; /* background-color: rgba(var(--iq-alt-light-rgb), var(--bs-bg-opacity)) !important;*/ background-color: #f6e6e6 !important; } .border-iquiniela { --bs-border-opacity: 1; border-color: rgba(var(--iq-dark-color-rgb), var(--bs-border-opacity)) !important; } .border-iq-alt { --bs-border-opacity: 1; border-color: rgba(var(--iq-alt-color-rgb), var(--bs-border-opacity)) !important; } .border-iq-light { --bs-border-opacity: 1; border-color: rgba(var(--iq-light-color-rgb), var(--bs-border-opacity)) !important; } .border-iq-success { --bs-border-opacity: 1; border-color: rgba(var(--iq-green-rgb), var(--bs-border-opacity)) !important; } .shadow-iquiniela { box-shadow: 0 0 0.25em var(--iq-dark-color) !important; } .shadow-iq-alt { box-shadow: 0 0 0.25em var(--iq-alt-color) !important; } .shadow-iq-success { box-shadow: 0 0 0.25em var(--iq-green) !important; } .text-iquiniela { --bs-text-opacity: 1; color: rgba(var(--iq-dark-color-rgb), var(--bs-text-opacity)) !important; } .text-iq-alt { --bs-text-opacity: 1; color: rgba(var(--iq-alt-color-rgb), var(--bs-text-opacity)) !important; } .text-iq-success { --bs-text-opacity: 1; color: rgba(var(--iq-green-rgb), var(--bs-text-opacity)) !important; } .text-iq-muted { --bs-text-opacity: 0.5; color: rgba(var(--iq-dark-color-rgb), var(--bs-text-opacity)) !important; } .text-iq-larger { font-size: 110%; font-weight: 500; } .fw-iq-darker { font-weight: 500; } .link-iquiniela { --bs-link-color: #225577; /* dark-teal */ color: #225577 !important; } .link-iquiniela:hover, .link-iquiniela:focus { --bs-link-hover-color: #1b445f; color: #1b445f !important; } .link-iq-alt { --bs-link-color: #a20303; /* dark-red */ color: #a20303 !important; } .link-iq-alt:hover, .link-iq-alt:focus { --bs-link-hover-color: #820202; color: #820202 !important; } .iq-aligner { display: inline-block; height: 100%; vertical-align: middle; } .iq-pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--iq-dark-color); --bs-pagination-border-color: var(--iq-dark-color); --bs-pagination-hover-color: #fff; --bs-pagination-hover-bg: var(--iq-dark-color); --bs-pagination-hover-border-color: var(--iq-dark-color); --bs-pagination-focus-color: var(--iq-dark-color); --bs-pagination-focus-bg: var(--iq-light-color); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--iq-dark-color-rgb), 0.25); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--iq-main-color); --bs-pagination-active-border-color: var(--iq-dark-color); --bs-pagination-disabled-color: rgba(var(--iq-dark-color-rgb), 0.5); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: var(--iq-dark-color); } /* * Very specific to iQuiniela... */ .logo { width: 60px; max-width: 100%; } .logo img { max-width: 80%; } .smBadge { width: 50px; max-width: 100%; } .smBadge img { max-width: 80%; } img.smBadge { width: auto; max-width: 40px; } .lgBadge { width: 90px; max-width: 100%; } .lgBadge img { max-width: 80%; } img.lgBadge { width: auto; max-width: 72px; } .numwinner { border: 2px solid green; padding: 0 2px; } .numloser { padding: 0 4px; } .winner { border: 2px solid green; border-radius: 5px; min-width: 45px; padding-bottom: 3px; } .loser { min-width: 45px; padding: 2px 2px 5px 2px; } .tiebreak { height: 28px; width: 28px; } div.fieldLoaded, input.fieldLoaded { text-align: center; background-color:#f0e0d0; border:2px inset #a06020; padding:2px 1px; } div.fieldLoaded { padding:0; } /* * For seedings.php... */ .seedpick { color: var(--iq-textaltcolor); } .seedpick img { box-shadow: 0 0 0.25em var(--iq-altcolor); border-color: var(--iq-altcolor) !important; } .noseedpick { color: var(--iq-textcolor); } .noseedpick img { box-shadow: 0 0 0.25em var(--iq-maincolor); border-color: var(--iq-maincolor) !important; } /* * From the old iQuiniela... */ .legend { text-align: center; padding: 0.5rem; margin: 0.25rem auto; font-size: 110%; font-style: italic; } .top-legend { border-radius: 0.25rem 1rem; } .legend-warning { color: #c94c4c; background-color: #ffeead; border: 2px solid #c94c4c; } .legend-info { color: #336699; background-color: #cfe0e8; border: 2px solid #336699; } /* * Things about the @media queries that I barely understand */ @media (max-width: 767.98px){ .lgBadge {width:60px;} img.lgBadge{max-width:48px;} .smBadge{width:40px;} img.smBadge{max-width:32px;} .logo{min-width:40px;max-width:50px;} .winner{min-width:35px;} .loser{min-width:35px;padding:2px 2px 3px 2px;} } @media only print{ .navbar3,.col-right,#comments,#footer,.noprint{display:none;} a[href]:after{content:'';} .container,#pageContent{border:none;padding:0;} .table tr{border:1px solid #ccc;} .table th,.table td{font-size:7pt;} .pickgame{page-break-inside:avoid;margin:0.25em;width:42%;display:inline-block;} .pickgame .date-row,.pickgame .pick-row{padding:0;} .pickgame .team,.pickgame .status-row{font-size:0.6em;} .pickgame .stats{display:none;} }