From 28d895e937f2a049a7bcce03973510fbeae94abf Mon Sep 17 00:00:00 2001 From: AhmedEid3 Date: Sat, 25 Apr 2020 15:58:49 +0200 Subject: [PATCH] Adding Dark Theme --- .../dark/collections/breadcrumb.variables | 1 + src/themes/dark/collections/form.overrides | 20 ++++ src/themes/dark/collections/form.variables | 20 ++++ src/themes/dark/collections/menu.overrides | 30 ++++++ src/themes/dark/collections/menu.variables | 45 +++++++++ src/themes/dark/collections/message.overrides | 9 ++ src/themes/dark/collections/message.variables | 9 ++ src/themes/dark/collections/table.overrides | 4 + src/themes/dark/collections/table.variables | 10 ++ src/themes/dark/elements/button.overrides | 10 ++ src/themes/dark/elements/button.variables | 6 ++ src/themes/dark/elements/divider.variables | 1 + src/themes/dark/elements/header.variables | 6 ++ src/themes/dark/elements/icon.overrides | 8 ++ src/themes/dark/elements/input.overrides | 7 ++ src/themes/dark/elements/input.variables | 4 + src/themes/dark/elements/label.variables | 11 +++ src/themes/dark/elements/list.variables | 3 + .../dark/elements/placeholder.overrides | 7 ++ src/themes/dark/elements/segment.overrides | 6 ++ src/themes/dark/elements/segment.variables | 11 +++ src/themes/dark/elements/step.overrides | 17 ++++ src/themes/dark/elements/step.variables | 17 ++++ src/themes/dark/globals/site.overrides | 32 +++++++ src/themes/dark/globals/site.variables | 91 +++++++++++++++++++ src/themes/dark/modules/accordion.variables | 9 ++ src/themes/dark/modules/checkbox.overrides | 3 + src/themes/dark/modules/checkbox.variables | 60 ++++++++++++ src/themes/dark/modules/dropdown.overrides | 19 ++++ src/themes/dark/modules/dropdown.variables | 70 ++++++++++++++ src/themes/dark/modules/modal.variables | 6 ++ src/themes/dark/modules/popup.variables | 4 + src/themes/dark/modules/progress.variables | 1 + src/themes/dark/modules/search.variables | 73 +++++++++++++++ src/themes/dark/views/card.variables | 6 ++ src/themes/dark/views/comment.variables | 10 ++ src/themes/dark/views/feed.variables | 5 + src/themes/dark/views/item.overrides | 3 + src/themes/dark/views/item.variables | 22 +++++ src/themes/dark/views/statistic.variables | 2 + 40 files changed, 678 insertions(+) create mode 100644 src/themes/dark/collections/breadcrumb.variables create mode 100644 src/themes/dark/collections/form.overrides create mode 100644 src/themes/dark/collections/form.variables create mode 100644 src/themes/dark/collections/menu.overrides create mode 100644 src/themes/dark/collections/menu.variables create mode 100644 src/themes/dark/collections/message.overrides create mode 100644 src/themes/dark/collections/message.variables create mode 100644 src/themes/dark/collections/table.overrides create mode 100644 src/themes/dark/collections/table.variables create mode 100644 src/themes/dark/elements/button.overrides create mode 100644 src/themes/dark/elements/button.variables create mode 100644 src/themes/dark/elements/divider.variables create mode 100644 src/themes/dark/elements/header.variables create mode 100644 src/themes/dark/elements/icon.overrides create mode 100644 src/themes/dark/elements/input.overrides create mode 100644 src/themes/dark/elements/input.variables create mode 100644 src/themes/dark/elements/label.variables create mode 100644 src/themes/dark/elements/list.variables create mode 100644 src/themes/dark/elements/placeholder.overrides create mode 100644 src/themes/dark/elements/segment.overrides create mode 100644 src/themes/dark/elements/segment.variables create mode 100644 src/themes/dark/elements/step.overrides create mode 100644 src/themes/dark/elements/step.variables create mode 100644 src/themes/dark/globals/site.overrides create mode 100644 src/themes/dark/globals/site.variables create mode 100644 src/themes/dark/modules/accordion.variables create mode 100644 src/themes/dark/modules/checkbox.overrides create mode 100644 src/themes/dark/modules/checkbox.variables create mode 100644 src/themes/dark/modules/dropdown.overrides create mode 100644 src/themes/dark/modules/dropdown.variables create mode 100644 src/themes/dark/modules/modal.variables create mode 100644 src/themes/dark/modules/popup.variables create mode 100644 src/themes/dark/modules/progress.variables create mode 100644 src/themes/dark/modules/search.variables create mode 100644 src/themes/dark/views/card.variables create mode 100644 src/themes/dark/views/comment.variables create mode 100644 src/themes/dark/views/feed.variables create mode 100644 src/themes/dark/views/item.overrides create mode 100644 src/themes/dark/views/item.variables create mode 100644 src/themes/dark/views/statistic.variables diff --git a/src/themes/dark/collections/breadcrumb.variables b/src/themes/dark/collections/breadcrumb.variables new file mode 100644 index 0000000000..7af5c72bf0 --- /dev/null +++ b/src/themes/dark/collections/breadcrumb.variables @@ -0,0 +1 @@ +@dividerColor: @gray-light; \ No newline at end of file diff --git a/src/themes/dark/collections/form.overrides b/src/themes/dark/collections/form.overrides new file mode 100644 index 0000000000..3d5c272ef9 --- /dev/null +++ b/src/themes/dark/collections/form.overrides @@ -0,0 +1,20 @@ +.ui.input>input, + +.ui.input.focus>input, +.ui.input>input:focus, + +.ui.form input:not([type]), +.ui.form input[type=date], +.ui.form input[type=datetime-local], +.ui.form input[type=email], +.ui.form input[type=file], +.ui.form input[type=number], +.ui.form input[type=password], +.ui.form input[type=search], +.ui.form input[type=tel], +.ui.form input[type=text], +.ui.form input[type=time], +.ui.form input[type=url] { + background-color: @gray-darker; + color: @white; +} diff --git a/src/themes/dark/collections/form.variables b/src/themes/dark/collections/form.variables new file mode 100644 index 0000000000..793c45e231 --- /dev/null +++ b/src/themes/dark/collections/form.variables @@ -0,0 +1,20 @@ +@inputColor: @gray-dark; +@inputPlaceholderColor: @gray; +@inputFocusColor: #000; +@formErrorColor: @gray-lighter; +@inputErrorFocusColor: @formErrorColor; + +/* Select */ +@selectBackground: @gray-darker; +@textAreaBackground: @gray-darker; + + +/*------------------- + States +--------------------*/ + +/* Focus */ +@inputFocusBackground: @gray-darker; + +/* Text Area Focus */ +@textAreaFocusBackground: @gray-darker; \ No newline at end of file diff --git a/src/themes/dark/collections/menu.overrides b/src/themes/dark/collections/menu.overrides new file mode 100644 index 0000000000..4f1fa9947f --- /dev/null +++ b/src/themes/dark/collections/menu.overrides @@ -0,0 +1,30 @@ +.ui.menu.primary { + .active.item { + color: @success !important; + } +} + +.ui.menu.inverted { + background-color: @success !important; + .item:focus, + .item:hover, + .active.item { + color: @primary !important; + } +} + +.ui.pagination.menu { + a:hover { + text-decoration: none; + } +} + +.ui.tabular.menu { + border-color: lighten(@gray-dark, 5%); +} + +.ui.tabular.menu { + .active.item { + border-color:lighten(@gray-dark, 5%); + } +} \ No newline at end of file diff --git a/src/themes/dark/collections/menu.variables b/src/themes/dark/collections/menu.variables new file mode 100644 index 0000000000..d0e29ad354 --- /dev/null +++ b/src/themes/dark/collections/menu.variables @@ -0,0 +1,45 @@ +@itemTextColor: #fff; +@background: @gray-dark; +@border: transparent; +@hoverItemTextColor: @primaryColor; +@hoverItemBackground: darken(@gray-dark, 3%); +@activeItemTextColor: #fff; +@activeItemBackground: darken(@gray-dark, 10%); +@activeHoverItemBackground: darken(@gray-dark, 13%); +@labelBackground: @primaryColor; +@pressedItemBackground: darken(@gray-dark, 3%); +@invertedItemTextColor: #fff; +@invertedBackground: @primaryColor; +@invertedBorder: transparent; +@invertedItemTextColor: #fff; +@invertedHoverColor: @gray-dark; +@invertedActiveColor: #fff; +@invertedActiveBackground: darken(@primaryColor, 5%); +@invertedMenuPressedBackground: darken(@primaryColor, 10%); +@disabledTextColor: @gray-200; +@tabularActiveColor: @white; +@tabularActiveBackground: @gray-dark; +@paginationActiveTextColor: @white; +@paginationActiveBackground: lighten(@primaryColor, 6%); +@subMenuTextColor: @gray-light; +@verticalBackground: none; +@dropdownHoveredItemBackground: @gray-dark; +@dropdownBackground: @gray-dark; + +@textMenuActiveItemColor: #fff; +@textMenuItemColor: @gray-light; + +@verticalBackground: @background; + +@secondaryItemTextColor: @gray; +@secondaryItemBackground: @gray-darker; +@secondaryActiveItemColor: #fff; +@secondaryActiveItemBackground: @gray-dark; +@secondaryHoverItemColor: #fff; +@secondaryActiveHoverItemColor: #fff; +@secondaryActiveHoverItemBackground: @gray-dark; +@secondaryHoverItemBackground: @gray-dark; + +@secondaryPointingActiveTextColor: #fff; +@secondaryPointingBorderColor: lighten(@gray-dark, 5%); +@secondaryPointingActiveBorderColor: lighten(@gray-dark, 5%); diff --git a/src/themes/dark/collections/message.overrides b/src/themes/dark/collections/message.overrides new file mode 100644 index 0000000000..581f6b1290 --- /dev/null +++ b/src/themes/dark/collections/message.overrides @@ -0,0 +1,9 @@ +.ui.message { + border: none; + color: #fff; + + a { + color: #fff; + text-decoration: underline; + } +} diff --git a/src/themes/dark/collections/message.variables b/src/themes/dark/collections/message.variables new file mode 100644 index 0000000000..c3b90ea20d --- /dev/null +++ b/src/themes/dark/collections/message.variables @@ -0,0 +1,9 @@ +@background: @gray-dark; +@boxShadow: none; +@textColor: #fff; +@boderColor: rgba(0, 0, 0, 0.1); + +@successHeaderColor: #fff; +@warningHeaderColor: #fff; +@errorHeaderColor: #fff; +@infoHeaderColor: #fff; diff --git a/src/themes/dark/collections/table.overrides b/src/themes/dark/collections/table.overrides new file mode 100644 index 0000000000..24c8bd2480 --- /dev/null +++ b/src/themes/dark/collections/table.overrides @@ -0,0 +1,4 @@ +.ui.definition.table>thead:not(.full-width)>tr>th:first-child { + background: @gray-dark; + box-shadow: none; +} \ No newline at end of file diff --git a/src/themes/dark/collections/table.variables b/src/themes/dark/collections/table.variables new file mode 100644 index 0000000000..d38af0f97a --- /dev/null +++ b/src/themes/dark/collections/table.variables @@ -0,0 +1,10 @@ +@color: #fff; +@stripedBackground: lighten(@gray-dark, 5%); +@borderColor: @gray; +@background: @gray-dark; +@headerBackground: @gray-darker; +@footerBackground: @gray-darker; +@definitionPageBackground: @gray-dark; +@activeBackgroundColor: @gray-darker; +@activeBackgroundHover: @gray-dark; +@internalBorderColor: darken(@gray, 5%); diff --git a/src/themes/dark/elements/button.overrides b/src/themes/dark/elements/button.overrides new file mode 100644 index 0000000000..099e9acc1e --- /dev/null +++ b/src/themes/dark/elements/button.overrides @@ -0,0 +1,10 @@ +.ui.inverted.button:hover { + background: @background; + color: @white; +} + +.ui.basic.button:hover, +.ui.basic.buttons .button:hover{ + background: @background; + color: @white; +} \ No newline at end of file diff --git a/src/themes/dark/elements/button.variables b/src/themes/dark/elements/button.variables new file mode 100644 index 0000000000..50900e5af5 --- /dev/null +++ b/src/themes/dark/elements/button.variables @@ -0,0 +1,6 @@ +@textColor: #fff; +@backgroundColor: @gray; +@activeBackgroundColor: @gray-dark; +@boxShadow: none; +@downBackgroundColor: @gray-darker; +@basicDownBackground: @gray-darker; diff --git a/src/themes/dark/elements/divider.variables b/src/themes/dark/elements/divider.variables new file mode 100644 index 0000000000..f8aeffff97 --- /dev/null +++ b/src/themes/dark/elements/divider.variables @@ -0,0 +1 @@ +@color: @gray-light; diff --git a/src/themes/dark/elements/header.variables b/src/themes/dark/elements/header.variables new file mode 100644 index 0000000000..e19a2e3e6f --- /dev/null +++ b/src/themes/dark/elements/header.variables @@ -0,0 +1,6 @@ +@blockBackground: @gray-dark; +@attachedBackground: @gray-darker; + + +/* Sub Header */ +@subHeaderColor: @gray-lighter; diff --git a/src/themes/dark/elements/icon.overrides b/src/themes/dark/elements/icon.overrides new file mode 100644 index 0000000000..557df3cb8c --- /dev/null +++ b/src/themes/dark/elements/icon.overrides @@ -0,0 +1,8 @@ +.windows.close.icon { + opacity: 0.4; + + &:hover, + &:focus { + opacity: 1; + } +} diff --git a/src/themes/dark/elements/input.overrides b/src/themes/dark/elements/input.overrides new file mode 100644 index 0000000000..e66c7adb9e --- /dev/null +++ b/src/themes/dark/elements/input.overrides @@ -0,0 +1,7 @@ +.ui.transparent.input input { + color: @gray-lighter; +} + +.ui.transparent.input .icon { + color: @gray-lighter; +} diff --git a/src/themes/dark/elements/input.variables b/src/themes/dark/elements/input.variables new file mode 100644 index 0000000000..cdb99ca994 --- /dev/null +++ b/src/themes/dark/elements/input.variables @@ -0,0 +1,4 @@ +@focusBorderColor: #fff; +@placeholderColor: @gray-light; +@focusColor: black; +@boder: transparent; diff --git a/src/themes/dark/elements/label.variables b/src/themes/dark/elements/label.variables new file mode 100644 index 0000000000..6498b646bd --- /dev/null +++ b/src/themes/dark/elements/label.variables @@ -0,0 +1,11 @@ +@backgroundColor: @gray; +@color: @white; +@labelActiveTextColor: @primaryColor; +@labelHoverTextColor: #fff; +@ribbonShadowColor: @gray; +@labelHoverBackgroundColor: darken(@gray, 10%); + +/* Basic */ +@basicBackground: none @gray-dark; +@basicBorder: @basicBorderWidth solid @borderColor; +@basicColor: @textColor; diff --git a/src/themes/dark/elements/list.variables b/src/themes/dark/elements/list.variables new file mode 100644 index 0000000000..86f4d7c1b2 --- /dev/null +++ b/src/themes/dark/elements/list.variables @@ -0,0 +1,3 @@ +@itemLinkColor: @linkColor; +@itemHeaderLinkColor: darken(@linkColor, 5%); +@itemDescriptionColor: @gray-light; diff --git a/src/themes/dark/elements/placeholder.overrides b/src/themes/dark/elements/placeholder.overrides new file mode 100644 index 0000000000..51628d88cd --- /dev/null +++ b/src/themes/dark/elements/placeholder.overrides @@ -0,0 +1,7 @@ +.ui.placeholder, +.ui.placeholder .image.header:after, +.ui.placeholder .line, +.ui.placeholder .line:after, +.ui.placeholder>:before { + background-color: @gray-dark; +} diff --git a/src/themes/dark/elements/segment.overrides b/src/themes/dark/elements/segment.overrides new file mode 100644 index 0000000000..fd11d234a0 --- /dev/null +++ b/src/themes/dark/elements/segment.overrides @@ -0,0 +1,6 @@ +.ui.piled.segments:after, +.ui.piled.segments:before, +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: lighten(@background, 5%); +} diff --git a/src/themes/dark/elements/segment.variables b/src/themes/dark/elements/segment.variables new file mode 100644 index 0000000000..3da460cdf2 --- /dev/null +++ b/src/themes/dark/elements/segment.variables @@ -0,0 +1,11 @@ +@background: @gray-dark; +@borderColor: lighten(@gray-dark, 5%); +@attachedBorder: @borderWidth solid @borderColor; +@stackedPageBackground: lighten(@pageBackground, 5%); + +/******************************* + Types +*******************************/ + +/* Placeholder */ +@placeholderBackground: @gray-dark; diff --git a/src/themes/dark/elements/step.overrides b/src/themes/dark/elements/step.overrides new file mode 100644 index 0000000000..2ee442eba8 --- /dev/null +++ b/src/themes/dark/elements/step.overrides @@ -0,0 +1,17 @@ +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Step'; + src: + url(data:application/x-font-ttf;charset=utf-8;;base64,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) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,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) format('woff') + ; +} +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + color: @primary; + font-family: 'Step'; + content: '\e800'; /* '' */ +} \ No newline at end of file diff --git a/src/themes/dark/elements/step.variables b/src/themes/dark/elements/step.variables new file mode 100644 index 0000000000..1385b1db4a --- /dev/null +++ b/src/themes/dark/elements/step.variables @@ -0,0 +1,17 @@ +@backgroundColor: @gray; + +@textColor: darken(@white, 15%); +@titleColor: @gray-lighter; +@descriptionColor: @gray-light; + +@activeColor: @white; +@activeIconColor: @white; +@activeBackground: @gray-dark; +@hoverColor: #fff; +@hoverBackground: @gray-dark; +@activeHoverBackground: darken(@gray-dark, 5%); + +@disabledColor: darken(@white, 30%); +@disabledBackground: lighten(@gray, 3%); + +@arrowBackgroundColor: @backgroundColor; diff --git a/src/themes/dark/globals/site.overrides b/src/themes/dark/globals/site.overrides new file mode 100644 index 0000000000..134ee47f54 --- /dev/null +++ b/src/themes/dark/globals/site.overrides @@ -0,0 +1,32 @@ +.text.primary, +.text.primary:hover { + color: lighten(@primaryColor, 10%); +} + +.text.positive, +.text.positive:hover { + color: @positiveColor; +} + +.text.negative, +.text.negative:hover { + color: @negativeColor; +} + +.text.warning, +.text.warning:hover { + color: @warningColor; +} + +.text.info, +.text.info:hover { + color: @infoColor; +} + +pre .code { + color: @gray-light !important; +} + +.ui.rating .icon:not(.active) { + color: @gray-light !important; +} diff --git a/src/themes/dark/globals/site.variables b/src/themes/dark/globals/site.variables new file mode 100644 index 0000000000..f84bc6cdc9 --- /dev/null +++ b/src/themes/dark/globals/site.variables @@ -0,0 +1,91 @@ +@white: #fff; +@gray-100: #f8f9fa; +@gray-200: #ebebeb; +@gray-300: #dee2e6; +@gray-400: #ced4da; +@gray-500: #adb5bd; +@gray-600: #999; +@gray-700: #444; +@gray-800: #303030; +@gray-900: #222; +@black: #000; + +@blue: #375a7f; +@indigo: #6610f2; +@purple: #6f42c1; +@pink: #e83e8c; +@red: #e74c3c; +@orange: #fd7e14; +@yellow: #f39c12; +@green: #00bc8c; +@teal: #20c997; +@cyan: #3498db; + +@primary: @blue; +@secondary: @gray-700; +@success: @green; +@info: @cyan; +@warning: @yellow; +@danger: @red; +@light: @gray-800; +@dark: @gray-800; + +@gray-base: #000; +@gray-darker: lighten(@gray-base, 13.5%); // #222 +@gray-dark: #303030; // #333 +@gray: #464545; +@gray-light: #999; // #999 +@gray-lighter: #ebebeb; // #eee + +@primaryColor: #375a7f; +@positiveColor: #00bc8c; +@infoColor: #3498db; +@warningColor: #f39c12; +@negativeColor: #e74c3c; + +@pageBackground: @gray-darker; +@textColor: #fff; +@linkColor: @primaryColor; +@linkHoverColor: @linkColor; +@fontName: "Lato"; + +@invertedDisabledTextColor: #aaa; +@disabledTextColor: #fff; +@disabledBorderColor: transparent; +@positiveTextColor: #fff; +@positiveBackgroundColor: #00bc8c; +@positiveBorderColor: @positiveColor; +@infoTextColor: #fff; +@infoBackgroundColor: @infoColor; +@infoBorderColor: @infoColor; +@warningTextColor: #fff; +@warningBackgroundColor: #f39c12; +@warningBorderColor: @warningColor; +@negativeTextColor: darken(@textColor, 10%); +@negativeBackgroundColor: #e74c3c; +@negativeBorderColor: @negativeColor; + + +@darktextcolor: rgba(255, 255, 255, 0.9); +@mutedtextcolor: rgba(255, 255, 255, 0.8); +@lighttextcolor: rgba(255, 255, 255, 0.7); +@unselectedtextcolor: rgba(255, 255, 255, 0.5); +@hoveredtextcolor: rgba(255, 255, 255, 1); +@pressedtextcolor: rgba(255, 255, 255, 1); +@selectedtextcolor: rgba(255, 255, 255, 1); +@disabledtextcolor: rgba(255, 255, 255, 0.2); + +@invertedtextcolor: rgba(255, 255, 255, 0.9); +@invertedmutedtextcolor: rgba(255, 255, 255, 0.8); +@invertedlighttextcolor: rgba(255, 255, 255, 0.7); +@invertedunselectedtextcolor: rgba(255, 255, 255, 0.5); +@invertedhoveredtextcolor: rgba(255, 255, 255, 1); +@invertedpressedtextcolor: rgba(255, 255, 255, 1); +@invertedselectedtextcolor: rgba(255, 255, 255, 1); +@inverteddisabledtextcolor: rgba(255, 255, 255, 0.2); + +@borderColor: @gray; + +@solidBorderColor: @gray-light; +@inputColor: @gray; +@inputPlaceholderColor: lighten(@gray, 10%); diff --git a/src/themes/dark/modules/accordion.variables b/src/themes/dark/modules/accordion.variables new file mode 100644 index 0000000000..6a36260fad --- /dev/null +++ b/src/themes/dark/modules/accordion.variables @@ -0,0 +1,9 @@ +@styledTitleColor: white; +@styledBackground: @gray-darker; + +/* Styled Title States */ +@styledActiveTitleColor: @primary; + +/* Styled Child Title States */ +@styledHoverChildTitleColor: @primary; +@styledActiveChildTitleColor: @primary; \ No newline at end of file diff --git a/src/themes/dark/modules/checkbox.overrides b/src/themes/dark/modules/checkbox.overrides new file mode 100644 index 0000000000..14fb0da124 --- /dev/null +++ b/src/themes/dark/modules/checkbox.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/src/themes/dark/modules/checkbox.variables b/src/themes/dark/modules/checkbox.variables new file mode 100644 index 0000000000..756c7ee0aa --- /dev/null +++ b/src/themes/dark/modules/checkbox.variables @@ -0,0 +1,60 @@ +@sliderLineColor: @gray; +@toggleLaneBackground: @gray; +@radioActiveBulletColor: @gray-base; +@radioFocusBulletColor: @gray-base; +@radioActiveFocusBulletColor: @gray-base; +@bulletColor: @gray-base; +@checkboxActiveCheckColor: @gray-base; +@checkboxActiveFocusCheckColor: @gray-base; + + + +/******************************* + Checkbox +*******************************/ + +/*------------------- + States +--------------------*/ + +/* Hover */ +@labelHoverColor: @gray-light; + +/* Pressed */ +@labelPressedColor: @gray-light; + +/* Focus */ +@labelFocusColor: @gray-light;; + +/* Active */ +@labelActiveColor: @gray-light; + +/* Active Focus */ +@checkboxActiveFocusCheckColor: @gray-light;; + + +/*------------------- + Types +--------------------*/ +/* Slider & Toggle Handle */ +@sliderOffLabelColor: @gray-light; + + +/* Slider States */ +@sliderHoverLabelColor: @gray-light; + +@sliderOnLabelColor: @gray-light; + +@sliderOnFocusLabelColor: @gray-light; + + +/* Toggle */ +@toggleOnLabelColor: @gray-light; +@toggleOnLaneColor: @primaryColor; + +@toggleOnHandleBoxShadow: @handleBoxShadow; + +@toggleOnFocusLaneColor: @primaryColorFocus; +@toggleOnFocusLabelColor: @gray-light; + + diff --git a/src/themes/dark/modules/dropdown.overrides b/src/themes/dark/modules/dropdown.overrides new file mode 100644 index 0000000000..15cfce0ed6 --- /dev/null +++ b/src/themes/dark/modules/dropdown.overrides @@ -0,0 +1,19 @@ +.ui.menu .ui.dropdown .menu>.active.item { + background: @primary !important; + color: @white !important; +} + +.ui.menu .ui.dropdown .menu>.item:hover { + background: @primary !important; + color: @white !important; +} + +.ui.dropdown .menu>.item>.description, +.ui.dropdown>.text>.description { + color: @gray-300; +} + +.ui.dropdown.error>.menu>.item:hover { + background-color: @red !important; + color: @white; +} \ No newline at end of file diff --git a/src/themes/dark/modules/dropdown.variables b/src/themes/dark/modules/dropdown.variables new file mode 100644 index 0000000000..1bcfe99f10 --- /dev/null +++ b/src/themes/dark/modules/dropdown.variables @@ -0,0 +1,70 @@ +/* Menu */ +@menuBackground: @gray-darker; +@menuBorderColor: @secondary; + +/* Menu Item */ +@itemColor: @white; + +/* Menu Header */ +@menuHeaderColor: @white; + +/* Menu Divider */ +@menuDividerColor: @secondary; +@menuDividerBorder: @menuDividerSize solid @secondary; + +/* Description */ +@itemDescriptionColor: @gray-light; + +/* Message */ +@messageColor: @unselectedTextColor; + +/*------------------- + Types +--------------------*/ + +/*------------ + Selection +--------------*/ +@selectionBackground: @gray-dark; +@selectionItemDivider: 1px solid @gray; + +/*