1/**
2 * This file provides styles for the note plugin if the option pluginNote is enabled
3*/
4
5&:root[pluginnote="1"] {
6
7    /* Base colors */
8    @classic_light:     __note_plugin_classic_color__;
9    @important_light:   __note_plugin_important_color__;
10    @warning_light:     __note_plugin_warning_color__;
11    @tip_light:         __note_plugin_tip_color__;
12
13    @opacity_dark: 0.8;
14
15    /* general styles */
16    .noteclassic, .noteimportant, .notewarning, .notetip {
17        margin: 1em auto;
18        width: auto;
19        max-width: 100%;
20        min-height: 20px;
21        clear: none;
22        text-align: justify;
23        vertical-align: middle;
24        border-collapse: collapse;
25        padding: 15px 20px 15px 50px;
26        background-position: 15px 50%;
27        background-repeat: no-repeat;
28        border-radius: 2px;
29        color: black;
30        font-size: 100%;
31        overflow: auto;
32        font-family: Consolas,"Andale Mono WT","Andale Mono","Bitstream Vera Sans Mono","Nimbus Mono L",Monaco,"Courier New",monospace;
33        border-left: 13px solid;
34        border-right: 1px solid;
35        border-top: 1px solid;
36        border-bottom: 1px solid;
37    }
38
39    .noteclassic {
40        border-color: darken(@classic_light, 20%);
41        background-color: @classic_light;
42        background-image: url(images/plugin_note/note.svg);
43    }
44
45    .noteimportant {
46        border-color: darken(@important_light, 40%);
47        background-color: @important_light;
48        background-image: url(images/plugin_note/important.svg);
49    }
50
51    .notewarning {
52        border-color: darken(@warning_light, 20%);
53        background-color: @warning_light;
54        background-image: url(images/plugin_note/warning.svg);
55    }
56
57    .notetip {
58        border-color: darken(@tip_light, 20%);
59        background-color: @tip_light;
60        background-image: url(images/plugin_note/tip.svg);
61    }
62
63    /**************************************************/
64    /* DARK MODE                                      */
65    /* for dark mode just reduce the opacity a little */
66    /**************************************************/
67
68    .darkModeNotePlugin{
69        .noteclassic {
70            opacity: @opacity_dark;
71        }
72
73        .noteimportant {
74            opacity: @opacity_dark;
75        }
76
77        .notewarning {
78            opacity: @opacity_dark;
79        }
80
81        .notetip {
82            opacity: @opacity_dark;
83        }
84    }
85
86    /* dark theme and automatic is switched off*/
87    &:root[theme="dark"] {
88        .darkModeNotePlugin();
89    }
90
91    /* User prefers dark theme and automatic is switched on*/
92    @media (prefers-color-scheme: dark){
93        &:root[theme="auto"] {
94            .darkModeNotePlugin();
95        }
96    }
97}
98
99