summaryrefslogtreecommitdiff
path: root/themes/light
diff options
context:
space:
mode:
authorAndrew Dolgov <[email protected]>2021-03-11 14:32:15 +0300
committerAndrew Dolgov <[email protected]>2021-03-11 14:32:15 +0300
commit755072de9180880122b4629e49fa4d1fa4ca5e2a (patch)
treed3da8ff0f6d1c4ef9e36b89d7c46bcfed044ce67 /themes/light
parentde47082ca6a9b03929f946745de1434b1a8da8b7 (diff)
css cleanup, combined mode, fonts
Diffstat (limited to 'themes/light')
-rw-r--r--themes/light/cdm.less335
-rw-r--r--themes/light/defines.less5
-rw-r--r--themes/light/dijit_basic.less46
-rw-r--r--themes/light/tt-rss.less215
-rw-r--r--themes/light/zoom.less4
5 files changed, 341 insertions, 264 deletions
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] {
diff --git a/themes/light/defines.less b/themes/light/defines.less
index 0786775ad..488b3f623 100644
--- a/themes/light/defines.less
+++ b/themes/light/defines.less
@@ -17,6 +17,11 @@
@color-hl-icon: #ccc;
@color-tooltip-fg: @color-panel-bg;
@color-tooltip-bg: darken(@color-accent, 10%);
+@cdm-grid-padding: 8px;
+@cdm-grid-col-width: 600px;
+@font-size-tiny: 9px;
+@font-size-small: 11px;
+@font-size-toolbar: 13px;
@embed-responsive-padding: 56.25%; // Use 56.25% for 16:9 aspect ratio, 75% for 4:3.
diff --git a/themes/light/dijit_basic.less b/themes/light/dijit_basic.less
index da1138986..4f2faadcb 100644
--- a/themes/light/dijit_basic.less
+++ b/themes/light/dijit_basic.less
@@ -38,8 +38,9 @@
}
.dijitToolbar {
- font-size: 13px;
- padding: 0px;
+ font-size: @font-size-toolbar;
+ font-family: @fonts-ui;
+ padding: 0;
.dijitTextBox .dijitInputContainer {
.dijitInputInner {
@@ -67,27 +68,35 @@
border-color : darken(@color-checked, 10%);
}
- .dijitMenu .dijitMenuItem .dijitMenuItemLabel {
- padding: 4px 8px;
- font-size: 13px;
- }
+ .dijitMenu {
+ .dijitMenuItem .dijitMenuItemLabel {
+ padding: 4px 8px;
+ font-size: @font-size-toolbar;
+ font-family: @fonts-ui;
+ }
- .dijitMenu .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel {
- color : lighten(@color-accent, 10%);
- }
+ .dijitMenuItem.dijitDisabled:not(.dijitMenuItemSelected) .dijitMenuItemLabel {
+ color : lighten(@color-accent, 10%);
+ }
- .dijitMenu .dijitMenuItem td {
- padding: 0px;
+ .dijitMenuItem td {
+ padding: 0;
+ }
}
.dijitCheckBox {
margin : 1px;
+
+ &:before {
+ font-family: "flat-icon";
+ content: "\f00c";
+ color: white;
+ }
}
- .dijitCheckBox:before {
- font-family: "flat-icon";
- content: "\f00c";
- color: white;
+ .dijitTab,
+ .dijitAccordionTitle {
+ font-family: @fonts-ui;
}
.dijitTab,
@@ -157,6 +166,7 @@
.dijitTreeRow {
overflow: hidden;
-moz-user-select: none;
+ user-select: none;
text-overflow: ellipsis;
}
@@ -169,10 +179,10 @@
cursor : pointer;
position: relative;
top : 1px;
- }
- label.dijitButton:hover {
- background-color : @color-panel-bg;
+ &:hover {
+ background-color : @color-panel-bg;
+ }
}
.dijitTree {
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index cc9a66bd6..8e7bce410 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -9,11 +9,11 @@ body.ttrss_main {
outline: none;
}
- div.post {
- padding : 0px;
+ .post {
+ padding : 0;
font-size : 13px;
- div.header {
+ .header {
padding : 5px;
color : #909090;
border: 0px solid @border-default;
@@ -273,7 +273,7 @@ body.ttrss_main {
span.author {
white-space : nowrap;
color : @default-text;
- font-size : 11px;
+ font-size : @font-size-small;
font-weight : normal;
}
@@ -285,7 +285,7 @@ body.ttrss_main {
border-radius : 4px;
display : inline-block;
padding : 1px 4px;
- font-size : 11px;
+ font-size : @font-size-small;
font-style : italic;
font-weight : normal;
color : @default-text;
@@ -298,7 +298,7 @@ body.ttrss_main {
span.updated {
color : @default-text;
text-align : right;
- font-size : 11px;
+ font-size : @font-size-small;
padding-left : 10px;
}
@@ -413,7 +413,7 @@ body.ttrss_main {
display : inline-block;
vertical-align: middle;
background-color : #fff7d5;
- font-size : 9px;
+ font-size : @font-size-tiny;
color : @default-fg;
font-weight : normal;
margin-left : 2px;
@@ -499,7 +499,7 @@ body.ttrss_main {
margin-left : 1px;
text-align : center;
padding : 1em 1em 0px 1em;
- font-size : 11px;
+ font-size : @font-size-small;
border: 0px solid @border-default;
border-bottom-width: 1px;
}
@@ -600,7 +600,7 @@ body.ttrss_main {
position : absolute;
left : 5px;
bottom : 5px;
- font-size : 11px;
+ font-size : @font-size-small;
color : @default-text;
font-weight : bold;
background-color : @default-bg;
@@ -622,14 +622,15 @@ body.ttrss_main {
textarea {
width : 99%;
height : 200px;
- font-size : 11px;
+ font-size : @font-size-small;
}
}
+ #headlines-wrap-inner,
#content-wrap {
- padding : 0px;
- border-width : 0px;
- margin : 0px;
+ padding : 0;
+ border : 0;
+ margin : 0;
}
#feeds-holder {
@@ -660,7 +661,7 @@ body.ttrss_main {
.counterNode {
font-weight : bold;
display : none;
- font-size : 9px;
+ font-size : @font-size-tiny;
text-align : center;
border : 1px solid lighten(@color-accent, 5%);;
color : white;
@@ -745,17 +746,78 @@ body.ttrss_main {
}
}
- #headlines-wrap-inner {
- padding : 0px;
- margin : 0px;
- border-width : 0px;
- }
+ #headlines-frame:not([data-headlines-count="0"])[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+ display : grid;
+ grid-template-columns: repeat(auto-fit, minmax(@cdm-grid-col-width, 1fr));
+ padding : @cdm-grid-padding;
+ grid-gap : @cdm-grid-padding;
+ background-color: @color-panel-bg;
- #headlines-frame[data-is-vfeed="false"] .header .feed {
- display : none;
+ > * {
+ // 2 = because #headlines-spacer is the actual last child
+ // only if odd to deal with 1) single article and 2) not break any previous rows
+ // 1 = spacer
+ //
+ // this is outside of .cdm selector because of #headlines-spacer etc
+ &:nth-last-child(2):nth-child(odd),
+ &:nth-last-child(1) {
+ grid-column : 1 e("/") -1;
+ }
+ }
+
+ .cdm.expanded {
+
+ .header, .content {
+ background : @default-bg;
+ border : 1px solid @border-default;
+ overflow : hidden;
+ }
+
+ .content {
+ border-top-width : 0;
+ padding : 0 4px 4px 4px;
+ }
+
+ .header[data-is-stuck] {
+ top : -@cdm-grid-padding;
+ border-bottom-width: 1px;
+ }
+
+ .header {
+ border-bottom-width : 0;
+ padding : 4px;
+
+ .icon-grid-span {
+ display : inline;
+ }
+
+ .feed {
+ display : none;
+ }
+ }
+
+ .footer {
+ border : 0;
+ padding : 4px;
+
+ .left, .right {
+ white-space: nowrap;
+ }
+
+ .left {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .content-inner,
+ .intermediate {
+ word-break: break-all;
+ }
+ }
}
- #headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
+ /*#headlines-frame[data-is-cdm="true"][data-is-cdm-expanded="true"][data-enable-grid="true"] {
display : grid;
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
background-color: @color-panel-bg;
@@ -819,38 +881,68 @@ body.ttrss_main {
word-break: break-all;
}
}
- }
+ }*/
#headlines-frame {
- padding : 0px;
- border: 0px @border-default;
- margin-top : 0px;
+ padding : 0;
+ border: 0;
+ margin-top : 0;
+
-webkit-overflow-scrolling : touch;
-webkit-transform: translateZ(0);
+ transform: translateZ(0);
-webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
- div.feed-title {
- border: 0px solid @color-link;
- border-bottom-width: 1px;
- padding: 5px 8px;
+ &[data-is-vfeed="false"] .header .feed {
+ display : none;
}
- div.feed-title a.title {
- color: @default-text;
- font-weight: bold;
+ &[data-auto-catchup="true"] #headlines-spacer {
+ height : 100vh;
}
- div.feed-title a {
- color: @default-text;
+ #headlines-spacer {
+ margin-left : 1px;
+ text-align : center;
+ color : @default-text;
+ font-size : @font-size-small;
+ font-style : italic;
+
+ a, span {
+ color : @default-text;
+ padding : 10px;
+ display : block;
+ }
+
+ a:hover {
+ color : @color-accent;
+ }
}
- div.feed-title a:hover {
- color: @color-link;
+ .feed-title {
+ border: 0px solid @color-link;
+ border-bottom-width: 1px;
+ padding: 5px 8px;
+
+ a.title {
+ color: @default-text;
+ font-weight: bold;
+ }
+
+ a {
+ color: @default-text;
+ }
+
+ a:hover {
+ color: @color-link;
+ }
}
span.hlMenuAttach {
-webkit-touch-callout: none;
-webkit-user-select: none;
+ user-select: none;
}
}
@@ -859,15 +951,15 @@ body.ttrss_main {
}
#toolbar-frame {
- padding : 0px;
- margin : 0px;
- border-width : 0px;
+ padding : 0;
+ margin : 0;
+ border : 0;
white-space: nowrap;
- font-size : 12px;
+ font-size : @font-size-toolbar;
#toolbar {
background : white;
- border: 0px solid @border-default;
+ border: 0 solid @border-default;
border-bottom-width: 1px;
padding-left : 4px;
height : 32px;
@@ -875,7 +967,7 @@ body.ttrss_main {
flex-direction : row;
flex-wrap : nowrap;
color : @default-text;
- font-size : 12px;
+ font-size : @font-size-toolbar;
align-items : center;
.dijitSelect,
@@ -898,7 +990,7 @@ body.ttrss_main {
}
#toolbar-headlines {
- font-size : 12px;
+ font-size : @font-size-toolbar;
background: transparent;
padding-right : 4px;
flex-grow : 2;
@@ -941,7 +1033,7 @@ body.ttrss_main {
}
#header {
- border-width : 0px;
+ border : 0;
text-align : right;
color : @default-text;
padding : 5px 5px 0px 0px;
@@ -971,9 +1063,8 @@ body.ttrss_main {
}
#content-insert {
- padding : 0px;
- border-color : @border-default;
- border-width : 0px;
+ padding : 0;
+ border : 0;
line-height: 1.5;
overflow : auto;
-webkit-overflow-scrolling : touch;
@@ -990,7 +1081,7 @@ body.ttrss_main {
.player {
display : inline-block;
color : @default-text;
- font-size : 11px;
+ font-size : @font-size-small;
font-family : sans-serif;
border : 1px solid @default-text;
padding : 0px 4px 0px 4px;
@@ -1010,28 +1101,6 @@ body.ttrss_main {
cursor : pointer;
}
- #headlines-frame[data-auto-catchup="true"] #headlines-spacer {
- height : 100vh;
- }
-
- #headlines-spacer {
- margin-left : 1px;
- text-align : center;
- color : @default-text;
- font-size : 11px;
- font-style : italic;
-
- a, span {
- color : @default-text;
- padding : 10px;
- display : block;
- }
-
- a:hover {
- color : @color-accent;
- }
- }
-
ul#filterDlg_Matches, ul#filterDlg_Actions {
list-style-type : none;
margin : 0;
@@ -1382,8 +1451,8 @@ body.ttrss_main, body.ttrss_utility {
color : @default-text;
}
- .small {
- font-size : 11px;
+ .text-small, .small {
+ font-size : @font-size-small;
}
div.autocomplete {
diff --git a/themes/light/zoom.less b/themes/light/zoom.less
index e599bc447..fd39e5b76 100644
--- a/themes/light/zoom.less
+++ b/themes/light/zoom.less
@@ -16,7 +16,7 @@ body.ttrss_zoom {
border: 0px solid @border-default;
border-bottom-width: 1px;
background : @default-bg;
- font-size : 12px;
+ font-size : @font-size-toolbar;
color : @default-text;
.row {
@@ -28,7 +28,7 @@ body.ttrss_zoom {
}
}
- div.content {
+ .content {
font-size : 15px;
line-height : 1.5;
border-width : 0;