maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
docbrown/app/assets/stylesheets/themes/dark.css
Rajat Talesra 992ced1908
Tag moderation UI changes (#19906) 
* Basic add remove functionality with few tests

* Updated cypress test and added more unit tests

* Rename display ads vars in the views (#19877)

* Renamed display_ads vars to billboards

* Rename local vars in the feed view

* Renamed display-ad in the comment

Co-authored-by: Rajat Talesra <rajattalesra4914@gmail.com>

* Renamed variables in the views

---------

Co-authored-by: Rajat Talesra <rajattalesra4914@gmail.com>

* Update js-routes to version 2.2.7 (#19883)

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>

* add field for billboard target geolocations, with unit and e2e tests (#19855)

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: Duke Greene <dukegreene@gmail.com>
Co-authored-by: PJ <pj@forem.com>
Co-authored-by: Anna Buianova <lightallloy@gmail.com>
Co-authored-by: Mac Siri <mac@forem.com>
Co-authored-by: zhangted <tedcbook@gmail.com>
Co-authored-by: Josh Klar <jklar@forem.com>

* Added autocomplete value off (#19882)

* Bust cache of organization page when new member is added (#19861)

* Remove unused freezeScrolling (#19808)

* Remove unused freezeScrolling

* chore: try see if this helps to skip the flakey test that wasn't being skipped

* chore: try see if this helps to skip the flakey test that wasn't being skipped

* oops: revert the gemfile changes

---------

Co-authored-by: Mai Irie <mai@forem.com>
Co-authored-by: Mac Siri <mac@forem.com>
Co-authored-by: Ridhwana <ridhwana.khan16@gmail.com>

* ci: Allow workflow_dispatch runs to log in to GHCR. (#19885)

* ci: Fix base image builder... the right way... (#19889)

* Update postcss to version 8.4.27 (#19888)

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>

* Replace uses of toBeDefined with toExist  (#19862)

* Replaced toBeDefined with toExist

* Revert db changes

* Rename display ads to billboards: css and js code (#19887)

* Renamed js vars/css names

* Renamed display_ads to billboards in js functions, variables, components

* [ruby] Update sidekiq-unique-jobs 7.1.29 → 7.1.30 (patch) (#19902)

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>

* Update oj to version 3.15.1 (#19901)

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>

* Updated failing cypress test

* Removed commented code

* Attempt at fixing tests

* Fixed failing tests

* Added more tests

* Basic color and design changes part -1

* Disable/Enable buttons correctly

* Various design updates in Tag adjustement mod UI

* I18N and documentation

* Updated mod panel

* Fixed mod related cypress tests

* Minor design fixes

* Dark mode designs

* Test update

* Mod UI with some bugs

* Updated/simplified code fully-working

* Updated tests

* Added more tests

* Accessibility improvements

* hr line code fix

* Close mod icon bug fix

* Nit fixes

* Design fixes as suggested by Anuj.

* Design fixes

* Dark mode file usage

* Design fixes

* Nit fixes

---------

Co-authored-by: Anna Buianova <lightallloy@gmail.com>
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: Duke Greene <dukegreene@gmail.com>
Co-authored-by: PJ <pj@forem.com>
Co-authored-by: Mac Siri <mac@forem.com>
Co-authored-by: zhangted <tedcbook@gmail.com>
Co-authored-by: Josh Klar <jklar@forem.com>
Co-authored-by: Joshua Wehner <joshua@forem.com>
Co-authored-by: Mai Irie <mai@forem.com>
Co-authored-by: Ridhwana <ridhwana.khan16@gmail.com>
2023-08-24 00:31:21 +05:30

398 lines
13 KiB
CSS
Raw Blame History

:root {
color-scheme: dark;
--theme-secondary-color: #cedae2;
--theme-container-background: #141f2d;
--theme-container-accent-background: #202c3d;
--theme-container-background-hover: #1c2c3f;
--theme-container-box-shadow: none;
--theme-container-border: 1px solid #22303f;
--theme-social-icon-invert: invert(100%);
--theme-color: #ffffff;
/* Base */
--base: #f9f9f9;
--base-inverted: #000;
--base-100: var(--base);
--base-90: #efefef;
--base-80: #d6d6d7;
--base-70: #bdbdbd;
--base-60: #a3a3a3;
--base-50: #8a8a8a;
--base-40: #717171;
--base-30: #575757;
--base-20: #3d3d3d;
--base-10: #242424;
--base-0: #090909;
/* Brand */
--accent-brand-lighter: rgb(var(--indigo-400));
--accent-brand: rgb(var(--indigo-500));
--accent-brand-darker: rgb(var(--indigo-600));
/* Success */
--accent-success: rgb(var(--green-600));
--accent-success-darker: rgb(var(--green-700));
--accent-success-lighter: rgb(var(--green-500));
--accent-success-a10: rgba(var(--green-600), 0.2);
/* Warning */
--accent-warning: rgb(var(--yellow-500));
--accent-warning-darker: rgb(var(--yellow-600));
--accent-warning-lighter: rgb(var(--yellow-400));
--accent-warning-a10: rgba(var(--yellow-500), 0.2);
/* Danger */
--accent-danger: rgb(var(--red-600));
--accent-danger-darker: rgb(var(--red-700));
--accent-danger-lighter: rgb(var(--red-500));
--accent-danger-a10: rgba(var(--red-600), 0.2);
/***********************************************
** Functional color variables. *****************
***********************************************/
/* Main colors */
--body-bg: rgb(var(--black));
--body-color: rgb(var(--grey-50));
--body-color-inverted: rgb(var(--black));
/* Main content containers */
--card-bg: rgb(var(--grey-900));
--card-color: rgb(var(--grey-50));
--card-color-secondary: rgb(var(--grey-300));
--card-color-tertiary: rgb(var(--grey-400));
--card-secondary-bg: rgb(var(--grey-900));
--card-secondary-color: rgb(var(--grey-200));
--card-tertiary-bg: rgb(var(--grey-800));
--card-tertiary-bg-hover: rgba(var(--grey-800), 0.9);
--card-border: rgba(var(--white), 0.15);
--card-secondary-border: rgba(var(--white), 0.1);
/* Header */
--header-bg: rgb(var(--grey-900));
--header-shadow: rgb(var(--black));
/* Footer */
--footer-bg: rgb(var(--grey-900));
--footer-color: rgb(var(--grey-400));
/* Links */
--link-bg-hover-alt: rgba(var(--base-inverted));
--link-color-current: var(--base-100);
--link-color-secondary: var(--base-70);
--link-color-secondary-hover: var(--base-80);
--link-bg-current: var(--base-inverted);
/* Primary buttons */
--button-primary-bg: var(--accent-brand-darker);
--button-primary-bg-hover: var(--accent-brand);
--button-primary-color: rgb(var(--white));
--button-primary-color-hover: rgb(var(--white));
/* -- Inverted */
--button-primary-inverted-bg: var(--accent-brand);
--button-primary-inverted-bg-hover: var(--accent-brand-lighter);
--button-primary-inverted-color: var(--base-0);
--button-primary-inverted-color-hover: var(--base-0);
/* Secondary buttons */
--button-secondary-bg: var(--base-20);
--button-secondary-bg-hover: var(--base-30);
--button-secondary-color: var(--base-80);
--button-secondary-color-hover: var(--base-100);
/* Outlined buttons */
--button-outlined-bg: transparent;
--button-outlined-bg-hover: rgba(255, 255, 255, 0.035);
--button-outlined-border: var(--base-20);
--button-outlined-border-hover: var(--base-30);
--button-outlined-color: var(--base-80);
--button-outlined-color-hover: var(--base-100);
/* Ghost buttons */
--button-ghost-bg: transparent;
--button-ghost-bg-hover: rgba(255, 255, 255, 0.035);
--button-ghost-color: var(--base-80);
--button-ghost-color-hover: var(--base-100);
--button-ghost-dimmed-color: var(--base-60);
--button-ghost-dimmed-color-hover: var(--base-100);
/* -- Inverted */
--button-ghost-inverted-bg: transparent;
--button-ghost-inverted-bg-hover: rgba(0, 0, 0, 0.1);
--button-ghost-inverted-color: var(--base-30);
--button-ghost-inverted-color-hover: var(--base-10);
/* Forms */
--form-bg: rgb(var(--black));
--form-bg-focus: rgb(var(--black));
--form-border: rgb(var(--grey-700));
--form-border-hover: rgb(var(--grey-600));
--form-border-focus: var(--focus);
--form-placeholder-color: rgb(var(--grey-600));
/* Form labels */
--label-primary: rgb(var(--grey-50));
--label-secondary: rgb(var(--grey-30));
/* Snackbars */
--snackbar-bg: rgb(var(--grey-50));
--snackbar-color: rgb(var(--grey-900));
/* Tabs */
--tab-color: rgb(var(--grey-100));
--tab-color-hover: var(--accent-brand-lighter);
--tab-color-current: rgb(var(--grey-50));
--tab-bg-hover: rgba(var(--accent-brand-rgb), 0.2);
--tab-bg-current: rgb(var(--accent-brand));
/* Tags */
--tag-color: rgb(var(--grey-300));
--tag-color-hover: rgb(var(--grey-100));
--tag-bg: rgba(var(--grey-50), 0.05);
--tag-bg-hover: rgba(var(--grey-50), 0.05);
--tag-prefix: rgba(var(--grey-50), 0.6);
--tag-prefix-hover: rgb(var(--grey-50));
--tag-onboarding-bg: var(--grey-900);
--tag-onboarding-border: var(--grey-700);
/* Story */
--story-comments-bg: rgb(var(--grey-800));
--story-comments-bg-top: rgba(var(--grey-800), 0);
--story-comments-bg-bottom: rgba(var(--grey-800), 1);
/* Select icon */
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjYzJjNmNhIi8+Cjwvc3ZnPg==);
/* Reactions */
--reaction-like-color: rgb(var(--red-500));
--reaction-like-bg: rgba(var(--red-500), 0.1);
--reaction-custom-color: rgb(var(--green-600));
--reaction-custom-bg: rgb(var(--green-600), 0.1);
--reaction-save-color: rgb(var(--indigo-500));
--reaction-save-bg: rgba(var(--indigo-500), 0.1);
--reaction-comment-color: rgb(var(--yellow-500));
--reaction-comment-bg: rgba(var(--yellow-500), 0.1);
/* Code */
--code-inline-bg: rgb(var(--white), 0.1);
/* Onboarding suggested people */
--content-row-hover-bg: rgba(var(--base-20));
}
:root {
/*
Separating some variables here as these are the results
of broader Crayons refactoring (see #15311) and I did not
want to mix everything together.
*/
/***********************************************
** Buttons *************************************
***********************************************/
/* Buttons: Default */
--btn-bg: transparent;
--btn-bg-hover: rgba(var(--indigo-900), 0.75);
--btn-color: rgb(var(--grey-300));
--btn-color-hover: rgb(var(--indigo-300));
--btn-current-bg: rgb(var(--grey-700));
--btn-current-color: rgb(var(--grey-50));
/* Buttons: Primary */
--btn-primary-bg: rgb(var(--indigo-700));
--btn-primary-bg-hover: rgb(var(--indigo-600));
--btn-primary-color: rgba(var(--white), 0.9);
--btn-primary-color-hover: rgb(var(--white));
/* Buttons: Secondary */
--btn-secondary-bg: rgba(var(--indigo-600), 0.4);
--btn-secondary-bg-hover: rgb(var(--indigo-700));
--btn-secondary-color: rgb(var(--indigo-200));
--btn-secondary-color-hover: rgb(var(--white));
/* Buttons: Destructive Default */
--btn-destructive-bg: transparent;
--btn-destructive-bg-hover: rgba(var(--red-500), 0.3);
--btn-destructive-color: rgb(var(--red-400));
--btn-destructive-color-hover: rgb(var(--red-300));
/* Buttons: Destructive Primary */
--btn-primary-destructive-bg: rgb(var(--red-700));
--btn-primary-destructive-bg-hover: rgb(var(--red-600));
--btn-primary-destructive-color: rgb(var(--white));
--btn-primary-destructive-color-hover: rgb(var(--white));
/***********************************************
** Links ***************************************
***********************************************/
/* Links: Default */
--link-bg: transparent;
--link-bg-hover: rgba(var(--indigo-900), 0.75);
--link-color: rgb(var(--grey-300));
--link-color-hover: rgb(var(--indigo-300));
--link-current-bg: rgb(var(--grey-700));
--link-current-color: rgb(var(--grey-50));
/* Links: Branded */
--link-branded-bg: transparent;
--link-branded-bg-hover: rgba(var(--indigo-900), 0.75);
--link-branded-color: rgb(var(--indigo-400));
--link-branded-color-hover: rgb(var(--indigo-300));
/***********************************************
** CTAs ****************************************
***********************************************/
/* CTAs: Default */
--cta-bg: transparent;
--cta-bg-hover: rgba(var(--indigo-900), 0.75);
--cta-color: rgb(var(--grey-300));
--cta-color-hover: rgb(var(--indigo-300));
--cta-border: rgb(var(--grey-500));
--cta-border-hover: rgb(var(--indigo-400));
/* CTAs: Branded */
--cta-branded-bg: transparent;
--cta-branded-bg-hover: rgb(var(--indigo-600));
--cta-branded-color: rgb(var(--indigo-400));
--cta-branded-color-hover: rgb(var(--white));
--cta-branded-border: rgb(var(--indigo-400));
--cta-branded-border-hover: rgb(var(--indigo-500));
/***********************************************
** Tooltips ************************************
***********************************************/
--tooltip-bg: rgba(var(--white), 0.9);
--tooltip-color: rgb(var(--grey-800));
/***********************************************
** Indicators **********************************
***********************************************/
/* Indicators: Default */
--indicator-bg: rgb(var(--grey-600));
--indicator-color: rgb(var(--grey-200));
/* Indicators: Success */
--indicator-success-bg: rgb(var(--green-700));
--indicator-success-color: rgb(var(--green-50));
/* Indicators: Warning */
--indicator-warning-bg: rgb(var(--yellow-400));
--indicator-warning-color: rgb(var(--yellow-900));
/* Indicators: Danger */
--indicator-danger-bg: rgb(var(--red-700));
--indicator-danger-color: rgb(var(--red-50));
/* Indicators: Info */
--indicator-info-bg: rgb(var(--indigo-700));
--indicator-info-color: rgb(var(--indigo-100));
/***********************************************
** List items **********************************
***********************************************/
--list-item-bg-hover: rgb(var(--grey-800));
/***********************************************
** Checkbox ************************************
***********************************************/
--checkbox-default-bg: rgb(var(--grey-800));
/***********************************************
** Modals **************************************
***********************************************/
--modal-bg: rgb(var(--grey-900));
--modal-backdrop: rgba(var(--black), 0.6);
--modal-danger-border-color: rgb(var(--red-400));
/***********************************************
** Colors **************************************
***********************************************/
--color-primary: rgb(var(--grey-50));
--color-secondary: rgb(var(--grey-400));
/***********************************************
** Pills ***************************************
***********************************************/
--pill-bg: transparent;
--pill-bg-hover: rgb(var(--grey-800));
--pill-color: rgb(var(--grey-200));
--pill-color-hover: rgb(var(--grey-50));
--pill-border: rgb(var(--grey-500));
--pill-border-hover: rgb(var(--grey-200));
/***********************************************
** ColorPicker *********************************
***********************************************/
--swatch-border-color: rgb(var(--white), 0.2);
/***********************************************
** Toggles *************************************
***********************************************/
--toggle-rail-bg: rgb(var(--grey-700));
--toggle-rail-checked-bg: rgb(var(--green-500));
--toggle-knob-bg: rgb(var(--white));
/***********************************************
** Date Pickers ********************************
***********************************************/
--selected-date-color: var(--body-color);
--selected-range-color: var(--body-color-inverted);
/***********************************************
** Tag Moderation ******************************
***********************************************/
/* Tag item */
--tag-item-bg-hover: rgba(var(--indigo-900), 0.5);
/* Subtract */
--subtract-color: rgb(var(--red-200));
--subtract-color-hover: rgb(var(--white));
--subtract-bg: rgba(var(--red-600), 0.4);
--subtract-bg-hover: rgb(var(--red-600));
/* Plus */
--plus-color: rgb(var(--green-200));
--plus-color-hover: rgb(var(--white));
--plus-bg: rgba(var(--green-600), 0.4);
--plus-bg-hover: rgb(var(--green-600));
/* Tag name */
--tag-hash: rgb(var(--grey-500));
--tag-name: rgb(var(--grey-50));
--add-tag-hash: rgb(var(--grey-200));
/***********************************************
** Utilities ***********************************
***********************************************/
/* Focus */
--focus: var(--accent-brand-lighter);
/* Divider */
--divider: rgb(var(--grey-700));
/* Shadows */
--shadow-1: 0 10px 15px -3px rgba(var(--black), 0.5),
0 4px 6px -2px rgba(var(--black), 0.25),
inset 0 0 0 1px rgba(var(--white), 0.1);
--shadow-2: 0 20px 25px -5px rgba(var(--black), 0.5),
0 10px 10px -5px rgba(var(--black), 0.25),
inset 0 0 0 1px rgba(var(--white), 0.1);
--shadow-smooth: 0px 8px 16px rgba(0, 0, 0, 0.06);
}
Reference in a new issue View git blame Copy permalink