Style changes, I don't know

Lowered font size, better menus (maybe), white header bar thingy with colour Probably other things. Change-Id: Ia1b4c3ce0fed3752a9bae529573aa45912cb01ad
9 years ago · 6a25c68b2d
parent 555c14c93c
commit 6a25c68b2d
8 changed files with 246 additions and 45 deletions
--- a/TimelessTemplate.php
+++ b/TimelessTemplate.php
@ -23,7 +23,12 @@ class TimelessTemplate extends BaseTemplate {
 				$this->outputLogo( 'p-logo-text', 'text' );
 				$this->outputSearch();
 				?>
+				<div class="color-middle"></div>
 			</div>
+			<div class="visual-clear"></div>
+			<div class="color-left"></div>
+			<div class="color-right"></div>
+			<div class="visual-clear"></div>
 			</div>

 			<div id="mw-content-container" class="ts-container">
@ -318,7 +323,7 @@ class TimelessTemplate extends BaseTemplate {
 			if ( $user->isLoggedIn() ) {
 				$userName = $user->getName();
 				// Make sure it fit firsts
-				if ( strlen( $userName ) < 15 ) {
+				if ( strlen( $userName ) < 12 ) {
 					echo htmlspecialchars( $userName, ENT_QUOTES );
 				} else {
 					echo wfMessage( 'timeless-loggedin' )->escaped();
@ -330,6 +335,7 @@ class TimelessTemplate extends BaseTemplate {
 			</span>
 			</h3>
 			<div class="p-body dropdown">
+			<div class="pokey"></div>
 			<ul<?php $this->html( 'userlangattributes' ) ?>>
 			<?php
 				foreach ( $this->getPersonalTools() as $key => $item ) {
--- a/i18n/en.json
+++ b/i18n/en.json
@ -6,7 +6,7 @@
 	"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris.",
 	"timeless-search-placeholder": "Search approximately {{NUMBEROFPAGES}} pages",
 	"timeless-loggedin": "Your account",
-	"timeless-anonymous": "Anonymous user",
+	"timeless-anonymous": "Anonymous",
 	"timeless-userpage": "User page",
 	"timeless-talkpage": "User talk",
 	"timeless-pagelog": "Page logs",
--- a/resources/images/arrow-down-grey.png
+++ b/resources/images/arrow-down-grey.png
--- a/resources/images/arrow-down-grey.svg
+++ b/resources/images/arrow-down-grey.svg
@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="16"
+   width="22"
+   version="1.1"
+   id="svg5442"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="arrow-down-grey.svg">
+  <metadata
+     id="metadata5452">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5450" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="687"
+     inkscape:window-height="480"
+     id="namedview5448"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="11"
+     inkscape:cy="8"
+     inkscape:window-x="378"
+     inkscape:window-y="148"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg5442" />
+  <path
+     style="fill:#aaaaaa;fill-opacity:1"
+     d="m15.5 6l-5 5-5-5z"
+     fill="#797979"
+     id="path5446" />
+</svg>
--- a/resources/images/user-grey.png
+++ b/resources/images/user-grey.png
--- a/resources/images/user-grey.svg
+++ b/resources/images/user-grey.svg
@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="5.64mm"
+   width="5.64mm"
+   version="1.1"
+   viewBox="0 0 20 20"
+   id="svg4136"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="user-grey.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/user.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <metadata
+     id="metadata4148">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="743"
+     id="namedview4144"
+     showgrid="true"
+     inkscape:zoom="16.868941"
+     inkscape:cx="-12.733021"
+     inkscape:cy="12.067589"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4136"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-others="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4150" />
+  </sodipodi:namedview>
+  <path
+     style="fill:#aaaaaa;fill-opacity:1"
+     d="M 3.640625 9.453125 C 1.8835375 11.840633 1.6848657 14.447685 2.4140625 16.175781 C 2.9026774 17.354852 3.5929816 18.045174 4.4023438 18.464844 C 5.1937201 18.892507 6.1506693 18.982377 7 18.984375 L 13.324219 18.984375 C 14.244494 18.984375 15.173286 18.777179 15.972656 18.310547 C 16.772026 17.843915 17.431752 17.112579 17.771484 16.023438 C 18.261099 14.474658 18.036595 11.996446 16.292969 9.5683594 C 16.285395 9.5799893 16.271857 9.5865465 16.263672 9.5976562 A 7.5000009 7.5000009 0 0 1 10 12.984375 A 7.5000009 7.5000009 0 0 1 3.640625 9.453125 z "
+     transform="scale(1.0007881,1.0007881)"
+     id="path4140" />
+  <path
+     sodipodi:nodetypes="sssss"
+     inkscape:connector-curvature="0"
+     id="path4142"
+     d="m 10.007881,0.99211966 c -2.4852804,0 -4.5000004,2.01471904 -4.5000004,4.50000004 0,2.485281 2.01472,4.5 4.5000004,4.5 2.48528,0 4.5,-2.014719 4.5,-4.5 0,-2.485281 -2.01472,-4.50000004 -4.5,-4.50000004 z"
+     style="fill:#aaaaaa;fill-rule:evenodd;fill-opacity:1" />
+</svg>
--- a/resources/screen-common.less
+++ b/resources/screen-common.less
@ -9,7 +9,7 @@ body {
 	padding: 0;
 	color: @text;
 	background: @background-dark;
-	font-size: 1em;
+	font-size: .95em;
 	line-height: 1.4;
 }
 #mw-content {
--- a/resources/screen-desktop.less
+++ b/resources/screen-desktop.less
@ -11,13 +11,14 @@
 	float: left;
 }
 #p-search,
-#mw-content {
+#mw-content,
+#mw-header-container .color-middle {
 	margin-left: 12em;
-	margin-right: 18em;
+	margin-right: 15em;
 }
 #mw-related-navigation,
 #user-tools {
-	width: 18em;
+	width: 15em;
 	float: right;
 }

@ -25,37 +26,66 @@

 #mw-header-container {
 	position: fixed;
+	z-index: 100;
 	top: 0;
 	width: 100%;
-	background: @background-dark;
-	color: @text-inverse;
-	height: 3em;
-	border-bottom: solid 1px @background-dark2;
-	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+	background: @background;
+	color: @text;
+	padding: 0.5em 0 0;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5);
+}
+
+@color-height: 4px;
+.color-left {
+	float:left;
+	height: @color-height;
+	background: @red;
+	width: 50%;
 }
+.color-right {
+	display: inline-block;
+	height: @color-height;
+	background: @green;
+	width: 50%;
+	float:right;
+}
+.color-middle {
+	height: @color-height;
+	background: @blue;
+	margin-top: .25em;
+	margin-bottom: -@color-height;
+	position: relative;
+}
+
 .dropdown {
 	display: none;
 }

 #p-personal {
+	display: inline-block;
+	position: relative;
 	padding-left: 1.5em;
+	padding-right: 2em;
+	line-height: 1;
 }
 #p-personal h3 {
 	margin: 0;
-	padding: .55em 0 .45em 1.5em;
+	padding: .7em 0 .55em 25px;
 	font-family: @fonts-secondary;
 	font-weight: normal;
 	font-size: 1.1em;
-	text-shadow: 0 -1px 0 @background-dark2;
-	.background-image-svg('images/user.svg', 'images/user.png');
-	background-position: 0% 10px;
+	.background-image-svg('images/user-grey.svg', 'images/user-grey.png');
+	background-position: 0 7px;
 	background-repeat: no-repeat;

-	span {
-		.background-image-svg('images/arrow-down-white.svg', 'images/arrow-down-white.png');
-		background-position: 100% 2px;
+	&:after {
+		display: inline-block;
+		content: '';
+		width: 22px;
+		height: 12px;
+		.background-image-svg('images/arrow-down-grey.svg', 'images/arrow-down-grey.png');
+		background-position: center center;
 		background-repeat: no-repeat;
-		padding-right: 1.35em;
 	}
 	&:hover {
 		cursor: pointer;
@ -65,10 +95,11 @@
 #p-logo-text {
 	width: 11em;
 	text-align: center;
-	text-shadow: 0 -1px 0 @background-dark2;
+	line-height: 1;

 	a {
-		color: @text-inverse;
+		padding: .2em 0;
+		color: @text;
 		font-family: @fonts-secondary;
 		font-variant: small-caps;
 		font-size: 1.75em;
@ -76,24 +107,23 @@
 	}
 }

-
 /* Search */

 #simpleSearch {
-	box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.1);
+	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
 	background: @background;
-	margin: .5em 0 0 0;
 	position: relative;
-	border-top: solid 1px @background-dark2;
+	border: solid 1px @grey;
 }
 #searchInput {
 	border: none;
 	margin: 0;
 	height: 2.1em;
