diff options
Diffstat (limited to 'themes/light/cdm.less')
| -rw-r--r-- | themes/light/cdm.less | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/themes/light/cdm.less b/themes/light/cdm.less new file mode 100644 index 000000000..3a5b602f2 --- /dev/null +++ b/themes/light/cdm.less @@ -0,0 +1,327 @@ +.cdm { + i.material-icons { + color : @color-icon; + } + + .header { + position: sticky; + top : 0; + z-index: 3; + } + + .header, .footer { + display : flex; + flex-direction : row; + flex-wrap : nowrap; + } + + .header img, .footer img, + .footer i.material-icons { + margin : 0px 4px; + vertical-align: middle; + } + + .header-sticky-guard { + height : 0; + } + + .header { + align-items : center; + + > * { + padding : 4px; + white-space : nowrap; + } + + .left, .right { + display : flex; + align-items : center; + + i.material-icons { + margin-left : 2px; + padding : 2px; + transition : color 0.2s linear; + user-select: none; + font-size : 21px; + } + } + + .titleWrap { + flex-grow : 2; + } + + span.updated { + color : @default-text; + font-weight : normal; + font-size : 11px; + white-space : nowrap; + } + + input { + margin : 0px 4px; + } + } + + .footer { + height : 30px; + padding-left : 5px; + font-weight : normal; + color : @default-text; + clear : both; + align-items : center; + + .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; + } + + .titleWrap { + white-space : normal; + } + + .footer { + border: 0px solid @border-default; + border-bottom-width: 1px; + } + + > hr { + margin-top : 0px; + margin-bottom : 0px; + } + +} + +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; +} + +div.cdm.expanded.active { + background : white; +} + +div.cdm.expanded.active div.header a.title { + color : @color-link; +} + +div.cdm.expanded.Unread div.header a.title { + color : black; +} + +div.cdm.expanded div.content { + color : @default-text; +} + +div.cdm.expanded.Unread div.content { + color : black; +} + +div.cdm.active div.content { + color : black; +} + +div.cdm.vgrlf .feed { + display : none; +} + +.cdm { + div.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; + + iframe { + border : 0; + bottom : 0; + height : 100%; + left : 0; + position : absolute; + top : 0; + width : 100%; + } + } + + 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; + } + + div.header span.titleWrap { + white-space : nowrap; + text-overflow : ellipsis; + overflow : hidden; + } + + .excerpt { + white-space : nowrap; + font-size : 11px; + color : #999; + font-weight : normal; + cursor : pointer; + } + +} + +.cdm.expandable:not(.active) { + user-select : none; +} + +.cdm.expandable.Unread { + background : white; +} + +.cdm.expandable.Selected:not(.active) { + background : desaturate(@color-accent, 25%); + + a, + .header a.title, + span { + color : white; + } +} + +.cdm.expandable.active { + background : white ! important; +} + +div.cdm.expandable.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; +} + +div.cdm.expandable.Unread div.header a.title { + color : black; +} + +div.cdm.expandable.active { + .collapse i.material-icons { + color : @color-accent; + cursor : pointer; + } + + .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.cdm.expandable:not(.active) { + cursor : pointer; + + .content, .collapse { + display : none; + } +} + +div.cdm { + &.expandable.active, + &.expanded { + .header[stuck] { + box-shadow : 0 1px 1px -1px rgba(0,0,0,0.1); + border: 0 solid @border-default; + border-bottom-width: 1px; + background : @default-bg ! important; + opacity: 0.9; + backdrop-filter: blur(6px); + } + } +} |