edited bubbles baackground and styles. addes file for css vars
This commit is contained in:
parent
f9ee128c15
commit
4748b3b4ac
|
@ -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
10
footer.php
10
footer.php
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
/* Css root vars
|
||||
--------------------------------------------- */
|
||||
@import "typography/css-root-vars";
|
||||
|
||||
/* Typography
|
||||
--------------------------------------------- */
|
||||
@import "typography/typography";
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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,
|
||||
|
|
61
style.css
61
style.css
|
@ -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
Loading…
Reference in New Issue