1/** 2 * DokuWiki Plugin admnote (CSS styles) 3 * 4 * @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html 5 * @author Martin Donath <martin.donath@squidfunk.com> 6 * @author Klaus Vormweg <klaus.vormweg@gmx.de> 7 */ 8 9/* icon definitions */ 10:root { 11 --adm-abstract-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>'); 12 --adm-bug-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 00-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 00-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>'); 13 --adm-danger-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>'); 14 --adm-example-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 01.75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>'); 15 --adm-failure-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>'); 16 --adm-information-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>'); 17 --adm-note-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>'); 18 --adm-question-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>'); 19 --adm-quote-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>'); 20 --adm-achievement-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); 21 --adm-tip-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>'); 22 --adm-warning-pic: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>'); 23} 24 25/* Common definitions for all note types */ 26.admonition { 27 margin: 1.5625em 0; 28 padding: 0 .6rem; 29 overflow: auto; 30 color: hsla(0, 0%, 0%, 0.87); 31 line-height: 1.6; 32 color-adjust: exact; 33 page-break-inside: avoid; 34 background-color: hsla(0, 0%, 100%, 1); 35 border-left: .2rem solid #448aff; 36 border-radius: .1rem; 37 box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); 38 box-sizing: inherit; 39} 40.admonition-title { 41 position: relative; 42 margin: 0 -0.6rem 0rem -0.8rem; 43 padding: .4rem .6rem .4rem 2.4rem; 44 font-weight: 700; 45 background-color: rgba(68,138,255,.1); 46} 47 48.admonition-title::before { 49 position: absolute; 50 left: .8rem; 51 width: 1.25rem; 52 height: 1.25rem; 53 content: ""; 54} 55 56.admonition-title + p, .admonition-title + ul, .admonition-title + ol, 57.admonition-title + dl, .admonition-title + pre, .admonition-title + table, 58.admonition-title + blockquote { 59 margin-top: 1rem; 60} 61/* Note type definitions */ 62/* Note */ 63.admonition.note { 64 border-color: #448aff; 65} 66.note>.admonition-title { 67 background-color: rgba(68,138,255,.1); 68} 69.note>.admonition-title::before { 70 background-color: #448aff; 71 -webkit-mask-image: var(--adm-note-pic); 72 mask-image: var(--adm-note-pic); 73 -webkit-mask-repeat: no-repeat; 74 mask-repeat: no-repeat; 75} 76 77/* Abstract */ 78.admonition.abstract { 79 border-color: #00b0ff; 80} 81.abstract>.admonition-title { 82 background-color: rgba(0,176,255,.1); 83} 84.abstract>.admonition-title::before { 85 background-color: #00b0ff; 86 -webkit-mask-image: var(--adm-abstract-pic); 87 mask-image: var(--adm-abstract-pic); 88 -webkit-mask-repeat: no-repeat; 89 mask-repeat: no-repeat; 90} 91 92/* information */ 93.admonition.information { 94 border-color: #00b8d4; 95} 96.information>.admonition-title { 97 background-color: rgba(0,184,212,.1); 98} 99.information>.admonition-title::before { 100 background-color: #00b8d4; 101 -webkit-mask-image: var(--adm-information-pic); 102 mask-image: var(--adm-information-pic); 103 -webkit-mask-repeat: no-repeat; 104 mask-repeat: no-repeat; 105} 106 107/* Tip */ 108.admonition.tip { 109 border-color: #00bfa5; 110} 111.tip>.admonition-title { 112 background-color: rgba(0,191,165,.1); 113} 114.tip>.admonition-title::before { 115 background-color: #00bfa5; 116 -webkit-mask-image: var(--adm-tip-pic); 117 mask-image: var(--adm-tip-pic); 118 -webkit-mask-repeat: no-repeat; 119 mask-repeat: no-repeat; 120} 121 122/* achievement */ 123.admonition.achievement { 124 border-color: #00c853; 125} 126.achievement>.admonition-title { 127 background-color: rgba(0,200,83,.1); 128} 129.achievement>.admonition-title::before { 130 background-color: #00c853; 131 -webkit-mask-image: var(--adm-achievement-pic); 132 mask-image: var(--adm-achievement-pic); 133 -webkit-mask-repeat: no-repeat; 134 mask-repeat: no-repeat; 135} 136 137/* Question */ 138.admonition.question { 139 border-color: #64dd17; 140} 141.question>.admonition-title { 142 background-color: rgba(100,221,23,.1); 143} 144.question>.admonition-title::before { 145 background-color: #64dd17; 146 -webkit-mask-image: var(--adm-question-pic); 147 mask-image: var(--adm-question-pic); 148 -webkit-mask-repeat: no-repeat; 149 mask-repeat: no-repeat; 150} 151 152/* Warning */ 153.admonition.warning { 154 border-color: #ff9100; 155} 156.warning>.admonition-title { 157 background-color: rgba(255,145,0,.1); 158} 159.warning>.admonition-title::before { 160 background-color: #ff9100; 161 -webkit-mask-image: var(--adm-warning-pic); 162 mask-image: var(--adm-warning-pic); 163 -webkit-mask-repeat: no-repeat; 164 mask-repeat: no-repeat; 165} 166 167/* Failure */ 168.admonition.failure { 169 border-color: #ff5252; 170} 171.failure>.admonition-title { 172 background-color: rgba(255,82,82,.1); 173} 174.failure>.admonition-title::before { 175 background-color: #ff5252; 176 -webkit-mask-image: var(--adm-failure-pic); 177 mask-image: var(--adm-failure-pic); 178 -webkit-mask-repeat: no-repeat; 179 mask-repeat: no-repeat; 180} 181 182/* Danger */ 183.admonition.danger { 184 border-color: #ff1744; 185} 186.danger>.admonition-title { 187 background-color: rgba(255,23,68,.1); 188} 189.danger>.admonition-title::before { 190 background-color: #ff1744; 191 -webkit-mask-image: var(--adm-danger-pic); 192 mask-image: var(--adm-danger-pic); 193 -webkit-mask-repeat: no-repeat; 194 mask-repeat: no-repeat; 195} 196 197/* Bug */ 198.admonition.bug { 199 border-color: #f50057; 200} 201.bug>.admonition-title { 202 background-color: rgba(245,0,87,.1); 203} 204.bug>.admonition-title::before { 205 background-color: #f50057; 206 -webkit-mask-image: var(--adm-bug-pic); 207 mask-image: var(--adm-bug-pic); 208 -webkit-mask-repeat: no-repeat; 209 mask-repeat: no-repeat; 210} 211 212/* Example */ 213.admonition.example { 214 border-color: #651fff; 215} 216.example>.admonition-title { 217 background-color: rgba(101,31,255,.1); 218} 219.example>.admonition-title::before { 220 background-color: #651fff; 221 -webkit-mask-image: var(--adm-example-pic); 222 mask-image: var(--adm-example-pic); 223 -webkit-mask-repeat: no-repeat; 224 mask-repeat: no-repeat; 225} 226 227/* Quote */ 228.admonition.quote { 229 border-color: #9e9e9e; 230} 231.quote>.admonition-title { 232 background-color: rgba(158,158,158,.1); 233} 234.quote>.admonition-title::before { 235 background-color: #9e9e9e; 236 -webkit-mask-image: var(--adm-quote-pic); 237 mask-image: var(--adm-quote-pic); 238 -webkit-mask-repeat: no-repeat; 239 mask-repeat: no-repeat; 240} 241