1 /** |
1 .wp-block-video.wp-block-video.is-selected .components-placeholder{ |
2 * Colors |
2 background-color:#fff; |
3 */ |
3 border:none; |
4 /** |
4 border-radius:2px; |
5 * Breakpoints & Media Queries |
5 box-shadow:inset 0 0 0 1px #1e1e1e; |
6 */ |
6 color:#1e1e1e; |
7 /** |
7 } |
8 * SCSS Variables. |
8 .wp-block-video.wp-block-video.is-selected .components-placeholder>svg{ |
9 * |
9 opacity:0; |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 } |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 .wp-block-video.wp-block-video.is-selected .components-placeholder .components-placeholder__illustration{ |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
12 display:none; |
13 */ |
13 } |
14 /** |
14 .wp-block-video.wp-block-video.is-selected .components-placeholder:before{ |
15 * Colors |
15 opacity:0; |
16 */ |
16 } |
17 /** |
17 .wp-block-video.wp-block-video .components-button,.wp-block-video.wp-block-video .components-placeholder__instructions,.wp-block-video.wp-block-video .components-placeholder__label{ |
18 * Fonts & basic variables. |
18 transition:none; |
19 */ |
|
20 /** |
|
21 * Grid System. |
|
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
|
23 */ |
|
24 /** |
|
25 * Dimensions. |
|
26 */ |
|
27 /** |
|
28 * Shadows. |
|
29 */ |
|
30 /** |
|
31 * Editor widths. |
|
32 */ |
|
33 /** |
|
34 * Block & Editor UI. |
|
35 */ |
|
36 /** |
|
37 * Block paddings. |
|
38 */ |
|
39 /** |
|
40 * React Native specific. |
|
41 * These variables do not appear to be used anywhere else. |
|
42 */ |
|
43 /** |
|
44 * Converts a hex value into the rgb equivalent. |
|
45 * |
|
46 * @param {string} hex - the hexadecimal value to convert |
|
47 * @return {string} comma separated rgb values |
|
48 */ |
|
49 /** |
|
50 * Breakpoint mixins |
|
51 */ |
|
52 /** |
|
53 * Long content fade mixin |
|
54 * |
|
55 * Creates a fading overlay to signify that the content is longer |
|
56 * than the space allows. |
|
57 */ |
|
58 /** |
|
59 * Focus styles. |
|
60 */ |
|
61 /** |
|
62 * Applies editor left position to the selector passed as argument |
|
63 */ |
|
64 /** |
|
65 * Styles that are reused verbatim in a few places |
|
66 */ |
|
67 /** |
|
68 * Allows users to opt-out of animations via OS-level preferences. |
|
69 */ |
|
70 /** |
|
71 * Reset default styles for JavaScript UI based pages. |
|
72 * This is a WP-admin agnostic reset |
|
73 */ |
|
74 /** |
|
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
|
76 */ |
|
77 .wp-block[data-align=center] > .wp-block-video { |
|
78 text-align: center; |
|
79 } |
19 } |
80 |
20 |
81 .wp-block-video { |
21 .wp-block[data-align=center]>.wp-block-video{ |
82 position: relative; |
22 text-align:center; |
83 } |
|
84 .wp-block-video.is-transient video { |
|
85 opacity: 0.3; |
|
86 } |
|
87 .wp-block-video .components-spinner { |
|
88 position: absolute; |
|
89 top: 50%; |
|
90 left: 50%; |
|
91 margin-top: -9px; |
|
92 margin-left: -9px; |
|
93 } |
23 } |
94 |
24 |
95 .editor-video-poster-control .components-base-control__label { |
25 .wp-block-video{ |
96 display: block; |
26 position:relative; |
97 } |
27 } |
98 .editor-video-poster-control .components-button { |
28 .wp-block-video.is-transient video{ |
99 margin-right: 8px; |
29 opacity:.3; |
|
30 } |
|
31 .wp-block-video .components-spinner{ |
|
32 left:50%; |
|
33 margin-left:-9px; |
|
34 margin-top:-9px; |
|
35 position:absolute; |
|
36 top:50%; |
100 } |
37 } |
101 |
38 |
102 .block-library-video-tracks-editor { |
39 .editor-video-poster-control .components-base-control__label{ |
103 z-index: 159990; |
40 display:block; |
|
41 } |
|
42 .editor-video-poster-control .components-button{ |
|
43 margin-right:8px; |
104 } |
44 } |
105 |
45 |
106 .block-library-video-tracks-editor > .components-popover__content { |
46 .block-library-video-tracks-editor{ |
107 width: 360px; |
47 z-index:159990; |
108 } |
48 } |
109 |
49 |
110 .block-library-video-tracks-editor__track-list-track { |
50 .block-library-video-tracks-editor__track-list-track{ |
111 display: flex; |
51 padding-left:12px; |
112 place-content: space-between; |
|
113 align-items: baseline; |
|
114 padding-left: 12px; |
|
115 } |
52 } |
116 |
53 |
117 .block-library-video-tracks-editor__single-track-editor-label-language { |
54 .block-library-video-tracks-editor__single-track-editor-kind-select{ |
118 display: flex; |
55 max-width:240px; |
119 margin-top: 12px; |
|
120 } |
|
121 .block-library-video-tracks-editor__single-track-editor-label-language > .components-base-control { |
|
122 width: 50%; |
|
123 } |
|
124 .block-library-video-tracks-editor__single-track-editor-label-language > .components-base-control:first-child { |
|
125 margin-right: 16px; |
|
126 } |
56 } |
127 |
57 |
128 .block-library-video-tracks-editor__single-track-editor-kind-select { |
58 .block-library-video-tracks-editor__single-track-editor-edit-track-label{ |
129 max-width: 240px; |
59 color:#757575; |
|
60 display:block; |
|
61 font-size:11px; |
|
62 font-weight:500; |
|
63 margin-top:4px; |
|
64 text-transform:uppercase; |
130 } |
65 } |
131 |
66 |
132 .block-library-video-tracks-editor__single-track-editor-buttons-container { |
67 .block-library-video-tracks-editor>.components-popover__content{ |
133 display: flex; |
68 padding:0; |
134 place-content: space-between; |
69 width:360px; |
135 margin-top: 32px; |
|
136 } |
70 } |
137 |
71 |
138 .block-library-video-tracks-editor__single-track-editor-edit-track-label { |
72 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label,.block-library-video-tracks-editor__track-list .components-menu-group__label{ |
139 margin-top: 4px; |
73 padding:0; |
140 margin-bottom: 12px; |
|
141 color: #757575; |
|
142 text-transform: uppercase; |
|
143 font-size: 11px; |
|
144 font-weight: 500; |
|
145 display: block; |
|
146 } |
74 } |
147 |
75 |
148 .block-library-video-tracks-editor > .components-popover__content > div { |
76 .block-library-video-tracks-editor__add-tracks-container,.block-library-video-tracks-editor__single-track-editor,.block-library-video-tracks-editor__track-list{ |
149 padding: 0; |
77 padding:12px; |
150 } |
78 } |
151 |
|
152 .block-library-video-tracks-editor__track-list .components-menu-group__label, |
|
153 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label { |
|
154 padding: 0; |
|
155 } |
|
156 |
|
157 .block-library-video-tracks-editor__single-track-editor, |
|
158 .block-library-video-tracks-editor__track-list, |
|
159 .block-library-video-tracks-editor__add-tracks-container { |
|
160 padding: 12px; |
|
161 } |
|
162 |
|
163 .block-library-video-tracks-editor__single-track-editor .components-base-control .components-base-control__label { |
|
164 margin-bottom: 4px; |
|
165 } |
|
166 .block-library-video-tracks-editor__single-track-editor .components-base-control .components-base-control__field { |
|
167 margin-bottom: 12px; |
|
168 } |
|
169 .block-library-video-tracks-editor__single-track-editor .components-base-control .components-text-control__input { |
|
170 margin-left: 0; |
|
171 } |
|
172 .block-library-video-tracks-editor__single-track-editor .components-base-control .components-input-control__label { |
|
173 margin-bottom: 4px; |
|
174 } |
|