malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add additional stacked card style rotation steps

Browse Source
This commit is contained in:
Tetrakern 2024-09-08 19:04:26 +02:00
parent 1bc5d7dd20
commit 177f7e1944
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/customize/card-frame-stacked.css
View File

@ -1 +1 @@
:root:not(.minimal) .card{--card-style-border-width: 2px;--this-rotation: calc(2deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-s: calc(1.75deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-xs: calc(1.5deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-xxs: calc(1.25deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));box-shadow:0 0 0 var(--card-frame-border-thickness, 2.5px) var(--card-frame-border-color)}:root:not(.minimal) .card::before{pointer-events:none;content:"";position:absolute;top:50%;left:50%;z-index:-1;display:block;background:var(--card-frame-border-color);border-radius:var(--card-frame-border-radius, var(--layout-border-radius-small));height:var(--card-frame-height, calc(100% + 6px));width:var(--card-frame-width, calc(100% + 6px));transform-origin:center;transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation)))}@container (min-width: 450px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-s)))}}@container (min-width: 600px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xs)))}}@container (min-width: 750px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxs)))}}:root:not(.minimal) .card .card__body{border-radius:var(--card-frame-border-radius, var(--layout-border-radius-small))}
:root:not(.minimal) .card{--card-style-border-width: 2px;--this-rotation: calc(2deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-s: calc(1.75deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-xs: calc(1.5deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-xxs: calc(1.25deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-xxxs: calc(1deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));--this-rotation-xxxxs: calc(0.75deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));box-shadow:0 0 0 var(--card-frame-border-thickness, 2.5px) var(--card-frame-border-color)}:root:not(.minimal) .card::before{pointer-events:none;content:"";position:absolute;top:50%;left:50%;z-index:-1;display:block;background:var(--card-frame-border-color);border-radius:var(--card-frame-border-radius, var(--layout-border-radius-small));height:var(--card-frame-height, calc(100% + 6px));width:var(--card-frame-width, calc(100% + 6px));transform-origin:center;transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation)))}@container (min-width: 450px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-s)))}}@container (min-width: 600px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xs)))}}@container (min-width: 750px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxs)))}}@container (min-width: 900px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxxs)))}}@container (min-width: 1050px){:root:not(.minimal) .card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxxxs)))}}:root:not(.minimal) .card .card__body{border-radius:var(--card-frame-border-radius, var(--layout-border-radius-small))}

10
src/scss/customize/card-frame-stacked.scss
View File

@ -7,6 +7,8 @@
--this-rotation-s: calc(1.75deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));
--this-rotation-xs: calc(1.5deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));
--this-rotation-xxs: calc(1.25deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));
--this-rotation-xxxs: calc(1deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));
--this-rotation-xxxxs: calc(0.75deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));
box-shadow: 0 0 0 var(--card-frame-border-thickness, 2.5px) var(--card-frame-border-color);
&::before {
@ -35,6 +37,14 @@
@container (min-width: 750px) {
transform: translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxs)));
}
@container (min-width: 900px) {
transform: translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxxs)));
}
@container (min-width: 1050px) {
transform: translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxxxs)));
}
}
.card__body {