app_style.css

/* CSS style sheet of for the Travel time comparison app of my thesis results

"Parking of private cars and spatial accessibility in Helsinki Capital Region" 
by Sampo Vesanen, 26.9.2020 */

html, body {
	height: 100%;
	scroll-behavior: smooth;
	position: relative;
	overscroll-behavior: contain; /*disable pull-down-to-refresh on Chrome*/
}
/* mainPanel() master */
/* main element positioning brutishly*/
.col-sm-9 {
	left: 6%;
}
hr {
	margin-left: 0px;
}
/* code tag adjustments to fit the application */
code {
	color: white;
	background-color: #222324;
}
/* Specifying font-family is important in shinyapps.io to prohibit the use of ugly
default fonts in ggiraph (svg) objects. Property "pointer-events" here makes the zipcode 
labels in Interactive map invisible to the cursor. */
text {
	font-family: helvetica,arial,sans-serf;
	pointer-events: none;
}

/*------------------*/
/* Scrollbar styles */
/*------------------*/

/* mainpanel scrollbar */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
	border-radius: 10px;
	background-color: #1c1e22;
}
::-webkit-scrollbar {
	width: 14px;
	background-color: transparent;
}
::-webkit-scrollbar:horizontal {
	height: 14px;
}
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
	background-color: #49515a;
}
::-webkit-scrollbar-thumb:hover {
   background-color: #515c69;
}
::-webkit-scrollbar-corner { 
	background-color: transparent; 
}
/* sidebar scrollbar */
#sidebar::-webkit-scrollbar {
	background-color: #1c1e22;
}
#sidebar::-webkit-scrollbar-track {
	background-color: #15171d;
}
/* jQuery dialog scrollbars */
#abbr-info::-webkit-scrollbar, 
#abbr-info::-webkit-scrollbar-corner {
	background-color: transparent;
}
#abbr-info::-webkit-scrollbar-thumb {
   background-color: #55616f;
}
#abbr-info::-webkit-scrollbar-thumb:hover {
   background-color: #798797;
}

/*----------------*/
/* sidebarPanel() */
/*------------------
- set sidebarPanel (form.well) width. sidebarPanel width setting is important because the 
long explanations would break it otherwise
- manually set sidebarPanel z-index to make the element always appear on top */
form.well {
	position: fixed;
	overflow: auto;
	overflow-y: auto;
	resize: horizontal;
	max-height: 95vh;
	min-width: 220px;
	max-width: 400px;
	border-radius: 5px;
	padding: 14px;
	width: 240px;
	z-index: 160;
	scroll-behavior: smooth;
}
#contents {
	background: #1c1e22;
	border: 5px solid #2e3338;
	border-radius: 5px;
	padding: 4px;
	margin-bottom: 15px;
}
.helper-div {
	margin: 0 0 0px;
	font-size: 13px;
}
.line {
	border-radius: 3px;
	padding-left: 3px;
	height: 100%;
	margin: 0 0 0px;
}
.lyellow {
	border-left: 4px solid #f6d55c;
}
.lred {
	border-left: 4px solid #ed553b;
}
.lcyan {
	border-left: 4px solid #3caea3;
}
.fillcol-warning {
	background-color: red;
	-webkit-box-shadow: 0px 0px 15px rgba(255, 0, 0, 0.8);  
	-moz-box-shadow: 0px 0px 15px rgba(255, 0, 0, 0.8); 
	box-shadow: 0px 0px 15px rgba(255, 0, 0, 0.8);
}
.fillcol-warning::after {
	font-weight: bold;
	color: red;
	content: "NB! Current symbology selection is origin postal code independent. Origin postal code choice will not affect the map visualisation.";
}
#version-info {
	font-size: 11px; 
	color: grey; 
	margin-top: -10px;
}
#smalltext {
	font-size: 9px;
	margin-bottom: -1px;
}
/* Assorted buttons */
.hidesidebar {
	position: fixed;
	z-index: 200;
	margin-left: -5px;
	margin-top: -5px;
	background-color: rgba(0,0,0,0.3);
	border-radius: 10px;
}
/* Assorted buttons */
#calcZip {
	font-size: 12px;
	width: 100%;
	padding: 3px 0px 5px 0px;
	white-space: normal;
	margin-bottom: 15px;
}
/* Interactive map on/off switches */
.onoff-container {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	text-align: center;
}
.onoff-div {
	padding: 3px 3px 0px 3px;
	font-size: 12px;
	flex-grow: 1; 
	flex-shrink: 1; 
	flex-basis: auto;
	margin: 2px;
	background-color: rgba(255,255,255,0.05);
}
.onoff-label {
	font-weight: 400;
	margin-top: 4px;
	margin-bottom: 1px;
}
/* zipcode field validator on error */
.shiny-output-error-validation {
	color: red;
}

