Annotator.scss

@import 'boxui';
@import 'boxuiVariables';

$highlight-yellow: #fed94e;
$highlight-yellow-active-hover: #ffc900;
$highlight-yellow-hover: #f5b31b;

// Taken from Box React UI avatar
$avatar-color-1: #18bbf7;
$avatar-color-2: #0d67c7;
$avatar-color-3: #052e5c;
$avatar-color-4: #747679;
$avatar-color-5: #fda308;
$avatar-color-6: #98c332;
$avatar-color-7: #159f45;
$avatar-color-8: #b800b2;
$avatar-color-9: #f22c44;

$tablet: 'max-width: 768px';

.bp-annotate-draw-background {
    background-color: $fours;
}

.bp-annotate-draw-header,
.bp-header.bp-annotate-draw-header {
    background-color: $twos;
    border: none;
    position: relative;
}

.bp-header button.bp-btn-annotate-draw-cancel {
    background-color: $twos;
    border: solid $off-white 1px;
    color: $off-white;

    &:hover {
        background-color: $black;
    }
}

.bp-header button.bp-btn-annotate-draw-post {
    background-color: $off-white;
    color: $twos;

    &:hover {
        background-color: $white;
    }
}

.bp-container .bp-annotate-draw-post-cancel-container {
    margin-right: 20px;
    position: absolute;
    right: 0;
    top: 0;

    button {
        height: 32px;
        margin: 8px;
    }
}

.bp-container .bp-annotate-draw-undo-redo-container {
    margin: 0 auto;

    .is-disabled.bp-btn-annotate-draw-undo,
    .is-disabled.bp-btn-annotate-draw-redo,
    .bp-btn-annotate-draw-undo,
    .bp-btn-annotate-draw-redo,
    button.bp-btn-annotate-draw-undo,
    button.bp-btn-annotate-draw-redo {
        background: none;
        border: none;
        margin: 5px;

        svg {
            fill: $off-white;
            vertical-align: middle;
        }
    }
}

.bp-annotation-caret {
    left: 50%;
    position: absolute;

    // CSS arrow for caret above container
    &::after,
    &::before {
        border: solid transparent;
        content: ' ';
        height: 0;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: 0;
        transform: rotate(-225deg);
        width: 0;
    }

    &::after {
        border-color: transparent transparent $white $white;
        border-width: 6px;
        margin: -4px 0 0 -6px;
    }

    &::before {
        border-color: transparent transparent $sf-fog $sf-fog;
        border-width: 6px;
        margin: -5px 0 0 -6px;
    }
}

// Icon buttons
.delete-comment-btn {
    svg {
        fill: lighten($better-black, 10%);
    }

    &:hover svg {
        fill: $better-black;
    }
}

.bp-annotation-drawing-dialog,
.bp-annotation-highlight-dialog .bp-btn-plain,
.bp-annotation-highlight-dialog .bp-btn-plain:hover {
    padding-left: 5px;
    padding-right: 5px;

    .icon,
    svg {
        fill: lighten($better-black, 10%);
    }

    &:hover .icon,
    &:hover svg {
        fill: $better-black;
    }
}

.bp-highlight-comment-btn:hover .icon {
    fill: $white;
}

.bp-add-highlight-btn:hover svg {
    fill: $highlight-yellow;
}

.bp-is-text-highlighted .bp-annotation-highlight-dialog .bp-btn-plain {
    svg {
        fill: $highlight-yellow;
    }

    &.bp-is-active svg {
        fill: $highlight-yellow-active-hover;
    }

    &:hover svg {
        fill: $highlight-yellow-hover;
    }
}

.bp-btn-plain.bp-btn-annotate-point.bp-is-active svg {
    fill: $box-blue;
}

//------------------------------------------------------------------------------
// CSS for points and dialogs
//------------------------------------------------------------------------------

