|
0
|
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 }
|
