franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Split CSS by page

Browse Source
This commit is contained in:
Franzz
2019-02-13 21:01:15 +01:00
parent 2ac8dead56
commit c532573688
5 changed files with 327 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
style/_mask_project.scss Normal file
View File

@@ -0,0 +1,314 @@
#messages {
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(35% - 0.66666em);
color: #666;
@extend .flicker;
}
#map {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background: #EEE;
.track_tooltip {
p {
margin: 0;
&.name {
font-weight: bold;
font-size: 1.2em;
}
&.description {
font-style: italic;
}
}
}
}
/* Leaflet patches */
.leaflet-control {
background-color: rgba(255, 255, 255, 0.6);
font-family: Roboto, Arial, sans-serif;
border-radius: 3px;
border: none;
margin: 1em;
&+ .leaflet-control {
margin-top: 0;
}
&.leaflet-control-layers-expanded {
color: #222;
width: calc(100% - 2em - 16px);
}
&.leaflet-control-scale {
padding: 0.5em;
.leaflet-control-scale-line {
background: none;
}
}
}
/* Pull right controls by 30% */
.leaflet-right {
//See below #feed
.leaflet-control {
left: -100%;
}
}
/* Replace Layers image with font awesome icon */
.leaflet-control-layers-toggle {
font-size: 28px;
text-align: center;
line-height: 44px;
text-decoration: none;
color: #999;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
background: none;
@extend .fa;
@extend .fa-layers;
}
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
#legend {
//right: 30vw;
.line {
display: block;
border-left: 2em solid;
line-height: 4px;
padding-left: 0.5em;
margin: 1em 1em 0.5em;
font-size: 1em;
color: #222;
&:first-child {
margin-top: 0.5em;
}
&.main {
border-color: #00ff78;
}
&.off-track {
border-color: #0000ff;
}
&.hitchhiking {
border-color: #FF7814;
}
}
}
}
#elems {
display: none;
}
#feed, .leaflet-right {
width: calc(30% - 1rem);
max-width: calc(400px + 3rem);
}
#feed {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
input, textarea, button {
border: none;
padding: 0.5em 1em;
background: #F7F7F7;
}
button {
background: #CCC;
cursor: pointer;
font-weight: bold;
}
button: hover {
background: #F7F7F7;
}
#posts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#poster {
input, textarea, button {
border-radius: 3px;
background-color: #d9deff;
color: #323268;
}
#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left: 1em;
background-color: #323268;
color: #B4BDFF;
margin-bottom: 0.5em;
&:hover {
background-color: #d9deff;
color: #323268;
}
}
}
.post {
margin-bottom: 1em;
background: #B4BDFF;
color: #323268;
border-radius: 3px;
width: calc(100% - 1em);
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
&:first-child {
margin-top: 1em;
}
.message {
margin: 0.3em 0 0 0;
}
.signature {
margin: 0.5em 0 0 0;
text-align: right;
font-style: italic;
}
.header {
padding: 0.5em 1em;
font-style: italic;
font-size: 0.8em;
text-align: right;
.index {
float: left;
font-style: normal;
}
.time {
cursor: default;
}
}
.body {
clear: both;
padding: 0em 1em 0.5em;
}
&.picture {
background: #F3EC9F;
color: #635C28;
a {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
}
&.message {
background: #6DFF58;
color: #326526;
p {
font-size: 0.9em;
margin: 0.5em 0;
}
p: first-child {
margin-top: 1em;
}
.staticmap {
width: 100%;
border-radius: 3px;
cursor: pointer;
}
}
&.loading {
.spinner {
padding-top: 0.5em;
text-align: center;
.fa-spinner {
font-size: 1.5em;
color: #323268;
}
}
}
}
#loading {
}
}
}
/* Info Window */
.info-window {
h1 {
font-size: 1.2em;
}
p {
font-size: 1.0em;
}
i {
padding-right: 0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
@extend .fa-fw;
}
.pics {
a {
display: inline-block;
margin-right: 15px;
img {
max-width: 200px;
max-height: 100px;
border-radius: 3px;
transition: All 0.2s;
&:hover {
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
}
}
}
}
}

4
style/_mask_upload.scss Normal file
View File

@@ -0,0 +1,4 @@
.bar {
height: 18px;
background: green;
}

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

4
style/spot.css.map
View File

File diff suppressed because one or more lines are too long

329
style/spot.scss
View File