.bp-annotation-dialog,
.bp-create-annotation-dialog {
    border-top: 20px solid transparent; // Transparent border for hover detection
    cursor: default; // Overrides cursor: none from annotation mode
    position: absolute;
    text-align: left;
    z-index: 9999; // Annotation dialog should be above other content

    .annotation-container {
        background-color: $white;
        border: 1px solid $seesee;
        border-radius: 4px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 15px;
        white-space: normal;
        width: 282px; // Hard-coded width to solve layout issues
    }

    .bp-textarea {
        display: block;
        font-size: 13px;
        height: 34px;
        line-height: 13px;
        margin: 0;
        max-width: 235px;
        min-height: 34px;
        padding: 7px;
        resize: vertical;
        transition: border-color linear .15s, box-shadow linear .1s, min-height .1s;
        width: 235px;

        &.bp-is-active {
            min-height: 68px;
        }

        &.bp-invalid-input {
            border-color: fade-out($great-balls-of-fire, .5);
        }
    }

    .annotation-comment {
        border-bottom: 1px solid $seesee;
        margin-top: 15px;
        padding-bottom: 15px;
        position: relative;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            border-bottom: 0;
        }
    }

    &.cannot-annotate {
        .annotation-comment:last-child {
            padding-bottom: 0;
        }

        .delete-comment-btn,
        .reply-container {
            display: none;
        }
    }

    .profile-image-container {
        display: inline-block;
        padding-right: 5px;
        vertical-align: top;
        width: 37px;

        img {
            border-radius: 50%;
            display: block; // Remove padding from inline display
            height: 32px;
            width: 32px;
        }
    }

    .profile-container {
        display: inline-block;

        .user-name {
            color: $fours;
            font-size: 13px;
            font-weight: bold;
            max-width: 175px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .comment-date {
            color: lighten($fours, 20%);
            font-size: 11px;
            padding-top: 2px;
        }
    }

    .comment-text {
        color: $fours;
        font-size: 12px;
        padding-top: 10px;
        width: 250px;
        word-wrap: break-word;
    }

    .delete-confirmation {
        background-color: fade-out($white, .05);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2; // Above the delete button

        .button-container {
            margin-top: 0;
            text-align: center;
        }
    }

    .delete-confirmation-message {
        color: $fours;
        font-size: 12px;
        padding: 0 0 5px;
        text-align: center;
    }

    .button-container {
        margin-top: 15px;
        position: relative;
        text-align: right;
        width: 100%;

        .bp-btn:last-child {
            margin-right: 0;
        }
    }

    .delete-comment-btn {
        position: absolute;
        right: 0;
        top: 0;

        svg {
            height: 18px;
            width: 18px;
        }

        &:focus {
            box-shadow: 0 0 2px 1px fade-out($black, .8);
        }
    }
}

.bp-point-annotation-marker {
    background-color: transparent;
    border-style: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    width: 24px;

    &:hover {
        z-index: 9999; // Ensure activated point annotation icon is above dialog
    }

    svg {
        fill: fade-out($box-blue, .35);
        transition: fill .5s;
    }

    &:hover svg {
        fill: $box-blue;
    }
}

.bp-point-annotation-marker.bp-annotation-dialog-flipped {
    path,
    rect {
        display: none;
    }
}

.bp-annotation-dialog-flipped {
    .bp-annotation-caret {
        transform: rotate(180deg);
    }
}

.bp-annotation-profile {
    background-color: $tendemob-grey;
    border-radius: 16px; // Circle
    color: $white;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 32px;

    &.avatar-color-0 {
        background-color: $avatar-color-1;
    }

    &.avatar-color-1 {
        background-color: $avatar-color-2;
    }

    &.avatar-color-2 {
        background-color: $avatar-color-3;
    }

    &.avatar-color-3 {
        background-color: $avatar-color-4;
    }

    &.avatar-color-4 {
        background-color: $avatar-color-5;
    }

    &.avatar-color-5 {
        background-color: $avatar-color-6;
    }

    &.avatar-color-6 {
        background-color: $avatar-color-7;
    }

    &.avatar-color-7 {
        background-color: $avatar-color-8;
    }

    &.avatar-color-8 {
        background-color: $avatar-color-9;
    }
}

