Leo Merkel Lego2012

This CSS is in a custom class of the Card Element

%root% {
  position: relative;
}

%root%:hover {
  translate: 0 -.25rem;
}

Either pass the code in your Bricks settings -> Custom Code -> CSS, or - if you already have a Code manager active: Set the css to for "logged in users only".

html {
    margin-top: 0px !important;
}

#wpadminbar {
    top: 4px;
 margin: 0 5px 0 5px;

text-shadow

text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

Text mit Kontur: Beispiel 1

In diesem Beispiel erstelle ich einen weißen Text mit einer schwarzen Kontur von 1px

<!DOCTYPE html>

Overlay Classes

https://automaticcss.com/docs/overlay-classes/ Angepasst auf Core Framework

.overlay--primary-10 {
  --overlay-background: var(--primary-10);
}
.overlay--primary-20 {
 --overlay-background: var(--primary-20);

Centering Classes

https://automaticcss.com/docs/centering-classes/ Angepasst auf Core Framework

[class*="center--"]:where(:not([class*="self"]))[class*="center--"]:where(:not([class*="self"])) {
  display: flex;
  flex-direction: column;
  align-items: var(--align-items, initial);
 align-content: var(--align-content, initial);

Variables

Damit sie nicht mit Core Framework kollidieren (hat auch eine .divider) habe ich sie hier mit lm- gekennzeichnet

:root {
  --lm-divider-size: 1px;
  --lm-divider-style: solid;
  --lm-divider-inline-size: 100%;
  --lm-divider-gap: var(--content-gap);
  --lm-divider-color-dark: var(--black-20);
 --lm-divider-color-light: var(--white-20);

Docs: https://automaticcss.com/docs/is-background-is-bg/

:has(> .is-bg) {
  position: relative;
  isolation: isolate;
}
.is-bg {
  position: var(--bg-position, absolute);
 inset: var(--bg-inset, 0);

	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
	.parent {
	width: 100%;

	%root% {
	--icon-url: url(/wp-content....svg);
	--icon-color: var(--primary);
	--icon-offset: 0 .5ex;
	--icon-size: 1em;
	--icon-gap: .5em;
	--icon-display: flex;
	--list-indent: 0;
	}

	/* Make the edited icon bigger */
	.bricks-panel-controls .has-setting .indicator {
	background-color: currentColor;
	background-color: var(--bricks-color-secondary);
	border-radius: 0%;
	display: inline-block;
	height: 20px;
	width: 6px;
	}