Author: Levi Morrison (morrisonlevi) Committer: GitHub (web-flow) Pusher: morrisonlevi Date: 2022-09-01T11:47:43-06:00
Commit: https://github.com/php/web-php/commit/15d95ae47b5618123960f16758c176e3131aabc8 Raw diff: https://github.com/php/web-php/commit/15d95ae47b5618123960f16758c176e3131aabc8.diff Use CSS variables for some common colors (#689) Aside from being able to tell what color it is or what purpose it solves just by looking at the variable name, it helps provide a foundation for more easily changing the theme in the future. Hopefully, we'll have a light and dark theme one day. Changed paths: M styles/home.css M styles/php8.css M styles/theme-base.css M styles/theme-medium.css Diff: diff --git a/styles/home.css b/styles/home.css index 912265fd99..cde846fb54 100644 --- a/styles/home.css +++ b/styles/home.css @@ -54,12 +54,12 @@ } .hero-btn-primary { - background-color: #4f5b93; + background-color: var(--dark-blue-color); color: #fff !important; } .hero-btn-primary:hover, .hero-btn-primary:focus { - background-color: #793862; + background-color: var(--dark-magenta-color); } .hero-btn-secondary { @@ -69,8 +69,8 @@ } .hero-btn-secondary:hover, .hero-btn-secondary:focus { - background-color: #793862; - border-color: #793862; + background-color: var(--dark-magenta-color); + border-color: var(--dark-magenta-color); color: #fff !important; } @@ -94,7 +94,7 @@ } .hero-versions a { - color:#ccc; + color: var(--background-text-color); border:0; } diff --git a/styles/php8.css b/styles/php8.css index 25b1015942..9de2cb73c1 100644 --- a/styles/php8.css +++ b/styles/php8.css @@ -15,7 +15,7 @@ } .php8-section_dark { - background-color: #4F5B93; + background-color: var(--dark-blue-color); color: #fff; } @@ -102,7 +102,6 @@ font-style: normal; line-height: 1.29; letter-spacing: -0.5px; - color: #27282c; overflow: visible; } @@ -129,7 +128,7 @@ padding: 16px 46px; border-radius: 30px; border: none; - background-color: #4F5B93; + background-color: var(--dark-blue-color); color: #fff !important; text-decoration: none !important; font-size: 20px; @@ -210,7 +209,7 @@ font-weight: normal; line-height: 1.6; vertical-align: middle; - color: #505c90; + color: var(--dark-blue-color); border-bottom-color: currentColor; } @@ -256,12 +255,12 @@ line-height: 1.33; letter-spacing: normal; text-align: center; - color: rgba(39, 40, 44, 0.7); - background-color: rgba(39, 40, 44, 0.05); + color: var(--background-color); + background-color: var(--foreground-color); } .php8-compare__label_new { - background-color: #505c90; + background-color: var(--dark-blue-color); color: #fff; } @@ -435,4 +434,4 @@ padding: 4px 5px; color: rgba(39, 40, 44, 0.7); line-height: 1.33; -} \ No newline at end of file +} diff --git a/styles/theme-base.css b/styles/theme-base.css index 16d2a7202c..74fabcafe6 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -9,6 +9,15 @@ * Designed and built with all the love in the world @twitter by @mdo and @fat. */ +:root { + --dark-grey-color: #333; + --dark-blue-color: #4F5B93; + --medium-blue-color: #7A86B8; + --light-blue-color: #E2E4EF; + --dark-magenta-color: #793862; + --medium-magenta-color: #AE508D; +} + .clearfix { *zoom: 1; } @@ -60,7 +69,7 @@ a { border-bottom:1px solid; } a:focus { - outline: thin dotted #333; + outline: thin dotted var(--dark-grey-color); outline-offset: -2px; } a:hover, @@ -865,7 +874,7 @@ table.standard th.subr { #layout .cse .gsc-result-info, #layout .gsc-result-info { - color: #333; + color: var(--dark-grey-color); font-size: 0.75rem; padding: 0; margin: 0; @@ -1006,11 +1015,11 @@ fieldset { } .tt-dropdown-menu { - background: none repeat scroll 0 0 #E2E4EF; + background: none repeat scroll 0 0 var(--light-blue-color); border-bottom: 1px solid #C4C9DF; border-radius: 0 0 2px 2px; - box-shadow: 1px 0 1px -1px #C4C9DF inset, -1px 0 1px -1px #C4C9DF inset, 0 0 1px #4F5B93; - color: #333333; + box-shadow: 1px 0 1px -1px #C4C9DF inset, -1px 0 1px -1px #C4C9DF inset, 0 0 1px var(--dark-blue-color); + color: var(--dark-grey-color); padding-top: 3px; margin-top: -3px; min-width: 100%; @@ -1018,8 +1027,8 @@ fieldset { .tt-dropdown-menu .result-heading { font-size:1.1rem; - border-bottom: 2px solid #4F5B93; - color: #E2E4EF; + border-bottom: 2px solid var(--dark-blue-color); + color: var(--light-blue-color); text-shadow:0 -1px 0 rgba(0,0,0,.25); word-spacing:6px; margin: 0; @@ -1078,7 +1087,7 @@ fieldset { } .tt-suggestion h4 { - color: #333; + color: var(--dark-grey-color); margin: 0; overflow: hidden; text-overflow: ellipsis; @@ -1099,7 +1108,7 @@ fieldset { /* Selected items. */ .tt-suggestion.tt-is-under-cursor { - background-color: #4F5B93; + background-color: var(--dark-blue-color); } .tt-suggestion.tt-is-under-cursor h4 { @@ -1619,7 +1628,7 @@ div.soft-deprecation-notice blockquote.sidebar { } #mainmenu-toggle-overlay { - background: #4F5B93 url(/images/mobile-menu.png) no-repeat center center; + background: var(--dark-blue-color) url(/images/mobile-menu.png) no-repeat center center; float: right; display: block; height: 32px; @@ -1722,7 +1731,7 @@ div.soft-deprecation-notice blockquote.sidebar { #goto { display: none; - background-color: #333; + background-color: var(--dark-grey-color); height: 100%; width: 100%; opacity: 0.9; diff --git a/styles/theme-medium.css b/styles/theme-medium.css index 0b4e553a61..fbef3a195c 100644 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -1,36 +1,31 @@ -/** - * - * COLORS: | HEX | - * ---------------+---------+ - * light-blue | #E2E4EF | - * ---------------+---------+ - * medium-blue | #8892BF | - * ---------------+---------+ - * dark-blue | #4F5B93 | - * ---------------+---------+ - * - */ - +:root { + --background-color: var(--dark-grey-color); + --background-text-color: #CCC; + --content-background-color: #F2F2F2; + --content-text-color: var(--dark-grey-color); +} html { - background: #333 url('/images/bg-texture-00.svg'); - color: #CCC; + background-color: var(--background-color); + background-image: url('/images/bg-texture-00.svg'); + color: var(--background-text-color); } + #layout-content { - background:#F2F2F2; - color:#333; + background: var(--content-background-color); + color: var(--content-text-color); } #layout-content:not(:only-child) { border-right:.25rem solid #666; } abbr { - border-color: #8892BF; + border-color: var(--medium-blue-color); } h1, h2, h3, h4, h5, h6 { font-weight: 500; - color:#333 + color: var(--content-text-color) } header.title, h1:after, @@ -50,7 +45,7 @@ h3:after { a:link, a:visited { - color: #ccc; + color: var(--background-text-color); } #layout-content a:link, #layout-content a:visited { @@ -60,8 +55,8 @@ a:hover, a:focus, #layout-content a:hover, #layout-content a:focus { - color: #AE508D; - border-color: #AE508D; + color: var(--medium-magenta-color); + border-color: var(--medium-magenta-color); outline:0; } @@ -79,7 +74,7 @@ dl.qandaentry { } h1.refname { - color: #793862; + color: var(--dark-magenta-color); } @@ -109,10 +104,10 @@ h1.refname { .title a, .title { - color: #793862; + color: var(--dark-magenta-color); } .title time { - color: #333; + color: var(--content-text-color); } .methodname b, @@ -146,7 +141,7 @@ div.tip { } blockquote.note { background-color: #E6E6E6; - border-color: #ccc; + border-color: var(--background-text-color); } div.caution { background: #fcfce9; @@ -195,14 +190,14 @@ div.warning a:focus { /* {{{ Navbar */ .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { - color: #333333; + color: var(--dark-grey-color); } .navbar .nav > .active > a { box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); } .navbar .brand, .navbar .nav > li > a { - color: #E2E4EF; + color: var(--light-blue-color); border:0; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } @@ -221,11 +216,11 @@ div.warning a:focus { .navbar .nav .active > a:hover, .navbar .nav .active > a:focus { color: #fff; - background-color: #4F5B93; + background-color: var(--dark-blue-color); } .navbar .navbar-search .search-query { background-color: #fff; - color: #333; + color: var(--dark-grey-color); text-shadow: 0 1px 0 #fff; border:0; border-radius:2px; @@ -244,8 +239,8 @@ div.warning a:focus { color: #999; } .navbar { - border-color:#4F5B93; - background:#8892BF; + border-color:var(--dark-blue-color); + background:var(--medium-blue-color); box-shadow: 0 .25em .25em rgba(0,0,0,.1); } .navbar .brand { @@ -260,12 +255,12 @@ div.warning a:focus { /* {{{ User notes */ #usernotes .count { - background-color: #793862; + background-color: var(--dark-magenta-color); color: #fff; border-radius: 4px; } #usernotes .note .name { - color: #333; + color: var(--content-text-color); } #usernotes .note .date { color: #666; @@ -277,7 +272,7 @@ div.warning a:focus { transition: opacity 0.4s; } #usernotes .note .votes .tally { - color: #333; + color: var(--content-text-color); } #usernotes .note .votes a { transition: border 0.4s; @@ -288,13 +283,13 @@ div.warning a:focus { /* {{{ Tables */ .doctable, .segmentedlist { - border-color: #ccc; + border-color: var(--background-text-color); } .doctable thead tr, .segmentedlist thead tr { border-color: #C4C9DF; - border-bottom-color: #8892BF; - color: #333; + border-bottom-color: var(--medium-blue-color); + color: var(--content-text-color); } .doctable th, .segmentedlist th { @@ -302,7 +297,7 @@ div.warning a:focus { } .doctable tr, .segmentedlist tr { - border-color: #ccc + border-color: var(--background-text-color) } .doctable tbody tr:nth-child(odd), .segmentedlist tbody tr:nth-child(odd) { @@ -340,7 +335,7 @@ div.warning a:focus { background-color: transparent; } .phpcode span.comment { - color: #4F5B93; + color: var(--dark-blue-color); background-color: transparent; } div.phpcode span.default { @@ -361,7 +356,7 @@ div.phpcode span.string { { background-color: #E6E6E6; border-radius: 2px; - color: #333; + color: var(--content-text-color); padding: 2px 4px; white-space: nowrap; font-style: normal; @@ -386,14 +381,14 @@ var.reset } #layout-content a.genanchor:hover, #layout-content a.genanchor:focus { - color: #333; + color: var(--content-text-color); border-bottom: none; } /* }}} */ .warn { - border-color: #4F5B93; + border-color: var(--dark-blue-color); background-color: #fff; border-radius: 0 0 2px 2px; } @@ -410,7 +405,7 @@ aside.tips h3 { color:#E6E6E6; } aside.tips a { - color:#ccc; + color: var(--background-text-color); border-bottom:1px dotted #666; } aside.tips .panel > a:after, @@ -424,16 +419,16 @@ aside.tips .panel > a { border-bottom: none; } aside.tips .panel > a:hover:after { - border-color:#AE508D; + border-color:var(--medium-magenta-color); } aside.tips a:hover, aside.tips a:focus { - color:#AE508D; - border-color:#AE508D; + color:var(--medium-magenta-color); + border-color:var(--medium-magenta-color); } .soft-deprecation-notice { - color: #333; + color: var(--dark-grey-color); border-color: #eecdde; background-color: #f9ecf2; } @@ -458,8 +453,8 @@ aside.tips a:focus { border-top-color:#666; } .layout-menu ul.child-menu-list li.current a { - color:#AE508D; - border-bottom-color:#AE508D; + color:var(--medium-magenta-color); + border-bottom-color:var(--medium-magenta-color); } .layout-menu ul.child-menu-list a { border-color: #666; @@ -489,7 +484,7 @@ div.elephpants img:focus { .mirror { position: relative; - border: 1px solid #ccc; + border: 1px solid var(--background-text-color); padding: 20px; margin: 5px; } -- PHP Webmaster List Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
