com web/php: Conversion to a darker background in progress. Home page incomplete; docs mostly ready.: styles/home.css styles/theme-base.css
styles/theme-medium.css
| From: | Levi Morrison | Date: | Mon, 28 Apr 2014 04:10:37 +0000 |
| Subject: | com web/php: Conversion to a darker background in progress. Home page incomplete; docs mostly ready.: styles/home.css styles/theme-base.css styles/theme-medium.css |
||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-18857@lists.php.net to get a copy of this message | ||
Commit: d216fe9e02f0c3c143f999b498098922de48930c
Author: Levi Morrison <levim@php.net> Sun, 27 Apr 2014 22:10:37 -0600
Parents: a501063f687607069107adda218a392977ce8f72
Branches: master
Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=d216fe9e02f0c3c143f999b498098922de48930c
Log:
Conversion to a darker background in progress. Home page incomplete; docs mostly ready.
Changed paths:
M styles/home.css
M styles/theme-base.css
M styles/theme-medium.css
diff --git a/styles/home.css b/styles/home.css index 444e36b..426c908 100644 --- a/styles/home.css +++ b/styles/home.css @@ -4,10 +4,7 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 */ #intro { - background:#333 url('/images/bg-texture-00.svg'); - box-shadow:inset 0 0 2rem rgba(0,0,0,.375); color:#fff; - border-bottom:.25rem solid #8892BF; } #intro p, #intro ul { @@ -27,7 +24,6 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 text-transform:uppercase; letter-spacing:3px; word-spacing:6px; - text-align:center; margin-bottom:0; } #intro h2:after { @@ -38,14 +34,10 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 display:table-row; } -#intro .download { - background:rgba(255,255,255,.1); -} -#intro .download ul { - list-style:none; -} #intro ul { + list-style:none; word-spacing:.25rem; + margin-left:0; } #intro .download a.notes { font-size:.75em; @@ -67,6 +59,9 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 content: "\21AF \2003"; } +#layout-content { + border-right:.25rem solid #666; +} .home .newsentry .newstitle a:after { content:"\20 \00bb"; color:#666; diff --git a/styles/theme-base.css b/styles/theme-base.css index 938f398..7a87366 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -213,56 +213,6 @@ textarea { float: none; padding: .75rem; } -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - color: #333333; -} -.navbar .nav > .active > a { - box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); -} -.navbar .brand, -.navbar .nav > li > a { - color: #E2E4EF; - border:0; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} -.navbar .brand:hover, -.navbar .nav > li > a:hover, -.navbar .brand:focus, -.navbar .nav > li > a:focus { - color: #fff; -} -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: transparent; - color: #fff; -} -.navbar .nav .active > a, -.navbar .nav .active > a:hover, -.navbar .nav .active > a:focus { - color: #fff; - background-color: #4F5B93; -} -.navbar .navbar-search .search-query { - background-color: #fff; - color: #333; - text-shadow: 0 1px 0 #fff; - border:0; - border-radius:2px; - box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -} -.navbar .navbar-search .search-query:focus { - box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -} -.navbar .navbar-search .search-query:-moz-placeholder { - color: #999; -} -.navbar .navbar-search .search-query:-ms-input-placeholder { - color: #999; -} -.navbar .navbar-search .search-query::-webkit-input-placeholder { - color: #999; -} @-ms-viewport { width: device-width; } @@ -377,15 +327,18 @@ h1, h2, h3, h4, h5, h6 { overflow:hidden; } h1 { - font-size: 1.5rem; + font-size: 1.75rem; } h2 { - font-size: 1.25rem; + font-size: 1.5rem; } h3 { + font-size:1.25rem; +} +h4 { font-size:1.125rem; } -h4, h5, h6 { +h5, h6 { font-size: 1rem; } p { @@ -607,7 +560,6 @@ pre.info { .layout-menu { padding:.75rem 1.5rem 1.5rem; - border-right:1px solid; -moz-box-sizing:border-box; box-sizing:border-box; } @@ -1153,7 +1105,6 @@ fieldset { .title { position:relative; - padding:0 .75rem; clear:both; } header.title { @@ -1461,19 +1412,18 @@ div.soft-deprecation-notice blockquote.sidebar { #breadcrumbs { -moz-box-sizing:border-box; box-sizing:border-box; - border-bottom:1px solid; margin:0 auto; font-size:.875rem; + line-height:3rem; display:none; } #breadcrumbs ul { margin:0; - padding:.5rem; - padding-left: 1.5rem; + padding:0 .5rem 0 1.5rem; overflow: hidden; } #breadcrumbs div { - padding:.5rem 1.5rem; + padding:0 1.5rem; } #breadcrumbs li { display:inline-block; @@ -1739,48 +1689,34 @@ div.soft-deprecation-notice blockquote.sidebar { aside.tips { -moz-box-sizing:border-box; box-sizing:border-box; + padding:1.5rem; + color:#ccc; } aside.tips p { margin-top:0; } aside.tips .panel { - margin:1.5rem 0; - background:#E2E4EF; - border-radius:2px; + margin:0 0 1.5rem; } +aside.tips a { + color:#ccc; + border-bottom-style:dotted; +} aside.tips .panel > a { - color:#333; - border-bottom:0; display: block; } aside.tips .panel > a:hover, aside.tips .panel > a:focus { color:#369; } -aside.tips .panel .headline, -.panel .body, -aside.tips .panel > a { - padding:.75rem 1rem; - margin:0; -} /* Announcement Area */ aside.tips div.inner { - padding:0 0 0 .75rem; clear:none; border:0; background:inherit; } -.panel .body { - background-color: #fff; - border-top:1px solid #C4C9DF; - border-radius: 0 0 2px 2px; -} -.panel .body:first-child { - border-top:0; -} - /* }}} */ /* {{{ Adjustments for add-note.php animations */ diff --git a/styles/theme-medium.css b/styles/theme-medium.css index 251d012..cce45be 100755 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -13,16 +13,15 @@ html { - background-color: #333; + background: #333 url('/images/bg-texture-00.svg'); + color: #CCC; } - -body { - background:#C4C9DF; - color: #333; +.layout-menu + #layout-content { + border-left:.25rem solid #666; } #layout-content { - background:#fff; - border-color:#ccc; + background:#F2F2F2; + color:#333; } abbr { @@ -33,9 +32,10 @@ h1, h2, h3, h4, h5, h6 { font-weight:bolder; color:#333 } -h1:not(.title):after, -h2:not(.title):after, -h3:not(.title):after { +header.title, +h1:after, +h2:after, +h3:after { display:table; width:100%; content:" "; @@ -72,7 +72,7 @@ dl.qandaentry { } h1.refname { - color: #333; + color: #793862; } @@ -97,21 +97,11 @@ h1.refname { color:#f80; } +.title a, .title { - color: #333; - background: #E2E4EF; - border-radius:0 0 2px 2px; - box-shadow: inset 0 0 00 1px rgba(0,0,0,.1); -} -.title:before { - content:" "; - display:block; - position:absolute; - left:0; - border-top:2px solid #4F5B93; - width:100%; + color: #793862; } -.title a { +.title time { color: #333; } @@ -168,7 +158,7 @@ div.tip, blockquote.note, div.caution, div.warning { - box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); + box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); border-radius:0 0 2px 2px; } #flash-message .error a, @@ -190,6 +180,56 @@ div.warning a:focus { /* {{{ Navbar */ +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + color: #333333; +} +.navbar .nav > .active > a { + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); +} +.navbar .brand, +.navbar .nav > li > a { + color: #E2E4EF; + border:0; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} +.navbar .brand:hover, +.navbar .nav > li > a:hover, +.navbar .brand:focus, +.navbar .nav > li > a:focus { + color: #fff; +} +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: transparent; + color: #fff; +} +.navbar .nav .active > a, +.navbar .nav .active > a:hover, +.navbar .nav .active > a:focus { + color: #fff; + background-color: #4F5B93; +} +.navbar .navbar-search .search-query { + background-color: #fff; + color: #333; + text-shadow: 0 1px 0 #fff; + border:0; + border-radius:2px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); +} +.navbar .navbar-search .search-query:focus { + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); +} +.navbar .navbar-search .search-query:-moz-placeholder { + color: #999; +} +.navbar .navbar-search .search-query:-ms-input-placeholder { + color: #999; +} +.navbar .navbar-search .search-query::-webkit-input-placeholder { + color: #999; +} .navbar { border-color:#4F5B93; background:#8892BF; @@ -201,12 +241,13 @@ div.warning a:focus { .navbar a { text-shadow: 0 1px 0 #fff; } + /* }}} */ /* {{{ User notes */ #usernotes .count { - background-color: #4F5B93; + background-color: #793862; color: #fff; border-radius: 4px; } @@ -220,8 +261,6 @@ div.warning a:focus { color: black; } #usernotes .note .text { - background-color: #E6E6E6; - box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: opacity 0.4s; } #usernotes .note .votes .tally { @@ -263,11 +302,13 @@ div.warning a:focus { /* }}} */ -/* {{{ Syntax highlighting */ +/* {{{ Syntax highlighting (and other similar boxes) */ +#usernotes .note .text, .example-contents > [class$="code"], .example-contents.screen { - background-color: #fff; - box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); + background-color: #FFF; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); + border-radius: 0 0 2px 2px; } .refsect1 .example-contents > [class$="code"], .refsect1 .example-contents.screen { @@ -347,9 +388,6 @@ pre.info { border-color: #ddd; } -aside.tips { - border-color:#8892BF; -} aside.tips div.border { display:none; } @@ -370,37 +408,33 @@ aside.tips div.border { /* {{{ Breadcrumbs */ #breadcrumbs { - color: #666; - background-color: #E6E6E6; - border-color: #ccc; + color: #999; } -#breadcrumbs li:last-child a { - color:#333; +#breadcrumbs a { + color:#CCC; } /* }}} */ /* {{{ Layout menu Left-hand sidebar */ -.layout-menu { - background-color:#E6E6E6; - border-color: #ccc; -} .layout-menu ul.parent-menu-list a { - color: #000; + color: #CCC; } +a:hover, +a:focus, +.layout-menu ul.child-menu-list .current a, .layout-menu ul.parent-menu-list a:hover, .layout-menu ul.parent-menu-list a:focus { - color: #693; - border-color: #693; - text-shadow:0 0 .25em #fff; - outline:0; + color: #AE508D; + border-color: #AE508D; + outline:0; } -.layout-menu ul.child-menu-list a { - border-bottom-color: #999; + +.layout-menu ul.child-menu-list li:first-child a { + border-top-color:#666; } -.layout-menu ul.child-menu-list .current a { - color:#4F5B93; - border-color:#4F5B93; +.layout-menu ul.child-menu-list a { + border-color: #666; } /* }}} */
diff --git a/styles/home.css b/styles/home.css index 444e36b..426c908 100644 --- a/styles/home.css +++ b/styles/home.css @@ -4,10 +4,7 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 */ #intro { - background:#333 url('/images/bg-texture-00.svg'); - box-shadow:inset 0 0 2rem rgba(0,0,0,.375); color:#fff; - border-bottom:.25rem solid #8892BF; } #intro p, #intro ul { @@ -27,7 +24,6 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 text-transform:uppercase; letter-spacing:3px; word-spacing:6px; - text-align:center; margin-bottom:0; } #intro h2:after { @@ -38,14 +34,10 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 display:table-row; } -#intro .download { - background:rgba(255,255,255,.1); -} -#intro .download ul { - list-style:none; -} #intro ul { + list-style:none; word-spacing:.25rem; + margin-left:0; } #intro .download a.notes { font-size:.75em; @@ -67,6 +59,9 @@ complimentary greens: 9FB553 7B8851 61761B C6DA82 CCDA99 content: "\21AF \2003"; } +#layout-content { + border-right:.25rem solid #666; +} .home .newsentry .newstitle a:after { content:"\20 \00bb"; color:#666; diff --git a/styles/theme-base.css b/styles/theme-base.css index 938f398..7a87366 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -213,56 +213,6 @@ textarea { float: none; padding: .75rem; } -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - color: #333333; -} -.navbar .nav > .active > a { - box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); -} -.navbar .brand, -.navbar .nav > li > a { - color: #E2E4EF; - border:0; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} -.navbar .brand:hover, -.navbar .nav > li > a:hover, -.navbar .brand:focus, -.navbar .nav > li > a:focus { - color: #fff; -} -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: transparent; - color: #fff; -} -.navbar .nav .active > a, -.navbar .nav .active > a:hover, -.navbar .nav .active > a:focus { - color: #fff; - background-color: #4F5B93; -} -.navbar .navbar-search .search-query { - background-color: #fff; - color: #333; - text-shadow: 0 1px 0 #fff; - border:0; - border-radius:2px; - box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -} -.navbar .navbar-search .search-query:focus { - box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -} -.navbar .navbar-search .search-query:-moz-placeholder { - color: #999; -} -.navbar .navbar-search .search-query:-ms-input-placeholder { - color: #999; -} -.navbar .navbar-search .search-query::-webkit-input-placeholder { - color: #999; -} @-ms-viewport { width: device-width; } @@ -377,15 +327,18 @@ h1, h2, h3, h4, h5, h6 { overflow:hidden; } h1 { - font-size: 1.5rem; + font-size: 1.75rem; } h2 { - font-size: 1.25rem; + font-size: 1.5rem; } h3 { + font-size:1.25rem; +} +h4 { font-size:1.125rem; } -h4, h5, h6 { +h5, h6 { font-size: 1rem; } p { @@ -607,7 +560,6 @@ pre.info { .layout-menu { padding:.75rem 1.5rem 1.5rem; - border-right:1px solid; -moz-box-sizing:border-box; box-sizing:border-box; } @@ -1153,7 +1105,6 @@ fieldset { .title { position:relative; - padding:0 .75rem; clear:both; } header.title { @@ -1461,19 +1412,18 @@ div.soft-deprecation-notice blockquote.sidebar { #breadcrumbs { -moz-box-sizing:border-box; box-sizing:border-box; - border-bottom:1px solid; margin:0 auto; font-size:.875rem; + line-height:3rem; display:none; } #breadcrumbs ul { margin:0; - padding:.5rem; - padding-left: 1.5rem; + padding:0 .5rem 0 1.5rem; overflow: hidden; } #breadcrumbs div { - padding:.5rem 1.5rem; + padding:0 1.5rem; } #breadcrumbs li { display:inline-block; @@ -1739,48 +1689,34 @@ div.soft-deprecation-notice blockquote.sidebar { aside.tips { -moz-box-sizing:border-box; box-sizing:border-box; + padding:1.5rem; + color:#ccc; } aside.tips p { margin-top:0; } aside.tips .panel { - margin:1.5rem 0; - background:#E2E4EF; - border-radius:2px; + margin:0 0 1.5rem; } +aside.tips a { + color:#ccc; + border-bottom-style:dotted; +} aside.tips .panel > a { - color:#333; - border-bottom:0; display: block; } aside.tips .panel > a:hover, aside.tips .panel > a:focus { color:#369; } -aside.tips .panel .headline, -.panel .body, -aside.tips .panel > a { - padding:.75rem 1rem; - margin:0; -} /* Announcement Area */ aside.tips div.inner { - padding:0 0 0 .75rem; clear:none; border:0; background:inherit; } -.panel .body { - background-color: #fff; - border-top:1px solid #C4C9DF; - border-radius: 0 0 2px 2px; -} -.panel .body:first-child { - border-top:0; -} - /* }}} */ /* {{{ Adjustments for add-note.php animations */ diff --git a/styles/theme-medium.css b/styles/theme-medium.css index 251d012..cce45be 100755 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -13,16 +13,15 @@ html { - background-color: #333; + background: #333 url('/images/bg-texture-00.svg'); + color: #CCC; } - -body { - background:#C4C9DF; - color: #333; +.layout-menu + #layout-content { + border-left:.25rem solid #666; } #layout-content { - background:#fff; - border-color:#ccc; + background:#F2F2F2; + color:#333; } abbr { @@ -33,9 +32,10 @@ h1, h2, h3, h4, h5, h6 { font-weight:bolder; color:#333 } -h1:not(.title):after, -h2:not(.title):after, -h3:not(.title):after { +header.title, +h1:after, +h2:after, +h3:after { display:table; width:100%; content:" "; @@ -72,7 +72,7 @@ dl.qandaentry { } h1.refname { - color: #333; + color: #793862; } @@ -97,21 +97,11 @@ h1.refname { color:#f80; } +.title a, .title { - color: #333; - background: #E2E4EF; - border-radius:0 0 2px 2px; - box-shadow: inset 0 0 00 1px rgba(0,0,0,.1); -} -.title:before { - content:" "; - display:block; - position:absolute; - left:0; - border-top:2px solid #4F5B93; - width:100%; + color: #793862; } -.title a { +.title time { color: #333; } @@ -168,7 +158,7 @@ div.tip, blockquote.note, div.caution, div.warning { - box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); + box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); border-radius:0 0 2px 2px; } #flash-message .error a, @@ -190,6 +180,56 @@ div.warning a:focus { /* {{{ Navbar */ +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + color: #333333; +} +.navbar .nav > .active > a { + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); +} +.navbar .brand, +.navbar .nav > li > a { + color: #E2E4EF; + border:0; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} +.navbar .brand:hover, +.navbar .nav > li > a:hover, +.navbar .brand:focus, +.navbar .nav > li > a:focus { + color: #fff; +} +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: transparent; + color: #fff; +} +.navbar .nav .active > a, +.navbar .nav .active > a:hover, +.navbar .nav .active > a:focus { + color: #fff; + background-color: #4F5B93; +} +.navbar .navbar-search .search-query { + background-color: #fff; + color: #333; + text-shadow: 0 1px 0 #fff; + border:0; + border-radius:2px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); +} +.navbar .navbar-search .search-query:focus { + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); +} +.navbar .navbar-search .search-query:-moz-placeholder { + color: #999; +} +.navbar .navbar-search .search-query:-ms-input-placeholder { + color: #999; +} +.navbar .navbar-search .search-query::-webkit-input-placeholder { + color: #999; +} .navbar { border-color:#4F5B93; background:#8892BF; @@ -201,12 +241,13 @@ div.warning a:focus { .navbar a { text-shadow: 0 1px 0 #fff; } + /* }}} */ /* {{{ User notes */ #usernotes .count { - background-color: #4F5B93; + background-color: #793862; color: #fff; border-radius: 4px; } @@ -220,8 +261,6 @@ div.warning a:focus { color: black; } #usernotes .note .text { - background-color: #E6E6E6; - box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: opacity 0.4s; } #usernotes .note .votes .tally { @@ -263,11 +302,13 @@ div.warning a:focus { /* }}} */ -/* {{{ Syntax highlighting */ +/* {{{ Syntax highlighting (and other similar boxes) */ +#usernotes .note .text, .example-contents > [class$="code"], .example-contents.screen { - background-color: #fff; - box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); + background-color: #FFF; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); + border-radius: 0 0 2px 2px; } .refsect1 .example-contents > [class$="code"], .refsect1 .example-contents.screen { @@ -347,9 +388,6 @@ pre.info { border-color: #ddd; } -aside.tips { - border-color:#8892BF; -} aside.tips div.border { display:none; } @@ -370,37 +408,33 @@ aside.tips div.border { /* {{{ Breadcrumbs */ #breadcrumbs { - color: #666; - background-color: #E6E6E6; - border-color: #ccc; + color: #999; } -#breadcrumbs li:last-child a { - color:#333; +#breadcrumbs a { + color:#CCC; } /* }}} */ /* {{{ Layout menu Left-hand sidebar */ -.layout-menu { - background-color:#E6E6E6; - border-color: #ccc; -} .layout-menu ul.parent-menu-list a { - color: #000; + color: #CCC; } +a:hover, +a:focus, +.layout-menu ul.child-menu-list .current a, .layout-menu ul.parent-menu-list a:hover, .layout-menu ul.parent-menu-list a:focus { - color: #693; - border-color: #693; - text-shadow:0 0 .25em #fff; - outline:0; + color: #AE508D; + border-color: #AE508D; + outline:0; } -.layout-menu ul.child-menu-list a { - border-bottom-color: #999; + +.layout-menu ul.child-menu-list li:first-child a { + border-top-color:#666; } -.layout-menu ul.child-menu-list .current a { - color:#4F5B93; - border-color:#4F5B93; +.layout-menu ul.child-menu-list a { + border-color: #666; } /* }}} */