﻿/* Copyright 2017 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
* Extract source code from chromium by congerh. */

body {
	--google-blue-600: rgb(26, 115, 232);
	--google-blue-700: rgb(25, 103, 210);
	--google-gray-50: rgb(248, 249, 250);
	--google-gray-500: rgb(154, 160, 166);
	--google-gray-600: rgb(128, 134, 139);
	--google-gray-700: rgb(95, 99, 105);
	background-color: #fff;
	color: var(--google-gray-700);
	word-wrap: break-word;
}

html {
	text-size-adjust: 100%;
	font-size: 125%;
}

.icon {
	background-repeat: no-repeat;
	background-size: 100%;
}

/* Copyright 2014 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

.bad-clock,
.captive-portal,
.main-frame-blocked,
.neterror,
.offline,
.pdf,
.ssl,
.safe-browsing-billing {
	button {
		background: var(--google-blue-600);
	}
}

.error-code {
	color: #646464;
	font-size: .86667em;
	text-transform: uppercase;
	margin-top: 12px;
}

h1 {
	color: var(--google-gray-900);
	font-size: 1.6em;
	font-weight: normal;
	line-height: 1.25em;
	margin-bottom: 16px;
}

h2 {
	font-size: 1.2em;
	font-weight: normal;
}

.icon {
	height: 72px;
	margin: 0 0 40px;
	width: 72px;
}

.interstitial-wrapper {
	box-sizing: border-box;
	font-size: 1em;
	line-height: 1.6em;
	margin: 14vh auto 0;
	max-width: 600px;
	width: 100%;
}

#main-message > p {
	display: inline;
}

@media (max-width: 700px) {
	.interstitial-wrapper {
		padding: 0 10%;
	}
}

@media (max-width: 420px) {
	.interstitial-wrapper {
		padding: 0 5%;
	}
}

/**
* Mobile specific styling.
* Navigation buttons are anchored to the bottom of the screen.
* Details message replaces the top content in its own scrollable area.
*/

/* Fixed nav. */
@media (min-width: 240px) and (max-width: 420px) and (min-height: 401px),
(min-width: 421px) and (min-height: 240px) and (max-height: 560px) {
	body .nav-wrapper {
		background: #fff;
		bottom: 0;
		box-shadow: 0 -22px 40px #fff;
		left: 0;
		margin: 0 auto;
		max-width: 736px;
		padding-left: 24px;
		padding-right: 24px;
		position: fixed;
		right: 0;
		width: 100%;
		z-index: 2;
	}

	.interstitial-wrapper {
		max-width: 736px;
	}

	#details,
	#main-content {
		padding-bottom: 40px;
	}
}

@media (max-width: 420px) and (orientation: portrait),
(max-height: 560px) {
	body {
		margin: 0 auto;
	}

	#details,
	#main-content {
		&.hidden {
			display: block;
			height: 0;
			opacity: 0;
			overflow: hidden;
			padding-bottom: 0;
			transition: none;
		}
	}

	h1 {
		font-size: 1.5em;
		margin-bottom: 8px;
	}

	.icon {
		margin-bottom: 5.69vh;
	}

	.interstitial-wrapper {
		box-sizing: border-box;
		margin: 7vh auto 12px;
		padding: 0 24px;
		position: relative;

		p {
			font-size: .95em;
			line-height: 1.61em;
			margin-top: 8px;
		}
	}

	#main-content {
		margin: 0;
		transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
	}
}

@media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) {
	.interstitial-wrapper {
		margin-top: 10vh;
	}
}

@media (min-height: 400px) and (orientation:portrait) {
	.interstitial-wrapper {
		margin-bottom: 145px;
	}
}


@media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and (orientation: portrait) {
	.interstitial-wrapper {
		margin-top: 7vh;
	}
}

@media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) {
	.interstitial-wrapper {
		margin-top: 10vh;
	}
}

/* Small mobile screens. No fixed nav. */
@media (max-height: 400px) and (orientation: portrait),
(max-height: 239px) and (orientation: landscape),
(max-width: 419px) and (max-height: 399px) {
	.interstitial-wrapper {
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
	}

	#main-content {
		flex: 1 1 auto;
		order: 0;
	}
}

/* Copyright 2013 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */

html {
	/* Don't use the main frame div when the error is in a subframe. */
	&[subframe] #main-frame-error {
		display: none;
	}

	/* Don't use the subframe error div when the error is in a main frame. */
	&:not([subframe]) #sub-frame-error {
		display: none;
	}
}


h1 {
	margin-top: 0;
	word-wrap: break-word;

	span {
		font-weight: 500;
	}
}

h2 {
	color: #666;
	font-size: 1.2em;
	font-weight: normal;
	margin: 10px 0;
}

a {
	color: rgb(17, 85, 204);
	text-decoration: none;
}

.icon {
	user-select: none;
	display: inline-block;
}

.icon-offline {
	content: image-set(url("chrome://userchrome/content/pages/dino/images/default_100_percent/100-error-offline.png") 1x,
			url("chrome://userchrome/content/pages/dino/images/default_200_percent/200-error-offline.png") 2x);
	position: relative;
}

