thesis_stats_vis_style.css

/* CSS style sheet of for the analysis app of my thesis results

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

html, body {
	height: 100%;
	scroll-behavior: smooth;
	position: relative;
}
/* mainPanel() master */
.col-sm-8 {
	max-width: 1225px;
}
hr {
	margin-left: 0px;
}
/* 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: #272b30;
}
::-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: #272b30; 
}
/* sidebar scrollbar */
#sidebar::-webkit-scrollbar {
	background-color: #1c1e22;
}
#sidebar::-webkit-scrollbar-track {
	background-color: #15171d;
}
::-webkit-resizer {
	width: 0;
	height: 0;
	border-top: 7px solid #1c1e22;
	border-left: 12px solid #515c69;
	border-bottom: 7px solid #1c1e22;
	background-color: #1c1e22;
}

/*----------------*/
/* 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;
	max-height: 95vh;
	resize: horizontal;
	min-width: 250px;
	max-width: 400px;
	width: 250px;
	z-index: 50;
	scroll-behavior: smooth;
}
#contents {
	background: #1c1e22;
	border: 5px solid #2e3338;
	border-radius: 5px;
	padding: 4px;
	margin-bottom: 15px;
}
#linkheading_t, #linkheading_b {
	margin-bottom: -2px;
	font-weight: bold;
}
#linkheading_b {
	margin-top: 6px;
}
#version-info {
	font-size: 11px; 
	color: grey; 
	margin-top: -10px;
}
#smalltext {
	font-size: 9px;
	margin-bottom: -1px;
}
/* Assorted buttons */
#resetSubdivs, #resetParkWalk {
	width: 100%;
	padding: 4px 0px 6px 0px;
	white-space: normal;
}
#resetSubdivs {
	margin-top: 4px;
}
.hidesidebar {
	position: fixed;
	z-index: 100;
	margin-left: -5px;
	margin-top: -5px;
	background-color: rgba(0,0,0,0.3);
	border-radius: 10px;
}
/* Checkbox customisation:
- strikethrough for checked boxes
- achieve coloured checkboxes with filter property */
.checkbox input[type=checkbox] {
	-webkit-filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(60deg) saturate(1000%) contrast(0.9);
	filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(60deg) saturate(1000%) contrast(0.9);
}
.checkbox input[type=checkbox]:checked {	
	-webkit-filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.9);
	filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.9);
}
.checkbox input[type=checkbox]:checked + span {
	text-decoration: line-through;
	color: dimgray;
}
/* Municipality on/off switches */
/* Flex properties make buttons fill up the parent container */
.mun-btn-container {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	margin-top: 15px;
}
.munbutton {
	padding: 5px 7px 5px 7px;
	font-size: 12px;
	flex-grow: 1; 
	flex-shrink: 1; 
	flex-basis: 0;
	margin: 1px;
}
/* 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;
}

/*-------------*/
/* mainPanel() */
/*---------------
- noselect makes selecting ggiraph elements not possible
- :last-child pseudo-selector makes last row of descriptive statistics bold */
#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 */
}
#descri, #levene, #anova {
	overflow-x: auto;
	max-height: 80vh;
}
#descri tr:last-child { /* bold last row in descri */
	font-weight: bold;
}
#brownf {
	color: #c8c8c8;
	background: #2e3338;
	border: 1px solid #1c1e22;
	font-size: 14px;
}
#signif {
	font-size: 12px;
	margin-top: -12px;
}
/* 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;
}
.girafe_container_std {
	text-align: left; /* align girafe elements to the left */
}
svg, img {
	border-radius: 4px;
}
/* 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;
}
/* Custom tooltip properties */
#app-tooltip {
	font-size: 13px;
}
#tooltip-hr {
	margin-top: 2px; 
	margin-bottom: 2px;
}
#tooltip-div {
	padding-top: 3px;
}

/*--------------------------*/
/* 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;
}
.wrench::before {
    content: "\f0ad";
}
.chart::before {
	content: "\f080";
}
.mapmark::before {
	content: "\f59f";
}
.eyeslash::before {
	content: "\f070";
	color: white;
}
.eye::before {
	content: "\f06e";
	color: white;
}
.file::before {
	content: "\f56d";
}
.history::before {
	content: "\f1da";
	margin-right: 6px;
}
.link::before {
	content: "\f0c1";
	font-size: 1.5em;
	margin-left: 4px;
}


/*---------------------------------*/
/* 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%;
	}
}
#descrilink, #histlink, #barplotlink, #boxplotlink, #levenelink, 
#anovalink, #brownlink, #intmaplink, #stats-settings-link, #hist-settings-link, 
#barplot-settings-link, #subdiv-settings-link, #intmap-settings-link {
	scroll-margin-top: 40px; /* Arrive 40px above the anchor position */
	border-radius: 5px;
}
.animate {
	animation: highlight 0.75s ease-in-out;
	animation-delay: 1s;
}
.animate-immediately {
	animation: highlight 0.75s ease-in-out;
}

/*-------------------------*/
/* Small screen properties */
/*-------------------------*/
@media only screen and (max-width: 1080px) {
	::-webkit-scrollbar {
		width: 8px;
	}
	::-webkit-scrollbar:horizontal {
		height: 8px;
	}
	#app-tooltip {
		font-size: 9px;
	}
	::-webkit-resizer {
		border-top: 4px solid #1c1e22;
		border-left: 9px solid #515c69;
		border-bottom: 4px solid #1c1e22;
	}
}