//------------------------------------------------------------------------------
// CSS for highlights
//------------------------------------------------------------------------------
.bp-annotation-layer-highlight {
    cursor: text;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 15px; // Match 15px padding top on page
}

.bp-highlight-dialog {
    border-top: 20px solid transparent; // Transparent border for hover detection
    color: $fours;
    display: table;
    position: absolute;
    z-index: 9999;

    &.cannot-annotate {
        .bp-add-highlight-btn,
        .bp-highlight-comment-btn {
            display: none;
        }
    }
}

.bp-annotation-drawing-dialog,
.bp-annotation-highlight-dialog,
.bp-annotation-highlight-dialog:hover {
    background-color: $white;
    border: 1px solid $seesee;
    border-radius: 3px;
    padding: 5px 6px;

    // Center buttons
    .bp-add-highlight-btn {
        padding-top: 1px;
    }

    .bp-btn-annotate-draw-add,
    .bp-btn-annotate-draw-delete {
        color: lighten($better-black, 10%);
        padding: 8px;

        &:hover,
        &:active {
            color: $better-black;
            padding: 8px;
        }
    }

    .bp-btn-annotate-draw-add,
    .bp-btn-annotate-draw-add:active,
    .bp-btn-annotate-draw-add:hover {
        padding-right: 4px;
    }

    .bp-btn-annotate-draw-delete,
    .bp-btn-annotate-draw-delete:active,
    .bp-btn-annotate-draw-delete:hover {
        padding-left: 4px;
    }

    .bp-highlight-comment-btn {
        padding-top: 3px;
    }
}

.bp-create-highlight-comment {
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 9px;
    white-space: normal;
}

.bp-annotation-drawing-dialog {
    padding: 0;
}

.bp-use-default-cursor {
    cursor: default;

    // Overrides pdf_viewer.css
    .textLayer > div {
        cursor: default;
    }
}

// Quad point positioning - the helper divs are positioned relative to the Rangy-created element
.bp-doc .rangy-highlight {
    background-color: #ff0;
    position: relative;
}

// These helper divs allow us to calculate the quad points of an element
.bp-quad-corner-container {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.bp-quad-corner {
    background: none;
    height: 0;
    position: absolute;
    width: 0;

    &.corner1 {
        bottom: 0;
        left: 0;
    }

    &.corner2 {
        bottom: 0;
        right: 0;
    }

    &.corner3 {
        right: 0;
        top: 0;
    }

    &.corner4 {
        left: 0;
        top: 0;
    }
}

.bp-annotation-drawing-label,
.bp-annotation-highlight-label {
    padding: 8px 0 8px 8px;
    width: 100%;
}

//------------------------------------------------------------------------------
// Draw annotation mode
//------------------------------------------------------------------------------
.bp-annotation-draw-boundary {
    animation: dash 1s linear infinite;
    fill: none;
    stroke: rgb(0, 0, 0);
    stroke-dasharray: 5;
    stroke-width: 3px;
}

@keyframes dash {
    from {
        stroke-dashoffset: 10;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.bp-annotation-draw .textLayer {
    pointer-events: none;

    > div {
        pointer-events: auto;
    }
}

.bp-annotation-layer-draw,
.bp-annotation-layer-draw-in-progress {
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 15px; // Match 15px padding top on page
}

//------------------------------------------------------------------------------
// Annotation mode
//------------------------------------------------------------------------------
.bp-annotation-mode .page,
.bp-annotation-mode .bp-annotation-layer-highlight,
.bp-annotation-mode .textLayer > div,
.bp-annotation-mode > img,
.bp-annotation-mode img {
    cursor: crosshair;
}

// Needed to allow point annotations since PDF.js adds a funky mousedown handler
// that helps with text selection - we need to disable this since it interacts
// badly with point annotations on non-text divs in non-Chrome browsers
.bp-annotation-mode .textLayer > div,
.bp-annotation-mode .textLayer .endOfContent {
    pointer-events: none;
}

@import './MobileAnnotator';