Make WordPress Core

Changeset 49330


Ignore:
Timestamp:
10/27/2020 05:05:51 PM (4 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Import the latest changes.

For a full list of changes since [49320], see https://github.com/WordPress/twentytwentyone/compare/461dcf9cd...5759e96.

Props poena, melchoyce, aristath, justinahinon, ryelle.
See #51526.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentytwentyone/archive.php

    r49216 r49330  
    1111
    1212get_header();
     13
     14$description = get_the_archive_description();
    1315?>
    1416
     
    1719    <header class="page-header alignwide">
    1820        <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
     21        <?php if ( $description ) : ?>
     22            <div class="archive-description"><?php echo wp_kses_post( wpautop( $description ) ); ?></div>
     23        <?php endif; ?>
    1924    </header><!-- .page-header -->
    2025
  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r49320 r49330  
    1111    /* Block: Latest posts */
    1212    /* Colors */
    13     /* white 50% opacity used in form fields.*/
    1413    /* Body text color, site title, footer text color. */
    1514    /* Headings */
     
    3130}
    3231
    33 /* Button extends */
    34 .wp-block-button__link {
    35     line-height: 1.5;
    36     color: #d1e4dd;
    37     cursor: pointer;
    38     font-weight: 500;
    39     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    40     font-size: 1.25rem;
    41     background-color: #39414d;
    42     border-radius: 0;
    43     border: 3px solid #39414d;
    44     text-decoration: none;
    45     padding: 15px 30px;
    46 }
    47 .wp-block-file .wp-block-file__button {
    48     line-height: 1.5;
    49     color: #d1e4dd;
    50     cursor: pointer;
    51     font-weight: 500;
    52     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    53     font-size: 1.25rem;
    54     background-color: #39414d;
    55     border-radius: 0;
    56     border: 3px solid #39414d;
    57     text-decoration: none;
    58     padding: 15px 30px;
    59 }
    60 .wp-block-search .wp-block-search__button {
    61     line-height: 1.5;
    62     color: #d1e4dd;
    63     cursor: pointer;
    64     font-weight: 500;
    65     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    66     font-size: 1.25rem;
    67     background-color: #39414d;
    68     border-radius: 0;
    69     border: 3px solid #39414d;
    70     text-decoration: none;
    71     padding: 15px 30px;
    72 }
    73 
    74 .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .wp-block-search .wp-block-search__button:before, .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .wp-block-search .wp-block-search__button:after {
    75     content: "";
    76     display: block;
    77     height: 0;
    78     width: 0;
    79 }
    80 
    81 .wp-block-button__link:before {
    82     margin-bottom: -calc(1em - 0);
    83 }
    84 
    85 .wp-block-file .wp-block-file__button:before {
    86     margin-bottom: -calc(1em - 0);
    87 }
    88 
    89 .wp-block-search .wp-block-search__button:before {
    90     margin-bottom: -calc(1em - 0);
    91 }
    92 
    93 .wp-block-button__link:after {
    94     margin-top: -calc(1em - 0);
    95 }
    96 
    97 .wp-block-file .wp-block-file__button:after {
    98     margin-top: -calc(1em - 0);
    99 }
    100 
    101 .wp-block-search .wp-block-search__button:after {
    102     margin-top: -calc(1em - 0);
    103 }
    104 
    105 .wp-block-button__link:active {
    106     color: #39414d;
    107     background-color: #d1e4dd;
    108 }
    109 
    110 .wp-block-file .wp-block-file__button:active {
    111     color: #39414d;
    112     background-color: #d1e4dd;
    113 }
    114 
    115 .wp-block-search .wp-block-search__button:active {
    116     color: #39414d;
    117     background-color: #d1e4dd;
    118 }
    119 
    120 .wp-block-button__link:hover {
    121     color: #39414d;
    122     background: transparent;
    123 }
    124 
    125 .wp-block-file .wp-block-file__button:hover {
    126     color: #39414d;
    127     background: transparent;
    128 }
    129 
    130 .wp-block-search .wp-block-search__button:hover {
    131     color: #39414d;
    132     background: transparent;
    133 }
    134 
    135 .wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .wp-block-search .wp-block-search__button:focus, .has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .wp-block-search .has-focus.wp-block-search__button {
    136     outline-offset: -4px;
    137     outline: 2px dotted currentColor;
    138 }
    139 
    140 .wp-block-button__link:disabled {
    141     background-color: rgba(255, 255, 255, 0.5);
    142     border-color: rgba(255, 255, 255, 0.5);
    143     color: #39414d;
    144 }
    145 
    146 .wp-block-file .wp-block-file__button:disabled {
    147     background-color: rgba(255, 255, 255, 0.5);
    148     border-color: rgba(255, 255, 255, 0.5);
    149     color: #39414d;
    150 }
    151 
    152 .wp-block-search .wp-block-search__button:disabled {
    153     background-color: rgba(255, 255, 255, 0.5);
    154     border-color: rgba(255, 255, 255, 0.5);
    155     color: #39414d;
    156 }
    157 
    15832/**
    15933 * Repsonsive Styles
     
    401275}
    402276
    403 .wp-block-button__link.is-style-outline {
     277.wp-block-button__link {
     278    line-height: 1.5;
     279    color: #d1e4dd;
     280    cursor: pointer;
     281    font-weight: 500;
     282    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     283    font-size: 1.25rem;
     284    background-color: #39414d;
     285    border-radius: 0;
     286    border: 3px solid #39414d;
     287    text-decoration: none;
     288    padding: 15px 30px;
     289}
     290
     291.wp-block-button__link:before, .wp-block-button__link:after {
     292    content: "";
     293    display: block;
     294    height: 0;
     295    width: 0;
     296}
     297
     298.wp-block-button__link:before {
     299    margin-bottom: -calc(1em - 0);
     300}
     301
     302.wp-block-button__link:after {
     303    margin-top: -calc(1em - 0);
     304}
     305
     306.wp-block-button__link:focus {
     307    outline-offset: -6px;
     308    outline: 2px dotted currentColor;
     309}
     310
     311.wp-block-button__link:disabled {
     312    background-color: rgba(255, 255, 255, 0.5);
     313    border-color: rgba(255, 255, 255, 0.5);
     314    color: #39414d;
     315}
     316
     317/**
     318 * Block Options
     319 */
     320.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active {
     321    color: #39414d;
     322    background-color: #d1e4dd;
     323}
     324
     325.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
     326    color: #39414d;
     327    background: transparent;
     328}
     329
     330.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover {
     331    outline-offset: -7px;
     332    outline: 2px dotted currentColor;
     333}
     334
     335.wp-block-button.is-style-outline .wp-block-button__link {
    404336    color: #39414d;
    405337    background: transparent;
    406338    border: 3px solid currentColor;
    407 }
    408 
    409 .is-style-outline .wp-block-button__link {
     339    padding: 15px 30px;
     340}
     341
     342.wp-block-button.is-style-outline .wp-block-button__link:visited {
    410343    color: #39414d;
    411     background: transparent;
    412     border: 3px solid currentColor;
    413 }
    414 
    415 .wp-block-button__link.is-style-outline:visited {
    416     color: #39414d;
    417 }
    418 
    419 .is-style-outline .wp-block-button__link:visited {
    420     color: #39414d;
    421 }
    422 
    423 .wp-block-button__link.is-style-outline:active {
     344}
     345
     346.wp-block-button.is-style-outline .wp-block-button__link:active {
    424347    background-color: #39414d;
    425348    color: #d1e4dd;
     
    427350}
    428351
    429 .wp-block-button__link.is-style-outline:hover {
     352.wp-block-button.is-style-outline .wp-block-button__link:hover {
    430353    background-color: #39414d;
    431354    color: #d1e4dd;
     
    433356}
    434357
    435 .is-style-outline .wp-block-button__link:active {
    436     background-color: #39414d;
    437     color: #d1e4dd;
    438     border: 3px solid #39414d;
    439 }
    440 
    441 .is-style-outline .wp-block-button__link:hover {
    442     background-color: #39414d;
    443     color: #d1e4dd;
    444     border: 3px solid #39414d;
    445 }
    446 
    447 .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus,
    448 .is-style-outline .wp-block-button__link:focus,
    449 .is-style-outline .wp-block-button__link.has-focus {
     358.wp-block-button.is-style-outline .wp-block-button__link.has-background {
     359    background: transparent !important;
     360}
     361
     362.wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
     363    color: #39414d;
    450364    outline-offset: -7px;
    451365    background: transparent;
    452 }
    453 
    454 .wp-block-button__link.is-style-squared,
    455 .is-style-squared .wp-block-button__link {
     366    outline: 2px dotted currentColor;
     367    border: 3px solid currentColor;
     368}
     369
     370.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
     371    color: #39414d;
     372    outline-offset: -7px;
     373    background: transparent;
     374    outline: 2px dotted currentColor;
     375    border: 3px solid currentColor;
     376}
     377
     378.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
     379    color: #39414d;
     380    outline-offset: -7px;
     381    background: transparent;
     382    outline: 2px dotted currentColor;
     383    border: 3px solid currentColor;
     384}
     385
     386.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
     387    color: #39414d;
     388    outline-offset: -7px;
     389    background: transparent;
     390    outline: 2px dotted currentColor;
     391    border: 3px solid currentColor;
     392}
     393
     394.wp-block-button.is-style-squared {
    456395    border-radius: 0;
    457396}
     
    756695
    757696.wp-block-file .wp-block-file__button {
     697    line-height: 1.5;
     698    color: #d1e4dd;
     699    cursor: pointer;
     700    font-weight: 500;
     701    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     702    font-size: 1.25rem;
     703    background-color: #39414d;
     704    border-radius: 0;
     705    border: 3px solid #39414d;
     706    text-decoration: none;
     707    padding: 15px 30px;
    758708    display: inline-block;
     709}
     710
     711.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
     712    content: "";
     713    display: block;
     714    height: 0;
     715    width: 0;
     716}
     717
     718.wp-block-file .wp-block-file__button:before {
     719    margin-bottom: -calc(1em - 0);
     720}
     721
     722.wp-block-file .wp-block-file__button:after {
     723    margin-top: -calc(1em - 0);
     724}
     725
     726.wp-block-file .wp-block-file__button:focus {
     727    outline-offset: -6px;
     728    outline: 2px dotted currentColor;
     729}
     730
     731.wp-block-file .wp-block-file__button:disabled {
     732    background-color: rgba(255, 255, 255, 0.5);
     733    border-color: rgba(255, 255, 255, 0.5);
     734    color: #39414d;
     735}
     736
     737.wp-block-file .wp-block-file__button:hover {
     738    color: #39414d;
     739    background: transparent;
    759740}
    760741
     
    12321213    letter-spacing: 0.05em;
    12331214    line-height: 1.3;
     1215}
     1216
     1217[data-type="core/html"] textarea {
     1218    color: #28303d;
     1219    border-radius: 0;
     1220    padding: 20px;
    12341221}
    12351222
     
    20001987
    20011988.wp-block-search .wp-block-search__button {
     1989    line-height: 1.5;
     1990    color: #d1e4dd;
     1991    cursor: pointer;
     1992    font-weight: 500;
     1993    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     1994    font-size: 1.25rem;
     1995    background-color: #39414d;
     1996    border-radius: 0;
     1997    border: 3px solid #39414d;
     1998    text-decoration: none;
     1999    padding: 15px 30px;
    20022000    box-shadow: none;
    20032001    margin-left: 0;
    20042002    background-color: transparent;
     2003    color: #39414d;
     2004}
     2005
     2006.wp-block-search .wp-block-search__button:before, .wp-block-search .wp-block-search__button:after {
     2007    content: "";
     2008    display: block;
     2009    height: 0;
     2010    width: 0;
     2011}
     2012
     2013.wp-block-search .wp-block-search__button:before {
     2014    margin-bottom: -calc(1em - 0);
     2015}
     2016
     2017.wp-block-search .wp-block-search__button:after {
     2018    margin-top: -calc(1em - 0);
     2019}
     2020
     2021.wp-block-search .wp-block-search__button:focus {
     2022    outline-offset: -6px;
     2023    outline: 2px dotted currentColor;
     2024}
     2025
     2026.wp-block-search .wp-block-search__button:disabled {
     2027    background-color: rgba(255, 255, 255, 0.5);
     2028    border-color: rgba(255, 255, 255, 0.5);
    20052029    color: #39414d;
    20062030}
     
    22402264pre.wp-block-verse {
    22412265    padding: 0;
     2266    color: currentColor;
    22422267}
    22432268
  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

    r49320 r49330  
    2525 *
    2626 * TOOLS
    27  * Extends..............Global extends.
    2827 * Functions............Global functions.
    2928 * Mixins...............Global mixins.
     
    103102    /* Block: Latest posts */
    104103    /* Colors */
    105     /* white 50% opacity used in form fields.*/
    106104    /* Body text color, site title, footer text color. */
    107105    /* Headings */
     
    121119    /* Block: Table */
    122120    /* Widgets */
    123 }
    124 
    125 /* Button extends */
    126 .site .button {
    127     line-height: 1.5;
    128     color: #d1e4dd;
    129     cursor: pointer;
    130     font-weight: 500;
    131     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    132     font-size: 1.25rem;
    133     background-color: #39414d;
    134     border-radius: 0;
    135     border: 3px solid #39414d;
    136     text-decoration: none;
    137     padding: 15px 30px;
    138 }
    139 input[type="submit"] {
    140     line-height: 1.5;
    141     color: #d1e4dd;
    142     cursor: pointer;
    143     font-weight: 500;
    144     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    145     font-size: 1.25rem;
    146     background-color: #39414d;
    147     border-radius: 0;
    148     border: 3px solid #39414d;
    149     text-decoration: none;
    150     padding: 15px 30px;
    151 }
    152 input[type="reset"] {
    153     line-height: 1.5;
    154     color: #d1e4dd;
    155     cursor: pointer;
    156     font-weight: 500;
    157     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    158     font-size: 1.25rem;
    159     background-color: #39414d;
    160     border-radius: 0;
    161     border: 3px solid #39414d;
    162     text-decoration: none;
    163     padding: 15px 30px;
    164 }
    165 .wp-block-search__button {
    166     line-height: 1.5;
    167     color: #d1e4dd;
    168     cursor: pointer;
    169     font-weight: 500;
    170     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    171     font-size: 1.25rem;
    172     background-color: #39414d;
    173     border-radius: 0;
    174     border: 3px solid #39414d;
    175     text-decoration: none;
    176     padding: 15px 30px;
    177 }
    178 .wp-block-button .wp-block-button__link {
    179     line-height: 1.5;
    180     color: #d1e4dd;
    181     cursor: pointer;
    182     font-weight: 500;
    183     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    184     font-size: 1.25rem;
    185     background-color: #39414d;
    186     border-radius: 0;
    187     border: 3px solid #39414d;
    188     text-decoration: none;
    189     padding: 15px 30px;
    190 }
    191 .wp-block-file .wp-block-file__button {
    192     line-height: 1.5;
    193     color: #d1e4dd;
    194     cursor: pointer;
    195     font-weight: 500;
    196     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    197     font-size: 1.25rem;
    198     background-color: #39414d;
    199     border-radius: 0;
    200     border: 3px solid #39414d;
    201     text-decoration: none;
    202     padding: 15px 30px;
    203 }
    204 
    205 .site .button:before,
    206 input[type="submit"]:before,
    207 input[type="reset"]:before,
    208 .wp-block-search__button:before,
    209 .wp-block-button .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .site .button:after,
    210 input[type="submit"]:after,
    211 input[type="reset"]:after,
    212 .wp-block-search__button:after,
    213 .wp-block-button .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after {
    214     content: "";
    215     display: block;
    216     height: 0;
    217     width: 0;
    218 }
    219 
    220 .site .button:before {
    221     margin-bottom: -calc(1em - 0);
    222 }
    223 
    224 input[type="submit"]:before {
    225     margin-bottom: -calc(1em - 0);
    226 }
    227 
    228 input[type="reset"]:before {
    229     margin-bottom: -calc(1em - 0);
    230 }
    231 
    232 .wp-block-search__button:before {
    233     margin-bottom: -calc(1em - 0);
    234 }
    235 
    236 .wp-block-button .wp-block-button__link:before {
    237     margin-bottom: -calc(1em - 0);
    238 }
    239 
    240 .wp-block-file .wp-block-file__button:before {
    241     margin-bottom: -calc(1em - 0);
    242 }
    243 
    244 .site .button:after {
    245     margin-top: -calc(1em - 0);
    246 }
    247 
    248 input[type="submit"]:after {
    249     margin-top: -calc(1em - 0);
    250 }
    251 
    252 input[type="reset"]:after {
    253     margin-top: -calc(1em - 0);
    254 }
    255 
    256 .wp-block-search__button:after {
    257     margin-top: -calc(1em - 0);
    258 }
    259 
    260 .wp-block-button .wp-block-button__link:after {
    261     margin-top: -calc(1em - 0);
    262 }
    263 
    264 .wp-block-file .wp-block-file__button:after {
    265     margin-top: -calc(1em - 0);
    266 }
    267 
    268 .site .button:active {
    269     color: #39414d;
    270     background-color: #d1e4dd;
    271 }
    272 
    273 input:active[type="submit"] {
    274     color: #39414d;
    275     background-color: #d1e4dd;
    276 }
    277 
    278 input:active[type="reset"] {
    279     color: #39414d;
    280     background-color: #d1e4dd;
    281 }
    282 
    283 .wp-block-search__button:active {
    284     color: #39414d;
    285     background-color: #d1e4dd;
    286 }
    287 
    288 .wp-block-button .wp-block-button__link:active {
    289     color: #39414d;
    290     background-color: #d1e4dd;
    291 }
    292 
    293 .wp-block-file .wp-block-file__button:active {
    294     color: #39414d;
    295     background-color: #d1e4dd;
    296 }
    297 
    298 .site .button:hover {
    299     color: #39414d;
    300     background: transparent;
    301 }
    302 
    303 input:hover[type="submit"] {
    304     color: #39414d;
    305     background: transparent;
    306 }
    307 
    308 input:hover[type="reset"] {
    309     color: #39414d;
    310     background: transparent;
    311 }
    312 
    313 .wp-block-search__button:hover {
    314     color: #39414d;
    315     background: transparent;
    316 }
    317 
    318 .wp-block-button .wp-block-button__link:hover {
    319     color: #39414d;
    320     background: transparent;
    321 }
    322 
    323 .wp-block-file .wp-block-file__button:hover {
    324     color: #39414d;
    325     background: transparent;
    326 }
    327 
    328 .site .button:focus,
    329 input:focus[type="submit"],
    330 input:focus[type="reset"],
    331 .wp-block-search__button:focus,
    332 .wp-block-button .wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .site .has-focus.button,
    333 input.has-focus[type="submit"],
    334 input.has-focus[type="reset"],
    335 .has-focus.wp-block-search__button,
    336 .wp-block-button .has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button {
    337     outline-offset: -4px;
    338     outline: 2px dotted currentColor;
    339 }
    340 
    341 .site .button:disabled {
    342     background-color: rgba(255, 255, 255, 0.5);
    343     border-color: rgba(255, 255, 255, 0.5);
    344     color: #39414d;
    345 }
    346 
    347 input:disabled[type="submit"] {
    348     background-color: rgba(255, 255, 255, 0.5);
    349     border-color: rgba(255, 255, 255, 0.5);
    350     color: #39414d;
    351 }
    352 
    353 input:disabled[type="reset"] {
    354     background-color: rgba(255, 255, 255, 0.5);
    355     border-color: rgba(255, 255, 255, 0.5);
    356     color: #39414d;
    357 }
    358 
    359 .wp-block-search__button:disabled {
    360     background-color: rgba(255, 255, 255, 0.5);
    361     border-color: rgba(255, 255, 255, 0.5);
    362     color: #39414d;
    363 }
    364 
    365 .wp-block-button .wp-block-button__link:disabled {
    366     background-color: rgba(255, 255, 255, 0.5);
    367     border-color: rgba(255, 255, 255, 0.5);
    368     color: #39414d;
    369 }
    370 
    371 .wp-block-file .wp-block-file__button:disabled {
    372     background-color: rgba(255, 255, 255, 0.5);
    373     border-color: rgba(255, 255, 255, 0.5);
    374     color: #39414d;
    375121}
    376122
     
    15361282    border-radius: 0;
    15371283    color: #28303d;
    1538     background: rgba(255, 255, 255, 0.5);
    15391284    line-height: 1.7;
    15401285    padding: 10px;
     1286    margin: 0 2px;
    15411287}
    15421288
     
    15451291    border-radius: 0;
    15461292    color: #28303d;
    1547     background: rgba(255, 255, 255, 0.5);
    15481293    line-height: 1.7;
    15491294    padding: 10px;
     1295    margin: 0 2px;
    15501296}
    15511297
     
    15541300    border-radius: 0;
    15551301    color: #28303d;
    1556     background: rgba(255, 255, 255, 0.5);
    15571302    line-height: 1.7;
    15581303    padding: 10px;
     1304    margin: 0 2px;
    15591305}
    15601306
     
    15631309    border-radius: 0;
    15641310    color: #28303d;
    1565     background: rgba(255, 255, 255, 0.5);
    15661311    line-height: 1.7;
    15671312    padding: 10px;
     1313    margin: 0 2px;
    15681314}
    15691315
     
    15721318    border-radius: 0;
    15731319    color: #28303d;
    1574     background: rgba(255, 255, 255, 0.5);
    15751320    line-height: 1.7;
    15761321    padding: 10px;
     1322    margin: 0 2px;
    15771323}
    15781324
     
    15811327    border-radius: 0;
    15821328    color: #28303d;
    1583     background: rgba(255, 255, 255, 0.5);
    15841329    line-height: 1.7;
    15851330    padding: 10px;
     1331    margin: 0 2px;
    15861332}
    15871333
     
    15901336    border-radius: 0;
    15911337    color: #28303d;
    1592     background: rgba(255, 255, 255, 0.5);
    15931338    line-height: 1.7;
    15941339    padding: 10px;
     1340    margin: 0 2px;
    15951341}
    15961342
     
    15991345    border-radius: 0;
    16001346    color: #28303d;
    1601     background: rgba(255, 255, 255, 0.5);
    16021347    line-height: 1.7;
    16031348    padding: 10px;
     1349    margin: 0 2px;
    16041350}
    16051351
     
    16081354    border-radius: 0;
    16091355    color: #28303d;
    1610     background: rgba(255, 255, 255, 0.5);
    16111356    line-height: 1.7;
    16121357    padding: 10px;
     1358    margin: 0 2px;
    16131359}
    16141360
     
    16171363    border-radius: 0;
    16181364    color: #28303d;
    1619     background: rgba(255, 255, 255, 0.5);
    16201365    line-height: 1.7;
    16211366    padding: 10px;
     1367    margin: 0 2px;
    16221368}
    16231369
     
    16261372    border-radius: 0;
    16271373    color: #28303d;
    1628     background: rgba(255, 255, 255, 0.5);
    16291374    line-height: 1.7;
    16301375    padding: 10px;
     1376    margin: 0 2px;
    16311377}
    16321378
     
    16351381    border-radius: 0;
    16361382    color: #28303d;
    1637     background: rgba(255, 255, 255, 0.5);
    16381383    line-height: 1.7;
    16391384    padding: 10px;
     1385    margin: 0 2px;
    16401386}
    16411387
     
    16441390    border-radius: 0;
    16451391    color: #28303d;
    1646     background: rgba(255, 255, 255, 0.5);
    16471392    line-height: 1.7;
    16481393    padding: 10px;
     1394    margin: 0 2px;
    16491395}
    16501396
     
    16531399    border-radius: 0;
    16541400    color: #28303d;
    1655     background: rgba(255, 255, 255, 0.5);
    16561401    line-height: 1.7;
    16571402    padding: 10px;
     1403    margin: 0 2px;
    16581404}
    16591405
     
    16621408    border-radius: 0;
    16631409    color: #28303d;
    1664     background: rgba(255, 255, 255, 0.5);
    16651410    line-height: 1.7;
    16661411    padding: 10px;
     1412    margin: 0 2px;
    16671413}
    16681414
    16691415input[type="text"]:focus {
    16701416    color: #28303d;
    1671     outline: 1px solid #39414d;
    1672     background: #fff;
     1417    outline-offset: 2px;
     1418    outline: 2px dotted #39414d;
    16731419}
    16741420
    16751421input[type="email"]:focus {
    16761422    color: #28303d;
    1677     outline: 1px solid #39414d;
    1678     background: #fff;
     1423    outline-offset: 2px;
     1424    outline: 2px dotted #39414d;
    16791425}
    16801426
    16811427input[type="url"]:focus {
    16821428    color: #28303d;
    1683     outline: 1px solid #39414d;
    1684     background: #fff;
     1429    outline-offset: 2px;
     1430    outline: 2px dotted #39414d;
    16851431}
    16861432
    16871433input[type="password"]:focus {
    16881434    color: #28303d;
    1689     outline: 1px solid #39414d;
    1690     background: #fff;
     1435    outline-offset: 2px;
     1436    outline: 2px dotted #39414d;
    16911437}
    16921438
    16931439input[type="search"]:focus {
    16941440    color: #28303d;
    1695     outline: 1px solid #39414d;
    1696     background: #fff;
     1441    outline-offset: 2px;
     1442    outline: 2px dotted #39414d;
    16971443}
    16981444
    16991445input[type="number"]:focus {
    17001446    color: #28303d;
    1701     outline: 1px solid #39414d;
    1702     background: #fff;
     1447    outline-offset: 2px;
     1448    outline: 2px dotted #39414d;
    17031449}
    17041450
    17051451input[type="tel"]:focus {
    17061452    color: #28303d;
    1707     outline: 1px solid #39414d;
    1708     background: #fff;
     1453    outline-offset: 2px;
     1454    outline: 2px dotted #39414d;
    17091455}
    17101456
    17111457input[type="date"]:focus {
    17121458    color: #28303d;
    1713     outline: 1px solid #39414d;
    1714     background: #fff;
     1459    outline-offset: 2px;
     1460    outline: 2px dotted #39414d;
    17151461}
    17161462
    17171463input[type="month"]:focus {
    17181464    color: #28303d;
    1719     outline: 1px solid #39414d;
    1720     background: #fff;
     1465    outline-offset: 2px;
     1466    outline: 2px dotted #39414d;
    17211467}
    17221468
    17231469input[type="week"]:focus {
    17241470    color: #28303d;
    1725     outline: 1px solid #39414d;
    1726     background: #fff;
     1471    outline-offset: 2px;
     1472    outline: 2px dotted #39414d;
    17271473}
    17281474
    17291475input[type="time"]:focus {
    17301476    color: #28303d;
    1731     outline: 1px solid #39414d;
    1732     background: #fff;
     1477    outline-offset: 2px;
     1478    outline: 2px dotted #39414d;
    17331479}
    17341480
    17351481input[type="datetime"]:focus {
    17361482    color: #28303d;
    1737     outline: 1px solid #39414d;
    1738     background: #fff;
     1483    outline-offset: 2px;
     1484    outline: 2px dotted #39414d;
    17391485}
    17401486
    17411487input[type="datetime-local"]:focus {
    17421488    color: #28303d;
    1743     outline: 1px solid #39414d;
    1744     background: #fff;
     1489    outline-offset: 2px;
     1490    outline: 2px dotted #39414d;
    17451491}
    17461492
    17471493input[type="color"]:focus {
    17481494    color: #28303d;
    1749     outline: 1px solid #39414d;
    1750     background: #fff;
     1495    outline-offset: 2px;
     1496    outline: 2px dotted #39414d;
    17511497}
    17521498
    17531499.site textarea:focus {
    17541500    color: #28303d;
    1755     outline: 1px solid #39414d;
    1756     background: #fff;
     1501    outline-offset: 2px;
     1502    outline: 2px dotted #39414d;
    17571503}
    17581504
     
    17751521}
    17761522
     1523.has-background-dark input[type="text"] {
     1524    background: rgba(255, 255, 255, 0.9);
     1525}
     1526
     1527.has-background-dark
     1528input[type="email"] {
     1529    background: rgba(255, 255, 255, 0.9);
     1530}
     1531
     1532.has-background-dark
     1533input[type="url"] {
     1534    background: rgba(255, 255, 255, 0.9);
     1535}
     1536
     1537.has-background-dark
     1538input[type="password"] {
     1539    background: rgba(255, 255, 255, 0.9);
     1540}
     1541
     1542.has-background-dark
     1543input[type="search"] {
     1544    background: rgba(255, 255, 255, 0.9);
     1545}
     1546
     1547.has-background-dark
     1548input[type="number"] {
     1549    background: rgba(255, 255, 255, 0.9);
     1550}
     1551
     1552.has-background-dark
     1553input[type="tel"] {
     1554    background: rgba(255, 255, 255, 0.9);
     1555}
     1556
     1557.has-background-dark
     1558input[type="date"] {
     1559    background: rgba(255, 255, 255, 0.9);
     1560}
     1561
     1562.has-background-dark
     1563input[type="month"] {
     1564    background: rgba(255, 255, 255, 0.9);
     1565}
     1566
     1567.has-background-dark
     1568input[type="week"] {
     1569    background: rgba(255, 255, 255, 0.9);
     1570}
     1571
     1572.has-background-dark
     1573input[type="time"] {
     1574    background: rgba(255, 255, 255, 0.9);
     1575}
     1576
     1577.has-background-dark
     1578input[type="datetime"] {
     1579    background: rgba(255, 255, 255, 0.9);
     1580}
     1581
     1582.has-background-dark
     1583input[type="datetime-local"] {
     1584    background: rgba(255, 255, 255, 0.9);
     1585}
     1586
     1587.has-background-dark
     1588input[type="color"] {
     1589    background: rgba(255, 255, 255, 0.9);
     1590}
     1591
     1592.has-background-dark
     1593.site textarea {
     1594    background: rgba(255, 255, 255, 0.9);
     1595}
     1596
    17771597input[type="search"]:focus {
    1778     outline-offset: 0;
    1779 }
    1780 
    1781 input[type="date"] {
    1782     background: #fff;
     1598    outline-offset: -7px;
     1599}
     1600
     1601.has-background-dark input[type="search"]:focus {
     1602    outline-color: #d1e4dd;
    17831603}
    17841604
    17851605input[type="color"] {
    1786     background: #fff;
    17871606    padding: 5px;
    17881607    height: 40px;
     
    18101629
    18111630select:focus {
    1812     outline: 1px solid #39414d;
     1631    outline-offset: 2px;
     1632    outline: 2px dotted #39414d;
     1633}
     1634
     1635.has-background-dark select {
     1636    /* stylelint-disable */
     1637    background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
     1638    /* stylelint-enable */
     1639    background-position: right 10px top 60%;
    18131640}
    18141641
     
    18351662        width: 25px;
    18361663        height: 25px;
    1837         background: rgba(255, 255, 255, 0.5);
    18381664        border: 3px solid #39414d;
    1839         outline-offset: 0;
     1665        background: #fff;
    18401666    }
    18411667    input[type="radio"] {
     
    18451671        width: 25px;
    18461672        height: 25px;
    1847         background: rgba(255, 255, 255, 0.5);
    18481673        border: 3px solid #39414d;
    1849         outline-offset: 0;
     1674        background: #fff;
    18501675    }
    18511676    input[type="checkbox"]:disabled,
     
    18531678        opacity: 0.7;
    18541679    }
     1680    .has-background-dark input[type="checkbox"] {
     1681        background: rgba(255, 255, 255, 0.9);
     1682    }
     1683    .has-background-dark
     1684    input[type="radio"] {
     1685        background: rgba(255, 255, 255, 0.9);
     1686    }
    18551687    input[type="checkbox"]:focus {
    1856         outline: 1px solid #39414d;
    1857         background: #fff;
     1688        outline-offset: 2px;
     1689        outline: 2px dotted #39414d;
    18581690    }
    18591691    input[type="checkbox"]:after {
     
    18721704    }
    18731705    input[type="checkbox"]:checked {
    1874         background: #fff;
    18751706        color: #28303d;
    18761707    }
     
    18821713    }
    18831714    input[type="radio"]:focus {
    1884         background: #fff;
    1885         border: 4px solid #39414d;
    1886         outline: 1px dotted transparent;
     1715        outline-offset: 2px;
     1716        outline: 2px dotted #39414d;
    18871717    }
    18881718    input[type="radio"]:after {
     
    18991729    }
    19001730    input[type="radio"]:checked {
    1901         background: #fff;
    19021731        border: 4px solid #39414d;
    1903         outline: 1px dotted transparent;
    19041732    }
    19051733    input[type="radio"]:checked:after {
     
    19071735    }
    19081736    input[type="radio"]:checked:focus {
    1909         box-shadow: 0 0 0 2px #39414d;
     1737        outline-offset: 4px;
     1738        outline: 2px dotted #39414d;
    19101739    }
    19111740}
     
    20251854}
    20261855
     1856::-moz-placeholder {
     1857    opacity: 1;
     1858}
     1859
    20271860img {
    20281861    display: block;
     
    21541987 * Button
    21551988 */
     1989.site .button {
     1990    line-height: 1.5;
     1991    color: #d1e4dd;
     1992    cursor: pointer;
     1993    font-weight: 500;
     1994    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     1995    font-size: 1.25rem;
     1996    background-color: #39414d;
     1997    border-radius: 0;
     1998    border: 3px solid #39414d;
     1999    text-decoration: none;
     2000    padding: 15px 30px;
     2001}
     2002input[type="submit"] {
     2003    line-height: 1.5;
     2004    color: #d1e4dd;
     2005    cursor: pointer;
     2006    font-weight: 500;
     2007    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2008    font-size: 1.25rem;
     2009    background-color: #39414d;
     2010    border-radius: 0;
     2011    border: 3px solid #39414d;
     2012    text-decoration: none;
     2013    padding: 15px 30px;
     2014}
     2015input[type="reset"] {
     2016    line-height: 1.5;
     2017    color: #d1e4dd;
     2018    cursor: pointer;
     2019    font-weight: 500;
     2020    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2021    font-size: 1.25rem;
     2022    background-color: #39414d;
     2023    border-radius: 0;
     2024    border: 3px solid #39414d;
     2025    text-decoration: none;
     2026    padding: 15px 30px;
     2027}
     2028.wp-block-search__button {
     2029    line-height: 1.5;
     2030    color: #d1e4dd;
     2031    cursor: pointer;
     2032    font-weight: 500;
     2033    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2034    font-size: 1.25rem;
     2035    background-color: #39414d;
     2036    border-radius: 0;
     2037    border: 3px solid #39414d;
     2038    text-decoration: none;
     2039    padding: 15px 30px;
     2040}
     2041.wp-block-button .wp-block-button__link {
     2042    line-height: 1.5;
     2043    color: #d1e4dd;
     2044    cursor: pointer;
     2045    font-weight: 500;
     2046    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2047    font-size: 1.25rem;
     2048    background-color: #39414d;
     2049    border-radius: 0;
     2050    border: 3px solid #39414d;
     2051    text-decoration: none;
     2052    padding: 15px 30px;
     2053}
     2054
     2055.site .button:before, .site .button:after,
     2056input[type="submit"]:before,
     2057input[type="submit"]:after,
     2058input[type="reset"]:before,
     2059input[type="reset"]:after,
     2060.wp-block-search__button:before,
     2061.wp-block-search__button:after,
     2062.wp-block-button .wp-block-button__link:before,
     2063.wp-block-button .wp-block-button__link:after {
     2064    content: "";
     2065    display: block;
     2066    height: 0;
     2067    width: 0;
     2068}
     2069
     2070.site .button:before {
     2071    margin-bottom: -calc(1em - 0);
     2072}
     2073
     2074input[type="submit"]:before {
     2075    margin-bottom: -calc(1em - 0);
     2076}
     2077
     2078input[type="reset"]:before {
     2079    margin-bottom: -calc(1em - 0);
     2080}
     2081
     2082.wp-block-search__button:before {
     2083    margin-bottom: -calc(1em - 0);
     2084}
     2085
     2086.wp-block-button .wp-block-button__link:before {
     2087    margin-bottom: -calc(1em - 0);
     2088}
     2089
     2090.site .button:after {
     2091    margin-top: -calc(1em - 0);
     2092}
     2093
     2094input[type="submit"]:after {
     2095    margin-top: -calc(1em - 0);
     2096}
     2097
     2098input[type="reset"]:after {
     2099    margin-top: -calc(1em - 0);
     2100}
     2101
     2102.wp-block-search__button:after {
     2103    margin-top: -calc(1em - 0);
     2104}
     2105
     2106.wp-block-button .wp-block-button__link:after {
     2107    margin-top: -calc(1em - 0);
     2108}
     2109
     2110.site .button:focus,
     2111input[type="submit"]:focus,
     2112input[type="reset"]:focus,
     2113.wp-block-search__button:focus,
     2114.wp-block-button .wp-block-button__link:focus {
     2115    outline-offset: -6px;
     2116    outline: 2px dotted currentColor;
     2117}
     2118
     2119.site .button:disabled {
     2120    background-color: rgba(255, 255, 255, 0.5);
     2121    border-color: rgba(255, 255, 255, 0.5);
     2122    color: #39414d;
     2123}
     2124
     2125input[type="submit"]:disabled {
     2126    background-color: rgba(255, 255, 255, 0.5);
     2127    border-color: rgba(255, 255, 255, 0.5);
     2128    color: #39414d;
     2129}
     2130
     2131input[type="reset"]:disabled {
     2132    background-color: rgba(255, 255, 255, 0.5);
     2133    border-color: rgba(255, 255, 255, 0.5);
     2134    color: #39414d;
     2135}
     2136
     2137.wp-block-search__button:disabled {
     2138    background-color: rgba(255, 255, 255, 0.5);
     2139    border-color: rgba(255, 255, 255, 0.5);
     2140    color: #39414d;
     2141}
     2142
     2143.wp-block-button .wp-block-button__link:disabled {
     2144    background-color: rgba(255, 255, 255, 0.5);
     2145    border-color: rgba(255, 255, 255, 0.5);
     2146    color: #39414d;
     2147}
     2148
     2149.site .button:active {
     2150    color: #39414d;
     2151    background-color: #d1e4dd;
     2152}
     2153
     2154input[type="submit"]:active {
     2155    color: #39414d;
     2156    background-color: #d1e4dd;
     2157}
     2158
     2159input[type="reset"]:active {
     2160    color: #39414d;
     2161    background-color: #d1e4dd;
     2162}
     2163
     2164.wp-block-search .wp-block-search__button:active {
     2165    color: #39414d;
     2166    background-color: #d1e4dd;
     2167}
     2168
     2169.wp-block-file .wp-block-file__button:active {
     2170    color: #39414d;
     2171    background-color: #d1e4dd;
     2172}
     2173
     2174.site .button:hover {
     2175    color: #39414d;
     2176    background: transparent;
     2177}
     2178
     2179input[type="submit"]:hover {
     2180    color: #39414d;
     2181    background: transparent;
     2182}
     2183
     2184input[type="reset"]:hover {
     2185    color: #39414d;
     2186    background: transparent;
     2187}
     2188
     2189.wp-block-search .wp-block-search__button:hover {
     2190    color: #39414d;
     2191    background: transparent;
     2192}
     2193
     2194.wp-block-file .wp-block-file__button:hover {
     2195    color: #39414d;
     2196    background: transparent;
     2197}
     2198
    21562199/**
    21572200 * Block Options
    21582201 */
    2159 .wp-block-button.is-style-outline.wp-block-button__link {
     2202.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active {
     2203    color: #39414d;
     2204    background-color: #d1e4dd;
     2205}
     2206
     2207.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
    21602208    color: #39414d;
    21612209    background: transparent;
     2210}
     2211
     2212.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:focus, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:focus {
     2213    outline-offset: -7px;
     2214    outline: 2px dotted currentColor;
     2215}
     2216
     2217.wp-block-button.is-style-outline .wp-block-button__link {
     2218    background: transparent;
     2219    padding: 15px 30px;
     2220}
     2221
     2222.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
     2223    color: #39414d;
    21622224    border: 3px solid currentColor;
    2163     padding: 15px 30px;
    2164 }
    2165 .wp-block-button.is-style-outline .wp-block-button__link {
    2166     color: #39414d;
    2167     background: transparent;
    2168     border: 3px solid currentColor;
    2169     padding: 15px 30px;
    2170 }
    2171 
    2172 .wp-block-button.is-style-outline.wp-block-button__link:visited {
    2173     color: #39414d;
    2174 }
    2175 
    2176 .wp-block-button.is-style-outline .wp-block-button__link:visited {
    2177     color: #39414d;
    2178 }
    2179 
    2180 .wp-block-button.is-style-outline.wp-block-button__link:active {
     2225}
     2226
     2227.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):active {
    21812228    background-color: #39414d;
    21822229    color: #d1e4dd;
     
    21842231}
    21852232
    2186 .wp-block-button.is-style-outline.wp-block-button__link:hover {
     2233.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
    21872234    background-color: #39414d;
    21882235    color: #d1e4dd;
     
    21902237}
    21912238
    2192 .wp-block-button.is-style-outline .wp-block-button__link:active {
    2193     background-color: #39414d;
    2194     color: #d1e4dd;
    2195     border: 3px solid #39414d;
    2196 }
    2197 
    2198 .wp-block-button.is-style-outline .wp-block-button__link:hover {
    2199     background-color: #39414d;
    2200     color: #d1e4dd;
    2201     border: 3px solid #39414d;
    2202 }
    2203 
    2204 .wp-block-button.is-style-outline.wp-block-button__link:focus {
     2239.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus {
    22052240    outline-offset: -7px;
    22062241    background: transparent;
     
    22092244}
    22102245
    2211 .wp-block-button.is-style-outline.wp-block-button__link.has-focus {
     2246.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited {
     2247    color: #39414d;
     2248}
     2249
     2250.wp-block-button.is-style-outline .wp-block-button__link.has-background {
     2251    border: 3px solid currentColor;
     2252}
     2253
     2254.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
     2255    border: 3px solid currentColor;
     2256}
     2257
     2258.wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
    22122259    outline-offset: -7px;
    22132260    background: transparent;
    2214     outline: 2px dotted #39414d;
    2215     color: #39414d;
    2216 }
    2217 
    2218 .wp-block-button.is-style-outline .wp-block-button__link:focus {
     2261    outline: 2px dotted currentColor;
     2262    border: 3px solid currentColor;
     2263}
     2264
     2265.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
    22192266    outline-offset: -7px;
    22202267    background: transparent;
    2221     outline: 2px dotted #39414d;
    2222     color: #39414d;
    2223 }
    2224 
    2225 .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
     2268    outline: 2px dotted currentColor;
     2269    border: 3px solid currentColor;
     2270}
     2271
     2272.wp-block-button.is-style-outline .wp-block-button__link.has-background:focus {
    22262273    outline-offset: -7px;
    22272274    background: transparent;
    2228     outline: 2px dotted #39414d;
    2229     color: #39414d;
    2230 }
    2231 
    2232 .wp-block-button.is-style-squared .wp-block-button__link {
     2275    outline: 2px dotted currentColor;
     2276    border: 3px solid currentColor;
     2277}
     2278
     2279.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
     2280    outline-offset: -7px;
     2281    background: transparent;
     2282    outline: 2px dotted currentColor;
     2283    border: 3px solid currentColor;
     2284}
     2285
     2286.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
     2287    outline-offset: -7px;
     2288    background: transparent;
     2289    outline: 2px dotted currentColor;
     2290    border: 3px solid currentColor;
     2291}
     2292
     2293.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:focus {
     2294    outline-offset: -7px;
     2295    background: transparent;
     2296    outline: 2px dotted currentColor;
     2297    border: 3px solid currentColor;
     2298}
     2299
     2300.wp-block-button .is-style-squared .wp-block-button__link {
    22332301    border-radius: 0;
    22342302}
     
    26782746
    26792747.wp-block-file .wp-block-file__button {
     2748    line-height: 1.5;
     2749    color: #d1e4dd;
     2750    cursor: pointer;
     2751    font-weight: 500;
     2752    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2753    font-size: 1.25rem;
     2754    background-color: #39414d;
     2755    border-radius: 0;
     2756    border: 3px solid #39414d;
     2757    text-decoration: none;
     2758    padding: 15px 30px;
    26802759    display: inline-block;
     2760}
     2761
     2762.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
     2763    content: "";
     2764    display: block;
     2765    height: 0;
     2766    width: 0;
     2767}
     2768
     2769.wp-block-file .wp-block-file__button:before {
     2770    margin-bottom: -calc(1em - 0);
     2771}
     2772
     2773.wp-block-file .wp-block-file__button:after {
     2774    margin-top: -calc(1em - 0);
     2775}
     2776
     2777.wp-block-file .wp-block-file__button:focus {
     2778    outline-offset: -6px;
     2779    outline: 2px dotted currentColor;
     2780}
     2781
     2782.wp-block-file .wp-block-file__button:disabled {
     2783    background-color: rgba(255, 255, 255, 0.5);
     2784    border-color: rgba(255, 255, 255, 0.5);
     2785    color: #39414d;
    26812786}
    26822787
     
    34553560.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
    34563561    background: #d1e4dd;
    3457     box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    34583562    margin: 0;
    34593563    padding: 0;
    34603564    position: absolute;
    34613565    top: 100%;
     3566    border: 1px solid #28303d;
     3567}
     3568
     3569.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before {
     3570    content: "";
     3571    display: block;
     3572    position: absolute;
     3573    width: 0;
     3574    top: -10px;
     3575    left: 25px;
     3576    border-style: solid;
     3577    border-color: #28303d transparent;
     3578    border-width: 0 7px 10px 7px;
     3579}
     3580
     3581.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
     3582    content: "";
     3583    display: block;
     3584    position: absolute;
     3585    width: 0;
     3586    top: -10px;
     3587    left: 25px;
     3588    border-style: solid;
     3589    border-color: #28303d transparent;
     3590    border-width: 0 7px 10px 7px;
     3591}
     3592
     3593.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
     3594    top: -9px;
     3595    border-color: #d1e4dd transparent;
    34623596}
    34633597
     
    34763610.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
    34773611    color: #28303d;
     3612}
     3613
     3614.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
     3615    text-decoration: underline;
     3616    text-decoration-style: dotted;
    34783617}
    34793618
     
    53135452}
    53145453
     5454.archive-description {
     5455    margin-top: 30px;
     5456    font-size: 2.25rem;
     5457    line-height: 1.3;
     5458}
     5459
     5460@media only screen and (min-width: 652px){
     5461    .archive-description{
     5462    font-size: 2.5rem;
     5463    }
     5464}
     5465
    53155466.error404 main p {
    53165467    font-size: 1.5rem;
     
    59316082        z-index: 88888;
    59326083    }
     6084    .primary-navigation > div > .menu-wrapper > li > .sub-menu:before {
     6085        content: "";
     6086        display: block;
     6087        position: absolute;
     6088        width: 0;
     6089        top: -10px;
     6090        left: 25px;
     6091        border-style: solid;
     6092        border-color: #28303d transparent;
     6093        border-width: 0 7px 10px 7px;
     6094    }
     6095    .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
     6096        content: "";
     6097        display: block;
     6098        position: absolute;
     6099        width: 0;
     6100        top: -10px;
     6101        left: 25px;
     6102        border-style: solid;
     6103        border-color: #28303d transparent;
     6104        border-width: 0 7px 10px 7px;
     6105    }
     6106    .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
     6107        top: -9px;
     6108        border-color: #d1e4dd transparent;
     6109    }
    59336110    .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
    59346111        background: #d1e4dd;
    59356112    }
    5936 }
    5937 
    5938 .primary-navigation > div > .menu-wrapper > li > .sub-menu .sub-menu {
    5939     width: 100%;
    59406113}
    59416114
     
    60236196    list-style: none;
    60246197    margin-left: 13px;
     6198    border: 1px solid #28303d;
     6199}
     6200
     6201.primary-navigation .sub-menu .sub-menu {
     6202    border: none;
    60256203}
    60266204
     
    68317009    color: #21759b;
    68327010}
     7011
     7012.is-IE .navigation .nav-links {
     7013    display: block;
     7014}
     7015
     7016.is-IE .post-thumbnail .wp-post-image {
     7017    min-width: auto;
     7018}
    68337019/*# sourceMappingURL=ie.css.map */
  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

    r49320 r49330  
    6666    --global--color-white: #fff;
    6767    --global--color-white-50: rgba(255, 255, 255, 0.5);
    68     /* white 50% opacity used in form fields.*/
     68    --global--color-white-90: rgba(255, 255, 255, 0.9);
    6969    --global--color-primary: var(--global--color-dark-gray);
    7070    /* Body text color, site title, footer text color. */
     
    153153    --primary-nav--color-text: var(--global--color-primary);
    154154    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     155    --primary-nav--border-color: var(--global--color-primary);
    155156    /* Pagination */
    156157    --pagination--color-text: var(--global--color-primary);
     
    209210}
    210211
    211 /* Button extends */
    212 .wp-block-button__link, .wp-block-file .wp-block-file__button, .wp-block-search .wp-block-search__button {
    213     line-height: var(--button--line-height);
    214     color: var(--button--color-text);
    215     cursor: pointer;
    216     font-weight: var(--button--font-weight);
    217     font-family: var(--button--font-family);
    218     font-size: var(--button--font-size);
    219     background-color: var(--button--color-background);
    220     border-radius: var(--button--border-radius);
    221     border: var(--button--border-width) solid var(--button--color-background);
    222     text-decoration: none;
    223     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    224 }
    225 
    226 .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .wp-block-search .wp-block-search__button:before, .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .wp-block-search .wp-block-search__button:after {
    227     content: "";
    228     display: block;
    229     height: 0;
    230     width: 0;
    231 }
    232 
    233 .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .wp-block-search .wp-block-search__button:before {
    234     margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    235 }
    236 
    237 .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .wp-block-search .wp-block-search__button:after {
    238     margin-top: -calc(.5em * var(--button--line-height) + -.39);
    239 }
    240 
    241 .wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .wp-block-search .wp-block-search__button:active {
    242     color: var(--button--color-text-active);
    243     background-color: var(--button--color-background-active);
    244 }
    245 
    246 .wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .wp-block-search .wp-block-search__button:hover {
    247     color: var(--button--color-text-hover);
    248     background: transparent;
    249 }
    250 
    251 .wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .wp-block-search .wp-block-search__button:focus, .has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .wp-block-search .has-focus.wp-block-search__button {
    252     outline-offset: -4px;
    253     outline: 2px dotted currentColor;
    254 }
    255 
    256 .wp-block-button__link:disabled, .wp-block-file .wp-block-file__button:disabled, .wp-block-search .wp-block-search__button:disabled {
    257     background-color: var(--global--color-white-50);
    258     border-color: var(--global--color-white-50);
    259     color: var(--button--color-text-active);
    260 }
    261 
    262212/**
    263213 * Repsonsive Styles
     
    466416}
    467417
    468 .wp-block-button__link.is-style-outline,
    469 .is-style-outline .wp-block-button__link {
     418.wp-block-button__link {
     419    line-height: var(--button--line-height);
     420    color: var(--button--color-text);
     421    cursor: pointer;
     422    font-weight: var(--button--font-weight);
     423    font-family: var(--button--font-family);
     424    font-size: var(--button--font-size);
     425    background-color: var(--button--color-background);
     426    border-radius: var(--button--border-radius);
     427    border: var(--button--border-width) solid var(--button--color-background);
     428    text-decoration: none;
     429    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     430}
     431
     432.wp-block-button__link:before, .wp-block-button__link:after {
     433    content: "";
     434    display: block;
     435    height: 0;
     436    width: 0;
     437}
     438
     439.wp-block-button__link:before {
     440    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
     441}
     442
     443.wp-block-button__link:after {
     444    margin-top: -calc(.5em * var(--button--line-height) + -.39);
     445}
     446
     447.wp-block-button__link:focus {
     448    outline-offset: -6px;
     449    outline: 2px dotted currentColor;
     450}
     451
     452.wp-block-button__link:disabled {
     453    background-color: var(--global--color-white-50);
     454    border-color: var(--global--color-white-50);
     455    color: var(--button--color-text-active);
     456}
     457
     458/**
     459 * Block Options
     460 */
     461.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active {
     462    color: var(--button--color-text-active);
     463    background-color: var(--button--color-background-active);
     464}
     465
     466.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
     467    color: var(--button--color-text-hover);
     468    background: transparent;
     469}
     470
     471.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover {
     472    outline-offset: -7px;
     473    outline: 2px dotted currentColor;
     474}
     475
     476.wp-block-button.is-style-outline .wp-block-button__link {
    470477    color: var(--button--color-background);
    471478    background: transparent;
    472479    border: var(--button--border-width) solid currentColor;
    473 }
    474 
    475 .wp-block-button__link.is-style-outline:visited,
    476 .is-style-outline .wp-block-button__link:visited {
     480    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     481}
     482
     483.wp-block-button.is-style-outline .wp-block-button__link:visited {
    477484    color: var(--button--color-background);
    478485}
    479486
    480 .wp-block-button__link.is-style-outline:active, .wp-block-button__link.is-style-outline:hover,
    481 .is-style-outline .wp-block-button__link:active,
    482 .is-style-outline .wp-block-button__link:hover {
     487.wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:hover {
    483488    background-color: var(--button--color-background);
    484489    color: var(--button--color-text);
     
    486491}
    487492
    488 .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus,
    489 .is-style-outline .wp-block-button__link:focus,
    490 .is-style-outline .wp-block-button__link.has-focus {
     493.wp-block-button.is-style-outline .wp-block-button__link.has-background {
     494    background: transparent !important;
     495}
     496
     497.wp-block-button.is-style-outline .wp-block-button__link.has-background:active, .wp-block-button.is-style-outline .wp-block-button__link.has-background:hover, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
     498    color: var(--button--color-background);
    491499    outline-offset: -7px;
    492500    background: transparent;
    493 }
    494 
    495 .wp-block-button__link.is-style-squared,
    496 .is-style-squared .wp-block-button__link {
     501    outline: 2px dotted currentColor;
     502    border: var(--button--border-width) solid currentColor;
     503}
     504
     505.wp-block-button.is-style-squared {
    497506    border-radius: 0;
    498507}
     
    661670
    662671.wp-block-file .wp-block-file__button {
     672    line-height: var(--button--line-height);
     673    color: var(--button--color-text);
     674    cursor: pointer;
     675    font-weight: var(--button--font-weight);
     676    font-family: var(--button--font-family);
     677    font-size: var(--button--font-size);
     678    background-color: var(--button--color-background);
     679    border-radius: var(--button--border-radius);
     680    border: var(--button--border-width) solid var(--button--color-background);
     681    text-decoration: none;
     682    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    663683    display: inline-block;
     684}
     685
     686.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
     687    content: "";
     688    display: block;
     689    height: 0;
     690    width: 0;
     691}
     692
     693.wp-block-file .wp-block-file__button:before {
     694    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
     695}
     696
     697.wp-block-file .wp-block-file__button:after {
     698    margin-top: -calc(.5em * var(--button--line-height) + -.39);
     699}
     700
     701.wp-block-file .wp-block-file__button:focus {
     702    outline-offset: -6px;
     703    outline: 2px dotted currentColor;
     704}
     705
     706.wp-block-file .wp-block-file__button:disabled {
     707    background-color: var(--global--color-white-50);
     708    border-color: var(--global--color-white-50);
     709    color: var(--button--color-text-active);
     710}
     711
     712.wp-block-file .wp-block-file__button:hover {
     713    color: var(--button--color-text-hover);
     714    background: transparent;
    664715}
    665716
     
    814865}
    815866
     867[data-type="core/html"] textarea {
     868    color: var(--global--color-dark-gray);
     869    border-radius: 0;
     870    padding: var(--global--spacing-unit);
     871}
     872
    816873/* Center image block by default in the editor */
    817874.wp-block-image > div {
     
    14451502
    14461503.wp-block-search .wp-block-search__button {
     1504    line-height: var(--button--line-height);
     1505    color: var(--button--color-text);
     1506    cursor: pointer;
     1507    font-weight: var(--button--font-weight);
     1508    font-family: var(--button--font-family);
     1509    font-size: var(--button--font-size);
     1510    background-color: var(--button--color-background);
     1511    border-radius: var(--button--border-radius);
     1512    border: var(--button--border-width) solid var(--button--color-background);
     1513    text-decoration: none;
     1514    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    14471515    box-shadow: none;
    14481516    margin-left: 0;
    14491517    background-color: transparent;
    14501518    color: var(--button--color-text-hover);
     1519}
     1520
     1521.wp-block-search .wp-block-search__button:before, .wp-block-search .wp-block-search__button:after {
     1522    content: "";
     1523    display: block;
     1524    height: 0;
     1525    width: 0;
     1526}
     1527
     1528.wp-block-search .wp-block-search__button:before {
     1529    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
     1530}
     1531
     1532.wp-block-search .wp-block-search__button:after {
     1533    margin-top: -calc(.5em * var(--button--line-height) + -.39);
     1534}
     1535
     1536.wp-block-search .wp-block-search__button:focus {
     1537    outline-offset: -6px;
     1538    outline: 2px dotted currentColor;
     1539}
     1540
     1541.wp-block-search .wp-block-search__button:disabled {
     1542    background-color: var(--global--color-white-50);
     1543    border-color: var(--global--color-white-50);
     1544    color: var(--button--color-text-active);
    14511545}
    14521546
     
    16251719pre.wp-block-verse {
    16261720    padding: 0;
     1721    color: currentColor;
    16271722}
    16281723
  • trunk/src/wp-content/themes/twentytwentyone/inc/template-functions.php

    r49320 r49330  
    473473}
    474474add_filter( 'the_password_form', 'twenty_twenty_one_password_form' );
     475
     476/**
     477 * Filters the list of attachment image attributes.
     478 *
     479 * @since 1.0.0
     480 *
     481 * @param array        $attr       Array of attribute values for the image markup, keyed by attribute name.
     482 *                                 See wp_get_attachment_image().
     483 * @param WP_Post      $attachment Image attachment post.
     484 * @param string|array $size       Requested size. Image size or array of width and height values
     485 *                                 (in that order). Default 'thumbnail'.
     486 *
     487 * @return array
     488 */
     489function twenty_twenty_one_get_attachment_image_attributes( $attr, $attachment, $size ) {
     490    $width  = false;
     491    $height = false;
     492
     493    if ( is_array( $size ) ) {
     494        $width  = (int) $size[0];
     495        $height = (int) $size[1];
     496    } elseif ( $attachment && is_object( $attachment ) && $attachment->ID ) {
     497        $meta = wp_get_attachment_metadata( $attachment->ID );
     498        if ( $meta['width'] && $meta['height'] ) {
     499            $width  = (int) $meta['width'];
     500            $height = (int) $meta['height'];
     501        }
     502    }
     503
     504    if ( $width && $height ) {
     505
     506        // Add style.
     507        $attr['style'] = isset( $attr['style'] ) ? $attr['style'] : '';
     508        $attr['style'] = 'width:100%;height:' . round( 100 * $meta['height'] / $meta['width'], 2 ) . '%;' . $attr['style'];
     509    }
     510
     511    return $attr;
     512}
     513add_filter( 'wp_get_attachment_image_attributes', 'twenty_twenty_one_get_attachment_image_attributes', 10, 3 );
  • trunk/src/wp-content/themes/twentytwentyone/package-lock.json

    r49216 r49330  
    725725                    "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
    726726                    "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
     727                    "dev": true
     728                },
     729                "prettier": {
     730                    "version": "npm:wp-prettier@2.0.5",
     731                    "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz",
     732                    "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==",
    727733                    "dev": true
    728734                },
     
    50275033            "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
    50285034            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
    5029             "dev": true
    5030         },
    5031         "prettier": {
    5032             "version": "npm:wp-prettier@2.0.5",
    5033             "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz",
    5034             "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==",
    50355035            "dev": true
    50365036        },
  • trunk/src/wp-content/themes/twentytwentyone/style-rtl.css

    r49320 r49330  
    2525 *
    2626 * TOOLS
    27  * Extends..............Global extends.
    2827 * Functions............Global functions.
    2928 * Mixins...............Global mixins.
     
    158157    --global--color-white: #fff;
    159158    --global--color-white-50: rgba(255, 255, 255, 0.5);
    160     /* white 50% opacity used in form fields.*/
     159    --global--color-white-90: rgba(255, 255, 255, 0.9);
    161160    --global--color-primary: var(--global--color-dark-gray);
    162161    /* Body text color, site title, footer text color. */
     
    245244    --primary-nav--color-text: var(--global--color-primary);
    246245    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     246    --primary-nav--border-color: var(--global--color-primary);
    247247    /* Pagination */
    248248    --pagination--color-text: var(--global--color-primary);
     
    301301}
    302302
    303 /* Button extends */
    304 .site .button,
    305 input[type="submit"],
    306 input[type="reset"],
    307 .wp-block-search__button,
    308 .wp-block-button .wp-block-button__link, .wp-block-file .wp-block-file__button {
    309     line-height: var(--button--line-height);
    310     color: var(--button--color-text);
    311     cursor: pointer;
    312     font-weight: var(--button--font-weight);
    313     font-family: var(--button--font-family);
    314     font-size: var(--button--font-size);
    315     background-color: var(--button--color-background);
    316     border-radius: var(--button--border-radius);
    317     border: var(--button--border-width) solid var(--button--color-background);
    318     text-decoration: none;
    319     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    320 }
    321 
    322 .site .button:before,
    323 input[type="submit"]:before,
    324 input[type="reset"]:before,
    325 .wp-block-search__button:before,
    326 .wp-block-button .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .site .button:after,
    327 input[type="submit"]:after,
    328 input[type="reset"]:after,
    329 .wp-block-search__button:after,
    330 .wp-block-button .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after {
    331     content: "";
    332     display: block;
    333     height: 0;
    334     width: 0;
    335 }
    336 
    337 .site .button:before,
    338 input[type="submit"]:before,
    339 input[type="reset"]:before,
    340 .wp-block-search__button:before,
    341 .wp-block-button .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before {
    342     margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    343 }
    344 
    345 .site .button:after,
    346 input[type="submit"]:after,
    347 input[type="reset"]:after,
    348 .wp-block-search__button:after,
    349 .wp-block-button .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after {
    350     margin-top: -calc(.5em * var(--button--line-height) + -.39);
    351 }
    352 
    353 .site .button:active,
    354 input:active[type="submit"],
    355 input:active[type="reset"],
    356 .wp-block-search__button:active,
    357 .wp-block-button .wp-block-button__link:active, .wp-block-file .wp-block-file__button:active {
    358     color: var(--button--color-text-active);
    359     background-color: var(--button--color-background-active);
    360 }
    361 
    362 .site .button:hover,
    363 input:hover[type="submit"],
    364 input:hover[type="reset"],
    365 .wp-block-search__button:hover,
    366 .wp-block-button .wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover {
    367     color: var(--button--color-text-hover);
    368     background: transparent;
    369 }
    370 
    371 .site .button:focus,
    372 input:focus[type="submit"],
    373 input:focus[type="reset"],
    374 .wp-block-search__button:focus,
    375 .wp-block-button .wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .site .has-focus.button,
    376 input.has-focus[type="submit"],
    377 input.has-focus[type="reset"],
    378 .has-focus.wp-block-search__button,
    379 .wp-block-button .has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button {
    380     outline-offset: -4px;
    381     outline: 2px dotted currentColor;
    382 }
    383 
    384 .site .button:disabled,
    385 input:disabled[type="submit"],
    386 input:disabled[type="reset"],
    387 .wp-block-search__button:disabled,
    388 .wp-block-button .wp-block-button__link:disabled, .wp-block-file .wp-block-file__button:disabled {
    389     background-color: var(--global--color-white-50);
    390     border-color: var(--global--color-white-50);
    391     color: var(--button--color-text-active);
    392 }
    393 
    394303/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    395304/* Document
     
    11581067    border-radius: var(--form--border-radius);
    11591068    color: var(--form--color-text);
    1160     background: var(--global--color-white-50);
    11611069    line-height: var(--global--line-height-body);
    11621070    padding: var(--form--spacing-unit);
     1071    margin: 0 2px;
    11631072}
    11641073
     
    11791088.site textarea:focus {
    11801089    color: var(--form--color-text);
    1181     outline: 1px solid var(--form--border-color);
    1182     background: var(--global--color-white);
     1090    outline-offset: 2px;
     1091    outline: 2px dotted var(--form--border-color);
    11831092}
    11841093
     
    12011110}
    12021111
     1112.has-background-dark input[type="text"], .has-background-dark
     1113input[type="email"], .has-background-dark
     1114input[type="url"], .has-background-dark
     1115input[type="password"], .has-background-dark
     1116input[type="search"], .has-background-dark
     1117input[type="number"], .has-background-dark
     1118input[type="tel"], .has-background-dark
     1119input[type="date"], .has-background-dark
     1120input[type="month"], .has-background-dark
     1121input[type="week"], .has-background-dark
     1122input[type="time"], .has-background-dark
     1123input[type="datetime"], .has-background-dark
     1124input[type="datetime-local"], .has-background-dark
     1125input[type="color"], .has-background-dark
     1126.site textarea {
     1127    background: var(--global--color-white-90);
     1128}
     1129
    12031130input[type="search"]:focus {
    1204     outline-offset: 0;
    1205 }
    1206 
    1207 input[type="date"] {
    1208     background: var(--global--color-white);
     1131    outline-offset: -7px;
     1132}
     1133
     1134.has-background-dark input[type="search"]:focus {
     1135    outline-color: var(--global--color-background);
    12091136}
    12101137
    12111138input[type="color"] {
    1212     background: var(--global--color-white);
    12131139    padding: calc(var(--form--spacing-unit) / 2);
    12141140    height: calc(4 * var(--form--spacing-unit));
     
    12351161
    12361162select:focus {
    1237     outline: 1px solid var(--form--border-color);
     1163    outline-offset: 2px;
     1164    outline: 2px dotted var(--form--border-color);
     1165}
     1166
     1167.has-background-dark select {
     1168    /* stylelint-disable */
     1169    background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
     1170    /* stylelint-enable */
     1171    background-position: left var(--form--spacing-unit) top 60%;
    12381172}
    12391173
     
    12611195        width: 25px;
    12621196        height: 25px;
    1263         background: var(--global--color-white-50);
    12641197        border: var(--form--border-width) solid var(--form--border-color);
    1265         outline-offset: 0;
     1198        background: var(--global--color-white);
    12661199    }
    12671200    input[type="checkbox"]:disabled,
     
    12691202        opacity: 0.7;
    12701203    }
     1204    .has-background-dark input[type="checkbox"], .has-background-dark
     1205    input[type="radio"] {
     1206        background: var(--global--color-white-90);
     1207    }
    12711208    input[type="checkbox"]:focus {
    1272         outline: 1px solid var(--form--border-color);
    1273         background: var(--global--color-white);
     1209        outline-offset: 2px;
     1210        outline: 2px dotted var(--form--border-color);
    12741211    }
    12751212    input[type="checkbox"]:after {
     
    12881225    }
    12891226    input[type="checkbox"]:checked {
    1290         background: var(--global--color-white);
    12911227        color: var(--form--color-text);
    12921228    }
     
    12981234    }
    12991235    input[type="radio"]:focus {
    1300         background: var(--global--color-white);
    1301         border: 4px solid var(--form--border-color);
    1302         outline: 1px dotted transparent;
     1236        outline-offset: 2px;
     1237        outline: 2px dotted var(--form--border-color);
    13031238    }
    13041239    input[type="radio"]:after {
     
    13151250    }
    13161251    input[type="radio"]:checked {
    1317         background: var(--global--color-white);
    13181252        border: 4px solid var(--form--border-color);
    1319         outline: 1px dotted transparent;
    13201253    }
    13211254    input[type="radio"]:checked:after {
     
    13231256    }
    13241257    input[type="radio"]:checked:focus {
    1325         box-shadow: 0 0 0 2px var(--form--border-color);
     1258        outline-offset: 4px;
     1259        outline: 2px dotted var(--form--border-color);
    13261260    }
    13271261}
     
    14301364}
    14311365
     1366::-moz-placeholder {
     1367    opacity: 1;
     1368}
     1369
    14321370img {
    14331371    display: block;
     
    15421480 * Button
    15431481 */
     1482.site .button,
     1483input[type="submit"],
     1484input[type="reset"],
     1485.wp-block-search__button,
     1486.wp-block-button .wp-block-button__link {
     1487    line-height: var(--button--line-height);
     1488    color: var(--button--color-text);
     1489    cursor: pointer;
     1490    font-weight: var(--button--font-weight);
     1491    font-family: var(--button--font-family);
     1492    font-size: var(--button--font-size);
     1493    background-color: var(--button--color-background);
     1494    border-radius: var(--button--border-radius);
     1495    border: var(--button--border-width) solid var(--button--color-background);
     1496    text-decoration: none;
     1497    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     1498}
     1499
     1500.site .button:before, .site .button:after,
     1501input[type="submit"]:before,
     1502input[type="submit"]:after,
     1503input[type="reset"]:before,
     1504input[type="reset"]:after,
     1505.wp-block-search__button:before,
     1506.wp-block-search__button:after,
     1507.wp-block-button .wp-block-button__link:before,
     1508.wp-block-button .wp-block-button__link:after {
     1509    content: "";
     1510    display: block;
     1511    height: 0;
     1512    width: 0;
     1513}
     1514
     1515.site .button:before,
     1516input[type="submit"]:before,
     1517input[type="reset"]:before,
     1518.wp-block-search__button:before,
     1519.wp-block-button .wp-block-button__link:before {
     1520    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
     1521}
     1522
     1523.site .button:after,
     1524input[type="submit"]:after,
     1525input[type="reset"]:after,
     1526.wp-block-search__button:after,
     1527.wp-block-button .wp-block-button__link:after {
     1528    margin-top: -calc(.5em * var(--button--line-height) + -.39);
     1529}
     1530
     1531.site .button:focus,
     1532input[type="submit"]:focus,
     1533input[type="reset"]:focus,
     1534.wp-block-search__button:focus,
     1535.wp-block-button .wp-block-button__link:focus {
     1536    outline-offset: -6px;
     1537    outline: 2px dotted currentColor;
     1538}
     1539
     1540.site .button:disabled,
     1541input[type="submit"]:disabled,
     1542input[type="reset"]:disabled,
     1543.wp-block-search__button:disabled,
     1544.wp-block-button .wp-block-button__link:disabled {
     1545    background-color: var(--global--color-white-50);
     1546    border-color: var(--global--color-white-50);
     1547    color: var(--button--color-text-active);
     1548}
     1549
     1550.site .button:active,
     1551input[type="submit"]:active,
     1552input[type="reset"]:active,
     1553.wp-block-search .wp-block-search__button:active,
     1554.wp-block-file .wp-block-file__button:active {
     1555    color: var(--button--color-text-active);
     1556    background-color: var(--button--color-background-active);
     1557}
     1558
     1559.site .button:hover,
     1560input[type="submit"]:hover,
     1561input[type="reset"]:hover,
     1562.wp-block-search .wp-block-search__button:hover,
     1563.wp-block-file .wp-block-file__button:hover {
     1564    color: var(--button--color-text-hover);
     1565    background: transparent;
     1566}
     1567
    15441568/**
    15451569 * Block Options
    15461570 */
    1547 .wp-block-button.is-style-outline.wp-block-button__link,
     1571.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active {
     1572    color: var(--button--color-text-active);
     1573    background-color: var(--button--color-background-active);
     1574}
     1575
     1576.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
     1577    color: var(--button--color-text-hover);
     1578    background: transparent;
     1579}
     1580
     1581.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:focus, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:focus {
     1582    outline-offset: -7px;
     1583    outline: 2px dotted currentColor;
     1584}
     1585
    15481586.wp-block-button.is-style-outline .wp-block-button__link {
     1587    background: transparent;
     1588    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     1589}
     1590
     1591.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
    15491592    color: var(--button--color-background);
    1550     background: transparent;
    15511593    border: var(--button--border-width) solid currentColor;
    1552     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    1553 }
    1554 
    1555 .wp-block-button.is-style-outline.wp-block-button__link:visited,
    1556 .wp-block-button.is-style-outline .wp-block-button__link:visited {
    1557     color: var(--button--color-background);
    1558 }
    1559 
    1560 .wp-block-button.is-style-outline.wp-block-button__link:active, .wp-block-button.is-style-outline.wp-block-button__link:hover,
    1561 .wp-block-button.is-style-outline .wp-block-button__link:active,
    1562 .wp-block-button.is-style-outline .wp-block-button__link:hover {
     1594}
     1595
     1596.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):active, .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
    15631597    background-color: var(--button--color-background);
    15641598    color: var(--button--color-text);
     
    15661600}
    15671601
    1568 .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
    1569 .wp-block-button.is-style-outline .wp-block-button__link:focus,
    1570 .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
     1602.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus {
    15711603    outline-offset: -7px;
    15721604    background: transparent;
     
    15751607}
    15761608
    1577 .wp-block-button.is-style-squared .wp-block-button__link {
     1609.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited {
     1610    color: var(--button--color-background);
     1611}
     1612
     1613.wp-block-button.is-style-outline .wp-block-button__link.has-background, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
     1614    border: var(--button--border-width) solid currentColor;
     1615}
     1616
     1617.wp-block-button.is-style-outline .wp-block-button__link.has-background:active, .wp-block-button.is-style-outline .wp-block-button__link.has-background:hover, .wp-block-button.is-style-outline .wp-block-button__link.has-background:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:focus {
     1618    outline-offset: -7px;
     1619    background: transparent;
     1620    outline: 2px dotted currentColor;
     1621    border: var(--button--border-width) solid currentColor;
     1622}
     1623
     1624.wp-block-button .is-style-squared .wp-block-button__link {
    15781625    border-radius: 0;
    15791626}
     
    18231870
    18241871.wp-block-file .wp-block-file__button {
     1872    line-height: var(--button--line-height);
     1873    color: var(--button--color-text);
     1874    cursor: pointer;
     1875    font-weight: var(--button--font-weight);
     1876    font-family: var(--button--font-family);
     1877    font-size: var(--button--font-size);
     1878    background-color: var(--button--color-background);
     1879    border-radius: var(--button--border-radius);
     1880    border: var(--button--border-width) solid var(--button--color-background);
     1881    text-decoration: none;
     1882    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    18251883    display: inline-block;
     1884}
     1885
     1886.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
     1887    content: "";
     1888    display: block;
     1889    height: 0;
     1890    width: 0;
     1891}
     1892
     1893.wp-block-file .wp-block-file__button:before {
     1894    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
     1895}
     1896
     1897.wp-block-file .wp-block-file__button:after {
     1898    margin-top: -calc(.5em * var(--button--line-height) + -.39);
     1899}
     1900
     1901.wp-block-file .wp-block-file__button:focus {
     1902    outline-offset: -6px;
     1903    outline: 2px dotted currentColor;
     1904}
     1905
     1906.wp-block-file .wp-block-file__button:disabled {
     1907    background-color: var(--global--color-white-50);
     1908    border-color: var(--global--color-white-50);
     1909    color: var(--button--color-text-active);
    18261910}
    18271911
     
    23972481.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
    23982482    background: var(--global--color-background);
    2399     box-shadow: var(--global--elevation);
    24002483    margin: 0;
    24012484    padding: 0;
    24022485    position: absolute;
    24032486    top: 100%;
     2487    border: 1px solid var(--primary-nav--border-color);
     2488}
     2489
     2490.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before, .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
     2491    content: "";
     2492    display: block;
     2493    position: absolute;
     2494    width: 0;
     2495    top: -10px;
     2496    right: var(--global--spacing-horizontal);
     2497    border-style: solid;
     2498    border-color: var(--primary-nav--border-color) transparent;
     2499    border-width: 0 7px 10px 7px;
     2500}
     2501
     2502.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
     2503    top: -9px;
     2504    border-color: var(--global--color-background) transparent;
    24042505}
    24052506
     
    24142515.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
    24152516    color: var(--primary-nav--color-link-hover);
     2517}
     2518
     2519.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
     2520    text-decoration: underline;
     2521    text-decoration-style: dotted;
    24162522}
    24172523
     
    37303836}
    37313837
     3838.archive-description {
     3839    margin-top: var(--global--spacing-vertical);
     3840    font-size: var(--global--font-size-xl);
     3841    line-height: var(--global--line-height-heading);
     3842}
     3843
    37323844.error404 main p {
    37333845    font-size: var(--global--font-size-lg);
     
    42844396        z-index: 88888;
    42854397    }
     4398    .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
     4399        content: "";
     4400        display: block;
     4401        position: absolute;
     4402        width: 0;
     4403        top: -10px;
     4404        right: var(--global--spacing-horizontal);
     4405        border-style: solid;
     4406        border-color: var(--primary-nav--border-color) transparent;
     4407        border-width: 0 7px 10px 7px;
     4408    }
     4409    .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
     4410        top: -9px;
     4411        border-color: var(--global--color-background) transparent;
     4412    }
    42864413    .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
    42874414        background: var(--global--color-background);
    42884415    }
    4289 }
    4290 
    4291 .primary-navigation > div > .menu-wrapper > li > .sub-menu .sub-menu {
    4292     width: 100%;
    42934416}
    42944417
     
    43684491    list-style: none;
    43694492    margin-right: var(--primary-nav--padding);
     4493    border: 1px solid var(--primary-nav--border-color);
     4494}
     4495
     4496.primary-navigation .sub-menu .sub-menu {
     4497    border: none;
    43704498}
    43714499
     
    50685196    color: #21759b;
    50695197}
     5198
     5199.is-IE .navigation .nav-links {
     5200    display: block;
     5201}
     5202
     5203.is-IE .post-thumbnail .wp-post-image {
     5204    min-width: auto;
     5205}
  • trunk/src/wp-content/themes/twentytwentyone/style.css

    r49320 r49330  
    2525 *
    2626 * TOOLS
    27  * Extends..............Global extends.
    2827 * Functions............Global functions.
    2928 * Mixins...............Global mixins.
     
    158157    --global--color-white: #fff;
    159158    --global--color-white-50: rgba(255, 255, 255, 0.5);
    160     /* white 50% opacity used in form fields.*/
     159    --global--color-white-90: rgba(255, 255, 255, 0.9);
    161160    --global--color-primary: var(--global--color-dark-gray);
    162161    /* Body text color, site title, footer text color. */
     
    245244    --primary-nav--color-text: var(--global--color-primary);
    246245    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     246    --primary-nav--border-color: var(--global--color-primary);
    247247    /* Pagination */
    248248    --pagination--color-text: var(--global--color-primary);
     
    301301}
    302302
    303 /* Button extends */
    304 .site .button,
    305 input[type="submit"],
    306 input[type="reset"],
    307 .wp-block-search__button,
    308 .wp-block-button .wp-block-button__link, .wp-block-file .wp-block-file__button {
    309     line-height: var(--button--line-height);
    310     color: var(--button--color-text);
    311     cursor: pointer;
    312     font-weight: var(--button--font-weight);
    313     font-family: var(--button--font-family);
    314     font-size: var(--button--font-size);
    315     background-color: var(--button--color-background);
    316     border-radius: var(--button--border-radius);
    317     border: var(--button--border-width) solid var(--button--color-background);
    318     text-decoration: none;
    319     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    320 }
    321 
    322 .site .button:before,
    323 input[type="submit"]:before,
    324 input[type="reset"]:before,
    325 .wp-block-search__button:before,
    326 .wp-block-button .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .site .button:after,
    327 input[type="submit"]:after,
    328 input[type="reset"]:after,
    329 .wp-block-search__button:after,
    330 .wp-block-button .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after {
    331     content: "";
    332     display: block;
    333     height: 0;
    334     width: 0;
    335 }
    336 
    337 .site .button:before,
    338 input[type="submit"]:before,
    339 input[type="reset"]:before,
    340 .wp-block-search__button:before,
    341 .wp-block-button .wp-block-button__link:before, .wp-block-file .wp-block-file__button:before {
    342     margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    343 }
    344 
    345 .site .button:after,
    346 input[type="submit"]:after,
    347 input[type="reset"]:after,
    348 .wp-block-search__button:after,
    349 .wp-block-button .wp-block-button__link:after, .wp-block-file .wp-block-file__button:after {
    350     margin-top: -calc(.5em * var(--button--line-height) + -.39);
    351 }
    352 
    353 .site .button:active,
    354 input:active[type="submit"],
    355 input:active[type="reset"],
    356 .wp-block-search__button:active,
    357 .wp-block-button .wp-block-button__link:active, .wp-block-file .wp-block-file__button:active {
    358     color: var(--button--color-text-active);
    359     background-color: var(--button--color-background-active);
    360 }
    361 
    362 .site .button:hover,
    363 input:hover[type="submit"],
    364 input:hover[type="reset"],
    365 .wp-block-search__button:hover,
    366 .wp-block-button .wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover {
    367     color: var(--button--color-text-hover);
    368     background: transparent;
    369 }
    370 
    371 .site .button:focus,
    372 input:focus[type="submit"],
    373 input:focus[type="reset"],
    374 .wp-block-search__button:focus,
    375 .wp-block-button .wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .site .has-focus.button,
    376 input.has-focus[type="submit"],
    377 input.has-focus[type="reset"],
    378 .has-focus.wp-block-search__button,
    379 .wp-block-button .has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button {
    380     outline-offset: -4px;
    381     outline: 2px dotted currentColor;
    382 }
    383 
    384 .site .button:disabled,
    385 input:disabled[type="submit"],
    386 input:disabled[type="reset"],
    387 .wp-block-search__button:disabled,
    388 .wp-block-button .wp-block-button__link:disabled, .wp-block-file .wp-block-file__button:disabled {
    389     background-color: var(--global--color-white-50);
    390     border-color: var(--global--color-white-50);
    391     color: var(--button--color-text-active);
    392 }
    393 
    394303/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    395304/* Document
     
    11621071    border-radius: var(--form--border-radius);
    11631072    color: var(--form--color-text);
    1164     background: var(--global--color-white-50);
    11651073    line-height: var(--global--line-height-body);
    11661074    padding: var(--form--spacing-unit);
     1075    margin: 0 2px;
    11671076}
    11681077
     
    11831092.site textarea:focus {
    11841093    color: var(--form--color-text);
    1185     outline: 1px solid var(--form--border-color);
    1186     background: var(--global--color-white);
     1094    outline-offset: 2px;
     1095    outline: 2px dotted var(--form--border-color);
    11871096}
    11881097
     
    12051114}
    12061115
     1116.has-background-dark input[type="text"], .has-background-dark
     1117input[type="email"], .has-background-dark
     1118input[type="url"], .has-background-dark
     1119input[type="password"], .has-background-dark
     1120input[type="search"], .has-background-dark
     1121input[type="number"], .has-background-dark
     1122input[type="tel"], .has-background-dark
     1123input[type="date"], .has-background-dark
     1124input[type="month"], .has-background-dark
     1125input[type="week"], .has-background-dark
     1126input[type="time"], .has-background-dark
     1127input[type="datetime"], .has-background-dark
     1128input[type="datetime-local"], .has-background-dark
     1129input[type="color"], .has-background-dark
     1130.site textarea {
     1131    background: var(--global--color-white-90);
     1132}
     1133
    12071134input[type="search"]:focus {
    1208     outline-offset: 0;
    1209 }
    1210 
    1211 input[type="date"] {
    1212     background: var(--global--color-white);
     1135    outline-offset: -7px;
     1136}
     1137
     1138.has-background-dark input[type="search"]:focus {
     1139    outline-color: var(--global--color-background);
    12131140}
    12141141
    12151142input[type="color"] {
    1216     background: var(--global--color-white);
    12171143    padding: calc(var(--form--spacing-unit) / 2);
    12181144    height: calc(4 * var(--form--spacing-unit));
     
    12401166
    12411167select:focus {
    1242     outline: 1px solid var(--form--border-color);
     1168    outline-offset: 2px;
     1169    outline: 2px dotted var(--form--border-color);
     1170}
     1171
     1172.has-background-dark select {
     1173    /* stylelint-disable */
     1174    background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
     1175    /* stylelint-enable */
     1176    background-position: right var(--form--spacing-unit) top 60%;
    12431177}
    12441178
     
    12661200        width: 25px;
    12671201        height: 25px;
    1268         background: var(--global--color-white-50);
    12691202        border: var(--form--border-width) solid var(--form--border-color);
    1270         outline-offset: 0;
     1203        background: var(--global--color-white);
    12711204    }
    12721205    input[type="checkbox"]:disabled,
     
    12741207        opacity: 0.7;
    12751208    }
     1209    .has-background-dark input[type="checkbox"], .has-background-dark
     1210    input[type="radio"] {
     1211        background: var(--global--color-white-90);
     1212    }
    12761213    input[type="checkbox"]:focus {
    1277         outline: 1px solid var(--form--border-color);
    1278         background: var(--global--color-white);
     1214        outline-offset: 2px;
     1215        outline: 2px dotted var(--form--border-color);
    12791216    }
    12801217    input[type="checkbox"]:after {
     
    12931230    }
    12941231    input[type="checkbox"]:checked {
    1295         background: var(--global--color-white);
    12961232        color: var(--form--color-text);
    12971233    }
     
    13031239    }
    13041240    input[type="radio"]:focus {
    1305         background: var(--global--color-white);
    1306         border: 4px solid var(--form--border-color);
    1307         outline: 1px dotted transparent;
     1241        outline-offset: 2px;
     1242        outline: 2px dotted var(--form--border-color);
    13081243    }
    13091244    input[type="radio"]:after {
     
    13201255    }
    13211256    input[type="radio"]:checked {
    1322         background: var(--global--color-white);
    13231257        border: 4px solid var(--form--border-color);
    1324         outline: 1px dotted transparent;
    13251258    }
    13261259    input[type="radio"]:checked:after {
     
    13281261    }
    13291262    input[type="radio"]:checked:focus {
    1330         box-shadow: 0 0 0 2px var(--form--border-color);
     1263        outline-offset: 4px;
     1264        outline: 2px dotted var(--form--border-color);
    13311265    }
    13321266}
     
    14351369}
    14361370
     1371::-moz-placeholder {
     1372    opacity: 1;
     1373}
     1374
    14371375img {
    14381376    display: block;
     
    15471485 * Button
    15481486 */
     1487.site .button,
     1488input[type="submit"],
     1489input[type="reset"],
     1490.wp-block-search__button,
     1491.wp-block-button .wp-block-button__link {
     1492    line-height: var(--button--line-height);
     1493    color: var(--button--color-text);
     1494    cursor: pointer;
     1495    font-weight: var(--button--font-weight);
     1496    font-family: var(--button--font-family);
     1497    font-size: var(--button--font-size);
     1498    background-color: var(--button--color-background);
     1499    border-radius: var(--button--border-radius);
     1500    border: var(--button--border-width) solid var(--button--color-background);
     1501    text-decoration: none;
     1502    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     1503}
     1504
     1505.site .button:before, .site .button:after,
     1506input[type="submit"]:before,
     1507input[type="submit"]:after,
     1508input[type="reset"]:before,
     1509input[type="reset"]:after,
     1510.wp-block-search__button:before,
     1511.wp-block-search__button:after,
     1512.wp-block-button .wp-block-button__link:before,
     1513.wp-block-button .wp-block-button__link:after {
     1514    content: "";
     1515    display: block;
     1516    height: 0;
     1517    width: 0;
     1518}
     1519
     1520.site .button:before,
     1521input[type="submit"]:before,
     1522input[type="reset"]:before,
     1523.wp-block-search__button:before,
     1524.wp-block-button .wp-block-button__link:before {
     1525    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
     1526}
     1527
     1528.site .button:after,
     1529input[type="submit"]:after,
     1530input[type="reset"]:after,
     1531.wp-block-search__button:after,
     1532.wp-block-button .wp-block-button__link:after {
     1533    margin-top: -calc(.5em * var(--button--line-height) + -.39);
     1534}
     1535
     1536.site .button:focus,
     1537input[type="submit"]:focus,
     1538input[type="reset"]:focus,
     1539.wp-block-search__button:focus,
     1540.wp-block-button .wp-block-button__link:focus {
     1541    outline-offset: -6px;
     1542    outline: 2px dotted currentColor;
     1543}
     1544
     1545.site .button:disabled,
     1546input[type="submit"]:disabled,
     1547input[type="reset"]:disabled,
     1548.wp-block-search__button:disabled,
     1549.wp-block-button .wp-block-button__link:disabled {
     1550    background-color: var(--global--color-white-50);
     1551    border-color: var(--global--color-white-50);
     1552    color: var(--button--color-text-active);
     1553}
     1554
     1555.site .button:active,
     1556input[type="submit"]:active,
     1557input[type="reset"]:active,
     1558.wp-block-search .wp-block-search__button:active,
     1559.wp-block-file .wp-block-file__button:active {
     1560    color: var(--button--color-text-active);
     1561    background-color: var(--button--color-background-active);
     1562}
     1563
     1564.site .button:hover,
     1565input[type="submit"]:hover,
     1566input[type="reset"]:hover,
     1567.wp-block-search .wp-block-search__button:hover,
     1568.wp-block-file .wp-block-file__button:hover {
     1569    color: var(--button--color-text-hover);
     1570    background: transparent;
     1571}
     1572
    15491573/**
    15501574 * Block Options
    15511575 */
    1552 .wp-block-button.is-style-outline.wp-block-button__link,
     1576.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active {
     1577    color: var(--button--color-text-active);
     1578    background-color: var(--button--color-background-active);
     1579}
     1580
     1581.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
     1582    color: var(--button--color-text-hover);
     1583    background: transparent;
     1584}
     1585
     1586.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:focus, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:focus {
     1587    outline-offset: -7px;
     1588    outline: 2px dotted currentColor;
     1589}
     1590
    15531591.wp-block-button.is-style-outline .wp-block-button__link {
     1592    background: transparent;
     1593    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     1594}
     1595
     1596.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
    15541597    color: var(--button--color-background);
    1555     background: transparent;
    15561598    border: var(--button--border-width) solid currentColor;
    1557     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    1558 }
    1559 
    1560 .wp-block-button.is-style-outline.wp-block-button__link:visited,
    1561 .wp-block-button.is-style-outline .wp-block-button__link:visited {
    1562     color: var(--button--color-background);
    1563 }
    1564 
    1565 .wp-block-button.is-style-outline.wp-block-button__link:active, .wp-block-button.is-style-outline.wp-block-button__link:hover,
    1566 .wp-block-button.is-style-outline .wp-block-button__link:active,
    1567 .wp-block-button.is-style-outline .wp-block-button__link:hover {
     1599}
     1600
     1601.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):active, .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
    15681602    background-color: var(--button--color-background);
    15691603    color: var(--button--color-text);
     
    15711605}
    15721606
    1573 .wp-block-button.is-style-outline.wp-block-button__link:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
    1574 .wp-block-button.is-style-outline .wp-block-button__link:focus,
    1575 .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
     1607.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus {
    15761608    outline-offset: -7px;
    15771609    background: transparent;
     
    15801612}
    15811613
    1582 .wp-block-button.is-style-squared .wp-block-button__link {
     1614.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited {
     1615    color: var(--button--color-background);
     1616}
     1617
     1618.wp-block-button.is-style-outline .wp-block-button__link.has-background, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
     1619    border: var(--button--border-width) solid currentColor;
     1620}
     1621
     1622.wp-block-button.is-style-outline .wp-block-button__link.has-background:active, .wp-block-button.is-style-outline .wp-block-button__link.has-background:hover, .wp-block-button.is-style-outline .wp-block-button__link.has-background:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:focus {
     1623    outline-offset: -7px;
     1624    background: transparent;
     1625    outline: 2px dotted currentColor;
     1626    border: var(--button--border-width) solid currentColor;
     1627}
     1628
     1629.wp-block-button .is-style-squared .wp-block-button__link {
    15831630    border-radius: 0;
    15841631}
     
    18281875
    18291876.wp-block-file .wp-block-file__button {
     1877    line-height: var(--button--line-height);
     1878    color: var(--button--color-text);
     1879    cursor: pointer;
     1880    font-weight: var(--button--font-weight);
     1881    font-family: var(--button--font-family);
     1882    font-size: var(--button--font-size);
     1883    background-color: var(--button--color-background);
     1884    border-radius: var(--button--border-radius);
     1885    border: var(--button--border-width) solid var(--button--color-background);
     1886    text-decoration: none;
     1887    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    18301888    display: inline-block;
     1889}
     1890
     1891.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
     1892    content: "";
     1893    display: block;
     1894    height: 0;
     1895    width: 0;
     1896}
     1897
     1898.wp-block-file .wp-block-file__button:before {
     1899    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
     1900}
     1901
     1902.wp-block-file .wp-block-file__button:after {
     1903    margin-top: -calc(.5em * var(--button--line-height) + -.39);
     1904}
     1905
     1906.wp-block-file .wp-block-file__button:focus {
     1907    outline-offset: -6px;
     1908    outline: 2px dotted currentColor;
     1909}
     1910
     1911.wp-block-file .wp-block-file__button:disabled {
     1912    background-color: var(--global--color-white-50);
     1913    border-color: var(--global--color-white-50);
     1914    color: var(--button--color-text-active);
    18311915}
    18321916
     
    24022486.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
    24032487    background: var(--global--color-background);
    2404     box-shadow: var(--global--elevation);
    24052488    margin: 0;
    24062489    padding: 0;
    24072490    position: absolute;
    24082491    top: 100%;
     2492    border: 1px solid var(--primary-nav--border-color);
     2493}
     2494
     2495.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before, .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
     2496    content: "";
     2497    display: block;
     2498    position: absolute;
     2499    width: 0;
     2500    top: -10px;
     2501    left: var(--global--spacing-horizontal);
     2502    border-style: solid;
     2503    border-color: var(--primary-nav--border-color) transparent;
     2504    border-width: 0 7px 10px 7px;
     2505}
     2506
     2507.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
     2508    top: -9px;
     2509    border-color: var(--global--color-background) transparent;
    24092510}
    24102511
     
    24192520.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
    24202521    color: var(--primary-nav--color-link-hover);
     2522}
     2523
     2524.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
     2525    text-decoration: underline;
     2526    text-decoration-style: dotted;
    24212527}
    24222528
     
    37403846}
    37413847
     3848.archive-description {
     3849    margin-top: var(--global--spacing-vertical);
     3850    font-size: var(--global--font-size-xl);
     3851    line-height: var(--global--line-height-heading);
     3852}
     3853
    37423854.error404 main p {
    37433855    font-size: var(--global--font-size-lg);
     
    42944406        z-index: 88888;
    42954407    }
     4408    .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
     4409        content: "";
     4410        display: block;
     4411        position: absolute;
     4412        width: 0;
     4413        top: -10px;
     4414        left: var(--global--spacing-horizontal);
     4415        border-style: solid;
     4416        border-color: var(--primary-nav--border-color) transparent;
     4417        border-width: 0 7px 10px 7px;
     4418    }
     4419    .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
     4420        top: -9px;
     4421        border-color: var(--global--color-background) transparent;
     4422    }
    42964423    .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
    42974424        background: var(--global--color-background);
    42984425    }
    4299 }
    4300 
    4301 .primary-navigation > div > .menu-wrapper > li > .sub-menu .sub-menu {
    4302     width: 100%;
    43034426}
    43044427
     
    43784501    list-style: none;
    43794502    margin-left: var(--primary-nav--padding);
     4503    border: 1px solid var(--primary-nav--border-color);
     4504}
     4505
     4506.primary-navigation .sub-menu .sub-menu {
     4507    border: none;
    43804508}
    43814509
     
    50795207}
    50805208
     5209.is-IE .navigation .nav-links {
     5210    display: block;
     5211}
     5212
     5213.is-IE .post-thumbnail .wp-post-image {
     5214    min-width: auto;
     5215}
     5216
    50815217/*# sourceMappingURL=style.css.map */
Note: See TracChangeset for help on using the changeset viewer.