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 .nux-dot-tip::before, .nux-dot-tip::after { |
73 .nux-dot-tip::before, .nux-dot-tip::after { |
35 border-radius: 100%; |
74 border-radius: 100%; |
36 content: " "; |
75 content: " "; |
37 pointer-events: none; |
76 pointer-events: none; |
38 position: absolute; } |
77 position: absolute; } |
39 |
78 |
40 .nux-dot-tip::before { |
79 .nux-dot-tip::before { |
41 animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62); |
80 animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62); |
42 background: rgba(0, 115, 156, 0.9); |
81 background: rgba(0, 115, 156, 0.9); |
|
82 opacity: 0.9; |
43 height: 24px; |
83 height: 24px; |
44 right: -12px; |
84 right: -12px; |
45 top: -12px; |
85 top: -12px; |
46 transform: scale(0.33333); |
86 transform: scale(0.33333); |
47 width: 24px; } |
87 width: 24px; } |
57 100% { |
97 100% { |
58 background: rgba(0, 115, 156, 0); |
98 background: rgba(0, 115, 156, 0); |
59 transform: scale(1); } } |
99 transform: scale(1); } } |
60 |
100 |
61 .nux-dot-tip .components-popover__content { |
101 .nux-dot-tip .components-popover__content { |
62 padding: 5px 20px 5px 41px; |
|
63 width: 350px; } |
102 width: 350px; } |
|
103 .nux-dot-tip .components-popover__content > div { |
|
104 padding: 20px 18px; } |
64 @media (min-width: 600px) { |
105 @media (min-width: 600px) { |
65 .nux-dot-tip .components-popover__content { |
106 .nux-dot-tip .components-popover__content { |
66 width: 450px; } } |
107 width: 450px; } } |
67 .nux-dot-tip .components-popover__content .nux-dot-tip__disable { |
108 .nux-dot-tip .components-popover__content .nux-dot-tip__disable { |
68 position: absolute; |
109 position: absolute; |
69 left: 0; |
110 left: 0; |
70 top: 0; } |
111 top: 0; } |
71 |
112 |
72 .nux-dot-tip.is-top { |
113 .nux-dot-tip[data-y-axis="top"] { |
73 margin-top: -4px; } |
114 margin-top: -4px; } |
74 |
115 |
75 .nux-dot-tip.is-bottom { |
116 .nux-dot-tip[data-y-axis="bottom"] { |
76 margin-top: 4px; } |
117 margin-top: 4px; } |
77 |
118 |
78 .nux-dot-tip.is-middle.is-left { |
119 .nux-dot-tip[data-y-axis="middle"][data-y-axis="left"] { |
79 margin-right: -4px; } |
120 margin-right: -4px; } |
80 |
121 |
81 .nux-dot-tip.is-middle.is-right { |
122 .nux-dot-tip[data-y-axis="middle"][data-y-axis="right"] { |
82 margin-right: 4px; } |
123 margin-right: 4px; } |
83 |
124 |
84 .nux-dot-tip.is-top .components-popover__content { |
125 .nux-dot-tip[data-y-axis="top"] .components-popover__content { |
85 margin-bottom: 20px; } |
126 margin-bottom: 20px; } |
86 |
127 |
87 .nux-dot-tip.is-bottom .components-popover__content { |
128 .nux-dot-tip[data-y-axis="bottom"] .components-popover__content { |
88 margin-top: 20px; } |
129 margin-top: 20px; } |
89 |
130 |
90 .nux-dot-tip.is-middle.is-left .components-popover__content { |
131 .nux-dot-tip[data-y-axis="middle"][data-y-axis="left"] .components-popover__content { |
91 margin-left: 20px; } |
132 margin-left: 20px; } |
92 |
133 |
93 .nux-dot-tip.is-middle.is-right .components-popover__content { |
134 .nux-dot-tip[data-y-axis="middle"][data-y-axis="right"] .components-popover__content { |
94 margin-right: 20px; } |
135 margin-right: 20px; } |
95 |
136 |
96 .nux-dot-tip:not(.is-mobile).is-left, .nux-dot-tip:not(.is-mobile).is-center, .nux-dot-tip:not(.is-mobile).is-right { |
137 .nux-dot-tip[data-y-axis="left"], .nux-dot-tip[data-y-axis="center"], .nux-dot-tip[data-y-axis="right"] { |
97 z-index: 1000001; } |
138 z-index: 1000001; } |
98 @media (max-width: 600px) { |
139 @media (max-width: 600px) { |
99 .nux-dot-tip:not(.is-mobile).is-left .components-popover__content, .nux-dot-tip:not(.is-mobile).is-center .components-popover__content, .nux-dot-tip:not(.is-mobile).is-right .components-popover__content { |
140 .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 { |
100 align-self: end; |
141 -ms-grid-row-align: end; |
|
142 align-self: end; |
101 right: 5px; |
143 right: 5px; |
102 margin: 20px 0 0 0; |
144 margin: 20px 0 0 0; |
103 max-width: none !important; |
145 max-width: none !important; |
104 position: fixed; |
146 position: fixed; |
105 left: 5px; |
147 left: 5px; |
106 width: auto; } } |
148 width: auto; } } |
107 |
149 |
108 .nux-dot-tip.components-popover:not(.is-mobile):not(.is-middle).is-right .components-popover__content { |
150 .nux-dot-tip.components-popover:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content { |
109 margin-left: 0; } |
151 margin-left: 0; } |
110 |
152 |
111 .nux-dot-tip.components-popover:not(.is-mobile):not(.is-middle).is-left .components-popover__content { |
153 .nux-dot-tip.components-popover:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content { |
112 margin-right: 0; } |
154 margin-right: 0; } |
113 |
155 |
114 .nux-dot-tip.components-popover.edit-post-more-menu__content:not(.is-mobile):not(.is-middle).is-right .components-popover__content { |
156 .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content { |
115 margin-left: -12px; } |
157 margin-left: -12px; } |
116 |
158 |
117 .nux-dot-tip.components-popover.edit-post-more-menu__content:not(.is-mobile):not(.is-middle).is-left .components-popover__content { |
159 .nux-dot-tip.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content { |
118 margin-right: -12px; } |
160 margin-right: -12px; } |