bookmark/styles.css at master · AlexKucera/bookmark · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/* Bookmark plugin styles */

/* Style for bookmarked lines */
.cm-bookmark-line {
    position: relative;
}

/* Add bookmark icon in the gutter area */
.cm-bookmark-line::before {
    content: '';
    position: absolute;
    left: -36px;
    width: 24px;
    height: 24px;
    background-color: #dc2626; /* Dark red color */
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3e%3c/svg%3e") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3e%3c/svg%3e") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
    z-index: 1;
    pointer-events: none;
}

/* Alternative bookmark marker styles for different themes */
.theme-dark .cm-bookmark-line::before {
    color: var(--text-accent);
}

.theme-light .cm-bookmark-line::before {
    color: var(--text-accent);
}

/* Ensure the bookmark icon doesn't interfere with line numbers */
.cm-editor .cm-bookmark-line::before {
    left: -36px;
}

/* Optional: Add subtle background highlight to bookmarked lines */
.cm-bookmark-line {
    background-color: rgba(var(--color-accent-rgb), 0.1);
    position: relative;
    margin-left: 0px;
}

/* Create red line as a separate element positioned to the left */
.cm-bookmark-line::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-accent);
}

/* Hide bookmark marker text only in Live Preview (edit mode), not source mode */
.markdown-source-view.mod-cm6.is-live-preview .cm-bookmark-marker-hidden {
    display: none !important;
}