Added Minimal theme#1388
Conversation
|
Hello @kevinpapst Since the theme is so close to the existing Origine theme, I would first like to try to see if we could merge the two. Would you be willing to briefly illustrate the main changes? For the record, here is a diff: --- ./FreshRSS/p/themes/Origine/origine.css
+++ ./FreshRSS/p/themes/Minimal/minimal.css
@@ -38,7 +38,7 @@
}
input, select, textarea {
min-height: 25px;
- padding: 5px;
+ padding: 3px 5px 2px 5px;
background: #fdfdfd;
border: 1px solid #bbb;
border-radius: 3px;
@@ -105,7 +105,7 @@
}
.form-group .group-controls {
min-height: 25px;
- padding: 5px 0;
+ padding: 8px 0;
}
.form-group table {
margin: 10px 0 0 220px;
@@ -152,7 +152,7 @@
.btn {
display: inline-block;
- min-height: 37px;
+ min-height: 32px;
min-width: 15px;
margin: 0;
padding: 5px 10px;
@@ -174,8 +174,8 @@
overflow: hidden;
}
a.btn {
- min-height: 25px;
- line-height: 25px;
+ min-height: 20px;
+ line-height: 20px;
}
.btn:hover {
background: #f0f0f0;
@@ -321,9 +321,11 @@
.horizontal-list {
margin: 0;
padding: 0;
+ font-size: 0.9rem;
}
.horizontal-list .item {
vertical-align: middle;
+ line-height: 30px;
}
/*=== Dropdown */
@@ -504,10 +506,10 @@
}
.tree-folder-title {
position: relative;
- padding: 0 10px;
+ padding: 0 5px;
background: #fff;
- line-height: 2.5rem;
- font-size: 1rem;
+ line-height: 2rem;
+ font-size: 0.9rem;
}
.tree-folder-title .title {
background: inherit;
@@ -530,7 +532,7 @@
}
.tree-folder-items > .item {
padding: 0 10px;
- line-height: 2.5rem;
+ line-height: 2.2rem;
font-size: 0.8rem;
}
.tree-folder-items > .item.active {
@@ -547,11 +549,11 @@
/*===============*/
/*=== Header */
.header {
- height: 85px;
+ height: 40px;
background: #f4f4f4;
}
.header > .item {
- padding: 10px;
+ padding: 0px;
border-bottom: 1px solid #aaa;
vertical-align: middle;
text-align: center;
@@ -560,14 +562,26 @@
width: 230px;
}
.header > .item.title h1 {
- margin: 0.5em 0;
- text-shadow: 1px -1px 0 #ccc;
+ margin: 0;
+ font-size: 1em;
}
.header > .item.title h1 a {
text-decoration: none;
}
+.header .item.configure .btn,
+.header .item.search .btn {
+ min-height: 18px;
+ padding: 4px 10px;
+ line-height: 18px;
+}
+.header > .item.title .logo {
+ height: 25px;
+ width: 25px;
+}
+
.header > .item.search input {
width: 230px;
+ padding: 1px 5px 0px 5px;
}
.header .item.search input:focus {
width: 350px;
@@ -596,8 +610,8 @@
right: 0;
margin: 10px 0;
padding: 0 10px;
- font-size: 0.9rem;
- line-height: 1.5rem;
+ font-size: 0.8rem;
+ line-height: 0.9rem;
background: inherit;
}
@@ -682,9 +696,10 @@
/*=== Day indication */
.day {
+ font-size: 0.9rem;
padding: 0 10px;
font-weight: bold;
- line-height: 3em;
+ line-height: 2em;
background: #fff;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
@@ -695,9 +710,8 @@
.day .name {
padding: 0 10px 0 0;
color: #aab;
- font-size: 1.8em;
- opacity: 0.3;
- text-shadow: 0px -1px 0px #666;
+ font-size: 1em;
+ opacity: 0.6;
font-style: italic;
text-align: right;
}
@@ -746,7 +760,7 @@
cursor: pointer;
}
.flux_header .title {
- font-size: 0.9rem;
+ font-size: 0.8rem;
}
.flux .website .favicon {
padding: 5px;
@@ -763,7 +777,10 @@
/*=== Content of feed articles */
.content {
- padding: 20px 10px;
+ padding: 10px 10px;
+}
+#stream.normal .content > h1.title {
+ display:none;
}
.content > h1.title > a {
color: #000;
@@ -854,15 +871,18 @@
#bigMarkAsRead {
text-align: center;
text-decoration: none;
- text-shadow: 0 -1px 0 #aaa;
color: #666;
background: #fafafa;
+ font-size: 1.2em;
}
#bigMarkAsRead:hover {
color: #0062be;
background: #fff;
box-shadow: 0 -5px 10px #eee inset;
}
+#bigMarkAsRead .bigTick {
+ font-size: 3em;
+}
#bigMarkAsRead:hover .bigTick {
text-shadow: 0 0 5px #0062be;
}
@@ -873,7 +893,7 @@
background: #fff;
border-top: 1px solid #ddd;
text-align: center;
- line-height: 3em;
+ line-height: 2.2em;
table-layout: fixed;
} |
|
Hey @Alkarex - thanks to you for keeping FreshRSS alive! The main changes ... hm ... probably you try the theme quickly in your own installation to see it in action? But I'try to summarize the most important changes:
From my perspective, its more content-focused now: I can now see 21 feed entries in the list view compared to 14 before and 18 entries in the left column, compared to 14. Please be aware, that I am not a UI/Frontend expert (more a backend dev) and this might be a personal preference, but RSS feeds are content centric and I prefer to see more within one screen without scrolling. Attached are two comparison screenshots - you know images say more than words ;-) Oh and btw: If you don't want to integrate it, I am totally fine hosting it with an additional README (linking back to the original source, naming author ...) in my own repo. That somehow relates to my question here... |
|
Maybe @marienfressinaud could have some comments regarding those changes. |
|
That name sounds much better and describes it clearer! I will wait for some more feedback and change everything at once. |
|
Hello again @kevinpapst, |
|
Cool. I will do that and come back |
|
Hello again, |
|
Sorry for the delay, I was busy but now I finally pushed the "rename" commit. |
|
LGTM |
|
Cool, thanks guys! |
New theme *Origine-compact* #1388
|
Thanks to you :-) |
3 participants
Hi guys,
I am not sure if you want to add more themes... but I'll give it a try ;-)
When I encountered FreshRSS I really enjoyed the software package - fantastic work!
The default theme - in my eyes - is beautiful but at the same time is wasting a lot space in the viewport with paddings, margins, line-height and to large font-sizes... so I created a fork from Origine and adjusted some sizes to fit more information onto the screen.
In the first place I opened this PR to get some feedback and input on what could be further improved and also contribute a bit back to the community.
Any thoughts?