4bd955f1bc74e273440fbf568dc8e16d8cb5dde6
1:root {
2 --hover-bg: #434c5e;
3 --hover-grn: #a3be8c;
4 --hover-bg-2: #848ead;
5 --remove-bg: #bf616a;
6 --default-fg: #d8dee9;
7}
8
9html, body {
10 font-size: 16px !important;
11 width: 100%;
12 height: 100%;
13}
14
15body {
16 margin: 0;
17 color: var(--default-fg);
18 display: flex;
19 flex-direction: column;
20 align-items: center;
21 justify-content: center;
22}
23
24.favorites {
25 display: flex;
26 flex-direction: row;
27 display: -webkit-flex;
28 -webkit-flex-direction: row;
29}
30
31ul {
32 position: relative;
33 list-style: none;
34 padding: 0;
35 width: 10rem;
36 margin: 0.5rem 2em 2em 2em;
37 float: left;
38}
39
40img {
41 float: left;
42 margin-top: 1px;
43 padding-right: 3px;
44}
45
46input {
47 font-size: 16px !important;
48 padding: 0;
49 height: 18.5px;
50 width: 112px;
51 margin: 5px;
52}
53
54input.name {
55 margin-bottom: 2.5px
56}
57
58input.url {
59 margin-top: 2.5px
60}
61
62input.colname {
63 width: calc(100% - 68px);
64 height: 19px;
65 margin: 14px 0 6px 0;
66 border: 2px var(--hover-bg) dashed;
67 background-color: var(--default-bg);
68 color: inherit;
69 font-family: inherit;
70}
71
72.remove {
73 width: 29px;
74 height: 35px;
75 padding: 0;
76 background-color: var(--hover-bg);
77 float: right;
78 text-align: center;
79 justify-content: center;
80 align-items: center;
81 cursor: pointer;
82 font-family: monospace;
83 display: flex;
84}
85
86.save {
87 padding-left: 8px;
88 float: right;
89 height: 60px;
90 width: 21px;
91 display: flex;
92 text-align: center;
93 align-items: center;
94 cursor: pointer;
95 background-color: var(--hover-bg-2);
96}
97
98.save:hover, .save:focus, .save:focus-within {
99 background-color: var(--hover-grn);
100}
101
102.remove:hover {
103 background-color: var(--remove-bg);
104}
105
106#edit, #addcol {
107 position: absolute;
108 right: 0;
109 bottom: 0;
110 background-color: var(--hover-bg);
111 width: 29px;
112 height: 29px;
113 padding: 0;
114 display: flex;
115 justify-content: center;
116 align-items: center;
117 cursor: pointer;
118 font-weight: bold;
119}
120
121#edit:hover {
122 background-color: var(--hover-bg-2);
123}
124
125#addcol {
126 display: none;
127 right: 29px;
128}
129
130#addcol:hover {
131 background-color: var(--hover-grn);
132}
133
134.add, .rmcol {
135 background-color: var(--hover-bg);
136 margin-top: 14px;
137 width: 29px;
138 height: 29px;
139 padding: 0;
140 justify-content: center;
141 align-items: center;
142 float: right;
143 display: none;
144 cursor: pointer;
145}
146
147.add:hover {
148 background-color: var(--hover-grn) !important;
149}
150
151.rmcol {
152 display: flex;
153}
154
155.rmcol:hover {
156 background-color: var(--remove-bg) !important;
157}
158
159.new {
160 background-color: var(--hover-bg);
161}
162
163.title:hover > .add {
164 display: flex;
165}
166
167.title p:hover {
168 cursor: move;
169}
170
171.title:hover .add:not(:hover),
172li:hover > .remove:not(:hover) {
173 display: flex;
174 background-color: var(--hover-bg);
175}
176
177li:hover > a, li > a:focus, li > a:focus-within {
178 display: inline-block;
179 background-color: var(--hover-bg);
180}
181
182li:hover {
183 background-color: var(--hover-bg);
184}
185
186a {
187 color: inherit;
188 outline: none;
189 display: block;
190 text-decoration: none;
191 padding: 0.5rem;
192 height: 19px;
193}
194
195.remove:not(:hover) {
196 display: none;
197}
198
199a, ul > .title > p, .colname {
200 width: calc(100% - 45px);
201 display: inline-block;
202}
203
204li.sortable-chosen.sortable-ghost {
205 background-color: var(--hover-bg-2);
206}
207
208.over {
209 /* border: 2px dashed var(--default-fg);*/
210}
211
212span.grip {
213 content: '....';
214 position: relative;
215 right: 20px;
216 top: 35px;
217 width: 10px;
218 height: 20px;
219 display: none;
220 overflow: hidden;
221 line-height: 5px;
222 padding: 3px 4px;
223 cursor: move;
224 vertical-align: middle;
225 font-size: 12px;
226 font-family: sans-serif;
227 font-weight: bold;
228 letter-spacing: 2px;
229}
230
231span.grip::after {
232 content: '.. .. .. ..';
233}
234
235.glyphicon-move {
236 cursor: move;
237 cursor: -webkit-grabbing;
238}
239
240.title {
241 margin-bottom: 0.5rem;
242 font-weight: bold;
243 text-align: left;
244 border-bottom: 1px solid var(--hover-bg);
245}
246
247.title p {
248 width: 160px;
249 margin: 16px 0 8px 0;
250}