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