Skip to content

Instantly share code, notes, and snippets.

@marktenney

marktenney/wireframing-styles.css

Created October 27, 2021 14:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marktenney/cf54f0e84a0b15f25aee21262b94e51f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marktenney/cf54f0e84a0b15f25aee21262b94e51f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. marktenney created this gist Oct 27, 2021.
    160 changes: 160 additions & 0 deletions wireframing-styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,160 @@
    /* Styles for wireframes at dev.digitalchurch.website/wireframe */

    .bg-img-placeholder > .fl-row-content-wrap,
    .bg-img-placeholder > .fl-col-content {
    background-color: #1a202b;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMTQxNjFiIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDQwTDQwIDBIMjBMMCAyME00MCA0MFYyMEwyMCA0MCIvPjwvZz48L3N2Zz4=);
    background-size: 24px;
    }

    .fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * {
    color:unset;
    }

    .fl-builder-content a.fl-button,
    .fl-builder-content a.fl-button:visited {
    background-color:var(--global-palette-btn-bg);
    color:var(--global-palette-btn);
    }
    .primary-button-light a:hover,
    .primary-button-light a:active,
    .fl-builder-content a.fl-button:hover,
    .fl-builder-content a.fl-button:active {
    background-color:var(--global-palette2);
    color:var(--global-palette-btn-hover);
    }

    .fl-builder-content .transparent-button-light a.fl-button,
    .fl-builder-content .transparent-button-light a.fl-button:visited {
    background-color:transparent;
    border:2px solid var(--global-palette-btn-bg);
    color:var(--global-palette-btn-bg);
    }

    .transparent-button-light span {
    color:var(--global-palette-btn-bg);
    }

    .fl-builder-content .transparent-button-light a.fl-button:hover {
    background-color:var(--global-palette2);
    background-color:var(--global-palette-btn-bg-hover);
    border-color:var(--global-palette2);
    border-color:var(--global-palette-btn-bg-hover);
    color:#ffffff;
    color:var(--global-palette9);
    color:var(--global-palette-btn-hover);
    }

    .transparent-button-light a:hover span {
    color:var(--global-palette-btn-hover);
    }

    .button-link-light a.fl-button {
    background-color:transparent;
    border:none;
    color:var(--global-palette-btn-bg);
    }

    .button-link-light a.fl-button:hover {
    background-color:transparent;
    border:none;
    color:var(--global-palette-btn-bg-hover);
    }

    .button-link-light span,
    .button-link-light i.fl-button-icon-after {
    color:var(--global-palette1);
    }

    .button-link-light span:hover,
    .button-link-light .fl-button-icon-after i:hover {
    color:var(--global-palette2);
    }

    .button-group-light a,
    .button-group-light a:visited {
    background:var(--global-palette-btn-bg);
    }

    .button-group-light a.fl-button:hover {
    background:var(--global-palette-btn-bg-hover);
    }

    .button-group-dark a.fl-button,
    .button-group-dark a.fl-button:visited {
    background:var(--global-palette-btn-bg);
    }

    .button-group-dark a.fl-button:hover {
    background:var(--global-palette-btn-bg-hover);
    }

    .fl-builder-content .fl-accordion-button {
    background-color:var(--global-palette8);
    }

    .fl-builder-content .fl-accordion .fl-accordion-content {
    background-color:var(--global-palette8);
    }

    .fl-builder-content .accordion-dark .fl-accordion-button {
    background-color:var(--global-palette4);
    }

    .fl-builder-content .accordion-dark .fl-accordion .fl-accordion-content {
    background-color:var(--global-palette4);
    }

    .brand-page-dotnav .pp-dotnav .pp-dot a:hover .pp-dot-circle {
    background-color: var(--global-palette1);
    }

    a.fl-tab-active {
    color:var(--global-palette1);
    }

    .fl-tabs-panels,
    .fl-tabs-label.fl-tab-active {
    background-color:var(--global-palette8);
    }

    .fl-builder-content .tabs-dark .fl-tabs-panels,
    .fl-builder-content .tabs-dark .fl-tabs-label.fl-tab-active {
    background-color:var(--global-palette4);
    }

    .light-bg > .fl-row-content-wrap,
    .light-bg > .fl-col-content {
    background-color:var(--global-palette9);
    }

    .lighter-bg > .fl-row-content-wrap,
    .lighter-bg > .fl-col-content {
    background-color:var(--global-palette8);
    }

    .subtle-bg > .fl-row-content-wrap,
    .subtle-bg > .fl-col-content {
    background-color:var(--global-palette7);
    }

    .fl-builder-content .primary-brand-text :not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) span.fl-heading-text {
    color: var(--global-palette1);
    }

    .fl-builder-content .secondary-brand-text :not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) span.fl-heading-text {
    color: var(--global-palette2);
    }

    .fl-builder-content .subtle-text :not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) span.fl-heading-text {
    color: var(--global-palette6);
    }

    .fl-builder-content .dark .subtle-text :not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) span.fl-heading-text {
    color: var(--global-palette7);
    }

    .fl-builder-content .highlight-text :not(input):not(textarea):not(select):not(a):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fl-menu-mobile-toggle) span.fl-heading-text {
    background: var(--global-palette1);
    padding:4px;
    }