Skip to content

Commit 0212eb0

Browse files
AetherinoxAetherinox
committed
css cleanup
1 parent d3722e9 commit 0212eb0

File tree

1 file changed

+65
-88
lines changed

1 file changed

+65
-88
lines changed

‎Snippets/Alphabetized List 1/README.md

Lines changed: 65 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ id: atx-alv1
224224
settings:
225225
-
226226
id: atx-alv1-cat-general
227-
title: '1. Appearance'
227+
title: 'Appearance'
228228
description: 'General appearance settings'
229229
type: heading
230230
level: 1
@@ -320,22 +320,54 @@ settings:
320320
321321
322322
-
323-
id: atx-alv1-counter-about
323+
id: atx-alv1-tabs-about
324324
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."
326326
type: info-text
327327
markdown: true
328328
-
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.'
332332
type: variable-themed-color
333333
opacity: true
334334
format: hex
335-
default-light: '#424242'
336-
default-dark: '#424242'
335+
default-light: '#1b1b1b'
336+
default-dark: '#1b1b1b'
337337
-
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
339371
title: 'Circle Size'
340372
description: 'Size of counter circle'
341373
type: variable-number-slider
@@ -345,13 +377,13 @@ settings:
345377
max: 30
346378
step: 1
347379
-
348-
id: atx-alv1-counter-font-face
380+
id: atx-alv1-tabs-font-face
349381
title: 'Font Face'
350382
description: 'Fonts except from the code texts'
351383
type: variable-text
352384
default: 'sans-serif'
353385
-
354-
id: atx-alv1-counter-font-clr-n
386+
id: atx-alv1-tabs-font-clr-n
355387
title: 'Font Color'
356388
description: 'Color of tag text when tag is hovered.'
357389
type: variable-themed-color
@@ -360,7 +392,7 @@ settings:
360392
default-light: '#FFFFFF'
361393
default-dark: '#FFFFFF'
362394
-
363-
id: atx-alv1-counter-font-size
395+
id: atx-alv1-tabs-font-size
364396
title: 'Font Size'
365397
description: 'Font size for counter'
366398
type: variable-number-slider
@@ -370,7 +402,7 @@ settings:
370402
max: 30
371403
step: 1
372404
-
373-
id: atx-alv1-counter-font-weight
405+
id: atx-alv1-tabs-font-weight
374406
title: 'Font Weight'
375407
description: 'Options: normal, bold, lighter, bolder'
376408
type: variable-text
@@ -381,7 +413,7 @@ settings:
381413
382414
383415
id: atx-alv1-cat-anim
384-
title: '2. Animations'
416+
title: 'Animations'
385417
description: 'Animation settings'
386418
type: heading
387419
level: 1
@@ -401,38 +433,10 @@ settings:
401433
label: Disabled
402434
value: anim-1-disabled
403435
-
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-
-
432436
433437
434438
id: atx-alv1-cat-support
435-
title: '3. Support'
439+
title: 'Support'
436440
description: 'Links associated to this snippet'
437441
type: heading
438442
level: 1
@@ -472,10 +476,6 @@ settings:
472476
body
473477
{
474478
--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;
479479
480480
--atx-alv1-general-line-spacing: 15px;
481481
--atx-alv1-general-container-padding: 20px;
@@ -486,12 +486,17 @@ settings:
486486
--atx-alv1-tags-spacing-internal: 5px;
487487
--atx-alv1-tags-spacing-external: 7px;
488488
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+
495500
}
496501
497502
/*
@@ -526,34 +531,6 @@ settings:
526531
}
527532
}
528533
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-
557534
/*
558535
animation: blink
559536
*/
@@ -622,9 +599,9 @@ settings:
622599
cursor : pointer;
623600
transition : all ease-in-out 0.3s;
624601
font-weight : bold;
625-
background-color : #1b1b1b;
602+
background-color : var( --atx-alv1-tabs-header-bg-clr-n );
626603
user-select : none;
627-
font-size : 22px !important;
604+
font-size : 22px;
628605
}
629606
630607
/*
@@ -633,7 +610,7 @@ settings:
633610
634611
details summary:hover
635612
{
636-
background-color : #8f2045;
613+
background-color : var( --atx-alv1-tabs-header-bg-clr-h );
637614
animation : atx-alv1-anim-blink 1s infinite;
638615
}
639616
@@ -643,7 +620,7 @@ settings:
643620
644621
details > summary
645622
{
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 );
647624
padding-left : 20px;
648625
padding-top : 4px;
649626
}
@@ -654,7 +631,7 @@ settings:
654631
655632
details[ open ] > summary
656633
{
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 );
658635
padding-left : 20px;
659636
padding-top : 4px;
660637
}
@@ -709,15 +686,15 @@ settings:
709686
border-bottom : 1px dashed #f73877;
710687
user-select : none;
711688
margin-bottom : 5px;
712-
background-color : #7c1236;
689+
background-color : var( --atx-alv1-tabs-header-bg-clr-s );
713690
}
714691
715692
details[ open ] ul
716693
{
717694
background-color : #272727;
718695
margin-block-start : -2px;
719696
margin-block-end : -10px;
720-
animation-name : atx-alv1-anim-glow !important;
697+
animation-name : var( --atx-alv1-anim-1-glow );
721698
animation-duration : 1s;
722699
animation-timing-function : ease-in-out;
723700
animation-iteration-count : infinite;

0 commit comments

Comments
 (0)