make "new folder" button visible again
[bookman] / bookmarks.css
1 * { /* RESET */
2   font-size: medium;
3   margin: 0;
4   padding: 0;
5   text-decoration: none;
6   font-weight: normal;
7   color: black;
8   background-color: white;
9   box-sizing: border-box;
10 }
11
12 html, body { background-color: #DDD; }
13 body { position: absolute; width: 100%; min-height: 100%; }
14
15 .folder, form.newfolder{
16   display: block;
17   width: 98%;
18   border: 1px solid black;
19   border-radius: .5em;
20   margin: 1em auto;
21   padding: 0;
22   overflow: hidden;
23 }
24 form.newfolder{
25   margin-bottom: 3em;
26 }
27
28 .folder > h1 {
29   font-size: 1.25em;
30   font-weight: bold;
31   padding: .125em 1em .125em 2em;
32   border-bottom: 1px solid black;
33   background-color: #ACF;
34   border-radius: .375em .375em 0 0;
35   min-height: 1em;
36 }
37 .folder > h1 + a {
38   display: block;
39   position: relative;
40   top: -1.5em;
41   margin-left: 1em;
42   color: transparent;
43   width: 0; height: 0;
44 }
45 .folder > h1 + a:before {
46   content: '\2699';
47   color: #333;
48 }
49
50 .dialog {
51   display: block;
52   position: fixed;
53   width: 30%;
54   min-width: 320px;
55   min-height: 3em;
56   left: 50%;
57   margin-left: -160px;
58   text-align: center;
59   z-index: 2;
60   border-radius: .5em;
61   border: 1px solid black;
62   padding: .125em 0;
63   background-color: #ACF;
64   word-spacing: -.5ex;
65 }
66 .dialog:before {
67   display: block;
68   content: '';
69   border: 1px solid black;
70   border-radius: 0 0 .5em .5em;
71   border-top: 0px;
72   top: 1.75em; bottom: .125em; left: .5%; right: .5%;
73   position: absolute;
74   background-color: white;
75   z-index: -1;
76 }
77 .newbookmark:before { border-top: 1px solid; }
78 .dialog + *:after {
79   content: ' ';
80   position: fixed;
81   top: 0; bottom: 0; left: 0; right: 0;
82   background-color: rgba(0,0,0,.5);
83   z-index: 1;
84 }
85 .dialog > * { word-spacing: 0; }
86
87 .dialog > h1 {
88   background-color: transparent;
89   text-align: left;
90   font-weight: bold;
91   padding-left: .25em;
92 }
93
94 .dialog > .tab {
95   display: inline-block;
96   width: 33%;
97   padding: .25em;
98   border: 1px solid black;
99   border-radius: .5em .5em 0 0;
100 }
101 .dialog.modbookmark > .tab {
102   width: 49.5%;
103 }
104 .dialog > label.tab { border-bottom: 0px; }
105 .dialog > a.tab { background-color: #EEE; }
106
107 .newbookmark > label,
108 .dialog > label:nth-of-type(2),
109 .dialog > label:nth-of-type(3),
110 .dialog > select,
111 .modfolder > input {
112   display: block;
113   float: left;
114   text-align: left;
115   margin: 1em 0 0 1em;
116 }
117 .newbookmark > label,
118 .dialog > label:nth-of-type(3),
119 .dialog > label:nth-of-type(2) {
120   clear: left;
121   font-weight: bold;
122 }
123 .dialog > select {
124   width: 10em;
125   max-width: 95%;
126 }
127 .dialog > input {
128   width: 28em;
129   max-width: 95%;
130 }
131 .modbookmark > select,
132 .dialog > button {
133   display: inline-block;
134   float: right;
135   margin: 1.5em .5em .5em .5em;
136   padding: 0 .5em;
137   clear: left;
138 }
139
140 .bookmark {
141   position: relative;
142   width: 16em;
143   display: inline-block;
144   margin: .5em 1em;
145   white-space: nowrap;
146 }
147
148 .bookmark > a.modify {
149   display: inline-block;
150   color: transparent;
151   width: .75em;
152 }
153 .bookmark > a.modify:before {
154   content: '\2699';
155   color: #333;
156 }
157 .bookmark > a.bmove {
158   display: none;
159   color: transparent;
160   overflow: hidden;
161   vertical-align: top;
162   font-size: 0;
163 }
164 .bookmark:hover { left: -1em; padding-left: 1em; }
165 .bookmark:hover > a.bmove { display: inline-block; }
166 .bookmark > a.bmove:before { color: #888; font-size: medium; }
167 .bookmark > a.bmove:nth-last-of-type(2) { position: absolute; left: 0; }
168 .bookmark > a.bmove:nth-last-of-type(2):before { content: '\25c0'; }
169 .bookmark > a.bmove:nth-last-of-type(1):before { content: '\25b6'; }
170
171 .bookmark img {
172   height: 1.25em;
173   vertical-align: text-bottom;
174   margin: 0 .5ex;
175 }
176
177 footer {
178   position: absolute; bottom: 0;
179   display: block;
180   width: 100%;
181   padding: .5em 1em;
182   background-color: white;
183   border-top: 1px solid black;
184 }