practical-computing/custom.css at main · wur-bioinformatics/practical-computing · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* Hides the copy button in MyST CLI code blocks */
.no-copybutton button {
    display: none !important;
}

/* Change the appearance of hover links (like glossary terms) */
a.hover-link[href*="#term-"] {
    color: rgb(118 22 163) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* Slight color change on hover */
a.hover-link:hover[href*="#term-"] {
    color: rgb(203, 130, 236) !important;
}

/* Style custom wiki hyperlinks (using *= to catch expanded URLs) */
a[href*="wiki"] {
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-style: solid !important;

    /* Force MyST's default dotted borders/shadows to disappear */
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Add a slight color change or opacity shift on hover */
a[href*="wiki"]:hover {
    opacity: 0.7 !important;
}

/* ---------------------------------------------------------
   INTERNAL CROSS-REFERENCES (Examples, Figures, Tables)
   --------------------------------------------------------- */

/* Target MyST's internal links, but EXPLICITLY IGNORE glossary terms */
a.hover-link:not([href*="#term-"]),
a.link:not([href*="#term-"]) {
    color: rgb(37 99 235) !important; /* Standard default link blue */

    /* Override Tailwind's built-in underline properties */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
}

/* Add a solid underline ONLY when hovering */
a.hover-link:not([href*="#term-"]):hover,
a.link:not([href*="#term-"]):hover {
    text-decoration: underline !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: rgb(37 99 235) !important; /* Matches the hover text color */
    color: rgb(37 99 235) !important; /* Slightly darker blue */
}

/* ---------------------------------------------------------
   seealso admonition (i.e. further reading)
   --------------------------------------------------------- */

/* Change the header background color of seealso / admonitions */
/* Scope the green-600/50 utility overrides exclusively to seealso admonitions */
aside.myst-admonition-seealso.border-green-600,
aside.myst-admonition-seealso .border-green-600 {
    --tw-border-opacity: 1 !important;
    border-color: rgb(118 22 163) !important;
    border-top-color: rgb(118 22 163) !important;
    border-right-color: rgb(118 22 163) !important;
    border-bottom-color: rgb(118 22 163) !important;
    border-left-color: rgb(118 22 163) !important;
}

aside.myst-admonition-seealso .bg-green-50 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(118 22 163 / 13%) !important;
}

aside.myst-admonition-seealso .text-green-600 {
    --tw-text-opacity: 1 !important;
    color: rgb(118 22 163 / var(--tw-text-opacity, 1)) !important;
}

/* ---------------------------------------------------------
   regex text editing
   --------------------------------------------------------- */

/* Custom inline text colors */
.red-text {
    color: #fb0c0c !important;
}

/* Highlights regex matches with coloured text and a colored underline */
.regex-match {
    color: #fb0c0c !important; /* This colors the text itself red */
    text-decoration: underline;
    text-decoration-color: #fb0c0c !important;
    text-decoration-thickness: 2.2px;
    text-underline-offset: 2.5px;
}