diff --git a/README.md b/README.md
index d9db939..2033438 100644
--- a/README.md
+++ b/README.md
@@ -17,58 +17,146 @@
-A library for resizable & repositionable panel layouts, using
-[CSS `grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout).
+A library for resizable & repositionable panel layouts.
- Zero depedencies, pure TypeScript, tiny.
- Implemented as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components),
- interoperable with any framework and fully customizable.
+ interoperable with any framework.
+- Zero DOM mutation at runtime, implemented entirely by generating using
+[CSS `grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout) rules.
+- Supports arbitrary theming via CSS [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) and [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::part).
+- Supports async-aware container rendering for smooth animations even when rendering ovvurs over an event loop boundary.
- Covered in bees.
+## Demo
+
+` custom element to your HTML:
+Import the library and add `` to your HTML. Children are
+matched to layout slots by their `name` attribute.
```html
+
+
Main content
Sidebar content
```
-Create and manipulate layouts programmatically:
+For draggable, tabbed panels, use ``:
+
+```html
+
+
+ Main content
+
+
+ Sidebar content
+
+
+```
+
+Panels must be added and remove programmatically (e.g they are not
+auto-registered):
```javascript
-import "regular-layout/dist/index.js";
+const layout = document.querySelector("regular-layout");
-const layout = document.querySelector('regular-layout');
+// This adds the panel definition to the layout (and makes it visible via CSS),
+// but does not mutat the DOM.
+layout.insertPanel("main");
+layout.insertPanel("sidebar");
-// Add panels
-layout.insertPanel('main');
-layout.insertPanel('sidebar');
+// This removes the panel from the layout (and hides it via CSS) but does not
+// mutate the DOM.
+layout.removePanel("sidebar");
+```
-// Save layout state
+## Save/Restore
+
+Layout state serializes to a JSON tree of splits and tabs, which can be
+persisted and restored:
+
+```javascript
const state = layout.save();
+localStorage.setItem("layout", JSON.stringify(state));
+
+// Later...
+layout.restore(JSON.parse(localStorage.getItem("layout")));
+```
-// Remove panels (this does not change the DOM, the element is unslotted).
-layout.removePanel('sidebar');
+`restore()` dispatches a cancelable `regular-layout-before-resize` event before
+applying the new state. Call `preventDefault()` to suspend the update, then
+`layout.resumeResize()` when ready:
-// Restore saved state
-layout.restore(state);
+```javascript
+layout.addEventListener("regular-layout-before-resize", (event) => {
+ event.preventDefault();
+ // ... prepare for resize ...
+ layout.resumeResize();
+});
```
-Create repositionable panels using ``:
+The `restore()` API can also be used as an alternative to
+`insertPanel`/`removePanel` for initializing a ``.
+
+## Theming
+
+Themes are plain CSS files that style the layout and its `::part()` selectors,
+scoped by a class on ``. Apply a theme by adding its stylesheet
+and setting the class:
```html
-
-
- Main content
-
+
+ ...
-```
\ No newline at end of file
+```
+
+`` exposes these CSS parts:
+
+| Part | Description |
+|------|-------------|
+| `titlebar` | Tab bar container |
+| `tab` | Individual tab |
+| `active-tab` | Currently selected tab |
+| `close` | Close button |
+| `active-close` | Close button on the active tab |
+| `container` | Content area |
+
+```css
+regular-layout.mytheme regular-layout-frame::part(titlebar) {
+ background: #333;
+}
+
+regular-layout.mytheme regular-layout-frame::part(active-tab) {
+ background: #fff;
+ color: #000;
+}
+```
+
+See [the example `themes/`](./themes) directory for examples of how to write a
+complete theme for `` and `regular-layout-frame>`.
+
+## Events
+
+| Event | Detail | Cancelable | Description |
+|-------|--------|------------|-------------|
+| `regular-layout-before-resize` | `{ calculatePresizePaths() }` | Yes | Fired before any layout change. Cancel to suspend until `resumeResize()`. |
+| `regular-layout-update` | `Layout` | No | Fired after layout state is updated. |
+
+```javascript
+layout.addEventListener("regular-layout-update", (event) => {
+ console.log("New layout:", event.detail);
+});
+```
diff --git a/examples/PREVIEW.png b/examples/PREVIEW.png
new file mode 100644
index 0000000..46af340
Binary files /dev/null and b/examples/PREVIEW.png differ
diff --git a/examples/index.html b/examples/index.html
index d4211bc..4152813 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -11,6 +11,7 @@
Chicago
Fluxbox
Hot Dog
+ Borland
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+ Maecenas faucibus mollis interdum. Donec sed odio dui. Cras justo odio, dapibus ut facilisis in, egestas eget quam.
+ Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
diff --git a/examples/index.ts b/examples/index.ts
index 768f503..bdef613 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -38,6 +38,12 @@ add.addEventListener("click", () => {
layout.insertPanel(name, []);
});
+const urlTheme = new URLSearchParams(window.location.search).get("theme");
+if (urlTheme) {
+ themes.value = urlTheme;
+ layout.className = urlTheme;
+}
+
themes.addEventListener("change", (_event) => {
layout.className = themes.value;
});
diff --git a/src/core/constants.ts b/src/core/constants.ts
index 92f7634..70777c3 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -110,8 +110,8 @@ export const DEFAULT_PHYSICS: Physics = Object.freeze({
SHOULD_ROUND: false,
OVERLAY_CLASSNAME: "overlay",
MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD: 0.15,
- SPLIT_EDGE_TOLERANCE: 0.25,
- SPLIT_ROOT_EDGE_TOLERANCE: 0.01,
+ SPLIT_EDGE_TOLERANCE: 0.33,
+ SPLIT_ROOT_EDGE_TOLERANCE: 0.03,
GRID_TRACK_COLLAPSE_TOLERANCE: 0.001,
OVERLAY_DEFAULT: "absolute",
GRID_DIVIDER_SIZE: 6,
diff --git a/src/core/types.ts b/src/core/types.ts
index b053445..2043e6a 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -96,7 +96,7 @@ export interface LayoutPath {
}
/**
- * The detail payload of the `regular-layout-resize-before` event.
+ * The detail payload of the `regular-layout-before-resize` event.
*/
export interface PresizeDetail {
calculatePresizePaths(): Record;
diff --git a/src/extensions.ts b/src/extensions.ts
index ba7532b..cdc1729 100644
--- a/src/extensions.ts
+++ b/src/extensions.ts
@@ -60,7 +60,7 @@ declare global {
): void;
addEventListener(
- name: "regular-layout-resize-before",
+ name: "regular-layout-before-resize",
cb: (e: RegularLayoutPresizeEvent) => void,
options?: { signal: AbortSignal },
): void;
@@ -76,7 +76,7 @@ declare global {
): void;
removeEventListener(
- name: "regular-layout-resize-before",
+ name: "regular-layout-before-resize",
cb: (e: RegularLayoutPresizeEvent) => void,
): void;
}
diff --git a/src/regular-layout-frame.ts b/src/regular-layout-frame.ts
index e99a9b6..b3e8f5c 100644
--- a/src/regular-layout-frame.ts
+++ b/src/regular-layout-frame.ts
@@ -26,7 +26,7 @@ const CSS = `
const HTML_TEMPLATE = `
-
`;
type DragState = { moved?: boolean; path: LayoutPath };
diff --git a/src/regular-layout.ts b/src/regular-layout.ts
index fe95a87..9edc94b 100644
--- a/src/regular-layout.ts
+++ b/src/regular-layout.ts
@@ -128,7 +128,7 @@ export class RegularLayout extends HTMLElement {
this._stylesheet = new CSSStyleSheet();
this._cursor_stylesheet = new CSSStyleSheet();
this._cursor_override = false;
- const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-resize-before`;
+ const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-before-resize`;
this._presizeQueue = new PresizeQueue(this, event_name);
this._overlayController = new OverlayController(this.create_overlay_host());
this._shadowRoot.adoptedStyleSheets = [
@@ -288,7 +288,7 @@ export class RegularLayout extends HTMLElement {
/**
* Restores the layout from a saved state synchronously, without
- * dispatching the `regular-layout-resize-before` event.
+ * dispatching the `regular-layout-before-resize` event.
*
* @param layout - The layout tree to restore
*/
@@ -304,7 +304,7 @@ export class RegularLayout extends HTMLElement {
/**
* Restores the layout from a saved state.
*
- * Before applying, dispatches a cancelable `regular-layout-resize-before`
+ * Before applying, dispatches a cancelable `regular-layout-before-resize`
* event. If the event is cancelled via `preventDefault()`, the layout
* update is suspended until {@link resumeResize} is called.
*
@@ -333,7 +333,7 @@ export class RegularLayout extends HTMLElement {
/**
* Resumes a layout update that was suspended by cancelling the
- * `regular-layout-resize-before` event.
+ * `regular-layout-before-resize` event.
*/
resumeResize = () => {
this._presizeQueue.resume();
diff --git a/tests/integration/resize-before.spec.ts b/tests/integration/resize-before.spec.ts
index c0f2f25..e9d5691 100644
--- a/tests/integration/resize-before.spec.ts
+++ b/tests/integration/resize-before.spec.ts
@@ -13,14 +13,14 @@ import { expect, test } from "../helpers/coverage.ts";
import { setupLayout, saveLayout, dragMouse } from "../helpers/integration.ts";
import { LAYOUTS } from "../helpers/fixtures.ts";
-test("should fire regular-layout-resize-before on restore", async ({
+test("should fire regular-layout-before-resize on restore", async ({
page,
}) => {
await setupLayout(page, LAYOUTS.SINGLE_AAA);
const fired = await page.evaluate(async () => {
const layout = document.querySelector("regular-layout");
let eventFired = false;
- layout?.addEventListener("regular-layout-resize-before", () => {
+ layout?.addEventListener("regular-layout-before-resize", () => {
eventFired = true;
});
await layout?.restore({
@@ -42,7 +42,7 @@ test("should provide calculatePresizePaths in event detail", async ({
value: null,
};
- layout?.addEventListener("regular-layout-resize-before", (e) => {
+ layout?.addEventListener("regular-layout-before-resize", (e) => {
presizePaths.value = (
e as CustomEvent
).detail.calculatePresizePaths() as Record;
@@ -80,7 +80,7 @@ test("should suspend resize when preventDefault is called", async ({
await setupLayout(page, LAYOUTS.SINGLE_AAA);
const result = await page.evaluate(async () => {
const layout = document.querySelector("regular-layout");
- layout?.addEventListener("regular-layout-resize-before", (e) => {
+ layout?.addEventListener("regular-layout-before-resize", (e) => {
e.preventDefault();
});
@@ -113,7 +113,7 @@ test("should resume suspended resize when resumeResize is called", async ({
await setupLayout(page, LAYOUTS.SINGLE_AAA);
const result = await page.evaluate(async () => {
const layout = document.querySelector("regular-layout");
- layout?.addEventListener("regular-layout-resize-before", (e) => {
+ layout?.addEventListener("regular-layout-before-resize", (e) => {
e.preventDefault();
});
@@ -144,7 +144,7 @@ test("should proceed immediately when event is not cancelled", async ({
const tabs = await page.evaluate(async () => {
const layout = document.querySelector("regular-layout");
let eventCount = 0;
- layout?.addEventListener("regular-layout-resize-before", () => {
+ layout?.addEventListener("regular-layout-before-resize", () => {
eventCount++;
});
await layout?.restore({
@@ -167,7 +167,7 @@ test("should fire resize-before on drag resize", async ({ page }) => {
await page.evaluate(() => {
const layout = document.querySelector("regular-layout");
(window as unknown as Record).__resizeBeforeCount = 0;
- layout?.addEventListener("regular-layout-resize-before", () => {
+ layout?.addEventListener("regular-layout-before-resize", () => {
(window as unknown as Record).__resizeBeforeCount++;
});
});
@@ -196,7 +196,7 @@ test("should queue concurrent resizes and process sequentially", async ({
let callCount = 0;
let cancelFirst = true;
- layout?.addEventListener("regular-layout-resize-before", (e) => {
+ layout?.addEventListener("regular-layout-before-resize", (e) => {
callCount++;
events.push(`before-${callCount}`);
if (cancelFirst) {
@@ -243,7 +243,7 @@ test("should provide pre-resize panel paths for nested layout", async ({
const paths = await page.evaluate(async () => {
const layout = document.querySelector("regular-layout");
let presizePaths: Record> | null = null;
- layout?.addEventListener("regular-layout-resize-before", (e) => {
+ layout?.addEventListener("regular-layout-before-resize", (e) => {
presizePaths = (e as CustomEvent).detail.calculatePresizePaths();
});
@@ -299,7 +299,7 @@ test("should fire resize-before on double-click equalize", async ({ page }) => {
await page.evaluate(() => {
const layout = document.querySelector("regular-layout");
(window as unknown as Record).__resizeBeforeFired = false;
- layout?.addEventListener("regular-layout-resize-before", () => {
+ layout?.addEventListener("regular-layout-before-resize", () => {
(window as unknown as Record).__resizeBeforeFired = true;
});
});
@@ -326,7 +326,7 @@ test("should not fire resize-before on restoreSync", async ({ page }) => {
const fired = await page.evaluate(() => {
const layout = document.querySelector("regular-layout");
let eventFired = false;
- layout?.addEventListener("regular-layout-resize-before", () => {
+ layout?.addEventListener("regular-layout-before-resize", () => {
eventFired = true;
});
layout?.restoreSync({
diff --git a/tests/unit/calculate_edge.spec.ts b/tests/unit/calculate_edge.spec.ts
index 7ec3564..b7e8223 100644
--- a/tests/unit/calculate_edge.spec.ts
+++ b/tests/unit/calculate_edge.spec.ts
@@ -13,14 +13,14 @@ import { expect, test } from "@playwright/test";
import { LAYOUTS } from "../helpers/fixtures.ts";
import { calculate_edge } from "../../src/layout/calculate_edge.ts";
import { calculate_intersection } from "../../src/layout/calculate_intersect.ts";
-import type { Layout, LayoutPath } from "../../src/layout/types.ts";
+import type { Layout, LayoutPath } from "../../src/core/types.ts";
test("cursor in center of panel - no split", () => {
- const drop_target = calculate_intersection(0.3, 0.5, LAYOUTS.NESTED_BASIC);
+ const drop_target = calculate_intersection(0.3, 0.65, LAYOUTS.NESTED_BASIC);
expect(drop_target).not.toBeNull();
const result = calculate_edge(
0.3,
- 0.5,
+ 0.65,
LAYOUTS.NESTED_BASIC,
"DDD",
// biome-ignore lint/style/noNonNullAssertion: playwright assertion
@@ -68,10 +68,10 @@ test("cursor near right edge of vertical split panel", () => {
});
test("cursor near top edge of horizontal split panel", () => {
- const drop_target = calculate_intersection(0.7, 0.05, LAYOUTS.NESTED_BASIC);
+ const drop_target = calculate_intersection(0.75, 0.12, LAYOUTS.NESTED_BASIC);
const result = calculate_edge(
- 0.7,
- 0.05,
+ 0.75,
+ 0.12,
LAYOUTS.NESTED_BASIC,
"DDD",
// biome-ignore lint/style/noNonNullAssertion: playwright assertion
@@ -85,10 +85,10 @@ test("cursor near top edge of horizontal split panel", () => {
});
test("cursor near bottom edge of horizontal split panel", () => {
- const drop_target = calculate_intersection(0.7, 0.95, LAYOUTS.NESTED_BASIC);
+ const drop_target = calculate_intersection(0.75, 0.88, LAYOUTS.NESTED_BASIC);
const result = calculate_edge(
- 0.7,
- 0.95,
+ 0.75,
+ 0.88,
LAYOUTS.NESTED_BASIC,
"DDD",
// biome-ignore lint/style/noNonNullAssertion: playwright assertion
@@ -313,24 +313,24 @@ test("cursor in bottom-right corner prioritizes row offset", () => {
layout: undefined as unknown as Layout,
path: [],
view_window: { row_start: 0, row_end: 1, col_start: 0, col_end: 1 },
- column: 0.9,
- row: 0.95,
- column_offset: 0.9,
- row_offset: 0.95,
+ column: 0.85,
+ row: 0.89,
+ column_offset: 0.85,
+ row_offset: 0.89,
orientation: "horizontal",
is_edge: false,
};
- const result = calculate_edge(0.9, 0.95, singlePanel, "BBB", drop_target);
+ const result = calculate_edge(0.85, 0.89, singlePanel, "BBB", drop_target);
expect(result).toStrictEqual({
- column: 0.9,
- column_offset: 0.9,
+ column: 0.85,
+ column_offset: 0.85,
is_edge: true,
layout: undefined,
orientation: "vertical",
path: [1],
- row: 0.95,
- row_offset: 0.95,
+ row: 0.89,
+ row_offset: 0.89,
slot: "AAA",
type: "layout-path",
view_window: {
@@ -350,24 +350,24 @@ test("cursor in bottom-right corner prioritizes column offset", () => {
layout: undefined as unknown as Layout,
path: [],
view_window: { row_start: 0, row_end: 1, col_start: 0, col_end: 1 },
- column: 0.95,
- row: 0.9,
- column_offset: 0.95,
- row_offset: 0.9,
+ column: 0.89,
+ row: 0.85,
+ column_offset: 0.89,
+ row_offset: 0.85,
orientation: "horizontal",
is_edge: false,
};
- const result = calculate_edge(0.95, 0.9, singlePanel, "BBB", drop_target);
+ const result = calculate_edge(0.89, 0.85, singlePanel, "BBB", drop_target);
expect(result).toStrictEqual({
- column: 0.95,
- column_offset: 0.95,
+ column: 0.89,
+ column_offset: 0.89,
is_edge: true,
layout: undefined,
orientation: "horizontal",
path: [1],
- row: 0.9,
- row_offset: 0.9,
+ row: 0.85,
+ row_offset: 0.85,
slot: "AAA",
type: "layout-path",
view_window: {
@@ -387,15 +387,15 @@ test("cursor near edge with offset exactly at tolerance threshold", () => {
path: [],
layout: undefined as unknown as Layout,
view_window: { row_start: 0, row_end: 1, col_start: 0, col_end: 1 },
- column: 0.3,
+ column: 0.35,
row: 0.5,
- column_offset: 0.3,
+ column_offset: 0.35,
row_offset: 0.5,
orientation: "horizontal",
is_edge: false,
};
- const result = calculate_edge(0.3, 0.5, singlePanel, "BBB", drop_target);
+ const result = calculate_edge(0.35, 0.65, singlePanel, "BBB", drop_target);
expect(result.is_edge).toBe(false);
expect(result.path).toStrictEqual([0]);
});
@@ -421,9 +421,9 @@ test("cursor near edge with offset just below tolerance threshold", () => {
});
test("nested panel with vertical orientation at left edge", () => {
- const drop_target = calculate_intersection(0.02, 0.5, LAYOUTS.NESTED_BASIC);
+ const drop_target = calculate_intersection(0.12, 0.5, LAYOUTS.NESTED_BASIC);
const result = calculate_edge(
- 0.02,
+ 0.12,
0.5,
LAYOUTS.NESTED_BASIC,
"DDD",
diff --git a/themes/borland.css b/themes/borland.css
new file mode 100644
index 0000000..a122a50
--- /dev/null
+++ b/themes/borland.css
@@ -0,0 +1,103 @@
+/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+ * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+ * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
+ * ┃ * of the Regular Layout library, distributed under the terms of the * ┃
+ * ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+regular-layout.borland {
+ background-color: #0000aa;
+ font-family:
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+ "Liberation Mono", monospace;
+ padding: 16px;
+}
+
+/* Frame */
+regular-layout.borland regular-layout-frame {
+ position: relative;
+ box-sizing: border-box;
+ margin: 4px;
+ background: #0000aa;
+ border: 1px solid #00aaaa;
+ box-shadow: 1px 1px 0 #000000;
+}
+
+regular-layout.borland regular-layout-frame::part(container) {
+ padding: 4px 6px;
+ color: #ffff55;
+}
+
+regular-layout.borland regular-layout-frame::part(close) {
+ background: #00aa00;
+ height: 16px;
+ align-self: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 3px;
+}
+
+regular-layout.borland regular-layout-frame::part(close):hover {
+ background: #00ff00;
+}
+
+regular-layout.borland regular-layout-frame::part(close):before {
+ content: "[×]";
+ font-size: 10px;
+ font-weight: bold;
+ color: #000000;
+}
+
+regular-layout.borland regular-layout-frame::part(titlebar) {
+ display: flex;
+ align-items: stretch;
+ padding-right: 0;
+ height: 22px;
+ background: #0000aa;
+}
+
+regular-layout.borland regular-layout-frame::part(tab) {
+ display: flex;
+ flex: 1 1 150px;
+ align-items: center;
+ padding: 0 3px 0 8px;
+ cursor: pointer;
+ text-overflow: ellipsis;
+ background: #0000aa;
+ color: #aaaaaa;
+ font-size: 11px;
+ font-weight: bold;
+ border-right: 1px solid #00aaaa;
+}
+
+regular-layout.borland regular-layout-frame::part(active-tab) {
+ background: #00aaaa;
+ color: #000000;
+}
+
+regular-layout.borland:has(.overlay) > * {
+ opacity: 0.6;
+}
+
+regular-layout.borland:has(.overlay) > .overlay {
+ opacity: 1;
+}
+
+/* Frame in Overlay Mode */
+regular-layout.borland regular-layout-frame.overlay {
+ background: rgba(0, 170, 170, 0.9);
+ border: 1px solid #ffff55;
+ box-shadow: none;
+ margin: 0;
+ transition:
+ top 0.05s linear,
+ height 0.05s linear,
+ width 0.05s linear,
+ left 0.05s linear;
+}
diff --git a/themes/chicago.css b/themes/chicago.css
index e3234d5..84a66a2 100644
--- a/themes/chicago.css
+++ b/themes/chicago.css
@@ -11,79 +11,85 @@
*/
regular-layout.chicago {
- background-color: #008080;
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
- padding: 24px;
+ background-color: #008080;
+ font-family:
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+ "Liberation Mono", monospace;
+ padding: 24px;
}
/* Frame */
regular-layout.chicago regular-layout-frame {
- position: relative;
- box-sizing: border-box;
- margin: 12px;
- background: #C0C0C0;
- border-width: 2px;
- border-color: #FFFFFF #808080 #808080 #FFFFFF;
- border-style: solid;
+ position: relative;
+ box-sizing: border-box;
+ margin: 12px;
+ background: #c0c0c0;
+ border-width: 2px;
+ border-color: #ffffff #808080 #808080 #ffffff;
+ border-style: solid;
+}
+
+regular-layout.chicago regular-layout-frame::part(container) {
+ padding: 6px;
}
regular-layout.chicago regular-layout-frame::part(close) {
- border-width: 1px;
- border-color: #FFFFFF #808080 #808080 #FFFFFF;
- border-style: solid;
- height: 16px;
- background: #C0C0C0;
- align-self: center;
- display: flex;
- align-items: center;
- padding: 0px 4px;
+ border-width: 1px;
+ border-color: #ffffff #808080 #808080 #ffffff;
+ border-style: solid;
+ height: 16px;
+ background: #c0c0c0;
+ align-self: center;
+ display: flex;
+ align-items: center;
+ padding: 0px 4px;
}
regular-layout.chicago regular-layout-frame::part(close):before {
- content: "X";
- font-size: 10px;
- font-weight: bold;
+ content: "X";
+ font-size: 10px;
+ font-weight: bold;
}
regular-layout.chicago regular-layout-frame::part(titlebar) {
- display: flex;
- align-items: stretch;
- padding-right: 0px;
+ display: flex;
+ align-items: stretch;
+ padding-right: 0px;
}
regular-layout.chicago regular-layout-frame::part(tab) {
- display: flex;
- flex: 1 1 150px;
- align-items: center;
- padding: 0 3px 0 8px;
- cursor: pointer;
- text-overflow: ellipsis;
- background: #808080;
- color: #FFF;
- font-family: "Tahoma", "Arial", sans-serif;
- font-weight: bold;
- font-size: 11px;
+ display: flex;
+ flex: 1 1 150px;
+ align-items: center;
+ padding: 0 3px 0 8px;
+ cursor: pointer;
+ text-overflow: ellipsis;
+ background: #808080;
+ color: #fff;
+ font-family: "Tahoma", "Arial", sans-serif;
+ font-weight: bold;
+ font-size: 11px;
}
regular-layout.chicago regular-layout-frame::part(active-tab) {
- background: #000080;
- opacity: 1;
+ background: #000080;
+ opacity: 1;
}
-regular-layout.chicago:has(.overlay)>* {
- opacity: 0.8;
+regular-layout.chicago:has(.overlay) > * {
+ opacity: 0.8;
}
-regular-layout.chicago:has(.overlay)>.overlay {
- opacity: 1;
+regular-layout.chicago:has(.overlay) > .overlay {
+ opacity: 1;
}
/* Frame in Overlay Mode */
regular-layout.chicago regular-layout-frame.overlay {
- margin: 0;
- transition:
- top 0.1s ease-in-out,
- height 0.1s ease-in-out,
- width 0.1s ease-in-out,
- left 0.1s ease-in-out;
-}
\ No newline at end of file
+ margin: 0;
+ transition:
+ top 0.1s ease-in-out,
+ height 0.1s ease-in-out,
+ width 0.1s ease-in-out,
+ left 0.1s ease-in-out;
+}
diff --git a/themes/fluxbox.css b/themes/fluxbox.css
index ab039fc..e82b675 100644
--- a/themes/fluxbox.css
+++ b/themes/fluxbox.css
@@ -11,100 +11,104 @@
*/
regular-layout.fluxbox {
- background-color: #DBDFE6;
- font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
- padding: 16px;
+ background-color: #dbdfe6;
+ font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
+ padding: 16px;
}
/* Frame */
regular-layout.fluxbox regular-layout-frame {
- position: relative;
- box-sizing: border-box;
- margin: 8px;
- background: #FFFFFF;
- border: 1px solid #9DACBE;
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
+ position: relative;
+ box-sizing: border-box;
+ margin: 8px;
+ background: #ffffff;
+ border: 1px solid #9dacbe;
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+regular-layout.fluxbox regular-layout-frame::part(container) {
+ padding: 6px;
}
regular-layout.fluxbox regular-layout-frame::part(close) {
- border: 1px solid #8A96A3;
- height: 14px;
- background: linear-gradient(to bottom, #E8ECEF 0%, #CDD5DD 100%);
- align-self: center;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0px;
- width: 14px;
- margin-right: 2px;
+ border: 1px solid #8a96a3;
+ height: 14px;
+ background: linear-gradient(to bottom, #e8ecef 0%, #cdd5dd 100%);
+ align-self: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0px;
+ width: 14px;
+ margin-right: 2px;
}
regular-layout.fluxbox regular-layout-frame::part(close):hover {
- background: linear-gradient(to bottom, #F0F3F5 0%, #D8DFE6 100%);
+ background: linear-gradient(to bottom, #f0f3f5 0%, #d8dfe6 100%);
}
regular-layout.fluxbox regular-layout-frame::part(close):active {
- background: linear-gradient(to bottom, #C5CFD9 0%, #B3BEC9 100%);
+ background: linear-gradient(to bottom, #c5cfd9 0%, #b3bec9 100%);
}
regular-layout.fluxbox regular-layout-frame::part(close):before {
- content: "×";
- font-size: 14px;
- font-weight: normal;
- color: #444444;
- line-height: 1;
+ content: "×";
+ font-size: 14px;
+ font-weight: normal;
+ color: #444444;
+ line-height: 1;
}
regular-layout.fluxbox regular-layout-frame::part(titlebar) {
- display: flex;
- align-items: stretch;
- padding-right: 0px;
- height: 22px;
+ display: flex;
+ align-items: stretch;
+ padding-right: 0px;
+ height: 22px;
}
regular-layout.fluxbox regular-layout-frame::part(tab) {
- display: flex;
- flex: 1 1 150px;
- align-items: center;
- padding: 0 8px;
- cursor: pointer;
- text-overflow: ellipsis;
- background: linear-gradient(to bottom, #C7D1DB 0%, #B3BEC9 100%);
- color: #4A4A4A;
- font-size: 11px;
- font-weight: normal;
- border-right: 1px solid #9DACBE;
- opacity: 0.85;
+ display: flex;
+ flex: 1 1 150px;
+ align-items: center;
+ padding: 0 8px;
+ cursor: pointer;
+ text-overflow: ellipsis;
+ background: linear-gradient(to bottom, #c7d1db 0%, #b3bec9 100%);
+ color: #4a4a4a;
+ font-size: 11px;
+ font-weight: normal;
+ border-right: 1px solid #9dacbe;
+ opacity: 0.85;
}
regular-layout.fluxbox regular-layout-frame::part(tab):hover {
- background: linear-gradient(to bottom, #D2DBE4 0%, #BEC9D4 100%);
+ background: linear-gradient(to bottom, #d2dbe4 0%, #bec9d4 100%);
}
regular-layout.fluxbox regular-layout-frame::part(active-tab) {
- background: linear-gradient(to bottom, #E0E7EF 0%, #D1DAE3 100%);
- color: #1A1A1A;
- opacity: 1;
- font-weight: 500;
+ background: linear-gradient(to bottom, #e0e7ef 0%, #d1dae3 100%);
+ color: #1a1a1a;
+ opacity: 1;
+ font-weight: 500;
}
-regular-layout.fluxbox:has(.overlay)>* {
- opacity: 0.7;
+regular-layout.fluxbox:has(.overlay) > * {
+ opacity: 0.7;
}
-regular-layout.fluxbox:has(.overlay)>.overlay {
- opacity: 1;
+regular-layout.fluxbox:has(.overlay) > .overlay {
+ opacity: 1;
}
/* Frame in Overlay Mode */
regular-layout.fluxbox regular-layout-frame.overlay {
- margin: 0;
- background-color: rgba(155, 172, 190, 0.25);
- border: 1px solid #6B7C8F;
- box-shadow: none;
- transition:
- top 0.1s ease-in-out,
- height 0.1s ease-in-out,
- width 0.1s ease-in-out,
- left 0.1s ease-in-out;
+ margin: 0;
+ background-color: rgba(155, 172, 190, 0.25);
+ border: 1px solid #6b7c8f;
+ box-shadow: none;
+ transition:
+ top 0.1s ease-in-out,
+ height 0.1s ease-in-out,
+ width 0.1s ease-in-out,
+ left 0.1s ease-in-out;
}
diff --git a/themes/gibson.css b/themes/gibson.css
index 8e0fc6d..cfaa744 100644
--- a/themes/gibson.css
+++ b/themes/gibson.css
@@ -11,254 +11,264 @@
*/
regular-layout.gibson {
- background: radial-gradient(ellipse at center, #0a0a1a 0%, #000000 100%);
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
- padding: 8px;
+ background: radial-gradient(ellipse at center, #0a0a1a 0%, #000000 100%);
+ font-family:
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+ "Liberation Mono", monospace;
+ padding: 8px;
}
/* Frame */
regular-layout.gibson regular-layout-frame {
- --titlebar-height: 28px;
- position: relative;
- box-sizing: border-box;
- margin: 8px;
- background: rgba(10, 10, 26, 0.85);
- backdrop-filter: blur(4px);
+ --titlebar-height: 28px;
+ position: relative;
+ box-sizing: border-box;
+ margin: 8px;
+ background: rgba(10, 10, 26, 0.85);
+ backdrop-filter: blur(4px);
+ color: white;
+ text-shadow:
+ 0 0 5px #fff,
+ 0 0 10px #fff,
+ 0 0 20px #fff;
+}
+
+regular-layout.gibson regular-layout-frame::part(container) {
+ padding: 6px;
}
regular-layout.gibson regular-layout-frame::part(active-close) {
- border: 1px solid #ff00ff;
- height: 18px;
- width: 18px;
- background: rgba(255, 0, 255, 0.1);
- align-self: center;
- /* biome-ignore lint/complexity/noImportantStyles: reasons */
- display: flex !important;
- align-items: center;
- justify-content: center;
- margin-right: 1px;
- box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
- transition: all 0.1s ease;
+ border: 1px solid #ff00ff;
+ height: 18px;
+ width: 18px;
+ background: rgba(255, 0, 255, 0.1);
+ align-self: center;
+ /* biome-ignore lint/complexity/noImportantStyles: reasons */
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+ margin-right: 1px;
+ box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
+ transition: all 0.1s ease;
}
regular-layout.gibson regular-layout-frame::part(active-close):hover {
- background: rgba(255, 0, 255, 0.3);
- box-shadow: 0 0 12px rgba(255, 0, 255, 0.8);
+ background: rgba(255, 0, 255, 0.3);
+ box-shadow: 0 0 12px rgba(255, 0, 255, 0.8);
}
regular-layout.gibson regular-layout-frame::part(active-close):before {
- content: "×";
- font-size: 14px;
- font-weight: bold;
- color: #ff00ff;
- text-shadow: 0 0 4px rgba(255, 0, 255, 0.8);
+ content: "×";
+ font-size: 14px;
+ font-weight: bold;
+ color: #ff00ff;
+ text-shadow: 0 0 4px rgba(255, 0, 255, 0.8);
}
regular-layout.gibson regular-layout-frame::part(close) {
- display: none;
+ display: none;
}
-
regular-layout.gibson regular-layout-frame::part(titlebar) {
- display: flex;
- justify-content: flex-end;
- align-items: stretch;
- padding-left: 12px;
- height: 32px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: stretch;
+ padding-left: 12px;
+ height: 32px;
- /* border-bottom: 1px solid rgba(0, 255, 255, 0.3); */
+ /* border-bottom: 1px solid rgba(0, 255, 255, 0.3); */
}
regular-layout.gibson regular-layout-frame::part(tab) {
- display: flex;
- flex: 1 1 150px;
- max-width: 200px;
- align-items: center;
- padding: 0 5px 0 12px;
- cursor: pointer;
- text-overflow: ellipsis;
- background: rgba(255, 0, 255, 0.1);
- color: #00ffff;
- font-size: 11px;
- font-weight: 500;
- letter-spacing: 0.5px;
- text-transform: uppercase;
- /* border-right: 1px solid rgba(0, 255, 255, 0.2); */
- opacity: 0.6;
- transition: all 0.2s ease;
- text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
+ display: flex;
+ flex: 1 1 150px;
+ max-width: 200px;
+ align-items: center;
+ padding: 0 5px 0 12px;
+ cursor: pointer;
+ text-overflow: ellipsis;
+ background: rgba(255, 0, 255, 0.1);
+ color: #00ffff;
+ font-size: 11px;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+ /* border-right: 1px solid rgba(0, 255, 255, 0.2); */
+ opacity: 0.6;
+ transition: all 0.2s ease;
+ text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
}
regular-layout.gibson regular-layout-frame::part(tab):hover {
- box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.9);
+ box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.9);
}
regular-layout.gibson regular-layout-frame::part(active-tab) {
- background: rgba(0, 255, 255, 0.15);
- opacity: 1;
- border: 2px solid #00ffff;
- border-bottom-width: 1px;
- box-shadow:
- inset 0 0 12px rgba(0, 255, 255, 0.3),
- 0 0 8px rgba(0, 255, 255, 0.4);
+ background: rgba(0, 255, 255, 0.15);
+ opacity: 1;
+ border: 2px solid #00ffff;
+ border-bottom-width: 1px;
+ box-shadow:
+ inset 0 0 12px rgba(0, 255, 255, 0.3),
+ 0 0 8px rgba(0, 255, 255, 0.4);
}
regular-layout.gibson:has(.overlay) > * {
- opacity: 0.5;
+ opacity: 0.5;
}
regular-layout.gibson:has(.overlay) > .overlay {
- opacity: 1;
+ opacity: 1;
}
/* Frame in Overlay Mode */
regular-layout.gibson regular-layout-frame.overlay {
- background: rgba(255, 0, 255, 0.1);
- border: 1px dashed #ff00ff;
- border-radius: 12px;
- box-shadow:
- 0 0 15px rgba(255, 0, 255, 0.6),
- inset 0 0 20px rgba(255, 0, 255, 0.2);
- margin: 0;
- transition:
- top 0.075s ease-out,
- height 0.075s ease-out,
- width 0.075s ease-out,
- left 0.075s ease-out;
+ background: rgba(255, 0, 255, 0.1);
+ border: 1px dashed #ff00ff;
+ border-radius: 12px;
+ box-shadow:
+ 0 0 15px rgba(255, 0, 255, 0.6),
+ inset 0 0 20px rgba(255, 0, 255, 0.2);
+ margin: 0;
+ transition:
+ top 0.075s ease-out,
+ height 0.075s ease-out,
+ width 0.075s ease-out,
+ left 0.075s ease-out;
}
regular-layout.gibson regular-layout-frame::part(container) {
- display: none;
- border: 1px solid #00ffff;
- border-radius: 12px 0 12px 0;
+ display: none;
+ border: 1px solid #00ffff;
+ border-radius: 12px 0 12px 0;
}
regular-layout.gibson regular-layout-frame::part(titlebar) {
- display: none;
+ display: none;
}
regular-layout.gibson regular-layout-frame:not(.overlay)::part(container),
regular-layout.gibson regular-layout-frame:not(.overlay)::part(titlebar) {
- display: flex;
+ display: flex;
}
/* Cyberpunk color variations */
-regular-layout.gibson :nth-child(6n+1)::part(container) {
- border-color: #00ffff;
- box-shadow:
- 0 0 10px rgba(0, 255, 255, 0.75),
- inset 0 0 20px rgba(0, 255, 255, 0.1);
+regular-layout.gibson :nth-child(6n + 1)::part(container) {
+ border-color: #00ffff;
+ box-shadow:
+ 0 0 10px rgba(0, 255, 255, 0.75),
+ inset 0 0 20px rgba(0, 255, 255, 0.1);
}
-regular-layout.gibson :nth-child(6n+1)::part(tab) {
- color: #00ffff;
- text-shadow: 0 0 4px rgba(0, 255, 255, 0.6);
+regular-layout.gibson :nth-child(6n + 1)::part(tab) {
+ color: #00ffff;
+ text-shadow: 0 0 4px rgba(0, 255, 255, 0.6);
}
-regular-layout.gibson :nth-child(6n+1)::part(active-tab) {
- background: #00ffff44;
- border-color: #00ffff;
- box-shadow:
- inset 0 0 12px rgba(0, 255, 255, 0.3),
- 0 0 8px rgba(0, 255, 255, 0.4);
+regular-layout.gibson :nth-child(6n + 1)::part(active-tab) {
+ background: #00ffff44;
+ border-color: #00ffff;
+ box-shadow:
+ inset 0 0 12px rgba(0, 255, 255, 0.3),
+ 0 0 8px rgba(0, 255, 255, 0.4);
}
-regular-layout.gibson :nth-child(6n+2)::part(container) {
- border-color: #ff00ff;
- box-shadow:
- 0 0 10px rgba(255, 0, 255, 0.75),
- inset 0 0 20px rgba(255, 0, 255, 0.1);
+regular-layout.gibson :nth-child(6n + 2)::part(container) {
+ border-color: #ff00ff;
+ box-shadow:
+ 0 0 10px rgba(255, 0, 255, 0.75),
+ inset 0 0 20px rgba(255, 0, 255, 0.1);
}
-regular-layout.gibson :nth-child(6n+2)::part(tab) {
- color: #ff00ff;
- text-shadow: 0 0 4px rgba(255, 0, 255, 0.6);
+regular-layout.gibson :nth-child(6n + 2)::part(tab) {
+ color: #ff00ff;
+ text-shadow: 0 0 4px rgba(255, 0, 255, 0.6);
}
-regular-layout.gibson :nth-child(6n+2)::part(active-tab) {
- background: #ff00ff44;
- border-color: #ff00ff;
- box-shadow:
- inset 0 0 12px rgba(255, 0, 255, 0.3),
- 0 0 8px rgba(255, 0, 255, 0.4);
+regular-layout.gibson :nth-child(6n + 2)::part(active-tab) {
+ background: #ff00ff44;
+ border-color: #ff00ff;
+ box-shadow:
+ inset 0 0 12px rgba(255, 0, 255, 0.3),
+ 0 0 8px rgba(255, 0, 255, 0.4);
}
-regular-layout.gibson :nth-child(6n+3)::part(container) {
- border-color: #00ff00;
- box-shadow:
- 0 0 10px rgba(0, 255, 0, 0.75),
- inset 0 0 20px rgba(0, 255, 0, 0.1);
+regular-layout.gibson :nth-child(6n + 3)::part(container) {
+ border-color: #00ff00;
+ box-shadow:
+ 0 0 10px rgba(0, 255, 0, 0.75),
+ inset 0 0 20px rgba(0, 255, 0, 0.1);
}
-regular-layout.gibson :nth-child(6n+3)::part(tab) {
- color: #00ff00;
- text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
+regular-layout.gibson :nth-child(6n + 3)::part(tab) {
+ color: #00ff00;
+ text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
}
-regular-layout.gibson :nth-child(6n+3)::part(active-tab) {
- background: #00ff0044;
- border-color: #00ff00;
- box-shadow:
- inset 0 0 12px rgba(0, 255, 0, 0.3),
- 0 0 8px rgba(0, 255, 0, 0.4);
+regular-layout.gibson :nth-child(6n + 3)::part(active-tab) {
+ background: #00ff0044;
+ border-color: #00ff00;
+ box-shadow:
+ inset 0 0 12px rgba(0, 255, 0, 0.3),
+ 0 0 8px rgba(0, 255, 0, 0.4);
}
-regular-layout.gibson :nth-child(6n+4)::part(container) {
- border-color: #ff0080;
- box-shadow:
- 0 0 10px rgba(255, 0, 128, 0.75),
- inset 0 0 20px rgba(255, 0, 128, 0.1);
+regular-layout.gibson :nth-child(6n + 4)::part(container) {
+ border-color: #ff0080;
+ box-shadow:
+ 0 0 10px rgba(255, 0, 128, 0.75),
+ inset 0 0 20px rgba(255, 0, 128, 0.1);
}
-regular-layout.gibson :nth-child(6n+4)::part(tab) {
- color: #ff0080;
- text-shadow: 0 0 4px rgba(255, 0, 128, 0.6);
+regular-layout.gibson :nth-child(6n + 4)::part(tab) {
+ color: #ff0080;
+ text-shadow: 0 0 4px rgba(255, 0, 128, 0.6);
}
-regular-layout.gibson :nth-child(6n+4)::part(active-tab) {
- background: #ff008044;
- border-color: #ff0080;
- box-shadow:
- inset 0 0 12px rgba(255, 0, 128, 0.3),
- 0 0 8px rgba(255, 0, 128, 0.4);
+regular-layout.gibson :nth-child(6n + 4)::part(active-tab) {
+ background: #ff008044;
+ border-color: #ff0080;
+ box-shadow:
+ inset 0 0 12px rgba(255, 0, 128, 0.3),
+ 0 0 8px rgba(255, 0, 128, 0.4);
}
-regular-layout.gibson :nth-child(6n+5)::part(container) {
- border-color: #8000ff;
- box-shadow:
- 0 0 10px rgba(128, 0, 255, 0.75),
- inset 0 0 20px rgba(128, 0, 255, 0.1);
+regular-layout.gibson :nth-child(6n + 5)::part(container) {
+ border-color: #8000ff;
+ box-shadow:
+ 0 0 10px rgba(128, 0, 255, 0.75),
+ inset 0 0 20px rgba(128, 0, 255, 0.1);
}
-regular-layout.gibson :nth-child(6n+5)::part(tab) {
- color: #8000ff;
- text-shadow: 0 0 4px rgba(128, 0, 255, 0.6);
+regular-layout.gibson :nth-child(6n + 5)::part(tab) {
+ color: #8000ff;
+ text-shadow: 0 0 4px rgba(128, 0, 255, 0.6);
}
-regular-layout.gibson :nth-child(6n+5)::part(active-tab) {
- background: #8000ff44;
- border-color: #8000ff;
- box-shadow:
- inset 0 0 12px rgba(128, 0, 255, 0.3),
- 0 0 8px rgba(128, 0, 255, 0.4);
+regular-layout.gibson :nth-child(6n + 5)::part(active-tab) {
+ background: #8000ff44;
+ border-color: #8000ff;
+ box-shadow:
+ inset 0 0 12px rgba(128, 0, 255, 0.3),
+ 0 0 8px rgba(128, 0, 255, 0.4);
}
-regular-layout.gibson :nth-child(6n+6)::part(container) {
- border-color: #ffff00;
- box-shadow:
- 0 0 10px rgba(255, 255, 0, 0.75),
- inset 0 0 20px rgba(255, 255, 0, 0.1);
+regular-layout.gibson :nth-child(6n + 6)::part(container) {
+ border-color: #ffff00;
+ box-shadow:
+ 0 0 10px rgba(255, 255, 0, 0.75),
+ inset 0 0 20px rgba(255, 255, 0, 0.1);
}
-regular-layout.gibson :nth-child(6n+6)::part(tab) {
- color: #ffff00;
- text-shadow: 0 0 4px rgba(255, 255, 0, 0.6);
+regular-layout.gibson :nth-child(6n + 6)::part(tab) {
+ color: #ffff00;
+ text-shadow: 0 0 4px rgba(255, 255, 0, 0.6);
}
-regular-layout.gibson :nth-child(6n+6)::part(active-tab) {
- background: #ffff0044;
- border-color: #ffff00;
- box-shadow:
- inset 0 0 12px rgba(255, 255, 0, 0.3),
- 0 0 8px rgba(255, 255, 0, 0.4);
+regular-layout.gibson :nth-child(6n + 6)::part(active-tab) {
+ background: #ffff0044;
+ border-color: #ffff00;
+ box-shadow:
+ inset 0 0 12px rgba(255, 255, 0, 0.3),
+ 0 0 8px rgba(255, 255, 0, 0.4);
}
diff --git a/themes/hotdog.css b/themes/hotdog.css
index b4fefd6..596efea 100644
--- a/themes/hotdog.css
+++ b/themes/hotdog.css
@@ -11,78 +11,84 @@
*/
regular-layout.hotdog {
- background-color: #FF0000;
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
- padding: 24px;
+ background-color: #ff0000;
+ font-family:
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+ "Liberation Mono", monospace;
+ padding: 24px;
}
/* Frame */
regular-layout.hotdog regular-layout-frame {
- margin: 12px;
- background: #FFFF00;
- border-width: 2px;
- border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
- border-style: solid;
+ margin: 12px;
+ background: #ffff00;
+ border-width: 2px;
+ border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
+ border-style: solid;
+}
+
+regular-layout.hotdog regular-layout-frame::part(container) {
+ padding: 6px;
}
regular-layout.hotdog regular-layout-frame::part(close) {
- border-width: 1px;
- border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
- border-style: solid;
- height: 16px;
- background: #FF0000;
- align-self: center;
- display: flex;
- align-items: center;
- padding: 0px 4px;
- color: #FFFF00;
+ border-width: 1px;
+ border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
+ border-style: solid;
+ height: 16px;
+ background: #ff0000;
+ align-self: center;
+ display: flex;
+ align-items: center;
+ padding: 0px 4px;
+ color: #ffff00;
}
regular-layout.hotdog regular-layout-frame::part(close):before {
- content: "X";
- font-size: 10px;
- font-weight: bold;
+ content: "X";
+ font-size: 10px;
+ font-weight: bold;
}
regular-layout.hotdog regular-layout-frame::part(titlebar) {
- display: flex;
- align-items: stretch;
- padding-right: 0px;
+ display: flex;
+ align-items: stretch;
+ padding-right: 0px;
}
regular-layout.hotdog regular-layout-frame::part(tab) {
- display: flex;
- flex: 1 1 150px;
- align-items: center;
- padding: 0 3px 0 8px;
- cursor: pointer;
- text-overflow: ellipsis;
- background: #CC0000;
- color: #FFFF00;
- font-family: "Tahoma", "Arial", sans-serif;
- font-weight: bold;
- font-size: 11px;
+ display: flex;
+ flex: 1 1 150px;
+ align-items: center;
+ padding: 0 3px 0 8px;
+ cursor: pointer;
+ text-overflow: ellipsis;
+ background: #cc0000;
+ color: #ffff00;
+ font-family: "Tahoma", "Arial", sans-serif;
+ font-weight: bold;
+ font-size: 11px;
}
regular-layout.hotdog regular-layout-frame::part(active-tab) {
- background: #FF0000;
- opacity: 1;
+ background: #ff0000;
+ opacity: 1;
}
-regular-layout.hotdog:has(.overlay)>* {
- opacity: 0.8;
+regular-layout.hotdog:has(.overlay) > * {
+ opacity: 0.8;
}
-regular-layout.hotdog:has(.overlay)>.overlay {
- opacity: 1;
+regular-layout.hotdog:has(.overlay) > .overlay {
+ opacity: 1;
}
/* Frame in Overlay Mode */
regular-layout.hotdog regular-layout-frame.overlay {
- margin: 0;
- transition:
- top 0.1s ease-in-out,
- height 0.1s ease-in-out,
- width 0.1s ease-in-out,
- left 0.1s ease-in-out;
+ margin: 0;
+ transition:
+ top 0.1s ease-in-out,
+ height 0.1s ease-in-out,
+ width 0.1s ease-in-out,
+ left 0.1s ease-in-out;
}
diff --git a/themes/lorax.css b/themes/lorax.css
index 89017d8..be0318f 100644
--- a/themes/lorax.css
+++ b/themes/lorax.css
@@ -11,122 +11,127 @@
*/
regular-layout.lorax {
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
+ font-family:
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+ "Liberation Mono", monospace;
}
/* Frame */
regular-layout.lorax regular-layout-frame {
- margin: 3px;
- margin-top: 27px;
- border-radius: 0 6px 6px 6px;
- border: 1px solid #666;
- box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
+ margin: 3px;
+ margin-top: 27px;
+ border-radius: 0 6px 6px 6px;
+ border: 1px solid #666;
+ box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
+}
+
+regular-layout.lorax regular-layout-frame::part(container) {
+ padding: 6px;
}
regular-layout.lorax regular-layout-frame::part(titlebar) {
- display: flex;
- align-items: stretch;
- margin-left: -1px;
- margin-right: -1px;
- margin-bottom: 0px;
- margin-top: -24px;
- padding-right: 6px;
+ display: flex;
+ align-items: stretch;
+ margin-left: -1px;
+ margin-right: -1px;
+ margin-bottom: 0px;
+ margin-top: -24px;
+ padding-right: 6px;
}
regular-layout.lorax regular-layout-frame::part(tab) {
- display: flex;
- flex: 1 1 150px;
- align-items: center;
- text-align: center;
- font-size: 10px;
- padding: 0 6px;
- cursor: pointer;
- max-width: 150px;
- text-overflow: ellipsis;
- border: 1px solid #666;
- border-radius: 6px 6px 0 0;
- opacity: 0.5;
+ display: flex;
+ flex: 1 1 150px;
+ align-items: center;
+ text-align: center;
+ font-size: 10px;
+ padding: 0 6px;
+ cursor: pointer;
+ max-width: 150px;
+ text-overflow: ellipsis;
+ border: 1px solid #666;
+ border-radius: 6px 6px 0 0;
+ opacity: 0.5;
}
regular-layout.lorax regular-layout-frame::part(active-tab) {
- opacity: 1;
+ opacity: 1;
}
regular-layout.lorax regular-layout-frame::part(close) {
- border-radius: 7px;
- border: 1px solid #666;
- background: transparent;
- height: 14px;
- align-self: center
+ border-radius: 7px;
+ border: 1px solid #666;
+ background: transparent;
+ height: 14px;
+ align-self: center;
}
-
regular-layout.lorax regular-layout-frame::part(close):hover {
- transition: background-color 0.2s;
- background-color: rgba(255, 0, 0, 0.2);
+ transition: background-color 0.2s;
+ background-color: rgba(255, 0, 0, 0.2);
}
/* Frame in Overlay Mode */
regular-layout.lorax regular-layout-frame.overlay {
- background-color: rgba(0, 0, 0, 0.2);
- border: 1px dashed rgb(0, 0, 0);
- border-radius: 6px;
- margin: 3px;
- box-shadow: none;
- transition:
- top 0.1s ease-in-out,
- height 0.1s ease-in-out,
- width 0.1s ease-in-out,
- left 0.1s ease-in-out;
+ background-color: rgba(0, 0, 0, 0.2);
+ border: 1px dashed rgb(0, 0, 0);
+ border-radius: 6px;
+ margin: 3px;
+ box-shadow: none;
+ transition:
+ top 0.1s ease-in-out,
+ height 0.1s ease-in-out,
+ width 0.1s ease-in-out,
+ left 0.1s ease-in-out;
}
regular-layout.lorax regular-layout-frame::part(container),
regular-layout.lorax regular-layout-frame::part(titlebar) {
- display: none;
+ display: none;
}
regular-layout.lorax regular-layout-frame:not(.overlay)::part(container),
regular-layout.lorax regular-layout-frame:not(.overlay)::part(titlebar) {
- display: flex;
+ display: flex;
}
/* Colors */
-regular-layout.lorax :nth-child(8n+1),
-regular-layout.lorax :nth-child(8n+1)::part(tab) {
- background-color: #ffadadff;
+regular-layout.lorax :nth-child(8n + 1),
+regular-layout.lorax :nth-child(8n + 1)::part(tab) {
+ background-color: #ffadadff;
}
-regular-layout.lorax :nth-child(8n+2),
-regular-layout.lorax :nth-child(8n+2)::part(tab) {
- background-color: #ffd6a5ff;
+regular-layout.lorax :nth-child(8n + 2),
+regular-layout.lorax :nth-child(8n + 2)::part(tab) {
+ background-color: #ffd6a5ff;
}
-regular-layout.lorax :nth-child(8n+3),
-regular-layout.lorax :nth-child(8n+3)::part(tab) {
- background-color: #fdffb6ff;
+regular-layout.lorax :nth-child(8n + 3),
+regular-layout.lorax :nth-child(8n + 3)::part(tab) {
+ background-color: #fdffb6ff;
}
-regular-layout.lorax :nth-child(8n+4),
-regular-layout.lorax :nth-child(8n+4)::part(tab) {
- background-color: #caffbfff;
+regular-layout.lorax :nth-child(8n + 4),
+regular-layout.lorax :nth-child(8n + 4)::part(tab) {
+ background-color: #caffbfff;
}
-regular-layout.lorax :nth-child(8n+5),
-regular-layout.lorax :nth-child(8n+5)::part(tab) {
- background-color: #9bf6ffff;
+regular-layout.lorax :nth-child(8n + 5),
+regular-layout.lorax :nth-child(8n + 5)::part(tab) {
+ background-color: #9bf6ffff;
}
-regular-layout.lorax :nth-child(8n+6),
-regular-layout.lorax :nth-child(8n+6)::part(tab) {
- background-color: #a0c4ffff;
+regular-layout.lorax :nth-child(8n + 6),
+regular-layout.lorax :nth-child(8n + 6)::part(tab) {
+ background-color: #a0c4ffff;
}
-regular-layout.lorax :nth-child(8n+7),
-regular-layout.lorax :nth-child(8n+7)::part(tab) {
- background-color: #bdb2ffff;
+regular-layout.lorax :nth-child(8n + 7),
+regular-layout.lorax :nth-child(8n + 7)::part(tab) {
+ background-color: #bdb2ffff;
}
-regular-layout.lorax :nth-child(8n+8),
-regular-layout.lorax :nth-child(8n+8)::part(tab) {
- background-color: #ffc6ffff;
-}
\ No newline at end of file
+regular-layout.lorax :nth-child(8n + 8),
+regular-layout.lorax :nth-child(8n + 8)::part(tab) {
+ background-color: #ffc6ffff;
+}
