WordPress.org

Making WordPress.org

Changeset 135


Ignore:
Timestamp:
11/27/2013 11:38:48 PM (7 years ago)
Author:
Otto42
Message:

New wp4.css for mobile header. See #meta:53.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/style/wp4.css

    r100 r135  
    170170
    171171.wrapper {
    172     width: 960px;
     172    max-width: 960px;
    173173    margin: 0 auto;
    174174    clear: both;
     
    176176
    177177#wporg-header {
    178     height: 120px;
    179     min-width: 960px;
     178    position: relative;
     179    height: 140px;
     180    width: 100%;
    180181    background: #222222;
     182    text-align: center;
    181183}
    182184
    183185#wporg-header h1 {
    184     padding-left: 10px;
     186    display: inline-block;
     187    width: 303px;
    185188}
    186189
     
    192195    height: 88px;
    193196    text-indent: -9999px;
    194     float: left;
    195197}
    196198.no-static #wporg-header h1 a {
     
    207209
    208210#wporg-header h2.rosetta {
    209     font-size: 30px;
    210     color: #dfdfdf;
    211     font-family: Georgia, "Times New Roman", serif;
     211    font-size: 30px;
     212    color: #dfdfdf;
     213    font-family: Georgia, "Times New Roman", serif;
    212214}
    213215
    214216#wporg-header h2.rosetta a {
    215     padding: 36px 27px 0;
    216     float: left;
    217     display: block;
    218     height: 52px; /* 88 header height - 36 top padding */
    219     color: #dfdfdf;
    220 }
    221 
    222 #wporg-header ul {
     217    padding: 36px 27px 0;
     218    float: left;
     219    display: block;
     220    height: 52px; /* 88 header height - 36 top padding */
     221    color: #dfdfdf;
     222}
     223
     224#head-search {
     225    height: 48px;
     226}
     227
     228#head-search form {
     229    width: 288px;
     230    display: inline-block;
     231    margin-left: 60px;
     232    border-bottom: 1px solid #3f3f3f;
     233}
     234
     235#head-search input.text {
     236    background: #131313;
     237    border: 0;
     238    margin-right: 0;
     239    margin-bottom: 0;
     240    width: 256px;
     241    height: 24px;
     242    color: #999999;
     243    float: left;
     244    font-size: 12px;
     245    outline: none;
     246    font-family: "Open Sans", sans-serif;
     247    border-radius: 0px;
     248}
     249
     250#head-search input.text::-moz-placeholder {
     251    color: #eee;
     252}
     253
     254#head-search .button {
     255    float: left;
     256    text-shadow: none !important;
     257    border: none;
     258    height: 30px;
     259    width: 26px;
     260    background: #131313;
     261    background-image: url(http://s.wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
     262    background-position: 100% 2px;
     263    background-repeat: no-repeat;
     264    border-radius:0;
     265    padding: 0;
     266}
     267.no-static #head-search .button {
     268    background-image: url(//wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
     269}
     270
     271#wporg-header ul#wporg-header-menu {
     272    position: absolute;
     273    left: -75%;
     274    margin: 0;
     275    padding: 20px 0 0;
     276    min-width: 200px;
     277    max-width: 75%;
     278    background: #222222;
    223279    list-style: none;
    224     width: 100%;
    225     margin: -15px 0 0;
    226     padding: 0;
    227     float:left;
     280    text-align: left;
     281    -webkit-transition: left 0.3s;
     282    -moz-transition: left 0.3s;
     283    -ms-transition: left 0.3s;
     284    -o-transition: left 0.3s;
     285    transition: left 0.3s;
     286}
     287
     288#wporg-header ul#wporg-header-menu.active {
     289    left: 0;
    228290}
    229291
    230292#wporg-header ul li {
    231     float: left;
    232293    position:relative;
    233294}
     
    238299    display: block;
    239300    line-height: 34px;
    240     padding: 0 6px;
     301    padding: 10px 30px;
    241302    margin: 0 4px;
    242303    font-size: 13px;
    243304    color: #ddd;
    244     height: 48px;
     305    height: 34px;
    245306}
    246307
     
    249310}
    250311
    251 #wporg-header ul.nav-submenu li a {
    252     height: 34px;
    253 }
    254 
    255312#wporg-header ul li a:active {
    256313    color: #000;
     
    265322}
    266323
    267 #wporg-header ul li#download .uparrow {
    268     display:none;
    269 }
    270 
    271 #wporg-header ul li a.current ~ .uparrow {
    272     width: 0;
    273     height: 0;
    274     border-left: 9px solid transparent;
    275     border-right: 9px solid transparent;
    276     border-bottom: 9px solid #f7f7f7;
    277     margin: -9px auto 0 auto;
    278 }
    279 
    280 #wporg-header ul li:hover .nav-submenu ~ .uparrow, #wporg-header ul li .nav-submenu:hover ~ .uparrow {
    281         width: 0;
    282         height: 0;
    283         border-left: 9px solid transparent;
    284         border-right: 9px solid transparent;
    285         border-bottom: 9px solid #444;
    286         margin: -10px auto 0 auto;
    287 }
    288 
    289324#wporg-header ul li a.subcurrent {
    290325    font-weight: bold;
    291326}
    292327
     328/* TODO Submenu is hidden as we think it is better just to offer main menu items at mobile level. Change display to block to see sub nav */
     329#wporg-header .nav-submenu {
     330    display: none;
     331    position: static;
     332    padding-top: 0;
     333    margin-top: -15px;
     334    margin-bottom: 10px;
     335}
     336
     337#wporg-header ul.nav-submenu li a {
     338    margin-left: 20px;
     339    height: 24px;
     340    line-height: 24px;
     341}
     342
    293343#wporg-header ul li#download {
     344    display: none;
    294345    height: 34px;
    295346    padding: 0 0 34px;
     
    308359}
    309360
    310 #wporg-header .nav-submenu {
    311     display:none;
    312     min-width: 0;
    313     background: #444;
    314     margin-top: -1px;
    315     border: #444 solid 1px;
    316     border-top:0;
    317 }
    318 
    319 #wporg-header ul li:hover .nav-submenu, #wporg-header ul li .nav-submenu:hover  {
    320     display:block;
    321     position:absolute;
    322     top:46px;
    323     left:0;
    324     z-index:11;
    325     width:auto;
    326 }
    327 
    328 #wporg-header ul li .nav-submenu li {
    329     float:none;
     361#mobile-menu-button {
     362    position: absolute;
     363    top: 75px;
     364    left: 10px;
     365    display: block;
     366    float: left;
     367    width: 39px;
     368    height: 32px;
     369    vertical-align: top;
     370    text-align: center;
     371    text-decoration: inherit;
     372    font-weight: normal;
     373    font-style: normal;
     374    font-size: 16px;
     375    font-family: 'dashicons';
     376    line-height: 1;
     377    -webkit-transition: color .1s ease-in 0;
     378    -moz-transition: color .1s ease-in 0;
     379    -webkit-font-smoothing: antialiased;
     380}
     381
     382#mobile-menu-button:before {
     383    display: inline-block;
     384    float: left;
     385    -moz-box-sizing: border-box;
     386    box-sizing: border-box;
     387    margin: 0;
     388    padding: 3px;
     389    width: 39px;
     390    height: 32px;
     391    outline: none;
     392    border: none;
     393    color: #888;
     394    content: '\f228';
     395    vertical-align: middle;
     396    text-decoration: none;
     397    font: normal 50px/1 'Dashicons';
     398    -webkit-font-smoothing: antialiased;
     399}
     400
     401#download-mobile {
     402    background: #f7f7f7;
     403    border-bottom: 1px solid #dddddd;
     404}
     405
     406#download-mobile .wrapper {
     407    padding: 20px 0;
     408    text-align: center;
     409}
     410
     411#download-mobile span.download-ready {
     412    font-size: 1.6em;
     413    margin-right: 20px;
     414}
     415
     416#download-mobile a.download-button {
     417    height: inherit;
     418    padding: 10px 15px;
     419    font-size: 1.6em;
     420}
     421
     422@media screen and (min-width:480px) {
     423    #head-search form {
     424        margin-left: 0;
     425    }
     426}
     427@media screen and (min-width:768px) {
     428
     429    #wporg-header {
     430        height: 120px;
     431        text-align: inherit;
     432    }
     433
     434    #wporg-header h1 {
     435        float: left;
     436        padding-left: 10px;
     437    }
     438
     439    #head-search {
     440        float: right;
     441        margin-right: 14px;
     442        height: 48px;
     443        padding-top: 30px;
     444    }
     445
     446    #head-search form {
     447        margin-left: 0;
     448    }
     449
     450    #wporg-header ul#wporg-header-menu {
     451        position: static;
     452        float:left;
     453        margin: -15px 0 0;
     454        padding: 0;
     455        min-width: 0;
     456        max-width: inherit;
     457        width: 100%;
     458        list-style: none;
     459    }
     460
     461    #wporg-header ul li {
     462        float: left;
     463        position:relative;
     464    }
     465
     466    #wporg-header ul li a {
     467        font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
     468        font-weight: 600;
     469        display: block;
     470        line-height: 34px;
     471        padding: 0 6px;
     472        margin: 0 4px;
     473        font-size: 13px;
     474        color: #ddd;
     475        height: 46px;
     476    }
     477
     478    #wporg-header ul li#download .uparrow {
     479        display:none;
     480    }
     481
     482    #wporg-header ul li a.current ~ .uparrow {
     483        width: 0;
     484        height: 0;
     485        border-left: 9px solid transparent;
     486        border-right: 9px solid transparent;
     487        border-bottom: 9px solid #f7f7f7;
     488        margin: -8px auto 0 auto;
     489    }
     490
     491    #wporg-header ul li:hover .nav-submenu ~ .uparrow, #wporg-header ul li .nav-submenu:hover ~ .uparrow {
     492        width: 0;
     493        height: 0;
     494        border-left: 9px solid transparent;
     495        border-right: 9px solid transparent;
     496        border-bottom: 9px solid #444;
     497        margin: -10px auto 0 auto;
     498    }
     499
     500    #wporg-header .nav-submenu {
     501        display:none!important;/* Prevents #wporg-header ul overwriting this */
     502        min-width: 0;
     503        background: #444;
     504        margin-top: -1px;
     505        border: #444 solid 1px;
     506        border-top:0;
     507    }
     508
     509    #wporg-header ul li:hover .nav-submenu, #wporg-header ul li .nav-submenu:hover  {
     510        display:block!important;/* Prevents #wporg-header ul overwriting this */
     511        position:absolute;
     512        top:46px;
     513        left:0;
     514        z-index:11;
     515        width:auto;
     516    }
     517
     518    #wporg-header ul li .nav-submenu li {
     519        float:none;
     520    }
     521
     522    #wporg-header ul.nav-submenu li a {
     523        margin-left: 6;
     524        height: 34px;
     525        line-height: 34px;
     526    }
     527
     528    #mobile-menu-button {
     529        display: none;
     530    }
     531}
     532
     533@media screen and (min-width:800px) {
     534    #wporg-header ul li#download {
     535        display: list-item;
     536    }
     537
     538    #download-mobile {
     539        display: none;
     540    }
    330541}
    331542
     
    417628.col-2 p.button, .col-13 p.button {
    418629    height: 30px;
    419     line-height: 28px;
    420     padding: 0 12px 2px;
     630    line-height: 28px;
     631    padding: 0 12px 2px;
    421632}
    422633
     
    449660
    450661.submit input,
    451 input[type=button], 
     662input[type=button],
    452663input[type=submit],
    453664.button,
     
    460671    background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
    461672    border-color: #bbb;
    462     color: #333;
     673    color: #333;
    463674    text-shadow: 0 1px 0 #fff;
    464675}
    465676
    466677.submit input:hover,
    467 input[type=button]:hover, 
     678input[type=button]:hover,
    468679input[type=submit]:hover,
    469680.submit input:focus,
    470 input[type=button]:focus, 
     681input[type=button]:focus,
    471682input[type=submit]:focus,
    472683.button.hover,
     
    488699
    489700.submit input:focus,
    490 input[type=button]:focus, 
     701input[type=button]:focus,
    491702input[type=submit]:focus,
    492703.button.focus,
     
    498709
    499710.submit input:active,
    500 input[type=button]:active, 
     711input[type=button]:active,
    501712input[type=submit]:active,
    502713.button.active,
     
    516727    text-shadow: 0 -1px 0 #fff;
    517728    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    518     box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
     729    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    519730}
    520731
    521732.submit input:disabled,
    522 input[type=button]:disabled, 
     733input[type=button]:disabled,
    523734input[type=submit]:disabled,
    524735.button[disabled],
     
    557768    border-bottom-color: #1e6a8d;
    558769    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    559     box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
    560     color: #fff;
     770    box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
     771    color: #fff;
    561772    text-decoration: none;
    562773    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
     
    580791    border-color: #1b607f;
    581792    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    582     box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
     793    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    583794    color: #fff;
    584795    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     
    612823    color: rgba(255,255,255,0.95);
    613824    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    614     box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     825    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    615826    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    616827}
     
    780991    left: 0;
    781992    top: 0;
    782         background-image: url(http://s.wordpress.org/style/images/steps.png);
    783         background-size: 93px 31px;
    784         background-repeat: no-repeat;
     993    background-image: url(http://s.wordpress.org/style/images/steps.png);
     994    background-size: 93px 31px;
     995    background-repeat: no-repeat;
    785996}
    786997.no-static #home-below ol.steps li span {
     
    7921003    }
    7931004    .no-static #home-below ol.steps li span {
    794         background-image: url(//wordpress.org/style/images/steps-2x.png);
     1005        background-image: url(//wordpress.org/style/images/steps-2x.png);
    7951006    }
    7961007}
     
    8781089
    8791090#headline .login a {
    880     color: #21759b; 
    881 } 
    882 
    883 #headline .login a:visited { 
    884     color: #4ca6cf; 
    885 } 
     1091    color: #21759b;
     1092}
     1093
     1094#headline .login a:visited {
     1095    color: #4ca6cf;
     1096}
    8861097
    8871098#headline input.text {
     
    10421253        background-image: url(//wordpress.org/style/images/codeispoetry-2x.png?2);
    10431254    }
    1044 }
    1045 
    1046 #head-search {
    1047     float: right;
    1048     margin-right: 14px;
    1049     height: 48px;
    1050     padding-top: 30px;
    1051 }
    1052 
    1053 #head-search form {
    1054     width:288px;
    1055     display: inline-block;
    1056     border-bottom: 1px solid #3f3f3f;
    1057 }
    1058 
    1059 #head-search input.text {
    1060     background: #131313;
    1061     border: 0;
    1062     margin-right: 0;
    1063     margin-bottom: 0;
    1064     width: 262px;
    1065     height: 18px;
    1066     color: #999999;
    1067     float: left;
    1068     font-size: 12px;
    1069     outline: none;
    1070     font-family: "Open Sans", sans-serif;
    1071     border-radius: 0px;
    1072 }
    1073 
    1074 #head-search input.text::-moz-placeholder {
    1075     color: #eee;
    1076 }
    1077 
    1078 #head-search .button {
    1079     float: left;
    1080     text-shadow: none !important;
    1081     border: none;
    1082     height: 24px;
    1083     width: 20px;
    1084     background: #131313;
    1085     background-image: url(http://s.wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
    1086     background-position: 100% 2px;
    1087     background-repeat: no-repeat;
    1088     border-radius:0;
    1089     padding: 0;
    1090 }
    1091 .no-static #head-search .button {
    1092     background-image: url(//wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);
    10931255}
    10941256blockquote {
     
    15491711}
    15501712
    1551 body .meta a { 
     1713body .meta a {
    15521714    color: #777;
    15531715    border-bottom: 1px solid #dfdfdf;
Note: See TracChangeset for help on using the changeset viewer.