/*-------------*/
/* mainPanel() */
/*---------------
- noselect makes selecting ggiraph elements not possible
- :last-child pseudo-selector makes last row of descriptive statistics bold */
.rightside-toolbar {
	position: fixed;
	margin-left: 15px;
	margin-top: 4px;
	background-color: rgba(255,255,255,0.3);
	border-radius: 5px;
	padding: 0px 7px 2px 7px;
	z-index: 150;
}
#info_dialog_btn {
	margin-left: 7px;
}
#showhidebutton {
	float: right;
	background: none;
	border: none;
	text-align: center; /* eyeslash and eye are of different width */
	width: 45px; /* therefore align and give button fixed width */
}
/* use this class to make ggiraphOutputs untouchable. Class is added to ids in 
JavaScript */
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* align girafe element left */
.girafe_container_std {
	text-align: left;
}
svg, img {
	border-radius: 4px;
}
.loadingdiv {
	pointer-events: none;
	user-select: none; /* supported by Chrome and Opera */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: -10;
	font-size: 20px;
}
/* This will re-enable zipcode tooltip on Interactive map when mouse hovers over svg 
polygons or polylines that don't have a tooltip (attribute "title"). These are the label 
background boxes and boundaries for municipalities and subdivisions. */
polygon:not([title]), polygon[title=""],
polyline:not([title]), polyline[title=""] {
	pointer-events: none;
}
/* hovering effect for one-part svgs */
polygon:not([name="00190"]):hover, polygon:not([name="00200"]):hover 
polygon:not([name="00250"]):hover, polygon:not([name="00330"]):hover,
polygon:not([name="00340"]):hover, polygon:not([name="00570"]):hover,
polygon:not([name="00830"]):hover, polygon:not([name="00890"]):hover,
polygon:not([name="02100"]):hover, polygon:not([name="02380"]):hover {
	fill: #8950a1;
}
/* Additional tooltip properties. ggiraph has some pre-existing properties set for the
tooltip. */
#app-tooltip {
	max-height: 80vh;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	font-size: 13px;
	width: 215px;
}
.tooltip-hr {
	margin-top: 1px; 
	margin-bottom: 3px;
}
#tooltip-div { /*obsolete? not in use?*/
	padding-top: 3px;
}

