aboutsummaryrefslogtreecommitdiff
path: root/p/themes/base-theme
diff options
context:
space:
mode:
authorGravatar Marien Fressinaud <dev@marienfressinaud.fr> 2015-01-31 14:45:37 +0100
committerGravatar Marien Fressinaud <dev@marienfressinaud.fr> 2015-01-31 14:45:37 +0100
commita97bbd9bd54c5fa56d54b3c214cf4e8af96af8b2 (patch)
tree6e83890bc1b3814a12c3b7bedc0d5944f30f507b /p/themes/base-theme
parent42fd539a1b14f883077048a35864b4294b6efe94 (diff)
parente91b72b63cd11ae3c4f59e48439e93955242c673 (diff)
Merge branch 'dev'
Conflicts: CHANGELOG README.fr.md README.md app/Controllers/feedController.php app/Controllers/indexController.php app/i18n/en.php app/i18n/fr.php app/views/helpers/view/normal_view.phtml app/views/stats/index.phtml app/views/stats/repartition.phtml constants.php p/scripts/main.js
Diffstat (limited to 'p/themes/base-theme')
-rw-r--r--p/themes/base-theme/README.md2
-rw-r--r--p/themes/base-theme/base.css177
-rw-r--r--p/themes/base-theme/template.css340
3 files changed, 361 insertions, 158 deletions
diff --git a/p/themes/base-theme/README.md b/p/themes/base-theme/README.md
index 6f186e15c..9f7d635ca 100644
--- a/p/themes/base-theme/README.md
+++ b/p/themes/base-theme/README.md
@@ -8,5 +8,5 @@ A base theme for [FreshRSS](http://freshrss.org)
3. Choose your new theme in FreshRSS configuration
4. Enjoy your wonderful theme!
-Don't hesitate to share your theme with us [on Github](https://github.com/marienfressinaud/FreshRSS/issues) :)
+Don't hesitate to share your theme with us [on Github](https://github.com/FreshRSS/FreshRSS/issues) :)
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index ccfab10df..f874d554c 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -329,6 +329,66 @@ a.btn {
font-size: 0;
}
+/*=== Boxes */
+.box {
+}
+.box .box-title {
+ margin: 0;
+ padding: 5px 10px;
+}
+.box .box-content {
+ max-height: 260px;
+}
+
+.box .box-content .item {
+ padding: 0 10px;
+ font-size: 0.9rem;
+ line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+ visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+ visibility: visible;
+}
+
+/*=== Tree */
+.tree {
+ margin: 10px 0;
+}
+.tree-folder-title {
+ position: relative;
+ padding: 0 10px;
+ line-height: 2.5rem;
+ font-size: 1rem;
+}
+.tree-folder-title .title {
+ background: inherit;
+}
+.tree-folder-title .title:hover {
+ text-decoration: none;
+}
+.tree-folder.active .tree-folder-title {
+ font-weight: bold;
+}
+.tree-folder.active .tree-folder-title .title {
+}
+.tree-folder-items {
+}
+.tree-folder-items > .item {
+ padding: 0 10px;
+ line-height: 2.5rem;
+ font-size: 0.8rem;
+}
+.tree-folder-items > .item.active {
+}
+.tree-folder-items > .item > a {
+ text-decoration: none;
+}
+.tree-folder-items > .item.active > a {
+}
+
/*=== STRUCTURE */
/*===============*/
/*=== Header */
@@ -362,65 +422,47 @@ a.btn {
}
.aside {
}
-.aside.aside_flux {
- padding: 10px 0 50px;
-}
-
-/*=== Aside main page (categories) */
-.categories {
+.aside.aside_feed {
+ padding: 10px 0;
text-align: center;
}
-.category {
- width: 235px;
- margin: 10px auto;
- text-align: left;
+.aside.aside_feed .tree {
+ margin: 10px 0 50px;
}
-.category .btn:first-child {
- position: relative;
- width: 213px;
-}
-.category.stick .btn:first-child {
- width: 176px;
-}
-.category .btn:first-child:not([data-unread="0"]):after {
+
+/*=== Aside main page (categories) */
+.aside_feed .tree-folder-title > .title:not([data-unread="0"]):after {
position: absolute;
- top: 3px; right: 3px;
- padding: 1px 5px;
+ right: 0;
+ margin: 10px 0;
+ padding: 0 10px;
+ font-size: 0.9rem;
+ line-height: 1.5rem;
}
/*=== Aside main page (feeds) */
-.categories .feeds .item.active {
-}
-.categories .feeds .item.empty.active {
+.feed.item.empty.active {
}
-.categories .feeds .item.error.active {
+.feed.item.error.active {
}
-.categories .feeds .item.empty .feed {
+.feed.item.empty,
+.feed.item.empty > a {
}
-.categories .feeds .item.error .feed {
+.feed.item.error,
+.feed.item.error > a {
}
-.categories .feeds .item.active .feed,
-.categories .feeds .item.empty.active .feed,
-.categories .feeds .item.error.active .feed {
+.feed.item.empty.active,
+.feed.item.error.active,
+.feed.item.empty.active > a,
+.feed.item.error.active > a {
}
-.categories .feeds .item .feed {
- margin: 0;
- width: 165px;
- line-height: 3em;
- font-size: 0.8em;
- text-align: left;
- text-decoration: none;
-}
-.categories .feeds .feed:not([data-unread="0"]) {
- font-weight: bold;
-}
-.categories .feeds .dropdown-menu:after {
+.aside_feed .tree-folder-items .dropdown-menu:after {
left: 2px;
}
-.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.categories .feeds .item:hover .dropdown-toggle > .icon,
-.categories .feeds .item.active .dropdown-toggle > .icon {
- vertical-align: middle;
+.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
+ border-radius: 3px;
}
/*=== Configuration pages */
@@ -621,33 +663,30 @@ a.btn {
/*=== GLOBAL VIEW */
/*================*/
-#stream.global .box-category {
+.box.category .box-title .title {
+ font-weight: normal;
+ text-decoration: none;
text-align: left;
}
-#stream.global .category {
- margin: 0;
+.box.category:not([data-unread="0"]) .box-title {
}
-#stream.global .btn {
- width: auto;
- height: 2em;
- margin: 0;
- padding: 0 10px;
- line-height: 2em;
- font-size: 1.2rem;
+.box.category:not([data-unread="0"]) .box-title:active {
}
-#stream.global .btn:not([data-unread="0"]) {
+.box.category:not([data-unread="0"]) .box-title .title {
font-weight: bold;
}
-#stream.global .btn:first-child:not([data-unread="0"]):after {
- top: 0; right: 5px;
+.box.category .title:not([data-unread="0"]):after {
+ position: absolute;
+ top: 5px; right: 10px;
+ border: 0;
+ background: none;
font-weight: bold;
+ box-shadow: none;
+ text-shadow: none;
}
-#stream.global .box-category .feeds {
- max-height: 250px;
-}
-#stream.global .box-category .feeds .item {
+.box.category .item.feed {
padding: 2px 10px;
- font-size: 0.9rem;
+ font-size: 0.8rem;
}
/*=== DIVERS */
@@ -726,15 +765,17 @@ a.btn {
}
.aside .toggle_aside,
#panel .close {
- position: absolute;
display: block;
- top: 0; right: 0;
- width: 30px;
- height: 30px;
- line-height: 30px;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
text-align: center;
}
+ .aside.aside_feed {
+ padding: 0;
+ }
+
.nav_menu .btn {
margin: 5px 10px;
}
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index dc011503d..a299a5ddf 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -73,7 +73,10 @@ label {
input {
width: 180px;
}
-textarea {
+textarea,
+input[type="file"],
+input.long,
+input.extend:focus {
width: 300px;
}
input, select, textarea {
@@ -85,9 +88,6 @@ input[type="checkbox"] {
width: 15px !important;
min-height: 15px !important;
}
-input.extend:focus {
- width: 300px;
-}
button.as-link,
button.as-link:hover,
button.as-link:active {
@@ -180,6 +180,7 @@ a.btn {
.dropdown {
position: relative;
display: inline-block;
+ vertical-align: middle;
}
.dropdown-target {
display: none;
@@ -280,6 +281,91 @@ a.btn {
width: 100px;
}
+/*=== Boxes */
+.box {
+ display: inline-block;
+ width: 20rem;
+ max-width: 95%;
+ margin: 20px 10px;
+ border: 1px solid #ccc;
+ vertical-align: top;
+}
+.box .box-title {
+ position: relative;
+ font-size: 1.2rem;
+ font-weight: bold;
+ text-align: center;
+}
+.box .box-title a {
+ display: block;
+}
+.box .box-title form {
+ margin: 0;
+}
+.box .box-content {
+ display: block;
+ overflow: auto;
+}
+.box .box-content .item {
+ display: block;
+}
+.box .box-content .item.disabled {
+ text-align: center;
+ font-style: italic;
+}
+
+.box .box-content-centered {
+ padding: 30px 5px;
+ text-align: center;
+}
+.box .box-content-centered .btn {
+ margin: 20px 0 0;
+}
+
+/*=== Draggable */
+.drag-hover {
+ margin: 0 0 5px;
+ border-bottom: 2px solid #ccc;
+}
+[draggable=true] {
+ cursor: grab;
+}
+
+/*=== Tree */
+.tree {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ text-align: left;
+}
+.tree-folder-items {
+ padding: 0;
+ list-style: none;
+}
+.tree-folder-title {
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.tree-folder-title .title {
+ display: inline-block;
+ width: 100%;
+ vertical-align: middle;
+}
+.tree-folder-items > .item {
+ display: block;
+ white-space: nowrap;
+}
+.tree-folder-items > .item > a {
+ display: inline-block;
+ vertical-align: middle;
+ width: calc(100% - 32px);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
/*=== STRUCTURE */
/*===============*/
/*=== Header */
@@ -318,60 +404,37 @@ a.btn {
.aside {
display: table-cell;
height: 100%;
- width: 250px;
+ width: 300px;
vertical-align: top;
}
-.aside.aside_flux {
- background: #fff;
-}
-/*=== Aside main page (categories) */
-.categories {
- list-style: none;
- margin: 0;
-}
-.state_unread li:not(.active)[data-unread="0"] {
- display: none;
-}
-.category {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-.category .btn:not([data-unread="0"]):after {
- content: attr(data-unread);
+/*=== Aside main page */
+.aside_feed .category .title {
+ width: calc(100% - 35px);
}
-/*=== Aside main page (feeds) */
-.categories .feeds {
- width: 100%;
- list-style: none;
+.aside_feed .tree-folder-title .icon {
+ padding: 5px;
}
-.categories .feeds:not(.active) {
- display: none;
+.aside_feed .tree-folder-items .item.feed {
+ padding: 0px 15px;
}
-.categories .feeds .feed {
- display: inline-block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- vertical-align: middle;
+.aside_feed .tree-folder-items:not(.active) {
+ display: none;
}
-.categories .feeds .feed:not([data-unread="0"]):before {
- content: "(" attr(data-unread) ") ";
+.aside_feed .tree-folder-items .dropdown {
+ vertical-align: top;
}
-.categories .feeds .dropdown-menu {
+.aside_feed .tree-folder-items .dropdown-menu {
left: 0;
}
-.categories .feeds .item .dropdown-toggle > .icon {
+.aside_feed .tree-folder-items .item .dropdown-toggle > .icon {
visibility: hidden;
cursor: pointer;
- vertical-align: top;
}
-.categories .feeds .item .dropdown-target:target ~ .dropdown-toggle > .icon,
-.categories .feeds .item:hover .dropdown-toggle > .icon,
-.categories .feeds .item.active .dropdown-toggle > .icon {
+.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
+.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
visibility: visible;
}
@@ -423,8 +486,9 @@ a.btn {
text-decoration: none;
}
.flux .item.date {
- width: 145px;
+ width: 155px;
text-align: right;
+ overflow: hidden;
}
.flux .item > a {
display: block;
@@ -436,7 +500,8 @@ a.btn {
text-overflow: ellipsis;
overflow: hidden;
}
-.flux .item.share > a {
+.flux .item.share > a,
+.item.query > a {
display: list-item;
list-style-position: inside;
list-style-type: decimal;
@@ -512,7 +577,7 @@ br + br + br {
position: fixed;
bottom: 0; left: 0;
display: table;
- width: 250px;
+ width: 300px;
background: #fff;
table-layout: fixed;
}
@@ -558,28 +623,12 @@ br + br + br {
/*=== GLOBAL VIEW */
/*================*/
-/*=== Category boxes */
-#stream.global .box-category {
- display: inline-block;
- width: 19em;
- max-width: 95%;
- margin: 20px 10px;
- border: 1px solid #ccc;
- vertical-align: top;
-}
-#stream.global .category {
- width: 100%;
-}
-#stream.global .btn {
- display: block;
-}
-#stream.global .box-category .feeds {
- display: block;
- overflow: auto;
+#stream.global {
+ text-align: center;
}
-#stream.global .box-category .feed {
- width: 19em;
- max-width: 90%;
+
+#stream.global .box {
+ text-align: left;
}
/*=== Panel */
@@ -598,51 +647,171 @@ br + br + br {
overflow: auto;
background: #fff;
}
-#panel .close {
+#overlay .close {
position: fixed;
top: 0; bottom: 0;
left: 0; right: 0;
display: block;
}
-#panel .close img {
+#overlay .close img {
display: none;
}
+/*=== Slider */
+#slider {
+ position: fixed;
+ top: 0; bottom: 0;
+ left: 100%; right: 0;
+ overflow: auto;
+ background: #fff;
+ border-left: 1px solid #aaa;
+ transition: left 200ms linear;
+ -moz-transition: left 200ms linear;
+ -webkit-transition: left 200ms linear;
+ -o-transition: left 200ms linear;
+ -ms-transition: left 200ms linear;
+}
+#slider.active {
+ left: 40%;
+}
+#close-slider {
+ position: fixed;
+ top: 0; bottom: 0;
+ left: 100%; right: 0;
+ cursor: pointer;
+}
+#close-slider.active {
+ left: 0;
+}
+
+/*=== SLIDESHOW */
+/*==============*/
+.slides {
+ padding: 0;
+ height: 320px;
+ display: block;
+ position: relative;
+ min-width: 260px;
+ max-width: 640px;
+ margin-bottom: 30px;
+ border: 1px solid #aaa;
+}
+.slides input {
+ display: none;
+}
+.slide-container {
+ display: block;
+}
+.slide {
+ top: 0;
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ transform: scale(0);
+ transition: all .7s ease-in-out;
+}
+.slide img {
+ width: 100%;
+ height: 100%;
+}
+.nav label {
+ width: 10%;
+ height: 100%;
+ display: none;
+ position: absolute;
+ opacity: 0;
+ z-index: 9;
+ cursor: pointer;
+ transition: opacity .2s;
+ color: #FFF;
+ font-size: 1000%;
+ text-align: center;
+ line-height: 225%;
+ font-family: "Varela Round", sans-serif;
+ background-color: rgba(255, 255, 255, .3);
+ text-shadow: 0px 0px 15px rgb(119, 119, 119);
+ padding: 0;
+}
+.properties {
+ display: none;
+ bottom: 0;
+ left: 0; right: 0;
+ position: absolute;
+ padding: 5px;
+ background: rgba(255, 255, 255, 0.7);
+ color: #000;
+ border-top: 1px solid #aaa;
+ z-index: 10;
+}
+.properties .page-number {
+ right: 5px;
+ top: 0;
+ position: absolute;
+}
+.slide:hover + .nav label {
+ opacity: 0.5;
+}
+.nav label:hover {
+ opacity: 1;
+}
+.nav .next {
+ right: 0;
+}
+input:checked + .slide-container .slide {
+ opacity: 1;
+ transform: scale(1);
+ transition: opacity 1s ease-in-out;
+}
+input:checked + .slide-container .nav label {
+ display: block;
+}
+input:checked + .slide-container .properties {
+ display: block;
+}
+
/*=== DIVERS */
/*===========*/
+.category .title:not([data-unread="0"]):after {
+ content: attr(data-unread);
+}
+.feed .item-title:not([data-unread="0"]):before {
+ content: "(" attr(data-unread) ") ";
+}
+.feed .item-title:not([data-unread="0"]) {
+ font-weight: bold;
+}
+
+.state_unread .category:not(.active)[data-unread="0"],
+.state_unread .feed:not(.active)[data-unread="0"] {
+ display: none;
+}
+
.nav-login,
.nav_menu .search,
+.aside .toggle_aside,
.nav_menu .toggle_aside {
display: none;
}
-.aside .toggle_aside {
- position: absolute;
- right: 0;
- display: none;
- width: 30px;
- height: 30px;
- line-height: 30px;
- text-align: center;
-}
/*=== MOBILE */
/*===========*/
@media(max-width: 840px) {
.header,
.aside .btn-important,
- .aside .feeds .dropdown,
.flux_header .item.website span,
.item.date, .day .date,
.dropdown-menu > .no-mobile,
.no-mobile {
display: none;
}
+ .aside .toggle_aside,
.nav-login {
display: block;
}
.nav_menu .toggle_aside,
- .aside .toggle_aside,
.nav_menu .search,
#panel .close img {
display: inline-block;
@@ -660,9 +829,6 @@ br + br + br {
width: 90%;
overflow: auto;
}
- .aside .categories {
- margin: 10px 0 75px;
- }
.flux_header .item.website {
width: 40px;
@@ -684,12 +850,8 @@ br + br + br {
width: 100%;
}
- #stream.global .box-category {
- margin: 10px 0;
- }
-
#panel {
- top: 0; bottom: 0;
+ top: 25px; bottom: 30px;
left: 0; right: 0;
}
#panel .close {