-	padding: .4em 4.5em .3em 2em;
+	padding: .4em 4.5em .2em 2em;
 	box-shadow: none;
 	background: transparent;
 	width: 100%;
+	min-height: 0;
 }
 #searchButton,
 #mw-searchButton {
@ -108,12 +138,65 @@
 	box-shadow: none;
 }

+/* Dropdowns */
+
+#p-personal:hover .dropdown {
+	display: block;
+}
+
+.dropdown {
+	.box;
+	background: #fff;
+	box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.05);
+	position: absolute;
+	padding: 20px 2em 0;
+	min-width: 6em;
+	top: 2.45em;
+	right: 0;
+	overflow: visible;
+	line-height: 1.1;
+	z-index: 1;
+
+	ul,
+	li {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	ul {
+		margin-bottom: 2em;
+	}
+	li {
+		margin: 0 0 .35em;
+	}
+}
+.pokey,
+.pokey::after {
+	border-bottom: 10px solid #E6E6E6;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	content: "";
+	height: 0px;
+	position: absolute;
+	transform: rotate(360deg); // to force some smoothing
+	width: 0px;
+}
+.pokey {
+	right: 28px;
+	top: -10px;
+}
+.pokey::after {
+	border-bottom-color: #FFFFFF;
+	right: -10px;
+	top: 2px;
+}

 /* Content */

 #mw-content-container {
 	margin-top: 3em;
 	padding-bottom: .5em;
+	border-bottom: solid 4px @green;
 }
 #mw-content {
 	.box;
@ -176,7 +259,6 @@

 /* Sidebars */

-.dropdown,
 #mw-site-navigation .sidebar-chunk,
 #mw-related-navigation .sidebar-chunk {
 	.box;
@ -212,24 +294,6 @@
 	margin-right: 0;
 }

-/* Dropdowns */
-
-#p-personal {
-	position: relative;
-
-	&:hover .dropdown {
-		display: block;
-	}
-}
-
-.dropdown {
-	position: absolute;
-	padding: 1.5em 2em 0;
-	min-width: 8em;
-	top: 1.6em;
-	left: 0;
-}
-
 /* Footer */

 #mw-footer {