X-Git-Url: http://git.plutz.net/?p=bookman;a=blobdiff_plain;f=bookmarks.css;h=f905773f64e3bf2dc0f247b618a8d6a1210f1b44;hp=cadf1aab0a1f1b541b2ceed3757cf3a00af4a7dc;hb=3ca08bd3296480ed86f4f58f05affe98d6f470ce;hpb=6994fcbc662fe3b8cae29d12dd57b633886afa85 diff --git a/bookmarks.css b/bookmarks.css index cadf1aa..f905773 100644 --- a/bookmarks.css +++ b/bookmarks.css @@ -1,5 +1,4 @@ * { /* RESET */ - font-size: 12pt; margin: 0; padding: 0; text-decoration: none; @@ -21,8 +20,6 @@ html, body { margin: 1em auto; padding: 0; overflow: hidden; - #column-width: 16em; - #column-rule: 1px solid #BBB; } .folder > h1 { @@ -33,16 +30,13 @@ html, body { 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 { @@ -50,21 +44,24 @@ html, body { color: #333; } +.modbookmark, .modfolder { display: block; position: fixed; - left: 50%; margin: 0 -15em; - vertical-align: middle; - text-align: center; width: 30em; min-width: 240px; + min-height: 3em; + left: 50%; top: 20%; + margin: -3em -15em; + text-align: center; z-index: 3; border-radius: .5em; border: 1px solid black; padding: .125em 0; - min-height: 3em; background-color: #ACF; + word-spacing: -.5ex; } +.modbookmark:before, .modfolder:before { display: block; content: ''; @@ -76,61 +73,114 @@ html, body { background-color: white; z-index: -1; } +.modbookmark + *:after, .modfolder + *:after { content: ' '; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.5); } +.modbookmark > *, +.modfolder > * { word-spacing: 0; } -.modfolder > label, -.modfolder > a { +.modbookmark > h1, +.modfolder > h1 { + background-color: transparent; + text-align: left; + font-weight: bold; + padding-left: .25em; +} + +.modbookmark > .tab, +.modfolder > .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; } +.modbookmark > .tab { + width: 49.5%; +} +.modbookmark > label.tab, +.modfolder > label.tab { border-bottom: 0px; } +.modbookmark > a.tab, +.modfolder > 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, .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) { + font-weight: bold; +} +.modbookmark > select, +.modfolder > select { + width: 10em; + max-width: 95%; +} +.modbookmark > input, +.modfolder > input { width: 28em; max-width: 95%; - margin: 1em; } +.modbookmark > button, +.modbookmark > select, .modfolder > 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 { +form.newbookmark { margin: .5em 1em; break-inside: avoid; }