15 * |
45 * |
16 * Creates a fading overlay to signify that the content is longer |
46 * Creates a fading overlay to signify that the content is longer |
17 * than the space allows. |
47 * than the space allows. |
18 */ |
48 */ |
19 /** |
49 /** |
20 * Button states and focus styles |
50 * Focus styles. |
21 */ |
51 */ |
22 /** |
52 /** |
23 * Applies editor left position to the selector passed as argument |
53 * Applies editor left position to the selector passed as argument |
24 */ |
|
25 /** |
|
26 * Applies editor right position to the selector passed as argument |
|
27 */ |
54 */ |
28 /** |
55 /** |
29 * Styles that are reused verbatim in a few places |
56 * Styles that are reused verbatim in a few places |
30 */ |
57 */ |
31 /** |
58 /** |
32 * Allows users to opt-out of animations via OS-level preferences. |
59 * Allows users to opt-out of animations via OS-level preferences. |
33 */ |
60 */ |
|
61 /** |
|
62 * Reset default styles for JavaScript UI based pages. |
|
63 * This is a WP-admin agnostic reset |
|
64 */ |
|
65 /** |
|
66 * Reset the WP Admin page styles for Gutenberg-like pages. |
|
67 */ |
|
68 :root { |
|
69 --wp-admin-theme-color: #007cba; |
|
70 --wp-admin-theme-color-darker-10: #006ba1; |
|
71 --wp-admin-theme-color-darker-20: #005a87; } |
|
72 |
34 .block-editor-format-toolbar__image-container-content { |
73 .block-editor-format-toolbar__image-container-content { |
35 display: flex; } |
74 display: flex; } |
36 .block-editor-format-toolbar__image-container-content .components-icon-button { |
75 .block-editor-format-toolbar__image-container-content .components-button { |
37 height: 52px; |
76 align-self: flex-end; |
38 align-self: flex-end; } |
77 height: 30px; |
|
78 margin-bottom: 8px; |
|
79 margin-left: 8px; |
|
80 padding: 0 6px; } |
39 |
81 |
40 .block-editor-format-toolbar__image-container-value { |
82 .block-editor-format-toolbar__image-container-value { |
41 margin: 7px; |
83 margin: 7px; |
42 flex-grow: 1; |
84 flex-grow: 1; |
43 flex-shrink: 1; |
85 flex-shrink: 1; |
44 white-space: nowrap; |
86 white-space: nowrap; |
45 min-width: 150px; |
87 min-width: 150px; |
46 max-width: 500px; } |
88 max-width: 500px; } |
47 .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__field { |
89 .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__field { |
48 margin-bottom: 0; } |
90 margin-bottom: 0; } |
|
91 .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__label { |
|
92 display: block; } |
49 |
93 |
50 .block-editor-format-toolbar__link-container-content { |
94 .block-editor-format-toolbar__link-container-content { |
51 display: flex; } |
95 display: flex; } |
52 |
96 |
53 .block-editor-format-toolbar__link-container-value { |
97 .block-editor-format-toolbar__link-container-value { |
59 white-space: nowrap; |
103 white-space: nowrap; |
60 min-width: 150px; |
104 min-width: 150px; |
61 max-width: 500px; } |
105 max-width: 500px; } |
62 .block-editor-format-toolbar__link-container-value.has-invalid-link { |
106 .block-editor-format-toolbar__link-container-value.has-invalid-link { |
63 color: #d94f4f; } |
107 color: #d94f4f; } |
|
108 |
|
109 .components-inline-color__indicator { |
|
110 position: absolute; |
|
111 background: #000; |
|
112 height: 3px; |
|
113 width: 20px; |
|
114 bottom: 6px; |
|
115 right: auto; |
|
116 left: auto; |
|
117 margin: 0 5px; } |
|
118 |
|
119 .components-inline-color-popover .components-popover__content > div { |
|
120 padding: 20px 18px; } |
|
121 |
|
122 .components-inline-color-popover .components-popover__content .components-color-palette { |
|
123 margin-top: 0.6rem; } |
|
124 |
|
125 .components-inline-color-popover .components-popover__content .components-base-control__title { |
|
126 display: block; |
|
127 margin-bottom: 16px; |
|
128 font-weight: 600; |
|
129 color: #191e23; } |
|
130 |
|
131 .components-inline-color-popover .components-popover__content .component-color-indicator { |
|
132 vertical-align: text-bottom; } |
|
133 |
|
134 .format-library-text-color-button { |
|
135 position: relative; } |
|
136 |
|
137 .format-library-text-color-button__indicator { |
|
138 height: 4px; |
|
139 width: 20px; |
|
140 position: absolute; |
|
141 bottom: 10px; |
|
142 right: 8px; } |