/*----------------*/
/* tooltip tables */
/*----------------*/
.tg {
	border-collapse: collapse;
	border-spacing: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 4px;
	table-layout: fixed;
	width: 215px;
	white-space: nowrap;
	overflow: hidden;
}
/* fake an invisible 4px vertical line to stabilise the table cell positioning. Not
using this positions table headers disproportionately compared to the rows */
.tg-header {
	margin-bottom: -1px;
	border-left: 4px solid transparent; 
	border-radius: 5px 5px 0px 0px;
}
.tg td,
.tg th {
	border: 1px solid black;
	font-weight: normal;
	padding: 2px 1px;
}
.tg th {
	font-weight: bold;
}
.tg .tg-cell {
	text-align: left;
	vertical-align: top;
	position: relative;
}
/* CSS properties set on active tooltip row, selected with visualise data input */
.selected td {
	font-weight: bold;
	background-color: #616161;
}
/* Together with .tg table-layout and width, set column widths
It is discussed here (https://stackoverflow.com/a/19316337/9455395) that this is a bad 
performance solution */
.tg tr > *:nth-child(1) { width: 28%; }
.tg tr > *:nth-child(2) { width: 24%; }
.tg tr > *:nth-child(3) { width: 24%; }
.tg tr > *:nth-child(4) { width: 24%; }
/* remove top, right, and bottom borders from tooltip table */
.tg tr:first-child th {
	border-top: 0;
}
#ttm-avg td,
#thesis-drivetime td,
#compare-drivetime td {
	border-top: 0;
}
.tg tr:last-child td {
	border-bottom: 0;
}
.tg tr td:last-child,
.tg tr th:last-child {
	border-right: 0;
}
/* remove border-radius from rows below header rows */
.tg-flattop {
	border-radius: 0px 0px 5px 5px;
}
/* coloured vertical line */
.vl-sfp-wtd td:first-child {
	border-left: 4px solid #f6d55c;
}
.vl-avg td:first-child {
	border-left: 4px solid #ed553b;
}
.vl-drive-pct td:first-child {
	border-left: 4px solid #3caea3;
}

/*---------------------*/
/* Autoscrolling cells */
/*---------------------*/
/*defining the class "mover" and an inner div we can animate a long text inside the small
table cells*/
td.tg-cell.mover,
th.tg-cell.mover {
	overflow: hidden;
}
/* Using :not(), disallow propagation of animation to children divs, where abbreviations 
are separated from explanations by a tabulator like whitespace */

/* assign rows different animations based on the text length to scroll. This is a highly
manual design choice: animation lengths and translateX() have been set to values where
the three animations, short, mid and long, run with the same speed */
/* animation syntax: @keyframes duration | timing-function | delay | iteration-count */
#ttm-sfp td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl) {
	animation: scrolling-short 18s linear 3s 1;
	-webkit-animation: scrolling-short 18s linear 3s 1;
}
#ttm-avg td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#ttm-wtd td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#thesis-sfp td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#thesis-wtd td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#compare-sfp td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#compare-wtd td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl) {
	animation: scrolling-mid 30s linear 3s 1;
	-webkit-animation: scrolling-mid 30s linear 3s 1;
}
#ttm-drivetime td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#ttm-pct td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#thesis-drivetime td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#thesis-pct td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#compare-drivetime td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl),
#compare-pct td.tg-cell.mover div:not(.cell-abbr):not(.cell-expl) {
	animation: scrolling-long 49s linear 3s 1;
	-webkit-animation: scrolling-long 49s linear 3s 1;
}
th.tg-cell.mover div:not(.cell-abbr):not(.cell-expl) {
	animation: scrolling-th 10s linear 3s 1;
	-webkit-animation: scrolling-th 10s linear 3s 1;
}
@keyframes scrolling-short {
	90% { transform: translateX(-290%); }
	100% { transform: translateX(-290%); }
}
@keyframes scrolling-mid {
	90% { transform: translateX(-475%); }
	100% { transform: translateX(-475%); }
}
@keyframes scrolling-long {
	90% { transform: translateX(-775%); }
	100% { transform: translateX(-775%); }
}
@keyframes scrolling-th {
	80% { transform: translateX(-60%); }
	100% { transform: translateX(-60%); }
}
.cell-abbr {
	display: inline-block;
	width: 60px;
}
.cell-expl {
	display: inline-block;
}

