1 /** |
1 :root{ |
2 * Colors |
2 --wp-admin-theme-color:#007cba; |
3 */ |
3 --wp-admin-theme-color--rgb:0, 124, 186; |
4 /** |
4 --wp-admin-theme-color-darker-10:#006ba1; |
5 * Breakpoints & Media Queries |
5 --wp-admin-theme-color-darker-10--rgb:0, 107, 161; |
6 */ |
6 --wp-admin-theme-color-darker-20:#005a87; |
7 /** |
7 --wp-admin-theme-color-darker-20--rgb:0, 90, 135; |
8 * SCSS Variables. |
8 --wp-admin-border-width-focus:2px; |
9 * |
9 --wp-block-synced-color:#7a00df; |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 --wp-block-synced-color--rgb:122, 0, 223; |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 --wp-bound-block-color:var(--wp-block-synced-color); |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
|
13 */ |
|
14 /** |
|
15 * Colors |
|
16 */ |
|
17 /** |
|
18 * Fonts & basic variables. |
|
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 :root { |
|
78 --wp-admin-theme-color: #007cba; |
|
79 --wp-admin-theme-color--rgb: 0, 124, 186; |
|
80 --wp-admin-theme-color-darker-10: #006ba1; |
|
81 --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; |
|
82 --wp-admin-theme-color-darker-20: #005a87; |
|
83 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; |
|
84 --wp-admin-border-width-focus: 2px; |
|
85 } |
12 } |
86 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
13 @media (min-resolution:192dpi){ |
87 :root { |
14 :root{ |
88 --wp-admin-border-width-focus: 1.5px; |
15 --wp-admin-border-width-focus:1.5px; |
89 } |
16 } |
90 } |
17 } |
91 |
18 |
92 .nux-dot-tip::before, .nux-dot-tip::after { |
19 .nux-dot-tip:after,.nux-dot-tip:before{ |
93 border-radius: 100%; |
20 border-radius:100%; |
94 content: " "; |
21 content:" "; |
95 pointer-events: none; |
22 pointer-events:none; |
96 position: absolute; |
23 position:absolute; |
97 } |
24 } |
98 .nux-dot-tip::before { |
25 .nux-dot-tip:before{ |
99 animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62); |
26 animation:nux-pulse 1.6s cubic-bezier(.17, .67, .92, .62) infinite; |
100 background: rgba(0, 115, 156, 0.9); |
27 background:#00739ce6; |
101 opacity: 0.9; |
28 height:24px; |
102 height: 24px; |
29 left:-12px; |
103 left: -12px; |
30 opacity:.9; |
104 top: -12px; |
31 top:-12px; |
105 transform: scale(0.3333333333); |
32 transform:scale(.3333333333); |
106 width: 24px; |
33 width:24px; |
107 } |
34 } |
108 .nux-dot-tip::after { |
35 .nux-dot-tip:after{ |
109 background: #00739c; |
36 background:#00739c; |
110 height: 8px; |
37 height:8px; |
111 left: -4px; |
38 left:-4px; |
112 top: -4px; |
39 top:-4px; |
113 width: 8px; |
40 width:8px; |
114 } |
41 } |
115 @keyframes nux-pulse { |
42 @keyframes nux-pulse{ |
116 100% { |
43 to{ |
117 background: rgba(0, 115, 156, 0); |
44 background:#00739c00; |
118 transform: scale(1); |
45 transform:scale(1); |
119 } |
46 } |
120 } |
47 } |
121 .nux-dot-tip .components-popover__content { |
48 .nux-dot-tip .components-popover__content{ |
122 width: 350px; |
49 padding:20px 18px; |
|
50 width:350px; |
123 } |
51 } |
124 .nux-dot-tip .components-popover__content > div { |
52 @media (min-width:600px){ |
125 padding: 20px 18px; |
53 .nux-dot-tip .components-popover__content{ |
126 } |
54 width:450px; |
127 @media (min-width: 600px) { |
|
128 .nux-dot-tip .components-popover__content { |
|
129 width: 450px; |
|
130 } |
55 } |
131 } |
56 } |
132 .nux-dot-tip .components-popover__content .nux-dot-tip__disable { |
57 .nux-dot-tip .components-popover__content .nux-dot-tip__disable{ |
133 position: absolute; |
58 position:absolute; |
134 right: 0; |
59 right:0; |
135 top: 0; |
60 top:0; |
136 } |
61 } |
137 .nux-dot-tip[data-y-axis=top] { |
62 .nux-dot-tip[data-y-axis=top]{ |
138 margin-top: -4px; |
63 margin-top:-4px; |
139 } |
64 } |
140 .nux-dot-tip[data-y-axis=bottom] { |
65 .nux-dot-tip[data-y-axis=bottom]{ |
141 margin-top: 4px; |
66 margin-top:4px; |
142 } |
67 } |
143 .nux-dot-tip[data-y-axis=middle][data-y-axis=left] { |
68 .nux-dot-tip[data-y-axis=middle][data-y-axis=left]{ |
144 margin-left: -4px; |
69 margin-left:-4px; |
145 } |
70 } |
146 .nux-dot-tip[data-y-axis=middle][data-y-axis=right] { |
71 .nux-dot-tip[data-y-axis=middle][data-y-axis=right]{ |
147 margin-left: 4px; |
72 margin-left:4px; |
148 } |
73 } |
149 .nux-dot-tip[data-y-axis=top] .components-popover__content { |
74 .nux-dot-tip[data-y-axis=top] .components-popover__content{ |
150 margin-bottom: 20px; |
75 margin-bottom:20px; |
151 } |
76 } |
152 .nux-dot-tip[data-y-axis=bottom] .components-popover__content { |
77 .nux-dot-tip[data-y-axis=bottom] .components-popover__content{ |
153 margin-top: 20px; |
78 margin-top:20px; |
154 } |
79 } |
155 .nux-dot-tip[data-y-axis=middle][data-y-axis=left] .components-popover__content { |
80 .nux-dot-tip[data-y-axis=middle][data-y-axis=left] .components-popover__content{ |
156 margin-right: 20px; |
81 margin-right:20px; |
157 } |
82 } |
158 .nux-dot-tip[data-y-axis=middle][data-y-axis=right] .components-popover__content { |
83 .nux-dot-tip[data-y-axis=middle][data-y-axis=right] .components-popover__content{ |
159 margin-left: 20px; |
84 margin-left:20px; |
160 } |
85 } |
161 .nux-dot-tip[data-y-axis=left], .nux-dot-tip[data-y-axis=center], .nux-dot-tip[data-y-axis=right] { |
86 .nux-dot-tip[data-y-axis=center],.nux-dot-tip[data-y-axis=left],.nux-dot-tip[data-y-axis=right]{ |
162 z-index: 1000001; |
87 z-index:1000001; |
163 } |
88 } |
164 @media (max-width: 600px) { |
89 @media (max-width:600px){ |
165 .nux-dot-tip[data-y-axis=left] .components-popover__content, .nux-dot-tip[data-y-axis=center] .components-popover__content, .nux-dot-tip[data-y-axis=right] .components-popover__content { |
90 .nux-dot-tip[data-y-axis=center] .components-popover__content,.nux-dot-tip[data-y-axis=left] .components-popover__content,.nux-dot-tip[data-y-axis=right] .components-popover__content{ |
166 align-self: end; |
91 align-self:end; |
167 left: 5px; |
92 left:5px; |
168 margin: 20px 0 0 0; |
93 margin:20px 0 0; |
169 max-width: none !important; |
94 max-width:none !important; |
170 position: fixed; |
95 position:fixed; |
171 right: 5px; |
96 right:5px; |
172 width: auto; |
97 width:auto; |
173 } |
98 } |
174 } |
99 } |
175 .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content { |
100 .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content{ |
176 /*!rtl:ignore*/ |
101 margin-left:0; |
177 margin-left: 0; |
|
178 } |
102 } |
179 .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content { |
103 .nux-dot-tip.components-popover:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content{ |
180 /*!rtl:ignore*/ |
104 margin-right:0; |
181 margin-right: 0; |
|
182 } |
105 } |
183 .nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content { |
106 .nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=right] .components-popover__content{ |
184 /*!rtl:ignore*/ |
107 margin-left:-12px; |
185 margin-left: -12px; |
|
186 } |
108 } |
187 .nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content { |
109 .nux-dot-tip.components-popover.interface-more-menu-dropdown__content:not([data-y-axis=middle])[data-y-axis=left] .components-popover__content{ |
188 /*!rtl:ignore*/ |
110 margin-right:-12px; |
189 margin-right: -12px; |
|
190 } |
111 } |