mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-12 13:28:36 +03:00
Clean master commit
This commit is contained in:
Franc FC
21
src/scss/_animations.scss
Normal file
21
src/scss/_animations.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fallFadeIn {
|
||||
from {
|
||||
transform: translate(0, -40px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
114
src/scss/_burger.scss
Normal file
114
src/scss/_burger.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
|
||||
// Burger transition
|
||||
.side-menu-burg {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
appearance: none;
|
||||
box-shadow: none;
|
||||
border-radius: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 2px;
|
||||
background: $offwhite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
span::before,
|
||||
span::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: $offwhite;
|
||||
border-radius: 4px;
|
||||
content: "";
|
||||
transition-duration: 0.2s, 0.2s;
|
||||
transition-delay: 0.2s, 0s;
|
||||
}
|
||||
|
||||
span::before {
|
||||
transition-property: top, transform;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
transition-property: bottom, transform;
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span::before {
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
span::after {
|
||||
bottom: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
span {
|
||||
background: $midwhite;
|
||||
transform: rotate(45deg);
|
||||
transition-delay: 0s, 0.2s;
|
||||
}
|
||||
|
||||
span::before,
|
||||
span::after {
|
||||
background: $midwhite;
|
||||
transition-delay: 0s, 0.2s;
|
||||
}
|
||||
|
||||
span::before {
|
||||
top: 0;
|
||||
transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
span::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span,
|
||||
span::before,
|
||||
span::after {
|
||||
transition: 0.2s ease;
|
||||
background: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
&.over-white:hover {
|
||||
span,
|
||||
span:before,
|
||||
span:after {
|
||||
transition: 0.2s ease;
|
||||
background: $darkgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-burg:focus {
|
||||
outline: none;
|
||||
}
|
||||
15
src/scss/_colors.scss
Normal file
15
src/scss/_colors.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
$offwhite: #efefef;
|
||||
$midwhite: #a0a0a0;
|
||||
$darkwhite: darken($midwhite, 15%);
|
||||
$yellow: #ffd800;
|
||||
$red: rgb(233, 0, 19);
|
||||
$green: rgb(61, 241, 79);
|
||||
$midgrey: rgb(44, 44, 44);
|
||||
$darkgrey: #232323;
|
||||
$black: #000000;
|
||||
|
||||
$category_group00: #FF0000;
|
||||
$category_group01: #226b22;
|
||||
$category_group02: #671f6f;
|
||||
$category_group03: #0000bf;
|
||||
$category_group04: #d3ce2a;
|
||||
9
src/scss/_fonts.scss
Normal file
9
src/scss/_fonts.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
$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;
|
||||
16
src/scss/_icons.scss
Normal file
16
src/scss/_icons.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 1em;
|
||||
stroke-width: 0;
|
||||
stroke: $offwhite;
|
||||
fill: $offwhite;
|
||||
transform: scale(1.4);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
stroke: $yellow;
|
||||
fill: $yellow;
|
||||
}
|
||||
}
|
||||
12
src/scss/_levels.scss
Normal file
12
src/scss/_levels.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
/* 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;
|
||||
44
src/scss/_video.scss
Normal file
44
src/scss/_video.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
.fullscreen-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.fullscreen-bg__video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-filter: contrast(70%) brightness(70%) grayscale(30%); /* Webkit */
|
||||
filter: gray; /* IE6-9 */
|
||||
filter: contrast(70%) brightness(70%) grayscale(30%) /* W3C */
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 16/9) {
|
||||
.fullscreen-bg__video {
|
||||
height: 300%;
|
||||
top: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 16/9) {
|
||||
.fullscreen-bg__video {
|
||||
width: 300%;
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.fullscreen-bg {
|
||||
background: url('/static/archive/img/city.jpg') center center / cover no-repeat;
|
||||
}
|
||||
|
||||
.fullscreen-bg__video {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
827
src/scss/cabinet.scss
Normal file
827
src/scss/cabinet.scss
Normal file
@@ -0,0 +1,827 @@
|
||||
@import 'icons';
|
||||
@import 'video';
|
||||
|
||||
.cabinet-wrapper {
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
color: $offwhite;
|
||||
background-color: $black;
|
||||
font-family: 'Merriweather', serif;
|
||||
transition: opacity 0.5s ease 0.1s, z-index 0.1s ease 0s;
|
||||
opacity: 1;
|
||||
z-index: $final-level;
|
||||
|
||||
&.hidden {
|
||||
transition: opacity 0.5s ease 0s, z-index 0.1s ease 0.5s;
|
||||
opacity: 0;
|
||||
z-index: $hidden;
|
||||
}
|
||||
|
||||
&.show {
|
||||
z-index: $final-level;
|
||||
}
|
||||
|
||||
.top-action {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
|
||||
button {
|
||||
font-family: 'Lato';
|
||||
font-size: $xlarge;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
background: none;
|
||||
border: none;
|
||||
color: $offwhite;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
.label {
|
||||
height: 28px;
|
||||
float: left;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
float: left;
|
||||
path, circle, polygon,
|
||||
polyline, line {
|
||||
stroke-width: 2px;
|
||||
transition: 0.2s ease;
|
||||
stroke: $offwhite;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-header {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
background: $black;
|
||||
transition: 1s ease;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Merriweather', serif;
|
||||
|
||||
.header-title {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: $normal;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 2s ease;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
p:first-child {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
p {
|
||||
transition: 2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-sm {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.side-menu-file-cabinet {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-fa {
|
||||
background: url('/static/archive/img/logo-fa-square.png');
|
||||
margin: 0px 0 30px 20px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background-size: 30px;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 3s;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.cabinet-wrapper-files {
|
||||
display: block;
|
||||
background: $black;
|
||||
}
|
||||
|
||||
&.cabinet-wrapper-cover {
|
||||
background-color: $black;
|
||||
background-repeat:no-repeat;
|
||||
-webkit-background-size:cover;
|
||||
-moz-background-size:cover;
|
||||
-o-background-size:cover;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
box-sizing: border-box;
|
||||
padding: 30px;
|
||||
border-radius: 2px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cabinet-cover-header {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
animation-name: fallFadeIn;
|
||||
animation-duration: 3s;
|
||||
|
||||
.main-title {
|
||||
.title {
|
||||
font-size: $cover-title;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.untertitle {
|
||||
font-size: $xxlarge;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover-content {
|
||||
width: 100%;
|
||||
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 3s;
|
||||
|
||||
.tile-row {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(50% - 20px);
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
border: 1px solid $offwhite;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
font-size: $xxlarge;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: 1s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
span {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
transition: 1s ease;
|
||||
background-color: rgba($black, 0.15);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 1s ease;
|
||||
letter-spacing: 0.15em;
|
||||
&:before{
|
||||
transition: 1s ease;
|
||||
background-color: rgba($black, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
& * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tile-content {
|
||||
margin: 0 auto;
|
||||
padding: 30px 0;
|
||||
width: 200px;
|
||||
|
||||
.label {
|
||||
height: 28px;
|
||||
float: left;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
float: left;
|
||||
path, circle, polygon,
|
||||
polyline, line {
|
||||
stroke-width: 2px;
|
||||
transition: 0.2s ease;
|
||||
stroke: $offwhite;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
width: 90px;
|
||||
margin: 0 auto;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Lato';
|
||||
font-size: $small;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
transition: 0.2s ease;
|
||||
border-bottom: 2px solid rgba($offwhite, 0);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
border-bottom: 2px solid $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-files {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&.file-tab-list-off {
|
||||
ul.cabinet-file-tab-list {
|
||||
transition: 0.2s ease;
|
||||
left: -300px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.cabinet-file-tab-list {
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
float: left;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding-top: 160px;
|
||||
border-right: 1px solid $darkgrey;
|
||||
background: $black;
|
||||
transition: 0.2s ease;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
li.cabinet-file-tab {
|
||||
width: calc(100% - 40px);
|
||||
text-align: left;
|
||||
border: 0;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Merriweather', serif;
|
||||
font-size: $large;
|
||||
font-weight: 100;
|
||||
border-bottom: 1px solid $darkgrey;
|
||||
transition: 0.2s ease;
|
||||
color: $offwhite;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.react-tabs__tab--selected {
|
||||
color: $yellow;
|
||||
|
||||
&:after {
|
||||
content: ' →';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
text-align: left;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
button {
|
||||
margin: 20px;
|
||||
width: calc(100% - 40px);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Lato';
|
||||
font-size: $large;
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.secondary-action button {
|
||||
padding: 20px;
|
||||
border: 1px solid $midwhite;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
border-color: $offwhite;
|
||||
background: rgba($offwhite, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.react-tabs__tab-panel {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.cabinet-file-content {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
box-sizing: border-box;
|
||||
padding: 140px 30px 60px 30px;
|
||||
border-radius: 2px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 1.5s;
|
||||
|
||||
h1 {
|
||||
font-size: $title;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.title-separator {
|
||||
margin: 0 auto;
|
||||
width: 100px;
|
||||
border-bottom: 4px solid $yellow;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
letter-spacing: normal;
|
||||
text-transform: capitalize;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cabinet-body-text {
|
||||
padding: 10px 0;
|
||||
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
font-size: $xlarge;
|
||||
font-weight: 100;
|
||||
line-height: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highpoint {
|
||||
font-size: $xxxlarge;
|
||||
margin: 60px 0;
|
||||
border-left: 4px solid $yellow;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
button {
|
||||
font-size: $large;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 1px solid $offwhite;
|
||||
background-size: 100%;
|
||||
color: $offwhite;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&:after {
|
||||
content: ' →';
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
&.only-on-mobile {
|
||||
display: none;
|
||||
|
||||
button:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.ja {
|
||||
button { background-image: url("/static/archive/img/scene01.jpg"); }
|
||||
}
|
||||
&.pj {
|
||||
button { background-image: url("/static/archive/img/scene02.jpg"); }
|
||||
}
|
||||
&.st {
|
||||
button { background-image: url("/static/archive/img/scene03.jpg"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
min-width: 200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: $large;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
width: 100%;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 1s;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 120px;
|
||||
margin: 20px auto;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Lato';
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.document-action {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border: 0;
|
||||
outline: none;
|
||||
border-bottom: 4px solid rgba($yellow, 0);
|
||||
background: none;
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 5px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $offwhite;
|
||||
|
||||
&:after {
|
||||
content: '↓';
|
||||
}
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
border-bottom: 4px solid rgba($yellow, 1);
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* VIDEO ON LANDING
|
||||
*/
|
||||
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: $black;
|
||||
}
|
||||
.video {
|
||||
display: block;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 56.25%; /* 56.25% = 16:9. set ratio */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: 50% 0;
|
||||
transform-origin: 50% 0;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.video .wrapper {
|
||||
display: block;
|
||||
height: 300%;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.video iframe {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* VIDEO ON SITE
|
||||
*/
|
||||
|
||||
.video-responsive{
|
||||
overflow:hidden;
|
||||
padding-bottom:56.25%;
|
||||
position:relative;
|
||||
height:0;
|
||||
}
|
||||
.video-responsive iframe{
|
||||
left:0;
|
||||
top:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
/*
|
||||
* Responsiveness
|
||||
*
|
||||
*/
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.cabinet-files .cabinet-file-content .cabinet-body-text .primary-action {
|
||||
&.not-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
&.only-on-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.cabinet-cover {
|
||||
.content {
|
||||
padding: 0;
|
||||
}
|
||||
.cabinet-cover-header {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.main-title {
|
||||
.title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
.untertitle {
|
||||
font-size: $normal;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover-content .tile-row {
|
||||
padding: 0;
|
||||
|
||||
.tile {
|
||||
width: 60%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 0 20%;
|
||||
margin-bottom: 10px;
|
||||
font-size: $normal;
|
||||
&:first-child {
|
||||
margin-right: 20%;
|
||||
}
|
||||
&.tile00 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-files {
|
||||
ul.cabinet-file-tab-list {
|
||||
width: 100%;
|
||||
|
||||
li.cabinet-file-tab {
|
||||
text-align: center;
|
||||
font-size: $normal;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&.file-tab-list-off {
|
||||
ul.cabinet-file-tab-list {
|
||||
transition: 0.2s ease;
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-file-content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 100px 15px 40px 15px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
|
||||
.cabinet-body-text {
|
||||
padding: 10px 0;
|
||||
font-size: $xlarge;
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-action.not-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablets with very short heights */
|
||||
@media (max-height: 768px) and (min-width: 780px) {
|
||||
.cabinet-cover .content {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.cabinet-cover .cabinet-cover-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.main-title .title {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover .cabinet-cover-content .tile-row .tile {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: $xlarge;
|
||||
|
||||
.tile-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1350px) {
|
||||
.cabinet-files {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&.file-tab-list-off {
|
||||
ul.cabinet-file-tab-list {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-file-cabinet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------- Non-Retina Screens ----------- */
|
||||
@media screen
|
||||
and (min-device-width: 1200px)
|
||||
and (max-device-width: 1600px)
|
||||
and (-webkit-min-device-pixel-ratio: 1) {
|
||||
}
|
||||
|
||||
/* ----------- Retina Screens ----------- */
|
||||
@media screen
|
||||
and (min-device-width: 1200px)
|
||||
and (max-device-width: 1600px)
|
||||
and (-webkit-min-device-pixel-ratio: 2)
|
||||
and (min-resolution: 192dpi) {
|
||||
}
|
||||
190
src/scss/card.scss
Normal file
190
src/scss/card.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
.event-card {
|
||||
box-sizing: border-box;
|
||||
margin: 1px 0 0 0;
|
||||
padding: 15px;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 3px;
|
||||
transition: 0.2 ease;
|
||||
background: $offwhite;
|
||||
color: $darkgrey;
|
||||
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
font-size: $large;
|
||||
line-height: $xxlarge;
|
||||
transition: 0.2s ease;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $yellow;
|
||||
}
|
||||
|
||||
.card-bottomhalf {
|
||||
transition: 0.4s ease;
|
||||
height: auto;
|
||||
|
||||
&.folded {
|
||||
transition: 0.4s ease;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-transform: normal;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.event-card-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-toggle p {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.arrow-down {
|
||||
display: inline-block;
|
||||
transition: 0.2s ease;
|
||||
border: solid $darkwhite;
|
||||
border-width: 0 2px 2px 0;
|
||||
padding: 3px;
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
|
||||
&.folded {
|
||||
transition: 0.2s ease;
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .arrow-down {
|
||||
transition: 0.2s ease;
|
||||
border: solid $darkgrey;
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: $red;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
margin-top: 0;
|
||||
|
||||
.estimated-timestamp {
|
||||
color: $midwhite;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
.color-category {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
margin: 0px 5px 0 0;
|
||||
|
||||
&.category_group00 { background: $category_group00; }
|
||||
&.category_group01 { background: $category_group01; }
|
||||
&.category_group02 { background: $category_group02; }
|
||||
&.category_group03 { background: $category_group03; }
|
||||
&.category_group04 { background: $category_group04; }
|
||||
}
|
||||
}
|
||||
|
||||
.event-type {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 5px 2px 0;
|
||||
color: $darkgrey;
|
||||
|
||||
&.flagged {
|
||||
background: $red;
|
||||
color: $offwhite;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.summary {
|
||||
overflow: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE
|
||||
*/
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.double-bounce1, .double-bounce2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: $darkgrey;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
-webkit-animation: sk-bounce 3.0s infinite ease-in-out;
|
||||
animation: sk-bounce 3.0s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.double-bounce2 {
|
||||
-webkit-animation-delay: -1.0s;
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bounce {
|
||||
0%, 100% { -webkit-transform: scale(0.0) }
|
||||
50% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bounce {
|
||||
0%, 100% {
|
||||
transform: scale(0.0);
|
||||
-webkit-transform: scale(0.0);
|
||||
} 50% {
|
||||
transform: scale(1.0);
|
||||
-webkit-transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
}
|
||||
92
src/scss/cardstack.scss
Normal file
92
src/scss/cardstack.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
@import 'burger';
|
||||
@import 'card';
|
||||
|
||||
.card-stack {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
max-height: calc(100% - 208px);
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
z-index: $header;
|
||||
color: white;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&.full-height {
|
||||
max-height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.card-stack-header {
|
||||
min-height: 38px;
|
||||
line-height: 38px;
|
||||
width: 360px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px;
|
||||
background: $black;
|
||||
border-radius: 2px;
|
||||
border: 1px solid $black;
|
||||
font-size: $large;
|
||||
transition: 0.2s ease;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.header-copy {
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
|
||||
&.top {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-burg {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 9px;
|
||||
|
||||
span {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-stack-content {
|
||||
width: 360px;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.folded {
|
||||
.card-stack-header {
|
||||
border: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-stack-content {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
137
src/scss/common.scss
Normal file
137
src/scss/common.scss
Normal file
@@ -0,0 +1,137 @@
|
||||
@import 'colors';
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: $black;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Merriweather', serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
margin-left: 20px;
|
||||
color: white;
|
||||
|
||||
.login-title {
|
||||
p.message {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
form span {
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
form input {
|
||||
margin: 10px 0;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px;
|
||||
outline: none;
|
||||
font-family: 'Lato', sans-serif;
|
||||
|
||||
&:focus {
|
||||
border: 3px solid $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
form button {
|
||||
background: $black;
|
||||
color: white;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
border: 1px solid $offwhite;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
margin-top: 10px;
|
||||
margin-left: 320px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transition: 0.2s ease;
|
||||
border: 1px solid $yellow;
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
font-family: 'Lato', Helvetica sans-serif;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
::-moz-selection {
|
||||
color: $black;
|
||||
background: $yellow;
|
||||
}
|
||||
::selection {
|
||||
color: $black;
|
||||
background: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
background: #000010;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
button {
|
||||
font-size: 1.2em;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
border: 1px solid $offwhite;
|
||||
background: none;
|
||||
color: $offwhite;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
color: $yellow;
|
||||
border: 1px solid $yellow;
|
||||
background: rgba(white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Scrollbar
|
||||
*/
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background: $offwhite;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
62
src/scss/header.scss
Normal file
62
src/scss/header.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.header {
|
||||
background: #000000;
|
||||
position: fixed;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: 40px;
|
||||
width: 240px;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
cursor: pointer;
|
||||
|
||||
.header-title {
|
||||
a {
|
||||
font-family: 'Lato', Helvetica, serif;
|
||||
color: darken($offwhite, 5%);
|
||||
font-size: $xlarge;
|
||||
letter-spacing: 0.1em;
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-burg {
|
||||
right: 10px;
|
||||
span,
|
||||
span::before,
|
||||
span::after {
|
||||
background: $midwhite;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.side-menu-burg {
|
||||
span {
|
||||
transition: 0.2s ease;
|
||||
background: $offwhite;
|
||||
}
|
||||
span::before {
|
||||
transition: 0.2s ease;
|
||||
top: -6px;
|
||||
background: $offwhite;
|
||||
}
|
||||
|
||||
span::after {
|
||||
transition: 0.2s ease;
|
||||
bottom: -6px;
|
||||
background: $offwhite;
|
||||
}
|
||||
}
|
||||
.header-title a {
|
||||
transition: 0.2s ease;
|
||||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
116
src/scss/infopopup.scss
Normal file
116
src/scss/infopopup.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
@import 'burger';
|
||||
|
||||
.infopopup {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
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: 20px;
|
||||
left: 100px;
|
||||
border: 3px solid $offwhite;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Lato', 'Helvetica', sans-serif;
|
||||
font-size: $large;
|
||||
transition: opacity 0.5s ease 0.1s, z-index 0.1s ease 0s;
|
||||
opacity: 1;
|
||||
z-index: $overheader;
|
||||
|
||||
&.hidden {
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.legend-section {
|
||||
width: 300px;
|
||||
padding-left: 60px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
|
||||
svg {
|
||||
width: 100px;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.legend-labels {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: calc(100% - 100px);
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: $xsmall;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
|
||||
.color-category {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
margin: 0px 5px 0 0;
|
||||
|
||||
&.category_group00 { background: $category_group00; }
|
||||
&.category_group01 { background: $category_group01; }
|
||||
&.category_group02 { background: $category_group02; }
|
||||
&.category_group03 { background: $category_group03; }
|
||||
&.category_group04 { background: $category_group04; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.legend-labels .label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-burg {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin-bottom: 3px;
|
||||
padding-left: 80px;
|
||||
|
||||
.item-label {
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
font-size: $normal;
|
||||
}
|
||||
|
||||
.color-marker {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
border-radius: 15px;
|
||||
|
||||
&.victims { background-color: #C90500; }
|
||||
&.military { background-color: #319C31; }
|
||||
&.nonstate { background-color: #AC28AC; }
|
||||
&.state-police { background-color: #0000BF; }
|
||||
&.iguala-municipal-police { background-color: #00558D; }
|
||||
&.federal-police { background-color: #5756A2; }
|
||||
&.huitzuco-municipal-police { background-color: #4ECAC1; }
|
||||
&.cocula-municipal-police { background-color: #095959; }
|
||||
&.ambulance { background-color: #ffffff; }
|
||||
&.other { background-color: #D3CE2A; }
|
||||
&.drivers { background-color: #822519; }
|
||||
&.communications { background-color: #a6a6a6; }
|
||||
&.GIEI { background-color: #ffffff; }
|
||||
&.PGR { background-color: #000000; }
|
||||
}
|
||||
}
|
||||
}
|
||||
80
src/scss/loading.scss
Normal file
80
src/scss/loading.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
.loading-overlay {
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
font-weight: 300;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,0.9);
|
||||
transition: 0.4s ease;
|
||||
z-index: $loading-overlay;
|
||||
opacity: 1;
|
||||
|
||||
.loading-wrapper {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0 0 0 -50%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
|
||||
span {
|
||||
color: $offwhite;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
transition: opacity 0.4s ease, z-index .1s 0.4s;
|
||||
opacity: 0;
|
||||
z-index: $hidden;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE
|
||||
*/
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
position: relative;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.double-bounce1, .double-bounce2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: $offwhite;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
-webkit-animation: sk-bounce 3.0s infinite ease-in-out;
|
||||
animation: sk-bounce 3.0s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.double-bounce2 {
|
||||
-webkit-animation-delay: -1.0s;
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bounce {
|
||||
0%, 100% { -webkit-transform: scale(0.0) }
|
||||
50% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bounce {
|
||||
0%, 100% {
|
||||
transform: scale(0.0);
|
||||
-webkit-transform: scale(0.0);
|
||||
} 50% {
|
||||
transform: scale(1.0);
|
||||
-webkit-transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/scss/main.scss
Normal file
15
src/scss/main.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@import 'colors';
|
||||
@import 'fonts';
|
||||
@import 'levels';
|
||||
@import 'animations';
|
||||
@import 'common';
|
||||
@import 'loading';
|
||||
@import 'header';
|
||||
@import 'cardstack';
|
||||
@import 'map';
|
||||
@import 'timeline';
|
||||
@import 'tag-filters';
|
||||
@import 'toolbar';
|
||||
@import 'infopopup';
|
||||
@import 'notification';
|
||||
@import 'scene';
|
||||
223
src/scss/map.scss
Normal file
223
src/scss/map.scss
Normal file
@@ -0,0 +1,223 @@
|
||||
@import 'popup';
|
||||
|
||||
@-webkit-keyframes pulsate {
|
||||
0% { opacity: 0.1; }
|
||||
50% { opacity: 0.25; }
|
||||
100% { opacity: 0.1; }
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 110px;
|
||||
right: 0;
|
||||
|
||||
.leaflet-container {
|
||||
height: 100%;
|
||||
|
||||
img.leaflet-tile {
|
||||
-webkit-filter: contrast(120%) brightness(115%) grayscale(95%); /* Webkit */
|
||||
filter: gray; /* IE6-9 */
|
||||
filter: contrast(120%) brightness(115%) grayscale(95%); /* W3C */
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
z-index: $hidden;
|
||||
}
|
||||
&.show {
|
||||
z-index: $map;
|
||||
}
|
||||
.event {
|
||||
fill: $yellow;
|
||||
cursor: pointer;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.link {
|
||||
stroke: $midgrey;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 2px 5px;
|
||||
}
|
||||
|
||||
.site-label {
|
||||
background: rgba($black,0.6);
|
||||
color: #fff;
|
||||
padding: 2px 7px;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
border: rgba($black,0.6);
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&::before {
|
||||
border-top-color: rgba($black,0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Leaflet mapping controls
|
||||
*/
|
||||
.leaflet-touch .leaflet-bar {
|
||||
.leaflet-control-zoom {
|
||||
border: 0;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
a.leaflet-control-zoom-in,
|
||||
a.leaflet-control-zoom-out {
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
a.leaflet-control-zoom-in {
|
||||
border-bottom: 1px solid $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Leaflet marker and popups
|
||||
*/
|
||||
|
||||
.leaflet-svg {
|
||||
display: block;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup {
|
||||
display: none;
|
||||
|
||||
&.do-display {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 3px;
|
||||
background: $black;
|
||||
|
||||
.leaflet-popup-content {
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 3px 5px;
|
||||
|
||||
.event-card {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-close-button {
|
||||
display: none;
|
||||
|
||||
& + .leaflet-popup-content-wrapper .leaflet-popup-content {
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-tip-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-pane > svg path.bus-route,
|
||||
.leaflet-pane > svg path.district {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.eventLocationMarker {
|
||||
fill: none;
|
||||
stroke: $yellow;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* Elements
|
||||
*/
|
||||
|
||||
.location-event-marker {
|
||||
stroke-width: 0;
|
||||
transition: 0.2s ease;
|
||||
fill-opacity: 0.8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.coevent-marker {
|
||||
fill-opacity: 0.1;
|
||||
stroke-dasharray: 8px 4px;
|
||||
stroke-width: 2px;
|
||||
opacity: 1;
|
||||
}
|
||||
.coevent-path {
|
||||
stroke-dasharray: 8px 4px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.district-boundaries {
|
||||
fill: $red;
|
||||
fill-opacity: 0.3;
|
||||
stroke-width: 2;
|
||||
stroke: $red;
|
||||
}
|
||||
|
||||
.path-polyline {
|
||||
stroke: $darkgrey;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.route-polyline {
|
||||
transition: 0.2s ease;
|
||||
stroke: $darkgrey;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
stroke: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.district-popup {
|
||||
button {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
background-size: 100%;
|
||||
color: $offwhite;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
|
||||
p {
|
||||
font-size: $normal;
|
||||
margin: 0;
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
&:first-child {
|
||||
font-size: $xsmall;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
p:last-child {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
71
src/scss/notification.scss
Normal file
71
src/scss/notification.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
@import 'burger';
|
||||
|
||||
.notification-wrapper {
|
||||
top: 60px;
|
||||
right: 60px;
|
||||
width: 400px;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.notification {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
|
||||
color: $darkgrey;
|
||||
background: $offwhite;
|
||||
border-radius: 5px;
|
||||
border: 3px solid $offwhite;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Lato', 'Helvetica', sans-serif;
|
||||
font-size: $large;
|
||||
transition: opacity 0.5s ease 0.1s, z-index 0.1s ease 0s;
|
||||
opacity: 1;
|
||||
z-index: $overheader;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: lighten($offwhite, 5%);
|
||||
transition: background-color 0.4s;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.side-menu-burg {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: inline-block;
|
||||
|
||||
&.error { color: red; }
|
||||
&.warning { color: orange; }
|
||||
&.good { color: green; }
|
||||
&.neutral { color: $darkgrey; }
|
||||
}
|
||||
|
||||
.details {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.true {
|
||||
height: auto;
|
||||
transition: height 0.4s;
|
||||
}
|
||||
|
||||
&.false {
|
||||
height: 0;
|
||||
transition: height 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
81
src/scss/popup.scss
Normal file
81
src/scss/popup.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
.popup {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
border-radius: 2px;
|
||||
transition: 0.2 ease;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
transition: 0.4s ease;
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
|
||||
&:hover {
|
||||
transition: 0.4s ease;
|
||||
box-shadow: 0 29px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.card-tophalf {
|
||||
height: 100px;
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 120px;
|
||||
padding-right: 5px;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px dotted $midwhite;
|
||||
}
|
||||
.right {
|
||||
float: left;
|
||||
width: 225px;
|
||||
padding-left: 5px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.tag,
|
||||
p.see-more {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: $xlarge;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.location {
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
font-size: $normal;
|
||||
color: $offwhite;
|
||||
}
|
||||
|
||||
.estimated-timestamp {
|
||||
margin-top: 3px;
|
||||
margin-left: 3px;
|
||||
font-size: $xsmall;
|
||||
color: $midwhite;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.summary {
|
||||
max-height: 200px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: scroll;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.source {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
177
src/scss/scene.scss
Normal file
177
src/scss/scene.scss
Normal file
@@ -0,0 +1,177 @@
|
||||
.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: 'Merriweather', '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;
|
||||
}
|
||||
47
src/scss/tabs.scss
Normal file
47
src/scss/tabs.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.react-tabs {
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
[role=tablist] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
[role=tab] {
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
font-size: $xlarge;
|
||||
width: 33%;
|
||||
background: none;
|
||||
color: $midwhite;
|
||||
outline: none;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
|
||||
list-style-type: none;
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
[role=tab][aria-selected=true] {
|
||||
font-weight: 700;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
color: $offwhite;
|
||||
border: 1px solid;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.react-innertabpanel {
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
85
src/scss/tag-filters.scss
Normal file
85
src/scss/tag-filters.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
288
src/scss/timeline.scss
Normal file
288
src/scss/timeline.scss
Normal file
@@ -0,0 +1,288 @@
|
||||
|
||||
.timeline-wrapper {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
left: 110px;
|
||||
right: 0px;
|
||||
height: 170px;
|
||||
background: rgba($black, 0.8);
|
||||
box-shadow: 0 -10px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
color: white;
|
||||
transition: 0.2s ease;
|
||||
bottom: 0px;
|
||||
z-index: $timeline;
|
||||
|
||||
&.folded {
|
||||
transition: 0.2s ease;
|
||||
bottom: -170px;
|
||||
|
||||
.timeline-header .timeline-toggle p .arrow-down {
|
||||
transform: translate(0, 5px)rotate(-135deg);
|
||||
-webkit-transform: translate(0, 5px)rotate(-135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
font-size: $large;
|
||||
font-weight: 700;
|
||||
|
||||
.timeline-toggle {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
margin: 0 auto;
|
||||
background: rgba($black, 0.8);
|
||||
margin-top: -25px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.arrow-down {
|
||||
transition: 0.2s ease;
|
||||
border-right: 2px solid $offwhite;
|
||||
border-bottom: 2px solid $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
transition: 0.2s ease;
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
border-right: 2px solid $midwhite;
|
||||
border-bottom: 2px solid $midwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-info {
|
||||
position: absolute;
|
||||
margin-top: -70px;
|
||||
margin-left: 10px;
|
||||
background: rgba($black, 0.8);
|
||||
padding: 10px;
|
||||
min-height: 20px;
|
||||
p {
|
||||
margin: 0;
|
||||
height: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&:first-child {
|
||||
text-transform: none;
|
||||
font-size: $normal;
|
||||
letter-spacing: 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
height: 160px;
|
||||
padding-top: 20px;
|
||||
|
||||
.timeline-labels {
|
||||
padding-top: 2px;
|
||||
padding-left: 20px;
|
||||
margin-right: 0px;
|
||||
border-right: 1px solid $midgrey;
|
||||
width: 175px;
|
||||
height: 180px;
|
||||
float: left;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
.timeline-label-title {
|
||||
font-size: $normal;
|
||||
font-weight: 700;
|
||||
fill: $offwhite;
|
||||
letter-spacing: 0.1em;
|
||||
height: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
font-size: $small;
|
||||
line-height: 16px;
|
||||
color: $offwhite;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
.timeLabel {
|
||||
font-size: $normal;
|
||||
fill: $midwhite;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
/*width: calc(100% - 200px);*/
|
||||
width: calc(100% - 40px);
|
||||
margin-left: 20px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.domain {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tick {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
line {
|
||||
stroke: rgb(199, 199, 199);
|
||||
shape-rendering: crispEdges;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
fill: $midwhite;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.xAxis {
|
||||
line {
|
||||
stroke-dasharray: 1px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.yAxis {
|
||||
.tick line {
|
||||
stroke-width: 15px;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
}
|
||||
|
||||
.axisBoundaries {
|
||||
stroke: $offwhite;
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 1px 4px;
|
||||
}
|
||||
|
||||
.event {
|
||||
cursor: pointer;
|
||||
opacity: .7;
|
||||
|
||||
&.mouseover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
fill: none;
|
||||
stroke: $offwhite;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 5px 2px;
|
||||
}
|
||||
|
||||
.coevent {
|
||||
opacity: .7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time-controls path,
|
||||
.time-controls rect {
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
fill: $midwhite;
|
||||
|
||||
&:hover path,
|
||||
&:hover path, {
|
||||
transition: 0.2s ease;
|
||||
fill: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.time-controls-inline path {
|
||||
cursor: pointer;
|
||||
fill: $offwhite;
|
||||
}
|
||||
|
||||
.time-controls circle,
|
||||
.time-controls-inline circle {
|
||||
fill: $midwhite;
|
||||
fill-opacity: 0.01;
|
||||
cursor: pointer;
|
||||
stroke: $midwhite;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.time-controls-inline circle { stroke: none; }
|
||||
|
||||
.time-controls g,
|
||||
.time-controls-inline {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
circle {
|
||||
transition: 0.2s ease;
|
||||
fill-opacity: 0.2;
|
||||
fill: $offwhite;
|
||||
}
|
||||
path,
|
||||
rect {
|
||||
transition: 0.2s ease;
|
||||
fill: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-level-button {
|
||||
font-size: $xsmall;
|
||||
cursor: pointer;
|
||||
text-anchor: middle;
|
||||
letter-spacing: 0.05em;
|
||||
transition: 0.2s ease;
|
||||
fill: $midwhite;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
transition: 0.2s ease;
|
||||
fill: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Slider
|
||||
* https://bl.ocks.org/mbostock/6452972
|
||||
*/
|
||||
.track,
|
||||
.track-overlay {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.track {
|
||||
stroke: $offwhite;
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.track-overlay {
|
||||
pointer-events: stroke;
|
||||
stroke-width: 15px;
|
||||
stroke: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.handle {
|
||||
fill: $offwhite;
|
||||
}
|
||||
660
src/scss/toolbar.scss
Normal file
660
src/scss/toolbar.scss
Normal file
@@ -0,0 +1,660 @@
|
||||
@import 'burger';
|
||||
@import 'tabs';
|
||||
|
||||
.toolbar-wrapper {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
z-index: $header;
|
||||
background: $midgrey;
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
padding: 20px 0px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
color: $offwhite;
|
||||
background: $darkgrey;
|
||||
text-align: center;
|
||||
font-size: $normal;
|
||||
font-weight: 100;
|
||||
transition: 0.2s ease;
|
||||
z-index: $header;
|
||||
|
||||
.toolbar-header {
|
||||
margin: 0 15px 10px 15px;
|
||||
padding: 10px 0 25px 0;
|
||||
transition: 0.2s ease;
|
||||
border-bottom: 2px solid $midwhite;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Merriweather', serif;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: $normal;
|
||||
margin: 0;
|
||||
}
|
||||
p:first-child {
|
||||
font-size: $xsmall;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
border-bottom: 2px solid $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tabs {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bottom-action-block {
|
||||
display: block;
|
||||
|
||||
&:last-child {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
border-radius: 30px;
|
||||
background: none;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
outline: none;
|
||||
font-family: 'Lato';
|
||||
font-size: $xsmall;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
border: 1px solid $midwhite;
|
||||
color: $midwhite;
|
||||
|
||||
&.tiny {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
transition: 0.2s ease;
|
||||
border: 1px solid $offwhite;
|
||||
color: $offwhite;
|
||||
|
||||
svg path { stroke: $offwhite; }
|
||||
svg polyline { stroke: $offwhite; }
|
||||
svg polygon { fill: $offwhite; }
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
&.reset {
|
||||
margin-left: -4px;
|
||||
margin-top: -1px;
|
||||
-webkit-transform: scale(0.9);
|
||||
-moz-transform: translate(-2px,1px)scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
path, polyline {
|
||||
fill: none;
|
||||
stroke: $midwhite;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
polygon {
|
||||
fill: $midwhite;
|
||||
}
|
||||
|
||||
&.coevents {
|
||||
margin: 0;
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(1.2);
|
||||
|
||||
path { stroke-width: 2px; }
|
||||
rect {
|
||||
fill: $midwhite;
|
||||
&.no-fill { fill: $darkgrey; }
|
||||
}
|
||||
line {
|
||||
stroke-width: 1px;
|
||||
stroke: $midwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
font-size: $xxlarge;
|
||||
bottom: 120px;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid $offwhite;
|
||||
color: $offwhite;
|
||||
|
||||
svg path { stroke: $offwhite; }
|
||||
svg polyline { stroke: $offwhite; }
|
||||
svg polygon { fill: $offwhite; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tab {
|
||||
display: inline-block;
|
||||
height: 60px;
|
||||
width: 110px;
|
||||
padding: 10px 0 5px 0;
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
color: $midwhite;
|
||||
|
||||
svg {
|
||||
transform: scale(0.7);
|
||||
path, circle, polygon,
|
||||
polyline, line {
|
||||
stroke-width: 2px;
|
||||
transition: 0.2s ease;
|
||||
stroke: $midwhite;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
&.scenes {
|
||||
path {
|
||||
transition: 0.2s ease;
|
||||
fill: $midwhite;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-caption {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: $xsmall;
|
||||
margin-top: -2px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
transition: 0.2s ease;
|
||||
color: $offwhite;
|
||||
|
||||
svg {
|
||||
path, circle, polygon,
|
||||
polyline, line {
|
||||
transition: 0.2s ease;
|
||||
stroke: $offwhite;
|
||||
}
|
||||
|
||||
&.scenes {
|
||||
path {
|
||||
transition: 0.2s ease;
|
||||
fill: $offwhite;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-panels {
|
||||
width: 440px;
|
||||
top: 15px;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 10px 10px 30px;
|
||||
font-size: $normal;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
background: $black;
|
||||
color: $offwhite;
|
||||
position: fixed;
|
||||
transition: 0.2s ease;
|
||||
left: 110px;
|
||||
box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
|
||||
|
||||
h2 {
|
||||
font-family: 'Merriweather', 'Georgia', 'serif';
|
||||
font-size: $large;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $normal;
|
||||
font-family: 'Merriweather', 'Georgia', 'serif';
|
||||
line-height: 1.4em;
|
||||
};
|
||||
|
||||
.panel-header {
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
margin-right: -45px;
|
||||
height: 36px;
|
||||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
border-radius: 3px;
|
||||
background: $black;
|
||||
padding: 8px 6px;
|
||||
cursor: pointer;
|
||||
|
||||
.caret {
|
||||
position: relative;
|
||||
transform: translate(8px, 5px)rotate(45deg);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
transition: 0.2s ease;
|
||||
border-left: 2px solid $midwhite;
|
||||
border-bottom: 2px solid $midwhite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.caret {
|
||||
transition: 0.2s ease;
|
||||
border-left: 2px solid $offwhite;
|
||||
border-bottom: 2px solid $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.people-tab {
|
||||
width: 50%;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
font-size: $normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
svg {
|
||||
transform: translate(-2px,0)scale(0.6);
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
stroke: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
&.react-tabs__tab--selected {
|
||||
svg circle,
|
||||
svg path {
|
||||
stroke: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
svg circle,
|
||||
svg path {
|
||||
transition: 0.2s ease;
|
||||
fill: none;
|
||||
stroke: $midwhite;
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab-list {
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.react-tabs__tab-panel {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.react-tabs__tab-panel--selected {
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
margin-top: 0;
|
||||
|
||||
.react-tabs__tab-panel--selected {
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.react-tabs .react-innertabpanel {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
height: auto;
|
||||
transition: 0.2s ease;
|
||||
height: calc(100% - 310px);
|
||||
}
|
||||
|
||||
&.folded {
|
||||
transition: 0.2s ease;
|
||||
left: -440px;
|
||||
|
||||
ul {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
height: 60px;
|
||||
color: $offwhite;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
margin: 20px 0;
|
||||
padding: 5px 10px;
|
||||
font-size: 18px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
letter-spacing: 0.1em;
|
||||
transition: 0.2s ease;
|
||||
border-color: $midwhite;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
transition: 0.2s ease;
|
||||
border-color: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background: none;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
font-size: $large;
|
||||
|
||||
button {
|
||||
height: 36px;
|
||||
border: 1px transparent;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
color: $offwhite;
|
||||
outline: none;
|
||||
transition: 0.2s ease;
|
||||
padding: 0 10px;
|
||||
text-align: left;
|
||||
float: left;
|
||||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid $offwhite;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
width: calc(100% - 40px);
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
font-size: $normal;
|
||||
font-family: 'Merriweather', 'Georgia', 'serif';
|
||||
color: $midwhite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
span {
|
||||
color: $offwhite;
|
||||
}
|
||||
.checkbox {
|
||||
background: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
line-height: 10px;
|
||||
padding: 10px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
color: $offwhite;
|
||||
transition: 0.4s ease;
|
||||
transform: rotate(0deg);
|
||||
|
||||
&:after {
|
||||
content: '▾';
|
||||
}
|
||||
|
||||
&.folded {
|
||||
transition: 0.4s ease;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-action {
|
||||
button {
|
||||
font-size: 1.2em;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 1px solid $offwhite;
|
||||
background-size: 100%;
|
||||
color: $offwhite;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
&: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"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.taggroup-wrapper {
|
||||
margin-top: 30px;
|
||||
z-index: 10;
|
||||
border-bottom: none;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid rgba(white, 0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 0.1s ease;
|
||||
}
|
||||
|
||||
.collapsible-item {
|
||||
width: calc(100% - 32px);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.taggroup-header {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: $large;
|
||||
|
||||
h2::first-letter {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.taggroup-content {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
transition: 0.2s ease;
|
||||
|
||||
.tagsubgroup-wrapper {
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(white, 0.25);
|
||||
&:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tagsubgroup-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.folded {
|
||||
.tagsubgroup-content {
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
transition: 0.2s ease;
|
||||
height: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
overflow: auto;
|
||||
min-height: 32px;
|
||||
height: auto;
|
||||
|
||||
span {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-filter {
|
||||
outline: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: $offwhite;
|
||||
margin-left: 20px;
|
||||
width: calc(100% - 20px);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
font-size: $normal;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: 1px solid $black;
|
||||
border-bottom: 1px solid rgba(white, 0.25);
|
||||
&:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid rgba(white, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.folded {
|
||||
.filter-list-content {
|
||||
padding: 0 10px;
|
||||
border-top: 0;
|
||||
transition: 0.2s ease;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-content {
|
||||
.item {
|
||||
overflow: auto;
|
||||
min-height: 32px;
|
||||
height: auto;
|
||||
border-bottom: 1px solid rgba(white, 0.25);
|
||||
|
||||
span {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path-list {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 678px) {
|
||||
.toolbar-wrapper {
|
||||
.toolbar-tab {
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
|
||||
.tab-caption {
|
||||
transition: 0.2s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tab-caption {
|
||||
transition: 0.2s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar .bottom-actions {
|
||||
.action-button {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
src/scss/video.scss
Normal file
33
src/scss/video.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.video-wrapper {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: 740px;
|
||||
height: 420px;
|
||||
transition: opacity 500ms;
|
||||
background-color: black;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-js .vjs-big-play-button {
|
||||
font-size: 3em;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: none;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
transition: 0.2s ease;
|
||||
border: 1px solid $midwhite;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
border: 1px solid $offwhite;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user