* { /* RESET */
+ 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;
color: #333;
}
-.modbookmark,
-.modfolder {
+.dialog {
display: block;
position: fixed;
width: 30em;
left: 50%; top: 20%;
margin: -3em -15em;
text-align: center;
- z-index: 3;
+ z-index: 10;
border-radius: .5em;
border: 1px solid black;
padding: .125em 0;
background-color: #ACF;
word-spacing: -.5ex;
}
-.modbookmark:before,
-.modfolder:before {
+.dialog:before {
display: block;
content: '';
border: 1px solid black;
background-color: white;
z-index: -1;
}
-.modbookmark + *:after,
-.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);
}
-.modbookmark > *,
-.modfolder > * { word-spacing: 0; }
+.dialog > * { word-spacing: 0; }
-.modbookmark > h1,
-.modfolder > h1 {
+.dialog > h1 {
background-color: transparent;
text-align: left;
font-weight: bold;
padding-left: .25em;
}
-.modbookmark > .tab,
-.modfolder > .tab {
+.dialog > .tab {
display: inline-block;
width: 33%;
padding: .25em;
border: 1px solid black;
border-radius: .5em .5em 0 0;
}
-.modbookmark > .tab {
+.dialog.modbookmark > .tab {
width: 49.5%;
}
-.modbookmark > label.tab,
-.modfolder > label.tab { border-bottom: 0px; }
-.modbookmark > a.tab,
-.modfolder > a.tab { background-color: #EEE; }
+.dialog > label.tab { border-bottom: 0px; }
+.dialog > a.tab { background-color: #EEE; }
-.modbookmark > label:nth-of-type(2),
-.modbookmark > label:nth-of-type(3),
-.modbookmark > select,
-.modfolder > label:nth-of-type(2),
-.modfolder > select,
+.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;
}
-.modbookmark > label:nth-of-type(2),
-.modbookmark > label:nth-of-type(3),
-.modfolder > label:nth-of-type(2) {
+.newbookmark > label,
+.dialog > label:nth-of-type(3),
+.dialog > label:nth-of-type(2) {
+ clear: left;
font-weight: bold;
}
-.modbookmark > select,
-.modfolder > select {
+.dialog > select {
width: 10em;
max-width: 95%;
}
-.modbookmark > input,
-.modfolder > input {
+.dialog > input {
width: 28em;
max-width: 95%;
}
-.modbookmark > button,
.modbookmark > select,
-.modfolder > button {
+.dialog > button {
display: inline-block;
float: right;
margin: 1.5em .5em .5em .5em;
margin: 0 .5ex;
}
-form.newbookmark {
- margin: .5em 1em;
- break-inside: avoid;
+footer {
+ position: absolute; bottom: 0;
+ display: block;
+ width: 100%;
+ padding: 1em;
+ background-color: white;
+ border-top: 1px solid black;
}