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