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 }