From 4a5e4dbeba442e6c4b96b71400b792c36156291f Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 2 Nov 2018 13:07:32 +0100 Subject: [PATCH 1/3] feat(item): Inverted Variant --- src/definitions/views/item.less | 70 +++++++++++++++++++++++++ src/themes/default/views/item.variables | 20 +++++++ 2 files changed, 90 insertions(+) diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less index b31dd2eabd..82a8155293 100755 --- a/src/definitions/views/item.less +++ b/src/definitions/views/item.less @@ -471,4 +471,74 @@ } } +/*-------------- + Inverted +---------------*/ + +.ui.inverted.items { + background: @invertedItemsBackground; +} +.ui.items > .item { + background: @invertedBackground; +} +.ui.items > .item > .content { + background: @invertedContentBackground; + color: @invertedTextColor; +} +.ui.items > .item .extra { + background: @invertedExtraBackground; +} +.ui.inverted.items > .item > .content > .header { + color: @invertedHeaderColor; +} +.ui.inverted.items > .item > .content > .description { + color: @invertedDescriptionColor; +} +.ui.inverted.items > .item .meta { + color: @invertedMetaColor; +} +.ui.inverted.items > .item > .content a:not(.ui) { + color: @invertedContentLinkColor; +} +.ui.inverted.items > .item > .content a:not(.ui):hover { + color: @invertedContentLinkHoverColor; +} +.ui.inverted.items > .item > .content > a.header { + color: @invertedHeaderLinkColor; +} +.ui.inverted.items > .item > .content > a.header:hover { + color: @invertedHeaderLinkHoverColor; +} +.ui.inverted.items > .item .meta > a:not(.ui) { + color: @invertedMetaLinkColor; +} +.ui.inverted.items > .item .meta > a:not(.ui):hover { + color: @invertedMetaLinkHoverColor; +} +.ui.inverted.items > .item > .content .favorite.icon:hover { + color: @invertedFavoriteColor; +} +.ui.inverted.items > .item > .content .active.favorite.icon { + color: @invertedFavoriteActiveColor; +} +.ui.inverted.items > .item > .content .like.icon:hover { + color: @invertedLikeColor; +} +.ui.inverted.items > .item > .content .active.like.icon { + color: @invertedLikeActiveColor; +} +.ui.inverted.items > .item .extra { + color: @invertedExtraColor; +} +.ui.inverted.items a.item:hover .content .header, +.ui.inverted.link.items > .item:hover .content .header { + color: @invertedHeaderLinkHoverColor; +} +.ui.inverted.divided.items > .item { + border-top: @invertedDividedBorder; +} +.ui.inverted.divided.items > .item:first-child { + border-top: none; +} + .loadUIOverrides(); diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables index 18dbaf313c..0e582c74be 100644 --- a/src/themes/default/views/item.variables +++ b/src/themes/default/views/item.variables @@ -155,3 +155,23 @@ /* Unstackable */ @unstackableMobileImageWidth: 125px; +/* Inverted */ +@invertedItemsBackground: @black; +@invertedBackground: @background; +@invertedContentBackground: @contentBackground; +@invertedExtraBackground: @extraBackground; +@invertedHeaderColor: @invertedTextColor; +@invertedHeaderLinkColor: @invertedHeaderColor; +@invertedHeaderLinkHoverColor: @invertedHoveredTextColor; +@invertedMetaLinkColor: @invertedLightTextColor; +@invertedMetaLinkHoverColor: @invertedTextColor; +@invertedContentLinkColor: lighten(saturate(@linkColor, 30), 25, relative); +@invertedContentLinkHoverColor: @linkColor; +@invertedExtraColor: @invertedLightTextColor; +@invertedDescriptionColor: @invertedTextColor; +@invertedMetaColor: rgba(255, 255, 255, 0.8); +@invertedLikeColor: lighten(@likeColor,10); +@invertedLikeActiveColor: lighten(@likeActiveColor,10); +@invertedFavoriteColor: lighten(@favoriteColor,10); +@invertedFavoriteActiveColor: lighten(@favoriteActiveColor,10); +@invertedDividedBorder: 1px solid @whiteBorderColor; From 080c2cce6c26a0a994b3207b362a977b3b1ab690 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Fri, 2 Nov 2018 20:34:53 +0100 Subject: [PATCH 2/3] feat(item): Removed black background. fixed missing inverted declaration. --- src/definitions/views/item.less | 9 +++------ src/themes/default/views/item.variables | 1 - 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less index 82a8155293..61e42379dd 100755 --- a/src/definitions/views/item.less +++ b/src/definitions/views/item.less @@ -475,17 +475,14 @@ Inverted ---------------*/ -.ui.inverted.items { - background: @invertedItemsBackground; -} -.ui.items > .item { +.ui.inverted.items > .item { background: @invertedBackground; } -.ui.items > .item > .content { +.ui.inverted.items > .item > .content { background: @invertedContentBackground; color: @invertedTextColor; } -.ui.items > .item .extra { +.ui.inverted.items > .item .extra { background: @invertedExtraBackground; } .ui.inverted.items > .item > .content > .header { diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables index 0e582c74be..2acfe0d7ac 100644 --- a/src/themes/default/views/item.variables +++ b/src/themes/default/views/item.variables @@ -156,7 +156,6 @@ @unstackableMobileImageWidth: 125px; /* Inverted */ -@invertedItemsBackground: @black; @invertedBackground: @background; @invertedContentBackground: @contentBackground; @invertedExtraBackground: @extraBackground; From 9fce2728ccf3da05466b47c3d4f38488feec63a4 Mon Sep 17 00:00:00 2001 From: lubber-de Date: Sat, 3 Nov 2018 15:05:06 +0100 Subject: [PATCH 3/3] fix(item)(list): Support color for text direcly in .content --- src/definitions/elements/list.less | 6 +++++- src/definitions/views/item.less | 3 ++- src/themes/default/elements/list.variables | 2 ++ src/themes/default/views/item.variables | 2 ++ 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less index 0593eb827d..c4f95a9639 100755 --- a/src/definitions/elements/list.less +++ b/src/definitions/elements/list.less @@ -148,6 +148,7 @@ ol.ui.list ol li, .ui.list .list > .item > .content, .ui.list > .item > .content { line-height: @contentLineHeight; + color: @contentColor; } .ui.list .list > .item > .image + .content, .ui.list .list > .item > .icon + .content, @@ -372,7 +373,10 @@ ol.ui.list ol li, .ui.inverted.list > .item .description { color: @invertedDescriptionColor; } - +.ui.inverted.list .list > .item > .content, +.ui.inverted.list > .item > .content { + color: @invertedContentColor; +} /* Item Link */ .ui.inverted.list .list > a.item, .ui.inverted.list > a.item { diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less index 61e42379dd..c0e848151f 100755 --- a/src/definitions/views/item.less +++ b/src/definitions/views/item.less @@ -114,6 +114,7 @@ display: block; flex: 1 1 auto; background: @contentBackground; + color: @contentColor; margin: @contentMargin; padding: @contentPadding; box-shadow: @contentBoxShadow; @@ -480,7 +481,7 @@ } .ui.inverted.items > .item > .content { background: @invertedContentBackground; - color: @invertedTextColor; + color: @invertedContentColor; } .ui.inverted.items > .item .extra { background: @invertedExtraBackground; diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables index def1014484..3e35b97f34 100644 --- a/src/themes/default/elements/list.variables +++ b/src/themes/default/elements/list.variables @@ -49,6 +49,7 @@ @contentLineHeight: @itemLineHeight; @contentLineHeightOffset: (@contentLineHeight - 1em) / 2; @contentVerticalAlign: top; +@contentColor: @textColor; /* Header */ @itemHeaderFontFamily: @headerFont; @@ -98,6 +99,7 @@ @invertedDescriptionColor: @invertedLightTextColor; @invertedItemLinkColor: @invertedTextColor; @invertedItemLinkHoverColor: @linkHoverColor; +@invertedContentColor: @invertedLightTextColor; /* Link List */ @linkListItemColor: @unselectedTextColor; diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables index 2acfe0d7ac..2460a42f94 100644 --- a/src/themes/default/views/item.variables +++ b/src/themes/default/views/item.variables @@ -65,6 +65,7 @@ @contentBorder: none; @contentBorderRadius: 0em; @contentBoxShadow: none; +@contentColor: @textColor; /* Header */ @headerMargin: -@lineHeightOffset 0em 0em; @@ -164,6 +165,7 @@ @invertedHeaderLinkHoverColor: @invertedHoveredTextColor; @invertedMetaLinkColor: @invertedLightTextColor; @invertedMetaLinkHoverColor: @invertedTextColor; +@invertedContentColor: @invertedTextColor; @invertedContentLinkColor: lighten(saturate(@linkColor, 30), 25, relative); @invertedContentLinkHoverColor: @linkColor; @invertedExtraColor: @invertedLightTextColor;