mirror of
https://ghproxy.net/https://github.com/AlxMedia/shapebox.git
synced 2025-08-26 16:35:56 +08:00
Add dark theme styling option
This commit is contained in:
AlxMedia
parent
34ec584f3a
commit
f9e9d3e978
7 changed files with 321 additions and 13 deletions
289
dark.css
Normal file
289
dark.css
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
body,
|
||||
#wrapper,
|
||||
#header,
|
||||
.s1,
|
||||
.s2,
|
||||
#page,
|
||||
.slick-featured .slick-dots .slick-active button,
|
||||
.sidebar .widget > h3 > span,
|
||||
.blog-single-format,
|
||||
.blog-card-inner,
|
||||
.featured-link:focus,
|
||||
.slick-image-slide { background-color: #141416; }
|
||||
|
||||
.featured-item,
|
||||
.blog-single-inner { background-color: #141416; }
|
||||
|
||||
#wrapper { border-color: #141416; }
|
||||
#header { border-color: #23262f; }
|
||||
.col-2cl .s1 { box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); }
|
||||
.col-2cr .s1 { box-shadow: inset -1px 0 0 rgba(255,255,255,0.06); }
|
||||
.s2 { box-shadow: inset -1px 0 0 rgba(255,255,255,0.06); }
|
||||
|
||||
.featured-item-wrap,
|
||||
.blog-card-wrap,
|
||||
#footer,
|
||||
.alx-tabs-nav,
|
||||
.blog-card-author a:after,
|
||||
.wp-pagenavi a,
|
||||
#profile-name,
|
||||
.search-expand,
|
||||
.blog-single,
|
||||
.blog-single-author a:after,
|
||||
.author-bio,
|
||||
.post-tags a { background-color: #212226; }
|
||||
|
||||
#profile-name:after { border-top-color: #212226; }
|
||||
|
||||
a,
|
||||
.entry a:hover,
|
||||
.site-title a,
|
||||
.page-title h1,
|
||||
.page-title h2,
|
||||
.page-title h3,
|
||||
.page-title h4,
|
||||
.blog-card-title a,
|
||||
.s2 .social-links .social-tooltip:hover,
|
||||
.alx-tab .tab-item-title a,
|
||||
.alx-tab .tab-item-comment a,
|
||||
.alx-posts .post-item-title a,
|
||||
.wp-pagenavi a:hover,
|
||||
.wp-pagenavi a:active,
|
||||
.wp-pagenavi span.current,
|
||||
#footer-bottom a:hover,
|
||||
.sidebar .post-nav li a span,
|
||||
.author-bio .bio-name,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.widget a,
|
||||
.widget_rss ul li a,
|
||||
.related-title a { color: #fff; }
|
||||
|
||||
.site-description,
|
||||
.notebox,
|
||||
#footer-bottom #copyright,
|
||||
#footer-bottom #credit,
|
||||
.sidebar .widget > h3 > span,
|
||||
.page-title span,
|
||||
.blog-single-meta,
|
||||
.blog-single-meta li a,
|
||||
.blog-single-meta li a:hover,
|
||||
.post-nav li a strong,
|
||||
.post-nav li a:hover i,
|
||||
.author-bio .bio-desc,
|
||||
.post-tags span,
|
||||
.widget_archive ul li,
|
||||
.widget_categories ul li,
|
||||
.widget_links ul li,
|
||||
.widget > ul li:before,
|
||||
.widget > ul li a::before,
|
||||
.widget > div > ul li a:before,
|
||||
.widget_calendar caption:before,
|
||||
.widget_rss ul li span.rss-date,
|
||||
.commentlist .comment-body p,
|
||||
.commentlist .comment-meta a,
|
||||
.pinglist .ping-meta,
|
||||
.widget > h3 span { color: rgba(255,255,255,0.5); }
|
||||
|
||||
.sidebar .widget > h3 { border-bottom-color: rgba(255,255,255,0.08); }
|
||||
|
||||
body,
|
||||
.s2 .social-links .social-tooltip,
|
||||
#footer-bottom a,
|
||||
#footer-bottom .social-links a { color: rgba(255,255,255,0.7); }
|
||||
|
||||
#footer-bottom .social-links a:hover { color: rgba(255,255,255,0.8); }
|
||||
|
||||
#footer-bottom .social-links .social-tooltip:hover:after { background: #3f3f4d; }
|
||||
#footer-bottom .social-links .social-tooltip:hover:before { border-color: #3f3f4d transparent; }
|
||||
|
||||
.s2 .social-links li:before { background: rgba(255,255,255,0.08); }
|
||||
.s2 .social-links .social-tooltip:hover:after { color: #141416; background: #fff; }
|
||||
.s2 .social-links .social-tooltip:hover:before { border-color: transparent #fff; }
|
||||
.slick-featured .slick-dots li button { background: rgba(255,255,255,0.15); }
|
||||
|
||||
.blog-card-category a,
|
||||
.blog-card-author img,
|
||||
.blog-single-category a,
|
||||
.blog-single-author img { background: #141416; }
|
||||
.wp-pagenavi a:hover,
|
||||
.wp-pagenavi a:active,
|
||||
.wp-pagenavi span.current { background: #3f3f4d; }
|
||||
|
||||
.blog-card-author img,
|
||||
.blog-single-author img { border-color: #3f3f4d; }
|
||||
.blog-card-author a:focus img,
|
||||
.blog-single-author a:focus img { border-color: #212226; }
|
||||
|
||||
.blog-card-meta,
|
||||
.blog-card-excerpt,
|
||||
.alx-tabs-nav li a,
|
||||
.alx-tab .tab-item-category,
|
||||
.alx-posts .post-item-category,
|
||||
.wp-pagenavi a { color: rgba(255,255,255,0.5); }
|
||||
.wp-pagenavi span { color: rgba(255,255,255,0.3); }
|
||||
.alx-tab .tab-item-category a:hover,
|
||||
.alx-posts .post-item-category a:hover { color: #fff!important; }
|
||||
|
||||
#footer-bottom #back-to-top { color: #fff; border-color: rgba(255,255,255,0.06); }
|
||||
#footer-bottom #back-to-top:hover { color: rgba(255,255,255,0.5); }
|
||||
|
||||
.blog-single:after { background: linear-gradient(0deg, rgba(20,20,22,1) 0%, rgba(33,34,38,1) 100%); }
|
||||
.blog-single-meta li { border-color: rgba(255,255,255,0.06); }
|
||||
|
||||
.blog-card-category a:hover,
|
||||
.blog-single-category a:hover { background: rgba(255,255,255,0.05); }
|
||||
|
||||
.menu-toggle-icon span { background: #fff; }
|
||||
|
||||
.post-nav li i { color: rgba(255,255,255,0.2); }
|
||||
.sidebar .post-nav li a { border-bottom-color: rgba(255,255,255,0.06); }
|
||||
|
||||
.author-bio .bio-avatar:after { background: #fff; color: #141416; }
|
||||
|
||||
.post-tags a:hover { background: rgba(255,255,255,0.06); color: #fff; }
|
||||
.blog-card-comments { color: #212226; text-shadow: none; }
|
||||
.blog-card-comments:hover { color: #3f3f4d; }
|
||||
|
||||
.widget_calendar thead { background: rgba(255,255,255,0.06); box-shadow: none; }
|
||||
.widget_calendar th,
|
||||
.widget_calendar td { border-color: rgba(255,255,255,0.06); }
|
||||
.widget_calendar a:hover { color: rgba(255,255,255,0.5)!important; }
|
||||
|
||||
.comment-tabs li a { background: #212226; color: rgba(255,255,255,0.5); }
|
||||
.comment-tabs li span { background: rgba(255,255,255,0.1); }
|
||||
.comment-tabs li a:hover,
|
||||
.comment-tabs li.active a { background: #212226; color: #fff; border-color: transparent; }
|
||||
|
||||
.commentlist .fn,
|
||||
.pinglist .ping-link { color: #fff; }
|
||||
|
||||
#commentform { background: #212226; }
|
||||
|
||||
.pagination ul li a { background: #212226; }
|
||||
.pagination ul li a:hover { color: rgba(255,255,255,0.7); }
|
||||
|
||||
.pagination ul li a,
|
||||
.featured-item-wrap,
|
||||
.blog-card-wrap,
|
||||
.blog-single,
|
||||
#footer,
|
||||
#commentform,
|
||||
.alx-tabs-nav,
|
||||
.wp-pagenavi a,
|
||||
.wp-pagenavi a:hover,
|
||||
.wp-pagenavi a:active,
|
||||
.wp-pagenavi span.current,
|
||||
.search-expand,
|
||||
.author-bio,
|
||||
.comment-tabs li a,
|
||||
.post-nav { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
|
||||
|
||||
.post-nav { background: #212226; }
|
||||
.post-nav li a span { color: rgba(255,255,255,0.8); }
|
||||
.post-nav li a:hover span { color: #fff; }
|
||||
.post-nav li.next a { border-left-color: rgba(255,255,255,0.06); }
|
||||
.sidebar .post-nav { box-shadow: none; }
|
||||
|
||||
#footer-widgets,
|
||||
#footer-ads { border-bottom-color: rgba(255,255,255,0.06); }
|
||||
|
||||
@media only screen and (max-width: 719px) {
|
||||
.post-nav li.previous { border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
}
|
||||
|
||||
.themeform input[type="search"],
|
||||
.themeform input[type="text"],
|
||||
.themeform input[type="password"],
|
||||
.themeform input[type="email"],
|
||||
.themeform input[type="url"],
|
||||
.themeform input[type="tel"],
|
||||
.themeform input[type="number"],
|
||||
.themeform select,
|
||||
.themeform textarea { background: #141416; border: 1px solid rgba(255,255,255,0.15); }
|
||||
.themeform input[type="search"]:focus,
|
||||
.themeform input[type="text"]:focus,
|
||||
.themeform input[type="password"]:focus,
|
||||
.themeform input[type="email"]:focus,
|
||||
.themeform input[type="url"]:focus,
|
||||
.themeform input[type="tel"]:focus,
|
||||
.themeform input[type="number"]:focus,
|
||||
.themeform select:focus,
|
||||
.themeform textarea:focus { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
|
||||
.themeform label .required { color: #fff; }
|
||||
.themeform input[type="button"],
|
||||
.themeform input[type="reset"],
|
||||
.themeform input[type="submit"],
|
||||
.themeform button[type="button"],
|
||||
.themeform button[type="reset"],
|
||||
.themeform button[type="submit"] { background: #fff; color: #141416; }
|
||||
.themeform input[type="button"]:hover,
|
||||
.themeform input[type="reset"]:hover,
|
||||
.themeform input[type="submit"]:hover,
|
||||
.themeform button[type="button"]:hover,
|
||||
.themeform button[type="reset"]:hover,
|
||||
.themeform button[type="submit"]:hover { background: #fff; }
|
||||
|
||||
.themeform.searchform div input { background: #121214; }
|
||||
|
||||
.entry hr { background: rgba(255,255,255,0.06); }
|
||||
.entry dt { color: #fff; }
|
||||
.entry blockquote,
|
||||
.entry blockquote p { color: rgba(255,255,255,0.5); }
|
||||
.entry blockquote:before { color: rgba(255,255,255,0.3); }
|
||||
.entry pre { border: 1px solid rgba(255,255,255,0.12); }
|
||||
.entry code { background: rgba(255,255,255,0.06); }
|
||||
.entry ins { background: rgba(255,255,255,0.2); }
|
||||
.entry .wp-caption { background: rgba(255,255,255,0.06); }
|
||||
.entry .wp-caption-text { color: rgba(255,255,255,0.5); }
|
||||
.entry table tr.alt { background: rgba(255,255,255,0.06); }
|
||||
.entry table td { color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.06); }
|
||||
.entry table th { border: 1px solid rgba(255,255,255,0.06); }
|
||||
.wp-block-calendar table th { background: rgba(255,255,255,0.14); }
|
||||
|
||||
/* menu styling */
|
||||
.nav-menu.mobile button:focus,
|
||||
.menu-toggle:focus { background: rgba(255,255,255,0.04); }
|
||||
.nav-menu a { color: #fff; }
|
||||
.nav-menu .svg-icon { fill: #fff; }
|
||||
.nav-menu:not(.mobile) .menu ul { background: #fff; color: #fff; }
|
||||
.nav-menu:not(.mobile) .menu ul:after { border-bottom-color: #fff; }
|
||||
.nav-menu:not(.mobile) .menu ul ul:after { border-right-color: #fff; }
|
||||
.nav-menu-dropdown-left .nav-menu:not(.mobile) .menu ul ul:after { border-left-color: #fff; }
|
||||
|
||||
.nav-menu:not(.mobile) a { color: rgba(255,255,255,0.6); }
|
||||
.nav-menu:not(.mobile) a:hover { color: #fff; }
|
||||
.nav-menu:not(.mobile) ul ul a:hover { color: #555; }
|
||||
.nav-menu:not(.mobile) ul ul > li:hover > span { background: rgba(255,255,255,0.1); }
|
||||
.nav-menu:not(.mobile) ul ul a { color: #333; }
|
||||
.nav-menu:not(.mobile) button { color: #666; }
|
||||
.nav-menu:not(.mobile) button.active { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
|
||||
.nav-menu:not(.mobile) button .svg-icon { fill: rgba(255,255,255,0.3); }
|
||||
.nav-menu:not(.mobile) ul ul button { color: #333; }
|
||||
.nav-menu:not(.mobile) ul ul button.active { background: #eee; color: rgba(255,255,255,0.5); }
|
||||
.nav-menu:not(.mobile) ul ul button .svg-icon { fill: rgba(0,0,0,0.5); }
|
||||
|
||||
.nav-menu:not(.mobile) li.current_page_item > span > a,
|
||||
.nav-menu:not(.mobile) li.current-menu-item > span > a,
|
||||
.nav-menu:not(.mobile) li.current-menu-ancestor > span > a,
|
||||
.nav-menu:not(.mobile) li.current-post-parent > span > a { color: #fff; }
|
||||
.nav-menu:not(.mobile) ul ul li.current_page_item > span > a,
|
||||
.nav-menu:not(.mobile) ul ul li.current-menu-item > span > a,
|
||||
.nav-menu:not(.mobile) ul ul li.current-menu-ancestor > span > a,
|
||||
.nav-menu:not(.mobile) ul ul li.current-post-parent > span > a { color: #777; }
|
||||
|
||||
.nav-menu.mobile { background: rgba(0,0,0,0.1); }
|
||||
.nav-menu.mobile button.active .svg-icon { fill: #fff; }
|
||||
.nav-menu.mobile ul ul { background: rgba(0,0,0,0.15); }
|
||||
.nav-menu.mobile ul li .menu-item-wrapper,
|
||||
.nav-menu.mobile ul ul li .menu-item-wrapper { border-bottom: 1px solid rgba(255,255,255,0.07); }
|
||||
.nav-menu.mobile ul li a { color: #fff; }
|
||||
.nav-menu.mobile ul button,
|
||||
.nav-menu.mobile ul ul button { border-left: 1px solid rgba(255,255,255,0.07); }
|
||||
.nav-menu.mobile > div > ul { border-top: 1px solid rgba(255,255,255,0.07); }
|
||||
|
||||
@media only screen and (max-width: 719px) {
|
||||
.toggle-search .svg-icon,
|
||||
.toggle-search.active #svg-close { fill: #fff; }
|
||||
.toggle-search:focus #svg-search,
|
||||
.toggle-search:focus #svg-close { fill: rgba(255,255,255,0.6); }
|
||||
}
|
||||
|
|
@ -220,6 +220,7 @@ if ( ! function_exists( 'shapebox_styles' ) ) {
|
|||
function shapebox_styles() {
|
||||
wp_enqueue_style( 'shapebox-style', get_stylesheet_uri() );
|
||||
wp_enqueue_style( 'shapebox-responsive', get_template_directory_uri().'/responsive.css' );
|
||||
if ( get_theme_mod('dark-theme','off') == 'on' ) { wp_enqueue_style( 'shapebox-dark', get_template_directory_uri().'/dark.css' ); }
|
||||
wp_enqueue_style( 'shapebox-font-awesome', get_template_directory_uri().'/fonts/all.min.css' );
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -702,6 +702,15 @@ Kirki::add_field( 'shapebox_theme', array(
|
|||
'step' => '1',
|
||||
),
|
||||
) );
|
||||
// Styling: Dark
|
||||
Kirki::add_field( 'shapebox_theme', array(
|
||||
'type' => 'switch',
|
||||
'settings' => 'dark-theme',
|
||||
'label' => esc_html__( 'Dark Theme', 'shapebox' ),
|
||||
'description' => esc_html__( 'Use dark instead of light base', 'shapebox' ),
|
||||
'section' => 'styling',
|
||||
'default' => 'off',
|
||||
) );
|
||||
// Styling: Primary Color
|
||||
Kirki::add_field( 'shapebox_theme', array(
|
||||
'type' => 'color',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
msgid ""
|
||||
msgstr ""
|
||||
"Project-Id-Version: Shapebox\n"
|
||||
"POT-Creation-Date: 2022-03-31 16:53+0200\n"
|
||||
"POT-Creation-Date: 2022-04-04 15:34+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:684
|
||||
#: functions.php:685
|
||||
msgid "Alx Extensions"
|
||||
msgstr ""
|
||||
|
||||
#: functions.php:688
|
||||
#: functions.php:689
|
||||
msgid "Meta Box"
|
||||
msgstr ""
|
||||
|
||||
#: functions.php:692
|
||||
#: functions.php:693
|
||||
msgid "Regenerate Thumbnails"
|
||||
msgstr ""
|
||||
|
||||
#: functions.php:696
|
||||
#: functions.php:697
|
||||
msgid "WP-PageNavi"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -768,18 +768,26 @@ msgid ""
|
|||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:709
|
||||
msgid "Dark Theme"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:710
|
||||
msgid "Use dark instead of light base"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:718
|
||||
msgid "Primary Color"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:717
|
||||
#: functions/theme-options.php:726
|
||||
msgid "Gradient Left"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:725
|
||||
#: functions/theme-options.php:734
|
||||
msgid "Gradient Right"
|
||||
msgstr ""
|
||||
|
||||
#: functions/theme-options.php:733
|
||||
#: functions/theme-options.php:742
|
||||
msgid "Background Color"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ Sidebar images
|
|||
== Changelog ==
|
||||
|
||||
= 1.0.5 - 2022-04-04 =
|
||||
* Added dark theme styling option
|
||||
* Fixed position of the play icon for featured video posts
|
||||
|
||||
= 1.0.4 - 2022-03-31 =
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
.blog-single-category a { font-size: 13px; }
|
||||
|
||||
.featured-title,
|
||||
.blog-single-title { font-size: 38px; }
|
||||
.blog-single-title,
|
||||
.blog-single-format h1 { font-size: 38px; }
|
||||
.featured-item,
|
||||
.blog-single-inner { height: 360px; }
|
||||
|
||||
|
|
@ -84,7 +85,7 @@
|
|||
#header,
|
||||
#header .pad { padding: 0; }
|
||||
#header { border-radius: 20px 20px 0 0; }
|
||||
.site-title { padding: 10px 0; margin: 0; width: 100%; float: none; line-height: 50px; border-bottom: 1px solid #eee; }
|
||||
.site-title { padding: 10px 0; margin: 0; width: 100%; float: none; line-height: 50px; }
|
||||
.site-title a { text-align: center; }
|
||||
|
||||
.toggle-search { background: none; border: 0; width: auto; position: absolute; left: 10px; top: -44px; z-index: 103; color: #333; margin: 0; padding: 8px 12px; }
|
||||
|
|
@ -150,7 +151,7 @@
|
|||
.sharrre-footer .sharrre .share span { display: none; }
|
||||
|
||||
.post-nav li { width: 100%; -webkit-box-shadow: none!important; box-shadow: none!important; }
|
||||
.post-nav li a { min-height: 0; }
|
||||
.post-nav li a { min-height: 0; border-left: 0!important; }
|
||||
.post-nav li.previous { border-top: 1px solid #eee; }
|
||||
|
||||
.related-posts li { width: 50%; }
|
||||
|
|
|
|||
|
|
@ -668,7 +668,7 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
|
|||
.s2 .social-links li:before { content:""; height: 1px; background: rgba(0,0,0,0.08); position: absolute; left: 30px; right: 30px; top: 0; }
|
||||
.s2 .social-links li:first-child:before { display: none; }
|
||||
.s2 .social-links .social-tooltip { display: block; font-size: 22px; border-radius: 10px; padding: 22px 10px; margin: 0 20px; color: rgba(0,0,0,0.7); }
|
||||
.s2 .social-links .social-tooltip:hover { background: rgba(255,255,255,0.05); color: rgba(0,0,0,0.85); text-decoration: none; }
|
||||
.s2 .social-links .social-tooltip:hover { color: rgba(0,0,0,0.85); text-decoration: none; }
|
||||
.s2 .social-links .social-tooltip:active { }
|
||||
.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; }
|
||||
|
|
@ -685,7 +685,6 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
|
|||
}
|
||||
|
||||
#profile { background: linear-gradient(90deg, #c14bff 0%, #6c5dd3 100%); position: relative; border-radius: 20px; overflow: hidden; margin: 30px 30px 0; text-align: center; transition: all 0.2s ease; }
|
||||
#profile:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid hsla(0,0%,100%,.3); transition: color .2s,background-color .2s,border-color .2s; pointer-events: none; z-index: 1; }
|
||||
#profile a { color: #fff; }
|
||||
#profile a:hover { color: rgba(255,255,255,0.75); }
|
||||
#profile-inner { position: relative; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
