valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css: simplify flex styling a bit, set more specific selectors for i elements

This commit is contained in:
Andrew Dolgov 2019-02-19 19:57:38 +03:00
parent 8cd7f31bde
commit 430e9e373a
8 changed files with 90 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/cdm.less
View File

@ -6,24 +6,22 @@
}
.header img, .footer img,
.footer i {
.footer i.material-icons {
margin : 0px 4px;
vertical-align: middle;
}
.header {
align-items : center;
> * {
align-self : center;
padding : 4px;
white-space : nowrap;
}
.left, .right {
display : flex;
> * {
align-self : center;
}
align-items : center;
i.material-icons {
margin-left : 2px;
@ -56,10 +54,7 @@
font-weight : normal;
color : @default-text;
clear : both;
> * {
align-self : center;
}
align-items : center;
.left {
flex-grow : 2;
@ -232,19 +227,16 @@ div#floatingTitle {
flex-direction : row;
flex-wrap : nowrap;
box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
align-items: center;
> * {
align-self: center;
white-space : nowrap;
padding : 4px;
}
.left, .right {
display : flex;
> * {
align-self : center;
}
align-items : center;
i.material-icons {
margin-left : 2px;
@ -266,7 +258,7 @@ div#floatingTitle {
display : none;
}
.collapse i {
.collapse i.material-icons {
color : @color-accent;
cursor : pointer;
}
@ -407,7 +399,7 @@ div.cdm.expandable.Unread div.header a.title {
}
div.cdm.expandable.active {
.collapse i {
.collapse i.material-icons {
color : @color-accent;
cursor : pointer;
}

65
css/default.css
View File

@ -38,26 +38,22 @@ body.ttrss_main div.post div.header .row {
display: flex;
margin-bottom: 4px;
flex-wrap: nowrap;
}
body.ttrss_main div.post div.header .row > * {
align-self: center;
align-items: center;
justify-content: space-between;
}
body.ttrss_main div.post div.header .comments {
flex-grow: 2;
}
body.ttrss_main div.post div.header .date {
text-align: right;
white-space: nowrap;
align-self: flex-start;
}
body.ttrss_main div.post div.header img,
body.ttrss_main div.post div.header i {
body.ttrss_main div.post div.header i.material-icons {
margin: 0px 4px;
vertical-align: middle;
}
body.ttrss_main div.post div.header .title {
flex-grow: 2;
align-self: flex-start;
font-size: 15px;
font-weight: 600;
text-rendering: optimizelegibility;
@ -82,9 +78,7 @@ body.ttrss_main div.post div.content iframe {
}
body.ttrss_main .inline-player {
display: flex;
}
body.ttrss_main .inline-player > * {
align-self: center;
align-items: center;
}
body.ttrss_main .inline-player audio {
margin-right: 8px;
@ -95,9 +89,9 @@ body.ttrss_main .article-note {
border: 1px solid #e7d796;
color: #9a8c59;
display: flex;
align-items: center;
}
body.ttrss_main .article-note > * {
align-self: center;
padding: 5px;
}
body.ttrss_main .article-note.editable {
@ -145,10 +139,10 @@ body.ttrss_main #notify {
font-size: 13px;
z-index: 99;
display: flex;
align-items: center;
transition: all 0.5s ease-in-out;
}
body.ttrss_main #notify > * {
align-self: center;
padding: 4px;
}
body.ttrss_main #notify img {
@ -192,9 +186,9 @@ body.ttrss_main .hl {
flex-direction: row;
flex-wrap: nowrap;
background: #f5f5f5;
align-items: center;
}
body.ttrss_main .hl > * {
align-self: center;
white-space: nowrap;
padding: 4px;
}
@ -204,10 +198,7 @@ body.ttrss_main .hl img {
body.ttrss_main .hl .left,
body.ttrss_main .hl .right {
display: flex;
}
body.ttrss_main .hl .left > *,
body.ttrss_main .hl .right > * {
align-self: center;
align-items: center;
}
body.ttrss_main .hl .left i.material-icons,
body.ttrss_main .hl .right i.material-icons {
@ -384,9 +375,9 @@ body.ttrss_main ul.browseFeedList {
}
body.ttrss_main ul.browseFeedList li {
display: flex;
align-items: center;
}
body.ttrss_main ul.browseFeedList li > * {
align-self: center;
margin: 2px;
}
body.ttrss_main .browseFeedList span.subscribers {
@ -681,9 +672,7 @@ body.ttrss_main #toolbar-frame #toolbar {
flex-wrap: nowrap;
color: #555;
font-size: 12px;
}
body.ttrss_main #toolbar-frame #toolbar > * {
align-self: center;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar .dijitSelect,
body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode,
@ -705,19 +694,15 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines {
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left {
flex-grow: 2;
display: flex;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left img {
vertical-align: middle;
margin-right: 8px;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left > * {
align-self: center;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
display: flex;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right > * {
align-self: center;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar #updates-available {
color: #69C671;
@ -1025,22 +1010,21 @@ video::-webkit-media-controls-overlay-play-button {
}
.cdm .header img,
.cdm .footer img,
.cdm .footer i {
.cdm .footer i.material-icons {
margin: 0px 4px;
vertical-align: middle;
}
.cdm .header {
align-items: center;
}
.cdm .header > * {
align-self: center;
padding: 4px;
white-space: nowrap;
}
.cdm .header .left,
.cdm .header .right {
display: flex;
}
.cdm .header .left > *,
.cdm .header .right > * {
align-self: center;
align-items: center;
}
.cdm .header .left i.material-icons,
.cdm .header .right i.material-icons {
@ -1068,9 +1052,7 @@ video::-webkit-media-controls-overlay-play-button {
font-weight: normal;
color: #555;
clear: both;
}
.cdm .footer > * {
align-self: center;
align-items: center;
}
.cdm .footer .left {
flex-grow: 2;
@ -1209,19 +1191,16 @@ div#floatingTitle {
flex-direction: row;
flex-wrap: nowrap;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
align-items: center;
}
div#floatingTitle > * {
align-self: center;
white-space: nowrap;
padding: 4px;
}
div#floatingTitle .left,
div#floatingTitle .right {
display: flex;
}
div#floatingTitle .left > *,
div#floatingTitle .right > * {
align-self: center;
align-items: center;
}
div#floatingTitle .left i.material-icons,
div#floatingTitle .right i.material-icons {
@ -1241,7 +1220,7 @@ div#floatingTitle .right i.icon-anchor {
div#floatingTitle .excerpt {
display: none;
}
div#floatingTitle .collapse i {
div#floatingTitle .collapse i.material-icons {
color: #257aa7;
cursor: pointer;
}
@ -1352,7 +1331,7 @@ div.cdm.expandable div.header a.title {
div.cdm.expandable.Unread div.header a.title {
color: black;
}
div.cdm.expandable.active .collapse i {
div.cdm.expandable.active .collapse i.material-icons {
color: #257aa7;
cursor: pointer;
}

2
css/default.css.map
View File

File diff suppressed because one or more lines are too long

45
css/tt-rss.less
View File

@ -28,10 +28,8 @@ body.ttrss_main {
display : flex;
margin-bottom : 4px;
flex-wrap : nowrap;
> * {
align-self : center;
}
align-items : center;
justify-content : space-between;
}
.comments {
@ -39,19 +37,16 @@ body.ttrss_main {
}
.date {
text-align : right;
white-space : nowrap;
align-self : flex-start;
}
img, i {
img, i.material-icons {
margin : 0px 4px;
vertical-align: middle;
}
.title {
flex-grow : 2;
align-self : flex-start;
font-size : 15px;
font-weight : 600;
text-rendering: optimizelegibility;
@ -83,10 +78,7 @@ body.ttrss_main {
.inline-player {
display : flex;
> * {
align-self : center;
}
align-items : center;
audio {
margin-right : 8px;
@ -99,9 +91,9 @@ body.ttrss_main {
border: 1px solid #e7d796;
color : #9a8c59;
display : flex;
align-items : center;
> * {
align-self : center;
padding : 5px;
}
}
@ -163,11 +155,10 @@ body.ttrss_main {
font-size : 13px;
z-index : 99;
display : flex;
align-items : center;
transition: all 0.5s ease-in-out;
> * {
align-self : center;
padding : 4px;
}
@ -221,9 +212,9 @@ body.ttrss_main {
flex-direction : row;
flex-wrap : nowrap;
background : @color-panel-bg;
align-items : center;
> * {
align-self : center;
white-space : nowrap;
padding : 4px;
}
@ -234,10 +225,7 @@ body.ttrss_main {
.left, .right {
display : flex;
> * {
align-self : center;
}
align-items : center;
i.material-icons {
margin-left : 2px;
@ -438,9 +426,9 @@ body.ttrss_main {
li {
display : flex;
align-items : center;
> * {
align-self : center;
margin : 2px;
}
}
@ -802,10 +790,7 @@ body.ttrss_main {
flex-wrap : nowrap;
color : @default-text;
font-size : 12px;
> * {
align-self : center;
}
align-items : center;
.dijitSelect,
.dijitDropDownButton .dijitButtonNode,
@ -829,23 +814,17 @@ body.ttrss_main {
.left {
flex-grow: 2;
display : flex;
align-items : center;
img {
vertical-align : middle;
margin-right : 8px;
}
> * {
align-self: center;
}
}
.right {
display : flex;
> * {
align-self : center;
}
align-items : center;
}
}

65
themes/night.css
View File

@ -39,26 +39,22 @@ body.ttrss_main div.post div.header .row {
display: flex;
margin-bottom: 4px;
flex-wrap: nowrap;
}
body.ttrss_main div.post div.header .row > * {
align-self: center;
align-items: center;
justify-content: space-between;
}
body.ttrss_main div.post div.header .comments {
flex-grow: 2;
}
body.ttrss_main div.post div.header .date {
text-align: right;
white-space: nowrap;
align-self: flex-start;
}
body.ttrss_main div.post div.header img,
body.ttrss_main div.post div.header i {
body.ttrss_main div.post div.header i.material-icons {
margin: 0px 4px;
vertical-align: middle;
}
body.ttrss_main div.post div.header .title {
flex-grow: 2;
align-self: flex-start;
font-size: 15px;
font-weight: 600;
text-rendering: optimizelegibility;
@ -83,9 +79,7 @@ body.ttrss_main div.post div.content iframe {
}
body.ttrss_main .inline-player {
display: flex;
}
body.ttrss_main .inline-player > * {
align-self: center;
align-items: center;
}
body.ttrss_main .inline-player audio {
margin-right: 8px;
@ -96,9 +90,9 @@ body.ttrss_main .article-note {
border: 1px solid #e7d796;
color: #9a8c59;
display: flex;
align-items: center;
}
body.ttrss_main .article-note > * {
align-self: center;
padding: 5px;
}
body.ttrss_main .article-note.editable {
@ -146,10 +140,10 @@ body.ttrss_main #notify {
font-size: 13px;
z-index: 99;
display: flex;
align-items: center;
transition: all 0.5s ease-in-out;
}
body.ttrss_main #notify > * {
align-self: center;
padding: 4px;
}
body.ttrss_main #notify img {
@ -193,9 +187,9 @@ body.ttrss_main .hl {
flex-direction: row;
flex-wrap: nowrap;
background: #222;
align-items: center;
}
body.ttrss_main .hl > * {
align-self: center;
white-space: nowrap;
padding: 4px;
}
@ -205,10 +199,7 @@ body.ttrss_main .hl img {
body.ttrss_main .hl .left,
body.ttrss_main .hl .right {
display: flex;
}
body.ttrss_main .hl .left > *,
body.ttrss_main .hl .right > * {
align-self: center;
align-items: center;
}
body.ttrss_main .hl .left i.material-icons,
body.ttrss_main .hl .right i.material-icons {
@ -385,9 +376,9 @@ body.ttrss_main ul.browseFeedList {
}
body.ttrss_main ul.browseFeedList li {
display: flex;
align-items: center;
}
body.ttrss_main ul.browseFeedList li > * {
align-self: center;
margin: 2px;
}
body.ttrss_main .browseFeedList span.subscribers {
@ -682,9 +673,7 @@ body.ttrss_main #toolbar-frame #toolbar {
flex-wrap: nowrap;
color: #ccc;
font-size: 12px;
}
body.ttrss_main #toolbar-frame #toolbar > * {
align-self: center;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar .dijitSelect,
body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode,
@ -706,19 +695,15 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines {
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left {
flex-grow: 2;
display: flex;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left img {
vertical-align: middle;
margin-right: 8px;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left > * {
align-self: center;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
display: flex;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right > * {
align-self: center;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar #updates-available {
color: #69C671;
@ -1026,22 +1011,21 @@ video::-webkit-media-controls-overlay-play-button {
}
.cdm .header img,
.cdm .footer img,
.cdm .footer i {
.cdm .footer i.material-icons {
margin: 0px 4px;
vertical-align: middle;
}
.cdm .header {
align-items: center;
}
.cdm .header > * {
align-self: center;
padding: 4px;
white-space: nowrap;
}
.cdm .header .left,
.cdm .header .right {
display: flex;
}
.cdm .header .left > *,
.cdm .header .right > * {
align-self: center;
align-items: center;
}
.cdm .header .left i.material-icons,
.cdm .header .right i.material-icons {
@ -1069,9 +1053,7 @@ video::-webkit-media-controls-overlay-play-button {
font-weight: normal;
color: #ccc;
clear: both;
}
.cdm .footer > * {
align-self: center;
align-items: center;
}
.cdm .footer .left {
flex-grow: 2;
@ -1210,19 +1192,16 @@ div#floatingTitle {
flex-direction: row;
flex-wrap: nowrap;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
align-items: center;
}
div#floatingTitle > * {
align-self: center;
white-space: nowrap;
padding: 4px;
}
div#floatingTitle .left,
div#floatingTitle .right {
display: flex;
}
div#floatingTitle .left > *,
div#floatingTitle .right > * {
align-self: center;
align-items: center;
}
div#floatingTitle .left i.material-icons,
div#floatingTitle .right i.material-icons {
@ -1242,7 +1221,7 @@ div#floatingTitle .right i.icon-anchor {
div#floatingTitle .excerpt {
display: none;
}
div#floatingTitle .collapse i {
div#floatingTitle .collapse i.material-icons {
color: #b87d2c;
cursor: pointer;
}
@ -1353,7 +1332,7 @@ div.cdm.expandable div.header a.title {
div.cdm.expandable.Unread div.header a.title {
color: black;
}
div.cdm.expandable.active .collapse i {
div.cdm.expandable.active .collapse i.material-icons {
color: #b87d2c;
cursor: pointer;
}

2
themes/night.css.map
View File

File diff suppressed because one or more lines are too long

65
themes/night_blue.css
View File

@ -39,26 +39,22 @@ body.ttrss_main div.post div.header .row {
display: flex;
margin-bottom: 4px;
flex-wrap: nowrap;
}
body.ttrss_main div.post div.header .row > * {
align-self: center;
align-items: center;
justify-content: space-between;
}
body.ttrss_main div.post div.header .comments {
flex-grow: 2;
}
body.ttrss_main div.post div.header .date {
text-align: right;
white-space: nowrap;
align-self: flex-start;
}
body.ttrss_main div.post div.header img,
body.ttrss_main div.post div.header i {
body.ttrss_main div.post div.header i.material-icons {
margin: 0px 4px;
vertical-align: middle;
}
body.ttrss_main div.post div.header .title {
flex-grow: 2;
align-self: flex-start;
font-size: 15px;
font-weight: 600;
text-rendering: optimizelegibility;
@ -83,9 +79,7 @@ body.ttrss_main div.post div.content iframe {
}
body.ttrss_main .inline-player {
display: flex;
}
body.ttrss_main .inline-player > * {
align-self: center;
align-items: center;
}
body.ttrss_main .inline-player audio {
margin-right: 8px;
@ -96,9 +90,9 @@ body.ttrss_main .article-note {
border: 1px solid #e7d796;
color: #9a8c59;
display: flex;
align-items: center;
}
body.ttrss_main .article-note > * {
align-self: center;
padding: 5px;
}
body.ttrss_main .article-note.editable {
@ -146,10 +140,10 @@ body.ttrss_main #notify {
font-size: 13px;
z-index: 99;
display: flex;
align-items: center;
transition: all 0.5s ease-in-out;
}
body.ttrss_main #notify > * {
align-self: center;
padding: 4px;
}
body.ttrss_main #notify img {
@ -193,9 +187,9 @@ body.ttrss_main .hl {
flex-direction: row;
flex-wrap: nowrap;
background: #222;
align-items: center;
}
body.ttrss_main .hl > * {
align-self: center;
white-space: nowrap;
padding: 4px;
}
@ -205,10 +199,7 @@ body.ttrss_main .hl img {
body.ttrss_main .hl .left,
body.ttrss_main .hl .right {
display: flex;
}
body.ttrss_main .hl .left > *,
body.ttrss_main .hl .right > * {
align-self: center;
align-items: center;
}
body.ttrss_main .hl .left i.material-icons,
body.ttrss_main .hl .right i.material-icons {
@ -385,9 +376,9 @@ body.ttrss_main ul.browseFeedList {
}
body.ttrss_main ul.browseFeedList li {
display: flex;
align-items: center;
}
body.ttrss_main ul.browseFeedList li > * {
align-self: center;
margin: 2px;
}
body.ttrss_main .browseFeedList span.subscribers {
@ -682,9 +673,7 @@ body.ttrss_main #toolbar-frame #toolbar {
flex-wrap: nowrap;
color: #ccc;
font-size: 12px;
}
body.ttrss_main #toolbar-frame #toolbar > * {
align-self: center;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar .dijitSelect,
body.ttrss_main #toolbar-frame #toolbar .dijitDropDownButton .dijitButtonNode,
@ -706,19 +695,15 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines {
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left {
flex-grow: 2;
display: flex;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left img {
vertical-align: middle;
margin-right: 8px;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left > * {
align-self: center;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
display: flex;
}
body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right > * {
align-self: center;
align-items: center;
}
body.ttrss_main #toolbar-frame #toolbar #updates-available {
color: #69C671;
@ -1026,22 +1011,21 @@ video::-webkit-media-controls-overlay-play-button {
}
.cdm .header img,
.cdm .footer img,
.cdm .footer i {
.cdm .footer i.material-icons {
margin: 0px 4px;
vertical-align: middle;
}
.cdm .header {
align-items: center;
}
.cdm .header > * {
align-self: center;
padding: 4px;
white-space: nowrap;
}
.cdm .header .left,
.cdm .header .right {
display: flex;
}
.cdm .header .left > *,
.cdm .header .right > * {
align-self: center;
align-items: center;
}
.cdm .header .left i.material-icons,
.cdm .header .right i.material-icons {
@ -1069,9 +1053,7 @@ video::-webkit-media-controls-overlay-play-button {
font-weight: normal;
color: #ccc;
clear: both;
}
.cdm .footer > * {
align-self: center;
align-items: center;
}
.cdm .footer .left {
flex-grow: 2;
@ -1210,19 +1192,16 @@ div#floatingTitle {
flex-direction: row;
flex-wrap: nowrap;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
align-items: center;
}
div#floatingTitle > * {
align-self: center;
white-space: nowrap;
padding: 4px;
}
div#floatingTitle .left,
div#floatingTitle .right {
display: flex;
}
div#floatingTitle .left > *,
div#floatingTitle .right > * {
align-self: center;
align-items: center;
}
div#floatingTitle .left i.material-icons,
div#floatingTitle .right i.material-icons {
@ -1242,7 +1221,7 @@ div#floatingTitle .right i.icon-anchor {
div#floatingTitle .excerpt {
display: none;
}
div#floatingTitle .collapse i {
div#floatingTitle .collapse i.material-icons {
color: #257aa7;
cursor: pointer;
}
@ -1353,7 +1332,7 @@ div.cdm.expandable div.header a.title {
div.cdm.expandable.Unread div.header a.title {
color: black;
}
div.cdm.expandable.active .collapse i {
div.cdm.expandable.active .collapse i.material-icons {
color: #257aa7;
cursor: pointer;
}

2
themes/night_blue.css.map
View File

File diff suppressed because one or more lines are too long