styles.css
1 /* @settings 2 3 name: Ozan's Image in Editor Plugin 4 id: oz-image-in-editor-plugin 5 settings: 6 7 - 8 id: oz-img-in-editor-max-transclusion-height 9 title: Transclusion Embed Maximum Height 10 description: Set the max height of transclusion render in editor as px 11 type: variable-number 12 default: 600 13 format: px 14 - 15 id: oz-img-in-editor-max-msg-height 16 title: MSG Embed Maximum Height 17 description: Set the max height of msg render in editor as px 18 type: variable-number 19 default: 300 20 format: px 21 - 22 id: oz-img-in-editor-img-size-xx-small 23 title: Alt Text "#xx-small" Maximum Image Width 24 description: Set the max width of images with "#xx-small" alt text 25 type: variable-number 26 default: 25 27 format: "%" 28 - 29 id: oz-img-in-editor-img-size-x-small 30 title: Alt Text "#x-small" Maximum Image Width 31 description: Set the max width of images with "#x-small" alt text 32 type: variable-number 33 default: 50 34 format: "%" 35 - 36 id: oz-img-in-editor-img-size-small 37 title: Alt Text "#small" Maximum Image Width 38 description: Set the max width of images with "#small" alt text 39 type: variable-number 40 default: 75 41 format: "%" 42 */ 43 44 .theme-light, 45 .theme-dark { 46 --oz-img-in-editor-max-msg-height: 300px; 47 --oz-img-in-editor-max-transclusion-height: 600px; 48 --oz-img-in-editor-img-size-xx-small: 25%; 49 --oz-img-in-editor-img-size-x-small: 50%; 50 --oz-img-in-editor-img-size-small: 75%; 51 } 52 53 .CodeMirror-linewidget img { 54 margin-top: 5px; 55 margin-bottom: 5px; 56 } 57 58 .theme-dark img[alt$='#invert'], 59 .theme-dark div.oz-image-widget > img[alt$='#invert'], 60 .theme-dark div.oz-image-widget-cm6 > img[alt$='#invert'] { 61 filter: invert(1) hue-rotate(180deg); 62 } 63 64 .oz-transclusion-widget, 65 .oz-transclusion-widget-cm6 { 66 padding: 3px 3px 3px 19px; 67 border: 0.7px solid var(--text-muted); 68 max-height: var(oz-img-in-editor-max-transclusion-height); 69 overflow: auto; 70 border-radius: 7px; 71 margin-top: 5px; 72 } 73 74 .oz-coffee-div, 75 .oz-tip-div { 76 text-align: center; 77 margin-top: 10px; 78 } 79 80 .oz-tip-div img { 81 border-radius: 10px; 82 } 83 84 /* Line Numbers In Editor CodeBlock Renders */ 85 pre[class*='language-'].line-numbers { 86 position: relative; 87 padding-left: 3.8em; 88 counter-reset: linenumber; 89 } 90 pre[class*='language-'].line-numbers > code { 91 position: relative; 92 white-space: inherit; 93 } 94 .line-numbers .line-numbers-rows { 95 position: absolute; 96 pointer-events: none; 97 top: 0; 98 font-size: 100%; 99 left: -3.8em; 100 width: 3em; /* works for line-numbers below 1000 lines */ 101 letter-spacing: -1px; 102 border-right: 1px solid #999; 103 104 -webkit-user-select: none; 105 -moz-user-select: none; 106 -ms-user-select: none; 107 user-select: none; 108 } 109 .line-numbers-rows > span { 110 display: block; 111 counter-increment: linenumber; 112 } 113 .line-numbers-rows > span:before { 114 content: counter(linenumber); 115 color: #999; 116 display: block; 117 padding-right: 0.8em; 118 text-align: right; 119 } 120 121 .mermaid-error-information { 122 color: red; 123 font-size: 14px; 124 margin-bottom: 3px; 125 } 126 127 .oz-modal-center { 128 text-align: center; 129 margin: 20px 10px 20px 10px; 130 } 131 132 .oz-modal-title { 133 text-align: center; 134 } 135 136 .inline-mathjax-block { 137 margin-left: 5px; 138 } 139 140 .oz-image-widget > img, 141 .oz-image-widget-cm6 > img { 142 -webkit-user-drag: none; 143 user-select: none; 144 -moz-user-select: none; 145 -webkit-user-select: none; 146 -ms-user-select: none; 147 } 148 149 div.oz-transclusion-widget pre, 150 div.oz-transclusion-widget-cm6 pre { 151 overflow-x: auto; 152 } 153 154 .oz-transclusion-widget > *, 155 .oz-transclusion-widget-cm6 > * { 156 user-select: text !important; 157 } 158 159 /* Rich Link Cards */ 160 /* Credit: https://github.com/dhamaniasad/obsidian-rich-links */ 161 .oz-rich-link-card { 162 border: 1px solid var(--background-modifier-border); 163 border-radius: 3px; 164 width: 100%; 165 display: flex; 166 text-decoration: none; 167 background-color: var(--background-primary); 168 } 169 170 .oz-rich-link-card-container { 171 position: relative; 172 } 173 174 .oz-rich-link-image-container { 175 height: 100px; 176 width: 35%; 177 min-width: 120px; 178 overflow: hidden; 179 border-right: 1px solid var(--background-modifier-border); 180 } 181 182 .oz-rich-link-image { 183 background-position: center center; 184 background-size: cover; 185 background-repeat: no-repeat; 186 padding-bottom: 100px; 187 background-color: var(--background-secondary); 188 } 189 190 .oz-rich-link-card-text { 191 padding: 4px; 192 width: 75%; 193 } 194 195 .oz-rich-link-card-title { 196 font-family: sans-serif; 197 font-size: 16px; 198 margin: 0 0 4px 0; 199 display: -webkit-box; 200 -webkit-line-clamp: 1; 201 -webkit-box-orient: vertical; 202 overflow: hidden; 203 color: var(--text-normal); 204 } 205 206 .oz-rich-link-card-description { 207 font-family: sans-serif; 208 font-size: 14px; 209 margin: 0; 210 color: var(--text-muted); 211 display: -webkit-box; 212 -webkit-line-clamp: 2; 213 -webkit-box-orient: vertical; 214 overflow: hidden; 215 } 216 217 .oz-rich-link-href { 218 font-family: sans-serif; 219 font-size: 14px; 220 margin: 0; 221 color: var(--text-faint); 222 display: -webkit-box; 223 -webkit-line-clamp: 1; 224 -webkit-box-orient: vertical; 225 overflow: hidden; 226 } 227 228 .image-in-editor-settings-main-header { 229 text-align: center !important; 230 margin-bottom: 20px; 231 } 232 233 .image-in-editor-cm-header { 234 margin-top: 0px; 235 } 236 237 .image-in-editor-editor-header { 238 margin-bottom: 5px; 239 } 240 241 /* Sizing for CM5 and CM6 */ 242 243 div.oz-image-widget > img[alt$='#small'], 244 div.oz-image-widget-cm6 > img[alt$='#small'] { 245 max-width: var(--oz-img-in-editor-img-size-small) !important; 246 } 247 248 div.oz-image-widget > img[alt$='#x-small'], 249 div.oz-image-widget-cm6 > img[alt$='#x-small'] { 250 max-width: var(--oz-img-in-editor-img-size-x-small) !important; 251 } 252 253 div.oz-image-widget > img[alt$='#xx-small'], 254 div.oz-image-widget-cm6 > img[alt$='#xx-small'] { 255 max-width: var(--oz-img-in-editor-img-size-xx-small) !important; 256 } 257 258 /* Style For CM6 */ 259 260 div.oz-image-widget-cm6, 261 div.oz-custom-html-widget-cm6, 262 div.oz-pdf-widget-cm6 { 263 padding-top: 5px; 264 padding-bottom: 5px; 265 } 266 267 div.oz-image-widget-cm6 + br, 268 div.oz-custom-html-widget-cm6 + br, 269 div.oz-pdf-widget-cm6 + br { 270 display: none; 271 } 272 273 .cm-line div.oz-transclusion-widget-cm6 { 274 padding-top: 10px; 275 padding-bottom: 10px; 276 } 277 278 .cm-line div.oz-transclusion-widget-cm6 * { 279 margin-block-start: 0px !important; 280 margin-block-end: 0px !important; 281 } 282 283 /* Legacy Admonition */ 284 285 .oz-admonition { 286 margin: 1.5em 0; 287 padding: 0; 288 overflow: hidden; 289 page-break-inside: avoid; 290 border-left: 0.3rem solid rgb(var(--oz-admonition-color)); 291 border-radius: 0.1rem; 292 box-shadow: 0 0.2rem 0.5rem rgb(44, 43, 43); 293 } 294 295 .oz-admonition-title { 296 position: relative; 297 padding: 15px 5px 15px 15px; 298 font-weight: 700; 299 background-color: rgba(var(--oz-admonition-color), 0.1); 300 } 301 302 .oz-admonition-title-content { 303 display: flex; 304 justify-content: flex-start; 305 margin-top: 0 !important; 306 margin-bottom: 0 !important; 307 } 308 309 .oz-admonition-content-holder { 310 position: relative; 311 padding-top: 15px; 312 padding-bottom: 15px; 313 } 314 315 .oz-admonition-content { 316 margin: 10px 15px; 317 position: relative; 318 overflow-x: auto; 319 } 320 321 .oz-admonition-title-markdown { 322 text-transform: capitalize; 323 display: block; 324 } 325 326 .oz-transclusion-widget-cm6 span.hashtag { 327 background-color: var(--tag-background); 328 border: var(--tag-border-width) solid var(--tag-border-color); 329 border-radius: var(--tag-radius); 330 color: var(--tag-color); 331 font-size: var(--tag-size); 332 text-decoration: var(--tag-decoration); 333 padding: var(--tag-padding-y) var(--tag-padding-x); 334 line-height: 1; 335 } 336 337 .oz-custom-html-widget-cm6 .msg-handler-plugin-renderer { 338 max-height: var(--oz-img-in-editor-max-msg-height); 339 overflow-y: scroll; 340 border: 0.1px solid var(--text-muted); 341 padding: 10px; 342 } 343 344 .cm-line:has(div.is-collapsed) .oz-custom-html-widget-cm6, 345 .cm-line:has(div.is-collapsed) .oz-image-widget-cm6, 346 .cm-line:has(div.is-collapsed) .oz-pdf-widget-cm6, 347 .cm-line:has(div.is-collapsed) .oz-transclusion-widget-cm6 { 348 display: none; 349 }