style: redesign for summer 2016 (#12862)
It has a smaller sky blue and sand header that integrates the site breadcrumbs, and a lateral menu that slides laterally to be icons-only.
This commit is contained in:
parent
3b33e6ec80
commit
c06af04c5e
|
|
@ -77,6 +77,6 @@ from gnome-icon-theme-symbolic, published under the Creative Commons
|
|||
Attribution-Share Alike 3.0 United States License by the GNOME Project, see
|
||||
http://www.gnome.org/.
|
||||
|
||||
gadjo/static/css/adwaita-lock.jpg is a derived work of adwaita-lock.jpg from
|
||||
gnome-backgrounds, copyright © 2011 Jakub Steiner <jimmac@gmail.com>, and
|
||||
licensed under Creative Commons Attribution-ShareAlike 3.0 License.
|
||||
gadjo/static/css/header-03.jpeg is copied from let's encrypt website, licensed
|
||||
under Mozilla Public License Version 2.0, see their repository at
|
||||
https://github.com/letsencrypt/website.git.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
|
|
@ -23,7 +23,7 @@ a {
|
|||
text-decoration: none;
|
||||
border-width: 0;
|
||||
border-bottom: 1px dotted #ff9900;
|
||||
-webkit-transition: color 200ms ease-out;
|
||||
@include vendor-prefix('transition', 'color 200ms ease-out');
|
||||
&:hover {
|
||||
color: #003388;
|
||||
border-style: solid;
|
||||
|
|
@ -66,56 +66,112 @@ span.warning {
|
|||
/* top bar */
|
||||
|
||||
div#top {
|
||||
background: #23282d url(texture.png);
|
||||
color: #eee;
|
||||
text-align: right;
|
||||
line-height: 200%;
|
||||
height: 2em;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
div#top a {
|
||||
color: #aaa;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
div#top a:hover {
|
||||
color: #888;
|
||||
border: 0;
|
||||
&:hover {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
ul.user-info {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-right: 3em;
|
||||
font-size: 85%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.user-info li {
|
||||
display: inline;
|
||||
padding-left: 10px;
|
||||
padding-right: 3em;
|
||||
}
|
||||
|
||||
ul.user-info a {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
z-index: 10;
|
||||
background: #23282d url(texture.png);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
li {
|
||||
display: inline;
|
||||
padding-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
/* header */
|
||||
|
||||
$header-height: 40px;
|
||||
|
||||
div#header {
|
||||
background: #AD7C6D url(adwaita-lock.jpg);
|
||||
color: white;
|
||||
padding-left: 25px;
|
||||
background: #C2D1CC url(header-03.jpeg);
|
||||
background-size: 100% 500px;
|
||||
padding-left: 0px;
|
||||
border-bottom: 1px solid #888;
|
||||
position: relative;
|
||||
height: 5em;
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
div#header h1 {
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
padding: 0 ($header-height + 1px) 0 20px;
|
||||
margin: 0;
|
||||
padding: 15px 0 25px 0;
|
||||
font-weight: normal;
|
||||
text-shadow: 0 2px 15px black;
|
||||
color: black;
|
||||
text-shadow: 0 0 2px white;
|
||||
display: inline-block;
|
||||
z-index: 100;
|
||||
max-width: 80%;
|
||||
width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@include vendor-prefix('transition', 'all ease 200ms');
|
||||
opacity: 0.5;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
border-bottom: none;
|
||||
display: inline-block;
|
||||
padding: 0 11px;
|
||||
position: relative;
|
||||
margin-left: -5px;
|
||||
padding-left: 20px;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
/* hide last breadcrumb item (== current page) */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 0px #333;
|
||||
}
|
||||
|
||||
span.separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "";
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
@include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)');
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -21px;
|
||||
box-shadow: 1px -1px 0px 1px #bbb, 2px -2px 0px 2px white;
|
||||
z-index: 100;
|
||||
border-width: 1px 1px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
body[data-environment-label] div#header::before {
|
||||
|
|
@ -157,7 +213,7 @@ ul.messages li {
|
|||
div#main-content {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
padding: 0 6px 0 16px;
|
||||
padding: 1em 6px 0 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-width: 0 1px 1px 0;
|
||||
background: white;
|
||||
|
|
@ -175,7 +231,6 @@ div#main-content h2 {
|
|||
/* breadcrumb */
|
||||
|
||||
div#more-user-links {
|
||||
padding: 5px 0px;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +239,7 @@ div#more-user-links a:after {
|
|||
background: #ccc;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid #bbb;
|
||||
transition: background 0.5s;
|
||||
@include vendor-prefix('transition', 'background 0.5s');
|
||||
}
|
||||
|
||||
div#more-user-links a {
|
||||
|
|
@ -218,9 +273,7 @@ span#breadcrumb a:after {
|
|||
content: "";
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
-webkit-transform: scale(0.4, 0.707) rotate(45deg);
|
||||
-moz-transform: scale(0.4, 0.707) rotate(45deg);
|
||||
transform: scale(0.4, 0.707) rotate(45deg);
|
||||
@include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)');
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
@ -239,8 +292,8 @@ div#more-user-links a:hover:after {
|
|||
/* page content */
|
||||
|
||||
div#content {
|
||||
margin: 1em 1ex;
|
||||
padding: 7px;
|
||||
margin: 0 1ex 1em 0;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -333,9 +386,7 @@ ul.apps li a {
|
|||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
text-decoration: none;
|
||||
transition: all .2s ease-in-out;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
-moz-transition: all .2s ease-in-out;
|
||||
@include vendor-prefix('transition', 'all .2s ease-in-out');
|
||||
color: #FF7800;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
|
@ -379,6 +430,10 @@ a[class^="icon-"], a[class*=" icon-"] {
|
|||
|
||||
/* misc */
|
||||
|
||||
div#content div.bo-block {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
div.bo-block {
|
||||
border: 1px solid #e4e4e4;
|
||||
background: #fcfcfc;
|
||||
|
|
@ -489,12 +544,19 @@ input[type=submit]:hover {
|
|||
|
||||
#sidepage {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
z-index: 100;
|
||||
width: 30ex;
|
||||
width: 36px;
|
||||
height: 2em;
|
||||
text-align: left;
|
||||
transition: all 0ms ease-in;
|
||||
overflow: hidden;
|
||||
@include vendor-prefix('transition', 'all 0ms ease-in');
|
||||
height: 100%;
|
||||
overflow: initial;
|
||||
background: #23282d url(texture.png);
|
||||
}
|
||||
|
||||
#main {
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
#main.sidepage-expanded {
|
||||
|
|
@ -502,34 +564,63 @@ input[type=submit]:hover {
|
|||
}
|
||||
|
||||
#main.enable-transitions,
|
||||
#main.enable-transitions div#header h1,
|
||||
#sidepage.enable-transitions ul#sidepage-menu,
|
||||
#sidepage.enable-transitions span#applabel,
|
||||
#sidepage.enable-transitions {
|
||||
transition-duration: 400ms;
|
||||
@include vendor-prefix('transition-duration', '400ms');
|
||||
}
|
||||
|
||||
#sidepage.sidepage-expanded {
|
||||
height: 100%;
|
||||
overflow: initial;
|
||||
width: 30ex;
|
||||
}
|
||||
|
||||
#sidepage.sidepage-expanded ul#sidepage-menu {
|
||||
#sidepage ul#sidepage-menu {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#main {
|
||||
transition: margin-left 0ms ease-in;
|
||||
@include vendor-prefix('transition', 'margin-left 0ms ease-in');
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidepage span#applabel {
|
||||
padding-left: 1em;
|
||||
visibility: hidden; /* will be turned visible by publik.js */
|
||||
|
||||
padding-left: 0.5rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@include vendor-prefix('transition', 'max-width 0ms ease-in');
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
border-bottom: 1px solid #666;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
#sidepage span#applabel::after {
|
||||
content: " \25BC";
|
||||
#sidepage span#applabel::before {
|
||||
font-family: FontAwesome;
|
||||
content: "\f18e"; /* fa-arrow-circle-o-right */
|
||||
padding-left: 2px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
#sidepage.sidepage-expanded span#applabel::before {
|
||||
content: "\f190"; /* fa-arrow-circle-o-left */
|
||||
}
|
||||
|
||||
#sidepage.sidepage-expanded span#applabel {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu {
|
||||
|
|
@ -538,11 +629,10 @@ input[type=submit]:hover {
|
|||
padding-top: 1em;
|
||||
margin: 0;
|
||||
background: #23282d url(texture.png);
|
||||
height: 100%;
|
||||
height: calc(100% - 3em); /* #top 2em, padding-top: 1em */
|
||||
transition: all 0ms ease;
|
||||
transform: scale(1, 0);
|
||||
transform-origin: 0 0;
|
||||
min-height: 100%;
|
||||
min-height: calc(100% - 41px); /* #top 40px + border 1px */
|
||||
box-sizing: border-box;
|
||||
@include vendor-prefix('transition', 'all 0ms ease');
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu a {
|
||||
|
|
@ -554,14 +644,13 @@ input[type=submit]:hover {
|
|||
}
|
||||
|
||||
#sidepage ul#sidepage-menu li {
|
||||
padding-left: 1ex;
|
||||
position: relative;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
ul#sidepage-menu li a {
|
||||
background: transparent no-repeat 0 50%;
|
||||
padding: 5px 0 5px 30px;
|
||||
background: transparent no-repeat 7px 50%;
|
||||
padding: 5px 0 5px 37px;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu .active a {
|
||||
|
|
@ -578,7 +667,7 @@ ul#sidepage-menu li a {
|
|||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transition: all 0.2s ease 0s;
|
||||
@include vendor-prefix('transition', 'all 0.2s ease');
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
width: 0%; height: 100%; top: 0; left: 0;
|
||||
|
|
@ -594,14 +683,13 @@ ul#sidepage-menu li a {
|
|||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
background: #215D9C;
|
||||
background: white;
|
||||
z-index: 5;
|
||||
right: -17px;
|
||||
left: auto;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
-moz-transform: scale(0.4, 0.707) rotate(45deg);
|
||||
-webkit-transform: scale(0.4, 0.707) rotate(45deg);
|
||||
transform: scale(0.4, 0.707) rotate(45deg);
|
||||
@include vendor-prefix('transform', 'scale(0.2, 0.2) rotate(45deg)');
|
||||
}
|
||||
|
||||
#gadjo-ajax-error {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
|
|
@ -302,4 +302,9 @@ var gadjo_js = gadjo_js || {};
|
|||
}
|
||||
});
|
||||
});
|
||||
$(function () {
|
||||
/* 440 is header image height (500px) - header height (60px) */
|
||||
var timestamp = ((new Date().getTime() / 1000) % 86400 ) / (86400 / 440);
|
||||
$('div#header').css('background-position', '0 -' + timestamp + 'px');
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue