WordPress.org
Get WordPress

Plugin Directory

Changeset 2269978


Ignore:
Timestamp:
03/29/2020 01:14:34 AM (6 years ago)
Author:
sdavis2702
Message:

Update styles for newer WP admin UI

File:
1 edited

Legend:

Unmodified
Added
Removed

  • see-more-themes/trunk/assets/see-more-themes.css

    r901889 r2269978  
    1 /* match what already happens *above* 2000px - lasts all the way down to 1120px */
    2 @media only screen and (max-width: 2000px) {
     1@media all and (min-width: 640px) {
    32    .theme-browser .theme {
    4         margin-right: 3%;
    5         width: 17.6%;
     3        margin-right: 2.66667%;
     4        width: 30%;
    65        border: 1px solid #dedede;
    76    }
    8     .theme-browser .theme:nth-child(3n),
    9     .theme-browser .theme:nth-child(4n) {
    10         margin-right: 3%;
     7    .theme-browser .theme:nth-child(even),
     8    .theme-browser .theme:nth-child(odd) {
     9        margin-right: 5%;
    1110    }
    12     .theme-browser .theme:nth-child(5n) {
     11    .theme-browser .theme:nth-child(3n) {
    1312        margin-right: 0;
    14     }
    15 }
    16 
    17 /* we'll adjust the theme display structure a bit just for a given range then give it back to core */
    18 @media only screen and (max-width: 2000px) and (min-width: 782px) {
    19     .theme-browser .theme .theme-name,
    20     .theme-browser .theme.active .theme-name {
    21         padding: 10px 14px;
    22     }
    23     .theme-browser .theme .theme-actions {
    24         position: static;
    25         opacity: 1;
    26         padding: 10px;
    27         border: 1px solid rgba(0, 0, 0, 0.05);
    28         border-width: 1px 0 0;
    29         height: auto;
    30     }
    31     .theme-browser .theme .more-details {
    32         top: 20%;
    33         right: 20%;
    34         left: 20%;
    35         font-size: 13px;
    36     }
    37     .wp-core-ui .theme-browser .theme-actions .button,
    38     .wp-core-ui .theme-browser .theme-actions .button-primary,
    39     .wp-core-ui .theme-browser .theme-actions .button-secondary {
    40         background: none;
    41         font-size: 11px;
    42         line-height: 20px;
    43         font-weight: bold;
    44         padding: 0 8px 0 4px;
    45         border: none;
    46         outline: none;
    47         border-radius: 0;
    48         box-shadow: none;
    49         margin: 0;
    50         height: auto;
    51     }
    52     .wp-core-ui .theme-browser .theme-actions .button-primary {
    53         color: #2EA2CC;
    54         border-right: 1px solid #ddd;
    55     }
    56     .wp-core-ui .theme-browser .active .theme-actions .button-primary {
    57         color: #fff;
    58         border: none;
    5913    }
    6014    .theme-browser .theme.add-new-theme span:after {
    … …  
    6418        margin-left: -35px;
    6519    }
    66     .theme-browser .theme .theme-installed,
    67     .theme-browser .theme .theme-update {
    68         font-size: 11px;
    69         height: 30px;
    70         line-height: 30px;
    71     }
    7220}
    7321
    74 /* just smaller than 1120px, let's get more themes in the mix down to 900px */
    75 @media only screen and (max-width: 1120px) {
     22@media all and (min-width: 783px) {
    7623    .theme-browser .theme {
    7724        margin-right: 2.66667%;
    … …  
    8734        margin-right: 0;
    8835    }
    89 }
    90 
    91 /* the admin menu folds at 900px so let's go 3 across since we're on smaller screens */
    92 @media only screen and (max-width: 900px) {
    93     .theme-browser .theme {
    94         margin-right: 5%;
    95         width: 30%;
     36    .theme-browser .theme .more-details {
     37        top: 20%;
     38        right: 15%;
     39        left: 15%;
     40        font-size: 13px;
     41        padding: 10px;
    9642    }
    97     .theme-browser .theme:nth-child(even),
    98     .theme-browser .theme:nth-child(odd) {
    99         margin-right: 5%;
     43    .theme-browser .theme .theme-name,
     44    .theme-browser .theme .theme-actions {
     45        padding: 10px;
    10046    }
    101     .theme-browser .theme:nth-child(3n) {
    102         margin-right: 0;
     47    .theme-browser .theme .theme-name {
     48        font-size: 14px;
     49    }
     50    .theme-browser .theme .theme-actions {
     51        position: static;
     52        opacity: 1;
     53        padding: 10px;
     54        border-width: 1px 0 0;
     55        border-style: solid;
     56        border-color: rgba(0, 0, 0, 0.05);
     57        box-shadow: none;
     58        transform: none;
     59    }
     60    .theme-browser .theme .theme-actions .button {
     61        display: inline-block;
     62        background: none;
     63        font-size: 13px;
     64        line-height: 1;
     65        font-weight: 400;
     66        text-decoration: underline;
     67        padding: 0;
     68        border: none;
     69        outline: none;
     70        box-shadow: none;
     71        margin: 0 8px 0 0;
     72        min-height: unset;
     73        text-shadow: none;
     74    }
     75    .theme-browser .theme .theme-actions .button:hover {
     76        text-decoration: none;
     77    }
     78    .wp-core-ui .theme-browser .theme-actions .button-primary {
     79        color: #23282d;
     80    }
     81    .wp-core-ui .theme-browser .theme-actions .button-secondary {
     82        color: #2EA2CC;
     83    }
     84    .wp-core-ui .theme-browser .active .theme-actions .button-primary {
     85        color: #fff;
     86    }
     87    .theme-browser .theme.add-new-theme .theme-name {
     88        margin-top: 0;
    10389    }
    10490}
    10591
    106 /* we're running out of space at 600px so we'll go halfsies */
    107 @media only screen and (max-width: 600px) {
     92@media only screen and (min-width: 1140px) {
    10893    .theme-browser .theme {
    109         width: 47.5%;
     94        margin-right: 3%;
     95        width: 17.6%;
     96        border: 1px solid #dedede;
     97    }
     98    .theme-browser .theme:nth-child(3n),
     99    .theme-browser .theme:nth-child(4n) {
     100        margin-right: 3%;
     101    }
     102    .theme-browser .theme:nth-child(5n) {
    110103        margin-right: 0;
    111104    }
    112     .theme-browser .theme:nth-child(odd),
    113     .theme-browser .theme:nth-child(3n) {
    114         margin-right: 5%;
    115     }
    116     .theme-browser .theme:nth-child(even) {
    117         margin-right: 0;
     105    .theme-browser .theme.add-new-theme .theme-name {
     106        margin-top: 11px;
    118107    }
    119108}
    120 
    121 /* we're in the clear now */
    122 @media only screen and (max-width: 480px) {
    123     .theme-browser .theme {
    124         width: 100%;
    125         margin-right: 0;
    126     }
    127     .theme-browser .theme:nth-child(odd),
    128     .theme-browser .theme:nth-child(2n),
    129     .theme-browser .theme:nth-child(3n) {
    130         margin-right: 0;
    131     }
    132 }
Note: See TracChangeset for help on using the changeset viewer.