1+ /**
2+ * Rank Math API Manager - Admin Styles
3+ *
4+ * @since 1.0.7
5+ */
6+
7+ /* Plugin header styling */
8+ .rank-math-api-header {
9+ background : # fff ;
10+ border : 1px solid # ccd0d4 ;
11+ border-radius : 4px ;
12+ padding : 20px ;
13+ margin-bottom : 20px ;
14+ }
15+
16+ .rank-math-api-header h1 {
17+ margin : 0 0 10px 0 ;
18+ color : # 23282d ;
19+ }
20+
21+ .rank-math-api-header .description {
22+ color : # 666 ;
23+ font-size : 14px ;
24+ margin : 0 ;
25+ }
26+
27+ /* Status cards */
28+ .rank-math-api-status-grid {
29+ display : grid;
30+ grid-template-columns : repeat (auto-fit, minmax (300px , 1fr ));
31+ gap : 20px ;
32+ margin-bottom : 30px ;
33+ }
34+
35+ .rank-math-api-status-card {
36+ background : # fff ;
37+ border : 1px solid # ccd0d4 ;
38+ border-radius : 4px ;
39+ padding : 20px ;
40+ box-shadow : 0 1px 1px rgba (0 , 0 , 0 , .04 );
41+ }
42+
43+ .rank-math-api-status-card h3 {
44+ margin : 0 0 15px 0 ;
45+ color : # 23282d ;
46+ font-size : 16px ;
47+ font-weight : 600 ;
48+ }
49+
50+ .rank-math-api-status-card .status-item {
51+ display : flex;
52+ justify-content : space-between;
53+ align-items : center;
54+ padding : 8px 0 ;
55+ border-bottom : 1px solid # f0f0f1 ;
56+ }
57+
58+ .rank-math-api-status-card .status-item : last-child {
59+ border-bottom : none;
60+ }
61+
62+ .rank-math-api-status-card .status-label {
63+ font-weight : 500 ;
64+ color : # 50575e ;
65+ }
66+
67+ .rank-math-api-status-card .status-value {
68+ color : # 23282d ;
69+ }
70+
71+ .rank-math-api-status-card .status-value .success {
72+ color : # 00a32a ;
73+ }
74+
75+ .rank-math-api-status-card .status-value .warning {
76+ color : # dba617 ;
77+ }
78+
79+ .rank-math-api-status-card .status-value .error {
80+ color : # d63638 ;
81+ }
82+
83+ /* Update section */
84+ .rank-math-api-update-section {
85+ background : # fff ;
86+ border : 1px solid # ccd0d4 ;
87+ border-radius : 4px ;
88+ padding : 20px ;
89+ margin-bottom : 20px ;
90+ }
91+
92+ .rank-math-api-update-section h3 {
93+ margin : 0 0 15px 0 ;
94+ color : # 23282d ;
95+ }
96+
97+ .rank-math-api-update-actions {
98+ display : flex;
99+ gap : 10px ;
100+ flex-wrap : wrap;
101+ }
102+
103+ .rank-math-api-update-actions .button {
104+ margin : 0 ;
105+ }
106+
107+ /* API endpoints section */
108+ .rank-math-api-endpoints {
109+ background : # fff ;
110+ border : 1px solid # ccd0d4 ;
111+ border-radius : 4px ;
112+ padding : 20px ;
113+ margin-bottom : 20px ;
114+ }
115+
116+ .rank-math-api-endpoints h3 {
117+ margin : 0 0 15px 0 ;
118+ color : # 23282d ;
119+ }
120+
121+ .rank-math-api-endpoint {
122+ background : # f6f7f7 ;
123+ border : 1px solid # dcdcde ;
124+ border-radius : 4px ;
125+ padding : 15px ;
126+ margin-bottom : 15px ;
127+ }
128+
129+ .rank-math-api-endpoint : last-child {
130+ margin-bottom : 0 ;
131+ }
132+
133+ .rank-math-api-endpoint h4 {
134+ margin : 0 0 10px 0 ;
135+ color : # 23282d ;
136+ font-size : 14px ;
137+ font-weight : 600 ;
138+ }
139+
140+ .rank-math-api-endpoint .endpoint-url {
141+ font-family : 'Monaco' , 'Menlo' , 'Ubuntu Mono' , monospace;
142+ background : # fff ;
143+ padding : 8px 12px ;
144+ border : 1px solid # dcdcde ;
145+ border-radius : 3px ;
146+ color : # 50575e ;
147+ font-size : 13px ;
148+ word-break : break-all;
149+ }
150+
151+ .rank-math-api-endpoint .endpoint-method {
152+ display : inline-block;
153+ background : # 0073aa ;
154+ color : # fff ;
155+ padding : 2px 8px ;
156+ border-radius : 3px ;
157+ font-size : 11px ;
158+ font-weight : 600 ;
159+ text-transform : uppercase;
160+ margin-right : 8px ;
161+ }
162+
163+ .rank-math-api-endpoint .endpoint-description {
164+ margin : 10px 0 0 0 ;
165+ color : # 666 ;
166+ font-size : 13px ;
167+ }
168+
169+ /* Loading states */
170+ .rank-math-api-loading {
171+ display : flex;
172+ align-items : center;
173+ gap : 10px ;
174+ color : # 666 ;
175+ font-style : italic;
176+ }
177+
178+ .rank-math-api-loading .spinner {
179+ float : none;
180+ margin : 0 ;
181+ }
182+
183+ /* Notices */
184+ .rank-math-api-notice {
185+ margin : 15px 0 ;
186+ }
187+
188+ .rank-math-api-notice .success {
189+ border-left-color : # 00a32a ;
190+ }
191+
192+ .rank-math-api-notice .warning {
193+ border-left-color : # dba617 ;
194+ }
195+
196+ .rank-math-api-notice .error {
197+ border-left-color : # d63638 ;
198+ }
199+
200+ /* Responsive design */
201+ @media (max-width : 782px ) {
202+ .rank-math-api-status-grid {
203+ grid-template-columns : 1fr ;
204+ }
205+
206+ .rank-math-api-update-actions {
207+ flex-direction : column;
208+ }
209+
210+ .rank-math-api-update-actions .button {
211+ width : 100% ;
212+ text-align : center;
213+ }
214+ }
215+
216+ /* Dark mode support */
217+ @media (prefers-color-scheme : dark) {
218+ .rank-math-api-header ,
219+ .rank-math-api-status-card ,
220+ .rank-math-api-update-section ,
221+ .rank-math-api-endpoints {
222+ background : # 1e1e1e ;
223+ border-color : # 3c434a ;
224+ }
225+
226+ .rank-math-api-header h1 ,
227+ .rank-math-api-status-card h3 ,
228+ .rank-math-api-update-section h3 ,
229+ .rank-math-api-endpoints h3 ,
230+ .rank-math-api-endpoint h4 {
231+ color : # f0f0f1 ;
232+ }
233+
234+ .rank-math-api-status-card .status-label {
235+ color : # a7aaad ;
236+ }
237+
238+ .rank-math-api-status-card .status-value {
239+ color : # f0f0f1 ;
240+ }
241+
242+ .rank-math-api-endpoint {
243+ background : # 2c3338 ;
244+ border-color : # 3c434a ;
245+ }
246+
247+ .rank-math-api-endpoint .endpoint-url {
248+ background : # 1e1e1e ;
249+ border-color : # 3c434a ;
250+ color : # a7aaad ;
251+ }
252+
253+ .rank-math-api-endpoint .endpoint-description {
254+ color : # a7aaad ;
255+ }
256+ }
0 commit comments