@onetype/framework 2.0.53 → 2.0.55

package/addons/render/elements/front/items/self/status/code/code.css

@@ -19,39 +19,110 @@
 	align-items: center;
 	gap: var(--ot-spacing-m);
 	text-align: center;
-	max-width: 400px;
+	max-width: 480px;
+	animation: e-471f3f12-fade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes e-471f3f12-fade
+{
+	from { opacity: 0; transform: translateY(8px); }
+	to { opacity: 1; transform: translateY(0); }
 }
 
 /* Code number */
 
 .e-471f3f12 > .holder > .code
 {
-	font-size: 120px;
-	font-weight: 700;
+	font-family: var(--ot-font-secondary);
+	font-size: 140px;
+	font-weight: 500;
 	line-height: 1;
-	color: var(--ot-text-1);
-	opacity: 0.06;
-	letter-spacing: -4px;
+	letter-spacing: -0.04em;
+	color: var(--ot-brand);
+	background: linear-gradient(180deg, var(--ot-brand) 0%, var(--ot-brand-hover) 100%);
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	font-variation-settings: 'opsz' 144;
 	user-select: none;
+	margin-bottom: var(--ot-spacing-s);
 }
 
 /* Title */
 
 .e-471f3f12 > .holder > .title
 {
-	font-size: var(--ot-size-l);
-	font-weight: 600;
-	color: var(--ot-text-1);
-	line-height: 1.3;
 	margin: 0;
+	font-family: var(--ot-font-secondary);
+	font-weight: 500;
+	letter-spacing: -0.01em;
+	color: var(--ot-text-1);
+	line-height: 1.15;
+	font-variation-settings: 'opsz' 144;
 }
 
 /* Description */
 
 .e-471f3f12 > .holder > .description
 {
-	font-size: var(--ot-size-m);
+	margin: 0;
+	font-size: 14px;
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin: 0;
+	font-family: var(--ot-font-primary);
 }
+
+/* ===== COLOR VARIANTS (code accent) ===== */
+
+.e-471f3f12 > .holder.brand > .code { background: linear-gradient(180deg, var(--ot-brand) 0%, var(--ot-brand-hover) 100%); -webkit-background-clip: text; background-clip: text; }
+.e-471f3f12 > .holder.blue > .code { background: linear-gradient(180deg, var(--ot-blue) 0%, var(--ot-blue-hover) 100%); -webkit-background-clip: text; background-clip: text; }
+.e-471f3f12 > .holder.red > .code { background: linear-gradient(180deg, var(--ot-red) 0%, var(--ot-red-hover) 100%); -webkit-background-clip: text; background-clip: text; }
+.e-471f3f12 > .holder.orange > .code { background: linear-gradient(180deg, var(--ot-orange) 0%, var(--ot-orange-hover) 100%); -webkit-background-clip: text; background-clip: text; }
+.e-471f3f12 > .holder.green > .code { background: linear-gradient(180deg, var(--ot-green) 0%, var(--ot-green-hover) 100%); -webkit-background-clip: text; background-clip: text; }
+
+/* ===== BACKGROUNDS ===== */
+
+.e-471f3f12.bg-1 { background: var(--ot-bg-1); }
+.e-471f3f12.bg-2 { background: var(--ot-bg-2); }
+.e-471f3f12.bg-3 { background: var(--ot-bg-3); }
+.e-471f3f12.bg-4 { background: var(--ot-bg-4); }
+
+.e-471f3f12.bg-1,
+.e-471f3f12.bg-2,
+.e-471f3f12.bg-3,
+.e-471f3f12.bg-4
+{
+	border-radius: var(--ot-radius-l);
+}
+
+/* ===== BORDERS ===== */
+
+.e-471f3f12.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-l); }
+.e-471f3f12.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-471f3f12.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-471f3f12.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-471f3f12.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZES ===== */
+
+.e-471f3f12.size-s
+{
+	min-height: 240px;
+	padding: var(--ot-spacing-m);
+}
+
+.e-471f3f12.size-s > .holder > .code { font-size: 96px; }
+.e-471f3f12.size-s > .holder > .title { font-size: 20px; }
+.e-471f3f12.size-s > .holder > .description { font-size: 13px; }
+
+.e-471f3f12.size-m > .holder > .code { font-size: 140px; }
+.e-471f3f12.size-m > .holder > .title { font-size: 26px; }
+
+.e-471f3f12.size-l
+{
+	min-height: 480px;
+}
+
+.e-471f3f12.size-l > .holder > .code { font-size: 200px; letter-spacing: -0.05em; }
+.e-471f3f12.size-l > .holder > .title { font-size: 36px; }
+.e-471f3f12.size-l > .holder > .description { font-size: 16px; max-width: 560px; }

