*Definition

This page describes all Restructural Classes

Restructural Classes Diagram

Classes

/* ------------------------------------------ UPDATE ------------------------------------------ */
/* ------------------------------------------ BACKGROUND ------------------------------------------ */
/* DEBUG */
._ddr{background: red}._ddg{background: green}._ddb{background: blue}
/* COLOR */
.bg-trans {background: transparent}
.bg-red-25{background: #ff000044}.bg-green-25{background: #00FF0044}.bg-blue-25{background: #0000ff44}
.bg-red-50{background: #ff000077}.bg-green-50{background: #00FF0077}.bg-blue-50{background: #0000ff77}
.bg-red-75{background: #ff0000aa}.bg-green-75{background: #00FF00aa}.bg-blue-75{background: #0000ffaa}
.bg-black{background: black}.bg-white{background: white}
.bg-w-90{background: #ffffffbb}.bg-w-50{background: #ffffff77}
.bg-w-20{background: #ffffff22}.bg-w-10{background: #ffffff11}
.bg-b-90{background: #000000bb}.bg-b-50{background: #00000077}
.bg-b-20{background: #00000022}.bg-b-10{background: #00000011}.bg-b-5{background: #0000000a}
.bg-b-30{background: #00000033}.bg-b-40{background: #00000044}
.bg-b-10-odd:nth-child(odd){background: #00000011}
.bg-b-5-odd:nth-child(odd){background: #00000008}
.bg-b-2-odd:nth-child(odd){background: #F9FAFB}
/* BG HOVERING */
.bg-w-hov-100:hover{background: #ffffff}.bg-w-hov-50:hover{background: #ffffff77}
.bg-w-hov-20:hover{background: #ffffff22}.bg-w-hov-33:hover{background: #ffffff55}
.bg-w-hov-10:hover{background: #ffffff11}.bg-w-hov-33:hover{background: #ffffff55}
.bg-b-hov-100:hover{background: #000000}.bg-b-hov-50:hover{background: #00000077}
.bg-b-hov-20:hover{background: #00000022}.bg-b-hov-33:hover{background: #00000055}
.bg-b-hov-10:hover{background: #00000011}.bg-b-hov-33:hover{background: #00000055}
/* GLASS-MORPHISM */
.bg-glass-1 {backdrop-filter: blur(1px);-webkit-backdrop-filter: blur(1px)}
.bg-glass-2 {backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px)}
.bg-glass-3 {backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px)}
.bg-glass-4{backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px)}
.bg-glass-5{backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px)}
.bg-glass-6{backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px)}
.bg-glass-10{backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)}
.bg-glass-20{backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px)}
.bg-glass-50{backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px)}
.bg-glass-100{backdrop-filter: blur(100px);-webkit-backdrop-filter: blur(100px)}


/* ------------------------------------------ OPACITY & HOVER ------------------------------------------ */
.opaci-0 {opacity: 0 }.opaci-5 {opacity: 0.05}.opaci-10 {opacity: 0.10}
.opaci-20 {opacity: 0.2 }
.opaci-15 {opacity: 0.15}.opaci-25 {opacity: 0.25}.opaci-50 {opacity: 0.5}
.opaci-75 {opacity: 0.75}.opaci-30 {opacity: 0.3}.opaci-40 {opacity: 0.4}

.opaci-chov-75,.opaci-chov-50,.opaci-chov-25,.opaci-chov-10,.opaci-chov-5,
.opaci-chov--75,.opaci-chov--50,.opaci-chov--25,.opaci-chov--10,.opaci-chov--5{
	cursor: pointer !important;
}
.opaci-chov-75:hover , .opaci-hov-75:hover {opacity: 1}  .opaci-hov-75 {opacity: 0.75}
.opaci-chov-50:hover , .opaci-hov-50:hover {opacity: 1}  .opaci-hov-50 {opacity: 0.5}
.opaci-chov-25:hover , .opaci-hov-25:hover {opacity: 1}  .opaci-hov-25 {opacity: 0.25}
.opaci-chov-10:hover , .opaci-hov-10:hover {opacity: 1}  .opaci-hov-10 {opacity: 0.1}
.opaci-chov-5:hover , .opaci-hov-5:hover {opacity: 0.5}  .opaci-hov-5 {opacity: 0.05}
.opaci-chov--100:hover , .opaci-hov--100:hover {opacity: 1 }  .opaci-hov--100 {opacity: 1}
.opaci-chov--75:hover , .opaci-hov--75:hover {opacity: 0.75 }  .opaci-hov--75 {opacity: 1}
.opaci-chov--50:hover , .opaci-hov--50:hover {opacity: 0.5 }  .opaci-hov--50 {opacity: 1}
.opaci-chov--25:hover , .opaci-hov--25:hover {opacity: 0.25 }  .opaci-hov--25 {opacity: 1}
.opaci-chov--10:hover , .opaci-hov--10:hover {opacity: 0.1 }  .opaci-hov--10 {opacity: 1}
.opaci-chov--5:hover , .opaci-hov--5:hover {opacity: 0.05 }  .opaci-hov--10 {opacity: 1}

.opaci-cahov-75:hover .opaci-cbhov-75, .opaci-ahov-75:hover .opaci-bhov-75 {opacity: 1}
.opaci-cahov-75 .opaci-cbhov-75, .opaci-ahov-75 .opaci-bhov-75 {opacity: 0.75}
.opaci-cahov-50:hover .opaci-cbhov-50, .opaci-ahov-50:hover .opaci-bhov-50 {opacity: 1}
.opaci-cahov-50 .opaci-cbhov-50, .opaci-ahov-50 .opaci-bhov-50 {opacity: 0.5}
.opaci-cahov-25:hover .opaci-cbhov-25, .opaci-ahov-25:hover .opaci-bhov-25 {opacity: 1}
.opaci-cahov-25 .opaci-cbhov-25, .opaci-ahov-25 .opaci-bhov-25 {opacity: 0.25}
.opaci-cahov-10:hover .opaci-cbhov-10, .opaci-ahov-10:hover .opaci-bhov-10 {opacity: 1}
.opaci-cahov-10 .opaci-cbhov-10, .opaci-ahov-10 .opaci-bhov-10 {opacity: 0.1}
.opaci-cahov-5:hover .opaci-cbhov-5, .opaci-ahov-5:hover .opaci-bhov-5 {opacity: 1}
.opaci-cahov-5 .opaci-cbhov-5, .opaci-ahov-5 .opaci-bhov-5 {opacity: 0.05}
.opaci-cahov-0:hover .opaci-cbhov-0, .opaci-ahov-0:hover .opaci-bhov-0 {opacity: 1}
.opaci-cahov-0 .opaci-cbhov-0, .opaci-ahov-0 .opaci-bhov-0 {opacity: 0}

.opaci-cahov--75:hover .opaci-cbhov--75, .opaci-ahov--75:hover .opaci-bhov--75 {opacity: 0.75}
.opaci-cahov--75 .opaci-cbhov--75, .opaci-ahov--75 .opaci-bhov--75 {opacity: 1}
.opaci-cahov--50:hover .opaci-cbhov--50, .opaci-ahov--50:hover .opaci-bhov--50 {opacity: 0.5}
.opaci-cahov--50 .opaci-cbhov--50, .opaci-ahov--50 .opaci-bhov--50 {opacity: 1}
.opaci-cahov--25:hover .opaci-cbhov--25, .opaci-ahov--25:hover .opaci-bhov--25 {opacity: 0.25}
.opaci-cahov--25 .opaci-cbhov--25, .opaci-ahov--25 .opaci-bhov--25 {opacity: 1}
.opaci-cahov--10:hover .opaci-cbhov--10, .opaci-ahov--10:hover .opaci-bhov--10 {opacity: 0.1}
.opaci-cahov--10 .opaci-cbhov--10, .opaci-ahov--10 .opaci-bhov--10 {opacity: 1}
.opaci-cahov--5:hover .opaci-cbhov--5, .opaci-ahov--5:hover .opaci-bhov--5 {opacity: 0.05}
.opaci-cahov--5 .opaci-cbhov--5, .opaci-ahov--5 .opaci-bhov--5 {opacity: 1}
.opaci-cahov--0:hover .opaci-cbhov--0, .opaci-ahov--0:hover .opaci-bhov--0 {opacity: 0}
.opaci-cahov--0 .opaci-cbhov--0, .opaci-ahov--0 .opaci-bhov--0 {opacity: 1}

.opaci-cahov--75 , .opaci-cahov--75 .opaci-cbhov--75,
.opaci-cahov--50 , .opaci-cahov--50 .opaci-cbhov--50,
.opaci-cahov--25 , .opaci-cahov--25 .opaci-cbhov--25,
.opaci-cahov--10 , .opaci-cahov--10 .opaci-cbhov--10,
.opaci-cahov--5 , .opaci-cahov--5 .opaci-cbhov--5,
.opaci-cahov--0 , .opaci-cahov--0 .opaci-cbhov--0 {
	cursor: pointer;
}

/* ------------------------------------------ FILTERS ------------------------------------------ */
.nosat {filter: saturate(0);}
.nolight {filter: brightness(0);}.nobright {filter: brightness(0);}
.invert{filter: invert(1)}.bright-1000{filter: brightness(10)}
.blur-1 {filter: blur(1px)}.blur-2 {filter: blur(2px)}.blur-3 {filter: blur(3px)}.blur-4 {filter: blur(4px)}
.blur-5 {filter: blur(5px)}.blur-6 {filter: blur(6px)}.blur-7 {filter: blur(7px)}.blur-8 {filter: blur(8px)}
.blur-9 {filter: blur(9px)}.blur-0 {filter: blur(0px)}.blur-11 {filter: blur(11px)}
.blur-12 {filter: blur(12px)}.blur-13 {filter: blur(13px)}.blur-14 {filter: blur(14px)}.blur-15 {filter: blur(15px)}
.scale-50{transform: scale(0.5)}.scale-60{transform: scale(0.6)}.scale-70{transform: scale(0.7)}
.scale-90{transform: scale(0.9)}.scale-110{transform: scale(1.1)}.scale-120{transform: scale(1.2)}
.scale-150{transform: scale(1.5)}.scale-160{transform: scale(1.6)}.scale-200{transform: scale(2)}
.scale-250{transform: scale(2.5)}
.scale-hov-150 {transform: 0;transition: all 0.1s ease-in-out}
.scale-hov-160 {transform: 0;transition: all 0.1s ease-in-out}
.scale-hov-200 {transform: 0;transition: all 0.1s ease-in-out}
.scale-hov-150:hover{transform: scale(1.5) !important;  }
.scale-hov-160:hover{transform: scale(1.6)}
.scale-hov-200:hover{transform: scale(2)}
.rot-45{transform: rotate(45deg)}.rot-60{transform: rotate(60deg)}.rot-70{transform: rotate(70deg)}
.rot-90{transform: rotate(90deg)}.rot-110{transform: rotate(110deg)}.rot-120{transform: rotate(120deg)}
.rot-150{transform: rotate(150deg)}.rot-160{transform: rotate(160deg)}.rot-180{transform: rotate(180deg)}
.rot-200{transform: rotate(200deg)}
.rot-250{transform: rotate(250deg)}
.rot-270{transform: rotate(270deg)}
.rot--45{transform: rotate(-45deg)}.rot--60{transform: rotate(-60deg)}.rot--70{transform: rotate(-70deg)}
.rot--90{transform: rotate(-90deg)}.rot--110{transform: rotate(-110deg)}.rot--120{transform: rotate(-120deg)}
.rot--150{transform: rotate(-150deg)}.rot--160{transform: rotate(-160deg)}.rot--180{transform: rotate(-180deg)}
.rot--200{transform: rotate(-200deg)}
.rot--250{transform: rotate(-250deg)}
.rot--270{transform: rotate(-270deg)}

Diagram Script

graph LR;
    subgraph Update          
        subgraph Background
            background --> background_init
            background_init(".bg-? | ddg") -->|color| background_types_color("red-? | green-? | blue-?")
            background_init(".bg-?") -->|black & white| background_types_bnw("b-? | w-?")
            background_init(".bg-?") -->|glassmorphism| background_types_glass("glass-")
            background -->|debug| background_debug("_ddr | _ddg | _ddb")
            background_types_bnw --> background_types_bnw_variations("`
                2 | 5 | 10 | 20 | ... | 50 | 75
            `")
            background_types_color --> background_types_color_variations("`
                25 | 50 | 75
            `")
            background_types_glass --> background_types_glass_variations("`
                1 | 2 | ... | 6 | 10 | 20 | 50 | 100
            `")

            style background fill:#ffffff
            style background_types_color_variations fill:#ffccaa                        
            style background_types_bnw_variations fill:#ffccaa                        
            style background_types_glass_variations fill:#ffccaa                        
        end

        subgraph Opacity
            opacity --> opacity_init(".opaci-?")
            opacity_init --> opacity_types_basic("`0 | 5 | 10 | ... | 30 | 40 | 50 | 75 | 100`")
            opacity_init --> opacity_types_hover("hov-? | chov-? | hov--? | chov--?")
            opacity_init --> opacity_types_hover_nested("cahov-? | cbhov-? | cahov--? | cbhov--?")
            opacity_types_hover -->|hover| opacity_types_basichover("`5 | 10 | 25 | 50 | 75 | 100`")
            opacity_types_hover -->|clickhover| opacity_types_clicknhover("`0 | 5 | 10 | ... | 30 | 40 | 50 | 75 | 100`")
            opacity_types_hover_nested --> opacity_types_hover_nested_variations("`5 | 10 | 25 | 50 | 75 | 100`")
            style opacity_types_basic fill:#ffccaa
            style opacity_types_basichover fill:#ffccaa
            style opacity_types_clicknhover fill:#ffccaa
            style opacity_types_hover_nested_variations fill:#ffccaa
            style opacity fill:#ffffff
        end

        subgraph Filter
            invert --> invert_init(".invert")
            blur --> blur_init(".blur-?")
            blur_init --> blur_types("1 | 2 | ... | 14")

            scale --> scale_init(".scale-?")
            scale_init --> scale_types("`50 | 60 | 70 | 90 | 110 | 120 | 150 | 160 | 200 | 250`")
            scale_init --> scale_types_hover("hov-?")
            scale_types_hover --> scale_types_hover_variations("`50 | 60 | 70 | 90 | 110 | 120 | 150 | 160 | 200 | 250`")

            rotation --> rot_init(".rot-?")
            rot_init --> rot_types("`50 | 60 | 70 | 90 | 110 | 120 | 150 | 160 | 200 | 250 | 270`")
            rot_init --> rot_types_hover("hov-?")
            rot_types_hover --> rot_types_hover_variations("`50 | 60 | 70 | 90 | 110 | 120 | 150 | 160 | 200 | 250 | 270`")

            style invert fill:#ffffff
            style scale fill:#ffffff
            style blur fill:#ffffff
            style blur_types fill:#ffccaa
            style scale_types fill:#ffccaa
            style scale_types_hover_variations fill:#ffccaa
            style rotation fill:#ffffff
            style rot_types fill:#ffccaa
            style rot_types_hover_variations fill:#ffccaa
        end

        style Background fill:#f9f9f9
        style Opacity fill:#f9f9f9
        style Filter fill:#f9f9f9
    end