diff options
Diffstat (limited to 'themes/light/cdm.less')
-rw-r--r-- | themes/light/cdm.less | 398 |
1 files changed, 197 insertions, 201 deletions
diff --git a/themes/light/cdm.less b/themes/light/cdm.less index 3a5b602f2..5641a0380 100644 --- a/themes/light/cdm.less +++ b/themes/light/cdm.less @@ -1,13 +1,7 @@ .cdm { - i.material-icons { + /*i.material-icons { color : @color-icon; - } - - .header { - position: sticky; - top : 0; - z-index: 3; - } + }*/ .header, .footer { display : flex; @@ -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 { @@ -70,252 +94,224 @@ clear : both; align-items : center; + i.material-icons { + color : @color-icon; + } + .left { flex-grow : 2; } } - .intermediate { - margin-top : 10px; - margin-left : 10px; - } - .content-inner { margin : 10px; line-height : 1.5; font-size : 16px; } - .intermediate img, - .intermediate video, - .content-inner img, - .content-inner video { - border-width : 0px; - max-width : 98%; - height : auto; - } -} - -.cdm.expanded { - /*margin-top : 4px; - margin-bottom : 4px;*/ - - .collapse, .excerpt { - display : none; - } + .content-inner { + iframe { + max-width : 98%; + width : auto; + height : auto; + } - .titleWrap { - white-space : normal; + img, + video { + border-width : 0px; + max-width : 98%; + width : auto; + height : auto; + } } - .footer { - border: 0px solid @border-default; - border-bottom-width: 1px; - } + &.expanded { - > hr { - margin-top : 0px; - margin-bottom : 0px; - } + .collapse, .excerpt { + display : none; + } -} + .titleWrap { + white-space : normal; + } -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; -} + .footer { + border: 0px solid @border-default; + border-bottom-width: 1px; + } -div.cdm.expanded.active { - background : white; -} + > 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; + } -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; - } - - div.header span.feed { - float: right; - font-weight: normal; - font-style: italic; - } - - div.header div.feed, div.header div.feed a { - vertical-align: middle; - color: @default-text; - font-weight: normal; - font-style: italic; - font-size: 11px; - } - - div.content-inner div.embed-responsive { - overflow : hidden; - padding-bottom : @embed-responsive-padding; - position : relative; + a.title { + color: @default-text; + font-weight: bold; + } - iframe { - border : 0; - bottom : 0; - height : 100%; - left : 0; - position : absolute; - top : 0; - width : 100%; + a { + color: @default-text; } - } - div.header span.author { - white-space : nowrap; - color : @default-text; - font-size : 11px; - font-weight : normal; + a:hover { + color: @color-link; + } } - .feed a { - border-radius : 4px; - display : inline-block; - padding : 1px 4px 1px 4px; + .content-inner { + .embed-responsive { + overflow : hidden; + padding-bottom : @embed-responsive-padding; + position : relative; + + iframe { + border : 0; + bottom : 0; + height : 100%; + left : 0; + position : absolute; + top : 0; + width : 100%; + } + } } -} - -.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 : @font-size-content; + transition : color 0.2s, background 0.2s; + text-rendering: optimizelegibility; + font-family : @fonts-ui; + } -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; + } + } -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[stuck] { + .header[data-is-stuck] { box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1); border: 0 solid @border-default; border-bottom-width: 1px; |