mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-15 07:05:37 +01:00
fed21a9863
This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black. Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: https://codepen.io/ryelle/full/WNGVEjw Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce. See #49999. Built from https://develop.svn.wordpress.org/trunk@50025 git-svn-id: http://core.svn.wordpress.org/trunk@49726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
360 lines
7.8 KiB
CSS
360 lines
7.8 KiB
CSS
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
/* Text meant only for screen readers */
|
|
.screen-reader-text {
|
|
border: 0;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
-webkit-clip-path: inset(50%);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
word-wrap: normal !important;
|
|
}
|
|
|
|
/* Dashicons */
|
|
.dashicons {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-size: 20px;
|
|
background-position: center;
|
|
transition: background .1s ease-in;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
|
|
.dashicons-no {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M15.55%2013.7l-2.19%202.06-3.42-3.65-3.64%203.43-2.06-2.18%203.64-3.43-3.42-3.64%202.18-2.06%203.43%203.64%203.64-3.42%202.05%202.18-3.64%203.43z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.dashicons-admin-comments {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.wp-embed-comments a:hover .dashicons-admin-comments {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.dashicons-share {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
|
|
display: none;
|
|
}
|
|
|
|
.js .dashicons-share {
|
|
display: inline-block;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open:hover .dashicons-share {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.wp-embed {
|
|
padding: 25px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
line-height: 1.5;
|
|
color: #8c8f94;
|
|
background: #fff;
|
|
border: 1px solid #dcdcde;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
|
|
/* Clearfix */
|
|
overflow: auto;
|
|
zoom: 1;
|
|
}
|
|
|
|
.wp-embed a {
|
|
color: #8c8f94;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-embed a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.wp-embed-featured-image {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.wp-embed-featured-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
border: none;
|
|
}
|
|
|
|
.wp-embed-featured-image.square {
|
|
float: left;
|
|
max-width: 160px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.wp-embed p {
|
|
margin: 0;
|
|
}
|
|
|
|
p.wp-embed-heading {
|
|
margin: 0 0 15px;
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.wp-embed-heading a {
|
|
color: #2c3338;
|
|
}
|
|
|
|
.wp-embed .wp-embed-more {
|
|
color: #c3c4c7;
|
|
}
|
|
|
|
.wp-embed-footer {
|
|
display: table;
|
|
width: 100%;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.wp-embed-site-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
height: 25px;
|
|
width: 25px;
|
|
border: 0;
|
|
}
|
|
|
|
.wp-embed-site-title {
|
|
font-weight: 600;
|
|
line-height: 1.78571428;
|
|
}
|
|
|
|
.wp-embed-site-title a {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.wp-embed-site-title,
|
|
.wp-embed-meta {
|
|
display: table-cell;
|
|
}
|
|
|
|
.wp-embed-meta {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.wp-embed-comments,
|
|
.wp-embed-share {
|
|
display: inline;
|
|
}
|
|
|
|
.wp-embed-meta a:hover {
|
|
text-decoration: none;
|
|
color: #2271b1;
|
|
}
|
|
|
|
.wp-embed-comments a {
|
|
line-height: 1.78571428;
|
|
display: inline-block;
|
|
}
|
|
|
|
.wp-embed-comments + .wp-embed-share {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.wp-embed-share-dialog {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #1d2327;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
color: #fff;
|
|
opacity: 1;
|
|
transition: opacity .25s ease-in-out;
|
|
}
|
|
|
|
.wp-embed-share-dialog.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open,
|
|
.wp-embed-share-dialog-close {
|
|
margin: -8px 0 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open .dashicons,
|
|
.wp-embed-share-dialog-close .dashicons {
|
|
padding: 4px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open .dashicons {
|
|
top: 8px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open:focus .dashicons,
|
|
.wp-embed-share-dialog-close:focus .dashicons {
|
|
box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.wp-embed-share-dialog-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-close:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-embed-share-dialog-close .dashicons {
|
|
height: 24px;
|
|
width: 24px;
|
|
background-size: 24px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-content {
|
|
height: 100%;
|
|
transform-style: preserve-3d;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wp-embed-share-dialog-text {
|
|
margin-top: 25px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.wp-embed-share-tabs {
|
|
margin: 0 0 20px;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.wp-embed-share-tab-button {
|
|
display: inline-block;
|
|
}
|
|
|
|
.wp-embed-share-tab-button button {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 16px;
|
|
line-height: 1.3;
|
|
color: #a7aaad;
|
|
cursor: pointer;
|
|
transition: color .1s ease-in;
|
|
}
|
|
|
|
.wp-embed-share-tab-button [aria-selected="true"] {
|
|
color: #fff;
|
|
}
|
|
|
|
.wp-embed-share-tab-button button:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.wp-embed-share-tab-button + .wp-embed-share-tab-button {
|
|
margin: 0 0 0 10px;
|
|
padding: 0 0 0 11px;
|
|
border-left: 1px solid #a7aaad;
|
|
}
|
|
|
|
.wp-embed-share-tab[aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
p.wp-embed-share-description {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
font-style: italic;
|
|
color: #a7aaad;
|
|
}
|
|
|
|
.wp-embed-share-input {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border: none;
|
|
height: 28px;
|
|
margin: 0 0 10px 0;
|
|
padding: 0 5px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
line-height: 1.5;
|
|
resize: none;
|
|
cursor: text;
|
|
}
|
|
|
|
textarea.wp-embed-share-input {
|
|
height: 72px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-featured-image.square {
|
|
float: right;
|
|
margin-right: 0;
|
|
|
|
margin-left: 20px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-site-title a {
|
|
padding-left: 0;
|
|
padding-right: 35px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-site-icon {
|
|
margin-right: 0;
|
|
margin-left: 10px;
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-meta {
|
|
text-align: left;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-footer {
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-share {
|
|
margin-left: 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-share-dialog-close {
|
|
right: auto;
|
|
left: 20px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-share-tab-button + .wp-embed-share-tab-button {
|
|
margin: 0 10px 0 0;
|
|
padding: 0 11px 0 0;
|
|
border-left: none;
|
|
border-right: 1px solid #a7aaad;
|
|
}
|