Mercurial
comparison .cms/css/rss.css @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 #rss { | |
2 display: grid; | |
3 height: 100%; | |
4 overflow-y: auto; | |
5 grid-auto-rows: max-content; | |
6 row-gap: 1rem; | |
7 } | |
8 #rss form { | |
9 display: grid; | |
10 gap: 1rem; | |
11 } | |
12 | |
13 @media (max-width: 1023px) { | |
14 #rss { | |
15 padding: 1rem 0.4rem 1rem 0.4rem; | |
16 display: flex; /*Samsung Browser - padding-bottom*/ | |
17 flex-direction: column; /*Samsung Browser - padding-bottom*/ | |
18 } | |
19 #rss form { | |
20 grid-template-columns: 1fr; | |
21 grid-template-areas: | |
22 "xml-wrapper-hidden" | |
23 "xml-static-dynamic" | |
24 "xml-static-cron"; | |
25 } | |
26 } | |
27 @media (min-width: 1024px) { | |
28 #rss { | |
29 padding: 1rem; | |
30 } | |
31 #rss form { | |
32 grid-template-columns: 1fr 1fr; | |
33 grid-template-areas: | |
34 "xml-wrapper-hidden xml-static-dynamic" | |
35 "xml-wrapper-hidden xml-static-cron"; | |
36 } | |
37 } | |
38 | |
39 @media (min-width: 1024px) { | |
40 #rss .xml-wrapper-hidden { | |
41 grid-area: xml-wrapper-hidden; | |
42 } | |
43 #rss .xml-static-dynamic { | |
44 grid-area: xml-static-dynamic; | |
45 } | |
46 #rss .xml-static-cron { | |
47 grid-area: xml-static-cron; | |
48 } | |
49 } | |
50 | |
51 #rss .xml-wrapper-hidden, #rss .xml-static-dynamic, #rss .xml-static-cron { | |
52 display: grid; | |
53 grid-auto-rows: max-content; | |
54 row-gap: 0.7rem; | |
55 box-shadow: var(--shadows); | |
56 border-radius: 0.3rem; | |
57 background-color: var(--windows); | |
58 background-image: var(--noise); | |
59 } | |
60 .xml-wrapper-hidden div, .xml-static-dynamic div, .xml-static-cron div { | |
61 color: var(--windows-font); | |
62 } | |
63 | |
64 @media (max-width: 1023px) { | |
65 #rss .xml-wrapper-hidden, #rss .xml-static-dynamic, #rss .xml-static-cron { | |
66 padding: 1rem 0.7rem 1rem 0.7rem; | |
67 } | |
68 } | |
69 @media (min-width: 1024px) { | |
70 #rss .xml-wrapper-hidden, #rss .xml-static-dynamic, #rss .xml-static-cron { | |
71 padding: 1rem; | |
72 } | |
73 } | |
74 | |
75 #rss textarea { | |
76 line-height: 1.3em; | |
77 resize: vertical; | |
78 width: 100%; | |
79 background-color: var(--input-bg); | |
80 border: 2px solid var(--input-border); | |
81 border-radius: 4px; | |
82 font-family: var(--monospace); | |
83 font-size: 1rem; | |
84 color: var(--input-font); | |
85 padding: 0 8px; | |
86 min-height: 30px; | |
87 } | |
88 | |
89 #rss form div > input { | |
90 border-radius: 4px; | |
91 font-size: 0.875rem; | |
92 padding: 0 0.54rem; | |
93 min-height: 35px; | |
94 width: 100%; | |
95 color: var(--input-font); | |
96 background-color: var(--input-bg); | |
97 border: 2px solid var(--input-border); | |
98 } | |
99 | |
100 #rss form div > button { | |
101 width: fit-content; | |
102 } | |
103 | |
104 #rss .save_2_col { | |
105 display: grid; | |
106 } | |
107 #rss .save_2_col > button { | |
108 grid-area: button; | |
109 } | |
110 #rss .save_2_col > div { | |
111 grid-area: div; | |
112 } | |
113 @media (max-width: 767px) { | |
114 #rss .save_2_col { | |
115 grid-template-columns: 1fr; | |
116 row-gap: 0.7rem; | |
117 } | |
118 #rss .save_2_col { | |
119 grid-template-areas: | |
120 "div" | |
121 "button"; | |
122 } | |
123 } | |
124 @media (min-width: 768px) { | |
125 #rss .save_2_col { | |
126 grid-template-areas: | |
127 "button div"; | |
128 grid-template-columns: auto 1fr; | |
129 column-gap: 1rem; | |
130 } | |
131 } | |
132 | |
133 #rss .select-dropdown { | |
134 position: relative; | |
135 } | |
136 #rss .select-dropdown ul.list-search { | |
137 height: 0; | |
138 background-color: var(--bg-3); | |
139 display: grid; | |
140 margin: 0; | |
141 margin-top: 2px; | |
142 padding: 0; | |
143 overflow-y: auto; | |
144 max-height: 17rem; | |
145 overscroll-behavior: contain; | |
146 position: absolute; | |
147 width: 100%; | |
148 border-radius: 4px; | |
149 } | |
150 #rss .select-dropdown.open ul.list-search { | |
151 height: auto; | |
152 border: 2px solid var(--bg-4); | |
153 } | |
154 #rss .select-dropdown .list-search li { | |
155 display: block; | |
156 list-style-type: none; | |
157 padding: 0.4rem 0.44rem; | |
158 cursor: pointer; | |
159 font-size: 0.94rem; | |
160 text-align: left; | |
161 } | |
162 #rss .select-dropdown .list-search li:hover { | |
163 background-color: var(--menu-item-list-search-li-hover-active); | |
164 } | |
165 | |
166 #rss .xml-static-dynamic input[type="text"] { | |
167 color: var(--input-font); | |
168 } | |
169 #rss .xml-static-dynamic label input[type="radio"] { | |
170 cursor: pointer; | |
171 display: inline-block; | |
172 margin-right: 0.3rem; | |
173 border-radius: 50%; | |
174 width: 0.73rem; | |
175 height: 0.73rem; | |
176 background-color: var(--bg-4); | |
177 transform: translate(0, 0); | |
178 appearance: none; | |
179 } | |
180 #rss .xml-static-dynamic label input:checked { | |
181 background-color: var(--orange); | |
182 border-color: var(--orange); | |
183 box-shadow: 0 0 0 0.25rem var(--focus-orange); | |
184 } | |
185 | |
186 #rss .xml-static-dynamic label { | |
187 cursor: pointer; | |
188 line-height: 1.1em; | |
189 font-size: 1rem; | |
190 color: var(--link); | |
191 user-select: none; | |
192 } | |
193 | |
194 #rss .xml-static-cron p, #rss .xml-static-dynamic p { | |
195 font-size: 1rem; | |
196 color: var(--text); | |
197 } | |
198 #rss .xml-static-cron input[type="text"], #rss .xml-static-dynamic input[type="text"] { | |
199 max-width: 70px; | |
200 border-radius: 4px; | |
201 font-size: 0.875rem; | |
202 padding: 0 0.54rem; | |
203 min-height: 35px; | |
204 background-color: var(--input-bg); | |
205 border: 2px solid var(--input-border); | |
206 color: var(--input-font); | |
207 text-align: center; | |
208 } | |
209 #rss .rss { | |
210 grid-auto-rows: max-content; | |
211 box-shadow: var(--shadows); | |
212 border-radius: 0.3rem; | |
213 background-color: var(--windows); | |
214 background-image: var(--noise); | |
215 color: var(--text); | |
216 font-size: 1rem; | |
217 } | |
218 @media (max-width: 1023px) { | |
219 #rss .rss { | |
220 padding: 1rem 0.7rem 1rem 0.7rem; | |
221 } | |
222 } | |
223 @media (min-width: 1024px) { | |
224 #rss .rss { | |
225 padding: 1rem; | |
226 } | |
227 } | |
228 #rss .rss a { | |
229 color: var(--link); | |
230 text-decoration: none; | |
231 border-bottom: 1px solid; | |
232 } |