UI for folder modification
[bookman] / bookmarks.css
1 * { /* RESET */
2   font-size: 12pt;
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 {
13   background-color: #DDD;
14 }
15
16 .folder, form.newfolder{
17   display: block;
18   width: 98%;
19   border: 1px solid black;
20   border-radius: .5em;
21   margin: 1em auto;
22   padding: 0;
23   overflow: hidden;
24 }
25
26 .folder > h1 {
27   font-size: 1.25em;
28   font-weight: bold;
29   padding: .125em 1em .125em 2em;
30   border-bottom: 1px solid black;
31   background-color: #ACF;
32   border-radius: .375em .375em 0 0;
33   min-height: 1em;
34 }
35 .folder > h1 + a {
36   display: block;
37   position: relative;
38   top: -1.5em;
39   margin-left: 1em;
40   color: transparent;
41   width: 0; height: 0;
42 }
43 .folder > h1 + a:before {
44   content: '\2699';
45   color: #333;
46 }
47
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 .modfolder:before {
65   display: block;
66   content: '';
67   border: 1px solid black;
68   border-radius: 0 0 .5em .5em;
69   border-top: 0px;
70   top: 1.75em; bottom: .125em; left: .5%; right: .5%;
71   position: absolute;
72   background-color: white;
73   z-index: -1;
74 }
75 .modfolder + *:after {
76   content: ' ';
77   position: fixed;
78   top: 0; bottom: 0; left: 0; right: 0;
79   background-color: rgba(0,0,0,.5);
80 }
81 .modfolder > * { word-spacing: 0; }
82
83 .modfolder > h1 {
84   background-color: transparent;
85   text-align: left;
86   font-weight: bold;
87   padding-left: .25em;
88 }
89
90 .modfolder > .tab {
91   display: inline-block;
92   width: 33%;
93   padding: .25em;
94   border: 1px solid black;
95   border-radius: .5em .5em 0 0;
96 }
97 .modfolder > label.tab { border-bottom: 0px; }
98 .modfolder > a.tab { background-color: #EEE; }
99
100 .modfolder > label:nth-of-type(2),
101 .modfolder > select,
102 .modfolder > input {
103   display: block;
104   float: left;
105   text-align: left;
106   margin: 1em 0 0 1em;
107 }
108 .modfolder > label:nth-of-type(2){
109   font-weight: bold;
110 }
111 .modfolder > select {
112   width: 10em;
113   max-width: 95%;
114 }
115 .modfolder > input {
116   width: 28em;
117   max-width: 95%;
118 }
119 .modfolder > button {
120   display: inline-block;
121   float: right;
122   margin: 1.5em .5em .5em .5em;
123   padding: 0 .5em;
124   clear: left;
125 }
126
127 .bookmark {
128   width: 16em;
129   display: inline-block;
130   margin: .5em 1em;
131 }
132
133 .bookmark > a.modify {
134   display: inline-block;
135   color: transparent;
136   width: .75em;
137 }
138 .bookmark > a.modify:before {
139   content: '\2699';
140   color: #333;
141 }
142
143 .bookmark > a.link >  img {
144   height: 1.25em;
145   vertical-align: text-bottom;
146   margin: 0 .5ex;
147 }
148
149 form.newbookmark,
150 form.modbookmark {
151   margin: .5em 1em;
152   break-inside: avoid;
153 }