Advertisement
dhniceday

Sticky Notes for Obsidian

Jan 21st, 2024
697
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.90 KB | None | 0 0
  1. /* STICKY NOTES */
  2. @charset "UTF-8";
  3.  
  4. :root {
  5.   --sticky-color-text: #282828;
  6.  
  7.   --sticky-color-green: #b8bb26;
  8.   --sticky-color-red: #fb4934;
  9.   --sticky-color-yellow: #FABD2F;
  10.   --sticky-color-blue: #83a598;
  11.   --sticky-color-purple: #d3869b;
  12.   --sticky-color-aqua: #8ec07c;
  13.   --sticky-color-orange: #fe8019;
  14.   --sticky-color-green-transparent: #b8bb26cc;
  15.   --sticky-color-red-transparent: #fb4934cc;
  16.   --sticky-color-yellow-transparent: #FABD2Fcc;
  17.   --sticky-color-blue-transparent: #83a598cc;
  18.   --sticky-color-purple-transparent: #d3869bcc;
  19.   --sticky-color-aqua-transparent: #8ec07ccc;
  20.   --sticky-color-orange-transparent: #fe8019cc;
  21.  
  22.   --sticky-note-max-width: 600px;
  23.   --sticky-border-radius: 8px;
  24. }
  25.  
  26. .callout.callout.callout:is([data-callout-metadata~=left]):not([data-callout-metadata~=nofloat]) {
  27.   float: left;
  28.   margin: unset;
  29.   margin-right: 8px;
  30. }
  31.  
  32. .callout.callout.callout:is([data-callout-metadata~=nofloat]) {
  33.   float: unset !important;
  34.   margin-bottom: 20px !important;
  35. }
  36.  
  37. .callout.callout:is([data-callout-metadata~=right]) {
  38.   float: right;
  39.   margin: unset;
  40.   margin-left: 8px;
  41. }
  42.  
  43. .callout.callout.callout:is([data-callout-metadata~=ctr],
  44. [data-callout-metadata~=center]) {
  45.   display: block;
  46.   margin: auto;
  47.   float: unset;
  48. }
  49.  
  50. .callout[data-callout~=sticky] {
  51.   --callout-icon: sticky-note;
  52.   background-color: var(--sticky-color) !important;
  53.   color: var(--sticky-color-text);
  54.   font-family: var(--sticky-font);
  55.   font-size: var(--sticky-font-size);
  56.   max-width: var(--sticky-note-max-width);
  57.   margin: auto;
  58.   display: block;
  59.   float: unset;
  60. }
  61.  
  62. .callout[data-callout~=sticky] { width: 30%; }
  63. .callout[data-callout~=sticky]:is([data-callout-metadata~=s-35]) { width: 35%; }
  64. .callout[data-callout~=sticky]:is([data-callout-metadata~=s-40]) { width: 40%; }
  65. .callout[data-callout~=sticky]:is([data-callout-metadata~=s-45]) { width: 45%; }
  66. .callout[data-callout~=sticky]:is([data-callout-metadata~=s-50]) { width: 50%; }
  67. .callout[data-callout~=sticky]:is([data-callout-metadata~=s-55]) { width: 55%; }
  68. .callout[data-callout~=sticky]:is([data-callout-metadata~=s-60]) { width: 60%; }
  69.  
  70.  
  71. .callout[data-callout~=sticky] .callout-title { display: none; }
  72. .callout[data-callout~=sticky] .callout-title-inner { padding-top: 0.25em; }
  73. .callout[data-callout~=sticky] .callout-content { padding: 10px; }
  74.  
  75. .callout {
  76.   border-radius: var(--sticky-border-radius) !important;
  77.   border-width: 1px !important;
  78.   padding: 0px;
  79.   > .callout-content > :first-child {
  80.       margin-top: 0px;
  81.   }
  82.   > .callout-content > :last-child {
  83.       margin-bottom: 0px;
  84.   }
  85. }
  86.  
  87. .callout[data-callout~=sticky] .callout-content strong,
  88. .callout[data-callout~=sticky] .callout-content em {
  89.   color: var(--sticky-color-text);
  90.   text-decoration: none;
  91. }
  92.  
  93. .callout[data-callout~=sticky] .callout-content a.internal-link,
  94. .callout[data-callout~=sticky] .callout-content a.external-link {
  95.   color:var(--sticky-color-text);
  96. }
  97.  
  98. .callout[data-callout~=sticky]:is([data-callout-metadata~=green]) { background-color: var(--sticky-color-green-transparent) !important; }
  99. .callout[data-callout~=sticky]:is([data-callout-metadata~=red]) { background-color: var(--sticky-color-red-transparent) !important; }
  100. .callout[data-callout~=sticky]:is([data-callout-metadata~=yellow]) { background-color: var(--sticky-color-yellow-transparent) !important; }
  101. .callout[data-callout~=sticky]:is([data-callout-metadata~=blue]) { background-color: var(--sticky-color-blue-transparent) !important; }
  102. .callout[data-callout~=sticky]:is([data-callout-metadata~=purple]) { background-color: var(--sticky-color-purple-transparent) !important; }
  103. .callout[data-callout~=sticky]:is([data-callout-metadata~=aqua]) { background-color: var(--sticky-color-aqua-transparent) !important; }
  104. .callout[data-callout~=sticky]:is([data-callout-metadata~=orange]) { background-color: var(--sticky-color-orange-transparent) !important; }
  105.  
  106. .callout[data-callout~=sticky]:is([data-callout-metadata~=green]) mark { background-color: var(--sticky-color-green-transparent) !important; }
  107. .callout[data-callout~=sticky]:is([data-callout-metadata~=red]) mark { background-color: var(--sticky-color-red-transparent) !important; }
  108. .callout[data-callout~=sticky]:is([data-callout-metadata~=yellow]) mark { background-color: var(--sticky-color-yellow-transparent) !important; }
  109. .callout[data-callout~=sticky]:is([data-callout-metadata~=blue]) mark { background-color: var(--sticky-color-blue-transparent) !important; }
  110. .callout[data-callout~=sticky]:is([data-callout-metadata~=purple]) mark { background-color: var(--sticky-color-purple-transparent) !important; }
  111. .callout[data-callout~=sticky]:is([data-callout-metadata~=aqua]) mark { background-color: var(--sticky-color-aqua-transparent) !important; }
  112. .callout[data-callout~=sticky]:is([data-callout-metadata~=orange]) mark { background-color: var(--sticky-color-orange-transparent) !important; }
  113. .callout[data-callout~=sticky] .callout-content mark { opacity: 1;}
  114.  
  115. .callout[data-callout~=sticky]:is([data-callout-metadata~=title]) .callout-content:first-line {
  116.   font-weight: bold;
  117. }
  118.  
  119. .sticky-zoom .callout[data-callout~=sticky]:hover, .callout[data-callout~=sticky]:focus{
  120.   box-shadow:10px 10px 7px rgba(40,40,40,.7);
  121.   transform: scale(1.25);
  122.   position:relative;
  123.   z-index:5;
  124.   opacity: 1;
  125.   transition: transform 0.5s ease 0s;
  126.   display: block;
  127. }
  128.  
  129.  
  130. /*@settings
  131. name: Sticky Notes
  132. id: sticky-notes
  133. settings:
  134.   -
  135.     id: info-text-sticky-notes
  136.     type: info-text
  137.     title: Sticky Notes by *Daniel Hansen*
  138.     description: Derived from *ITS Callout snippet*
  139.     markdown: true
  140.   -
  141.     id: sticky-color
  142.     title: Sticky Notes color
  143.     description: Default color for Sticky Notes. Used when not color is specified in markdown.
  144.     type: variable-color
  145.     format: hex
  146.     opacity: true
  147.     default: '#fabd2fcc'
  148.     alt-format:
  149.       -
  150.         id: sticky-color-rgb
  151.         format: rgb
  152.   -
  153.     id: sticky-font
  154.     title: Sticky Notes font
  155.     description: Font used for sticky notes.
  156.     type: variable-select
  157.     default: Roboto
  158.     options:
  159.       -
  160.         label: IBM Plex Sans
  161.         value: IBM Plex Sans
  162.       -
  163.         label: IBM Plex Mono
  164.         value: IBM Plex Mono
  165.       -
  166.         label: Roboto
  167.         value: Roboto
  168.       -
  169.         label: Chilanka
  170.         value: Chilanka
  171.       -
  172.         label: Kalam
  173.         value: Kalam
  174.       -
  175.         label: Architects Daughter
  176.         value: Architects Daughter
  177.       -
  178.         label: Edu SA Beginner
  179.         value: Edu SA Beginner
  180.       -
  181.         label: Playpen Sans
  182.         value: Playpen Sans
  183.       -
  184.         label: Shantell Sans
  185.         value: Shantell Sans
  186.   -
  187.     id: sticky-font-size
  188.     title: Sticky Notes font size
  189.     description: Size of the Sticky Notes text
  190.     type: variable-text
  191.     default: 1.2em
  192.   -
  193.     id: sticky-zoom
  194.     title: Zoom on hover
  195.     description: Zooms on sticky notes on mouse hover
  196.     type: class-toggle
  197. */
  198.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement