Skip to content

Commit 9d3aaac

Browse files
AetherinoxAetherinox
committed
Page Cloud: Support "Style Settings" Plugin
The css for the Page Cloud snippet can now be modified using the Style Settings plugin.
1 parent 4ccec60 commit 9d3aaac

File tree

2 files changed

+280
-34
lines changed

2 files changed

+280
-34
lines changed

‎Snippets/Page Cloud 1/README.md

Lines changed: 280 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -339,55 +339,287 @@ Copy the code below and paste it into the new `page_cloud_v1.css` file which sho
339339
<br />
340340
341341
```css
342-
/*
343-
Snippet: Page Cloud - Version 1
342+
/* @settings
343+
name: ☁️ Page Cloud - Version 1
344+
id: atx-pcv1
345+
settings:
346+
-
347+
id: atx-pcv1-cat-general
348+
title: '1. Appearance'
349+
description: 'General appearance settings'
350+
type: heading
351+
level: 1
352+
collapsed: true
353+
-
354+
id: atx-pcv1-bg-clr-n
355+
title: 'Background Color (Normal)'
356+
description: 'Background color for each page in cloud.'
357+
type: variable-themed-color
358+
opacity: true
359+
format: hex
360+
default-light: '#252525'
361+
default-dark: '#252525'
362+
-
363+
id: atx-pcv1-bg-clr-h
364+
title: 'Background Color (Hover)'
365+
description: 'Background color for each page in cloud when hovered.'
366+
type: variable-themed-color
367+
opacity: true
368+
format: hex
369+
default-light: '#810d3d'
370+
default-dark: '#810d3d'
371+
-
372+
id: atx-pcv1-bg-border-clr-n
373+
title: 'Border Color (Normal)'
374+
description: 'Border color for each page in cloud.'
375+
type: variable-themed-color
376+
opacity: true
377+
format: hex
378+
default-light: '#353535'
379+
default-dark: '#353535'
380+
-
381+
id: atx-pcv1-bg-border-clr-h
382+
title: 'Border Color (Hover)'
383+
description: 'Border color for each page in cloud when hovered.'
384+
type: variable-themed-color
385+
opacity: true
386+
format: hex
387+
default-light: '#dd2a74'
388+
default-dark: '#dd2a74'
389+
-
390+
id: atx-pcv1-txt-clr-h
391+
title: 'Text Color (Hover)'
392+
description: 'Text color for each page in cloud when hovered.'
393+
type: variable-themed-color
394+
opacity: true
395+
format: hex
396+
default-light: '#FFFFFF'
397+
default-dark: '#FFFFFF'
398+
-
399+
id: atx-pcv1-txt-weight-n
400+
title: 'Font Weight (Normal)'
401+
description: 'Options: normal, bold, lighter, bolder'
402+
type: variable-text
403+
default: normal
404+
-
405+
id: atx-pcv1-txt-weight-h
406+
title: 'Font Weight (Hover)'
407+
description: 'Options: normal, bold, lighter, bolder'
408+
type: variable-text
409+
default: normal
410+
-
411+
id: atx-pcv1-txt-margin-vertical
412+
title: 'Tag: Margin (Vertical)'
413+
description: 'Vertical margin for each tag'
414+
type: variable-number-slider
415+
default: 5
416+
format: px
417+
min: 0
418+
max: 20
419+
step: 1
420+
-
421+
id: atx-pcv1-txt-margin-horizontal
422+
title: 'Tag: Margin (Horizontal)'
423+
description: 'Horizontal margin for each tag'
424+
type: variable-number-slider
425+
default: 7
426+
format: px
427+
min: 0
428+
max: 20
429+
step: 1
430+
-
431+
id: atx-pcv1-txt-padding-vertical
432+
title: 'Tag: Padding (Vertical)'
433+
description: 'Vertical padding for each tag'
434+
type: variable-number-slider
435+
default: 4
436+
format: px
437+
min: 0
438+
max: 20
439+
step: 1
440+
-
441+
id: atx-pcv1-txt-padding-horizontal
442+
title: 'Tag: Padding (Horizontal)'
443+
description: 'Horizontal padding for each tag'
444+
type: variable-number-slider
445+
default: 7
446+
format: px
447+
min: 0
448+
max: 20
449+
step: 1
450+
-
451+
id: atx-pcv1-txt-line-height
452+
title: 'Tag: Line Height'
453+
description: 'Line height between each row of page tags.'
454+
type: variable-number-slider
455+
default: 30
456+
format: px
457+
min: 0
458+
max: 40
459+
step: 1
460+
-
461+
id: atx-pcv1-cat-anim
462+
title: '2. Animations'
463+
description: 'Animation settings'
464+
type: heading
465+
level: 1
466+
collapsed: true
467+
-
468+
id: atx-pcv1-cat-anim-1
469+
title: 'Hover Animation 1'
470+
type: class-select
471+
allowEmpty: false
472+
default: anim-1-pulse
473+
options:
474+
-
475+
label: None
476+
value: anim-1-disabled
477+
-
478+
label: Pulse
479+
value: anim-1-pulse
480+
-
481+
id: atx-pcv1-cat-anim-2
482+
title: 'Hover Animation 2'
483+
type: class-select
484+
allowEmpty: false
485+
default: anim-2-glow
486+
options:
487+
-
488+
label: None
489+
value: anim-2-disabled
490+
-
491+
label: Glow
492+
value: anim-2-glow
493+
-
494+
id: atx-pcv1-bg-anim-clr-n
495+
title: 'Glow Color'
496+
description: 'Glow color on page tag hover.'
497+
type: variable-themed-color
498+
opacity: true
499+
format: rgb
500+
default-light: 'rgba(237, 29, 68, 0.19)'
501+
default-dark: 'rgba(237, 29, 68, 0.19)'
502+
-
503+
id: atx-pcv1-cat-support
504+
title: '3. Support'
505+
description: 'Links associated to this snippet'
506+
type: heading
507+
level: 1
508+
collapsed: true
509+
-
510+
id: atx-pcv1-support-updates
511+
title: View Updates
512+
description: "[https://github.com/Aetherinox/obsidian-dataview-snippets](https://github.com/Aetherinox/obsidian-dataview-snippets)"
513+
type: info-text
514+
markdown: true
515+
-
516+
344517
*/
345518
346519
/*
347520
animation: glow
348521
*/
349522
350-
@keyframes glow
523+
@keyframes atx-pcv1-anim-glow-box
351524
{
352525
from
353526
{
354-
text-shadow: 0 0 110px #6f00ff, 0 0 120px #0084ff, 0 0 130px #e60073, 0 0 140px #e60073, 0 0 150px #e60073, 0 0 160px #e60073, 0 0 170px #e60073;
527+
box-shadow: 0 0 20px var(--atx-pcv1-bg-anim-clr-n),
528+
0 0 20px var(--atx-pcv1-bg-anim-clr-n),
529+
0 0 20px var(--atx-pcv1-bg-anim-clr-n),
530+
0 0 20px var(--atx-pcv1-bg-anim-clr-n),
531+
0 0 20px var(--atx-pcv1-bg-anim-clr-n),
532+
0 0 20px var(--atx-pcv1-bg-anim-clr-n),
533+
0 0 20px var(--atx-pcv1-bg-anim-clr-n);
355534
}
356535
to
357536
{
358-
text-shadow: 0 0 20px #6f00ff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
537+
box-shadow: 0 0 10px var(--atx-pcv1-bg-anim-clr-n),
538+
0 0 15px var(--atx-pcv1-bg-anim-clr-n),
539+
0 0 20px var(--atx-pcv1-bg-anim-clr-n),
540+
0 0 25px var(--atx-pcv1-bg-anim-clr-n),
541+
0 0 30px var(--atx-pcv1-bg-anim-clr-n),
542+
0 0 35px var(--atx-pcv1-bg-anim-clr-n),
543+
0 0 40px var(--atx-pcv1-bg-anim-clr-n);
359544
}
360545
}
361546
362547
/*
363548
animation: pulse
364549
*/
365550
366-
@keyframes pulse
551+
@keyframes atx-pcv1-anim-pulse
367552
{
368553
0%
369554
{
370-
transform: scale(0.85);
555+
transform: scale(1);
371556
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
372557
}
373558
374-
70%
559+
50%
375560
{
376-
transform: scale(1);
561+
transform: scale(1.07);
377562
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
378563
}
379564
380565
100%
381566
{
382-
transform: scale(0.85);
567+
transform: scale(1);
383568
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
384569
}
385570
}
386571
387572
/*
388-
Tag Cloud > Disable Colorful Animation
573+
Snippet: Page Cloud - Version 1
389574
*/
390575
576+
body
577+
{
578+
--atx-pcv1-bg-clr-n: #252525;
579+
--atx-pcv1-bg-clr-h: #810d3d;
580+
--atx-pcv1-bg-border-clr-n: #353535;
581+
--atx-pcv1-bg-border-clr-h: #dd2a74;
582+
--atx-pcv1-txt-clr-h: #FFFFFF;
583+
--atx-pcv1-txt-margin-vertical: 5px;
584+
--atx-pcv1-txt-margin-horizontal: 7px;
585+
--atx-pcv1-txt-padding-vertical: 4px;
586+
--atx-pcv1-txt-padding-horizontal: 7px;
587+
--atx-pcv1-anim-1: atx-pcv1-anim-pulse;
588+
--atx-pcv1-anim-2: atx-pcv1-anim-glow-box;
589+
--atx-pcv1-txt-line-height: 30px;
590+
--atx-pcv1-txt-weight-n: bold;
591+
--atx-pcv1-txt-weight-h: normal;
592+
--atx-pcv1-bg-anim-clr-n: rgba(237, 29, 68, 0.19);
593+
}
594+
595+
/*
596+
Settings > Animations
597+
*/
598+
599+
body.theme-light.anim-1-disabled,
600+
body.theme-dark.anim-1-disabled
601+
{
602+
--atx-pcv1-anim-1: none;
603+
}
604+
605+
body.theme-light.anim-1-default,
606+
body.theme-dark.anim-1-default
607+
{
608+
--atx-pcv1-anim-1: atx-pcv1-anim-pulse;
609+
}
610+
611+
body.theme-light.anim-2-disabled,
612+
body.theme-dark.anim-2-disabled
613+
{
614+
--atx-pcv1-anim-2: none;
615+
}
616+
617+
body.theme-light.anim-2-default,
618+
body.theme-dark.anim-2-default
619+
{
620+
--atx-pcv1-anim-2: atx-pcv1-anim-glow-box;
621+
}
622+
391623
body.colorful-link-animation :is(.markdown-preview-view,.markdown-rendered) a:hover
392624
{
393625
animation: none !important;
@@ -399,49 +631,50 @@ Copy the code below and paste it into the new `page_cloud_v1.css` file which sho
399631
400632
.page-cloud-v1-item
401633
{
402-
margin-top: 5px;
403-
margin-bottom: 5px;
404-
margin-left: 7px;
405-
margin-right: 7px;
406-
padding-left: 7px;
407-
padding-right: 7px;
408-
padding-top: 4px;
409-
padding-bottom: 4px;
410-
background-color: #252525;
411-
border: 1px solid #353535 !important;
634+
background-color: var(--atx-pcv1-bg-clr-n);
635+
margin-top: var(--atx-pcv1-txt-margin-vertical);
636+
margin-bottom: var(--atx-pcv1-txt-margin-vertical);
637+
margin-left: var(--atx-pcv1-txt-margin-horizontal);
638+
margin-right: var(--atx-pcv1-txt-margin-horizontal);
639+
padding-top: var(--atx-pcv1-txt-padding-vertical);
640+
padding-bottom: var(--atx-pcv1-txt-padding-vertical);
641+
padding-left: var(--atx-pcv1-txt-padding-horizontal);
642+
padding-right: var(--atx-pcv1-txt-padding-horizontal);
643+
border: 1px solid var(--atx-pcv1-bg-border-clr-n);
412644
border-radius: 6px;
413645
display: inline-block;
414-
font-weight: bold;
415646
}
416647
417-
.page-cloud-v1-item:hover
648+
.page-cloud-v1-item:has( > a:hover )
418649
{
419-
opacity: 1;
420-
background: #810d3d;
421-
border: 1px solid #dd2a74 !important;
650+
background: var(--atx-pcv1-bg-clr-h);
651+
border: 1px solid var(--atx-pcv1-bg-border-clr-h) !important;
422652
cursor: pointer;
423-
animation-name: pulse, anim_glow;
653+
animation-name: var(--atx-pcv1-anim-1), var(--atx-pcv1-anim-2) !important;
424654
animation-duration: 2s, 1s;
425655
animation-timing-function: ease, ease-in-out;
426656
animation-iteration-count: infinite, infinite;
427657
animation-direction: normal, alternate;
428658
}
429659
430-
.page-cloud-v1-item:hover a
431-
{
432-
color: #FFF !important;
433-
background: none;
434-
}
435-
436660
/*
437661
Tag Cloud > Links
438662
*/
439663
440664
a.page-cloud-v1-link
441665
{
442-
line-height: 30px;
666+
line-height: var(--atx-pcv1-txt-line-height);
443667
vertical-align: middle;
444668
text-decoration: none;
669+
font-weight: var(--atx-pcv1-txt-weight-n);
670+
background: none;
671+
}
672+
673+
a.page-cloud-v1-link:hover
674+
{
675+
color: var(--atx-pcv1-txt-clr-h) !important;
676+
background: none;
677+
font-weight: var(--atx-pcv1-txt-weight-h);
445678
}
446679
```
447680
@@ -455,6 +688,19 @@ Save the file and go back to **Obsidian Settings** -> **Appearance**. Scroll all
455688
456689
You should see a list of pages associated to your vault.
457690
691+
<br />
692+
693+
This snippet supports modifying the CSS values using the **[Style Settings](https://github.com/mgmeyers/obsidian-style-settings)** plugin. If you want to change how the tags in this snippet look:
694+
- Open Obsidian Settings
695+
- Install the **Style Settings** plugin
696+
- Select **Style Settings** config panel under **Community Plugins**.
697+
- Click the tab `Page Cloud - Version 1`
698+
- Edit the settings for the Page Cloud tags
699+
700+
<br />
701+
702+
<p align="center"><img style="width: 100%;text-align: center;" src="https://raw.githubusercontent.com/Aetherinox/obsidian-dataview-snippets/main/Snippets/Page%20Cloud%201/images/install_4.gif"></p>
703+
458704
<br /><br />
459705
460706
---

‎Snippets/Page Cloud 1/images/install_4.gif

1.86 MB
Loading

0 commit comments

Comments
 (0)