Mercurial > hg > OKFNAnnotator
diff annotator_files/css/annotator.css @ 3:6356e78ccf5c
new version contains Annotator JS files to be used with FilesystemSite.
author | casties |
---|---|
date | Thu, 05 Apr 2012 19:37:27 +0200 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/annotator_files/css/annotator.css Thu Apr 05 19:37:27 2012 +0200 @@ -0,0 +1,878 @@ +/* Base Reset +-------------------------------------------------------------------- */ + +.annotator-notice, +.annotator-filter *, +.annotator-widget * { + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; + font-weight: normal; + text-align: left; + margin: 0; + padding: 0; + background: none; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; + color: rgb(144, 144, 144); +} + +/* Images +-------------------------------------------------------------------- */ + +.annotator-adder { + background-image: url(../img/annotator-icon-sprite.png); + background-repeat: no-repeat; +} + +.annotator-resize, +.annotator-widget::after, +.annotator-editor a::after, +.annotator-viewer .annotator-controls button, +.annotator-viewer .annotator-controls a, +.annotator-filter .annotator-filter-navigation button::after, +.annotator-filter .annotator-filter-property .annotator-filter-clear { + background-image: url(../img/annotator-glyph-sprite.png); + background-repeat: no-repeat; +} + +/* Annotator Highlight +-------------------------------------------------------------------- */ + +.annotator-hl { + background: rgba(255, 255, 10, 0.3); +} + +/* Annotator Wrapper +-------------------------------------------------------------------- */ + +.annotator-wrapper { + position: relative; +} + +.annotator-adder, +.annotator-outer, +.annotator-notice { + z-index: 9999; +} + +.annotator-adder, +.annotator-outer, +.annotator-widget, +.annotator-notice { + position: absolute; + font-size: 10px; + line-height: 1; +} + +.annotator-hide { + display: none; + visibility: hidden; +} + +/* Annotator Adder +-------------------------------------------------------------------- */ + +.annotator-adder { + margin-top: -48px; + margin-left: -24px; + width: 48px; + height: 48px; + background-position: left top; +} + +.annotator-adder:hover { + background-position: center top; +} + +.annotator-adder:active { + background-position: center right; +} + +.annotator-adder button { + display: block; + width: 36px; + height: 41px; + margin: 0 auto; + border: none; + background: none; + text-indent: -999em; + cursor: pointer; +} + +/* Annotator Widget + + This applies to both the Viewer and the Editor +-------------------------------------------------------------------- */ + +.annotator-outer { + width: 0; + height: 0; +} + +.annotator-widget { + margin: 0; + padding: 0; + bottom: 15px; + left: -18px; + min-width: 265px; + background-color: rgba(251, 251, 251, 0.98); + border: 1px solid rgba(122, 122, 122, 0.6); + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + -o-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.annotator-invert-x .annotator-widget { + left: auto; + right: -18px; +} + +.annotator-invert-y .annotator-widget { + bottom: auto; + top: 8px; +} + +.annotator-widget strong { + font-weight: bold; +} + +.annotator-widget .annotator-listing, +.annotator-widget .annotator-item { + padding: 0; + margin: 0; + list-style: none; +} + +.annotator-widget::after { + content: ""; + display: block; + width: 18px; + height: 10px; + background-position: 0 0; + position: absolute; + bottom: -10px; + left: 8px; +} + +.annotator-invert-x .annotator-widget::after { + left: auto; + right: 8px; +} + +.annotator-invert-y .annotator-widget::after { + background-position: 0 -15px; + bottom: auto; + top: -9px; +} + +.annotator-widget .annotator-item, +.annotator-editor .annotator-item input, +.annotator-editor .annotator-item textarea { + position: relative; + font-size: 12px; +} + +.annotator-viewer .annotator-item { + border-top: 2px solid rgba(122, 122, 122, 0.2); +} + +.annotator-widget .annotator-item:first-child { + border-top: none; +} + +.annotator-editor .annotator-item, +.annotator-viewer div { + border-top: 1px solid rgba(133, 133, 133, 0.11); +} + +/* Annotator Viewer +-------------------------------------------------------------------- */ + +.annotator-viewer div { + padding: 6px 6px; +} + +.annotator-viewer .annotator-item ol, +.annotator-viewer .annotator-item ul { + padding: 4px 16px; +} + +.annotator-viewer .annotator-item li { +} + +.annotator-viewer div:first-of-type, +.annotator-editor .annotator-item:first-child textarea { + padding-top: 12px; + padding-bottom: 12px; + color: rgb(60, 60, 60); + font-size: 13px; + font-style: italic; + line-height: 1.3; + border-top: none; +} + +.annotator-viewer .annotator-controls { + position: relative; + top: 5px; + right: 5px; + padding-left: 5px; + opacity: 0; + -webkit-transition: opacity 0.2s ease-in; + -moz-transition: opacity 0.2s ease-in; + -o-transition: opacity 0.2s ease-in; + transition: opacity 0.2s ease-in; + float: right; +} + +.annotator-viewer li:hover .annotator-controls, +.annotator-viewer li .annotator-controls.annotator-visible { + opacity: 1; +} + +.annotator-viewer .annotator-controls button, +.annotator-viewer .annotator-controls a { + cursor: pointer; + display: inline-block; + width: 13px; + height: 13px; + margin-left: 2px; + border: none; + opacity: 0.2; + text-indent: -900em; + background-color: transparent; + outline: none; +} + +.annotator-viewer .annotator-controls button:hover, +.annotator-viewer .annotator-controls button:focus, +.annotator-viewer .annotator-controls a:hover, +.annotator-viewer .annotator-controls a:focus { + opacity: 0.9; +} + +.annotator-viewer .annotator-controls button:active, +.annotator-viewer .annotator-controls a:active { + opacity: 1; +} + +.annotator-viewer .annotator-controls button[disabled] { + display: none; +} + +.annotator-viewer .annotator-controls .annotator-edit { + background-position: 0 -60px; +} + +.annotator-viewer .annotator-controls .annotator-delete { + background-position: 0 -75px; +} + +.annotator-viewer .annotator-controls .annotator-link { + background-position: 0 -270px; +} + +/* Annotator Editor +-------------------------------------------------------------------- */ + +.annotator-editor .annotator-item { + position: relative; +} + +.annotator-editor .annotator-item label { + top: 0; + display: inline; + cursor: pointer; + font-size: 12px; +} + +.annotator-editor .annotator-item input, +.annotator-editor .annotator-item textarea { + display: block; + min-width: 100%; + padding: 10px 8px; + border: none; + margin: 0; + color: rgb(60, 60, 60); + background: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + resize: none; +} + +.annotator-editor .annotator-item textarea::-webkit-scrollbar { + height: 8px; + width: 8px; +} + +.annotator-editor .annotator-item textarea::-webkit-scrollbar-track-piece { + margin: 13px 0 3px; + background-color: #e5e5e5; + -webkit-border-radius: 4px; +} + +.annotator-editor .annotator-item textarea::-webkit-scrollbar-thumb:vertical { + height: 25px; + background-color: #ccc; + -webkit-border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); +} + +.annotator-editor .annotator-item textarea::-webkit-scrollbar-thumb:horizontal { + width: 25px; + background-color: #ccc; + -webkit-border-radius: 4px; +} + +.annotator-editor .annotator-item:first-child textarea { + min-height: 5.5em; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + -o-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} + +.annotator-editor .annotator-item input:focus, +.annotator-editor .annotator-item textarea:focus{ + background-color: rgb(243, 243, 243); + outline: none; +} + +.annotator-editor .annotator-item input[type=radio], +.annotator-editor .annotator-item input[type=checkbox] { + width: auto; + min-width: 0; + padding: 0; + display: inline; + margin: 0 4px 0 0; + cursor: pointer; +} + +.annotator-editor .annotator-checkbox { + padding: 8px 6px; +} + +.annotator-filter, +.annotator-filter .annotator-filter-navigation button, +.annotator-editor .annotator-controls { + text-align: right; + padding: 3px; + border-top: 1px solid rgb(212,212,212); + background-color: rgb(212, 212, 212); + background-image: -webkit-gradient( + linear, left top, left bottom, + from(rgb(245, 245, 245)), + color-stop(0.6, rgb(220, 220, 220)), + to(rgb(210, 210, 210)) + ); + background-image: -moz-linear-gradient( + -90deg, + rgb(245, 245, 245), + rgb(220, 220, 220) 60%, + rgb(210, 210, 210) + ); + background-image: -webkit-linear-gradient( + -90deg, + rgb(245, 245, 245), + rgb(220, 220, 220) 60%, + rgb(210, 210, 210) + ); + background-image: linear-gradient( + -90deg, + rgb(245, 245, 245), + rgb(220, 220, 220) 60%, + rgb(210, 210, 210) + ); + -webkit-box-shadow: + inset 1px 0 0 rgba(255, 255, 255, 0.7), + inset -1px 0 0 rgba(255, 255, 255, 0.7), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + -moz-box-shadow: + inset 1px 0 0 rgba(255, 255, 255, 0.7), + inset -1px 0 0 rgba(255, 255, 255, 0.7), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + -o-box-shadow: + inset 1px 0 0 rgba(255, 255, 255, 0.7), + inset -1px 0 0 rgba(255, 255, 255, 0.7), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + box-shadow: + inset 1px 0 0 rgba(255, 255, 255, 0.7), + inset -1px 0 0 rgba(255, 255, 255, 0.7), + inset 0 1px 0 rgba(255, 255, 255, 0.7); + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + -o-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; +} + +.annotator-invert-y .annotator-controls { + border-top: none; + border-bottom: 1px solid rgb(180, 180, 180); + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + -o-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} + +.annotator-editor a, +.annotator-filter .annotator-filter-property label { + position: relative; + display: inline-block; + padding: 0 6px 0 22px; + color: rgb(54, 54, 54); + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); + text-decoration: none; + line-height: 24px; + font-size: 12px; + font-weight: bold; + border: 1px solid rgb(162, 162, 162); + background-color: rgb(212, 212, 212); + background-image: -webkit-gradient( + linear, left top, left bottom, + from(rgb(245, 245, 245)), + color-stop(0.5, rgb(210, 210, 210)), + color-stop(0.5, rgb(190, 190, 190)), + to(rgb(210, 210, 210)) + ); + background-image: -moz-linear-gradient( + -90deg, + rgb(245, 245, 245), + rgb(210, 210, 210) 50%, + rgb(190, 190, 190) 50%, + rgb(210, 210, 210) + ); + background-image: -webkit-linear-gradient( + -90deg, + rgb(245, 245, 245), + rgb(210, 210, 210) 50%, + rgb(190, 190, 190) 50%, + rgb(210, 210, 210) + ); + background-image: linear-gradient( + -90deg, + rgb(245, 245, 245), + rgb(210, 210, 210) 50%, + rgb(190, 190, 190) 50%, + rgb(210, 210, 210) + ); + -webkit-box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); + -moz-box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); + -o-box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); + box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; +} + +.annotator-editor a::after { + position: absolute; + top: 50%; + left: 5px; + display: block; + content: ""; + width: 15px; + height: 15px; + margin-top: -7px; + background-position: 0 -90px; +} + +.annotator-editor a:hover, +.annotator-editor a:focus, +.annotator-editor a.annotator-focus, +.annotator-filter .annotator-filter-active label, +.annotator-filter .annotator-filter-navigation button:hover { + outline: none; + border-color: rgb(67, 90, 160); + background-color: rgb(56, 101, 249); + background-image: -webkit-gradient( + linear, left top, left bottom, + from(rgb(118, 145, 251)), + color-stop(0.5, rgb(80, 117, 251)), + color-stop(0.5, rgb(56, 101, 249)), + to(rgb(54, 101, 250)) + ); + background-image: -moz-linear-gradient( + -90deg, + rgb(118, 145, 251), + rgb(80, 117, 251) 50%, + rgb(56, 101, 249) 50%, + rgb(54, 101, 250) + ); + background-image: -webkit-linear-gradient( + -90deg, + rgb(118, 145, 251), + rgb(80, 117, 251) 50%, + rgb(56, 101, 249) 50%, + rgb(54, 101, 250) + ); + background-image: linear-gradient( + -90deg, + rgb(118, 145, 251), + rgb(80, 117, 251) 50%, + rgb(56, 101, 249) 50%, + rgb(54, 101, 250) + ); + color: rgb(255, 255, 255); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.42); +} + +.annotator-editor a:hover::after, +.annotator-editor a:focus::after { + margin-top: -8px; + background-position: 0 -105px; +} + +.annotator-editor a:active, +.annotator-filter .annotator-filter-navigation button:active { + border-color: rgb(112, 12, 73); + background-color: rgb(209, 46, 142); + background-image: -webkit-gradient( + linear, left top, left bottom, + from(rgb(252, 124, 202)), + color-stop(0.5, rgb(232, 93, 178)), + color-stop(0.5, rgb(209, 46, 142)), + to(rgb(255, 0, 156)) + ); + background-image: -moz-linear-gradient( + -90deg, + rgb(252, 124, 202), + rgb(232, 93, 178) 50%, + rgb(209, 46, 142) 50%, + rgb(255, 0, 156) + ); + background-image: -webkit-linear-gradient( + -90deg, + rgb(252, 124, 202), + rgb(232, 93, 178) 50%, + rgb(209, 46, 142) 50%, + rgb(255, 0, 156) + ); + background-image: linear-gradient( + -90deg, + rgb(252, 124, 202), + rgb(232, 93, 178) 50%, + rgb(209, 46, 142) 50%, + rgb(255, 0, 156) + ); +} + +.annotator-editor a.annotator-save::after { + background-position: 0 -120px; +} + +.annotator-editor a.annotator-save:hover::after, +.annotator-editor a.annotator-save:focus::after, +.annotator-editor a.annotator-save.annotator-focus::after { + margin-top: -8px; + background-position: 0 -135px; +} + +.annotator-editor .annotator-widget::after { + background-position: 0 -30px; +} + +.annotator-editor.annotator-invert-y .annotator-widget .annotator-controls { + background-color: #f2f2f2; +} + +.annotator-editor.annotator-invert-y .annotator-widget::after { + background-position: 0 -45px; + height: 11px; +} + +.annotator-resize { + position: absolute; + top: 0; + right: 0; + width: 12px; + height: 12px; + background-position: 2px -150px; +} + +.annotator-invert-x .annotator-resize { + right: auto; + left: 0; + background-position: 0 -195px; +} + +.annotator-invert-y .annotator-resize { + top: auto; + bottom: 0; + background-position: 2px -165px; +} + +.annotator-invert-y.annotator-invert-x .annotator-resize { + background-position: 0 -180px; +} + +/* Annotator Notification +-------------------------------------------------------------------- */ + +.annotator-notice { + color: #fff; + position: absolute; + position: fixed; + top: -54px; + left: 0; + width: 100%; + font-size: 14px; + line-height: 50px; + text-align: center; + background: black; + background: rgba(0, 0, 0, 0.9); + border-bottom: 4px solid #d4d4d4; + -webkit-transition: top 0.4s ease-out; + -moz-transition: top 0.4s ease-out; + -o-transition: top 0.4s ease-out; + transition: top 0.4s ease-out; +} + +.ie6 .annotator-notice { + position: absolute; +} + +.annotator-notice-success { + border-color: #3665f9; +} + +.annotator-notice-error { + border-color: #ff7e00; +} + +.annotator-notice p { + margin: 0; +} + +.annotator-notice a { + color: #fff; +} + +.annotator-notice-show { + top: 0; +} + +/* Annotator Tags Plugin +-------------------------------------------------------------------- */ + +.annotator-tags { + margin-bottom: -2px; +} + +.annotator-tags .annotator-tag { + display: inline-block; + padding: 0 8px; + margin-bottom: 2px; + line-height: 1.6; + font-weight: bold; + background-color: rgb(230, 230, 230); + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -o-border-radius: 8px; + border-radius: 8px; +} + +/* Annotator Filter Plugin +-------------------------------------------------------------------- */ + +.annotator-filter { + z-index: 9998; /* notifications/popups at 9999; filter bar should be lower */ + position: fixed; + top: 0; + right: 0; + left: 0; + text-align: left; + line-height: 0; + border: none; + border-bottom: 1px solid #878787; + padding-left: 10px; + padding-right: 10px; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: + inset 0 -1px 0 rgba(255, 255, 255, 0.3); + -moz-box-shadow: + inset 0 -1px 0 rgba(255, 255, 255, 0.3); + -o-box-shadow: + inset 0 -1px 0 rgba(255, 255, 255, 0.3); + box-shadow: + inset 0 -1px 0 rgba(255, 255, 255, 0.3); +} + +.annotator-filter strong { + font-size: 12px; + font-weight: bold; + color: #3c3c3c; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); + position: relative; + top: -9px; +} + + +.annotator-filter .annotator-filter-property, +.annotator-filter .annotator-filter-navigation { + position: relative; + display: inline-block; + overflow: hidden; + line-height: 10px; + padding: 2px 0; + margin-right: 8px; +} + +.annotator-filter .annotator-filter-property label, +.annotator-filter .annotator-filter-navigation button { + text-align: left; + display: block; + float: left; + line-height: 20px; + -webkit-border-radius: 10px 0 0 10px; + -moz-border-radius: 10px 0 0 10px; + -o-border-radius: 10px 0 0 10px; + border-radius: 10px 0 0 10px; +} + +.annotator-filter .annotator-filter-property label { + padding-left: 8px; +} + +.annotator-filter .annotator-filter-property input { + display: block; + float: right; + -webkit-appearance: none; + background-color: #fff; + border: 1px solid #878787; + border-left: none; + padding: 2px 4px; + line-height: 16px; + min-height: 16px; + font-size: 12px; + width: 150px; + color: #333; + background-color: #f8f8f8; + -webkit-border-radius: 0 10px 10px 0; + -moz-border-radius: 0 10px 10px 0; + -o-border-radius: 0 10px 10px 0; + border-radius: 0 10px 10px 0; + -webkit-box-shadow: + inset 0 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: + inset 0 1px 1px rgba(0, 0, 0, 0.2); + -o-box-shadow: + inset 0 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: + inset 0 1px 1px rgba(0, 0, 0, 0.2); + +} + +.annotator-filter .annotator-filter-property input:focus { + outline: none; + background-color: #fff; +} + +.annotator-filter .annotator-filter-clear { + position: absolute; + right: 3px; + top: 6px; + border: none; + text-indent: -900em; + width: 15px; + height: 15px; + background-position: 0 -90px; + opacity: 0.4; +} + +.annotator-filter .annotator-filter-clear:hover, +.annotator-filter .annotator-filter-clear:focus { + opacity: 0.8; +} + +.annotator-filter .annotator-filter-clear:active { + opacity: 1; +} + +.annotator-filter .annotator-filter-navigation button { + border: 1px solid rgb(162, 162, 162); + padding: 0; + text-indent: -900px; + width: 20px; + min-height: 22px; + -webkit-box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); + -moz-box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); + -o-box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); + box-shadow: + inset 0 0 5px rgba(255, 255, 255, 0.2), + inset 0 0 1px rgba(255, 255, 255, 0.8); +} + +.annotator-filter .annotator-filter-navigation button, +.annotator-filter .annotator-filter-navigation button:hover, +.annotator-filter .annotator-filter-navigation button:focus { + color: transparent; +} + +.annotator-filter .annotator-filter-navigation button::after { + position: absolute; + top: 8px; + left: 8px; + content: ""; + display: block; + width: 9px; + height: 9px; + background-position: 0 -210px; +} + +.annotator-filter .annotator-filter-navigation button:hover::after { + background-position: 0 -225px; +} + +.annotator-filter .annotator-filter-navigation .annotator-filter-next { + -webkit-border-radius: 0 10px 10px 0; + -moz-border-radius: 0 10px 10px 0; + -o-border-radius: 0 10px 10px 0; + border-radius: 0 10px 10px 0; + border-left: none; +} + +.annotator-filter .annotator-filter-navigation .annotator-filter-next::after { + left: auto; + right: 7px; + background-position: 0 -240px; +} + +.annotator-filter .annotator-filter-navigation .annotator-filter-next:hover::after { + background-position: 0 -255px; +} + +.annotator-hl-active { + background: rgba(255, 255, 10, 0.8); +} + +.annotator-hl-filtered { + background-color: transparent; +}