00 Designer - Base theme by ItsJonQ

/* ==UserStyle==
@name           00 Designer - Base theme
@namespace      github.com/openstyles/stylus
@version        1.1.0
@description    BASE THEME.
@author         Me
==/UserStyle== */

@-moz-document domain("design.webflow.com"), url-prefix("https://webflow.com/design") {
    html body {
      /* Text */
      --wf-system---gray-0: #f9f9f9;
      --wf-system---gray-200: #E8E8E8;
      --wf-system---gray-400: #C4C4C4;
      --wf-system---gray-500: #A6A6A6;
      /* Backgrounds */
      --wf-system---gray-800: #545454;
      --wf-system---gray-900: #545454;
      --wf-system---gray-1000: #434343;
      --wf-system---gray-1100: #363636;
      --wf-system---gray-1200: #292929;
    }
    
    /* Headings */
    html [data-theme="d2Dark"],
    html [data-wf-size-context="medium"] {
        --typography-unified-font-size-title: 13px;
        --typography-unified-font-size-heading: 13px;
        --typography-unified-font-size-subheading: 13px;
        --wf-designer--fontSize4: var(--typography-unified-font-size-title);
        --wf-designer--fontSize5: var(--typography-unified-font-size-title);
        --wf-designer--fontSize6: var(--typography-unified-font-size-title);
        --wf-designer--fontSize8: var(--typography-unified-font-size-title);
        --wf-designer--fontSize10: var(--typography-unified-font-size-title);
        --wf-designer--fontHeading: var(--typography-unified-font-size-title);
    }
    [style*="font-size: 12.5px;"] {
        font-size: var(--typography-unified-font-size-title) !important;
    }
    .right-sidebar > .tabs > .tab span {
        font-weight: 600 !important;
    }
    
    /* Margin/Padding controls */
    path[fill="#303030"] {
        fill: var(--chart-data-series-d2-gray-1000);
    }
    path[fill="#2B2B2B"] {
        fill: var(--chart-data-series-d2-gray-1100);
    }
    
    /* Controls */
    [data-theme="d2Dark"] {
      --colors-action-secondary-background: linear-gradient(rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.12) 100%);
      --colors-action-secondary-selected-background: rgba(0,0,0,0.52);
    }
    [style*="linear-gradient(rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%)"] {
        background: var(--colors-action-secondary-background) !important;
    }
    
    /* Inputs */
    html [data-theme="d2Dark"] {
        --colors-ui-input-background: rgba(0, 0, 0, 0.20);
        --colors-ui-input-border: rgba(255, 255, 255, 0.16);
        --wf-designer--inputColor: var(--colors-ui-input-background);
        --wf-designer--inputColorHover: var(--colors-ui-input-background);
    }
    [style*="background: rgba(0, 0, 0, 0.15)"],
    [style*="background-color: rgba(0, 0, 0, 0.15)"] {
        background: var(--colors-ui-input-background) !important;
    }
    
    .bem-TagSelect .selectize-control .selectize-input > input {
        background: none !important;
    }
    
    [style*="rgba(255, 255, 255, 0.14)"] {
        border-color: var(--colors-ui-input-border) !important;
    }
    
    /* Notes */
    html [data-theme="d2Dark"] { 
        --colors-ui-note-background: rgba(255, 255, 255, 0.08);
    }
    [style*="background: var(--chart-data-series-d2-gray-900);"] {
        background: var(--colors-ui-note-background) !important;
    }
    
    
    
    
    
    
    /* Copied/Pasted. Needed to connect colors to less styles. No code changes. */
    html body {
      --wf-designer--textColorLight: var(--chart-data-series-d2-gray-0, #f5f5f5);
    --wf-designer--textColor: var(--chart-data-series-d2-gray-0, #f5f5f5);
    --wf-designer--textColorPreloader: var(--chart-data-series-d2-gray-500, #a3a3a3);
    --wf-designer--textColorDim: var(--chart-data-series-d2-gray-500, #a3a3a3);
    --wf-designer--textColorDimmer: var(--chart-data-series-d2-gray-500, #a3a3a3);
    --wf-designer--notificationTextColor: var(--chart-data-series-d2-gray-0, #f5f5f5);
    --wf-designer--panelColor: var(--chart-data-series-d2-gray-1200, #1e1e1e);
    --wf-designer--panelColorLight: var(--chart-data-series-d2-gray-1200, #1e1e1e);
    --wf-designer--panelColorLighter: var(--chart-data-series-d2-gray-1100, #2e2e2e);
    --wf-designer--panelColorDark: var(--chart-data-series-d2-gray-1200, #1e1e1e);
    --wf-designer--panelBorder: rgba(255, 255, 255, 0.13);
    --wf-designer--panelHeadDividerBorder: none;
    --wf-designer--panelShadow: none;
    --wf-designer--panelShadowLast: none;
    --wf-designer--panelTabBackground: transparent;
    --wf-designer--panelTabsShadow: 0 -1px 0 0 rgba(255, 255, 255, 0.13) inset;
    --wf-designer--panelTabBarShadow: 0 -1px 0 0 rgba(255, 255, 255, 0.13);
    --wf-designer--panelActiveShadow: 0 -1px 0 var(--chart-data-series-d2-gray-500, #a3a3a3) inset;
    --wf-designer--panelActiveShadowLast: var(--wf-designer--panelActiveShadow);
    --wf-designer--token-input-background-disabled: var(--chart-data-series-d2-gray-100, #ebebeb);
    --wf-designer--token-input-text-disabled: var(--chart-data-series-d2-gray-1200, #1e1e1e);
    --wf-designer--borderColor: rgba(255, 255, 255, 0.14);
    --wf-designer--borderColorDark: rgba(255, 255, 255, 0.13);
    --wf-designer--borderColorDarker: rgba(255, 255, 255, 0.13);
    --wf-designer--listColor: var(--chart-data-series-d2-gray-1100, #2e2e2e);
    --wf-designer--listColorHover: var(--chart-data-series-d2-gray-1000, #383838);
    --wf-designer--listBorderColor: rgba(255, 255, 255, 0.14);
    --wf-designer--listSourceBorderColor: rgba(255, 255, 255, 0.19);
    --wf-designer--listRowBackgroundHover: var(--chart-data-series-d2-gray-1000, #383838);
    --wf-designer--listRowSelectedBackground: var(--chart-data-series-d2-gray-1000, #383838);
    --wf-designer--listRowBorder: none;
    --wf-designer--listRowBigHeight: 32px;
    --wf-designer--listGridBorder: none;
    --wf-designer--listRowColorHover: var(--chart-data-series-d2-gray-1100, #2e2e2e);
    --wf-designer--paneHeadHeight: 40px;
    --wf-designer--paneCardColor: var(--chart-data-series-d2-gray-1100, #2e2e2e);
    --wf-designer--paneCardBorder: 1px solid transparent;
    --wf-designer--tooltipColor: var(--chart-data-series-d2-gray-1000, #383838);
    --wf-designer--tooltipColorText: var(--chart-data-series-d2-gray-400, #bdbdbd);
    --wf-designer--canvasColor: var(--chart-data-series-d2-gray-800, #444444);
    --wf-designer--canvasColorDark: var(--chart-data-series-d2-gray-1200, #1e1e1e);
    --wf-designer--canvasColorDarker: var(--chart-data-series-d2-gray-1000, #383838);
    --wf-designer--breadcrumbColor: var(--chart-data-series-d2-gray-1200, #1e1e1e);
    --wf-designer--breadcrumbTextColor: var(--chart-data-series-d2-gray-400, #bdbdbd);
    --wf-designer--breadcrumbRulerColor: rgba(255, 255, 255, 0.19);
    --wf-designer--popoverBackground: var(--chart-data-series-d2-gray-1100, #2e2e2e);
    --wf-designer--popoverHeaderBackground: var(--chart-data-series-d2-gray-1100, #2e2e2e);
    --wf-designer--popoverShadow: 0px 2px 6px rgba(0, 0, 0, 0.08), 0px 4px 8px 2px rgba(0, 0, 0, 0.08), 0px 8px 16px 4px rgba(0, 0, 0, 0.08), 0px 12px 24px 8px rgba(0, 0, 0, 0.08), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.12), inset 0px -0.5px 0.5px rgba(0, 0, 0, 0.12);
    --wf-designer--popoverBorder: none;
    --wf-designer--menuBackground: var(--chart-data-series-d2-gray-1000, #383838);
    --wf-designer--menuBorder: none;
    --wf-designer--menuCardOffset: 4px;
    --wf-designer--menuCardTopBorderRadius: var(--wf-designer--radius);
    --wf-designer--menuDividerColor: rgba(255, 255, 255, 0.13);
    --wf-designer--menuItemPadding: 3px 8px;
    --wf-designer--menuItemLineHeight: 18px;
    --wf-designer--menuItemHoverBackground: var(--chart-data-series-d2-gray-800, #444444);
    --wf-designer--menuItemHoverColor: var(--chart-data-series-d2-gray-0, #f5f5f5);
    --wf-designer--menuItemCaretOffset: 0px;
    --wf-designer--modalBackground: var(--chart-data-series-d2-gray-1100, #2e2e2e);
    --wf-designer--modalHeaderBackground: transparent;
    --wf-designer--modalHeaderHeight: 32px;
    --wf-designer--modalPadding: 8px;
    --wf-designer--modalShadow: var(--wf-designer--popoverShadow);
    --wf-designer--miniSettingsModalBackground: var(--chart-data-series-d2-gray-1200, #1e1e1e);
    --wf-designer--maskCanvas: rgba(0, 0, 0, 0.6);
    --wf-designer--maskPanel: rgba(0, 0, 0, 0.6);
    --wf-designer--maskLoading: rgba(0, 0, 0, 0.8);
    --wf-designer--notificationColor: rgba(0, 0, 0, 0.8);
    --wf-designer--pillBackground: rgba(255, 255, 255, 0.1);
    --wf-designer--buttonText: var(--chart-data-series-d2-gray-0, #f5f5f5);
    --wf-designer--buttonColor: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%);
    --wf-designer--buttonColorHover: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%);
    --wf-designer--buttonColorActive: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%);
    --wf-designer--buttonBorder: none;
    --wf-designer--buttonBoxShadow: 0px 0.5px 1px rgba(0, 0, 0, 0.8), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.12);
    --wf-designer--buttonHeadHeight: var(--wf-designer--controlBigHeight);
    --wf-designer--buttonHeadLineHeight: 1;
    --wf-designer--inputColor: rgba(0, 0, 0, 0.15);
    --wf-designer--inputColorHover: rgba(0, 0, 0, 0.15);
    --wf-designer--inputBorderColor: rgba(255, 255, 255, 0.14);
    --wf-designer--inputBorderColorHover: rgba(255, 255, 255, 0.19);
    --wf-designer--inputBoxShadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset, 0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset, 0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset, 0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset, 0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset, 0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset;
    --wf-designer--inputTickWidth: 16px;
    --wf-designer--inputPaddingX: 9px;
    --wf-designer--inputPaddingY: 4px;
    --wf-designer--switchColor: var(--chart-data-series-d2-gray-1000, #383838);
    --wf-designer--switchKnobColor: var(--chart-data-series-d2-white, #ffffff);
    --wf-d...