mirror of
https://ghproxy.net/https://github.com/AlxMedia/shapebox.git
synced 2025-08-26 14:53:03 +08:00
1.1.0
This commit is contained in:
AlxMedia
parent
6cc8f22877
commit
ac2c3b86f2
10 changed files with 80 additions and 55 deletions
4
dark.css
4
dark.css
|
|
@ -293,5 +293,5 @@ body:where(.dark) .nav-menu.mobile > div > ul { border-top: 1px solid rgba(255,2
|
|||
body:where(.dark) .toggle-search:focus #svg-close { fill: rgba(255,255,255,0.6); }
|
||||
}
|
||||
|
||||
body:where(.dark) .site-title a img,
|
||||
body:where(.dark) .site-title a svg { filter: invert(1); }
|
||||
body:where(.dark.invert-dark-logo) .site-title a img,
|
||||
body:where(.dark.invert-dark-logo) .site-title a svg { filter: invert(1); }
|
||||
|
|
@ -541,6 +541,7 @@ if ( ! function_exists( 'shapebox_body_class' ) ) {
|
|||
if ( has_nav_menu( 'mobile' ) ) { $classes[] = 'mobile-menu'; }
|
||||
if ( get_theme_mod( 'mobile-sidebar-hide','on' ) != 'on' ) { $classes[] = 'mobile-sidebar-hide'; }
|
||||
if ( get_theme_mod( 'dark-theme' ,'off' ) == 'on' ) { $classes[] = 'dark'; }
|
||||
if ( get_theme_mod( 'invert-logo' ,'on' ) == 'on' ) { $classes[] = 'invert-dark-logo'; }
|
||||
if (! ( is_user_logged_in() ) ) { $classes[] = 'logged-out'; }
|
||||
return $classes;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,7 +148,8 @@ if ( ! function_exists( 'shapebox_dynamic_css' ) ) {
|
|||
.blog-card-author a,
|
||||
.blog-single-author a,
|
||||
.widget_calendar caption,
|
||||
.alx-tabs-nav li.active a { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
|
||||
.alx-tabs-nav li.active a,
|
||||
#theme-toggle-btn:before { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
|
||||
|
||||
#theme-toggle i { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
|
||||
|
||||
|
|
@ -174,7 +175,8 @@ if ( ! function_exists( 'shapebox_dynamic_css' ) ) {
|
|||
.blog-card-author a,
|
||||
.blog-single-author a,
|
||||
.widget_calendar caption,
|
||||
.alx-tabs-nav li.active a { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
|
||||
.alx-tabs-nav li.active a,
|
||||
#theme-toggle-btn:before { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
|
||||
|
||||
#theme-toggle i { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
|
||||
|
||||
|
|
|
|||
|
|
@ -720,6 +720,15 @@ Kirki::add_field( 'shapebox_theme', array(
|
|||
'section' => 'styling',
|
||||
'default' => 'off',
|
||||
) );
|
||||
// Styling: Invert Dark Logo
|
||||
Kirki::add_field( 'shapebox_theme', array(
|
||||
'type' => 'switch',
|
||||
'settings' => 'invert-logo',
|
||||
'label' => esc_html__( 'Invert Dark Logo Color', 'shapebox' ),
|
||||
'description' => esc_html__( 'Change color for the logo in dark mode', 'shapebox' ),
|
||||
'section' => 'styling',
|
||||
'default' => 'on',
|
||||
) );
|
||||
// Styling: Primary Color
|
||||
Kirki::add_field( 'shapebox_theme', array(
|
||||
'type' => 'color',
|
||||
|
|
|
|||
13
header.php
13
header.php
|
|
@ -16,8 +16,7 @@
|
|||
|
||||
<?php if ( get_theme_mod( 'theme-toggle', 'off' ) == 'on' ): ?>
|
||||
<script>
|
||||
const theme = localStorage.getItem('theme') || 'light';
|
||||
document.body.classList.add(theme);
|
||||
document.body.classList.add(localStorage.getItem('theme') || 'light');
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
|
|
@ -69,11 +68,11 @@
|
|||
<?php endif; ?>
|
||||
|
||||
<?php if ( get_theme_mod( 'theme-toggle', 'off' ) == 'on' ): ?>
|
||||
<div id="theme-toggle" class="group">
|
||||
<a id="light" href="#"><i class="fas fa-sun"></i></a>
|
||||
<a id="dark" href="#"><i class="fas fa-moon"></i></a>
|
||||
<div id="theme-toggle-ball"></div>
|
||||
</div>
|
||||
<button id="theme-toggle">
|
||||
<i class="fas fa-sun"></i>
|
||||
<i class="fas fa-moon"></i>
|
||||
<span id="theme-toggle-btn"></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( get_theme_mod( 'header-social', 'on' ) == 'on' ): ?>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
// DOM Elements
|
||||
const darkButton = document.getElementById('dark');
|
||||
const lightButton = document.getElementById('light');
|
||||
const body = document.body;
|
||||
// Get current theme
|
||||
var theme = localStorage.getItem( 'theme' );
|
||||
// Set defaults if theme is not defined.
|
||||
if ( ! theme ) {
|
||||
localStorage.setItem( 'theme', 'light' );
|
||||
theme = 'light';
|
||||
}
|
||||
// Add theme to the body.
|
||||
document.body.classList.add( theme );
|
||||
|
||||
// Apply the cached theme on reload
|
||||
body.classList.add(theme);
|
||||
|
||||
// Button Event Handlers
|
||||
darkButton.onclick = () => {
|
||||
body.classList.replace('light', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
};
|
||||
|
||||
lightButton.onclick = () => {
|
||||
body.classList.replace('dark', 'light');
|
||||
localStorage.setItem('theme', 'light');
|
||||
};
|
||||
// Handle onClick events
|
||||
document.getElementById( 'theme-toggle' ).addEventListener( 'click', () => {
|
||||
// Cleanup classes from body.
|
||||
document.body.classList.remove( 'light' );
|
||||
document.body.classList.remove( 'dark' );
|
||||
// Change the theme.
|
||||
theme = ( theme === 'light' ) ? 'dark' : 'light';
|
||||
// Save the theme.
|
||||
localStorage.setItem( 'theme', theme );
|
||||
// Apply the theme.
|
||||
document.body.classList.add( theme );
|
||||
});
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
msgid ""
|
||||
msgstr ""
|
||||
"Project-Id-Version: Shapebox\n"
|
||||
"POT-Creation-Date: 2022-04-05 14:20+0200\n"
|
||||
"POT-Creation-Date: 2022-08-29 11:35+0200\n"
|
||||
"PO-Revision-Date: 2018-09-21 21:27+0100\n"
|
||||
"Last-Translator: \n"
|
||||
"Language-Team: \n"
|
||||
|
|
@ -127,19 +127,19 @@ msgstr ""
|
|||
msgid "Footer 4"
|
||||
msgstr ""
|
||||
|
||||
#: functions.php:687
|
||||
#: functions.php:688
|
||||
msgid "Alx Extensions"
|
||||
msgstr ""
|
||||
|
||||
#: functions.php:691
|
||||
#: functions.php:692
|
||||
msgid "Meta Box"
|
||||
msgstr ""
|
||||
|
||||
#: functions.php:695
|
||||
#: functions.php:696
|
||||
msgid "Regenerate Thumbnails"
|
||||
msgstr ""
|
||||
|
||||
#: functions.php:699
|
||||
#: functions.php:700
|
||||
msgid "WP-PageNavi"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -784,22 +784,30 @@ msgid "Do not use with dark theme enabled"
|
|||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:727
|
||||
msgid "Invert Dark Logo Color"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:728
|
||||
msgid "Change color for the logo in dark mode"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:736
|
||||
msgid "Primary Color"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:735
|
||||
#: functions/theme-options.php:744
|
||||
msgid "Gradient Left"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:743
|
||||
#: functions/theme-options.php:752
|
||||
msgid "Gradient Right"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:751
|
||||
#: functions/theme-options.php:760
|
||||
msgid "Background Color"
|
||||
msgstr ""
|
||||
|
||||
#: header.php:26
|
||||
#: header.php:25
|
||||
msgid "Skip to content"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
|
|
@ -87,6 +87,11 @@ Sidebar images
|
|||
|
||||
== Changelog ==
|
||||
|
||||
= 1.1.0 - 2022-08-29 =
|
||||
* Improved the dark mode toggle
|
||||
* Added option to disable inverted color for dark mode logo
|
||||
* Updated language files
|
||||
|
||||
= 1.0.9 - 2022-08-18 =
|
||||
* Fixed so that thumbnails are clickable
|
||||
|
||||
|
|
|
|||
|
|
@ -104,12 +104,10 @@
|
|||
|
||||
#nav-header.nav-container { margin-top: 0; }
|
||||
|
||||
#theme-toggle { padding: 7px; width: 50px; height: 20px; position: absolute; left: 60px; top: -40px; bottom: auto; z-index: 9; margin: 0; }
|
||||
#theme-toggle i { font-size: 20px; float: left; }
|
||||
#theme-toggle i.fa-moon { margin-top: 0; margin-left: 10px; }
|
||||
#theme-toggle-ball { }
|
||||
body.light #theme-toggle-ball { top: 2px; left: 2px; }
|
||||
body.dark #theme-toggle-ball { top: 2px; right: 2px; left: auto; bottom: auto; }
|
||||
#theme-toggle { position: absolute; top: -39px; left: 70px; margin: 0; }
|
||||
#theme-toggle i { float: left; margin: 4px 0 0; }
|
||||
#theme-toggle-btn { width: 64px; height: 32px; margin-left: 32px; }
|
||||
body.dark #theme-toggle-btn:before { top: 2px; left: 34px; margin: 0; }
|
||||
|
||||
.s2 { box-shadow: none; position: relative; width: 100%; text-align: center; top: 0!important; }
|
||||
.s2 .social-links li:before { display: none; }
|
||||
|
|
|
|||
23
style.css
23
style.css
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
Theme Name: Shapebox
|
||||
Theme URI: http://alx.media/themes/shapebox/
|
||||
Version: 1.0.9
|
||||
Version: 1.1.0
|
||||
Requires at least: 5.0
|
||||
Requires PHP: 5.6
|
||||
Tested up to: 6.0
|
||||
|
|
@ -674,21 +674,20 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
|
|||
.s2 .social-links .social-tooltip:hover:after { background: #333; color: #fff; padding: 7px 10px; top: 14px; left: 50px; right: auto; }
|
||||
.s2 .social-links .social-tooltip:hover:before { top: 24px; left: 45px; right: auto; border-color: transparent #333; border-width: 5px 5px 5px 0; }
|
||||
|
||||
#theme-toggle { border-radius: 30px; margin: 20px 20px 0; padding: 10px 8px; position: relative; }
|
||||
#theme-toggle-ball { width: 30px; height: 30px; border-radius: 100%; position: absolute; left: 5px; }
|
||||
#theme-toggle a { display: block; }
|
||||
#theme-toggle i { color: #fff; font-size: 24px; display: block; margin: 0 auto; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, #c14bff 0%, #6c5dd3 100%); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; }
|
||||
#theme-toggle i.fa-moon { margin-top: 10px; }
|
||||
body.light #theme-toggle { background: #333; }
|
||||
body.light #theme-toggle-ball { background: #fff; top: 5px; }
|
||||
body.dark #theme-toggle { background: #fff; }
|
||||
body.dark #theme-toggle-ball { background: #141416; bottom: 5px; }
|
||||
#theme-toggle { background: none; border: 0; padding: 0; display: block; margin: 30px auto 0; cursor: pointer; }
|
||||
#theme-toggle i { display: block; font-size: 24px; margin: 0 auto 10px; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, #c14bff 0%, #6c5dd3 100%); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; }
|
||||
#theme-toggle .fa-sun { display: block; }
|
||||
#theme-toggle .fa-moon { display: none; }
|
||||
#theme-toggle-btn { background: #f1f1f1; box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); position: relative; display: block; width: 32px; height: 64px; border-radius: 16px; margin: 0 auto; }
|
||||
#theme-toggle-btn:before { background: linear-gradient(90deg, #c14bff 0%, #6c5dd3 100%); transition: all .25s; border: 4px solid #ffffff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16); content: ""; position: absolute; top: 50%; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; }
|
||||
body.dark #theme-toggle .fa-sun { display: none; }
|
||||
body.dark #theme-toggle .fa-moon { display: block; }
|
||||
body.dark #theme-toggle-btn { background: #212226; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
|
||||
body.dark #theme-toggle-btn:before { border-color: #141416; top: 100%; margin-top: -30px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.1); }
|
||||
|
||||
.site-title { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; float: left; line-height: 60px; padding: 10px 0 10px 0; position: relative; z-index: 2; }
|
||||
.site-title a { display: block; color: #333; max-width: 100%; }
|
||||
.site-title a img { display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; }
|
||||
.site-title a img,
|
||||
.site-title a svg { filter: invert(0); }
|
||||
.site-description { font-size: 15px; font-weight: 300; color: #aaa; float: left; margin: 30px 0 0 20px; position: relative; z-index: 2; }
|
||||
.site-header { background: #eee; }
|
||||
.site-image { display: block; margin: 0 auto; max-height: 400px; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