package/addons/render/elements/front/items/self/status/code/code.js

@@ -27,16 +27,27 @@ onetype.AddonReady('elements', (elements) =>
 			href: {
 				type: 'string',
 				value: '/'
+			},
+			variant: {
+				type: 'array',
+				value: ['size-m'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
-			return `
-				<div class="holder">
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ')">
 					<span class="code">{{ code }}</span>
-					<h2 class="title">{{ title }}</h2>
+					<h2 ot-if="title" class="title">{{ title }}</h2>
 					<p ot-if="description" class="description">{{ description }}</p>
-					<e-form-button ot-if="action" :text="action" icon="home" :variant="['brand', 'size-m']" :href="href"></e-form-button>
+					<e-form-button
+						ot-if="action"
+						:text="action"
+						icon="home"
+						:variant="['brand', 'size-m']"
+						:href="href"
+					></e-form-button>
 				</div>
 			`;
 		}

package/addons/render/elements/front/items/self/status/empty/empty.css

@@ -19,46 +19,126 @@
 	align-items: center;
 	gap: var(--ot-spacing-m);
 	text-align: center;
-	max-width: 400px;
+	max-width: 420px;
+	animation: e-631be738-fade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* Dashed circle */
+@keyframes e-631be738-fade
+{
+	from { opacity: 0; transform: translateY(8px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+/* Circle */
 
 .e-631be738 > .holder > .circle
 {
-	width: 72px;
-	height: 72px;
-	border-radius: 50%;
-	border: 2px dashed var(--ot-bg-3-border);
+	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 72px;
+	height: 72px;
+	border-radius: 50%;
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+	margin-bottom: var(--ot-spacing-s);
+}
+
+.e-631be738 > .holder > .circle::before
+{
+	content: '';
+	position: absolute;
+	inset: -8px;
+	border-radius: 50%;
+	border: 1px dashed var(--ot-brand-opacity);
+	opacity: 0.6;
 }
 
 .e-631be738 > .holder > .circle > i
 {
 	font-size: 32px;
-	color: var(--ot-text-2);
-	opacity: 0.35;
+	font-variation-settings: 'wght' 400;
 }
 
 /* Title */
 
 .e-631be738 > .holder > .title
 {
-	font-size: var(--ot-size-l);
-	font-weight: 600;
-	color: var(--ot-text-1);
-	line-height: 1.3;
 	margin: 0;
+	font-family: var(--ot-font-secondary);
+	font-weight: 500;
+	letter-spacing: -0.01em;
+	color: var(--ot-text-1);
+	line-height: 1.2;
+	font-variation-settings: 'opsz' 144;
 }
 
 /* Description */
 
 .e-631be738 > .holder > .description
 {
-	font-size: var(--ot-size-m);
+	margin: 0;
+	font-size: 14px;
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin: 0;
-}
+	font-family: var(--ot-font-primary);
+}
+
+/* ===== COLOR VARIANTS ===== */
+
+.e-631be738 > .holder.brand > .circle { background: var(--ot-brand-opacity); color: var(--ot-brand); }
+.e-631be738 > .holder.brand > .circle::before { border-color: var(--ot-brand-opacity); }
+
+.e-631be738 > .holder.blue > .circle { background: var(--ot-blue-opacity); color: var(--ot-blue); }
+.e-631be738 > .holder.blue > .circle::before { border-color: var(--ot-blue-opacity); }
+
+.e-631be738 > .holder.red > .circle { background: var(--ot-red-opacity); color: var(--ot-red); }
+.e-631be738 > .holder.red > .circle::before { border-color: var(--ot-red-opacity); }
+
+.e-631be738 > .holder.orange > .circle { background: var(--ot-orange-opacity); color: var(--ot-orange); }
+.e-631be738 > .holder.orange > .circle::before { border-color: var(--ot-orange-opacity); }
+
+.e-631be738 > .holder.green > .circle { background: var(--ot-green-opacity); color: var(--ot-green); }
+.e-631be738 > .holder.green > .circle::before { border-color: var(--ot-green-opacity); }
+
+/* ===== BACKGROUNDS ===== */
+
+.e-631be738.bg-1 { background: var(--ot-bg-1); border-radius: var(--ot-radius-l); }
+.e-631be738.bg-2 { background: var(--ot-bg-2); border-radius: var(--ot-radius-l); }
+.e-631be738.bg-3 { background: var(--ot-bg-3); border-radius: var(--ot-radius-l); }
+.e-631be738.bg-4 { background: var(--ot-bg-4); border-radius: var(--ot-radius-l); }
+
+/* ===== BORDERS ===== */
+
+.e-631be738.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-l); }
+.e-631be738.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-631be738.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-631be738.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-631be738.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZES ===== */
+
+.e-631be738.size-s
+{
+	min-height: 240px;
+	padding: var(--ot-spacing-m);
+}
+
+.e-631be738.size-s > .holder > .circle { width: 56px; height: 56px; }
+.e-631be738.size-s > .holder > .circle > i { font-size: 26px; }
+.e-631be738.size-s > .holder > .title { font-size: 18px; }
+.e-631be738.size-s > .holder > .description { font-size: 13px; }
+
+.e-631be738.size-m > .holder > .circle { width: 72px; height: 72px; }
+.e-631be738.size-m > .holder > .title { font-size: 22px; }
+
+.e-631be738.size-l
+{
+	min-height: 440px;
+}
+
+.e-631be738.size-l > .holder > .circle { width: 96px; height: 96px; }
+.e-631be738.size-l > .holder > .circle > i { font-size: 44px; }
+.e-631be738.size-l > .holder > .title { font-size: 28px; }
+.e-631be738.size-l > .holder > .description { font-size: 15px; max-width: 500px; }

package/addons/render/elements/front/items/self/status/empty/empty.js

@@ -17,29 +17,34 @@ onetype.AddonReady('elements', (elements) =>
 				value: 'Nothing here yet'
 			},
 			description: {
-				type: 'string',
-				value: ''
+				type: 'string'
 			},
 			action: {
-				type: 'string',
-				value: ''
-			},
-			_click: {
-				type: 'function'
+				type: 'string'
 			},
 			variant: {
 				type: 'array',
-				value: []
+				value: ['brand', 'size-m'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_click: {
+				type: 'function'
 			}
 		},
 		render: function()
 		{
-			return `
-				<div class="holder">
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="circle"><i>{{ icon }}</i></div>
-					<h2 class="title">{{ title }}</h2>
+					<h2 ot-if="title" class="title">{{ title }}</h2>
 					<p ot-if="description" class="description">{{ description }}</p>
-					<e-form-button ot-if="action" :text="action" icon="add" :variant="['brand', 'size-m']" :_click="_click"></e-form-button>
+					<e-form-button
+						ot-if="action"
+						:text="action"
+						icon="add"
+						:variant="['brand', 'size-m']"
+						:_click="_click"
+					></e-form-button>
 				</div>
 			`;
 		}

package/addons/render/elements/front/items/self/status/error/error.css

@@ -19,47 +19,132 @@
 	align-items: center;
 	gap: var(--ot-spacing-m);
 	text-align: center;
-	max-width: 400px;
+	max-width: 420px;
+	animation: e-63199a7d-fade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* Icon circle */
+@keyframes e-63199a7d-fade
+{
+	from { opacity: 0; transform: translateY(8px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+/* Circle */
 
 .e-63199a7d > .holder > .circle
 {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	width: 80px;
 	height: 80px;
 	border-radius: 50%;
 	background: var(--ot-red-opacity);
-	border: 1px solid var(--ot-red-border);
-	display: flex;
-	align-items: center;
-	justify-content: center;
+	color: var(--ot-red);
+	margin-bottom: var(--ot-spacing-s);
+}
+
+.e-63199a7d > .holder > .circle::before
+{
+	content: '';
+	position: absolute;
+	inset: -10px;
+	border-radius: 50%;
+	border: 1px solid var(--ot-red-opacity);
+	animation: e-63199a7d-pulse 2.4s ease-in-out infinite;
+}
+
+@keyframes e-63199a7d-pulse
+{
+	0%, 100% { transform: scale(1); opacity: 0.6; }
+	50% { transform: scale(1.08); opacity: 0.2; }
 }
 
 .e-63199a7d > .holder > .circle > i
 {
 	font-size: 36px;
-	color: var(--ot-red);
-	opacity: 0.8;
+	font-variation-settings: 'FILL' 1, 'wght' 400;
 }
 
 /* Title */
 
 .e-63199a7d > .holder > .title
 {
-	font-size: var(--ot-size-l);
-	font-weight: 600;
-	color: var(--ot-text-1);
-	line-height: 1.3;
 	margin: 0;
+	font-family: var(--ot-font-secondary);
+	font-weight: 500;
+	letter-spacing: -0.01em;
+	color: var(--ot-text-1);
+	line-height: 1.2;
+	font-variation-settings: 'opsz' 144;
 }
 
 /* Description */
 
 .e-63199a7d > .holder > .description
 {
-	font-size: var(--ot-size-m);
+	margin: 0;
+	font-size: 14px;
 	line-height: 1.6;
 	color: var(--ot-text-2);
-	margin: 0;
+	font-family: var(--ot-font-primary);
 }
+
+/* ===== COLOR VARIANTS ===== */
+
+.e-63199a7d > .holder.brand > .circle { background: var(--ot-brand-opacity); color: var(--ot-brand); }
+.e-63199a7d > .holder.brand > .circle::before { border-color: var(--ot-brand-opacity); }
+
+.e-63199a7d > .holder.blue > .circle { background: var(--ot-blue-opacity); color: var(--ot-blue); }
+.e-63199a7d > .holder.blue > .circle::before { border-color: var(--ot-blue-opacity); }
+
+.e-63199a7d > .holder.red > .circle { background: var(--ot-red-opacity); color: var(--ot-red); }
+.e-63199a7d > .holder.red > .circle::before { border-color: var(--ot-red-opacity); }
+
+.e-63199a7d > .holder.orange > .circle { background: var(--ot-orange-opacity); color: var(--ot-orange); }
+.e-63199a7d > .holder.orange > .circle::before { border-color: var(--ot-orange-opacity); }
+
+.e-63199a7d > .holder.green > .circle { background: var(--ot-green-opacity); color: var(--ot-green); }
+.e-63199a7d > .holder.green > .circle::before { border-color: var(--ot-green-opacity); }
+
+/* ===== BACKGROUNDS ===== */
+
+.e-63199a7d.bg-1 { background: var(--ot-bg-1); border-radius: var(--ot-radius-l); }
+.e-63199a7d.bg-2 { background: var(--ot-bg-2); border-radius: var(--ot-radius-l); }
+.e-63199a7d.bg-3 { background: var(--ot-bg-3); border-radius: var(--ot-radius-l); }
+.e-63199a7d.bg-4 { background: var(--ot-bg-4); border-radius: var(--ot-radius-l); }
+
+/* ===== BORDERS ===== */
+
+.e-63199a7d.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-l); }
+.e-63199a7d.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-63199a7d.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-63199a7d.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-63199a7d.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZES ===== */
+
+.e-63199a7d.size-s
+{
+	min-height: 240px;
+	padding: var(--ot-spacing-m);
+}
+
+.e-63199a7d.size-s > .holder > .circle { width: 60px; height: 60px; }
+.e-63199a7d.size-s > .holder > .circle > i { font-size: 28px; }
+.e-63199a7d.size-s > .holder > .title { font-size: 18px; }
+.e-63199a7d.size-s > .holder > .description { font-size: 13px; }
+
+.e-63199a7d.size-m > .holder > .circle { width: 80px; height: 80px; }
+.e-63199a7d.size-m > .holder > .title { font-size: 22px; }
+
+.e-63199a7d.size-l
+{
+	min-height: 440px;
+}
+
+.e-63199a7d.size-l > .holder > .circle { width: 104px; height: 104px; }
+.e-63199a7d.size-l > .holder > .circle > i { font-size: 48px; }
+.e-63199a7d.size-l > .holder > .title { font-size: 28px; }
+.e-63199a7d.size-l > .holder > .description { font-size: 15px; max-width: 500px; }

package/addons/render/elements/front/items/self/status/error/error.js

@@ -24,30 +24,40 @@ onetype.AddonReady('elements', (elements) =>
 				type: 'string',
 				value: 'Try Again'
 			},
+			variant: {
+				type: 'array',
+				value: ['red', 'size-m'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+			},
 			_click: {
 				type: 'function'
 			}
 		},
 		render: function()
 		{
-			this.retry = () =>
+			this.retry = (event) =>
 			{
-				if (this._click)
-				{
-					this._click({});
-				}
-				else
+				if(this._click)
 				{
-					window.location.reload();
+					this._click({ event });
+					return;
 				}
+
+				window.location.reload();
 			};
 
-			return `
-				<div class="holder">
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="circle"><i>{{ icon }}</i></div>
-					<h2 class="title">{{ title }}</h2>
+					<h2 ot-if="title" class="title">{{ title }}</h2>
 					<p ot-if="description" class="description">{{ description }}</p>
-					<e-form-button ot-if="action" :text="action" icon="refresh" :variant="['brand', 'size-m']" :_click="retry"></e-form-button>
+					<e-form-button
+						ot-if="action"
+						:text="action"
+						icon="refresh"
+						:variant="['brand', 'size-m']"
+						:_click="retry"
+					></e-form-button>
 				</div>
 			`;
 		}

package/addons/render/elements/front/items/self/status/loading/loading.css

@@ -18,9 +18,16 @@
 	flex-direction: column;
 	align-items: center;
 	gap: var(--ot-spacing-m);
+	animation: e-691b81f7-fade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/* Spinner circle */
+@keyframes e-691b81f7-fade
+{
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+/* Circle */
 
 .e-691b81f7 > .holder > .circle
 {
@@ -32,7 +39,18 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	animation: e-691b81f7-pulse 2s ease-in-out infinite;
+	animation: e-691b81f7-pulse 2.4s ease-in-out infinite;
+}
+
+.e-691b81f7 > .holder > .circle::before
+{
+	content: '';
+	position: absolute;
+	inset: -10px;
+	border-radius: 50%;
+	border: 1px dashed var(--ot-bg-3-border);
+	opacity: 0.5;
+	animation: e-691b81f7-pulse 2.4s ease-in-out infinite reverse;
 }
 
 .e-691b81f7 > .holder > .circle > .spinner
@@ -41,23 +59,76 @@
 	animation: e-691b81f7-spin 0.8s linear infinite;
 }
 
-/* Color variants */
+/* Text */
+
+.e-691b81f7 > .holder > .text
+{
+	font-size: 14px;
+	color: var(--ot-text-2);
+	font-family: var(--ot-font-primary);
+}
+
+/* ===== COLOR VARIANTS ===== */
 
+.e-691b81f7 > .holder.brand > .circle { border-color: var(--ot-brand-opacity); }
+.e-691b81f7 > .holder.brand > .circle::before { border-color: var(--ot-brand-opacity); }
 .e-691b81f7 > .holder.brand > .circle > .spinner { color: var(--ot-brand); }
+
+.e-691b81f7 > .holder.blue > .circle { border-color: var(--ot-blue-opacity); }
+.e-691b81f7 > .holder.blue > .circle::before { border-color: var(--ot-blue-opacity); }
 .e-691b81f7 > .holder.blue > .circle > .spinner { color: var(--ot-blue); }
+
+.e-691b81f7 > .holder.red > .circle { border-color: var(--ot-red-opacity); }
+.e-691b81f7 > .holder.red > .circle::before { border-color: var(--ot-red-opacity); }
 .e-691b81f7 > .holder.red > .circle > .spinner { color: var(--ot-red); }
+
+.e-691b81f7 > .holder.orange > .circle { border-color: var(--ot-orange-opacity); }
+.e-691b81f7 > .holder.orange > .circle::before { border-color: var(--ot-orange-opacity); }
 .e-691b81f7 > .holder.orange > .circle > .spinner { color: var(--ot-orange); }
+
+.e-691b81f7 > .holder.green > .circle { border-color: var(--ot-green-opacity); }
+.e-691b81f7 > .holder.green > .circle::before { border-color: var(--ot-green-opacity); }
 .e-691b81f7 > .holder.green > .circle > .spinner { color: var(--ot-green); }
 
-/* Text */
+/* ===== BACKGROUNDS ===== */
 
-.e-691b81f7 > .holder > .text
+.e-691b81f7.bg-1 { background: var(--ot-bg-1); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-2 { background: var(--ot-bg-2); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-3 { background: var(--ot-bg-3); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-4 { background: var(--ot-bg-4); border-radius: var(--ot-radius-l); }
+
+/* ===== BORDERS ===== */
+
+.e-691b81f7.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-l); }
+.e-691b81f7.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-691b81f7.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-691b81f7.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-691b81f7.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZES ===== */
+
+.e-691b81f7.size-s
 {
-	font-size: var(--ot-size-m);
-	color: var(--ot-text-2);
+	min-height: 200px;
+	padding: var(--ot-spacing-m);
+}
+
+.e-691b81f7.size-s > .holder > .circle { width: 56px; height: 56px; }
+.e-691b81f7.size-s > .holder > .circle > .spinner { font-size: 24px; }
+.e-691b81f7.size-s > .holder > .text { font-size: 12px; }
+
+.e-691b81f7.size-m > .holder > .circle { width: 80px; height: 80px; }
+
+.e-691b81f7.size-l
+{
+	min-height: 440px;
 }
 
-/* Animations */
+.e-691b81f7.size-l > .holder > .circle { width: 104px; height: 104px; }
+.e-691b81f7.size-l > .holder > .circle > .spinner { font-size: 44px; }
+.e-691b81f7.size-l > .holder > .text { font-size: 15px; }
+
+/* ===== ANIMATIONS ===== */
 
 @keyframes e-691b81f7-spin
 {
@@ -65,15 +136,15 @@
 	to { transform: rotate(360deg); }
 }
 
+@keyframes e-691b81f7-pulse
+{
+	0%, 100% { opacity: 1; transform: scale(1); }
+	50% { opacity: 0.5; transform: scale(1.02); }
+}
+
 /* Auto height */
 
 .e-691b81f7.auto
 {
 	min-height: auto;
 }
-
-@keyframes e-691b81f7-pulse
-{
-	0%, 100% { opacity: 1; }
-	50% { opacity: 0.4; }
-}