edited bubbles baackground and styles. addes file for css vars

This commit is contained in:
jorge 2024-02-02 12:59:57 +01:00
parent f9ee128c15
commit 4748b3b4ac
12 changed files with 191 additions and 119 deletions

View File

@ -250,6 +250,9 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
# Base
--------------------------------------------------------------*/
/* Css root vars
--------------------------------------------- */
/* Typography
--------------------------------------------- */
@ -529,6 +532,13 @@ Add your custom styles in this file so it is easier to update the theme.
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 button,
.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;
}
.edit-post-visual-editor__content-area .liquid {
.edit-post-visual-editor__content-area .liquid-bubbles {
overflow: hidden;
float: left;
position: fixed;
@ -872,7 +882,7 @@ Add your custom styles in this file so it is easier to update the theme.
height: 100vh;
}
.edit-post-visual-editor__content-area .bubble {
.edit-post-visual-editor__content-area .bubbles {
--size: 40vw;
--position: -10vw;
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);
}
.edit-post-visual-editor__content-area .bubble.top {
.edit-post-visual-editor__content-area .bubbles.bubble-01 {
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);
}
.edit-post-visual-editor__content-area .bubble.right {
right: var(--position);
}
.edit-post-visual-editor__content-area .bubble.top.left {
--bgcolor: var(--bubble-color-01);
--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;
}
.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;
}
.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;
}
.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 {
background-color: #000;
border: 0;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -52,6 +52,77 @@ function xarxaprod_customize_partial_blogdescription() {
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.
*/

View File

@ -1,12 +1,12 @@
$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;
$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;
$color__white: #fff;
$color__white-dark: #fdfdfd;
@ -48,4 +48,3 @@ $color__border-button-hover: #111;
$color__border-button-focus: #222;
$color__border-input: $color__black;
$color__border-abbr: $color__grey-dark;

View File

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

View File

@ -6,7 +6,7 @@ body {
//background-repeat: no-repeat;
position: relative;
}
.liquid {
.liquid-bubbles {
overflow: hidden;
float: left;
position: fixed;
@ -17,7 +17,7 @@ body {
height: 100vh;
}
.bubble {
.bubbles {
--size: 40vw;
--position: -10vw;
position:absolute;
@ -25,42 +25,29 @@ body {
height: var(--size);
border-radius: 50%;
filter: blur(10rem);
&.top {
&.bubble-01{
top: var(--position);
}
&.bottom {
bottom: var(--position);
}
&.left {
left: var(--position);
}
&.right {
right: var(--position);
}
&.top.left{
--bgcolor: var(--bubble-color-01);
--bgangle: to bottom right;
}
&.top.right{
&.bubble-02{
top: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-02);
--bgangle: to bottom left;
}
&.bottom.left{
&.bubble-03{
bottom: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-03);
--bgangle: to top right;
}
&.bottom.right{
&.bubble-04{
bottom: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-04);
--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);
}

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;
}

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,
button,
input,

View File

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

File diff suppressed because one or more lines are too long