/*-------------------------*/
/* jQuery UI dialog window */
/*-------------------------*/
.ui-front { /* dialog window in front to svg tooltip */
	z-index: 1001;
}
.ui-widget.ui-widget-content {
	border: 1px solid #131417;
}
/* A long standing bug in jQuery permanently shrinks the child div when resizing
window. padding and margin properties here help with the div shrinking, but I think
my custom toolbars can be a bit glitchy with this solution. Will accept this, though.
https://stackoverflow.com/q/31584544/9455395 */
.ui-dialog .ui-dialog-content  {
    /* Fix resizing issue where content doesn't fit in the dialog anymore */
    padding: 3.5px;
}
.ui-dialog .ui-dialog-titlebar  {
    /* Adjust the titlebar so it is equal to the content fix */
    margin: 3.5px;
}
.ui-widget-header {
	border: 1px solid #1c1e22;
	background: #28292d;
	color: #bebebf;
}
.ui-widget-content {
	background: #424952;
	color: #bebebf;
}
.ui-widget-content a {
	color: white;
}
.ui-corner-all {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.dialog-dropshadow {
	-webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6);  
	-moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6); 
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6);
}
.legend-table {
	border-collapse: collapse;
	border-radius: 5px;
	width: 100%;
	margin-bottom: 4px;
}
.legend-table th, 
.legend-table td {
  padding: 4px;
  text-align: left;
  border-bottom: 1px solid #222324;
}
.legend-table tr > *:nth-child(1) {
	width: 20%;
}
/* no horizontal line for the last row of table */
.legend-table tbody > tr:last-child > td {
  border-bottom: 0;
}
/* lt-header and lt-top-row border-radius properties fix the miniscule beauty error
that would otherwise round the corners between legend-table headers and the first row
of data */ 
.lt-header {
	margin-bottom: 0px;
	border-radius: 5px 5px 0px 0px;
}
.lt-top-row {
	border-radius: 0px 0px 5px 5px;
}

/*--------------------------*/
/* Font Awesome utilisation */
/*----------------------------
Common properties for Font Awesome: All of these settings are required to make icons 
render reliably */
.icon::before {
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-weight: 900; /* solid */
	font-size: 1.0em;
}
/* additional margin when class icon inside h4 tag (jQuery info dialog) */
h4 .icon {
	margin: 0px 6px 0px 0px;
}
.calculator::before {
	content: "\f1ec";
	margin-right: 6px;
}
.eyeslash::before {
	content: "\f070";
	color: white;
}
.eye::before {
	content: "\f06e";
	color: white;
}
.file::before {
	content: "\f56d";
	color: #069;
	font-size: 1.75em;
	margin: 0px 5px 0px 5px;
}
.info::before {
	content: "\f129";
	color: #069;
	font-size: 1.75em;
	margin: 0px 8px 0px 8px;
}
.info:hover, .file:hover {
	background: rgba(0,0,0,0.3);
	border-radius: 15px;
	-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}
.database::before {
	content: "\f1c0";
	color: white;
	margin: 0px 4px 0px 2px;
}
.poll::before {
	content: "\f681";
	color: white;
	margin: 0px 4px 0px 2px;
}
.exchange-alt::before {
	content: "\f362";
	color: white;
	margin: 0px 4px 0px 2px;
}
.hourglass-start::before {
	content: "\f251";
	margin-right: 4px;
}
.hourglass-end::before {
	content: "\f253";
	margin-right: 4px;
}
.search::before {
	content: "\f002";
	margin: 0px 2px 0px 2px;
}
.expand-arrows-alt::before {
	content: "\f31e";
	margin: 0px 2px 0px 2px;
}
/*for dropdown menus*/
.database-grey::before {
	content: "\f1c0";
	color: darkgrey;
	margin: 0px 4px 0px 2px;
}
.poll-grey::before {
	content: "\f681";
	color: darkgrey;
	margin: 0px 4px 0px 2px;
}
.exchange-grey::before {
	content: "\f362";
	color: darkgrey;
	margin: 0px 4px 0px 2px;
}
.fill-grey::before {
	content: "\f575";
	color: darkgrey;
	margin: 0px 4px 0px 2px;
}
.dropbar {
	display: inline-block;
	width: 4px;
	height: 18px;
	vertical-align: middle;
	background-color: #ed553b;
	margin-right: 4px;
	opacity: 0.8;
}
.dd-sfp-wtd {
	background-color: #f6d55c;
}
.dd-drive-pct {
	background-color: #3caea3;
}
/* for compare table */
.equals::before {
	content: "\f52c";
	color: white;
	float: right;
	margin: 0px 2px 0px 2px;
	
}
.database-comp::before {
	content: "\f1c0";
	color: white;
	float: right;
	margin: 0px 2px 0px 2px;
}
.poll-comp::before {
	content: "\f681";
	color: white;
	float: right;
	margin: 0px 2px 0px 2px;
}

