Màj design + suppression endless_mode + suppression read_mode (reviendra sous une autre forme ?)

2 files changed, 104 insertions, 121 deletions

diff --git a/public/theme/base.css b/public/theme/base.css
index ec1d015d8..af2744c6e 100644
--- a/public/theme/base.css
+++ b/public/theme/base.css
@@ -5,7 +5,7 @@
 html, body {
 	height: 100%;
 	font-size: 95%;
-	font-family: "Cantarell", "sans-serif";
+	font-family: "Cantarell", "Helvetica", "Arial", "sans-serif";
 }
 
 /* LIENS */
@@ -98,6 +98,35 @@ form {
 			padding: 0 0 0 5px;
 			font-weight: normal;
 		}
+.btn {
+	display: inline-block;
+	height: 30px;
+	padding: 5px 10px;
+	background: linear-gradient(#fff, #eee);
+	border-radius: 3px;
+	border: 1px solid #ddd;
+	border-bottom: 1px solid #aaa;
+	border-right: 1px solid #aaa;
+	color: #666;
+	text-shadow: 0px 1px 1px #ddd;
+	line-height: 30px;
+	vertical-align: middle;
+}
+	.btn:hover {
+		background: linear-gradient(#fafafa, #f0f0f0);
+		text-decoration: none;
+	}
+	.btn:active {
+		box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa;
+	}
+
+/* *** */
+.refresh {
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	background: url("refresh.svg") center center no-repeat;
+}
 
 /* STRUCTURE */
 #global {
@@ -183,10 +212,6 @@ form {
 					border: none;
 					border-radius: 0;
 				}
-		#main_aside {
-			position: fixed;
-			z-index: 10;
-		}
 		#categories {
 			height: 69%;
 			overflow: auto;
@@ -195,40 +220,25 @@ form {
 	#main {
 		display: table-cell;
 		height: 100%;
-		max-width: 800px;
-		padding: 0 0 0 250px;
 		line-height: 180%;
 		background: #fafafa;
 		vertical-align: top;
 	}
 		#top {
-			position: fixed;
-			top: 0;
-			width: 85%;
-			background: #eee;
+			width: 100%;
+			background: #fafafa;
 			border-bottom: 1px solid #aaa;
-			box-shadow: 0 1px 3px #aaa;
 			text-align: center;
-			z-index: 0;
+			padding: 5px 0;
 		}
-			#top a {
-				display: inline-block;
-				height: 50px;
-				width: 50%;
-				line-height: 50px;
-				font-weight: bold;
+			#top .btn {
+				margin: 0 10px;
 			}
-				#top a:hover {
-					background: #fafafa;
-					text-decoration: none;
-				}
-		#stream {
-			padding: 50px 0 0;
-		}
 		#main .table {
 			display: table;
 			width: 100%;
 			height: 100%;
+			table-layout: fixed;
 		}
 		#main .nothing {
 			display: table-cell;
@@ -253,13 +263,13 @@ form {
 			line-height: 170%;
 		}
 			.post.flux .content h1, .post.flux .content h2, .post.flux .content h3 {
-				margin: 20px 0;
+				margin: 20px 0 5px;
 			}
 			.post.flux .content p {
-				margin: 20px 0;
+				margin: 10px 0;
 			}
 			.post.flux .content img {
-				margin: 10px;
+				margin: 0;
 				border-radius: 5px;
 			}
 			.post.flux .content pre {
@@ -308,12 +318,12 @@ form {
 		vertical-align: middle;
 	}
 		.flux_header .item.manage {
-			width: 40px;
+			width: 50px;
 		}
 			.flux_header .item.manage .read {
 				display: inline-block;
-				width: 16px;
-				height: 16px;
+				width: 25px;
+				height: 25px;
 				background: url("read.svg") center center no-repeat;
 				vertical-align: middle;
 			}
@@ -325,8 +335,8 @@ form {
 				}
 			.flux_header .item.manage .bookmark {
 				display: inline-block;
-				width: 16px;
-				height: 16px;
+				width: 25px;
+				height: 25px;
 				background: url("non-starred.svg") center center no-repeat;
 				vertical-align: middle;
 			}
@@ -361,110 +371,49 @@ form {
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			text-align: right;
+			font-size: 10px;
+			color: #666;
 		}
 		.flux_header .item.link {
-			width: 25px;
+			width: 35px;
 			text-align: center;
 		}
 			.flux_header .item.link a {
 				display: inline-block;
-				width: 16px;
-				height: 16px;
+				width: 25px;
+				height: 25px;
 				background: url("website.svg") center center no-repeat;
 				vertical-align: middle;
 			}
 				.flux_header .item.link a:hover {
 					text-decoration: none;
 				}
-		
-#stream.read_mode {
-	background: #fff;
-	box-shadow: 0 0 5px #000;
-}
-	#stream.read_mode .post.flux {
-		border-left: 0;
-		padding: 50px 20px;
-		background: #fff;
-	}
-	#stream.read_mode .post.flux a {
-		color: #363;
-	}
-	#stream.read_mode .post.flux .content a {
-		text-decoration: underline;
-	}
-		#stream.read_mode .post.flux .content a:hover {
-			text-decoration: none;
-		}
-	#stream.read_mode .post.flux .after {
-		display: none;
-	}
 
 /*** PAGINATION ***/
 .pagination {
-	height: 50px;
-	margin: 0;
-	list-style: none;
-	text-align: center;
-	font-size: 100%;
-	line-height: 50px;
-	}
-	.pagination li {
-		display: inline-block;
-		width: 30px;
-		height: 30px;
-		}
-		.pagination li.pager-next, .pagination li.pager-previous, .pagination li.pager-first, .pagination li.pager-last {
-			width: 100px;
-		}
-		.pagination li.pager-current {
-			font-weight: bold;
-			}
-		.pagination li a {
-			display: block;
-			color: #F09600;
-			}
-a#load_more {
 	display: block;
