xarxaprod
/
xarxaprod-wp-theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edited bubbles baackground and styles. addes file for css vars

This commit is contained in:
jorge-vitrubio 2024-02-02 12:59:57 +01:00
parent f9ee128c15
commit 4748b3b4ac
12 changed files with 191 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
adminstyles.css
View File

@ -250,6 +250,9 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
# Base # Base
--------------------------------------------------------------*/ --------------------------------------------------------------*/
/* Css root vars
--------------------------------------------- */
/* Typography /* Typography
--------------------------------------------- */ --------------------------------------------- */
@ -529,6 +532,13 @@ Add your custom styles in this file so it is easier to update the theme.
box-sizing: border-box; box-sizing: border-box;
} }
.edit-post-visual-editor__content-area :root {
--bubble-color-01: #ff5a69;
--bubble-color-02: #ffcb1f;
--bubble-color-03: #00d1ec;
--bubble-color-04: #00f274;
}
.edit-post-visual-editor__content-area body, .edit-post-visual-editor__content-area body,
.edit-post-visual-editor__content-area button, .edit-post-visual-editor__content-area button,
.edit-post-visual-editor__content-area input, .edit-post-visual-editor__content-area input,
@ -861,7 +871,7 @@ Add your custom styles in this file so it is easier to update the theme.
position: relative; position: relative;
} }
.edit-post-visual-editor__content-area .liquid { .edit-post-visual-editor__content-area .liquid-bubbles {
overflow: hidden; overflow: hidden;
float: left; float: left;
position: fixed; position: fixed;
@ -872,7 +882,7 @@ Add your custom styles in this file so it is easier to update the theme.
height: 100vh; height: 100vh;
} }
.edit-post-visual-editor__content-area .bubble { .edit-post-visual-editor__content-area .bubbles {
--size: 40vw; --size: 40vw;
--position: -10vw; --position: -10vw;
position: absolute; position: absolute;
@ -883,54 +893,34 @@ Add your custom styles in this file so it is easier to update the theme.
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent); background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
} }
.edit-post-visual-editor__content-area .bubble.top { .edit-post-visual-editor__content-area .bubbles.bubble-01 {
top: var(--position); top: var(--position);
}
.edit-post-visual-editor__content-area .bubble.bottom {
bottom: var(--position);
}
.edit-post-visual-editor__content-area .bubble.left {
left: var(--position); left: var(--position);
} --bgcolor: var(--bubble-color-01);
.edit-post-visual-editor__content-area .bubble.right {
right: var(--position);
}
.edit-post-visual-editor__content-area .bubble.top.left {
--bgangle: to bottom right; --bgangle: to bottom right;
} }
.edit-post-visual-editor__content-area .bubble.top.right { .edit-post-visual-editor__content-area .bubbles.bubble-02 {
top: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-02);
--bgangle: to bottom left; --bgangle: to bottom left;
} }
.edit-post-visual-editor__content-area .bubble.bottom.left { .edit-post-visual-editor__content-area .bubbles.bubble-03 {
bottom: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-03);
--bgangle: to top right; --bgangle: to top right;
} }
.edit-post-visual-editor__content-area .bubble.bottom.right { .edit-post-visual-editor__content-area .bubbles.bubble-04 {
bottom: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-04);
--bgangle: to top left; --bgangle: to top left;
} }
.edit-post-visual-editor__content-area .bubble.red {
--bgcolor: rgb(255, 0, 0);
}
.edit-post-visual-editor__content-area .bubble.yellow {
--bgcolor: rgb(255, 255, 0);
}
.edit-post-visual-editor__content-area .bubble.blue {
--bgcolor: rgb(0, 0, 255);
}
.edit-post-visual-editor__content-area .bubble.green {
--bgcolor: rgb(0, 255, 0);
}
.edit-post-visual-editor__content-area hr { .edit-post-visual-editor__content-area hr {
background-color: #000; background-color: #000;
border: 0; border: 0;

3
adminstyles.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/css/adminstyles.css
View File

File diff suppressed because one or more lines are too long

10
footer.php
View File

@ -30,11 +30,11 @@
</div><!-- #page --> </div><!-- #page -->
<?php wp_footer(); ?> <?php wp_footer(); ?>
<div class="liquid"> <div class="liquid-bubbles">
<div class="bubble red top left"></div> <div class="bubbles bubble-01"></div>
<div class="bubble yellow top right"></div> <div class="bubbles bubble-02"></div>
<div class="bubble blue bottom left"></div> <div class="bubbles bubble-03"></div>
<div class="bubble green bottom right"></div> <div class="bubbles bubble-04"></div>
</div> </div>
</body> </body>
</html> </html>

71
inc/customizer.php
View File

@ -52,6 +52,77 @@ function xarxaprod_customize_partial_blogdescription() {
bloginfo( 'description' ); bloginfo( 'description' );
} }
/**
* https://diveinwp.com/add-wordpress-customizer-color-picker-palette/
*/
function fons_customizer_add_colorPicker( $wp_customize){
// Add New Section: Fons Colors
$wp_customize->add_section( 'fons_color_section', array(
'title' => 'Fons Colors',
'description' => 'Set Colors For Background',
'priority' => '40'
));
// Add Settings
$wp_customize->add_setting( 'fons_bubble01_color', array(
'default' => 'var(--bubble-color-01)',
));
$wp_customize->add_setting( 'fons_bubble02_color', array(
'default' => 'var(--bubble-color-02)',
));
$wp_customize->add_setting( 'fons_bubble03_color', array(
'default' => 'var(--bubble-color-03)',
));
$wp_customize->add_setting( 'fons_bubble04_color', array(
'default' => 'var(--bubble-color-04)',
));
// Add Controls
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble01_color', array(
'label' => 'Color 01',
'section' => 'fons_color_section',
'settings' => 'fons_bubble01_color'
)));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble02_color', array(
'label' => 'Color 02',
'section' => 'fons_color_section',
'settings' => 'fons_bubble02_color'
)));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble03_color', array(
'label' => 'Color 03',
'section' => 'fons_color_section',
'settings' => 'fons_bubble03_color'
)));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble04_color', array(
'label' => 'Color 04',
'section' => 'fons_color_section',
'settings' => 'fons_bubble04_color'
)));
}
add_action( 'customize_register', 'fons_customizer_add_colorPicker' );
/** /**
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously. * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
*/ */

