Adds option to tweak gallery color scheme to light

This commit is contained in:
mateuswetah 2021-08-26 17:21:24 -03:00
parent 649b2373fb
commit c8bf6cbae6
8 changed files with 80 additions and 12 deletions

View File

@ -99,4 +99,44 @@ if ( !function_exists('tainacan_blocksy_items_page_filters_fixed_on_scroll_outpu
}
add_action( 'wp_head', 'tainacan_blocksy_items_page_filters_fixed_on_scroll_output');
/**
* Enqueues front-end CSS for the light scheme of the photoswipe layer
*/
if ( !function_exists('tainacan_blocksy_gallery_light_color_scheme') ) {
function tainacan_blocksy_gallery_light_color_scheme() {
$prefix = blocksy_manager()->screen->get_prefix();
$has_light_dark_color_scheme = get_theme_mod( $prefix . '_galery_color_scheme', 'dark' ) == 'light';
if (!$has_light_dark_color_scheme)
return;
$css = '
/* Photoswipe layer for the gallery dark */
.tainacan-photoswipe-layer .pswp__bg {
background-color: rgba(255, 255, 255, 0.85) !important;
}
.tainacan-photoswipe-layer .pswp__ui--fit .pswp__top-bar,
.tainacan-photoswipe-layer .pswp__ui--fit .pswp__caption {
background-color: rgba(255, 255, 255, 0.7) !important;
}
.tainacan-photoswipe-layer .pswp__top-bar .pswp__name,
.tainacan-photoswipe-layer .pswp__caption__center {
color: black !important;
}
.tainacan-photoswipe-layer .pswp__button,
.tainacan-photoswipe-layer .pswp__button--arrow--left::before,
.tainacan-photoswipe-layer .pswp__button--arrow--right::before {
filter: invert(100) !important;
}
.tainacan-photoswipe-layer .pswp--css_animation .pswp__preloader__donut {
border: 2px solid #000000 !important;
}
';
echo '<style type="text/css" id="tainacan-gallery-color-scheme">' . sprintf( $css ) . '</style>';
}
}
add_action( 'wp_head', 'tainacan_blocksy_gallery_light_color_scheme');
?>

View File

@ -72,6 +72,9 @@ $options = [
], false),
blocksy_get_options(TAINACAN_BLOCKSY_PLUGIN_DIR_PATH . '/inc/options/single-elements/attachments-typography.php', [
'prefix' => $prefix
], false),
blocksy_get_options(TAINACAN_BLOCKSY_PLUGIN_DIR_PATH . '/inc/options/single-elements/gallery-color-scheme.php', [
'prefix' => $prefix
], false)
],
]

View File

@ -0,0 +1,19 @@
<?php
if (! isset($prefix)) {
$prefix = '';
}
$options = [
$prefix . 'galery_color_scheme' => [
'label' => __('Media gallery color scheme', 'tainacan-blocksy'),
'type' => 'ct-radio',
'value' => 'dark',
'view' => 'text',
'divider' => 'top',
'choices' => [
'dark' => __('Dark', 'blocksy'),
'light' => __('Light', 'blocksy'),
],
]
];

View File

@ -287,7 +287,8 @@ body:not(.tainacan-admin-page) {
.page-title {
margin-top: 0px;
margin-bottom: 4px;
display: inline-block;
display: block;
clear: none;
}
.ct-title-label {
font-weight: normal;
@ -296,7 +297,7 @@ body:not(.tainacan-admin-page) {
}
}
.collection-thumbnail {
max-width: calc(var(--tainacan-filter-menu-width-theme, 20%) - 24px);
max-width: calc(var(--thumbnail-size, 20%) - 24px);
float: left;
margin-right: 24px;
@ -304,8 +305,10 @@ body:not(.tainacan-admin-page) {
border-radius: var(--borderRadius,3px);
}
}
.page-description {
display: block;
.page-description ,
.page-description p {
display: block !important;
clear: none;
}
}
}

View File

@ -311,7 +311,8 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
.tainacan-collection-header .tainacan-collection-header__box .page-title {
margin-top: 0px;
margin-bottom: 4px;
display: inline-block;
display: block;
clear: none;
}
.tainacan-collection-header .tainacan-collection-header__box .ct-title-label {
@ -323,7 +324,7 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
}
.tainacan-collection-header .tainacan-collection-header__box .collection-thumbnail {
max-width: calc(var(--tainacan-filter-menu-width-theme, 20%) - 24px);
max-width: calc(var(--thumbnail-size, 20%) - 24px);
float: left;
margin-right: 24px;
}
@ -332,8 +333,10 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
border-radius: var(--borderRadius, 3px);
}
.tainacan-collection-header .tainacan-collection-header__box .page-description {
display: block;
.tainacan-collection-header .tainacan-collection-header__box .page-description,
.tainacan-collection-header .tainacan-collection-header__box .page-description p {
display: block !important;
clear: none;
}
.page.has-page-header-style-boxed .theme-items-list:not(.is-fullscreen) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long