mirror of
https://github.com/php/web-php.git
synced 2026-03-23 23:02:13 +01:00
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.
This commit is contained in:
Levi Morrison
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user