-	height: 50px;
-	background: #eee;
-	line-height: 50px;
+	margin: 0;
+	background: #fafafa;
 	text-align: center;
-	font-weight: bold;
+	color: #333;
+	font-size: 80%;
+	line-height: 200%;
 	border-top: 1px solid #aaa;
 }
-	a#load_more:hover {
-		background: #fff;
-		text-decoration: none;
-	}
-	a#load_more.disable {
-		cursor: default;
-		background: #eee;
-		color: #666;
+	.pagination .item {
+		display: inline-block;
+		padding: 5px 10px;
 	}
-
-a#read_mode {
-	display: block;
-	position: fixed;
-	bottom: 0;
-	right: 0;
-	width: 50px;
-	height: 50px;
-	background: url("read_mode.png") 9px 9px no-repeat #ddd;
-	border-top: 1px solid #aaa;
-	border-left: 1px solid #aaa;
-	border-radius: 20px 0 0 0;
-	box-shadow: -2px -2px 5px #aaa;
-	transition: all 100ms linear 0s;
-}
-	a#read_mode:hover {
-		width: 60px;
-		height: 60px;
-		background-color: #eee;
-		text-decoration: none;
+		.pagination .item a {
+			color: #333;
+			font-style: italic;
+		}
+	.pagination .item.pager-current {
+		font-weight: bold;
 	}
 
 /*** NOTIFICATION ***/
-#notification {
+.notification {
 	position: fixed;
 	bottom: 0;
 	left: 25%;
@@ -479,13 +428,13 @@ a#read_mode {
 	color: #666;
 	font-weight: bold;
 }
-	#notification.good {
+	.notification.good {
 		background: #f4f899;
 	}
-	#notification.bad {
+	.notification.bad {
 		background: #f4a899;
 	}
-	#notification a.close {
+	.notification a.close {
 		display: inline-block;
 		width: 25px;
 		height: 25px;
@@ -497,7 +446,7 @@ a#read_mode {
 		line-height: 25px;
 		color: #666;
 	}
-		#notification a.close:hover {
+		.notification a.close:hover {
 			text-decoration: none;
 		}
 
@@ -519,9 +468,12 @@ a#read_mode {
 	#stream {
 		padding: 0;
 	}
