summaryrefslogtreecommitdiff
path: root/css/tt-rss.less
diff options
context:
space:
mode:
Diffstat (limited to 'css/tt-rss.less')
-rwxr-xr-xcss/tt-rss.less360
1 files changed, 201 insertions, 159 deletions
diff --git a/css/tt-rss.less b/css/tt-rss.less
index cbe5cdddf..494e52888 100755
--- a/css/tt-rss.less
+++ b/css/tt-rss.less
@@ -1,6 +1,6 @@
body.ttrss_main {
- background : white;
- color : black;
+ background : @default-bg;
+ color : @default-fg;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
overflow : hidden;
@@ -11,42 +11,52 @@ body.ttrss_main {
div.post {
padding : 0px;
+ font-size : 13px;
div.header {
padding : 5px;
color : #909090;
- border: 0px solid #ddd;
+ border: 0px solid @border-default;
border-bottom-width: 1px;
- background: #f0f0f0;
+ background: @color-panel-bg;
- div.date {
- text-align : right;
- float : right;
+ .left, .right {
+ display : flex;
}
- div {
- padding-bottom : 3px;
+ .row {
+ display : flex;
+ margin-bottom : 4px;
+ flex-wrap : nowrap;
+
+ > * {
+ align-self : center;
+ }
}
- span.author {
- color : @default-text;
- font-size : 11px;
- font-weight : normal;
+ .comments {
+ flex-grow : 2;
}
- }
- div.title {
- overflow : hidden;
- font-size : 15px;
- text-overflow: ellipsis;
- white-space : nowrap;
- font-weight : 600;
- text-rendering: optimizelegibility;
- font-family : @fonts-ui-bold;
- }
+ .date {
+ text-align : right;
+ white-space : nowrap;
+ align-self : flex-start;
+ }
- div.date {
- padding-left : 10px;
+ img, i {
+ margin : 0px 4px;
+ vertical-align: middle;
+ }
+
+ .title {
+ flex-grow : 2;
+ align-self : flex-start;
+ font-size : 15px;
+ font-weight : 600;
+ text-rendering: optimizelegibility;
+ font-family : @fonts-ui-bold;
+ }
}
div.content {
@@ -69,36 +79,37 @@ body.ttrss_main {
max-width : 98%;
}
}
+ }
- div.postEnclosures {
- color : @default-text;
- }
+ .inline-player {
+ display : flex;
- img.tagsPic {
- width : 16px;
- height : 16px;
- margin-left : 4px;
- vertical-align : middle;
+ > * {
+ align-self : center;
}
- span.author {
- font-size : 12px;
+ audio {
+ margin-right : 8px;
}
}
- div.articleNote {
+ .article-note {
background-color : #fff7d5;
- padding : 5px;
margin : 5px;
border: 1px solid #e7d796;
color : #9a8c59;
+ display : flex;
- div.noteEdit {
- float : right;
- cursor : pointer;
+ > * {
+ align-self : center;
+ padding : 5px;
}
}
+ .article-note.editable {
+ cursor : pointer;
+ }
+
h1 {
font-size : 18px;
font-weight : 600;
@@ -143,42 +154,39 @@ body.ttrss_main {
}
#notify.visible {
- transform: translate(0, -35px);
+ transform: translate(0, -45px);
}
#notify {
- bottom : -35px;
+ bottom : -45px;
right : 0px;
- height : 20px;
+ height : 30px;
left : 0px;
border-width : 1px 0px 0px 0px;
border-style : solid;
position : fixed;
- font-size : 12px;
+ font-size : 13px;
z-index : 99;
- padding : 5px;
- box-shadow : 0px -2px 2px rgba(0,0,0,0.1);
+ display : flex;
transition: all 0.5s ease-in-out;
+ > * {
+ align-self : center;
+ padding : 4px;
+ }
+
img {
vertical-align : middle;
- max-height : 14px;
}
- span.msg {
- width : 100%;
+ .msg {
+ flex-grow : 2;
}
- img.close {
+ .icon-close {
cursor : pointer;
}
-
- span {
- display : table-cell;
- vertical-align : middle;
- padding : 2px;
- }
}
.notify {
@@ -194,20 +202,30 @@ body.ttrss_main {
.notify.notify_info {
border-color : @color-accent;
background-color : @color-accent-light;
+
+ i.icon-notify {
+ color : @color-accent;
+ }
}
.notify.notify_error {
- background-color : #ffcccc;
- border-color : #ff0000;
+ background-color : #c00;
+ border-color : #900;
+ color : white;
+
+ i.icon-notify, i.icon-close {
+ color : white;
+ }
}
.hl {
- border: 0px solid #ddd;
+ border: 0px solid @border-default;
border-bottom-width: 1px;
transition : color 0.2s, background 0.2s;
display : flex;
flex-direction : row;
flex-wrap : nowrap;
+ background : @color-panel-bg;
> * {
align-self : center;
@@ -218,6 +236,7 @@ body.ttrss_main {
img {
vertical-align : middle;
}
+
.left, .right {
display : flex;
@@ -241,6 +260,13 @@ body.ttrss_main {
text-overflow : ellipsis;
}
+ span.author {
+ white-space : nowrap;
+ color : @default-text;
+ font-size : 11px;
+ font-weight : normal;
+ }
+
div.right {
text-align : right;
}
@@ -282,7 +308,7 @@ body.ttrss_main {
font-weight : 600;
text-rendering: optimizelegibility;
font-family : @fonts-ui;
- color : #777;
+ color : #555;
}
a.title.high, span.hl-content.high .preview {
@@ -290,14 +316,12 @@ body.ttrss_main {
}
}
- .hl.Unread a.title.high, .hl.Unread span.hl-content.high .preview {
- color : #00dd00;
+ .hl.vgrlf .feed {
+ display : none;
}
- .hl a.title.low, span.hl-content.low .preview,
- .hl.Unread a.title.low, .hl.Unread span.hl-content.low .preview {
- color : #909090;
- text-decoration : line-through;
+ .hl.Unread {
+ background : white;
}
.hl.Unread div.title a {
@@ -330,15 +354,6 @@ body.ttrss_main {
color : #909090;
}
- div.filterTestHolder {
- height : 300px;
- overflow : auto;
- border-color : #ddd;
- border-style : solid;
- margin : 0px 0px 5px 0px;
- border-width : 1px;
- }
-
#content-insert blockquote,
#headlines-frame blockquote,
.dijitContentPane blockquote {
@@ -365,7 +380,7 @@ body.ttrss_main {
font-family: monospace;
font-size: 12px;
border: 0px solid #ccc;
- background: #f5f5f5;
+ background: @color-panel-bg;
display: block;
max-width: 98%;
overflow: auto;
@@ -374,7 +389,7 @@ body.ttrss_main {
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 4px;
@@ -429,12 +444,6 @@ body.ttrss_main {
}
}
- ul.nomarks {
- list-style-type : none;
- margin : 0px;
- padding : 10px;
- }
-
div.prefHelp {
color : @default-text;
padding : 5px;
@@ -457,13 +466,13 @@ body.ttrss_main {
.hl.Selected .hlLabelRef,
.hl.active .hlLabelRef {
- color : #063064;
+ color : @default-fg;
}
span.hlLabelRef {
background-color : #fff7d5;
font-size : 8px;
- color : #063064;
+ color : @default-fg;
font-weight : normal;
margin-left : 2px;
padding : 1px 4px 1px 4px;
@@ -478,40 +487,18 @@ body.ttrss_main {
color : #ccc;
}
- div.tagCloudContainer {
- background : white;
- border : 1px solid #ddd;
- margin : 5px 0px 5px 0px;
- padding : 5px;
- text-align : center;
- }
-
div.errorExplained {
- border : 1px solid #ddd;
+ border : 1px solid @border-default;
margin : 5px 0px 5px 0px;
padding : 5px;
}
- ul.feedErrorsList {
- max-height : 300px;
- overflow : auto;
- list-style-type : none;
- border : 1px solid #ddd;
- margin : 0px 0px 5px 0px;
- padding : 5px;
-
- em {
- color : @default-text;
- }
- }
-
-
ul.browseFeedList {
height : 300px;
width : 100%;
overflow : auto;
border-width : 0px 1px 1px 1px;
- border-color : #ddd;
+ border-color : @border-default;
border-style : solid;
margin : 0px 0px 5px 0px;
background-color : white;
@@ -549,7 +536,7 @@ body.ttrss_main {
}
#overlay {
- background : white;
+ background : @default-bg;
left : 0;
top : 0;
height : 100%;
@@ -563,11 +550,6 @@ body.ttrss_main {
margin : 1em;
}
- form {
- margin : 0px;
- padding : 0px;
- }
-
div.loadingPrompt {
padding : 1em;
text-align : center;
@@ -579,15 +561,15 @@ body.ttrss_main {
text-align : center;
padding : 1em 1em 0px 1em;
font-size : 11px;
- border: 0px solid #ddd;
+ border: 0px solid @border-default;
border-bottom-width: 1px;
}
div.autocomplete {
position : absolute;
width : 250px;
- background-color : white;
- border :1px solid #778899;
+ background-color : @default-bg;
+ border :1px solid @border-default;
margin : 0px;
padding : 0px;
@@ -598,7 +580,7 @@ body.ttrss_main {
}
ul li.selected {
- background-color : #fff7d5;
+ background-color : darken(@default-bg, 10%);
}
ul li {
@@ -623,9 +605,6 @@ body.ttrss_main {
}
}
- img.score-pic {
-
- }
div.dlgSec {
font-size : 14px;
@@ -672,17 +651,8 @@ body.ttrss_main {
}
}
- span.labelColorIndicator {
- height : 16px;
- width : 16px;
- border-radius : 4px;
- line-height : 14px;
- vertical-align : middle;
- font-size : 9px;
- display : inline-block;
- background-color : #fff7d5;
- color : #063064;
- text-align : center;
+ i.icon-label {
+ color : #fff7d5;
}
div#cmdline {
@@ -692,7 +662,7 @@ body.ttrss_main {
font-size : 11px;
color : @default-text;
font-weight : bold;
- background-color : white;
+ background-color : @default-bg;
border : 1px solid @color-accent;
padding : 3px 5px 3px 5px;
z-index : 5;
@@ -725,9 +695,9 @@ body.ttrss_main {
#feeds-holder {
padding : 0px;
- border: 0px solid #ddd;
+ border: 0px solid @border-default;
overflow : hidden;
- background : #f5f5f5;
+ background : @color-panel-bg;
box-shadow : inset -1px 0px 2px -1px rgba(0,0,0,0.1);
-webkit-overflow-scrolling : touch;
@@ -738,9 +708,9 @@ body.ttrss_main {
font-family : @fonts-ui;
.counterNode.aux {
- background : #f0f0f0;
- color : #999;
- border-color : #f0f0f0;
+ background : @color-panel-bg;
+ color : lighten(@default-text, 10%);
+ border-color : darken(@color-panel-bg, 10%);
}
.counterNode {
@@ -777,18 +747,15 @@ body.ttrss_main {
color : red;
}
- .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
- color : #909090;
- }
-
.dijitTreeNode .dijitTreeRow {
border : 1px solid transparent;
}
.dijitTreeNode .dijitTreeRowSelected {
box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
- border-color : #ddd transparent;
- background : white;
+ border-color : @border-default transparent;
+ background : @default-bg;
+ color : #333;
}
.icon {
@@ -819,11 +786,11 @@ body.ttrss_main {
color : @color-published;
}
- i.icon.icon-new_releases {
- color : @color-enabled;
+ i.icon.icon-whatshot {
+ color : @color-checked;
}
- i.icon.icon-cached {
+ i.icon.icon-restore {
font-weight : bold;
left : -3px;
color : @color-accent;
@@ -840,7 +807,7 @@ body.ttrss_main {
#headlines-frame {
padding : 0px;
- border: 0px #ddd;
+ border: 0px @border-default;
margin-top : 0px;
-webkit-overflow-scrolling : touch;
-webkit-transform: translateZ(0);
@@ -849,7 +816,7 @@ body.ttrss_main {
div.feed-title {
border: 0px solid @color-link;
border-bottom-width: 1px;
- padding: 5px 3px 5px 5px;
+ padding: 5px 8px;
}
div.feed-title a.title {
@@ -879,8 +846,9 @@ body.ttrss_main {
#toolbar {
background : white;
- border: 0px solid #ddd;
+ border: 0px solid @border-default;
border-bottom-width: 1px;
+ padding-left : 4px;
height : 32px;
display : flex;
flex-direction : row;
@@ -898,6 +866,10 @@ body.ttrss_main {
border : 0px;
}
+ .net-alert i, .left i.icon-error {
+ color : red;
+ }
+
#toolbar-headlines {
padding-right : 4px;
flex-grow : 2;
@@ -926,10 +898,16 @@ body.ttrss_main {
}
}
+ #updates-available {
+ color : @color-checked;
+ padding-right : 4px;
+ }
+
#selected_prompt {
font-style : italic;
text-align : right;
margin-right : 4px;
+ color : @color-accent;
}
@media (max-width: 992px) {
@@ -954,7 +932,7 @@ body.ttrss_main {
#content-insert {
padding : 0px;
- border-color : #ddd;
+ border-color : @border-default;
border-width : 0px;
line-height: 1.5;
overflow : auto;
@@ -979,7 +957,7 @@ body.ttrss_main {
margin : 0px 2px 0px 2px;
width : 50px;
text-align : center;
- background : white;
+ background : @default-bg;
}
.player.playing {
@@ -988,12 +966,15 @@ body.ttrss_main {
}
.player:hover {
- background : #f0f0f0;
+ background : @color-panel-bg;
cursor : pointer;
}
- #headlines-spacer {
+ #headlines-frame.auto_catchup #headlines-spacer {
height : 100%;
+ }
+
+ #headlines-spacer {
margin-left : 1px;
text-align : center;
color : @default-text;
@@ -1016,9 +997,9 @@ body.ttrss_main {
overflow : auto;
list-style-type : none;
border-style : solid;
- border-color : #ddd;
+ border-color : @border-default;
border-width : 1px 1px 1px 1px;
- background-color : white;
+ background-color : @default-bg;
margin : 0px 0px 5px 0px;
padding : 4px;
min-height : 16px;
@@ -1036,7 +1017,7 @@ body.ttrss_main {
max-height : 300px;
overflow : auto;
list-style-type : none;
- border : 1px solid #ddd;
+ border : 1px solid @border-default;
margin : 0px 0px 5px 0px;
padding : 5px;
@@ -1182,21 +1163,78 @@ body.ttrss_main {
border-radius : 4px;
}
+ i.icon-no-feed {
+ opacity : 0.2;
+ }
+
+ .dijitTreeRow.UpdatesDisabled .dijitTreeLabel {
+ opacity : 0.5;
+ }
+
+ #floatingTitle.marked i.marked-pic,
.cdm.marked .left i.marked-pic,
.hl.marked .left i.marked-pic {
color : @color-marked;
}
+ #floatingTitle.published i.pub-pic,
.cdm.published .left i.pub-pic,
.hl.published .left i.pub-pic {
color : @color-published;
}
+ .score-high i.icon-score {
+ color : @color-checked;
+ }
+
+ .score-low i.icon-score {
+ color : #500;
+ }
+
+ .score-neutral i.icon-score {
+ opacity : 0.5;
+ }
+
+ i.icon-score {
+ cursor : pointer;
+ }
+
+ .panel {
+ border : 1px solid @border-default;
+ background : @color-panel-bg;
+ padding : 4px;
+ }
+
+ .dijitDialog .panel {
+ background : @default-bg;
+ }
+
+ .panel-scrollable {
+ overflow : auto;
+ height : 200px;
+ }
+
+ ul.list li {
+ padding : 2px;
+ }
+
+ ul.list {
+ padding : 4px;
+ }
+
+ ul.list-unstyled {
+ list-style-type : none;
+ }
+
+ .text-center {
+ text-align : center;
+ }
+
}
::selection {
background : @color-accent;
- color : white;
+ color : @default-bg;
}
::-webkit-scrollbar {
@@ -1210,3 +1248,7 @@ body.ttrss_main {
::-webkit-scrollbar-track {
background-color: #eee;
}
+
+video::-webkit-media-controls-overlay-play-button {
+ display: none;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-16 23:15:59 +0000