Желтые стикеры код

/* Основные стили */

.callout[data-callout*=»sticker»] {
—sticker-bg: rgb(255, 245, 150);
—sticker-fg: black;
color: var(—sticker-fg);
margin: 0;
background-color: var(—sticker-bg) !important;
position: relative;
border-radius: 2px !important;
overflow: unset !important;
margin-bottom: 1rem;
mix-blend-mode: normal;
z-index: auto;
transform-style: preserve-3d;
min-width: 25%;
}

.callout[data-callout*=»sticker»] * {
color: inherit !important;
—checklist-done-color: var(—sticker-fg);
}

.callout[data-callout*=»sticker»] code {
background-color: rgba(255, 255, 255, 0.5);
}

.callout[data-callout*=»sticker»] .callout-title {
color: var(—sticker-fg) !important;
—bold-color: var(—sticker-fg) !important;
—italic-color: var(—sticker-fg) !important;
}

/* Скрываем иконку и заголовок у неназванных коллаутов */

.callout[data-callout*=»sticker»] .callout-icon {
display: none;
}
.callout[data-callout*=»sticker»][data-callout-fold=»»] .callout-title {
display: none;
}

/* Красивая тень снизу */

.callout[data-callout*=»sticker»]:after {
content: «»;
display: block;
position: absolute;
max-width: 100%;
width: 150px;
height: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.8);
bottom: 5px;
right: 5px;
transform: rotate(5deg) translateZ(-1px);
transform-origin: bottom right;
}

/* Плавающие модификаторы */

.callout[data-callout*=»sticker»][data-callout*=»-left»] {
float: left;
margin-right: 1em;
margin-bottom: 0.5rem;
max-width: 33%;
}

.callout[data-callout*=»sticker»][data-callout*=»-right»] {
float: right;
margin-left: 1em;
margin-bottom: 0.5rem;
max-width: 33%;
}

.callout[data-callout*=»sticker»][data-callout*=»-left»][data-callout*=»-25″],
.callout[data-callout*=»sticker»][data-callout*=»-right»][data-callout*=»-25″] {
max-width: 25%;
}

.callout[data-callout*=»sticker»][data-callout*=»-left»][data-callout*=»-50″],
.callout[data-callout*=»sticker»][data-callout*=»-right»][data-callout*=»-50″] {
max-width: 50%;
}

/* Цвета */

.callout[data-callout*=»sticker»][data-callout*=»-yellow»] {
—sticker-bg: rgb(255, 245, 150);
}

.callout[data-callout*=»sticker»][data-callout*=»-pink»] {
—sticker-bg: rgb(247, 180, 191);
}

.callout[data-callout*=»sticker»][data-callout*=»-blue»] {
—sticker-bg: rgb(187, 229, 243);
}

.callout[data-callout*=»sticker»][data-callout*=»-green»] {
—sticker-bg: rgb(179, 247, 179);
}

.callout[data-callout*=»sticker»][data-callout*=»-white»] {
—sticker-bg: rgb(247, 247, 247);
}

.callout[data-callout*=»sticker»][data-callout*=»-purple»] {
—sticker-bg: rgb(178, 154, 228);
}

/* Прозрачный стикер */

.callout[data-callout*=»sticker»][data-callout*=»-transparent»] {
—sticker-bg: transparent;
padding: 0;
color: inherit !important;
}

.callout[data-callout*=»sticker»][data-callout*=»-transparent»] .callout-content {
padding: 0.3em 0;
}

.callout[data-callout*=»sticker»][data-callout*=»-transparent»]::after {
content: none;
}

/* Рукописные шрифты */

.callout[data-callout*=»sticker»][data-callout*=»-hand»] {
font-family: «Segoe Script»;
}

.callout[data-callout*=»sticker»][data-callout*=»-hand2″] {
font-family: «Segoe Print»;
}

Источник: https://gist.github.com/laughtingman/1522763a4f82108e55e508049be3419b

https://gist.githubusercontent.com/laughtingman/1522763a4f82108e55e508049be3419b/raw/fb8cc7ecc622ccb2ca790766f1c8f6295250c1a3/obsidian-callout-stickers.css

Оставить комментарий

Создайте подобный сайт на WordPress.com
Начало работы