Veröffentlichungsdatum: 20. März 2023
Änderungsdatum: 26. April 2023
colors.scss primärfarbe baseColorPrimary Farben
Öffnen Sie über die CSS-Styles die Farben (colors.scss) und ergänzen Sie über die Quelltextanzeige eine weitere Primärfarbe.
Da die Primärfarbe in den Weblic-Varianten automatisch noch keine Verwendung findet, können diese ganz komfortabel ergänzen.
/*@wCssFragment{class:elementHeadlineColor;variant:92;caption:Primärfarbe 2;caption-en:Primary color 2;preview-color:#{$baseColorPrimary2};livepreview:yes}*/ .elementHeadlineColor_var92 { > h1, > h2, > h3, > h4, > h5, > h6, > .h1, > .h2, > .h3, > .h4, > .h5, > .h6, .wEditorWysiwyg { color:$baseColorPrimary2 !important; } } /*dupliziert und angepasst */ /*@wCssFragment{class:elementHeadlineColor;variant:10000;caption:Primärfarbe 3;caption-en:Primary 3;preview-color:#{$baseColorPrimary3};livepreview:yes}*/ .elementHeadlineColor_var10000 { > h1, > h2, > h3, > h4, > h5, > h6, > .h1, > .h2, > .h3, > .h4, > .h5, > .h6, .wEditorWysiwyg { color:$baseColorPrimary3 !important; } }
/*@wCssFragment{class:elementBoxBackgroundColor;variant:92;caption:Primärfarbe 2;caption-en:Primary color 2;preview-color:#{$baseColorPrimary2};livepreview:yes;isdarkbackground:yes}*/ .elementBoxBackgroundColor_var92 { -w-editmaskExtendedWebtag-layoutBackgroundOpacity:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,clear=both,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundOpacity,selectable="0(Ohne Transparenzeffekt)|50(Halbtransparent)",caption="Transparenz",livepreviewdefault=yes'; -w-editmaskExtendedWebtag-layoutBackgroundBlur:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundBlur,selectable="0(Ohne Unschärfeeffekt)|8(Unschärfeeffekt)",caption="Unschärfe",livepreviewdefault=yes'; --backgroundColorOrigin:$baseColorPrimary2; --backgroundColorRgb:rgbSplit($baseColorPrimary2); --backgroundColor:$baseColorPrimary2; &.elementBoxBackgroundOpacity_var50 { --backgroundColor:rgba($baseColorPrimary2, 0.5); } background-color:var(--backgroundColor); &.elementBoxBackgroundBlur_var8 { backdrop-filter:blur(8px); } @include colorsOnDarkBackground; } /*dupliziert und angepasst*/ /*@wCssFragment{class:elementBoxBackgroundColor;variant:93;caption:Primärfarbe 3;caption-en:Primary color 3;preview-color:#{$baseColorPrimary3};livepreview:yes;isdarkbackground:yes}*/ .elementBoxBackgroundColor_var93 { -w-editmaskExtendedWebtag-layoutBackgroundOpacity:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,clear=both,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundOpacity,selectable="0(Ohne Transparenzeffekt)|50(Halbtransparent)",caption="Transparenz",livepreviewdefault=yes'; -w-editmaskExtendedWebtag-layoutBackgroundBlur:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundBlur,selectable="0(Ohne Unschärfeeffekt)|8(Unschärfeeffekt)",caption="Unschärfe",livepreviewdefault=yes'; --backgroundColorOrigin:$baseColorPrimary3; --backgroundColorRgb:rgbSplit($baseColorPrimary3); --backgroundColor:$baseColorPrimary3; &.elementBoxBackgroundOpacity_var50 { --backgroundColor:rgba($baseColorPrimary3, 0.5); } background-color:var(--backgroundColor); &.elementBoxBackgroundBlur_var8 { backdrop-filter:blur(8px); } @include colorsOnDarkBackground; }
span {color:$baseColorPrimary3}
div {background-color:$baseColorPrimary3}
...