[web-php] master: Use CSS variables for some common colors (#689)
| From: | Levi Morrison via GitHub | Date: | Thu, 01 Sep 2022 17:56:01 +0000 |
| Subject: | [web-php] master: Use CSS variables for some common colors (#689) | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-30524@lists.php.net to get a copy of this message | ||
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;
}