2012-10-15 10:55:29 -04:00
|
|
|
/* ----------------------------------------------------------------------------
|
|
|
|
|
|
2014-03-10 20:04:14 -04:00
|
|
|
NOTE: If you edit this file, you should make sure that the CSS rules for
|
|
|
|
|
buttons in the following files are updated.
|
|
|
|
|
|
|
|
|
|
* jquery-ui-dialog.css
|
|
|
|
|
* editor.css
|
2012-10-15 10:55:29 -04:00
|
|
|
|
|
|
|
|
WordPress-style Buttons
|
2012-10-15 17:25:25 -04:00
|
|
|
=======================
|
2016-05-13 14:41:31 -04:00
|
|
|
Create a button by adding the `.button` class to an element. For backward
|
2012-10-15 17:25:25 -04:00
|
|
|
compatibility, we support several other classes (such as `.button-secondary`),
|
|
|
|
|
but these will *not* work with the stackable classes described below.
|
|
|
|
|
|
|
|
|
|
Button Styles
|
|
|
|
|
-------------
|
|
|
|
|
To display a primary button style, add the `.button-primary` class to a button.
|
|
|
|
|
|
|
|
|
|
Button Sizes
|
|
|
|
|
------------
|
|
|
|
|
Adjust a button's size by adding the `.button-large` or `.button-small` class.
|
|
|
|
|
|
|
|
|
|
Button States
|
|
|
|
|
-------------
|
|
|
|
|
Lock the state of a button by adding the name of the pseudoclass as
|
|
|
|
|
an actual class (e.g. `.hover` for `:hover`).
|
2012-10-15 10:55:29 -04:00
|
|
|
|
|
|
|
|
|
|
|
|
|
TABLE OF CONTENTS:
|
|
|
|
|
------------------
|
|
|
|
|
1.0 - Button Layouts
|
|
|
|
|
2.0 - Default Button Style
|
|
|
|
|
3.0 - Primary Button Style
|
2012-10-16 09:34:01 -04:00
|
|
|
4.0 - Button Groups
|
2013-11-25 22:36:09 -05:00
|
|
|
5.0 - Responsive Button Styles
|
2012-10-15 10:55:29 -04:00
|
|
|
|
|
|
|
|
---------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
|
|
|
1.0 - Button Layouts
|
|
|
|
|
---------------------------------------------------------------------------- */
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button,
|
|
|
|
|
.wp-core-ui .button-primary,
|
|
|
|
|
.wp-core-ui .button-secondary {
|
2012-10-15 10:55:29 -04:00
|
|
|
display: inline-block;
|
|
|
|
|
text-decoration: none;
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
|
|
|
font-size: 13px;
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
line-height: 2.15384615; /* 28px */
|
|
|
|
|
min-height: 30px;
|
2012-10-15 10:55:29 -04:00
|
|
|
margin: 0;
|
2019-09-23 11:27:57 -04:00
|
|
|
padding: 0 10px;
|
2012-10-15 10:55:29 -04:00
|
|
|
cursor: pointer;
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
border-style: solid;
|
2012-11-19 22:20:17 -05:00
|
|
|
-webkit-appearance: none;
|
2012-10-15 10:55:29 -04:00
|
|
|
border-radius: 3px;
|
|
|
|
|
white-space: nowrap;
|
2014-02-13 03:30:17 -05:00
|
|
|
box-sizing: border-box;
|
2012-10-23 21:33:59 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Remove the dotted border on :focus and the extra padding in Firefox */
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui button::-moz-focus-inner,
|
|
|
|
|
.wp-core-ui input[type="reset"]::-moz-focus-inner,
|
|
|
|
|
.wp-core-ui input[type="button"]::-moz-focus-inner,
|
|
|
|
|
.wp-core-ui input[type="submit"]::-moz-focus-inner {
|
2014-08-02 20:34:15 -04:00
|
|
|
border-width: 0;
|
|
|
|
|
border-style: none;
|
2012-10-23 21:33:59 -04:00
|
|
|
padding: 0;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button.button-large,
|
|
|
|
|
.wp-core-ui .button-group.button-large .button {
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
min-height: 32px;
|
|
|
|
|
line-height: 2.30769231; /* 30px */
|
|
|
|
|
padding: 0 12px;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button.button-small,
|
|
|
|
|
.wp-core-ui .button-group.button-small .button {
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
min-height: 26px;
|
|
|
|
|
line-height: 2.18181818; /* 24px */
|
2019-09-30 13:24:59 -04:00
|
|
|
padding: 0 8px;
|
2013-11-26 17:10:09 -05:00
|
|
|
font-size: 11px;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button.button-hero,
|
|
|
|
|
.wp-core-ui .button-group.button-hero .button {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
font-size: 14px;
|
2019-09-23 11:27:57 -04:00
|
|
|
min-height: 46px;
|
2019-05-30 08:42:52 -04:00
|
|
|
line-height: 3.14285714;
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
padding: 0 36px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button.hidden {
|
2012-11-07 16:25:25 -05:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
|
|
|
/* Style Reset buttons as simple text links */
|
|
|
|
|
|
|
|
|
|
.wp-core-ui input[type="reset"],
|
|
|
|
|
.wp-core-ui input[type="reset"]:hover,
|
|
|
|
|
.wp-core-ui input[type="reset"]:active,
|
|
|
|
|
.wp-core-ui input[type="reset"]:focus {
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: none;
|
2013-11-17 11:18:11 -05:00
|
|
|
padding: 0 2px 1px;
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2012-10-15 10:55:29 -04:00
|
|
|
/* ----------------------------------------------------------------------------
|
|
|
|
|
2.0 - Default Button Style
|
|
|
|
|
---------------------------------------------------------------------------- */
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button,
|
|
|
|
|
.wp-core-ui .button-secondary {
|
2019-09-29 17:53:57 -04:00
|
|
|
color: #0071a1;
|
|
|
|
|
border-color: #0071a1;
|
|
|
|
|
background: #f3f5f6;
|
2019-01-17 02:41:52 -05:00
|
|
|
vertical-align: top;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2013-12-05 13:53:10 -05:00
|
|
|
.wp-core-ui p .button {
|
|
|
|
|
vertical-align: baseline;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button.hover,
|
|
|
|
|
.wp-core-ui .button:hover,
|
2019-09-30 13:24:59 -04:00
|
|
|
.wp-core-ui .button-secondary:hover{
|
2019-09-29 17:53:57 -04:00
|
|
|
background: #f1f1f1;
|
|
|
|
|
border-color: #016087;
|
|
|
|
|
color: #016087;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button.focus,
|
|
|
|
|
.wp-core-ui .button:focus,
|
2017-02-09 11:47:44 -05:00
|
|
|
.wp-core-ui .button-secondary:focus {
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
background: #f3f5f6;
|
|
|
|
|
border-color: #007cba;
|
|
|
|
|
color: #016087;
|
|
|
|
|
box-shadow: 0 0 0 1px #007cba;
|
2019-09-30 13:24:59 -04:00
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 2px solid transparent;
|
|
|
|
|
/* Reset inherited offset from Gutenberg */
|
|
|
|
|
outline-offset: 0;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2019-10-07 14:47:05 -04:00
|
|
|
/* :active state */
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button:active,
|
|
|
|
|
.wp-core-ui .button-secondary:active {
|
2019-09-29 17:53:57 -04:00
|
|
|
background: #f3f5f6;
|
|
|
|
|
border-color: #7e8993;
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
box-shadow: none;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2019-10-07 14:47:05 -04:00
|
|
|
/* pressed state e.g. a selected setting */
|
|
|
|
|
.wp-core-ui .button.active,
|
|
|
|
|
.wp-core-ui .button.active:hover {
|
|
|
|
|
background-color: #e2e4e7;
|
|
|
|
|
color: #00669b;
|
|
|
|
|
border-color: #016087;
|
|
|
|
|
box-shadow: inset 0 2px 5px -3px #016087;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-11 14:21:16 -04:00
|
|
|
.wp-core-ui .button.active:focus {
|
2019-10-07 14:47:05 -04:00
|
|
|
border-color: #007cba;
|
|
|
|
|
box-shadow:
|
|
|
|
|
inset 0 2px 5px -3px #016087,
|
|
|
|
|
0 0 0 1px #007cba;
|
2014-08-11 14:21:16 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button[disabled],
|
|
|
|
|
.wp-core-ui .button:disabled,
|
2014-01-26 19:28:13 -05:00
|
|
|
.wp-core-ui .button.disabled,
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-secondary[disabled],
|
|
|
|
|
.wp-core-ui .button-secondary:disabled,
|
2014-01-26 19:28:13 -05:00
|
|
|
.wp-core-ui .button-secondary.disabled,
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-disabled {
|
2015-04-05 17:20:27 -04:00
|
|
|
color: #a0a5aa !important;
|
2012-10-15 10:55:29 -04:00
|
|
|
border-color: #ddd !important;
|
2014-02-26 03:07:15 -05:00
|
|
|
background: #f7f7f7 !important;
|
2014-02-13 03:30:17 -05:00
|
|
|
box-shadow: none !important;
|
2012-10-15 10:55:29 -04:00
|
|
|
text-shadow: 0 1px 0 #fff !important;
|
2012-11-06 17:30:41 -05:00
|
|
|
cursor: default;
|
2015-11-17 18:18:29 -05:00
|
|
|
transform: none !important;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2015-11-13 10:47:27 -05:00
|
|
|
/* Buttons that look like links, for a cross of good semantics with the visual */
|
|
|
|
|
.wp-core-ui .button-link {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background: none;
|
|
|
|
|
cursor: pointer;
|
2017-02-14 13:42:46 -05:00
|
|
|
text-align: left;
|
2017-02-09 11:47:44 -05:00
|
|
|
/* Mimics the default link style in common.css */
|
|
|
|
|
color: #0073aa;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
transition-property: border, background, color;
|
|
|
|
|
transition-duration: .05s;
|
|
|
|
|
transition-timing-function: ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .button-link:hover,
|
|
|
|
|
.wp-core-ui .button-link:active {
|
|
|
|
|
color: #00a0d2;
|
2015-11-13 10:47:27 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .button-link:focus {
|
2017-02-09 11:47:44 -05:00
|
|
|
color: #124964;
|
2019-10-07 15:57:02 -04:00
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #5b9dd9,
|
|
|
|
|
0 0 2px 1px rgba(30, 140, 190, 0.8);
|
|
|
|
|
/* Only visible in Windows High Contrast mode */
|
|
|
|
|
outline: 1px solid transparent;
|
2017-02-09 11:47:44 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .button-link-delete {
|
|
|
|
|
color: #a00;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .button-link-delete:hover,
|
|
|
|
|
.wp-core-ui .button-link-delete:focus {
|
2017-04-19 17:14:44 -04:00
|
|
|
color: #dc3232;
|
2019-07-30 19:20:57 -04:00
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .button-link-delete:disabled {
|
|
|
|
|
/* overrides the default buttons disabled background */
|
|
|
|
|
background: transparent !important;
|
2017-02-09 11:47:44 -05:00
|
|
|
}
|
|
|
|
|
|
2015-11-13 10:47:27 -05:00
|
|
|
|
2012-10-15 10:55:29 -04:00
|
|
|
/* ----------------------------------------------------------------------------
|
|
|
|
|
3.0 - Primary Button Style
|
|
|
|
|
---------------------------------------------------------------------------- */
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-primary {
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
background: #007cba;
|
|
|
|
|
border-color: #007cba;
|
2016-03-23 20:57:28 -04:00
|
|
|
color: #fff;
|
2012-10-15 10:55:29 -04:00
|
|
|
text-decoration: none;
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
text-shadow: none;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-primary.hover,
|
|
|
|
|
.wp-core-ui .button-primary:hover,
|
|
|
|
|
.wp-core-ui .button-primary.focus,
|
|
|
|
|
.wp-core-ui .button-primary:focus {
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
background: #0071a1;
|
|
|
|
|
border-color: #0071a1;
|
2012-10-15 10:55:29 -04:00
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-primary.focus,
|
|
|
|
|
.wp-core-ui .button-primary:focus {
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 1px #fff,
|
|
|
|
|
0 0 0 3px #007cba;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-primary.active,
|
|
|
|
|
.wp-core-ui .button-primary.active:hover,
|
|
|
|
|
.wp-core-ui .button-primary.active:focus,
|
|
|
|
|
.wp-core-ui .button-primary:active {
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
background: #00669b;
|
|
|
|
|
border-color: #00669b;
|
|
|
|
|
box-shadow: none;
|
2019-10-07 14:47:05 -04:00
|
|
|
color: #fff;
|
Say hello to a fresh new look for the WordPress admin.
Still to come: more color schemes, a responsive component, and more.
see #25858.
props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen.
Built from https://develop.svn.wordpress.org/trunk@26072
git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-primary[disabled],
|
|
|
|
|
.wp-core-ui .button-primary:disabled,
|
2014-01-26 19:28:13 -05:00
|
|
|
.wp-core-ui .button-primary-disabled,
|
|
|
|
|
.wp-core-ui .button-primary.disabled {
|
2015-11-18 17:47:26 -05:00
|
|
|
color: #66c6e4 !important;
|
|
|
|
|
background: #008ec2 !important;
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
border-color: #008ec2 !important;
|
2014-02-13 03:30:17 -05:00
|
|
|
box-shadow: none !important;
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
text-shadow: none !important;
|
2012-11-06 17:30:41 -05:00
|
|
|
cursor: default;
|
2012-10-15 10:55:29 -04:00
|
|
|
}
|
2012-10-16 09:34:01 -04:00
|
|
|
|
|
|
|
|
/* ----------------------------------------------------------------------------
|
|
|
|
|
4.0 - Button Groups
|
|
|
|
|
---------------------------------------------------------------------------- */
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-group {
|
2012-10-16 15:25:17 -04:00
|
|
|
position: relative;
|
2012-10-16 09:34:01 -04:00
|
|
|
display: inline-block;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
font-size: 0;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-group > .button {
|
2012-10-16 09:34:01 -04:00
|
|
|
display: inline-block;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
margin-right: -1px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-group > .button:first-child {
|
2012-10-16 09:34:01 -04:00
|
|
|
border-radius: 3px 0 0 3px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
.wp-core-ui .button-group > .button:last-child {
|
2012-10-16 09:34:01 -04:00
|
|
|
border-radius: 0 3px 3px 0;
|
2012-10-16 11:42:34 -04:00
|
|
|
}
|
2013-11-25 22:36:09 -05:00
|
|
|
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
.wp-core-ui .button-group > .button-primary + .button {
|
|
|
|
|
border-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-11 14:21:16 -04:00
|
|
|
.wp-core-ui .button-group > .button:focus {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-07 14:47:05 -04:00
|
|
|
/* pressed state e.g. a selected setting */
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
.wp-core-ui .button-group > .button.active {
|
|
|
|
|
background-color: #e2e4e7;
|
2019-10-07 14:47:05 -04:00
|
|
|
color: #00669b;
|
2019-09-29 17:53:57 -04:00
|
|
|
border-color: #016087;
|
2019-10-07 14:47:05 -04:00
|
|
|
box-shadow: inset 0 2px 5px -3px #016087;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wp-core-ui .button-group > .button.active:focus {
|
|
|
|
|
border-color: #007cba;
|
|
|
|
|
box-shadow:
|
|
|
|
|
inset 0 2px 5px -3px #016087,
|
|
|
|
|
0 0 0 1px #007cba;
|
Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).
Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.
Built from https://develop.svn.wordpress.org/trunk@46241
git-svn-id: http://core.svn.wordpress.org/trunk@46053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:43:58 -04:00
|
|
|
}
|
|
|
|
|
|
2013-11-25 22:36:09 -05:00
|
|
|
/* ----------------------------------------------------------------------------
|
|
|
|
|
5.0 - Responsive Button Styles
|
|
|
|
|
---------------------------------------------------------------------------- */
|
|
|
|
|
|
2019-01-17 02:41:52 -05:00
|
|
|
@media screen and (max-width: 782px) {
|
2013-11-25 22:36:09 -05:00
|
|
|
|
|
|
|
|
.wp-core-ui .button,
|
2013-12-02 14:26:09 -05:00
|
|
|
.wp-core-ui .button.button-large,
|
|
|
|
|
.wp-core-ui .button.button-small,
|
2013-11-25 22:36:09 -05:00
|
|
|
input#publish,
|
|
|
|
|
input#save-post,
|
|
|
|
|
a.preview {
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
padding: 0 14px;
|
|
|
|
|
line-height: 2.71428571; /* 38px */
|
2013-11-25 22:36:09 -05:00
|
|
|
font-size: 14px;
|
|
|
|
|
vertical-align: middle;
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
min-height: 40px;
|
2013-11-25 22:36:09 -05:00
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
2014-02-13 03:30:17 -05:00
|
|
|
|
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time.
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.
Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.
Built from https://develop.svn.wordpress.org/trunk@48232
git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
|
|
|
/* Copy attachment URL button in the legacy edit media page. */
|
|
|
|
|
.wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-25 22:36:09 -05:00
|
|
|
#media-upload.wp-core-ui .button {
|
|
|
|
|
padding: 0 10px 1px;
|
2019-09-23 11:27:57 -04:00
|
|
|
min-height: 24px;
|
2013-11-25 22:36:09 -05:00
|
|
|
line-height: 22px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
2013-12-02 14:26:09 -05:00
|
|
|
|
2014-07-27 08:15:16 -04:00
|
|
|
.media-frame.mode-grid .bulk-select .button {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-25 22:36:09 -05:00
|
|
|
/* Publish Metabox Options */
|
|
|
|
|
.wp-core-ui .save-post-status.button {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 14px 0 10px; /* 14px right margin to match all other buttons */
|
|
|
|
|
}
|
2014-02-13 03:30:17 -05:00
|
|
|
|
2013-12-04 14:44:09 -05:00
|
|
|
/* Reset responsive styles in Press This, Customizer */
|
2013-11-25 22:36:09 -05:00
|
|
|
|
2015-03-01 20:18:27 -05:00
|
|
|
.wp-core-ui.wp-customizer .button {
|
2013-11-27 14:16:10 -05:00
|
|
|
font-size: 13px;
|
Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
|
|
|
line-height: 2.15384615; /* 28px */
|
|
|
|
|
min-height: 30px;
|
2013-11-27 14:16:10 -05:00
|
|
|
margin: 0;
|
2013-12-04 14:44:09 -05:00
|
|
|
vertical-align: inherit;
|
2013-11-27 14:16:10 -05:00
|
|
|
}
|
2014-02-13 03:30:17 -05:00
|
|
|
|
2017-04-14 05:31:43 -04:00
|
|
|
.media-modal-content .media-toolbar-primary .media-button {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-02 14:26:09 -05:00
|
|
|
/* Reset responsive styles on Log in button on iframed login form */
|
2014-02-13 03:30:17 -05:00
|
|
|
|
2013-12-02 14:26:09 -05:00
|
|
|
.interim-login .button.button-large {
|
2019-09-23 11:27:57 -04:00
|
|
|
min-height: 30px;
|
2019-05-30 08:42:52 -04:00
|
|
|
line-height: 2;
|
2013-12-02 14:26:09 -05:00
|
|
|
padding: 0 12px 2px;
|
|
|
|
|
}
|
2014-02-13 03:30:17 -05:00
|
|
|
|
2013-11-25 22:36:09 -05:00
|
|
|
}
|
