From 755072de9180880122b4629e49fa4d1fa4ca5e2a Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Thu, 11 Mar 2021 14:32:15 +0300 Subject: css cleanup, combined mode, fonts --- themes/light/cdm.less | 335 ++++++++++++++++++++++++-------------------------- 1 file changed, 164 insertions(+), 171 deletions(-) (limited to 'themes/light/cdm.less') diff --git a/themes/light/cdm.less b/themes/light/cdm.less index 760fa44c7..9ba4ed78e 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -3,12 +3,6 @@ color : @color-icon; }*/ - .header { - position: sticky; - top : 0; - z-index: 3; - } - .header, .footer { display : flex; flex-direction : row; @@ -17,7 +11,7 @@ .header img, .footer img, .footer i.material-icons { - margin : 0px 4px; + margin : 0 4px; vertical-align: middle; } @@ -26,6 +20,9 @@ } .header { + position: sticky; + top : 0; + z-index: 3; align-items : center; > * { @@ -50,16 +47,43 @@ flex-grow : 2; } - span.updated { + .updated { color : @default-text; font-weight : normal; - font-size : 11px; + font-size : @font-size-small; white-space : nowrap; } input { margin : 0px 4px; } + + .feed { + float: right; + font-weight: normal; + font-style: italic; + + a { + border-radius : 4px; + display : inline-block; + padding : 1px 4px 1px 4px; + } + } + + .feed, .feed a { + vertical-align: middle; + color: @default-text; + font-weight: normal; + font-style: italic; + font-size: @font-size-small; + } + + .author { + white-space : nowrap; + color : @default-text; + font-size : @font-size-small; + font-weight : normal; + } } .footer { @@ -82,6 +106,7 @@ .intermediate { margin-top : 10px; margin-left : 10px; + line-height : 1.5; } .content-inner { @@ -106,100 +131,84 @@ width : auto; height : auto; } -} -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ - - .collapse, .excerpt { - display : none; - } - - .titleWrap { - white-space : normal; - } + &.expanded { - .footer { - border: 0px solid @border-default; - border-bottom-width: 1px; - } + .collapse, .excerpt { + display : none; + } - > hr { - margin-top : 0px; - margin-bottom : 0px; - } + .titleWrap { + white-space : normal; + } -} + .footer { + border: 0px solid @border-default; + border-bottom-width: 1px; + } -div.cdm.expanded div.header a.title { - font-size : 16px; - color : #999; - font-weight : 600; - transition : color 0.2s, background 0.2s; - text-rendering: optimizelegibility; - font-family : @fonts-ui-bold; -} + > hr { + margin-top : 0; + margin-bottom : 0; + } -div.cdm.expanded.active div.header a.title { - color : @color-link; -} + .header a.title { + font-size : 16px; + color : #999; + font-weight : 600; + transition : color 0.2s, background 0.2s; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; + } -div.cdm.expanded.Unread div.header a.title { - color : black; -} + &.active, + &.Unread { + .content { + color : black; + } + } -div.cdm.expanded div.content { - color : @default-text; -} + &.active { + .header .title { + color : @color-link; + } + } -div.cdm.expanded.Unread div.content { - color : black; -} + &.Unread { + .header .title { + color : black; + } + } -div.cdm.active div.content { - color : black; -} + .content { + color : @default-text; + } + } -div.cdm.vgrlf .feed { - display : none; -} + &.vgrlf .feed { + display : none; + } -.cdm { - div.feed-title { + .feed-title { border: 0px solid @color-link; border-bottom-width: 1px; padding: 5px 3px 5px 5px; - } - div.feed-title a.title { - color: @default-text; - font-weight: bold; - } - - div.feed-title a { - color: @default-text; - } - - div.feed-title a:hover { - color: @color-link; - } + a.title { + color: @default-text; + font-weight: bold; + } - div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; - } + a { + color: @default-text; + } - div.header div.feed, div.header div.feed a { - vertical-align: middle; - color: @default-text; - font-weight: normal; - font-style: italic; - font-size: 11px; + a:hover { + color: @color-link; + } } - div.content-inner div.embed-responsive { + .content-inner .embed-responsive { overflow : hidden; padding-bottom : @embed-responsive-padding; position : relative; @@ -215,112 +224,96 @@ div.cdm.vgrlf .feed { } } - div.header span.author { - white-space : nowrap; - color : @default-text; - font-size : 11px; - font-weight : normal; - } - - .feed a { - border-radius : 4px; - display : inline-block; - padding : 1px 4px 1px 4px; - } -} - -.cdm.expandable { - background-color : @color-panel-bg; - border: 0px solid @border-default; - border-bottom-width: 1px; - - > hr { - display : none; - } + &.expandable { + background-color : @color-panel-bg; + border: 0px solid @border-default; + border-bottom-width: 1px; - div.header span.titleWrap { - white-space : nowrap; - text-overflow : ellipsis; - overflow : hidden; - } + > hr { + display : none; + } - .excerpt { - white-space : nowrap; - font-size : 11px; - color : #999; - font-weight : normal; - cursor : pointer; - } + div.header span.titleWrap { + white-space : nowrap; + text-overflow : ellipsis; + overflow : hidden; + } -} + .excerpt { + white-space : nowrap; + font-size : @font-size-small; + color : #999; + font-weight : normal; + cursor : pointer; + } -.cdm.expandable:not(.active) { - user-select : none; -} + &:not(.active) { + user-select : none; + } -.cdm.expandable.Unread { - background : white; -} + &.Unread { + background : white; + } -.cdm.expandable.Selected:not(.active) { - background : desaturate(@color-accent, 25%); + &.Selected:not(.active) { + background : desaturate(@color-accent, 25%); - a, - .header a.title, - span { - color : white; - } -} + a, + .header a.title, + span { + color : white; + } + } -.cdm.expandable.active { - background : white ! important; -} + &.active { + background : white ! important; + } -div.cdm.expandable.active div.header span.titleWrap { - white-space : normal; -} + &.active div.header span.titleWrap { + white-space : normal; + } -div.cdm.expandable div.header a.title { - font-weight : 600; - color : @default-text; - font-size : 14px; - transition : color 0.2s, background 0.2s; - text-rendering: optimizelegibility; - font-family : @fonts-ui-bold; -} + .header a.title { + font-weight : 600; + color : @default-text; + font-size : 14px; + transition : color 0.2s, background 0.2s; + text-rendering: optimizelegibility; + font-family : @fonts-ui-bold; + } -div.cdm.expandable.Unread div.header a.title { - color : black; -} + &.Unread div.header a.title { + color : black; + } -div.cdm.expandable.active { - .collapse i.material-icons { - color : @color-accent; - cursor : pointer; - } + &.active { + .collapse i.material-icons { + color : @color-accent; + cursor : pointer; + } - .excerpt { - display: none; - } + .excerpt { + display: none; + } - div.header a.title { - color: @color-link; - font-size: 16px; - font-weight: 600; - text-rendering: optimizelegibility; - font-family: @fonts-ui-bold; - } -} + div.header a.title { + color: @color-link; + font-size: 16px; + font-weight: 600; + text-rendering: optimizelegibility; + font-family: @fonts-ui-bold; + } + } -div.cdm.expandable:not(.active) { - cursor : pointer; + &:not(.active) { + cursor : pointer; - .content, .collapse { - display : none; + .content, .collapse { + display : none; + } + } } -} -div.cdm { &.expandable.active, &.expanded { .header[data-is-stuck] { -- cgit v1.2.3