added corporate colors and defined bubble colors
This commit is contained in:
parent
7e88861955
commit
db6dc06d56
18
README.md
18
README.md
|
|
@ -30,15 +30,15 @@ A WordPress theme for the Xarxaprod.cat
|
|||
|
||||
### Colors
|
||||
The colors used in the design are:
|
||||
- black: #000000
|
||||
- white: #ffffff
|
||||
- salmon: #ff866f
|
||||
- yellow: #ffcb1f
|
||||
- pink: #ff6bc3
|
||||
- violet: #651aff
|
||||
- cyan: #00d1ec
|
||||
- green: #00f274
|
||||
- red: #ff5a69
|
||||
- black: `#000000` `rgb(0,0,0)`
|
||||
- white: `#ffffff` `rgb(255,255,255)`
|
||||
- red: `#f27173` `rgb(242,113,115)`
|
||||
- yellow: `#f6cc4c` `rgb(246,204,076)`
|
||||
- green: `#84c779` `rgb(132,199,121)`
|
||||
- cyan: `#61cae4` `rgb(97,202,228)`
|
||||
- lila: `#de7fb4` `rgb(222,127,180)`
|
||||
- pink: `#f58b77` `rgb(245,139,119)`
|
||||
- violet: `#5859a7` `rgb(88,89,167)`
|
||||
|
||||
### Fonts
|
||||
|
||||
|
|
|
|||
382
adminstyles.css
382
adminstyles.css
|
|
@ -970,154 +970,165 @@ Add your custom styles in this file so it is easier to update the theme.
|
|||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper :root {
|
||||
--bubble-color-01: #ff5a69;
|
||||
--bubble-color-02: #ffcb1f;
|
||||
--bubble-color-03: #00d1ec;
|
||||
--bubble-color-04: #00f274;
|
||||
--color-xxp-black: #000;
|
||||
--color-xxp-white: #fff;
|
||||
--color-xxp-red: #f27173;
|
||||
--color-xxp-yellow: #f6cc4c;
|
||||
--color-xxp-green: #84c779;
|
||||
--color-xxp-cyan: #61cae4;
|
||||
--color-xxp-lila: #de7fb4;
|
||||
--color-xxp-pink: #f58b77;
|
||||
--color-xxp-violet: #5859a7;
|
||||
--bubble-color-01: var(--color-xxp-red);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-cyan);
|
||||
--bubble-color-04: var(--color-xxp-green);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .home {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #ff79a8;
|
||||
--bubble-color-03: #ff9221;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
@media screen {
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-617 {
|
||||
--bubble-color-01: #4a30f4;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #f6ca43;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .home {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-red);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-626,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2936,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2937 {
|
||||
--bubble-color-01: #ffcb1f;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #ff79a8;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-617 {
|
||||
--bubble-color-01: var(--color-xxp-violet);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-634 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-626,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2936,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2937 {
|
||||
--bubble-color-01: var(--color-xxp-yellow);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-lila);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-659 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #6cd3eb;
|
||||
--bubble-color-03: #f6ca43;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-634 {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-associats-search,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-associat {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #68ed81;
|
||||
--bubble-color-03: #ff79a8;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-659 {
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-cyan);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat {
|
||||
--bubble-color-01: #ff9221;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #ff866f;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-associats-search,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-associat {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-green);
|
||||
--bubble-color-03: var(--color-xxp-pink);
|
||||
--bubble-color-04: var(--color-xxp-pink);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-arxiu-general,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-643 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #f61818;
|
||||
--bubble-color-03: #f61818;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat {
|
||||
--bubble-color-01: var(--color-xxp-pink);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-pink);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-convos-search,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-convo {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #ff5a69;
|
||||
--bubble-color-03: #00f274;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-arxiu-general,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-643 {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-red);
|
||||
--bubble-color-03: var(--color-xxp-red);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-convo {
|
||||
--bubble-color-01: #e572ba;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #e572ba;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-convos-search,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-convo {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-pink);
|
||||
--bubble-color-03: var(--color-xxp-green);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-agenda-search {
|
||||
--bubble-color-01: #e158ae;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #ff5a69;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-convo {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-lila);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .category-activitats {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #00f274;
|
||||
--bubble-color-03: #6cd3eb;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-agenda-search {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-red);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-28,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-faqs-page {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #6cd3eb;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .category-activitats {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-green);
|
||||
--bubble-color-03: var(--color-xxp-cyan);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-ajut-search,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-ajut,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-ajut {
|
||||
--bubble-color-01: #6cd3eb;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #4a30f4;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-28,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-faqs-page {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-cyan);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1673 {
|
||||
--bubble-color-01: #f6ca43;
|
||||
--bubble-color-02: #ff9221;
|
||||
--bubble-color-03: #00f274;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-ajut-search,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-ajut,
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-ajut {
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-violet);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2366 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #4a30f4;
|
||||
--bubble-color-03: #ff5a69;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1673 {
|
||||
--bubble-color-01: var(--color-xxp-yellow);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-green);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2364 {
|
||||
--bubble-color-01: #00f274;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #4a30f4;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2366 {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-violet);
|
||||
--bubble-color-03: var(--color-xxp-red);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2365 {
|
||||
--bubble-color-01: #e572ba;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #e572ba;
|
||||
--bubble-color-04: #f6ca43;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2364 {
|
||||
--bubble-color-01: var(--color-xxp-green);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-violet);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1760 {
|
||||
--bubble-color-01: #6cd3eb;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #6cd3eb;
|
||||
}
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2365 {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-lila);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .liquid-bubbles {
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1760 {
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-lila);
|
||||
--bubble-color-04: var(--color-xxp-cyan);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .liquid-bubbles {
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: fixed;
|
||||
|
|
@ -1126,9 +1137,82 @@ Add your custom styles in this file so it is easier to update the theme.
|
|||
z-index: -1000;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
|
||||
position: absolute;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 20%;
|
||||
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-01 {
|
||||
top: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-01);
|
||||
--bgangle: 135deg;
|
||||
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-02 {
|
||||
top: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-02);
|
||||
--bgangle: 225deg;
|
||||
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-03 {
|
||||
bottom: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-03);
|
||||
--bgangle: 45deg;
|
||||
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-04 {
|
||||
bottom: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-04);
|
||||
--bgangle: 325deg;
|
||||
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubble-move {
|
||||
@media screen and (max-width: 48em) {
|
||||
|
||||
@keyframes bubble-move {
|
||||
|
||||
from {
|
||||
width: 50vw;
|
||||
height: 70vh;
|
||||
filter: blur(3rem);
|
||||
|
||||
/* transform: rotate(0);*/
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
filter: blur(8rem);
|
||||
|
||||
/* transform: rotate(5deg);*/
|
||||
}
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
|
||||
--size: 50vw;
|
||||
--position: 0;
|
||||
height: 70vh;
|
||||
filter: blur(3rem);
|
||||
border-radius: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
@keyframes bubble-move {
|
||||
|
||||
from {
|
||||
width: 40vw;
|
||||
|
|
@ -1145,49 +1229,13 @@ Add your custom styles in this file so it is easier to update the theme.
|
|||
|
||||
/* transform: rotate(5deg);*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
|
||||
--size: 40vw;
|
||||
--position: -5vw;
|
||||
filter: blur(20rem);
|
||||
position: absolute;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 20%;
|
||||
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-01 {
|
||||
top: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-01);
|
||||
--bgangle: 135deg;
|
||||
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-02 {
|
||||
top: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-02);
|
||||
--bgangle: 225deg;
|
||||
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-03 {
|
||||
bottom: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-03);
|
||||
--bgangle: 45deg;
|
||||
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-04 {
|
||||
bottom: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-04);
|
||||
--bgangle: 325deg;
|
||||
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-post-visual-editor__content-area .editor-styles-wrapper hr {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,21 +1,21 @@
|
|||
$color__xxp-black: #000000;
|
||||
$color__xxp-black-rgb: rgb(0,0,0);
|
||||
$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-lila: #ff79a8;
|
||||
$color__xxp-orange: #ff9221;
|
||||
$color__xxp-blue: #4a30f4;
|
||||
$color__xxp-yellow-2: #f6ca43;
|
||||
$color__xxp-green-2: #68ed81;
|
||||
$color__xxp-pink: #e572ba;
|
||||
$color__xxp-red-2: #f61818;
|
||||
$color__xxp-cyan: #6cd3eb;
|
||||
$color__xxp-lila-2: #e158ae;
|
||||
$color__xxp-white-rgb: rgb(255,255,255);
|
||||
$color__xxp-red: #f27173;
|
||||
$color__xxp-red-rgb: rgb(242,113,115);
|
||||
$color__xxp-yellow: #f6cc4c;
|
||||
$color__xxp-yellow-rgb: rgb(246,204,076);
|
||||
$color__xxp-green: #84c779;
|
||||
$color__xxp-green-rgb: rgb(132,199,121);
|
||||
$color__xxp-cyan: #61cae4;
|
||||
$color__xxp-cyan-rgb: rgb(97,202,228);
|
||||
$color__xxp-lila: #de7fb4;
|
||||
$color__xxp-lila-rgb: rgb(222,127,180);
|
||||
$color__xxp-pink: #f58b77;
|
||||
$color__xxp-pink-rgb: rgb(245,139,119);
|
||||
$color__xxp-violet: #5859a7;
|
||||
$color__xxp-violet-rgb: rgb(88,89,167);
|
||||
|
||||
$color__white: #fff;
|
||||
$color__white-dark: #fdfdfd;
|
||||
|
|
|
|||
|
|
@ -1,163 +1,172 @@
|
|||
body {
|
||||
background: $color__background-body; // Fallback for when there is no custom background color defined.
|
||||
//background-image: url(./assets/img/background-colors-02.jpg);
|
||||
//background-size: cover;
|
||||
//background-position: center center;
|
||||
//background-repeat: no-repeat;
|
||||
//Fallback for when there is no custom background color defined.
|
||||
background: $color__background-body;
|
||||
position: relative;
|
||||
&.admin-bar { //if else breaks the WordPress inline styles when front end editing
|
||||
&.admin-bar {
|
||||
//if else breaks the WordPress inline styles when front end editing
|
||||
position: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
:root{
|
||||
// check colors at sass/abstracts/variables/_colors.scss
|
||||
--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;
|
||||
}
|
||||
//bubble color definition
|
||||
.home {
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #ff79a8; //$color__xxp-lila;
|
||||
--bubble-color-03: #ff9221; //$color__xxp-orange;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-id-617 //que es xarxaprod
|
||||
{
|
||||
--bubble-color-01: #4a30f4; //$color__xxp-blue;
|
||||
--bubble-color-02: #ffffff;
|
||||
--bubble-color-03: #ffffff;
|
||||
--bubble-color-04: #f6ca43; //$color__xxp-yellow-2;
|
||||
}
|
||||
.page-id-626, //qui som junta
|
||||
.page-id-2936, //comisions
|
||||
.page-id-2937 //ofi tecnica
|
||||
{
|
||||
--bubble-color-01: #ffcb1f;
|
||||
--bubble-color-02: #ffffff;
|
||||
--bubble-color-03: #ffffff;
|
||||
--bubble-color-04: #ff79a8;
|
||||
}
|
||||
.page-id-634 //que oferim
|
||||
{
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-id-659 //premsa
|
||||
{
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #6cd3eb;
|
||||
--bubble-color-03: #f6ca43;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-template-associats-search,
|
||||
.post-type-archive-xarxaprod-associat
|
||||
{
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #68ed81;
|
||||
--bubble-color-03: #ff79a8;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.single-xarxaprod-associat {
|
||||
--bubble-color-01: #ff9221;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #ff866f;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
//check colors at sass/abstracts/variables/_colors.scss
|
||||
--color-xxp-black: #000000;
|
||||
--color-xxp-white: #ffffff;
|
||||
--color-xxp-red: #f27173;
|
||||
--color-xxp-yellow: #f6cc4c;
|
||||
--color-xxp-green: #84c779;
|
||||
--color-xxp-cyan: #61cae4;
|
||||
--color-xxp-lila: #de7fb4;
|
||||
--color-xxp-pink: #f58b77;
|
||||
--color-xxp-violet: #5859a7;
|
||||
|
||||
.page-template-arxiu-general,
|
||||
.page-id-643 //arxiu-convos vell
|
||||
{
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #f61818;
|
||||
--bubble-color-03: #f61818;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-template-convos-search,
|
||||
.post-type-archive-xarxaprod-convo
|
||||
{
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #ff5a69;
|
||||
--bubble-color-03: #00f274;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.single-xarxaprod-convo {
|
||||
--bubble-color-01: #e572ba;
|
||||
--bubble-color-02: #ffffff;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #e572ba;
|
||||
}
|
||||
.page-template-agenda-search {
|
||||
--bubble-color-01: #e158ae;
|
||||
--bubble-color-02: #ffffff;
|
||||
--bubble-color-03: #ffffff;
|
||||
--bubble-color-04: #ff5a69;
|
||||
//default bubble color definition
|
||||
--bubble-color-01: var(--color-xxp-red);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-cyan);
|
||||
--bubble-color-04: var(--color-xxp-green);
|
||||
}
|
||||
@media screen {
|
||||
.home {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-red);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.page-id-617 //que es xarxaprod
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-violet);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
.page-id-626, //qui som junta
|
||||
.page-id-2936, //comisions
|
||||
.page-id-2937 //ofi tecnica
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-yellow);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-lila);
|
||||
}
|
||||
.page-id-634 //que oferim
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.page-id-659 //premsa
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-cyan);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.page-template-associats-search,
|
||||
.post-type-archive-xarxaprod-associat
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-green);
|
||||
--bubble-color-03: var(--color-xxp-pink);
|
||||
--bubble-color-04: var(--color-xxp-pink);
|
||||
}
|
||||
.single-xarxaprod-associat {
|
||||
--bubble-color-01: var(--color-xxp-pink);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-pink);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.category-activitats {
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #00f274;
|
||||
--bubble-color-03: #6cd3eb;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-id-28, //espai assesorament
|
||||
.page-template-faqs-page
|
||||
{
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #6cd3eb;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-template-ajut-search,
|
||||
.post-type-archive-xarxaprod-ajut,
|
||||
.single-xarxaprod-ajut
|
||||
//.custom-post-type-ajuts
|
||||
{
|
||||
--bubble-color-01: #6cd3eb;
|
||||
--bubble-color-02: #ffffff;
|
||||
--bubble-color-03: #ffffff;
|
||||
--bubble-color-04: #4a30f4;
|
||||
}
|
||||
.page-id-1673 //XarxaREC
|
||||
{
|
||||
--bubble-color-01: #f6ca43;
|
||||
--bubble-color-02: #ff9221;
|
||||
--bubble-color-03: #00f274;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-id-2366 //Firas i mercats
|
||||
{
|
||||
--bubble-color-01: #ffffff;
|
||||
--bubble-color-02: #4a30f4;
|
||||
--bubble-color-03: #ff5a69;
|
||||
--bubble-color-04: #ffffff;
|
||||
}
|
||||
.page-id-2364 //Sostenibilitat
|
||||
{
|
||||
--bubble-color-01: #00f274;
|
||||
--bubble-color-02: #ffffff;
|
||||
--bubble-color-03: #ffffff;
|
||||
--bubble-color-04: #4a30f4;
|
||||
}
|
||||
.page-id-2365 //projecte educatiu
|
||||
{
|
||||
--bubble-color-01: #e572ba;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #e572ba;
|
||||
--bubble-color-04: #f6ca43;
|
||||
}
|
||||
.page-id-1760 //Mentoratge
|
||||
{
|
||||
--bubble-color-01: #6cd3eb;
|
||||
--bubble-color-02: #ffffff;
|
||||
--bubble-color-03: #ffffff;
|
||||
--bubble-color-04: #6cd3eb;
|
||||
}
|
||||
.liquid-bubbles {
|
||||
.page-template-arxiu-general,
|
||||
.page-id-643 //arxiu-convos vell
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-red);
|
||||
--bubble-color-03: var(--color-xxp-red);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.page-template-convos-search,
|
||||
.post-type-archive-xarxaprod-convo
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-pink);
|
||||
--bubble-color-03: var(--color-xxp-green);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.single-xarxaprod-convo {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-lila);
|
||||
}
|
||||
.page-template-agenda-search {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-red);
|
||||
}
|
||||
|
||||
.category-activitats {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-green);
|
||||
--bubble-color-03: var(--color-xxp-cyan);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.page-id-28, //espai assesorament
|
||||
.page-template-faqs-page
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-cyan);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.page-template-ajut-search,
|
||||
.post-type-archive-xarxaprod-ajut,
|
||||
.single-xarxaprod-ajut
|
||||
//.custom-post-type-ajuts
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-violet);
|
||||
}
|
||||
.page-id-1673 //XarxaREC
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-yellow);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-green);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
.page-id-2366 //Firas i mercats
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-violet);
|
||||
--bubble-color-03: var(--color-xxp-red);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
.page-id-2364 //Sostenibilitat
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-green);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-violet);
|
||||
}
|
||||
.page-id-2365 //projecte educatiu
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-lila);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
.page-id-1760 //Mentoratge
|
||||
{
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-lila);
|
||||
--bubble-color-04: var(--color-xxp-cyan);
|
||||
}
|
||||
.liquid-bubbles {
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: fixed;
|
||||
|
|
@ -167,25 +176,11 @@ body {
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
@keyframes bubble-move {
|
||||
from {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
filter: blur(10rem);
|
||||
/* transform: rotate(0);*/
|
||||
}
|
||||
to {
|
||||
width: 90vw;
|
||||
height: 20vw;
|
||||
filter: blur(20rem);
|
||||
/* transform: rotate(5deg);*/
|
||||
}
|
||||
}
|
||||
.bubbles {
|
||||
--size: 40vw;
|
||||
--position: -5vw;
|
||||
filter: blur(20rem);
|
||||
.bubbles {
|
||||
//--size: 40vw;
|
||||
//--position: -5vw;
|
||||
//filter: blur(8rem);
|
||||
position:absolute;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
|
@ -224,4 +219,53 @@ body {
|
|||
--bgangle: 325deg;
|
||||
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 48em) {
|
||||
@keyframes bubble-move {
|
||||
from {
|
||||
width: 50vw;
|
||||
height: 70vh;
|
||||
filter: blur(3rem);
|
||||
/* transform: rotate(0);*/
|
||||
}
|
||||
to {
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
filter: blur(8rem);
|
||||
/* transform: rotate(5deg);*/
|
||||
}
|
||||
}
|
||||
.bubbles {
|
||||
--size: 50vw;
|
||||
--position: 0vw;
|
||||
height: 70vh;
|
||||
filter: blur(3rem);
|
||||
border-radius: 3%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
@keyframes bubble-move {
|
||||
from {
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
filter: blur(10rem);
|
||||
/* transform: rotate(0);*/
|
||||
}
|
||||
to {
|
||||
width: 90vw;
|
||||
height: 20vw;
|
||||
filter: blur(20rem);
|
||||
/* transform: rotate(5deg);*/
|
||||
}
|
||||
}
|
||||
.bubbles {
|
||||
--size: 40vw;
|
||||
--position: -5vw;
|
||||
filter: blur(20rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 80em) {
|
||||
}
|
||||
|
||||
|
|
|
|||
382
style.css
382
style.css
|
|
@ -827,154 +827,165 @@ body.admin-bar {
|
|||
}
|
||||
|
||||
:root {
|
||||
--bubble-color-01: #ff5a69;
|
||||
--bubble-color-02: #ffcb1f;
|
||||
--bubble-color-03: #00d1ec;
|
||||
--bubble-color-04: #00f274;
|
||||
--color-xxp-black: #000;
|
||||
--color-xxp-white: #fff;
|
||||
--color-xxp-red: #f27173;
|
||||
--color-xxp-yellow: #f6cc4c;
|
||||
--color-xxp-green: #84c779;
|
||||
--color-xxp-cyan: #61cae4;
|
||||
--color-xxp-lila: #de7fb4;
|
||||
--color-xxp-pink: #f58b77;
|
||||
--color-xxp-violet: #5859a7;
|
||||
--bubble-color-01: var(--color-xxp-red);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-cyan);
|
||||
--bubble-color-04: var(--color-xxp-green);
|
||||
}
|
||||
|
||||
.home {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #ff79a8;
|
||||
--bubble-color-03: #ff9221;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
@media screen {
|
||||
|
||||
.page-id-617 {
|
||||
--bubble-color-01: #4a30f4;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #f6ca43;
|
||||
}
|
||||
.home {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-red);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.page-id-626,
|
||||
.page-id-2936,
|
||||
.page-id-2937 {
|
||||
--bubble-color-01: #ffcb1f;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #ff79a8;
|
||||
}
|
||||
.page-id-617 {
|
||||
--bubble-color-01: var(--color-xxp-violet);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
|
||||
.page-id-634 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-id-626,
|
||||
.page-id-2936,
|
||||
.page-id-2937 {
|
||||
--bubble-color-01: var(--color-xxp-yellow);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-lila);
|
||||
}
|
||||
|
||||
.page-id-659 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #6cd3eb;
|
||||
--bubble-color-03: #f6ca43;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-id-634 {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.page-template-associats-search,
|
||||
.post-type-archive-xarxaprod-associat {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #68ed81;
|
||||
--bubble-color-03: #ff79a8;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-id-659 {
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-cyan);
|
||||
--bubble-color-03: var(--color-xxp-yellow);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.single-xarxaprod-associat {
|
||||
--bubble-color-01: #ff9221;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #ff866f;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-template-associats-search,
|
||||
.post-type-archive-xarxaprod-associat {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-green);
|
||||
--bubble-color-03: var(--color-xxp-pink);
|
||||
--bubble-color-04: var(--color-xxp-pink);
|
||||
}
|
||||
|
||||
.page-template-arxiu-general,
|
||||
.page-id-643 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #f61818;
|
||||
--bubble-color-03: #f61818;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.single-xarxaprod-associat {
|
||||
--bubble-color-01: var(--color-xxp-pink);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-pink);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.page-template-convos-search,
|
||||
.post-type-archive-xarxaprod-convo {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #ff5a69;
|
||||
--bubble-color-03: #00f274;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-template-arxiu-general,
|
||||
.page-id-643 {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-red);
|
||||
--bubble-color-03: var(--color-xxp-red);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.single-xarxaprod-convo {
|
||||
--bubble-color-01: #e572ba;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #e572ba;
|
||||
}
|
||||
.page-template-convos-search,
|
||||
.post-type-archive-xarxaprod-convo {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-pink);
|
||||
--bubble-color-03: var(--color-xxp-green);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.page-template-agenda-search {
|
||||
--bubble-color-01: #e158ae;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #ff5a69;
|
||||
}
|
||||
.single-xarxaprod-convo {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-lila);
|
||||
}
|
||||
|
||||
.category-activitats {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #00f274;
|
||||
--bubble-color-03: #6cd3eb;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-template-agenda-search {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-red);
|
||||
}
|
||||
|
||||
.page-id-28,
|
||||
.page-template-faqs-page {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #6cd3eb;
|
||||
--bubble-color-03: #4a30f4;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.category-activitats {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-green);
|
||||
--bubble-color-03: var(--color-xxp-cyan);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.page-template-ajut-search,
|
||||
.post-type-archive-xarxaprod-ajut,
|
||||
.single-xarxaprod-ajut {
|
||||
--bubble-color-01: #6cd3eb;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #4a30f4;
|
||||
}
|
||||
.page-id-28,
|
||||
.page-template-faqs-page {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-cyan);
|
||||
--bubble-color-03: var(--color-xxp-violet);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.page-id-1673 {
|
||||
--bubble-color-01: #f6ca43;
|
||||
--bubble-color-02: #ff9221;
|
||||
--bubble-color-03: #00f274;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-template-ajut-search,
|
||||
.post-type-archive-xarxaprod-ajut,
|
||||
.single-xarxaprod-ajut {
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-violet);
|
||||
}
|
||||
|
||||
.page-id-2366 {
|
||||
--bubble-color-01: #fff;
|
||||
--bubble-color-02: #4a30f4;
|
||||
--bubble-color-03: #ff5a69;
|
||||
--bubble-color-04: #fff;
|
||||
}
|
||||
.page-id-1673 {
|
||||
--bubble-color-01: var(--color-xxp-yellow);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-green);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
|
||||
.page-id-2364 {
|
||||
--bubble-color-01: #00f274;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #4a30f4;
|
||||
}
|
||||
.page-id-2366 {
|
||||
--bubble-color-01: var(--color-xxp-white);
|
||||
--bubble-color-02: var(--color-xxp-violet);
|
||||
--bubble-color-03: var(--color-xxp-red);
|
||||
--bubble-color-04: var(--color-xxp-white);
|
||||
}
|
||||
|
||||
.page-id-2365 {
|
||||
--bubble-color-01: #e572ba;
|
||||
--bubble-color-02: #f6ca43;
|
||||
--bubble-color-03: #e572ba;
|
||||
--bubble-color-04: #f6ca43;
|
||||
}
|
||||
.page-id-2364 {
|
||||
--bubble-color-01: var(--color-xxp-green);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-white);
|
||||
--bubble-color-04: var(--color-xxp-violet);
|
||||
}
|
||||
|
||||
.page-id-1760 {
|
||||
--bubble-color-01: #6cd3eb;
|
||||
--bubble-color-02: #fff;
|
||||
--bubble-color-03: #fff;
|
||||
--bubble-color-04: #6cd3eb;
|
||||
}
|
||||
.page-id-2365 {
|
||||
--bubble-color-01: var(--color-xxp-lila);
|
||||
--bubble-color-02: var(--color-xxp-yellow);
|
||||
--bubble-color-03: var(--color-xxp-lila);
|
||||
--bubble-color-04: var(--color-xxp-yellow);
|
||||
}
|
||||
|
||||
.liquid-bubbles {
|
||||
.page-id-1760 {
|
||||
--bubble-color-01: var(--color-xxp-cyan);
|
||||
--bubble-color-02: var(--color-xxp-white);
|
||||
--bubble-color-03: var(--color-xxp-lila);
|
||||
--bubble-color-04: var(--color-xxp-cyan);
|
||||
}
|
||||
|
||||
.liquid-bubbles {
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: fixed;
|
||||
|
|
@ -983,9 +994,82 @@ body.admin-bar {
|
|||
z-index: -1000;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bubbles {
|
||||
position: absolute;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 20%;
|
||||
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
|
||||
}
|
||||
|
||||
.bubbles.bubble-01 {
|
||||
top: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-01);
|
||||
--bgangle: 135deg;
|
||||
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.bubbles.bubble-02 {
|
||||
top: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-02);
|
||||
--bgangle: 225deg;
|
||||
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.bubbles.bubble-03 {
|
||||
bottom: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-03);
|
||||
--bgangle: 45deg;
|
||||
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.bubbles.bubble-04 {
|
||||
bottom: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-04);
|
||||
--bgangle: 325deg;
|
||||
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubble-move {
|
||||
@media screen and (max-width: 48em) {
|
||||
|
||||
@keyframes bubble-move {
|
||||
|
||||
from {
|
||||
width: 50vw;
|
||||
height: 70vh;
|
||||
filter: blur(3rem);
|
||||
|
||||
/* transform: rotate(0);*/
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
filter: blur(8rem);
|
||||
|
||||
/* transform: rotate(5deg);*/
|
||||
}
|
||||
}
|
||||
|
||||
.bubbles {
|
||||
--size: 50vw;
|
||||
--position: 0;
|
||||
height: 70vh;
|
||||
filter: blur(3rem);
|
||||
border-radius: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
@keyframes bubble-move {
|
||||
|
||||
from {
|
||||
width: 40vw;
|
||||
|
|
@ -1002,49 +1086,13 @@ body.admin-bar {
|
|||
|
||||
/* transform: rotate(5deg);*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubbles {
|
||||
.bubbles {
|
||||
--size: 40vw;
|
||||
--position: -5vw;
|
||||
filter: blur(20rem);
|
||||
position: absolute;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 20%;
|
||||
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
|
||||
}
|
||||
|
||||
.bubbles.bubble-01 {
|
||||
top: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-01);
|
||||
--bgangle: 135deg;
|
||||
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.bubbles.bubble-02 {
|
||||
top: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-02);
|
||||
--bgangle: 225deg;
|
||||
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.bubbles.bubble-03 {
|
||||
bottom: var(--position);
|
||||
left: var(--position);
|
||||
--bgcolor: var(--bubble-color-03);
|
||||
--bgangle: 45deg;
|
||||
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
||||
}
|
||||
|
||||
.bubbles.bubble-04 {
|
||||
bottom: var(--position);
|
||||
right: var(--position);
|
||||
--bgcolor: var(--bubble-color-04);
|
||||
--bgangle: 325deg;
|
||||
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue