Mercurial
comparison .cms/css/base.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 #base { | |
2 display: grid; | |
3 gap: 1rem; | |
4 overflow-y: auto; | |
5 max-height: 100%; | |
6 } | |
7 | |
8 @media (max-width: 1023px) { | |
9 #base { | |
10 padding: 1rem 0.4rem 1rem 0.4rem; | |
11 } | |
12 } | |
13 | |
14 @media (min-width: 1024px) { | |
15 #base { | |
16 grid-template-columns: 17rem 1fr; | |
17 grid-template-rows: auto; | |
18 padding: 1rem; | |
19 } | |
20 } | |
21 | |
22 #base .db-settings { | |
23 grid-column: 1/2; | |
24 background-color: var(--windows); | |
25 background-image: var(--noise); | |
26 box-shadow: var(--shadows); | |
27 border-radius: 0.3rem; | |
28 } | |
29 @media (max-width: 1023px) { | |
30 #base .db-settings { | |
31 padding: 1rem 0.7rem 1rem 0.7rem; | |
32 } | |
33 } | |
34 @media (min-width: 1024px) { | |
35 #base .db-settings { | |
36 padding: 1rem; | |
37 } | |
38 } | |
39 | |
40 #base form { | |
41 display: grid; | |
42 row-gap: 2rem; | |
43 } | |
44 | |
45 #base form > div { | |
46 position: relative; | |
47 display: grid; | |
48 row-gap: 1rem; | |
49 } | |
50 #base .create { | |
51 font-size: 1rem; | |
52 color: var(--names); | |
53 text-align: center; | |
54 user-select: none; | |
55 } | |
56 | |
57 | |
58 #base form div > div div:not(.password-eye) { | |
59 font-size: 1rem; | |
60 margin-bottom: 3px; | |
61 color: var(--windows-font); | |
62 } | |
63 | |
64 #base form .pro-btn { | |
65 cursor: pointer; | |
66 text-align: center; | |
67 padding: 0.3rem; | |
68 border: 1px solid var(--bg-3); | |
69 border-radius: 0.2rem; | |
70 color: var(--link); | |
71 user-select: none; | |
72 } | |
73 #base form .pro { | |
74 display: none; | |
75 } | |
76 #base form.show-pro .pro { | |
77 display: grid; | |
78 } | |
79 | |
80 | |
81 | |
82 #base form .password-widget { | |
83 display: grid; | |
84 grid-template-columns: 1fr auto; | |
85 gap: 5px; | |
86 } | |
87 #base form .password-widget input { | |
88 grid-column: 1/-1; | |
89 grid-row: 1/2; | |
90 } | |
91 | |
92 #base form input { | |
93 border-radius: 4px; | |
94 font-size: 0.875rem; | |
95 font-family: var(--monospace); | |
96 padding: 0 0.54rem 3px 0.54rem; | |
97 min-height: 35px; | |
98 height: 35px; | |
99 width: 100%; | |
100 color: var(--input-font); | |
101 background-color: var(--input-bg); | |
102 border: 2px solid var(--input-border); | |
103 } | |
104 #base form input[name="password"] { | |
105 grid-column: 1 / -1; | |
106 grid-row: 1 / 2; | |
107 padding-right: 2.2rem; | |
108 } | |
109 | |
110 #base form > div > div { | |
111 position: relative; | |
112 } | |
113 #base form .password-eye { | |
114 grid-column: 2 / 3; | |
115 grid-row: 1 / 2; | |
116 width: 34px; | |
117 height: 34px; | |
118 z-index: 1; | |
119 cursor: pointer; | |
120 background-repeat: no-repeat; | |
121 background-size: 20px; | |
122 background-position: center; | |
123 background-image: var(--eye-off); | |
124 } | |
125 #base form .password-eye.showed { | |
126 background-image: var(--eye-on); | |
127 } |