mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-11 21:08:36 +03:00
clean up styles
This commit is contained in:
Lachlan Kermode
@@ -1,21 +0,0 @@
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fallFadeIn {
|
||||
from {
|
||||
transform: translate(0, -40px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
$event_default: red;
|
||||
|
||||
$offwhite: #efefef;
|
||||
$lightwhite: #dfdfdf;
|
||||
$midwhite: #a0a0a0;
|
||||
$darkwhite: darken($midwhite, 15%);
|
||||
$yellow: #ffd800;
|
||||
// $yellow: rgb(240, 255, 0);
|
||||
$red: rgb(233, 0, 19);
|
||||
$green: rgb(61, 241, 79);
|
||||
$midgrey: rgb(44, 44, 44);
|
||||
$darkgrey: #232323;
|
||||
$black: #000000;
|
||||
|
||||
// Category colors
|
||||
$default: red;
|
||||
$alpha: #00ff00;
|
||||
$beta: #ff00ff;
|
||||
$other: yellow;
|
||||
|
||||
.default { background: $default; }
|
||||
.other { background: $other; }
|
||||
.alpha { background: $alpha; }
|
||||
.beta { background: $beta; }
|
||||
@@ -1,9 +0,0 @@
|
||||
$xsmall: 10px;//0.7em;
|
||||
$small: 11px;//0.9em;
|
||||
$normal: 12px;//1em;
|
||||
$large: 14px;//1.1em;
|
||||
$xlarge: 16px;//1.2em;
|
||||
$xxlarge: 20px;//1.4em;
|
||||
$xxxlarge: 32px;
|
||||
$title: 36px;
|
||||
$cover-title: 68px;
|
||||
@@ -1,12 +0,0 @@
|
||||
/* z-index levels */
|
||||
$final-level: 10000;
|
||||
$loading-overlay: 1000;
|
||||
$overheader: 100;
|
||||
$header: 10;
|
||||
$map-overlay2: 4;
|
||||
$map-overlay: 2;
|
||||
$map: 1;
|
||||
$scene: 1;
|
||||
$hidden: -1;
|
||||
$timeline: 3;
|
||||
$timeslider: 3;
|
||||
68
src/scss/_variables.scss
Normal file
68
src/scss/_variables.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
$event_default: red;
|
||||
|
||||
$offwhite: #efefef;
|
||||
$lightwhite: #dfdfdf;
|
||||
$midwhite: #a0a0a0;
|
||||
$darkwhite: darken($midwhite, 15%);
|
||||
$yellow: #ffd800;
|
||||
// $yellow: rgb(240, 255, 0);
|
||||
$red: rgb(233, 0, 19);
|
||||
$green: rgb(61, 241, 79);
|
||||
$midgrey: rgb(44, 44, 44);
|
||||
$darkgrey: #232323;
|
||||
$black: #000000;
|
||||
|
||||
// Category colors
|
||||
$default: red;
|
||||
$alpha: #00ff00;
|
||||
$beta: #ff00ff;
|
||||
$other: yellow;
|
||||
|
||||
.default { background: $default; }
|
||||
.other { background: $other; }
|
||||
.alpha { background: $alpha; }
|
||||
.beta { background: $beta; }
|
||||
|
||||
|
||||
// Font sizes
|
||||
$xsmall: 10px;//0.7em;
|
||||
$small: 11px;//0.9em;
|
||||
$normal: 12px;//1em;
|
||||
$large: 14px;//1.1em;
|
||||
$xlarge: 16px;//1.2em;
|
||||
$xxlarge: 20px;//1.4em;
|
||||
$xxxlarge: 32px;
|
||||
|
||||
// z-index levels
|
||||
$final-level: 10000;
|
||||
$loading-overlay: 1000;
|
||||
$overheader: 100;
|
||||
$header: 10;
|
||||
$map-overlay: 2;
|
||||
$map: 1;
|
||||
$scene: 1;
|
||||
$hidden: -1;
|
||||
$timeline: 3;
|
||||
|
||||
|
||||
// platform-specific sizes
|
||||
$infopopup-width: 400px;
|
||||
$infopopup-left: 122px;
|
||||
$infopopup-bottom: 180px;
|
||||
$card-width: 386px;
|
||||
$card-right: 9px;
|
||||
$narrative-info-height: 205px;
|
||||
$narrative-info-desc-height: 153px;
|
||||
$timeline-height: 170px;
|
||||
$toolbar-width: 110px;
|
||||
|
||||
$panel-width: 1000px;
|
||||
$panel-height: 1000px;
|
||||
$vimeo-width: $panel-width - 100;
|
||||
$vimeo-height: $panel-height / 2;
|
||||
$banner-height: 100px;
|
||||
$padding: 20px;
|
||||
$header-inset: 10px;
|
||||
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
margin: 1px 0 0 0;
|
||||
padding: 15px;
|
||||
border: 1px solid $black;
|
||||
// border-radius: 3px;
|
||||
transition: 0.2 ease;
|
||||
background: $midwhite;
|
||||
color: $darkgrey;
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
@import 'burger';
|
||||
// @import 'burger';
|
||||
@import 'card';
|
||||
|
||||
$card-width: 370px;
|
||||
$narrative-info-max-height: 200px;
|
||||
$timeline-height: 170px;
|
||||
|
||||
.card-stack {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
top: $card-right;
|
||||
right: $card-right;
|
||||
max-height: calc(100% - 180px);
|
||||
height: auto;
|
||||
overflow-y: scroll;
|
||||
@@ -17,10 +13,10 @@ $timeline-height: 170px;
|
||||
color: white;
|
||||
|
||||
&.narrative-mode {
|
||||
right: 10px;
|
||||
right: $card-right;
|
||||
left: auto;
|
||||
top: $narrative-info-max-height + 12px + 20px;
|
||||
height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px - 20px);
|
||||
top: $narrative-info-height + 32px;
|
||||
height: calc(100% - #{$narrative-info-height} - #{$timeline-height} - 32px);
|
||||
}
|
||||
|
||||
&.full-height {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'colors';
|
||||
@import 'variables';
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
@@ -37,10 +37,8 @@
|
||||
width: 150vw;
|
||||
height: 100vh;
|
||||
-webkit-filter: contrast(70%) brightness(70%) grayscale(100%);
|
||||
/* Webkit */
|
||||
/* filter: gray; /* IE6-9 */
|
||||
filter: contrast(70%) brightness(70%) grayscale(100%);
|
||||
/* W3C */ }
|
||||
}
|
||||
|
||||
.default-cover-container {
|
||||
display: flex;
|
||||
@@ -178,9 +176,6 @@
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex: 1;
|
||||
// border-right: 4px solid black;
|
||||
// padding: 0 10px;
|
||||
// min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@import 'burger';
|
||||
|
||||
.infopopup {
|
||||
width: 400px;
|
||||
width: $infopopup-width;
|
||||
box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
|
||||
color: $darkgrey;
|
||||
position: absolute;
|
||||
background: $offwhite;
|
||||
border-radius: 5px;
|
||||
bottom: 180px;
|
||||
left: 120px;
|
||||
bottom: $timeline-height;
|
||||
left: $toolbar-width;
|
||||
border: 3px solid $offwhite;
|
||||
border-radius: 1px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Lato', 'Helvetica', sans-serif;
|
||||
@@ -75,11 +75,6 @@
|
||||
|
||||
.legend-labels {
|
||||
display: flex;
|
||||
|
||||
.label {
|
||||
// font-size: $xsmall;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
@import 'colors';
|
||||
@import 'fonts';
|
||||
@import 'levels';
|
||||
@import 'animations';
|
||||
@import 'variables';
|
||||
@import 'common';
|
||||
@import 'loading';
|
||||
@import 'header';
|
||||
@@ -10,10 +7,8 @@
|
||||
@import 'overlay';
|
||||
@import 'map';
|
||||
@import 'timeline';
|
||||
@import 'tag-filters';
|
||||
@import 'toolbar';
|
||||
@import 'infopopup';
|
||||
@import 'notification';
|
||||
@import 'scene';
|
||||
@import 'mediaplayer';
|
||||
@import 'cover';
|
||||
|
||||
@@ -163,6 +163,9 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.narrative-mode {
|
||||
}
|
||||
|
||||
.location-event {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -193,5 +196,12 @@
|
||||
}
|
||||
|
||||
.no-hover {
|
||||
cursor: grab !important;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
// no hover styles for events when in narrative mode
|
||||
.narrative-mode {
|
||||
.event-hover:hover { opacity: 0; }
|
||||
.no-hover { cursor: inherit; }
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
$narrative-info-width: 386px;
|
||||
$timeline-height: 170px;
|
||||
|
||||
/*
|
||||
NARRATIVE INFO
|
||||
*/
|
||||
@@ -8,14 +5,13 @@ NARRATIVE INFO
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: auto;
|
||||
right: 9px;
|
||||
height: 205px;
|
||||
width: $narrative-info-width;
|
||||
right: $card-right; // looks a bit better due to the 1px border on other elements.
|
||||
height: $narrative-info-height;
|
||||
width: $card-width;
|
||||
box-sizing: border-box;
|
||||
max-height: calc(100% - 250px);
|
||||
box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22);
|
||||
background: $black;
|
||||
border: 1px solid $midgrey;
|
||||
color: $offwhite;
|
||||
font-family: Helvetica, 'Georgia', serif;
|
||||
|
||||
@@ -39,7 +35,7 @@ NARRATIVE INFO
|
||||
}
|
||||
|
||||
.narrative-info-desc {
|
||||
height: 153px;
|
||||
height: $narrative-info-desc-height;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -105,20 +101,17 @@ NARRATIVE INFO
|
||||
|
||||
.narrative-adjust {
|
||||
position: fixed;
|
||||
// top: calc(50vh - 100pt);
|
||||
bottom: $timeline-height;
|
||||
// top: 0;
|
||||
right: auto;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
z-index: 15; // z-index of card-stack is 10
|
||||
z-index: $overheader;
|
||||
|
||||
&.left {
|
||||
right: calc(#{$narrative-info-width} - 70px);
|
||||
right: $card-right + $card-width - 40pt;
|
||||
}
|
||||
|
||||
&.right {
|
||||
// right: calc(#{$narrative-info-width} + 10px);
|
||||
right: 25px;
|
||||
right: $card-right;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
@@ -127,7 +120,7 @@ NARRATIVE INFO
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&.disabled {
|
||||
color: $midgrey;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -142,10 +135,10 @@ NARRATIVE INFO
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
padding: 2px 5px 0 5px;
|
||||
// right: $narrative-info-width - 15px - 10px;
|
||||
right: 10px;
|
||||
right: $card-right;
|
||||
top: 5px;
|
||||
width: $narrative-info-width - 10px - 2px;
|
||||
width: $card-width - 12px; // subtracting the extra width added by padding
|
||||
;
|
||||
// width: 15px;
|
||||
background-color: black;
|
||||
height: 20px;
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
$panel-width: 1000px;
|
||||
$panel-height: 1000px;
|
||||
$vimeo-width: $panel-width - 100;
|
||||
$vimeo-height: $panel-height / 2;
|
||||
|
||||
$padding: 20px;
|
||||
$header-inset: 10px;
|
||||
|
||||
$banner-height: 100px;
|
||||
|
||||
a {
|
||||
color: $yellow !important;
|
||||
}
|
||||
|
||||
@@ -1,177 +0,0 @@
|
||||
.scene-wrapper {
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
}
|
||||
&.hidden {
|
||||
z-index: $hidden;
|
||||
}
|
||||
&.show {
|
||||
z-index: $scene;
|
||||
}
|
||||
}
|
||||
#loadingText {
|
||||
text-align: center;
|
||||
position:relative;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
clear:left;
|
||||
height:auto;
|
||||
z-index: 0;
|
||||
color: rgba( 255, 255, 255, 255 );
|
||||
font-size: $normal;
|
||||
font-weight: 700;
|
||||
color: $offwhite;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.back-to-map {
|
||||
button {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 130px;
|
||||
height: 20px;
|
||||
width: 250px;
|
||||
text-align: left;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
background-size: 100%;
|
||||
line-height: 20px;
|
||||
color: $offwhite;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
KEYFRAME INFO
|
||||
*/
|
||||
.keyframe-info {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 130px;
|
||||
height: auto;
|
||||
width: 270px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
max-height: calc(100% - 250px);
|
||||
overflow: auto;
|
||||
box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22);
|
||||
background: $black;
|
||||
border: 1px solid $midgrey;
|
||||
color: $offwhite;
|
||||
font-family: Helvetica, 'Georgia', serif;
|
||||
|
||||
h3, h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $large;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Lato', 'Helvetica', sans-serif;
|
||||
font-size: $normal;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 100%;
|
||||
.action {
|
||||
width: calc(50% - 5px);
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
line-height: 40px;
|
||||
font-family: 'Lato', 'Helvetica', sans-serif;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
&:not(.disabled) {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $midgrey;
|
||||
cursor: normal;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
DAT GUI
|
||||
*/
|
||||
.dg .a {
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.dg .cr.number {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
input[type=text] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dg.main .close-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dg .c {
|
||||
width: 66%;
|
||||
.slider {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
height: 12px;
|
||||
|
||||
.slider-fg {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.slider-fg {
|
||||
background: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dg .c .slider-fg {
|
||||
background: $midwhite;
|
||||
}
|
||||
|
||||
.dg .property-name {
|
||||
width: 33%;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 20px;
|
||||
color: white;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
.applied-tagFilters {
|
||||
position: fixed;
|
||||
top: 135px;
|
||||
right: 5px;
|
||||
max-width: 260px;
|
||||
background: $black;
|
||||
color: $offwhite;
|
||||
padding: 10px;
|
||||
font-size: $small;
|
||||
z-index: $map-overlay;
|
||||
|
||||
.caption {
|
||||
font-size: $small;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.tag-chip-group {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-height: 150px;
|
||||
background: $midgrey;
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px 5px 5px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
|
||||
h3 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.applied-tagFilter-chip {
|
||||
width: auto;
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
color: $black;
|
||||
min-height: 16px;
|
||||
line-height: 16px;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
padding: 1px 5px;
|
||||
transition: 0.2s ease;
|
||||
background: $yellow;
|
||||
float: right;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
background: lighten($yellow, 15%);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
cursor: pointer;
|
||||
max-width: 350px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-top: -14px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
color: rgba($black, 0.25);
|
||||
fill: rgba($black, 0.25);
|
||||
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
|
||||
&:hover {
|
||||
color: rgba($black, 0.6);
|
||||
fill: rgba($black, 0.6);
|
||||
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,12 +10,12 @@
|
||||
background: $midgrey;
|
||||
|
||||
&.narrative-mode {
|
||||
left: -110px;
|
||||
left: -$toolbar-width;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
width: 110px;
|
||||
width: $toolbar-width;
|
||||
height: 100%;
|
||||
padding: 20px 0px;
|
||||
margin: 0;
|
||||
@@ -61,7 +61,7 @@
|
||||
|
||||
.bottom-actions {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
width: $toolbar-width;
|
||||
bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -178,8 +178,8 @@
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 60px;
|
||||
width: 110px;
|
||||
padding: 5px 0 5px 0;
|
||||
width: $toolbar-width;
|
||||
padding: 5px 0;
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -255,7 +255,7 @@
|
||||
color: $offwhite;
|
||||
position: fixed;
|
||||
transition: 0.2s ease;
|
||||
left: 110px;
|
||||
left: $toolbar-width;
|
||||
box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
|
||||
|
||||
h2 {
|
||||
@@ -487,20 +487,6 @@
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*&:first-child {
|
||||
button { background-image: url("/static/archive/img/scene01.jpg"); }
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
button { background-image: url("/static/archive/img/scene02.jpg"); }
|
||||
}
|
||||
&:nth-child(3n) {
|
||||
button { background-image: url("/static/archive/img/scene03.jpg"); }
|
||||
}
|
||||
|
||||
&.back-to-map {
|
||||
button { background-image: url("/static/archive/img/map.jpg"); }
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -531,11 +517,6 @@
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
|
||||
/*.tab-caption {
|
||||
transition: 0.2s ease;
|
||||
opacity: 0;
|
||||
}*/
|
||||
|
||||
&:hover {
|
||||
.tab-caption {
|
||||
transition: 0.2s ease;
|
||||
|
||||
Reference in New Issue
Block a user