@@ -1,329 +1,12 @@
@CHARSET "UTF-8"; /* Modules */
@import 'fa'; @import 'fa';
@import 'lightbox'; @import 'lightbox';
@import 'simplebar'; @import 'simplebar';
@import 'leaflet'; @import 'leaflet';
/* Site Global CSS */
@import 'common'; @import 'common';
#messages { /* Pages Specific CSS (masks) */
@import 'mask_project';
.loader { @import 'mask_upload';
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(35% - 0.66666em);
color: #666;
@extend .flicker;
}
#map {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background: #EEE;
.track_tooltip {
p {
margin: 0;
&.name {
font-weight: bold;
font-size: 1.2em;
}
&.description {
font-style: italic;
}
}
}
}
/* Leaflet patches */
.leaflet-control {
background-color: rgba(255, 255, 255, 0.6);
font-family: Roboto, Arial, sans-serif;
border-radius: 3px;
border: none;
margin: 1em;
&+ .leaflet-control {
margin-top: 0;
}
&.leaflet-control-layers-expanded {
color: #222;
width: calc(100% - 2em - 16px);
}
&.leaflet-control-scale {
padding: 0.5em;
.leaflet-control-scale-line {
background: none;
}
}
}
/* Pull right controls by 30% */
.leaflet-right {
//See below #feed
.leaflet-control {
left: -100%;
}
}
/* Replace Layers image with font awesome icon */
.leaflet-control-layers-toggle {
font-size: 28px;
text-align: center;
line-height: 44px;
text-decoration: none;
color: #999;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
background: none;
@extend .fa;
@extend .fa-layers;
}
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
#legend {
//right: 30vw;
.line {
display: block;
border-left: 2em solid;
line-height: 4px;
padding-left: 0.5em;
margin: 1em 1em 0.5em;
font-size: 1em;
color: #222;
&:first-child {
margin-top: 0.5em;
}
&.main {
border-color: #00ff78;
}
&.off-track {
border-color: #0000ff;
}
&.hitchhiking {
border-color: #FF7814;
}
}
}
}
#elems {
display: none;
}
#feed, .leaflet-right {
width: calc(30% - 1rem);
max-width: calc(400px + 3rem);
}
#feed {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
input, textarea, button {
border: none;
padding: 0.5em 1em;
background: #F7F7F7;
}
button {
background: #CCC;
cursor: pointer;
font-weight: bold;
}
button: hover {
background: #F7F7F7;
}
#posts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#poster {
input, textarea, button {
border-radius: 3px;
background-color: #d9deff;
color: #323268;
}
#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left: 1em;
background-color: #323268;
color: #B4BDFF;
margin-bottom: 0.5em;
&:hover {
background-color: #d9deff;
color: #323268;
}
}
}
.post {
margin-bottom: 1em;
background: #B4BDFF;
color: #323268;
border-radius: 3px;
width: calc(100% - 1em);
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
&:first-child {
margin-top: 1em;
}
.message {
margin: 0.3em 0 0 0;
}
.signature {
margin: 0.5em 0 0 0;
text-align: right;
font-style: italic;
}
.header {
padding: 0.5em 1em;
font-style: italic;
font-size: 0.8em;
text-align: right;
.index {
float: left;
font-style: normal;
}
.time {
cursor: default;
}
}
.body {
clear: both;
padding: 0em 1em 0.5em;
}
&.picture {
background: #F3EC9F;
color: #635C28;
a {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
}
&.message {
background: #6DFF58;
color: #326526;
p {
font-size: 0.9em;
margin: 0.5em 0;
}
p: first-child {
margin-top: 1em;
}
.staticmap {
width: 100%;
border-radius: 3px;
cursor: pointer;
}
}
&.loading {
.spinner {
padding-top: 0.5em;
text-align: center;
.fa-spinner {
font-size: 1.5em;
color: #323268;
}
}
}
}
#loading {
}
}
}
/* Info Window */
.info-window {
h1 {
font-size: 1.2em;
}
p {
font-size: 1.0em;
}
i {
padding-right: 0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
@extend .fa-fw;
}
.pics {
a {
display: inline-block;
margin-right: 15px;
img {
max-width: 200px;
max-height: 100px;
border-radius: 3px;
transition: All 0.2s;
&:hover {
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
}
}
}
}
}
/* Upload */
.bar {
height: 18px;
background: green;
}