/*---------------------------------*/
/* Anchor link highlight animation */
/*---------------------------------*/
@keyframes highlight {
	0% {
		background: none;
		max-width: 100%;
	}
	50% {
		background: #67727f;
		max-width: 100%;
		-moz-box-shadow: 0px 0px 15px rgba(140, 150, 162, 1);
		-webkit-box-shadow: 0px 0px 15px rgba(140, 150, 162, 1);
		box-shadow: 0px 0px 15px rgba(140, 150, 162, 1);
	}
	100% {
		background: none;
		max-width: 100%;
	}
}
.animate {
	animation: highlight 0.75s ease-in-out;
}

/*-------------------------*/
/* Small screen properties */
/*-------------------------*/

/* landscape mode small screen */
@media only screen and (max-width: 1080px) and (orientation:landscape) {
	form.well {
		width: 220px;
		min-width: 220px;
		padding: 10px;
	}
	.form-control {
		height: 100%;
	}
	#contents {
		border: 4px solid #2e3338;
		padding: 3px;
		margin-bottom: 10px;
	}
	body, p, b, button, label, span, 
	span.irs-min, span.irs-max, span.irs-single, span.irs-grid-text, p.helper-div, 
	div.optgroup-header, 
	p#version-info, input#zipcode, button#calcZip {
		font-size: 1vw;
	}
	.selectize-input {
		min-height: 15px;
		padding: 3px 12px;
	}
	#version-info {
		margin-top: 0px;
	}
	.tg {
		width: 170px;
	}
	#app-tooltip {
		max-height: 100%;
		font-size: 0.8vw;
		width: 170px;
	}
	#app-tooltip b {
		font-size: 0.8vw;
	}
	.tooltip-hr {
		margin-top: 0px; 
		margin-bottom: 2px;
	}
	::-webkit-scrollbar {
		width: 8px;
	}
	::-webkit-scrollbar:horizontal {
		height: 8px;
	}
}
/*up-right small screen */
@media only screen and (max-width: 1080px) and (orientation:portrait) {
	form.well {
		width: 155px;
		min-width: 155px;
		padding: 6px;
	}
	.form-control {
		height: 100%;
	}
	#contents {
		border: 4px solid #2e3338;
		padding: 3px;
		margin-bottom: 6px;
	}
	body, p, b, button, label, span, 
	span.irs-min, span.irs-max, span.irs-single, span.irs-grid-text, p.helper-div, 
	div.optgroup-header, 
	p#version-info, input#zipcode, button#calcZip {
		font-size: 1.6vw;
	}
	b {
		line-height: 1;
	}
	.selectize-input {
		min-height: 15px;
		padding: 1px 12px;
	}
	#version-info {
		margin-top: 0px;
	}
	.tg {
		width: 130px;
	}
	#app-tooltip {
		width: 130px;
		font-size: 1.2vw;
	}
	#app-tooltip b {
		font-size: 1.2vw;
	}
	.tooltip-hr {
		margin-top: 0px; 
		margin-bottom: 2px;
	}
	::-webkit-scrollbar {
		width: 6px;
	}
	::-webkit-scrollbar:horizontal {
		height: 6px;
	}
}