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

Add solid border card frame options

Browse Source
This commit is contained in:
Tetrakern 2024-03-04 02:48:06 +01:00
parent 3d562ceb15
commit af51ec5342
9 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
:root body{--card-frame-border-color: var(--bg-800);--card-style-border-color: var(--card-frame-border-color)}:root[data-mode=light] body{--card-frame-border-color: var(--bg-300)}.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)}.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){.card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-s)))}}@container (min-width: 600px){.card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xs)))}}@container (min-width: 750px){.card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxs)))}}.card .card__body{border-radius:var(--card-frame-border-radius, var(--layout-border-radius-small))}
.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)}.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){.card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-s)))}}@container (min-width: 600px){.card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xs)))}}@container (min-width: 750px){.card::before{transform:translate(-50%, -50%) rotate(var(--card-frame-rotation, var(--this-rotation-xxs)))}}.card .card__body{border-radius:var(--card-frame-border-radius, var(--layout-border-radius-small))}

2
css/editor.css
View File

File diff suppressed because one or more lines are too long

2
css/properties.css
View File

File diff suppressed because one or more lines are too long

4
includes/functions/_customizer-settings.php
View File

@ -1602,7 +1602,9 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
'default' => _x( 'None (Default)', 'Customizer card frame option.', 'fictioneer' ),
'stacked_right' => _x( 'Stacked (Right)', 'Customizer card frame option.', 'fictioneer' ),
'stacked_left' => _x( 'Stacked (Left)', 'Customizer card frame option.', 'fictioneer' ),
'stacked_random' => _x( 'Stacked (Random)', 'Customizer card frame option.', 'fictioneer' )
'stacked_random' => _x( 'Stacked (Random)', 'Customizer card frame option.', 'fictioneer' ),
'border_2px' => _x( 'Border (2px)', 'Customizer card frame option.', 'fictioneer' ),
'border_3px' => _x( 'Border (3px)', 'Customizer card frame option.', 'fictioneer' )
);
$manager->add_control(

8
includes/functions/_customizer.php
View File

@ -980,6 +980,14 @@ function fictioneer_build_customize_css( $context = null ) {
}
}
if ( $card_frame === 'border_2px' ) {
$css .= '.card{--card-style-border-width: 2px;box-shadow: 0 0 0 var(--card-frame-border-thickness, 2px) var(--card-frame-border-color);}';
}
if ( $card_frame === 'border_3px' ) {
$css .= '.card{--card-style-border-width: 3px;box-shadow: 0 0 0 var(--card-frame-border-thickness, 3px) var(--card-frame-border-color);}';
}
// --- Content list style ----------------------------------------------------
if ( $content_list_style === 'full' ) {

2
src/scss/common/_lightmode.scss
View File

@ -162,6 +162,8 @@
// --card-label-color: var(--fg-inverted);
// --card-label-background: var(--fg-500);
// --card-unavailable-filter: grayscale(0.5) blur(1.5px);
--card-frame-border-color: var(--bg-300);
// --card-style-border-color: var(--card-frame-border-color);
--card-footer-color: var(--fg-600);
--card-footer-icon-color: var(--fg-700);
--card-text-icon-color: var(--fg-600);

2
src/scss/common/_properties.scss
View File

@ -269,6 +269,8 @@
--card-label-color: var(--fg-inverted);
--card-label-background: var(--fg-500);
--card-unavailable-filter: grayscale(0.5) blur(1.5px);
--card-frame-border-color: var(--bg-800);
--card-style-border-color: var(--card-frame-border-color);
// === FOCUS =================================================================

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

@ -1,15 +1,6 @@
@import '../common/_functions';
@import '../common/_mixins';
:root body {
--card-frame-border-color: var(--bg-800);
--card-style-border-color: var(--card-frame-border-color);
}
:root[data-mode=light] body {
--card-frame-border-color: var(--bg-300);
}
.card {
--card-style-border-width: 2px;
--this-rotation: calc(2deg * var(--this-rotation-mod, 1) * var(--this-flip, 1));