X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/d3947bc013df7edd54b46deed8230d2eeafc5ecb..ef91a7f4f3c6468973e192335a27ec0e0faca0b5:/wp-admin/css/common-rtl.css diff --git a/wp-admin/css/common-rtl.css b/wp-admin/css/common-rtl.css index 1af5d650..e7a5f54b 100644 --- a/wp-admin/css/common-rtl.css +++ b/wp-admin/css/common-rtl.css @@ -71,26 +71,22 @@ /* 2 columns main area */ -#col-container, -#col-left, -#col-right { - overflow: hidden; - padding: 0; - margin: 0; -} - #col-left { + float: right; width: 35%; } #col-right { float: left; - clear: left; width: 65%; } -.col-wrap { - padding: 0 7px; +#col-left .col-wrap { + padding: 0 0 0 6px; +} + +#col-right .col-wrap { + padding: 0 6px 0 0; } /* utility classes */ @@ -212,13 +208,10 @@ body { padding: 0; } -html { - background: #f1f1f1; -} - body { + background: #f1f1f1; color: #444; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4em; min-width: 600px; @@ -444,7 +437,7 @@ code { .subsubsub a .count, .subsubsub a.current .count { color: #555d66; /* #f1f1f1 background */ - font-weight: normal; + font-weight: 400; } .subsubsub a.current { @@ -579,16 +572,27 @@ code { font-size: 23px; font-weight: 400; margin: 0; - padding: 9px 0 4px 15px; + padding: 9px 0 4px 0; line-height: 29px; } +.wrap h1.wp-heading-inline { + display: inline-block; + margin-left: 5px; +} + +.wp-header-end { + visibility: hidden; + margin: -2px 0 0; +} + .subtitle { margin: 0; padding-right: 25px; color: #555d66; font-size: 14px; - font-weight: normal; + font-weight: 400; + line-height: 1; } .wrap .add-new-h2, /* deprecated */ @@ -608,6 +612,14 @@ code { text-shadow: none; font-weight: 600; font-size: 13px; + line-height: normal; /* IE8-IE11 need this for buttons */ + color: #0073aa; /* some of these controls are button elements and don't inherit from links */ + cursor: pointer; + outline: 0; +} + +.wrap .wp-heading-inline + .page-title-action { + margin-right: 0; } .wrap .add-new-h2:hover, /* deprecated */ @@ -617,6 +629,11 @@ code { color: #fff; } +/* lower specificity: color needs to be overridden by :hover and :active */ +.page-title-action:focus { + color: #124964; +} + .wrap .page-title-action:focus { border-color: #5b9dd9; -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); @@ -677,7 +694,7 @@ ul.striped > :nth-child(odd), } .wp-ui-highlight { - color: white; + color: #fff; background-color: #1e8cbe; } .wp-ui-text-highlight { @@ -756,7 +773,7 @@ img.emoji { /* @todo can we combine these into a class or use an existing dashicon one? */ .welcome-panel .welcome-panel-close:before, -.tagchecklist span a:before, +.tagchecklist .ntdelbutton .remove-tag-icon:before, #bulk-titles div a:before, .notice-dismiss:before { background: none; @@ -776,18 +793,41 @@ img.emoji { margin: 0; } -.tagchecklist span a:before, #bulk-titles div a:before { margin: 1px 0; } +.tagchecklist .ntdelbutton .remove-tag-icon:before { + margin-right: 2px; + -webkit-border-radius: 50%; + border-radius: 50%; + color: #0073aa; + /* vertically center the icon cross browsers */ + line-height: 1.28; +} + +.tagchecklist .ntdelbutton:focus { + outline: 0; +} + .welcome-panel .welcome-panel-close:hover:before, .welcome-panel .welcome-panel-close:focus:before, -.tagchecklist span a:hover:before, -#bulk-titles div a:hover:before { +.tagchecklist .ntdelbutton:hover .remove-tag-icon:before, +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before, +#bulk-titles div a:hover:before, +#bulk-titles div a:focus:before { color: #c00; } +.tagchecklist .ntdelbutton:focus .remove-tag-icon:before { + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + .key-labels label { line-height: 24px; } @@ -823,6 +863,8 @@ hr { border-bottom: 1px solid #fafafa; } +.widget-control-remove, +.widget-control-remove:focus, .row-actions span.delete a, .row-actions span.trash a, .row-actions span.spam a, @@ -839,7 +881,6 @@ hr { abbr.required, span.required, .file-error, -.widget-control-remove:hover, .row-actions .delete a:hover, .row-actions .trash a:hover, .row-actions .spam a:hover, @@ -851,10 +892,13 @@ span.required, #media-items a.delete-permanently:hover, #nav-menu-footer .menu-delete:hover { color: #f00; - text-decoration: none; border: none; } +.widget-control-remove:hover { + color: #f00; +} + /*------------------------------------------------------------------------------ 3.0 - Actions ------------------------------------------------------------------------------*/ @@ -867,10 +911,8 @@ span.required, } #delete-action { - line-height: 28px; - vertical-align: middle; - text-align: right; float: right; + line-height: 28px; } #publishing-action { @@ -1040,39 +1082,53 @@ th.action-links { display: inline-block; } -.wp-filter .drawer-toggle { - display: inline-block; - margin: 0 10px; - padding: 4px 6px; +.wp-filter .button.drawer-toggle { + margin: 10px 9px 0; + padding: 0 6px 0 10px; + border-color: transparent; + background-color: transparent; color: #666; - cursor: pointer; + vertical-align: baseline; + -webkit-box-shadow: none; + box-shadow: none; } .wp-filter .drawer-toggle:before { - display: inline-block; - vertical-align: top; content: "\f111"; margin: 0 0 0 5px; - width: 16px; - height: 16px; color: #72777c; - -webkit-transition: color .1s ease-in 0; - transition: color .1s ease-in 0; - font-family: dashicons; - font-size: 16px; - line-height: 1; - text-align: center; - text-decoration: inherit; - font-weight: normal; - font-style: normal; + font: normal 16px/1 dashicons; + vertical-align: text-bottom; -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.wp-filter .drawer-toggle:hover, -.wp-filter .drawer-toggle:hover:before { +.wp-filter .button.drawer-toggle:hover, +.wp-filter .drawer-toggle:hover:before, +.wp-filter .button.drawer-toggle:focus, +.wp-filter .drawer-toggle:focus:before { + background-color: transparent; color: #00a0d2; } +.wp-filter .button.drawer-toggle:hover, +.wp-filter .button.drawer-toggle:focus:active { + border-color: transparent; +} + +.wp-filter .button.drawer-toggle:focus { + border-color: #5b9dd9; +} + +.wp-filter .button.drawer-toggle:active { + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; +} + .wp-filter .drawer-toggle.current:before { color: #fff; } @@ -1087,7 +1143,7 @@ th.action-links { width: 100%; } -.show-favorites-form .wp-filter .favorites-form { +.show-favorites-form .favorites-form { display: block; } @@ -1105,23 +1161,22 @@ th.action-links { width: 100%; } -.show-filters .wp-filter .drawer-toggle:hover, -.show-filters .wp-filter .drawer-toggle:focus { - background: rgb(46, 162, 204); -} - .show-filters .filter-links a.current { border-bottom: none; } -.show-filters .wp-filter .drawer-toggle { +.show-filters .wp-filter .button.drawer-toggle { -webkit-border-radius: 2px; border-radius: 2px; - border: none; background: #72777c; color: #fff; } +.show-filters .wp-filter .drawer-toggle:hover, +.show-filters .wp-filter .drawer-toggle:focus { + background: rgb(46, 162, 204); +} + .show-filters .wp-filter .drawer-toggle:before { color: #fff; } @@ -1165,9 +1220,15 @@ th.action-links { } .filter-drawer .buttons { + clear: both; margin-bottom: 20px; } +.filter-drawer .filter-group + .buttons { + margin-bottom: 0; + padding-top: 20px; +} + .filter-drawer .buttons .button span { display: inline-block; opacity: 0.8; @@ -1180,6 +1241,21 @@ th.action-links { margin-right: 10px; } +.wp-filter .button-link.edit-filters { + color: #0073aa; + text-decoration: underline; + padding: 0 5px; + line-height: 28px; +} + +.wp-filter .button-link.edit-filters:hover { + color: #00a0d2; +} + +.wp-filter .button-link.edit-filters:focus { + color: #124964; +} + .filtered-by { display: none; margin: 0; @@ -1221,6 +1297,7 @@ th.action-links { padding: 20px; } +.show-filters .favorites-form, .show-filters .content-filterable, .show-filters.filters-applied.loading-content .content-filterable, .loading-content .content-filterable, @@ -1305,6 +1382,10 @@ div.error { padding: 1px 12px; } +div[class="update-message"] { /* back-compat for pre-4.6 */ + padding: 0.5em 0 0.5em 12px; +} + .notice p, .notice-title, div.updated p, @@ -1404,6 +1485,21 @@ div.error { background-color: #e5f5fa; } +.update-message p:before, +.updating-message p:before, +.updated-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + display: inline-block; + font: normal 20px/1 'dashicons'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + vertical-align: top; +} + .wrap .notice, .wrap div.updated, .wrap div.error, @@ -1412,6 +1508,45 @@ div.error { margin: 5px 0 15px; } +/* Update icon. */ +.update-message p:before, +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before { + color: #f56e28; + content: "\f463"; +} + +/* Spins the update icon. */ +.updating-message p:before, +.import-php .updating-message:before, +.button.updating-message:before, +.button.installing:before { + -webkit-animation: rotation 2s infinite linear; + animation: rotation 2s infinite linear; +} + +/* Updated icon (check mark). */ +.updated-message p:before, +.installed p:before, +.button.updated-message:before { + color: #79ba49; + content: '\f147'; +} + +/* Error icon. */ +.update-message.notice-error p:before { + color: #dc3232; + content: "\f534"; +} + +.wrap .notice p:before, +.import-php .updating-message:before { + margin-left: 6px; + vertical-align: bottom; +} + #update-nag, .update-nag { display: inline-block; @@ -1426,10 +1561,6 @@ div.error { box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); } -.update-message { - color: #000; -} - ul#dismissed-updates { display: none; } @@ -1461,6 +1592,50 @@ form.upgrade .hint { margin-right: 2em; } +.button.updating-message:before, +.button.updated-message:before, +.button.installed:before, +.button.installing:before { + margin: 3px -2px 0 5px; +} + +.button-primary.updating-message:before { + color: #fff; +} + +.button-primary.updated-message:before { + color: #66c6e4; +} + +.button.updated-message, +.notice .button-link { + -webkit-transition-property: border, background, color; + transition-property: border, background, color; + -webkit-transition-duration: .05s; + transition-duration: .05s; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; +} + +.notice .button-link { + color: #0073aa; +} + +.notice .button-link:hover, +.notice .button-link:active { + color: #00a0d2; +} + +@media aural { + .wrap .notice p:before, + .button.installing:before, + .button.installed:before, + .update-message p:before { + speak: none; + } +} + + /* @todo: this does not need its own section anymore */ /*------------------------------------------------------------------------------ 6.0 - Admin Header @@ -1774,7 +1949,7 @@ html.wp-toolbar { .widefat th, .widefat thead td, .widefat tfoot td { - font-weight: normal; + font-weight: 400; } .widefat thead tr th, @@ -1798,6 +1973,11 @@ html.wp-toolbar { margin: 0.6em 0; } +.widefat .column-comment ul { + list-style: initial; + margin-right: 2em; +} + /* Screens with postboxes */ .postbox-container { float: right; @@ -1876,7 +2056,7 @@ html.wp-toolbar { .hndle a { font-size: 11px; - font-weight: normal; + font-weight: 400; } .postbox .handlediv { @@ -1992,14 +2172,6 @@ html.wp-toolbar { font-style: italic; } -#wpfooter a { - text-decoration: none; -} - -#wpfooter a:hover { - text-decoration: underline; -} - /*------------------------------------------------------------------------------ 25.0 - Tabbed Admin Screen Interface (Experimental) ------------------------------------------------------------------------------*/ @@ -2054,7 +2226,7 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ .wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */ -h3.nav-tab-wrapper { +.nav-tab-wrapper { border-bottom: 1px solid #ccc; margin: 0; padding-top: 9px; @@ -2095,7 +2267,8 @@ h3.nav-tab-wrapper { margin: 4px 10px 0; } -.spinner.is-active { +.spinner.is-active, +.loading-content .spinner { visibility: visible; } @@ -2172,13 +2345,45 @@ body.iframe { display: block; } +.importers { + font-size: 16px; + width: auto; +} + .importers td { padding-left: 14px; + line-height: 1.5em; } -.importers { - font-size: 16px; - width: auto; +.importers .import-system { + max-width: 250px; +} + +.importers td.desc { + max-width: 500px; +} + +.importer-title, +.importer-desc, +.importer-action { + display: block; +} + +.importer-title { + color: #000; + font-size: 14px; + font-weight: 400; + margin-bottom: .2em; +} + +.importer-action { + line-height: 20px; /* Same as with .updating-message */ + color: #ddd; + margin-bottom: 1em; +} + +.not-installed-main-site .importer-action { + color: #555; } #post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */ @@ -2286,7 +2491,7 @@ div.star-holder .star-rating { line-height: 1; font-family: dashicons; text-decoration: inherit; - font-weight: normal; + font-weight: 400; font-style: normal; vertical-align: top; -webkit-transition: color .1s ease-in 0; @@ -2314,7 +2519,7 @@ div.star-holder .star-rating { } div.action-links { - font-weight: normal; + font-weight: 400; margin: 6px 0 0; } @@ -2362,7 +2567,7 @@ div.action-links { #plugin-information-title h2 { font-size: 1em; - font-weight: bold; + font-weight: 600; padding: 0; margin: 0; max-width: 680px; @@ -2408,7 +2613,8 @@ div.action-links { position: relative; left: 0; right: 0; - height: 36px; + min-height: 36px; + font-size: 0; z-index: 1; border-bottom: 1px solid #ddd; background: #f3f3f3; @@ -2416,7 +2622,7 @@ div.action-links { #plugin-information-tabs a { position: relative; - float: right; + display: inline-block; padding: 9px 10px; margin: 0; height: 18px; @@ -2428,7 +2634,7 @@ div.action-links { } #plugin-information-tabs a.current { - margin: 0 -1px 0; + margin: 0 -1px -1px; background: #fff; border: 1px solid #ddd; border-bottom-color: #fff; @@ -2500,7 +2706,7 @@ div.action-links { } #plugin-information .fyi h3 { - font-weight: bold; + font-weight: 600; text-transform: uppercase; font-size: 12px; color: #666; @@ -2683,6 +2889,11 @@ div.action-links { font-size: 13px; } +/* For non-js plugin installation screen ticket #36430. */ +.update-php .button.button-primary { + margin-left: 1em; +} + @media screen and ( max-width: 771px ) { #plugin-information-title.with-banner { height: 100px; @@ -2725,7 +2936,7 @@ div.action-links { #section-holder { position: static; margin: 0; - padding-bottom: 70px; /* reset from the two column height fix, plus accomodate footer */ + padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */ } #plugin-information .fyi h3, @@ -2888,7 +3099,8 @@ img { /* Metabox collapse arrow indicators */ .js .sidebar-name .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox .toggle-indicator:before { +.js .meta-box-sortables .postbox .toggle-indicator:before, +.bulk-action-notice .toggle-indicator:before { content: "\f142"; display: inline-block; font: normal 20px/1 dashicons; @@ -2899,7 +3111,8 @@ img { } .js .widgets-holder-wrap.closed .sidebar-name-arrow:before, -.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before { +.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before, +.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before { content: "\f140"; } @@ -2929,6 +3142,12 @@ img { text-indent: 1px; /* account for the dashicon alignment */ } +.bulk-action-notice .toggle-indicator:before { + line-height: 16px; + vertical-align: top; + color: #72777c; +} + .js .postbox .handlediv:focus { -webkit-box-shadow: none; box-shadow: none; @@ -3010,7 +3229,7 @@ img { #templateside .highlight { border: none; - font-weight: bold; + font-weight: 600; } .nonessential { @@ -3185,7 +3404,8 @@ img { display: none; } -.control-section .accordion-section-title { +.control-section .accordion-section-title, +.customize-pane-child .accordion-section-title { border-right: none; border-left: none; padding: 10px 14px 11px 10px; @@ -3193,7 +3413,8 @@ img { background: #fff; } -.control-section .accordion-section-title:after { +.control-section .accordion-section-title:after, +.customize-pane-child .accordion-section-title:after { top: 11px; } @@ -3361,53 +3582,6 @@ img { /* =Media Queries -------------------------------------------------------------- */ -/* @todo: de-duplication */ -@media only screen and (min-width: 769px) { - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (max-width: 860px) { - - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (min-width: 980px) { - - /* categories */ - #col-left { - width: 35%; - } - - #col-right { - width: 65%; - } -} - -@media only screen and (max-width: 768px) { - /* categories */ - #col-left { - width: 100%; - } - - #col-right { - width: 100%; - } -} - /** * HiDPI Displays */ @@ -3434,9 +3608,7 @@ img { .sidebar-name-arrow, .sidebar-name:hover .sidebar-name-arrow, .meta-box-sortables .postbox:hover .handlediv, - .tagchecklist span a, #bulk-titles div a, - .tagchecklist span a:hover, #bulk-titles div a:hover { background: none !important; } @@ -3476,7 +3648,15 @@ img { margin-right: 0; } - .col-wrap { + /* categories */ + #col-left, + #col-right { + float: none; + width: auto; + } + + #col-left .col-wrap, + #col-right .col-wrap { padding: 0; } @@ -3488,6 +3668,10 @@ img { display: none !important; } + .wrap h1.wp-heading-inline { + margin-bottom: 0.5em; + } + .wrap .add-new-h2, /* deprecated */ .wrap .add-new-h2:active, /* deprecated */ .wrap .page-title-action, @@ -3613,6 +3797,12 @@ img { .filter-drawer .filter-group-feature label { line-height: 25px; } + + .wp-filter .button.drawer-toggle { + font-size: 13px; + line-height: 26px; + height: 28px; + } } /* Smartphone */ @@ -3638,7 +3828,7 @@ img { h1.nav-tab-wrapper, .wrap h2.nav-tab-wrapper, - h3.nav-tab-wrapper { + .nav-tab-wrapper { border-bottom: 0; }