source: OKFNAnnotator (for Zope)/annotator_files/css/annotator.css @ 3:6356e78ccf5c

/* 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;
}