19
sass/abstracts/variables/_colors.scss
View File

@ -1,12 +1,12 @@
$color__xxp_black: #000000; $color__xxp-black: #000000;
$color__xxp_white: #ffffff; $color__xxp-white: #ffffff;
$color__xxp_salmon: #ff866f; $color__xxp-salmon: #ff866f;
$color__xxp_yellow: #ffcb1f; $color__xxp-yellow: #ffcb1f;
$color__xxp_pink: #ff6bc3; $color__xxp-pink: #ff6bc3;
$color__xxp_violet: #651aff; $color__xxp-violet: #651aff;
$color__xxp_cyan: #00d1ec; $color__xxp-cyan: #00d1ec;
$color__xxp_green: #00f274; $color__xxp-green: #00f274;
$color__xxp_red: #ff5a69; $color__xxp-red: #ff5a69;
$color__white: #fff; $color__white: #fff;
$color__white-dark: #fdfdfd; $color__white-dark: #fdfdfd;
@ -48,4 +48,3 @@ $color__border-button-hover: #111;
$color__border-button-focus: #222; $color__border-button-focus: #222;
$color__border-input: $color__black; $color__border-input: $color__black;
$color__border-abbr: $color__grey-dark; $color__border-abbr: $color__grey-dark;

4
sass/base/_base.scss
View File

@ -1,3 +1,7 @@
/* Css root vars
--------------------------------------------- */
@import "typography/css-root-vars";
/* Typography /* Typography
--------------------------------------------- */ --------------------------------------------- */
@import "typography/typography"; @import "typography/typography";

45
sass/base/elements/_body.scss
View File

@ -6,7 +6,7 @@ body {
//background-repeat: no-repeat; //background-repeat: no-repeat;
position: relative; position: relative;
} }
.liquid { .liquid-bubbles {
overflow: hidden; overflow: hidden;
float: left; float: left;
position: fixed; position: fixed;
@ -17,7 +17,7 @@ body {
height: 100vh; height: 100vh;
} }
.bubble { .bubbles {
--size: 40vw; --size: 40vw;
--position: -10vw; --position: -10vw;
position:absolute; position:absolute;
@ -25,42 +25,29 @@ body {
height: var(--size); height: var(--size);
border-radius: 50%; border-radius: 50%;
filter: blur(10rem); filter: blur(10rem);
&.top { &.bubble-01{
top: var(--position); top: var(--position);
}
&.bottom {
bottom: var(--position);
}
&.left {
left: var(--position); left: var(--position);
} --bgcolor: var(--bubble-color-01);
&.right {
right: var(--position);
}
&.top.left{
--bgangle: to bottom right; --bgangle: to bottom right;
} }
&.top.right{ &.bubble-02{
top: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-02);
--bgangle: to bottom left; --bgangle: to bottom left;
} }
&.bottom.left{ &.bubble-03{
bottom: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-03);
--bgangle: to top right; --bgangle: to top right;
} }
&.bottom.right{ &.bubble-04{
bottom: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-04);
--bgangle: to top left; --bgangle: to top left;
} }
&.red{
--bgcolor: rgb(255,0,0);
}
&.yellow{
--bgcolor: rgb(255,255,0);
}
&.blue{
--bgcolor: rgb(0,0,255);
}
&.green{
--bgcolor: rgb(0,255,0);
}
background: linear-gradient(var(--bgangle),var(--bgcolor), transparent); background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
} }

