Adding Last Update
This commit is contained in:
@@ -12,30 +12,34 @@ $message-bg: #6DFF58;
|
||||
$media-color: #333; //#635C28;
|
||||
$media-bg: rgba(255,255,255,.8); //#F3EC9F;
|
||||
|
||||
//Legend colors
|
||||
//Settings colors
|
||||
$title-color: $post-color;
|
||||
$subtitle-color: #999;
|
||||
|
||||
//Legend colors
|
||||
$track-main-color: #00ff78;
|
||||
$track-off-track-color: #0000ff;
|
||||
$track-hitchhiking-color: #FF7814;
|
||||
$legend-color: $post-color;
|
||||
|
||||
#projects {
|
||||
|
||||
|
||||
&.with-feed {
|
||||
#submap {
|
||||
width: calc(100% - #{$panel-width});
|
||||
min-width: calc(100% - #{$panel-width-max});
|
||||
}
|
||||
|
||||
|
||||
.leaflet-right {
|
||||
width: $panel-width;
|
||||
max-width: calc(#{$panel-width-max});
|
||||
}
|
||||
|
||||
|
||||
#feed {
|
||||
z-index: 999;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
#post-button {
|
||||
.fa {
|
||||
@extend .fa-next;
|
||||
@@ -52,17 +56,17 @@ $legend-color: $post-color;
|
||||
width: calc(100% - #{$panel-width});
|
||||
min-width: calc(100% - #{$panel-width-max});
|
||||
}
|
||||
|
||||
|
||||
.leaflet-left {
|
||||
width: $panel-width;
|
||||
max-width: calc(#{$panel-width-max});
|
||||
}
|
||||
|
||||
|
||||
#settings {
|
||||
z-index: 999;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
#settings-button {
|
||||
.fa {
|
||||
@extend .fa-prev;
|
||||
@@ -87,7 +91,7 @@ $legend-color: $post-color;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
font-size: 3em;
|
||||
@@ -96,18 +100,18 @@ $legend-color: $post-color;
|
||||
color: #CCC;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.track_tooltip {
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
|
||||
&.name {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
@@ -132,14 +136,14 @@ $legend-color: $post-color;
|
||||
border: none;
|
||||
margin: $block-spacing;
|
||||
box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
|
||||
|
||||
|
||||
&+ .leaflet-control {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
&.leaflet-control-scale {
|
||||
padding: 0.5em;
|
||||
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
background: none;
|
||||
}
|
||||
@@ -150,7 +154,7 @@ $legend-color: $post-color;
|
||||
.leaflet-right, .leaflet-left {
|
||||
transition: all 0.5s;
|
||||
width: 0;
|
||||
max-width: 0;
|
||||
max-width: 0;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
left: -100%;
|
||||
@@ -172,8 +176,8 @@ $legend-color: $post-color;
|
||||
height: 4px;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
&.main {
|
||||
background-color: $track-main-color;
|
||||
}
|
||||
@@ -184,7 +188,7 @@ $legend-color: $post-color;
|
||||
background-color: $track-hitchhiking-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.desc {
|
||||
font-size: 1em;
|
||||
margin-left: 0.5em;
|
||||
@@ -207,14 +211,14 @@ $legend-color: $post-color;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
|
||||
|
||||
.drill-icon {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
|
||||
i {
|
||||
transition: color 0.3s;
|
||||
cursor: pointer;
|
||||
@@ -222,7 +226,7 @@ $legend-color: $post-color;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-stack {
|
||||
.fa-stack {
|
||||
.fa-message {
|
||||
font-size: 32px;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
|
||||
@@ -244,7 +248,7 @@ $legend-color: $post-color;
|
||||
}
|
||||
|
||||
/* Feed/Settings Panel */
|
||||
|
||||
|
||||
#feed, #settings {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -254,19 +258,19 @@ $legend-color: $post-color;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.5s;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
input, textarea {
|
||||
background-color: $post-input-bg;
|
||||
color: $post-color;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background-color: $post-color;
|
||||
color: $post-bg;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: $post-input-bg;
|
||||
color: $post-color;
|
||||
color: $post-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -274,7 +278,7 @@ $legend-color: $post-color;
|
||||
right: 0;
|
||||
width: #{$panel-width};
|
||||
max-width: calc(#{$panel-width-max});
|
||||
|
||||
|
||||
#posts {
|
||||
position: absolute;
|
||||
transition: all 0.5s;
|
||||
@@ -282,33 +286,33 @@ $legend-color: $post-color;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
|
||||
#posts_list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
#poster {
|
||||
textarea#post {
|
||||
margin-bottom: 1em;
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
|
||||
input#name {
|
||||
width: calc(100% - 6em);
|
||||
}
|
||||
|
||||
|
||||
button#submit {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.body-box {
|
||||
position:relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.post-item {
|
||||
margin-bottom: $block-spacing;
|
||||
background: $post-bg;
|
||||
@@ -316,11 +320,11 @@ $legend-color: $post-color;
|
||||
border-radius: 3px;
|
||||
width: calc(100% - #{$block-spacing});
|
||||
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
|
||||
|
||||
&:first-child {
|
||||
margin-top: $block-spacing;
|
||||
}
|
||||
|
||||
|
||||
.message {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -338,13 +342,13 @@ $legend-color: $post-color;
|
||||
cursor: default;
|
||||
font-size: 0.8em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
&.index {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
|
||||
&.time {
|
||||
width: 75%;
|
||||
text-align: right;
|
||||
@@ -356,7 +360,7 @@ $legend-color: $post-color;
|
||||
clear: both;
|
||||
padding: 0em 1em 1em;
|
||||
}
|
||||
|
||||
|
||||
&.headerless {
|
||||
.header {
|
||||
display: none;
|
||||
@@ -369,30 +373,30 @@ $legend-color: $post-color;
|
||||
&.message {
|
||||
background: $message-bg;
|
||||
color: $message-color;
|
||||
|
||||
|
||||
p {
|
||||
font-size: 0.9em;
|
||||
margin: 0 0 .5em 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: $message-color;
|
||||
}
|
||||
|
||||
|
||||
a.drill {
|
||||
line-height: 0;
|
||||
|
||||
|
||||
.drill-icon {
|
||||
transform: translate(-16px, -32px);
|
||||
|
||||
|
||||
.fa-message-in {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
.fa-message {
|
||||
@extend .#{$fa-css-prefix}-drill-message;
|
||||
@@ -404,24 +408,24 @@ $legend-color: $post-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.staticmap {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.post {
|
||||
.body {
|
||||
padding: 0em 1em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.media {
|
||||
background: $media-bg;
|
||||
color: $media-color;
|
||||
|
||||
|
||||
.body {
|
||||
a {
|
||||
display: inline-block;
|
||||
@@ -430,7 +434,7 @@ $legend-color: $post-color;
|
||||
color: $media-color;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
|
||||
|
||||
&.drill {
|
||||
&:hover {
|
||||
.drill-icon .fa-drill-picture, .drill-icon .fa-drill-video {
|
||||
@@ -440,10 +444,10 @@ $legend-color: $post-color;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.drill-icon {
|
||||
font-size: 3em;
|
||||
|
||||
|
||||
.fa-drill-picture {
|
||||
color: transparent;
|
||||
}
|
||||
@@ -452,14 +456,14 @@ $legend-color: $post-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
image-orientation: from-image;
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
.comment {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -478,11 +482,11 @@ $legend-color: $post-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.loading {
|
||||
.body {
|
||||
text-align: center;
|
||||
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: 2em;
|
||||
@@ -497,7 +501,7 @@ $legend-color: $post-color;
|
||||
left: 0;
|
||||
width: calc(#{$panel-width} + 3px); //Add box-shadow
|
||||
max-width: calc(#{$panel-width-max} + 3px); //Add box-shadow
|
||||
|
||||
|
||||
#settings-panel {
|
||||
width: calc(100% - #{$block-spacing} - 3px); //Remove box-shadow
|
||||
margin: $block-spacing;
|
||||
@@ -513,24 +517,49 @@ $legend-color: $post-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
|
||||
.settings-header {
|
||||
text-align: center;
|
||||
flex: 0 1 auto;
|
||||
|
||||
|
||||
.logo {
|
||||
background: rgba(255, 255, 255, .4);
|
||||
padding: 1.5rem;
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
|
||||
}
|
||||
}
|
||||
|
||||
#last_update {
|
||||
margin-top: -2em;
|
||||
padding: 0 1rem;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
margin: 0;
|
||||
color: $subtitle-color;
|
||||
cursor: pointer;
|
||||
transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.settings-footer {
|
||||
flex: 0 1 auto;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
@@ -539,45 +568,46 @@ $legend-color: $post-color;
|
||||
padding: 0.3rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
|
||||
|
||||
a {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.settings-sections {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
|
||||
#settings-sections-scrollbox {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.settings-section {
|
||||
display: inline-block;
|
||||
margin: 1.5rem 1rem 0 1rem;
|
||||
width: calc(100% - 2 * #{$block-spacing});
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
margin: 0 0 $block-spacing;
|
||||
color: $title-color;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
margin-bottom: .3em;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
&.newsletter {
|
||||
input#email {
|
||||
width: calc(100% - 6em);
|
||||
|
||||
|
||||
&:disabled {
|
||||
color: #999;
|
||||
background: rgba(255,255,255,0.2);
|
||||
@@ -586,7 +616,7 @@ $legend-color: $post-color;
|
||||
button#nl_btn {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
|
||||
&.subscribe .fa {
|
||||
@extend .fa-send;
|
||||
}
|
||||
@@ -602,11 +632,11 @@ $legend-color: $post-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#settings-projects {
|
||||
a.fa-download {
|
||||
color: $legend-color;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #0078A8;
|
||||
}
|
||||
@@ -624,55 +654,55 @@ $legend-color: $post-color;
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
margin: 1em 0 1.2em;
|
||||
|
||||
|
||||
i {
|
||||
margin-right: 0.3125em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: 1.0em;
|
||||
margin: 0.5em 0 0 0;
|
||||
|
||||
|
||||
i {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: $post-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.medias {
|
||||
margin-top: -0.5rem;
|
||||
line-height: 0;
|
||||
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
margin-right: $block-spacing;
|
||||
margin-top: $block-spacing;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
&.drill {
|
||||
font-size: 2em;
|
||||
|
||||
|
||||
.fa-drill-picture {
|
||||
color: transparent;
|
||||
}
|
||||
.fa-drill-video {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
.fa-drill-video, .fa-drill-picture {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
@@ -688,4 +718,4 @@ $legend-color: $post-color;
|
||||
|
||||
#elems {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user