guido+booket@0: /* guido+booket@0: * Copyright (C) 2014 Guido Berhoerster guido+booket@0: * guido+booket@0: * Permission is hereby granted, free of charge, to any person obtaining guido+booket@0: * a copy of this software and associated documentation files (the guido+booket@0: * "Software"), to deal in the Software without restriction, including guido+booket@0: * without limitation the rights to use, copy, modify, merge, publish, guido+booket@0: * distribute, sublicense, and/or sell copies of the Software, and to guido+booket@0: * permit persons to whom the Software is furnished to do so, subject to guido+booket@0: * the following conditions: guido+booket@0: * guido+booket@0: * The above copyright notice and this permission notice shall be included guido+booket@0: * in all copies or substantial portions of the Software. guido+booket@0: * guido+booket@0: * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, guido+booket@0: * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF guido+booket@0: * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. guido+booket@0: * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY guido+booket@0: * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, guido+booket@0: * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE guido+booket@0: * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. guido+booket@0: */ guido+booket@0: guido+booket@0: html { guido+booket@0: color: #000000; guido+booket@0: background-color: #ffffff; guido+booket@0: font-family: "DejaVu Sans", Arial, Helvetica, sans-serif; guido+booket@0: max-width: 70em; guido+booket@0: margin: 0 auto; guido+booket@0: } guido+booket@0: guido+booket@0: fieldset { guido+booket@0: border: none; guido+booket@0: border-top: 1px solid #888a85; guido+booket@0: } guido+booket@0: guido+booket@0: legend { guido+booket@0: font-size: .75em; guido+booket@0: font-weight: bold; guido+booket@0: } guido+booket@0: guido+booket@12: label { guido+booket@0: display: block; guido+booket@0: } guido+booket@0: guido+booket@0: kbd { guido+booket@0: display: inline-block; guido+booket@0: font-family: Courier, monospace; guido+booket@0: background-color: #fdfdfb; guido+booket@0: border: thin solid #babdb6; guido+booket@0: box-shadow: inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #babdb6; guido+booket@0: border-radius: .25em; guido+booket@0: padding: .125em .5em; guido+booket@0: white-space: nowrap; guido+booket@0: } guido+booket@0: guido+booket@7: img { guido+booket@7: border: none; guido+booket@7: } guido+booket@7: guido+booket@26: strong { guido+booket@26: font-weight: bold; guido+booket@26: } guido+booket@26: guido+booket@0: h1 { guido+booket@0: font-size: 2em; guido+booket@0: margin: .67em 0 guido+booket@0: } guido+booket@0: guido+booket@0: h2 { guido+booket@0: font-size: 1.5em; guido+booket@0: margin: .75em 0 guido+booket@0: } guido+booket@0: guido+booket@0: h3 { guido+booket@0: font-size: 1.17em; guido+booket@0: margin: .83em 0 guido+booket@0: } guido+booket@0: guido+booket@0: h1, h2, h3 { guido+booket@0: font-weight: bolder guido+booket@0: } guido+booket@0: guido+booket@0: section, guido+booket@0: main, guido+booket@0: footer { guido+booket@0: clear: both; guido+booket@0: } guido+booket@0: guido+booket@0: footer { guido+booket@0: clear: both; guido+booket@0: margin: 1em 0 0 0; guido+booket@0: padding: .5em 0 0 0; guido+booket@0: border-top: 1px solid #888a85; guido+booket@0: font-size: .75em; guido+booket@0: } guido+booket@0: guido+booket@0: address { guido+booket@0: font-style: inherit; guido+booket@0: color: #555753; guido+booket@0: } guido+booket@0: guido+booket@0: address :link, guido+booket@0: address :visited { guido+booket@0: text-decoration: underline; guido+booket@0: color: inherit; guido+booket@0: } guido+booket@0: guido+booket@0: header h1 { guido+booket@0: display: inline-block; guido+booket@0: margin: 0 .25em 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: header h1 ~ p { guido+booket@0: display: inline-block; guido+booket@0: margin: 0; guido+booket@0: font-weight: bold; guido+booket@0: } guido+booket@0: guido+booket@23: .expander > .expander-label { guido+booket@23: cursor: pointer; guido+booket@23: } guido+booket@23: guido+booket@23: .expander > .expander-label::before { guido+booket@23: content: "\25B6"; guido+booket@23: margin-right: .5em; guido+booket@23: } guido+booket@23: guido+booket@23: .expander[data-expander-open] > .expander-label::before { guido+booket@23: content: "\25BC"; guido+booket@23: margin-right: .5em; guido+booket@23: } guido+booket@23: guido+booket@23: .expander:not([data-expander-open]) > :not(.expander-label) { guido+booket@23: display: none; guido+booket@23: } guido+booket@23: guido+booket@17: #logo { guido+booket@17: height: 2em; guido+booket@17: } guido+booket@17: guido+booket@22: #keyboard-shortcuts { guido+booket@22: display: none; guido+booket@22: padding: .5em; guido+booket@22: font-size: .75em; guido+booket@22: background: rgba(251, 251, 249, .75); guido+booket@22: border: 1px solid #d3d7cf; guido+booket@22: border-radius: .5em; guido+booket@22: box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, .25); guido+booket@22: } guido+booket@22: guido+booket@22: #keyboard-shortcuts[data-overlay-visible] { guido+booket@22: display: block; guido+booket@22: position: fixed; guido+booket@22: top: 50%; guido+booket@22: left: 50%; guido+booket@22: transform: translate(-50%, -50%); guido+booket@22: z-index: 10; guido+booket@22: } guido+booket@22: guido+booket@26: .unsaved-changes-message { guido+booket@26: color: #a40000; guido+booket@26: background-color: rgba(239, 41, 41, .25); guido+booket@26: border: 1px solid #a40000; guido+booket@26: border-radius: .5em; guido+booket@26: padding: .5em; guido+booket@26: font-size: .75em; guido+booket@26: } guido+booket@26: guido+booket@0: #actions { guido+booket@0: margin: 1em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: #actions > h2 { guido+booket@0: display: none; guido+booket@0: } guido+booket@0: guido+booket@0: #actions form ~ form { guido+booket@0: margin: 1em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@12: #actions input[type="text"], guido+booket@12: #actions input[type="file"], guido+booket@12: #actions input[type="url"], guido+booket@12: #actions textarea, guido+booket@12: .bookmark-editor-form input[type="text"], guido+booket@12: .bookmark-editor-form input[type="file"], guido+booket@12: .bookmark-editor-form input[type="url"], guido+booket@12: .bookmark-editor-form textarea { guido+booket@12: display: block; guido+booket@12: } guido+booket@12: guido+booket@19: #actions label.top-label { guido+booket@19: font-weight: bold; guido+booket@19: } guido+booket@19: guido+booket@12: #actions label, guido+booket@12: .bookmark-editor-form label { guido+booket@12: font-size: .75em; guido+booket@12: } guido+booket@12: guido+booket@7: form.bookmark-editor-form img.bookmark-favicon { guido+booket@7: display: block; guido+booket@7: padding: 1px 0; guido+booket@7: } guido+booket@7: guido+booket@22: #bookmarklet { guido+booket@0: float: right; guido+booket@0: border: 1px solid #d3d7cf; guido+booket@0: border-radius: .5em; guido+booket@0: padding: .5em; guido+booket@0: margin: 0 0 1em 1em; guido+booket@0: font-size: .75em; guido+booket@0: } guido+booket@0: guido+booket@6: a#bookmarklet-link { guido+booket@6: display: block; guido+booket@6: margin: 1em 0 0 0; guido+booket@6: } guido+booket@6: guido+booket@6: a#bookmarklet-link:link, guido+booket@6: a#bookmarklet-link:visited, guido+booket@6: a#bookmarklet-link:link:hover, guido+booket@6: a#bookmarklet-link:link:focus, guido+booket@6: a#bookmarklet-link:link:active, guido+booket@6: a#bookmarklet-link:visited:hover, guido+booket@6: a#bookmarklet-link:visited:focus, guido+booket@6: a#bookmarklet-link:visited:active { guido+booket@6: color: #000000; guido+booket@6: text-decoration: underline; guido+booket@6: } guido+booket@6: guido+booket@6: #bookmarklet h3, guido+booket@0: #keyboard-shortcuts h3 { guido+booket@0: font-size: 1em; guido+booket@0: text-align: center; guido+booket@0: margin: 0; guido+booket@0: } guido+booket@0: guido+booket@0: #keyboard-shortcuts dl { guido+booket@0: margin: 1em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: #keyboard-shortcuts dd { guido+booket@0: margin: .25em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: #keyboard-shortcuts dd ~ dt { guido+booket@0: margin: .5em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: #bookmarks { guido+booket@0: margin: 1em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: #bookmarks h2 { guido+booket@0: margin: 0; guido+booket@0: } guido+booket@0: guido+booket@0: #tags, guido+booket@0: #search, guido+booket@0: #bookmark-message, guido+booket@0: #bookmark-list { guido+booket@0: margin: .5em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: #tags h3, guido+booket@0: #search h3 { guido+booket@0: display: none; guido+booket@0: } guido+booket@0: guido+booket@12: #tags label { guido+booket@12: display: block; guido+booket@12: margin: .25em 0 0 0; guido+booket@12: font-size: .75em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-1 * { guido+booket@12: font-size: 1em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-2 * { guido+booket@12: font-size: 1.25em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-3 * { guido+booket@12: font-size: 1.5em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-4 * { guido+booket@12: font-size: 1.75em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-5 * { guido+booket@12: font-size: 2em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-6 * { guido+booket@12: font-size: 2.25em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-7 * { guido+booket@12: font-size: 2.5em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-8 * { guido+booket@12: font-size: 2.75em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-9 * { guido+booket@12: font-size: 3em; guido+booket@12: } guido+booket@12: guido+booket@12: ul.tag-cloud .tag-frequency-10 * { guido+booket@12: font-size: 3.25em; guido+booket@12: } guido+booket@12: guido+booket@0: ul.tag-input-list, guido+booket@0: ul.tag-list { guido+booket@0: margin: 0; guido+booket@0: padding: 0; guido+booket@0: } guido+booket@0: guido+booket@0: ul#bookmark-list { guido+booket@0: padding: 0; guido+booket@0: } guido+booket@0: guido+booket@0: ul.tag-input-list li, guido+booket@0: ul.tag-list li, guido+booket@0: ul#bookmark-list > li { guido+booket@0: list-style-type: none; guido+booket@0: padding: 0; guido+booket@0: margin: 0; guido+booket@0: } guido+booket@0: guido+booket@0: ul.tag-list li { guido+booket@0: display: inline-block; guido+booket@0: border: 1px solid #c4a000; guido+booket@0: border-radius: .25em; guido+booket@0: padding: .1em; guido+booket@0: background-color: #fce94f; guido+booket@0: margin: .25em .25em 0 0; guido+booket@0: white-space: nowrap; guido+booket@0: font-size: .75em; guido+booket@0: } guido+booket@0: guido+booket@0: ul.tag-list button { guido+booket@0: color: #000000; guido+booket@0: background-color: transparent; guido+booket@0: border: thin solid transparent; guido+booket@0: border-radius: .1em; guido+booket@0: padding: .1em; guido+booket@0: margin: 0 .1em; guido+booket@0: cursor: pointer; guido+booket@0: } guido+booket@0: guido+booket@0: ul.tag-list button:hover, guido+booket@0: ul.tag-list button:focus, guido+booket@0: ul.tag-list button:active { guido+booket@0: border: thin solid #deba1a; guido+booket@0: background-color: #ffff69; guido+booket@0: } guido+booket@0: guido+booket@0: ul.tag-list li.active-filter-tag { guido+booket@0: border: thin solid #4e9a06; guido+booket@0: background-color: #8ae234; guido+booket@0: } guido+booket@0: guido+booket@0: ul.tag-list li.active-filter-tag button:hover, guido+booket@0: ul.tag-list li.active-filter-tag button:focus, guido+booket@0: ul.tag-list li.active-filter-tag button:active { guido+booket@0: border: thin solid #68b420; guido+booket@0: background-color: #a4fc4e; guido+booket@0: } guido+booket@0: guido+booket@0: ul#bookmark-list > li { guido+booket@0: border-top: 1px solid #888a85; guido+booket@0: padding: .25em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@3: ul#bookmark-list > li p { guido+booket@3: margin: 0; guido+booket@4: display: inline-block; guido+booket@3: } guido+booket@3: guido+booket@0: ul#bookmark-list > li ~ li { guido+booket@0: margin: .25em 0 0 0; guido+booket@0: } guido+booket@0: guido+booket@0: ul#bookmark-list ul.tag-list { guido+booket@0: max-width: 33%; guido+booket@0: float: right; guido+booket@0: margin: 0 0 .25em .25em; guido+booket@0: } guido+booket@0: guido+booket@0: ul#bookmark-list ul.tag-list > li { guido+booket@0: float: right; guido+booket@0: } guido+booket@0: guido+booket@0: ul#bookmark-list > li::after { guido+booket@0: display: block; guido+booket@0: content: ''; guido+booket@0: clear: right; guido+booket@0: } guido+booket@0: guido+booket@0: ul#bookmark-list .bookmark-editor-form { guido+booket@0: margin: .5em; guido+booket@0: } guido+booket@0: guido+booket@0: ul#bookmark-list .bookmark-editor-form fieldset { guido+booket@0: border-top: 1px solid #d3d7cf; guido+booket@0: } guido+booket@0: guido+booket@0: a.bookmark-link:link, guido+booket@0: a.bookmark-link:visited { guido+booket@0: color: #001754; guido+booket@0: font-weight: bold; guido+booket@0: text-decoration: underline; guido+booket@0: } guido+booket@0: guido+booket@0: a.bookmark-link:link:hover, guido+booket@0: a.bookmark-link:link:focus, guido+booket@0: a.bookmark-link:link:active, guido+booket@0: a.bookmark-link:visited:hover, guido+booket@0: a.bookmark-link:visited:focus, guido+booket@0: a.bookmark-link:visited:active { guido+booket@0: color: #07316e; guido+booket@0: } guido+booket@2: guido+booket@3: .bookmark-hostname, guido+booket@3: .bookmark-metadata { guido+booket@2: color: #555753; guido+booket@2: font-size: .75em; guido+booket@3: } guido+booket@3: guido+booket@4: .bookmark-actions { guido+booket@4: margin-left: 1.5em; guido+booket@4: } guido+booket@4: guido+booket@3: dl.bookmark-metadata { guido+booket@4: margin: .25em 0 0 2em; guido+booket@2: } guido+booket@2: guido+booket@2: dl.bookmark-metadata dt { guido+booket@2: font-weight: bold; guido+booket@2: } guido+booket@2: guido+booket@2: dl.bookmark-metadata dt::after { guido+booket@2: content: ':'; guido+booket@2: } guido+booket@2: guido+booket@2: dl.bookmark-metadata dd { guido+booket@2: margin: 0; guido+booket@2: padding: 0; guido+booket@2: }