-	.flux_header .item.website,
+	.flux_header .item.website span,
 	.flux_header .item.date {
-		width: 100px;
+		display: none;
+	}
+	.flux_header .item.website {
+		width: 20px;
 	}
 	.post.flux .content {
 		padding: 10px;
diff --git a/public/theme/refresh.svg b/public/theme/refresh.svg
new file mode 100644
index 000000000..11728fc5d
--- /dev/null
+++ b/public/theme/refresh.svg
@@ -0,0 +1,31 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:svg='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns#' id='svg7384' sodipodi:docname='view-refresh-symbolic.svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' inkscape:version='0.48.1 r9760' version='1.1' width='16' height='16' xmlns:dc='http://purl.org/dc/elements/1.1/'>
+  <metadata id='metadata90'>
+    <rdf:RDF>
+      <cc:Work rdf:about=''>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/>
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview inkscape:zoom='1' inkscape:bbox-paths='false' inkscape:pageopacity='1' guidetolerance='10' inkscape:snap-bbox='true' inkscape:window-height='1162' objecttolerance='10' id='namedview88' showborder='false' inkscape:window-x='2191' inkscape:window-y='111' inkscape:cx='9.3351214' inkscape:cy='10.6119' gridtolerance='10' inkscape:snap-bbox-midpoints='false' showguides='true' inkscape:pageshadow='2' pagecolor='#555753' bordercolor='#666666' inkscape:snap-global='true' inkscape:window-maximized='0' inkscape:object-nodes='false' inkscape:snap-nodes='false' inkscape:guide-bbox='true' inkscape:window-width='1595' inkscape:snap-others='false' borderopacity='1' showgrid='false' inkscape:snap-to-guides='true' inkscape:object-paths='false' inkscape:snap-grids='true' inkscape:current-layer='layer12'>
+    <inkscape:grid enabled='true' spacingx='1px' spacingy='1px' id='grid4866' visible='true' snapvisiblegridlinesonly='true' empspacing='2' type='xygrid'/>
+  </sodipodi:namedview>
+  <title id='title9167'>Gnome Symbolic Icon Theme</title>
+  <defs id='defs7386'/>
+  <g id='layer9' transform='translate(-241.0002,-627)' inkscape:label='status' style='display:inline' inkscape:groupmode='layer'/>
+  <g id='layer10' transform='translate(-241.0002,-627)' inkscape:label='devices' inkscape:groupmode='layer'/>
+  <g id='layer11' transform='translate(-241.0002,-627)' inkscape:label='apps' inkscape:groupmode='layer'/>
+  <g id='layer13' transform='translate(-241.0002,-627)' inkscape:label='places' inkscape:groupmode='layer'/>
+  <g id='layer14' transform='translate(-241.0002,-627)' inkscape:label='mimetypes' inkscape:groupmode='layer'/>
+  <g id='layer15' transform='translate(-241.0002,-627)' inkscape:label='emblems' style='display:inline' inkscape:groupmode='layer'/>
+  <g id='g71291' transform='translate(-241.0002,-627)' inkscape:label='emotes' style='display:inline' inkscape:groupmode='layer'/>
+  <g id='g4953' transform='translate(-241.0002,-627)' inkscape:label='categories' style='display:inline' inkscape:groupmode='layer'/>
+  <g id='layer12' transform='translate(-241.0002,-627)' inkscape:label='actions' style='display:inline' inkscape:groupmode='layer'>
+    
+    <path id='path4597' d='m 253.90645,628.96875 a 1.0001,1.0001 0 0 0 -0.125,0.0312 1.0001,1.0001 0 0 0 -0.78125,1 l 0,1.6875 c -0.38225,-0.57796 -0.84927,-1.08223 -1.40625,-1.5 -1.15563,-0.86677 -2.53199,-1.25227 -3.875,-1.1875 -0.19186,0.009 -0.37223,0.0353 -0.5625,0.0625 -1.52218,0.21741 -2.97815,1.02304 -3.96875,2.34375 -1.98119,2.64144 -1.42267,6.42505 1.21875,8.40625 2.64147,1.98122 6.42504,1.42267 8.40625,-1.21875 A 1.0063276,1.0063276 0 0 0 253.0002,638 a 1.0063276,1.0063276 0 0 0 0,-0.15625 l 0,-0.84375 -0.8125,0 -0.0937,0 a 1.0063276,1.0063276 0 0 0 -0.0937,0 1.0063276,1.0063276 0 0 0 -0.8125,0.40625 c -1.33265,1.77674 -3.81702,2.11387 -5.59375,0.78125 -1.77674,-1.33264 -2.1139,-3.81699 -0.78125,-5.59375 1.33265,-1.77674 3.817,-2.11389 5.59375,-0.78125 0.42946,0.32212 0.76954,0.73295 1.03125,1.1875 l -1.4375,0 a 1.0001,1.0001 0 0 0 -1,1 1.0001,1.0001 0 0 0 0,0.21875 l 0,0.78125 0.84375,0 0.15625,0 4,0 1,0 0,-1 0,-4 a 1.0001,1.0001 0 0 0 0,-0.1875 l 0,-0.8125 -0.8125,0 a 1.0001,1.0001 0 0 0 -0.28125,-0.0312 z' style='font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#666666;fill:#666666;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans' inkscape:connector-curvature='0'/>
+  </g>
+</svg>