a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restyle sidebar with colour

Browse Source
This commit is contained in:
Tom Russell 2019-01-22 19:39:27 +00:00
parent d39d5a2e9f
commit 6d054919f8
1 changed files with 78 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
app/src/frontend/sidebar.css
View File

@ -9,7 +9,6 @@
bottom: 3rem;
padding: 0.25em 0em 2em;
background: #fff;
background-color: rgba(255,255,255,0.98);
z-index: 1000;
overflow-y: auto;
}
@ -54,8 +53,26 @@
/**
* Sidebar main header
*/
.sidebar-header {
border-bottom: 6px solid;
border-image: linear-gradient(
to right,
#edc40b 0%, #edc40b 8.3%,
#f0ee0c 8.3%, #f0ee0c 16.6%,
#ff9100 16.6%, #ff9100 25%,
#ee5f63 25%, #ee5f63 33.3%,
#ee91bf 33.3%, #ee91bf 41.6%,
#aa7fa7 41.6%, #aa7fa7 50%,
#6f879c 50%, #6f879c 58.3%,
#5ec232 58.3%, #5ec232 66.6%,
#6dbb8b 66.6%, #6dbb8b 75%,
#65b7ff 75%, #65b7ff 83.3%,
#a1a3a9 83.3%, #a1a3a9 91.6%,
#9c896d 91.6%, #9c896d 100%
) 1;
}
.sidebar-header h2 {
margin-top: 0.45rem;
margin: 0.45rem 0 0.6rem;
display: inline-block;
}
.sidebar-header .icon-button {
@ -76,10 +93,11 @@
clear: both;
text-decoration: none;
color: #222;
transition: border-color 0.2s;
border-style: solid;
border-color: #fff;
border-width: 4px 0 4px 0;
border-top-color: #222;
border-width: 1px 0 4px 0;
padding-top: 0.2rem;
}
.section-header h3 {
display: inline-block;
@ -95,91 +113,105 @@
color: #222;
text-decoration: none;
}
.section-header.active.location {
border-color: #edc40b;
.data-section:first-of-type .section-header {
border-top-color: #fff;
}
.section-header.location:hover {
border-color: #fae897;
.section-header.active.location {
border-bottom-color: #edc40b;
}
.section-header.location:hover > a::before,
.section-header.location.active > a::before {
color: #edc40b;
}
.section-header.active.use {
border-color: #f0ee0c;
border-bottom-color: #f0ee0c;
}
.section-header.use:hover {
border-color: #f6f552;
.section-header.use:hover > a::before,
.section-header.use.active > a::before {
color: #f0ee0c;
}
.section-header.active.type {
border-color: #ff9100;
border-bottom-color: #ff9100;
}
.section-header.type:hover {
border-color: #ffb24d;
.section-header.type:hover > a::before,
.section-header.type.active > a::before {
color: #ff9100;
}
.section-header.active.age {
border-color: #ee5f63;
border-bottom-color: #ee5f63;
}
.section-header.age:hover {
border-color: #f5a4a6;
.section-header.age:hover > a::before,
.section-header.age.active > a::before {
color: #ee5f63;
}
.section-header.active.size {
border-color: #ee91bf;
border-bottom-color: #ee91bf;
}
.section-header.size:hover {
border-color: #f8d3e6;
.section-header.size:hover > a::before,
.section-header.size.active > a::before {
color: #ee91bf;
}
.section-header.active.construction {
border-color: #aa7fa7;
border-bottom-color: #aa7fa7;
}
.section-header.construction:hover {
border-color: #c9adc7;
.section-header.construction:hover > a::before,
.section-header.construction.active > a::before {
color: #aa7fa7;
}
.section-header.active.team {
border-color: #6f879c;
border-bottom-color: #6f879c;
}
.section-header.team:hover {
border-color: #9cadbb;
.section-header.team:hover > a::before,
.section-header.team.active > a::before {
color: #6f879c;
}
.section-header.active.sustainability {
border-color: #5ec232;
border-bottom-color: #5ec232;
}
.section-header.sustainability:hover {
border-color: #8bd868;
.section-header.sustainability:hover > a::before,
.section-header.sustainability.active > a::before {
color: #5ec232;
}
.section-header.active.greenery {
border-color: #6dbb8b;
border-bottom-color: #6dbb8b;
}
.section-header.greenery:hover {
border-color: #8bd868;
.section-header.greenery:hover > a::before,
.section-header.greenery.active > a::before {
color: #6dbb8b;
}
.section-header.active.planning {
border-color: #65b7ff;
border-bottom-color: #65b7ff;
}
.section-header.planning:hover {
border-color: #b2dbff;
.section-header.planning:hover > a::before,
.section-header.planning.active > a::before {
color: #65b7ff;
}
.section-header.active.demolition {
border-color: #a1a3a9;
border-bottom-color: #a1a3a9;
}
.section-header.demolition:hover {
border-color: #c9cace;
.section-header.demolition:hover > a::before,
.section-header.demolition.active > a::before {
color: #a1a3a9;
}
.section-header.active.like {
border-color: #9c896d;
border-bottom-color: #9c896d;
}
.section-header.like:hover {
border-color: #bbae9b;
.section-header.like:hover > a::before,
.section-header.like.active > a::before {
color: #9c896d;
}
.section-header > a::before {
display: block;
position: absolute;
left: 0.55rem;
top: 0.3rem;
top: 0.4rem;
width: 1.2rem;
height: 1rem;
text-align: center;
color: #222264;
font-size: 1.2rem;
content: '\25B8';
transition: color 0.2s;
}
.section-header:hover > a::before,
.section-header.active > a::before {
@ -187,11 +219,9 @@
}
.section-header:hover > a::before,
.section-header.active > a::before {
top: 0.6rem;
content: '\25BC';
}
.section-header.view.active:hover > a::before {
content: '\25B2';
}
.data-section.inactive .section-header,
.data-section.inactive .section-header > a {
@ -202,19 +232,11 @@
.data-section.inactive .section-header.active > a {
color: #222;
}
.data-section.inactive .section-header > a::before,
.data-section.inactive .section-header:hover > a::before,
.data-section.inactive .section-header.active:hover > a::before {
opacity: 0.4;
color: #222;
font-size: 1.2rem;
content: '\25B8';
}
.section-header .icon-buttons {
position: absolute;
top: 0;
right: 0;
padding: 0.6rem 0.5rem 0.5rem 0;
padding: 0.7rem 0.5rem 0.5rem 0;
}
/**
@ -308,7 +330,7 @@
}
.data-intro {
padding: 0 0.5rem 0 2.25rem;
margin-top: 0.25rem;
margin-top: 0.5rem;
}
.data-list {
margin: 0;