66 * Reset the WP Admin page styles for Gutenberg-like pages. |
69 * Reset the WP Admin page styles for Gutenberg-like pages. |
67 */ |
70 */ |
68 :root { |
71 :root { |
69 --wp-admin-theme-color: #007cba; |
72 --wp-admin-theme-color: #007cba; |
70 --wp-admin-theme-color-darker-10: #006ba1; |
73 --wp-admin-theme-color-darker-10: #006ba1; |
71 --wp-admin-theme-color-darker-20: #005a87; } |
74 --wp-admin-theme-color-darker-20: #005a87; |
|
75 --wp-admin-border-width-focus: 2px; |
|
76 } |
|
77 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
78 :root { |
|
79 --wp-admin-border-width-focus: 1.5px; |
|
80 } |
|
81 } |
|
82 |
|
83 .block-editor-format-toolbar__image-popover { |
|
84 z-index: 159990; |
|
85 } |
72 |
86 |
73 .block-editor-format-toolbar__image-container-content { |
87 .block-editor-format-toolbar__image-container-content { |
74 display: flex; } |
88 display: flex; |
75 .block-editor-format-toolbar__image-container-content .components-button { |
89 } |
76 align-self: flex-end; |
90 .block-editor-format-toolbar__image-container-content .components-button { |
77 height: 30px; |
91 align-self: flex-end; |
78 margin-bottom: 8px; |
92 height: 30px; |
79 margin-right: 8px; |
93 margin-bottom: 8px; |
80 padding: 0 6px; } |
94 margin-right: 8px; |
|
95 padding: 0 6px; |
|
96 } |
81 |
97 |
82 .block-editor-format-toolbar__image-container-value { |
98 .block-editor-format-toolbar__image-container-value { |
83 margin: 7px; |
99 margin: 7px; |
84 flex-grow: 1; |
100 flex-grow: 1; |
85 flex-shrink: 1; |
101 flex-shrink: 1; |
86 white-space: nowrap; |
102 white-space: nowrap; |
87 min-width: 150px; |
103 min-width: 150px; |
88 max-width: 500px; } |
104 max-width: 500px; |
89 .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__field { |
105 } |
90 margin-bottom: 0; } |
106 .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__field { |
91 .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__label { |
107 margin-bottom: 0; |
92 display: block; } |
108 } |
|
109 .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__label { |
|
110 display: block; |
|
111 } |
93 |
112 |
94 .block-editor-format-toolbar__link-container-content { |
113 .block-editor-format-toolbar__link-container-content { |
95 display: flex; } |
114 display: flex; |
|
115 } |
96 |
116 |
97 .block-editor-format-toolbar__link-container-value { |
117 .block-editor-format-toolbar__link-container-value { |
98 margin: 7px; |
118 margin: 7px; |
99 flex-grow: 1; |
119 flex-grow: 1; |
100 flex-shrink: 1; |
120 flex-shrink: 1; |
101 overflow: hidden; |
121 overflow: hidden; |
102 text-overflow: ellipsis; |
122 text-overflow: ellipsis; |
103 white-space: nowrap; |
123 white-space: nowrap; |
104 min-width: 150px; |
124 min-width: 150px; |
105 max-width: 500px; } |
125 max-width: 500px; |
106 .block-editor-format-toolbar__link-container-value.has-invalid-link { |
126 } |
107 color: #d94f4f; } |
127 .block-editor-format-toolbar__link-container-value.has-invalid-link { |
|
128 color: #cc1818; |
|
129 } |
108 |
130 |
109 .components-inline-color__indicator { |
131 .components-inline-color__indicator { |
110 position: absolute; |
132 position: absolute; |
111 background: #000; |
133 background: #000; |
112 height: 3px; |
134 height: 3px; |
113 width: 20px; |
135 width: 20px; |
114 bottom: 6px; |
136 bottom: 6px; |
115 left: auto; |
137 left: auto; |
116 right: auto; |
138 right: auto; |
117 margin: 0 5px; } |
139 margin: 0 5px; |
|
140 } |
118 |
141 |
119 .components-inline-color-popover .components-popover__content > div { |
142 .components-inline-color-popover .components-popover__content > div { |
120 padding: 20px 18px; } |
143 padding: 20px 18px; |
121 |
144 } |
122 .components-inline-color-popover .components-popover__content .components-color-palette { |
145 .components-inline-color-popover .components-popover__content .components-color-palette { |
123 margin-top: 0.6rem; } |
146 margin-top: 0.6rem; |
124 |
147 } |
125 .components-inline-color-popover .components-popover__content .components-base-control__title { |
148 .components-inline-color-popover .components-popover__content .components-base-control__title { |
126 display: block; |
149 display: block; |
127 margin-bottom: 16px; |
150 margin-bottom: 16px; |
128 font-weight: 600; |
151 font-weight: 600; |
129 color: #191e23; } |
152 color: #191e23; |
130 |
153 } |
131 .components-inline-color-popover .components-popover__content .component-color-indicator { |
154 .components-inline-color-popover .components-popover__content .component-color-indicator { |
132 vertical-align: text-bottom; } |
155 vertical-align: text-bottom; |
|
156 } |
133 |
157 |
134 .format-library-text-color-button { |
158 .format-library-text-color-button { |
135 position: relative; } |
159 position: relative; |
|
160 } |
136 |
161 |
137 .format-library-text-color-button__indicator { |
162 .format-library-text-color-button__indicator { |
138 height: 4px; |
163 height: 4px; |
139 width: 20px; |
164 width: 20px; |
140 position: absolute; |
165 position: absolute; |
141 bottom: 10px; |
166 bottom: 10px; |
142 left: 8px; } |
167 left: 8px; |
|
168 } |