@@ -224,7 +224,7 @@ id: atx-alv1
224
224
settings:
225
225
-
226
226
id: atx-alv1-cat-general
227
- title: ' 1. Appearance'
227
+ title: ' Appearance'
228
228
description: ' General appearance settings'
229
229
type: heading
230
230
level: 1
@@ -320,22 +320,54 @@ settings:
320
320
321
321
322
322
-
323
- id: atx-alv1-counter -about
323
+ id: atx-alv1-tabs -about
324
324
title: ' '
325
- description: " <br /><br /><h1>Counter </h1>Settings for tag indicator count at top left of each tag when hovered ."
325
+ description: " <br /><br /><h1>Tabs </h1>Settings for each clickable tab which contains your list of pages inside ."
326
326
type: info-text
327
327
markdown: true
328
328
-
329
- id: atx-alv1-counter- bg-clr
330
- title: ' Background Color'
331
- description: ' Background color for circle '
329
+ id: atx-alv1-tabs-header- bg-clr-n
330
+ title: ' Header Background Color (Normal) '
331
+ description: ' Background color for each tab. This is where the letter of the alphabet is shown. '
332
332
type: variable-themed-color
333
333
opacity: true
334
334
format: hex
335
- default-light: ' #424242 '
336
- default-dark: ' #424242 '
335
+ default-light: ' #1b1b1b '
336
+ default-dark: ' #1b1b1b '
337
337
-
338
- id: atx-alv1-counter-bg-size
338
+ id: atx-alv1-tabs-header-bg-clr-h
339
+ title: ' Header Background Color (Hover)'
340
+ description: ' Background color (on hover) for each tab. This is where the letter of the alphabet is shown.'
341
+ type: variable-themed-color
342
+ opacity: true
343
+ format: hex
344
+ default-light: ' #8f2045'
345
+ default-dark: ' #8f2045'
346
+ -
347
+ id: atx-alv1-tabs-header-bg-clr-s
348
+ title: ' Header Background Color (Selected)'
349
+ description: ' Background color (selected) for each tab. This is where the letter of the alphabet is shown.'
350
+ type: variable-themed-color
351
+ opacity: true
352
+ format: hex
353
+ default-light: ' #7c1236'
354
+ default-dark: ' #7c1236'
355
+ -
356
+ id: atx-alv1-tabs-icon-svg-n
357
+ title: ' Header Icon (Normal)'
358
+ description: ' The svg icon to use for left side of tab in normal state'
359
+ type: variable-text
360
+ default: url( " data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='15px' height='15px' fill='%23FFFFFF'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M438.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L370.7 256 233.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M338.7 224L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0 32-32-32-32z'%3E%3C/path%3E%3C/svg%3E" );
361
+ -
362
+ id: atx-alv1-tabs-icon-svg-s
363
+ title: ' Header Icon (Selected)'
364
+ description: ' The svg icon to use for left side of tab in selected state'
365
+ type: variable-text
366
+ default: url( " data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' width='15px' height='15px' fill='%23FFFFFF'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 402.7 54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M160 370.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V370.7l-32 32-32-32z'%3E%3C/path%3E%3C/svg%3E" );
367
+
368
+ -
369
+
370
+ id: atx-alv1-tabs-bg-size
339
371
title: ' Circle Size'
340
372
description: ' Size of counter circle'
341
373
type: variable-number-slider
@@ -345,13 +377,13 @@ settings:
345
377
max: 30
346
378
step: 1
347
379
-
348
- id: atx-alv1-counter -font-face
380
+ id: atx-alv1-tabs -font-face
349
381
title: ' Font Face'
350
382
description: ' Fonts except from the code texts'
351
383
type: variable-text
352
384
default: ' sans-serif'
353
385
-
354
- id: atx-alv1-counter -font-clr-n
386
+ id: atx-alv1-tabs -font-clr-n
355
387
title: ' Font Color'
356
388
description: ' Color of tag text when tag is hovered.'
357
389
type: variable-themed-color
@@ -360,7 +392,7 @@ settings:
360
392
default-light: ' #FFFFFF'
361
393
default-dark: ' #FFFFFF'
362
394
-
363
- id: atx-alv1-counter -font-size
395
+ id: atx-alv1-tabs -font-size
364
396
title: ' Font Size'
365
397
description: ' Font size for counter'
366
398
type: variable-number-slider
@@ -370,7 +402,7 @@ settings:
370
402
max: 30
371
403
step: 1
372
404
-
373
- id: atx-alv1-counter -font-weight
405
+ id: atx-alv1-tabs -font-weight
374
406
title: ' Font Weight'
375
407
description: ' Options: normal, bold, lighter, bolder'
376
408
type: variable-text
@@ -381,7 +413,7 @@ settings:
381
413
382
414
383
415
id: atx-alv1-cat-anim
384
- title: ' 2. Animations'
416
+ title: ' Animations'
385
417
description: ' Animation settings'
386
418
type: heading
387
419
level: 1
@@ -401,38 +433,10 @@ settings:
401
433
label: Disabled
402
434
value: anim-1-disabled
403
435
-
404
- id: atx-alv1-cat-anim-2
405
- title: ' Scale Animation'
406
- description: ' Scale text animation when hovering tag'
407
- type: class-select
408
- allowEmpty: false
409
- default: anim-2-enabled
410
- options:
411
- -
412
- label: Enabled
413
- value: anim-2-enabled
414
- -
415
- label: Disabled
416
- value: anim-2-disabled
417
- -
418
- id: atx-alv1-cat-anim-3
419
- title: ' Fade In-Out Effect'
420
- description: ' Tags fading in and out on hover'
421
- type: class-select
422
- allowEmpty: false
423
- default: anim-3-enabled
424
- options:
425
- -
426
- label: Enabled
427
- value: anim-3-enabled
428
- -
429
- label: Disabled
430
- value: anim-3-disabled
431
- -
432
436
433
437
434
438
id: atx-alv1-cat-support
435
- title: ' 3. Support'
439
+ title: ' Support'
436
440
description: ' Links associated to this snippet'
437
441
type: heading
438
442
level: 1
@@ -472,10 +476,6 @@ settings:
472
476
body
473
477
{
474
478
--atx-alv1-anim-1-glow: atx-alv1-anim-glow;
475
- --atx-alv1-anim-2-in: atx-alv1-anim-scale-in;
476
- --atx-alv1-anim-2-out: atx-alv1-anim-scale-out;
477
- --atx-alv1-anim-2-scale: scale( 1.3 );
478
- --atx-alv1-anim-3-opacity: 0.5;
479
479
480
480
--atx-alv1-general-line-spacing: 15px;
481
481
--atx-alv1-general-container-padding: 20px;
@@ -486,12 +486,17 @@ settings:
486
486
--atx-alv1-tags-spacing-internal: 5px;
487
487
--atx-alv1-tags-spacing-external: 7px;
488
488
489
- --atx-alv1-counter-bg-clr: # 424242;
490
- --atx-alv1-counter-bg-size: 18px;
491
- --atx-alv1-counter-font-face: sans-serif;
492
- --atx-alv1-counter-font-clr-n: # FFFFFF;
493
- --atx-alv1-counter-font-size: 10px;
494
- --atx-alv1-counter-font-weight: normal;
489
+
490
+
491
+ --atx-alv1-tabs-header-bg-clr-n : # 1b1b1b;
492
+ --atx-alv1-tabs-header-bg-clr-h : # 8f2045;
493
+ --atx-alv1-tabs-header-bg-clr-s : # 7c1236;
494
+
495
+ --atx-alv1-tabs-icon-svg-n : url( " data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='15px' height='15px' fill='%23FFFFFF'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M438.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L370.7 256 233.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M338.7 224L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0 32-32-32-32z'%3E%3C/path%3E%3C/svg%3E" );
496
+
497
+
498
+ --atx-alv1-tabs-icon-svg-s : url( " data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' width='15px' height='15px' fill='%23FFFFFF'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 402.7 54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M160 370.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V370.7l-32 32-32-32z'%3E%3C/path%3E%3C/svg%3E" );
499
+
495
500
}
496
501
497
502
/*
@@ -526,34 +531,6 @@ settings:
526
531
}
527
532
}
528
533
529
- /*
530
- animation: scale
531
- * /
532
-
533
- @keyframes atx-alv1-anim-scale-in
534
- {
535
- 0%
536
- {
537
- transform : scale( 1 );
538
- }
539
- 100%
540
- {
541
- transform : scale( 1.3 );
542
- }
543
- }
544
-
545
- @keyframes atx-alv1-anim-scale-out
546
- {
547
- 0%
548
- {
549
- transform : scale( 1.3 );
550
- }
551
- 100%
552
- {
553
- transform : scale( 1 );
554
- }
555
- }
556
-
557
534
/*
558
535
animation: blink
559
536
* /
@@ -622,9 +599,9 @@ settings:
622
599
cursor : pointer;
623
600
transition : all ease-in-out 0.3s;
624
601
font-weight : bold;
625
- background-color : # 1b1b1b ;
602
+ background-color : var( --atx-alv1-tabs-header-bg-clr-n ) ;
626
603
user-select : none;
627
- font-size : 22px ! important ;
604
+ font-size : 22px;
628
605
}
629
606
630
607
/*
@@ -633,7 +610,7 @@ settings:
633
610
634
611
details summary:hover
635
612
{
636
- background-color : # 8f2045 ;
613
+ background-color : var( --atx-alv1-tabs-header-bg-clr-h ) ;
637
614
animation : atx-alv1-anim-blink 1s infinite;
638
615
}
639
616
@@ -643,7 +620,7 @@ settings:
643
620
644
621
details > summary
645
622
{
646
- list-style-image : url( " data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='15px' height='15px' fill='%23FFFFFF'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M438.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L370.7 256 233.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M338.7 224L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0 32-32-32-32z'%3E%3C/path%3E%3C/ svg%3E " );
623
+ list-style-image : var( --atx-alv1-tabs-icon- svg-n );
647
624
padding-left : 20px;
648
625
padding-top : 4px;
649
626
}
@@ -654,7 +631,7 @@ settings:
654
631
655
632
details[ open ] > summary
656
633
{
657
- list-style-image : url( " data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' width='15px' height='15px' fill='%23FFFFFF'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 402.7 54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M160 370.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V370.7l-32 32-32-32z'%3E%3C/path%3E%3C/ svg%3E " );
634
+ list-style-image : var( --atx-alv1-tabs-icon- svg-s );
658
635
padding-left : 20px;
659
636
padding-top : 4px;
660
637
}
@@ -709,15 +686,15 @@ settings:
709
686
border-bottom : 1px dashed # f73877;
710
687
user-select : none;
711
688
margin-bottom : 5px;
712
- background-color : # 7c1236 ;
689
+ background-color : var( --atx-alv1-tabs-header-bg-clr-s ) ;
713
690
}
714
691
715
692
details[ open ] ul
716
693
{
717
694
background-color : # 272727;
718
695
margin-block-start : -2px;
719
696
margin-block-end : -10px;
720
- animation-name : atx-alv1-anim-glow ! important ;
697
+ animation-name : var( -- atx-alv1-anim-1- glow ) ;
721
698
animation-duration : 1s;
722
699
animation-timing-function : ease-in-out;
723
700
animation-iteration-count : infinite;
0 commit comments