* { /* RESET */
- font-size: 12pt;
+ font-size: medium;
margin: 0;
padding: 0;
text-decoration: none;
box-sizing: border-box;
}
-html, body {
- background-color: #DDD;
-}
+html, body { background-color: #DDD; }
+body { position: absolute; width: 100%; min-height: 100%; }
.folder, form.newfolder{
display: block;
margin: 1em auto;
padding: 0;
overflow: hidden;
- #column-width: 16em;
- #column-rule: 1px solid #BBB;
+}
+form.newfolder{
+ margin-bottom: 3em;
}
.folder > h1 {
background-color: #ACF;
border-radius: .375em .375em 0 0;
min-height: 1em;
- #column-span: all;
}
-
.folder > h1 + a {
display: block;
position: relative;
top: -1.5em;
margin-left: 1em;
color: transparent;
- background-color: transparent;
width: 0; height: 0;
}
.folder > h1 + a:before {
color: #333;
}
-.modfolder {
+.dialog {
display: block;
position: fixed;
- left: 50%; margin: 0 -15em;
- vertical-align: middle;
+ width: 30%;
+ min-width: 320px;
+ min-height: 3em;
+ left: 50%;
+ margin-left: -160px;
text-align: center;
- width: 30em;
- min-width: 240px;
- z-index: 3;
+ z-index: 2;
border-radius: .5em;
border: 1px solid black;
padding: .125em 0;
- min-height: 3em;
background-color: #ACF;
+ word-spacing: -.5ex;
}
-.modfolder:before {
+.dialog:before {
display: block;
content: '';
border: 1px solid black;
background-color: white;
z-index: -1;
}
-.modfolder + *:after {
+.newbookmark:before { border-top: 1px solid; }
+.dialog + *:after {
content: ' ';
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background-color: rgba(0,0,0,.5);
+ z-index: 1;
}
+.dialog > * { word-spacing: 0; }
-.modfolder > label,
-.modfolder > a {
+.dialog > h1 {
+ background-color: transparent;
+ text-align: left;
+ font-weight: bold;
+ padding-left: .25em;
+}
+
+.dialog > .tab {
display: inline-block;
width: 33%;
padding: .25em;
border: 1px solid black;
border-radius: .5em .5em 0 0;
}
-.modfolder > label { border-bottom: 0px; }
-.modfolder > a { background-color: #EEE; }
+.dialog.modbookmark > .tab {
+ width: 49.5%;
+}
+.dialog > label.tab { border-bottom: 0px; }
+.dialog > a.tab { background-color: #EEE; }
+.newbookmark > label,
+.dialog > label:nth-of-type(2),
+.dialog > label:nth-of-type(3),
+.dialog > select,
.modfolder > input {
display: block;
+ float: left;
+ text-align: left;
+ margin: 1em 0 0 1em;
+}
+.newbookmark > label,
+.dialog > label:nth-of-type(3),
+.dialog > label:nth-of-type(2) {
+ clear: left;
+ font-weight: bold;
+}
+.dialog > select {
+ width: 10em;
+ max-width: 95%;
+}
+.dialog > input {
width: 28em;
max-width: 95%;
- margin: 1em;
}
-.modfolder > button {
+.modbookmark > select,
+.dialog > button {
display: inline-block;
float: right;
- margin: .5em;
+ margin: 1.5em .5em .5em .5em;
padding: 0 .5em;
+ clear: left;
}
.bookmark {
+ position: relative;
width: 16em;
display: inline-block;
margin: .5em 1em;
+ white-space: nowrap;
}
.bookmark > a.modify {
- font-size: 0;
- color: white;
+ display: inline-block;
+ color: transparent;
+ width: .75em;
}
.bookmark > a.modify:before {
content: '\2699';
color: #333;
- font-size: initial;
}
+.bookmark > a.bmove {
+ display: none;
+ color: transparent;
+ overflow: hidden;
+ vertical-align: top;
+ font-size: 0;
+}
+.bookmark:hover { left: -1em; padding-left: 1em; }
+.bookmark:hover > a.bmove { display: inline-block; }
+.bookmark > a.bmove:before { color: #888; font-size: medium; }
+.bookmark > a.bmove:nth-last-of-type(2) { position: absolute; left: 0; }
+.bookmark > a.bmove:nth-last-of-type(2):before { content: '\25c0'; }
+.bookmark > a.bmove:nth-last-of-type(1):before { content: '\25b6'; }
-.bookmark > a.link > img {
+.bookmark img {
height: 1.25em;
vertical-align: text-bottom;
margin: 0 .5ex;
}
-form.newbookmark,
-form.modbookmark {
- margin: .5em 1em;
- break-inside: avoid;
+footer {
+ position: absolute; bottom: 0;
+ display: block;
+ width: 100%;
+ padding: .5em 1em;
+ background-color: white;
+ border-top: 1px solid black;
}