.icon-disabled {
	content: image-set(url("chrome://userchrome/content/pages/dino/images/default_100_percent/100-disabled.png") 1x,
			url("chrome://userchrome/content/pages/dino/images/default_200_percent/200-disabled.png") 2x);
	width: 112px;
}

.error-code {
	display: block;
	font-size: .8em;
}

.hidden {
	display: none;
}

#suggestions-list {
	p {
		margin-block-end: 0;
	}

	ul {
		margin-top: 0;
	}
}

.snackbar {
	background: #323232;
	border-radius: 2px;
	bottom: 24px;
	box-sizing: border-box;
	color: #fff;
	font-size: .87em;
	left: 24px;
	max-width: 568px;
	min-width: 288px;
	opacity: 0;
	padding: 16px 24px 12px;
	position: fixed;
	transform: translateY(90px);
	will-change: opacity, transform;
	z-index: 999;
}

.snackbar-show {
	animation:
		show-snackbar .25s cubic-bezier(0.0, 0.0, 0.2, 1) forwards,
		hide-snackbar .25s cubic-bezier(0.4, 0.0, 1, 1) forwards 5s;
}

@keyframes show-snackbar {
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hide-snackbar {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(90px);
	}
}

/* Decrease padding at low sizes. */
@media (max-width: 640px),
(max-height: 640px) {
	h1 {
		margin: 0 0 15px;
	}

	#content-top {
		margin: 15px;
	}
}

/* Don't allow overflow when in a subframe. */
html[subframe] body {
	overflow: hidden;
}

#sub-frame-error {
	align-items: center;
	background-color: #DDD;
	display: lex;
	flex-flow: column;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	transition: background-color .2s ease-in-out;
	width: 100%;

	&:hover {
		background-color: #EEE;
	}
}

#sub-frame-error {
	/* Show details only when hovering. */
	&:hover #sub-frame-error-details {
		visibility: visible;
	}

	.icon-generic {
		margin: 0 0 16px;
	}
}

#sub-frame-error-details {
	margin: 0 10px;
	text-align: center;
	visibility: hidden;
}

/* If the iframe is too small, always hide the error code. */
/* TODO(mmenke): See if overflow: no-display works better, once supported. */
@media (max-width: 200px),
(max-height: 95px) {
	#sub-frame-error-details {
		display: none;
	}
}

/* Adjust icon for small embedded frames in apps. */
@media (max-height: 100px) {
	#sub-frame-error .icon-generic {
		height: auto;
		margin: 0;
		padding-top: 0;
		width: 25px;
	}
}

/* Offline page */
.offline {
	transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
	background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
	will-change: filter, background-color;

	&.inverted {
		filter: invert(100%);
		background-color: #000;
	}

	#main-message > p {
		display: none;
	}

	.interstitial-wrapper {
		color: #2b2b2b;
		font-size: 1em;
		line-height: 1.55;
		margin: 0 auto;
		max-width: 600px;
		padding-top: 100px;
		width: 100%;
	}

	.runner-container {
		direction: ltr;
		height: 150px;
		max-width: 600px;
		overflow: hidden;
		position: absolute;
		top: 35px;
		width: 44px;
	}

	.runner-canvas {
		height: 150px;
		max-width: 600px;
		opacity: 1;
		overflow: hidden;
		position: absolute;
		top: 0;
		z-index: 10;
	}

	.controller {
		background: rgba(247, 247, 247, .1);
		height: 100vh;
		left: 0;
		position: absolute;
		top: 0;
		width: 100vw;
		z-index: 9;
	}
}

#offline-resources {
	display: none;
}

@media (max-width: 420px) {
	.snackbar {
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
	}
}

@media (max-height: 350px) {
	h1 {
		margin: 0 0 15px;
	}

	.icon-offline {
		margin: 0 0 10px;
	}

	.interstitial-wrapper {
		margin-top: 5%;
	}
}

@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
	.interstitial-wrapper {
		margin-bottom: 100px;
	}
}

@media (max-width: 360px) and (max-height: 480px) {
	.offline {
		.interstitial-wrapper {
			padding-top: 60px;
		}

		.runner-container {
			top: 8px;
		}
	}
}

@media (min-height: 240px) and (orientation: landscape) {
	.offline .interstitial-wrapper {
		margin-bottom: 90px;
	}

	.icon-offline {
		margin-bottom: 20px;
	}
}

@media (max-height: 320px) and (orientation: landscape) {
	.icon-offline {
		margin-bottom: 0;
	}

	.offline .runner-container {
		top: 10px;
	}
}

@media (max-width: 240px) {
	.interstitial-wrapper {
		overflow: inherit;
		padding: 0 8px;
	}
}

.arcade-mode {
	#buttons,
	#main-content {
		opacity: 0;
		overflow: hidden;
	}

	.interstitial-wrapper {
		height: 100vh;
		max-width: 100%;
		overflow: hidden;
	}

	.runner-container {
		left: 0;
		margin: auto;
		right: 0;
		transform-origin: top center;
		transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s;
		z-index: 2;
	}
}

.arcade-mode,
.arcade-mode .runner-container,
.arcade-mode .runner-canvas {
	image-rendering: pixelated;
	max-width: 100%;
	overflow: hidden;
}