14
sass/base/typography/_css-root-vars.scss Normal file
View File

@ -0,0 +1,14 @@
:root {
// check also sass/abstracts/variables/_colors.scss
//$color__xxp-salmon: #ff866f;
//$color__xxp-yellow: #ffcb1f;
//$color__xxp-pink: #ff6bc3;
//$color__xxp-violet: #651aff;
//$color__xxp-cyan: #00d1ec;
//$color__xxp-green: #00f274;
//$color__xxp-red: #ff5a69;
--bubble-color-01: #ff5a69; //$color__xxp-red;
--bubble-color-02: #ffcb1f; //$color__xxp-yellow;
--bubble-color-03: #00d1ec; //$color__xxp-cyan;
--bubble-color-04: #00f274; //$color__xxp-green;
}

16
sass/base/typography/_typography.scss
View File

@ -1,3 +1,19 @@
//:root {
// //$color__xxp-black: #000000;
// //$color__xxp-white: #ffffff;
// //$color__xxp-salmon: #ff866f;
// //$color__xxp-yellow: #ffcb1f;
// //$color__xxp-pink: #ff6bc3;
// //$color__xxp-violet: #651aff;
// //$color__xxp-cyan: #00d1ec;
// //$color__xxp-green: #00f274;
// //$color__xxp-red: #ff5a69;
// --bubble-color-01: #ff5a69; //$color__xxp-red;
// --bubble-color-02: #ffcb1f; //$color__xxp-yellow;
// --bubble-color-03: #00d1ec; //$color__xxp-cyan;
// --bubble-color-04: #00f274; //$color__xxp-green;
//}
//
body, body,
button, button,
input, input,

61
style.css
View File

@ -395,6 +395,15 @@ html {
# Base # Base
--------------------------------------------------------------*/ --------------------------------------------------------------*/
/* Css root vars
--------------------------------------------- */
:root {
--bubble-color-01: #ff5a69;
--bubble-color-02: #ffcb1f;
--bubble-color-03: #00d1ec;
--bubble-color-04: #00f274;
}
/* Typography /* Typography
--------------------------------------------- */ --------------------------------------------- */
body, body,
@ -727,7 +736,7 @@ body {
position: relative; position: relative;
} }
.liquid { .liquid-bubbles {
overflow: hidden; overflow: hidden;
float: left; float: left;
position: fixed; position: fixed;
@ -738,7 +747,7 @@ body {
height: 100vh; height: 100vh;
} }
.bubble { .bubbles {
--size: 40vw; --size: 40vw;
--position: -10vw; --position: -10vw;
position: absolute; position: absolute;
@ -749,54 +758,34 @@ body {
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent); background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
} }
.bubble.top { .bubbles.bubble-01 {
top: var(--position); top: var(--position);
}
.bubble.bottom {
bottom: var(--position);
}
.bubble.left {
left: var(--position); left: var(--position);
} --bgcolor: var(--bubble-color-01);
.bubble.right {
right: var(--position);
}
.bubble.top.left {
--bgangle: to bottom right; --bgangle: to bottom right;
} }
.bubble.top.right { .bubbles.bubble-02 {
top: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-02);
--bgangle: to bottom left; --bgangle: to bottom left;
} }
.bubble.bottom.left { .bubbles.bubble-03 {
bottom: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-03);
--bgangle: to top right; --bgangle: to top right;
} }
.bubble.bottom.right { .bubbles.bubble-04 {
bottom: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-04);
--bgangle: to top left; --bgangle: to top left;
} }
.bubble.red {
--bgcolor: rgb(255, 0, 0);
}
.bubble.yellow {
--bgcolor: rgb(255, 255, 0);
}
.bubble.blue {
--bgcolor: rgb(0, 0, 255);
}
.bubble.green {
--bgcolor: rgb(0, 255, 0);
}
hr { hr {
background-color: #000; background-color: #000;
border: 0; border: 0;

3
style.css.map
View File

File diff suppressed because one or more lines are too long