WordPress.org
Get WordPress

Make WordPress Core

Changeset 49330


Ignore:
Timestamp:
10/27/2020 05:05:51 PM (6 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.