mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-05-04 05:03:38 -04:00
Fix theme Origine2
It should be equivalent to Origine (modulo some improvements) See https://github.com/marienfressinaud/FreshRSS/issues/320
This commit is contained in:
Marien Fressinaud
@@ -53,7 +53,7 @@
|
||||
invalidateHttpCache();
|
||||
}
|
||||
?>
|
||||
<div id="notification" class="<?php echo $status; ?>">
|
||||
<div id="notification" class="notification <?php echo $status; ?>">
|
||||
<span class="msg"><?php echo $msg; ?></span>
|
||||
<a class="close" href=""><?php echo FreshRSS_Themes::icon('close'); ?></a>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ var feeds = [<?php
|
||||
|
||||
function initProgressBar(init) {
|
||||
if (init) {
|
||||
$("body").after("\<div id=\"actualizeProgress\" class=\"actualizeProgress\">\
|
||||
$("body").after("\<div id=\"actualizeProgress\" class=\"notification good\">\
|
||||
<?php echo Minz_Translate::t ('refresh'); ?> <span class=\"progress\">0 / " + feed_count + "</span><br />\
|
||||
<progress id=\"actualizeProgressBar\" value=\"0\" max=\"" + feed_count + "\"></progress>\
|
||||
</div>");
|
||||
|
||||
@@ -41,7 +41,7 @@ input, select, textarea {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
color: #666;
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 2px 2px #eee inset;
|
||||
}
|
||||
option {
|
||||
@@ -59,8 +59,7 @@ input:invalid, select:invalid {
|
||||
input:disabled, select:disabled {
|
||||
background: #eee;
|
||||
}
|
||||
input:focus.extend {
|
||||
width: 300px;
|
||||
input.extend {
|
||||
transition: width 200ms linear;
|
||||
-moz-transition: width 200ms linear;
|
||||
-webkit-transition: width 200ms linear;
|
||||
@@ -68,6 +67,18 @@ input:focus.extend {
|
||||
-ms-transition: width 200ms linear;
|
||||
}
|
||||
|
||||
/*=== Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tr, th, td {
|
||||
padding: 0.5em;
|
||||
border: 1px solid #ddd;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/*=== COMPONENTS */
|
||||
/*===============*/
|
||||
/*=== Forms */
|
||||
@@ -87,6 +98,9 @@ input:focus.extend {
|
||||
min-height: 25px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.form-group table {
|
||||
margin: 10px 0 0 220px;
|
||||
}
|
||||
|
||||
/*=== Buttons */
|
||||
.stick {
|
||||
@@ -249,13 +263,6 @@ a.btn {
|
||||
.nav-list a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-list .item.error a {
|
||||
color: #BD362F;
|
||||
}
|
||||
.nav-list .item.active.error a {
|
||||
color: #fff;
|
||||
background: #BD362F;
|
||||
}
|
||||
.nav-list .item.empty a {
|
||||
color: #f39c12;
|
||||
}
|
||||
@@ -263,6 +270,13 @@ a.btn {
|
||||
color: #fff;
|
||||
background: #f39c12;
|
||||
}
|
||||
.nav-list .item.error a {
|
||||
color: #BD362F;
|
||||
}
|
||||
.nav-list .item.active.error a {
|
||||
color: #fff;
|
||||
background: #BD362F;
|
||||
}
|
||||
|
||||
.nav-list .nav-header {
|
||||
padding: 0 10px;
|
||||
@@ -515,6 +529,7 @@ a.btn {
|
||||
line-height: 3em;
|
||||
font-size: 0.8em;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
}
|
||||
.categories .feeds .feed:not([data-unread="0"]) {
|
||||
font-weight: bold;
|
||||
@@ -635,21 +650,38 @@ a.btn {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
.flux_header {
|
||||
border-top: 1px solid #ddd;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.flux .website .favicon {
|
||||
padding: 5px;
|
||||
}
|
||||
.flux .date {
|
||||
color: #666;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.flux:not(.current):hover .item.title {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.flux .bottom {
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*=== Content of feed articles */
|
||||
.content {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.content > h1.title > a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*=== Notification and actualize notification */
|
||||
#notification {
|
||||
.notification {
|
||||
padding: 0 0 0 5px;
|
||||
text-align: center;
|
||||
border: 1px solid #eeb;
|
||||
@@ -659,27 +691,33 @@ a.btn {
|
||||
font-size: 0.9em;
|
||||
line-height: 3em;
|
||||
z-index: 10;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#notification.good {
|
||||
.notification.good {
|
||||
background: #ffe;
|
||||
border: 1px solid #eeb;
|
||||
color: #c95;
|
||||
}
|
||||
#notification.bad {
|
||||
.notification.bad {
|
||||
background: #fdd;
|
||||
border: 1px solid #ecc;
|
||||
color: #844;
|
||||
}
|
||||
#notification a.close {
|
||||
.notification a.close {
|
||||
padding: 0 15px;
|
||||
line-height: 3em;
|
||||
}
|
||||
#notification.good a.close:hover {
|
||||
.notification.good a.close:hover {
|
||||
background: #eeb;
|
||||
}
|
||||
#notification.bad a.close:hover {
|
||||
.notification.bad a.close:hover {
|
||||
background: #ecc;
|
||||
}
|
||||
|
||||
.notification#actualizeProgress {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
/*=== "Load more" part */
|
||||
#bigMarkAsRead {
|
||||
text-align: center;
|
||||
@@ -701,6 +739,66 @@ a.btn {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
/*=== READER VIEW */
|
||||
/*================*/
|
||||
#stream.reader .flux {
|
||||
padding: 0 0 50px;
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
#stream.reader .flux .author {
|
||||
margin: 0 0 10px;
|
||||
font-size: 90%;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/*=== GLOBAL VIEW */
|
||||
/*================*/
|
||||
#stream.global .box-category {
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
box-shadow: 0 0 3px #bbb;
|
||||
}
|
||||
#stream.global .category {
|
||||
margin: 0;
|
||||
}
|
||||
#stream.global .btn {
|
||||
width: auto;
|
||||
height: 2em;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
background: #f6f6f6;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 5px 5px 0 0;
|
||||
line-height: 2em;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
#stream.global .btn:not([data-unread="0"]) {
|
||||
background: #0084CC;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-shadow: none;
|
||||
}
|
||||
#stream.global .btn:first-child:not([data-unread="0"]):after {
|
||||
top: 0; right: 5px;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
#stream.global .box-category .feeds {
|
||||
max-height: 250px;
|
||||
}
|
||||
#stream.global .box-category .feeds .item {
|
||||
padding: 2px 10px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
/*=== DIVERS */
|
||||
/*===========*/
|
||||
@@ -714,3 +812,61 @@ a.btn {
|
||||
.aside.aside_feed .nav-form .dropdown .dropdown-menu:after {
|
||||
right: 33px;
|
||||
}
|
||||
|
||||
|
||||
/*=== MOBILE */
|
||||
/*===========*/
|
||||
@media(max-width: 840px) {
|
||||
.aside {
|
||||
box-shadow: 3px 0 3px #aaa;
|
||||
transition: width 200ms linear;
|
||||
-moz-transition: width 200ms linear;
|
||||
-webkit-transition: width 200ms linear;
|
||||
-o-transition: width 200ms linear;
|
||||
-ms-transition: width 200ms linear;
|
||||
}
|
||||
.aside .toggle_aside,
|
||||
#panel .close {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0; right: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #f6f6f6;
|
||||
border-left: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.nav_menu .btn {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
.nav_menu .stick {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.nav_menu .stick .btn {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.nav_menu .search {
|
||||
display: inline-block;
|
||||
max-width: 97%;
|
||||
}
|
||||
.nav_menu .search input {
|
||||
max-width: 97%;
|
||||
width: 90px;
|
||||
}
|
||||
.nav_menu .search input:focus {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.day .name {
|
||||
font-size: 1.1rem;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.flux_header .item.website .favicon {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -169,8 +169,7 @@ a.btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
overflow: auto;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
@@ -294,6 +293,10 @@ a.btn {
|
||||
}
|
||||
|
||||
/*=== Aside main page (categories) */
|
||||
.categories {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.category {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@@ -359,10 +362,10 @@ a.btn {
|
||||
position: relative;
|
||||
}
|
||||
.flux .item {
|
||||
font-size: 0.9em;
|
||||
line-height: 40px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flux .item.manage,
|
||||
.flux .item.link {
|
||||
@@ -391,14 +394,16 @@ a.btn {
|
||||
}
|
||||
.flux .item.date {
|
||||
width: 145px;
|
||||
font-size: 0.7em;
|
||||
text-align: right;
|
||||
}
|
||||
.flux .item > a {
|
||||
display: block;
|
||||
}
|
||||
.flux .item:not(.title) > a {
|
||||
display: block;
|
||||
}
|
||||
.flux .flux_header .item,
|
||||
.flux .bottom .item.date {
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flux .item.share > a {
|
||||
@@ -417,6 +422,15 @@ a.btn {
|
||||
line-height: 1.7em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.content.large {
|
||||
max-width: 1000px;
|
||||
}
|
||||
.content.medium {
|
||||
max-width: 800px;
|
||||
}
|
||||
.content.thin {
|
||||
max-width: 550px;
|
||||
}
|
||||
.content ul,
|
||||
.content ol,
|
||||
.content dd {
|
||||
@@ -428,7 +442,7 @@ a.btn {
|
||||
}
|
||||
|
||||
/*=== Notification and actualize notification */
|
||||
#notification {
|
||||
.notification {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 25%; right: 25%;
|
||||
@@ -436,24 +450,21 @@ a.btn {
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
#notification.closed {
|
||||
.notification.closed {
|
||||
display: none;
|
||||
}
|
||||
#notification a.close {
|
||||
.notification a.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.actualizeProgress {
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
left: 25%; right: 25%;
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.actualizeProgress progress {
|
||||
#actualizeProgress progress {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#actualizeProgress .progress {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
@@ -501,9 +512,10 @@ a.btn {
|
||||
/*=== Category boxes */
|
||||
#stream.global .box-category {
|
||||
display: inline-block;
|
||||
width: 20em;
|
||||
width: 19em;
|
||||
max-width: 95%;
|
||||
border: 1px solid #aaa;
|
||||
margin: 20px 10px;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: top;
|
||||
}
|
||||
#stream.global .category {
|
||||
@@ -516,6 +528,10 @@ a.btn {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
#stream.global .box-category .feed {
|
||||
width: 19em;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
/*=== Panel */
|
||||
#overlay {
|
||||
@@ -571,27 +587,31 @@ a.btn {
|
||||
.item.date, .day .date {
|
||||
display: none;
|
||||
}
|
||||
.nav-login,
|
||||
#panel .close img {
|
||||
.nav-login {
|
||||
display: block;
|
||||
}
|
||||
.nav_menu .toggle_aside,
|
||||
.aside .toggle_aside,
|
||||
.nav_menu .search {
|
||||
.nav_menu .search,
|
||||
#panel .close img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.aside {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
top: 0; bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
z-index: 100;
|
||||
}
|
||||
.aside:target {
|
||||
width: 80%;
|
||||
width: 90%;
|
||||
overflow: auto;
|
||||
}
|
||||
.aside .categories {
|
||||
margin: 10px 0 75px;
|
||||
}
|
||||
|
||||
.flux_header .item.website {
|
||||
width: 40px;
|
||||
@@ -614,6 +634,10 @@ a.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#stream.global .box-category {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#panel {
|
||||
top: 0; bottom: 0;
|
||||
left: 0; right: 0;
|
||||
|
||||
@@ -169,8 +169,7 @@ a.btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
overflow: auto;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
@@ -294,6 +293,10 @@ a.btn {
|
||||
}
|
||||
|
||||
/*=== Aside main page (categories) */
|
||||
.categories {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.category {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@@ -359,10 +362,10 @@ a.btn {
|
||||
position: relative;
|
||||
}
|
||||
.flux .item {
|
||||
font-size: 0.9em;
|
||||
line-height: 40px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flux .item.manage,
|
||||
.flux .item.link {
|
||||
@@ -391,14 +394,16 @@ a.btn {
|
||||
}
|
||||
.flux .item.date {
|
||||
width: 145px;
|
||||
font-size: 0.7em;
|
||||
text-align: right;
|
||||
}
|
||||
.flux .item > a {
|
||||
display: block;
|
||||
}
|
||||
.flux .item:not(.title) > a {
|
||||
display: block;
|
||||
}
|
||||
.flux .flux_header .item,
|
||||
.flux .bottom .item.date {
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flux .item.share > a {
|
||||
@@ -417,6 +422,15 @@ a.btn {
|
||||
line-height: 1.7em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.content.large {
|
||||
max-width: 1000px;
|
||||
}
|
||||
.content.medium {
|
||||
max-width: 800px;
|
||||
}
|
||||
.content.thin {
|
||||
max-width: 550px;
|
||||
}
|
||||
.content ul,
|
||||
.content ol,
|
||||
.content dd {
|
||||
@@ -428,7 +442,7 @@ a.btn {
|
||||
}
|
||||
|
||||
/*=== Notification and actualize notification */
|
||||
#notification {
|
||||
.notification {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 25%; right: 25%;
|
||||
@@ -436,24 +450,21 @@ a.btn {
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
#notification.closed {
|
||||
.notification.closed {
|
||||
display: none;
|
||||
}
|
||||
#notification a.close {
|
||||
.notification a.close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.actualizeProgress {
|
||||
position: fixed;
|
||||
top: 1em;
|
||||
left: 25%; right: 25%;
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.actualizeProgress progress {
|
||||
#actualizeProgress progress {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#actualizeProgress .progress {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
@@ -501,9 +512,10 @@ a.btn {
|
||||
/*=== Category boxes */
|
||||
#stream.global .box-category {
|
||||
display: inline-block;
|
||||
width: 20em;
|
||||
width: 19em;
|
||||
max-width: 95%;
|
||||
border: 1px solid #aaa;
|
||||
margin: 20px 10px;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: top;
|
||||
}
|
||||
#stream.global .category {
|
||||
@@ -516,6 +528,10 @@ a.btn {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
#stream.global .box-category .feed {
|
||||
width: 19em;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
/*=== Panel */
|
||||
#overlay {
|
||||
@@ -571,27 +587,31 @@ a.btn {
|
||||
.item.date, .day .date {
|
||||
display: none;
|
||||
}
|
||||
.nav-login,
|
||||
#panel .close img {
|
||||
.nav-login {
|
||||
display: block;
|
||||
}
|
||||
.nav_menu .toggle_aside,
|
||||
.aside .toggle_aside,
|
||||
.nav_menu .search {
|
||||
.nav_menu .search,
|
||||
#panel .close img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.aside {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
top: 0; bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
z-index: 100;
|
||||
}
|
||||
.aside:target {
|
||||
width: 80%;
|
||||
width: 90%;
|
||||
overflow: auto;
|
||||
}
|
||||
.aside .categories {
|
||||
margin: 10px 0 75px;
|
||||
}
|
||||
|
||||
.flux_header .item.website {
|
||||
width: 40px;
|
||||
@@ -614,6 +634,10 @@ a.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#stream.global .box-category {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#panel {
|
||||
top: 0; bottom: 0;
|
||||
left: 0; right: 0;
|
||||
|
||||
Reference in New Issue
Block a user