Skip to content

07 LIGHT X by ItsJonQ

Details

AuthorItsJonQ

LicenseNo License

Categorywebflow.com

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A new userstyle

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           07 LIGHT X
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("design.webflow.com") {
    html:not([data-wf-site]) body,
    html:not([data-wf-site]) body [data-theme] {
        --box-shadows-action-colored: 0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2);
        --box-shadows-action-secondary: 0px 0.5px 1px rgba(0, 0, 0, 0.25);
        --box-shadows-input-inner: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.01), inset 0px 12px 12px -12px rgba(0, 0, 0, 0.01), inset 0px 8px 8px -8px rgba(0, 0, 0, 0.02), inset 0px 4px 4px -4px rgba(0, 0, 0, 0.02), inset 0px 3px 3px -3px rgba(0, 0, 0, 0.02), inset 0px 1px 1px -1px rgba(0, 0, 0, 0.04);
        --box-shadows-menu: 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset, 0px 12px 24px 8px rgba(0, 0, 0, 0.04), 0px 8px 16px 4px rgba(0, 0, 0, 0.04), 0px 4px 8px 2px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
        --box-shadows-ui-select: ;
        --colors-action-primary-background: var(--wf-system---brand-blue-200);
        --colors-action-primary-background-hover: var(--wf-system---brand-blue-100);
        --colors-action-primary-text: var(--wf-system---white);
        --colors-action-primary-text-hover: var(--wf-system---white);
        --colors-action-secondary-background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%), var(--wf-system---gray-100);
        --colors-action-secondary-background-hover: var(--wf-system---gray-200);
        --colors-action-secondary-background-pressed: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%), var(--wf-system---gray-100);
        --colors-action-secondary-border: var(--wf-system---black-a-10);
        --colors-action-secondary-border-hover: var(--wf-system---black-a-16);
        --colors-action-secondary-selected-background: var(--wf-system---white);
        --colors-action-secondary-selected-background-pressed: var(--wf-system---white);
        --colors-action-secondary-text: var(--wf-system---black);
        --colors-action-secondary-text-hover: var(--wf-system---black);
        --colors-background-1: var(--wf-system---white);
        --colors-background-2: var(--wf-system---gray-0);
        --colors-background-3: var(--wf-system---gray-100);
        --colors-background-4: var(--wf-system---gray-200);
        --colors-background-5: var(--wf-system---gray-300);
        --colors-background-inactive: var(--wf-system---gray-0);
        --colors-background-inverse: var(--wf-system---black);
        --colors-background-inverse-hover: var(--wf-system---black);
        --colors-blue-background: var(--wf-system---brand-blue-200);
        --colors-blue-background-hover: var(--wf-system---brand-blue-100);
        --colors-blue-background-pressed: var(--wf-system---brand-blue-200);
        --colors-blue-border: var(--wf-system---brand-blue-200);
        --colors-blue-canvas: var(--wf-system---brand-blue-200);
        --colors-blue-canvas-hover: var(--wf-system---brand-blue-400);
        --colors-blue-canvas-transparent: var(--wf-system---blue-a-10);
        --colors-blue-icon: var(--wf-system---brand-blue-200);
        --colors-blue-outline: 0 0 0 2px var(--wf-system---brand-blue-a-20);
        --colors-blue-text: var(--wf-system---brand-blue-200);
        --colors-blue-transparent: var(--wf-system---brand-blue-a-10);
        --colors-blue-transparent-hover: var(--wf-system---brand-blue-a-20);
        --colors-border-1: var(--wf-system---gray-100);
        --colors-border-2: var(--wf-system---gray-200);
        --colors-border-3: var(--wf-system---gray-300);
        --colors-border-4: var(--wf-system---gray-200);
        --colors-close-button-background: var(--wf-system---black-a-10);
        --colors-gray-icon: var(--wf-system---gray-700);
        --colors-green-background: var(--wf-system---green-300);
        --colors-green-background-hover: var(--wf-system---green-200);
        --colors-green-background-pressed: var(--wf-system---green-300);
        --colors-green-border: var(--wf-system---green-400);
        --colors-green-canvas: var(--wf-system---green-400);
        --colors-green-canvas-hover: var(--wf-system---green-300);
        --colors-green-canvas-transparent: var(--wf-system---green-a-10);
        --colors-green-icon: var(--wf-system---green-300);
        --colors-green-outline: 0 0 0 2px var(--wf-system---green-a-20);
        --colors-green-text: var(--wf-system---green-300);
        --colors-green-transparent: var(--wf-system---green-a-10);
        --colors-green-transparent-hover: var(--wf-system---green-a-20);
        --colors-orange-background: var(--wf-system---orange-300);
        --colors-orange-background-hover: var(--wf-system---orange-200);
        --colors-orange-background-pressed: var(--wf-system---orange-300);
        --colors-orange-border: var(--wf-system---orange-400);
        --colors-orange-canvas: var(--wf-system---orange-400);
        --colors-orange-canvas-hover: var(--wf-system---orange-300);
        --colors-orange-canvas-transparent: var(--wf-system---orange-a-10);
        --colors-orange-icon: var(--wf-system---orange-300);
        --colors-orange-text: var(--wf-system---orange-300);
        --colors-orange-transparent: var(--wf-system---orange-a-10);
        --colors-orange-transparent-hover: var(--wf-system---orange-a-20);
        --colors-pink-background: var(--wf-system---pink-300);
        --colors-pink-background-hover: var(--wf-system---pink-200);
        --colors-pink-background-pressed: var(--wf-system---pink-300);
        --colors-pink-border: var(--wf-system---pink-400);
        --colors-pink-canvas: var(--wf-system---pink-400);
        --colors-pink-canvas-hover: var(--wf-system---pink-300);
        --colors-pink-canvas-transparent: var(--wf-system---pink-a-10);
        --colors-pink-icon: var(--wf-system---pink-300);
        --colors-pink-outline: 0 0 0 2px var(--wf-system---pink-a-20);
        --colors-pink-text: var(--wf-system---pink-300);
        --colors-pink-transparent: var(--wf-system---pink-a-10);
        --colors-pink-transparent-hover: var(--wf-system---pink-a-20);
        --colors-purple-background: var(--wf-system---purple-300);
        --colors-purple-background-hover: var(--wf-system---purple-200);
        --colors-purple-background-pressed: var(--wf-system---purple-300);
        --colors-purple-border: var(--wf-system---purple-400);
        --colors-purple-canvas: var(--wf-system---purple-400);
        --colors-purple-canvas-hover: var(--wf-system---purple-300);
        --colors-purple-canvas-transparent: undefined
        --colors-purple-icon: var(--wf-system---purple-300);
        --colors-purple-outline: 0 0 0 2px var(--wf-system---purple-a-20);
        --colors-purple-text: var(--wf-system---purple-300);
        --colors-purple-transparent: var(--wf-system---purple-a-10);
        --colors-purple-transparent-hover: var(--wf-system---purple-a-20);
        --colors-red-background: var(--wf-system---red-300);
        --colors-red-background-hover: var(--wf-system---red-200);
        --colors-red-background-pressed: var(--wf-system---red-300);
        --colors-red-border: var(--wf-system---red-400);
        --colors-red-canvas: var(--wf-system---red-400);
        --colors-red-canvas-hover: var(--wf-system---red-300);
        --colors-red-canvas-transparent: var(--wf-system---red-a-10);
        --colors-red-icon: var(--wf-system---red-300);
        --colors-red-outline: 0 0 0 2px var(--wf-system---red-a-20);
        --colors-red-text: var(--wf-system---red-300);
        --colors-red-transparent: var(--wf-system---red-a-10);
        --colors-red-transparent-hover: var(--wf-system---red-a-20);
        --colors-text-4: var(--wf-system---gray-600);
        --colors-text-active: var(--wf-system---black);
        --colors-text-default: var(--wf-system---gray-800);
        --colors-text-heading: var(--wf-system---black);
        --colors-text-inverse: var(--wf-system---gray-0);
        --colors-text-placeholder: var(--wf-system---gray-500);
        --colors-text-secondary: var(--wf-system---gray-600);
        --colors-title: var(--wf-system---black);
        --colors-ui-background-hover: var(--wf-system---gray-0);
        --colors-ui-badge-background: var(--wf-system---gray-100);
        --colors-ui-badge-background-hover: var(--wf-system---gray-200);
        --colors-ui-badge-background-pressed: var(--wf-system---gray-100);
        --colors-ui-border-solid: var(--wf-system---gray-100);
        --colors-ui-button-group-active: var(--wf-system---black-a-50);
        --colors-ui-canvas-background: var(--wf-system---gray-100);
        --colors-ui-card-background: var(--wf-system---gray-100);
        --colors-ui-checkbox-radio-border-color: var(--wf-system---gray-200);
        --colors-ui-input-background: var(--wf-system---white);
        --colors-ui-input-border-color: var(--wf-system---gray-100);
        --colors-ui-input-border-color-hover: var(--wf-system---gray-200);
        --colors-ui-menu-content-background: var(--wf-system---gray-0);
        --colors-ui-menu-divider: var(--wf-system---gray-300);
        --colors-ui-modal-backdrop: var(--wf-system---black-a-80);
        --colors-ui-note-background: var(--wf-system---gray-0);
        --colors-ui-popover-backdrop: var(--wf-system---black-a-50);
        --colors-ui-select-background: var(--wf-system---white);
        --colors-ui-select-background-hover: var(--wf-system---gray-0);
        --colors-ui-select-border: var(--wf-system---gray-100);
        --colors-ui-table-zebra-stripe-background: ;
        --colors-yellow-background: var(--wf-system---yellow-400);
        --colors-yellow-background-hover: var(--wf-system---yellow-100);
        --colors-yellow-background-pressed: var(--wf-sys...

Reviews

No reviews yet.