From 0d5a1f3a659b6f407b47859c794a662075e3f48e Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Tue, 30 Sep 2014 19:45:49 +0200 Subject: Improve design of .box See https://github.com/marienfressinaud/FreshRSS/issues/646 --- p/themes/Dark/dark.css | 29 ++++++++++++++++++++ p/themes/Flat/flat.css | 30 +++++++++++++++++++++ p/themes/Origine/origine.css | 30 +++++++++++++++++++++ p/themes/Pafat/pafat.css | 29 ++++++++++++++++++++ p/themes/Screwdriver/screwdriver.css | 34 ++++++++++++++++++++++++ p/themes/base-theme/base.css | 24 +++++++++++++++++ p/themes/base-theme/template.css | 51 ++++++++++++++++++++++++------------ 7 files changed, 210 insertions(+), 17 deletions(-) (limited to 'p/themes') diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css index 10f6e655b..f3790614e 100644 --- a/p/themes/Dark/dark.css +++ b/p/themes/Dark/dark.css @@ -435,6 +435,35 @@ a.btn { font-size: 0; } +/*=== Boxes */ +.box { + border: 1px solid #000; + border-radius: 5px; +} +.box .box-title { + margin: 0; + padding: 5px 10px; + background: #26303F; + border-bottom: 1px solid #000; + border-radius: 5px 5px 0 0; +} +.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; +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index 484cee9f3..d0ac46fd5 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -438,6 +438,36 @@ a.btn { background: url("loader.gif") center center no-repeat #34495e; } +/*=== Boxes */ +.box { + border: 1px solid #ddd; + border-radius: 5px; +} +.box .box-title { + margin: 0; + padding: 5px 10px; + background: #ecf0f1; + color: #333; + border-bottom: 1px solid #ddd; + border-radius: 5px 5px 0 0; +} +.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; +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 08fc08379..e3ae85075 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -467,6 +467,36 @@ a.btn { font-size: 0; } +/*=== Boxes */ +.box { + background: #fff; + border-radius: 5px; + box-shadow: 0 0 3px #bbb; +} +.box .box-title { + margin: 0; + padding: 5px 10px; + background: #f6f6f6; + border-bottom: 1px solid #ddd; + border-radius: 5px 5px 0 0; +} +.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; +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css index a35ac861d..28b17e15f 100644 --- a/p/themes/Pafat/pafat.css +++ b/p/themes/Pafat/pafat.css @@ -491,6 +491,35 @@ a.btn { font-size: 0; } +/*=== Boxes */ +.box { + border: 1px solid #aaa; + border-radius: 5px; +} +.box .box-title { + margin: 0; + padding: 5px 10px; + background: #f6f6f6; + border-bottom: 1px solid #aaa; + border-radius: 5px 5px 0 0; +} +.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; +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css index 37fa18e10..6206504d1 100644 --- a/p/themes/Screwdriver/screwdriver.css +++ b/p/themes/Screwdriver/screwdriver.css @@ -497,6 +497,40 @@ a.btn { font-size: 0; } +/*=== Boxes */ +.box { + background: #EDE7DE; + border-radius: 4px 4px 0 0; +} +.box .box-title { + margin: 0; + padding: 5px 10px; + background: linear-gradient(0deg, #EDE7DE 0%, #fff 100%) #171717; + background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #fff 100%); + box-shadow: 0px -1px #fff inset,0 -2px #ccc inset; + color: #888; + text-shadow: 0 1px #ccc; + border-radius: 4px 4px 0 0; + font-size: 1.1rem; + font-weight: normal; +} +.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; +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css index ccfab10df..3f6ae956d 100644 --- a/p/themes/base-theme/base.css +++ b/p/themes/base-theme/base.css @@ -329,6 +329,30 @@ 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; +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index 792eac299..a5a29ab23 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -280,6 +280,40 @@ 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 { + font-size: 1.2rem; + font-weight: bold; + text-align: center; +} +.box .box-title form { + margin: 0; +} +.box .box-content { + display: block; + overflow: auto; +} +.box .box-content .item { + display: block; +} + +.box .box-content-centered { + padding: 30px 5px; + text-align: center; +} +.box .box-content-centered .btn { + margin: 20px 0 0; +} + + /*=== STRUCTURE */ /*===============*/ /*=== Header */ @@ -585,23 +619,6 @@ br + br + br { } /* TODO