<commit_before>/*! index.less
 * http://tulito.org
 *
 * Copyright (c) 2013-2014 <NAME> <<EMAIL>>;
 * Licensed under the Apache 2 license */

@screenWidth: 320px;  /* the width of the screen, changed automatically by tulito */
@screenHeight: 960px; /* the height of the screen, changed automatically by tulito */

@titleSpeed: 500ms;
@cascadeSpeed: 300ms;

@openedPaneGap: 150px;

body {
  background-color: #fff;
  background-attachment: fixed;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.2rem;
  width: 100%;
  color: #fff;
  letter-spacing: 2px;
  overflow: hidden;
}

.app {
	display: inline;
    text-align:center;
	z-index: 1;
	margin: 0;
	padding: 0;
}

.title-bar {
	position: absolute;
	z-index: 100;
	top: 0; left: 0;
	height: 84px;
	background-color: #303030;
	color: #000;
	margin-bottom: 6px;
	width: 100%;
	text-align: center;
	pointer-events: none;
	transition: height @titleSpeed;
	
	.logo {
		position: absolute;
		top: 0;
		left: 0;
	 	width: 100%;
		height: 100%;
		z-index: 2;
		transition: width @titleSpeed, height @titleSpeed;
		img {
			width: 90%;
			height: auto;
			/* ^ this won't work well for ipad, so we will need a media query to constrain this */
			margin: 1em;
		}
	}
	
	.left:not(.menu-button) {
		margin: 0;
		transition: width @titleSpeed;
		width: 46%;
		height: 100%;
		background-color: #457a87;
		float: left;
		border-bottom:1px solid #303030;
		border-right:0.5px solid #303030;
	}
	.right:not(.menu-button) {
		margin: 0;
		transition: width @titleSpeed;
		width: 54%;
		height: 100%;
		background-color: #3c723b;
		float: right;
		border-bottom:1px solid #303030;
		position: relative;
		p {
			width: 14em;
			text-align: left;
			position: absolute;
			bottom: 4px;
			left: 6px;
			color: #fff;
			font-size: 0.8em;
			font-weight: 600;
			-webkit-transition: opacity 400ms;
		}
	}
	.menu-button.right {
		width: 40px;
		height: 40px;
		line-height: 40px;
		position: absolute;
		top: 0;
		right: -60px;
		font-size: 2.0rem;
		padding: 0;
		margin: 0;
		opacity: 0;
		pointer-events: none;
		transition: right 300ms, opacity 500ms;
		border-radius: 0;
		&.active {
			background-color: #3D5C3D;	
		}
		&:active {
			background-color: #3D5C3D;	
		}
		i {
			color: #ccc;
		}
		&.shown {
			pointer-events: auto;
			opacity: 1;
			right: -3px;
		}
	}
	&.small {
		height: 40px;
		p {
			opacity: 0;
		}
		.logo {
			width: 60%;
		}
		.left:not(.menu-button) {
			width: 28%;
		}
		.right:not(.menu-button) {
			width: 72%;
		}
	}
}

.stretch-v {
	height: 30%;
}

.stretch-vs {
	height: 15%;
}

.app div.text, .app p  {
	margin-left: 5%;
	margin-right: 5%;
	text-align: left;
	color: #333;
	font-size: 1.2em;
	font-weight: 500;
	letter-spacing: 0.1em;
	&.tiny {
		font-size: 0.8em;
	}
}

.button-group {
	display: inline-block;
	font-size: 1.2rem;
	width: 100%;
	letter-spacing: 1px;
	margin: 0;
	margin-top: 5px;
	white-space: nowrap;
	text-align: left;
	color: #ddd;
}

.welcome-message {
	position: absolute;
	top: 22%;
}

.summary-message {
	position: absolute;
	top: 12%;
}

.login-form {
	position: relative;
	top: 30%;
	input {
		-webkit-appearance: none;
		-webkit-border-radius: 2px;
	    -moz-border-radius: 2px;
	    border-radius: 2px;
		background-color: #f2f2f2;
		border: none;
		color: #666;
		-webkit-box-shadow: inset 0 0 2px #ddd;
		box-shadow: inset 0 0 2px #ddd;
		
		&[type="text"], &[type="password"] {
			width: 100%;
			height: 40px;
			line-height: 24px;
			margin-bottom: 13px;
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 1px;
			padding: 5px 12px;
		}
		&[type="checkbox"] {
			margin-left: 0;
			width: 28px;
			height: 28px;
			float: left;
		}
	}
	
	#login-button {
		width: 42%;
		float: right;
		text-align: center;
		margin-top: 6px;
		background-color: #5491a0;
		font-size: 18px;
		margin-right: 0;
		margin-left: 0;
		&.active {
			background-color: #71A1AD;
		}
		&:active {
			background-color: #71A1AD;
		}
	}
	
	#save-username {
		position: relative;
		margin-left: 5px;
		margin-top: 10px;
		width: 55%;
		float: left;
		text-align: left;
		letter-spacing: 0.06em;
		label {
			position: relative;
			top: 5px;
			font-size: 0.7em;
			margin-left: 6px;
			i {
				vertical-align: text-bottom;
				font-size: 2em;
				color: #aaa;
			}
		}
		.fa-check {
			pointer-events: none;
			display: none;
			font-size: 22px;
			color: #5491a0;
			position: absolute;
			left: 3px;
			top: 6px;
			margin: 0;
			padding: 0;
			&.shown {
				display: block;
			}
		}
	}
}

hr {
	border: 0;
	border-bottom: 1px solid #ccc;
	background: #999;
}

#login #other-links {
	margin: 0;
	padding: 0;
	width: 100%;
	position: absolute;
	bottom: 2%;
	min-height: 100px;
}

.cascade {
	transition: opacity @cascadeSpeed, margin-top @cascadeSpeed;
	opacity: 0;
	margin-top: -10px;
	&.shown {
		opacity: 1;
		margin-top: 0;
	} 
}

.small[data-tulito-class="button"] {
	height: 80px;
	line-height: 60px;
	font-size: 16px;
	background-color: #666;
}

[data-tulito-class="hidden-pane"] {
	background-color: #fff;
}

[data-tulito-class="pane"] {
	background-color: #fcfcfc;
}

.fa {
	margin-right: 5px;
	color: #ccc;
}

a {
	color: #2394b0;
	&:hover {
		color: #2394b0;
	}
	&:active {
		color: #71A1AD;
		background-color: #E4EFF2;
	}
	&:visited {
		color: #2394b0;
		background-color: #E4EFF2;
	}
}
[data-tulito-class="link"]
{
	position: relative;
	left: -4px;
	padding: 2px 4px;
	border-radius: 4px;
	color: #2394b0;
	&.active {
		color: #71A1AD;
		background-color: #E4EFF2;
	}
}

[data-tulito-class="back-pane"]
{
	color : #fff;
	ul {
		list-style: none;
		padding:0;
		margin:0;
		width:100%;
	}
	li {
		padding: 0 10px;
		height: 38px;
		line-height:40px;
		border-bottom: 1px solid #222;
		background-color: #3a3a3a;
		font-size: 1.3rem;
		color: #bbb;
		font-weight: 600;
		&.active {
			background-color: #444444;
		}
		&:active {
			background-color: #444444;
		}
	}
	ul > ul > li {
		font-weight: 400;
		font-size: 1.3rem;
		background-color: #2c2c2c;
	}
}

/*
   FIXME: Much of this remaining section needs cleanup. Vertical centering 
   within hidden panes needs these vcenter classes, and much of what follows that 
   is to allow these double-nested divs to center while still making the margins 
   happy properly.
*/

.vcenter-cont {
	display: table;
	height: 100%
}

.vcenter {
	display: table-cell;
    vertical-align: middle;
}

[data-tulito-class="hidden-pane"] p,
[data-tulito-class="hidden-pane"] ul
{
	margin: 20px;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	font-weight: 400;
	color: #eee;
}

[data-tulito-class="hidden-pane"] div
{
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	font-weight: 400;
	color: #eee;
}

.loader {
	position: absolute;
	z-index: 90;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 40px;
	line-height: @screenHeight;
	text-align: center;
	background-color: #fff;
	opacity: 0;
	display: none;
	transition: opacity 300ms;
	i {
		color: #333;
		opacity: 0.9;
		&.our-spin {
			-webkit-animation: spin 1.4s infinite linear;
		    -moz-animation: spin 1.4s infinite linear;
		    -o-animation: spin 1.4s infinite linear;
		    animation: spin 1.4s infinite linear;
		}
	}
	p {
		font-size: 13px;
		color: #333;
		opacity: 1;
		line-height: 16px;
	}
	&.shown {
		display: inline-block;
		&.opened {
			opacity: 0.8;
		}
	}
}

[data-tulito-id="info-pane"] {
	background-color: #3c723b;
	color: #000;
	opacity: 0.95;
	font-style: italic;
	line-height: 2em;
	border-right: solid 1px rgba(100,100,100,0.3);
	p.info {
		position: relative;
		color: #fff;
		top: 20%;
		margin-left: 10%;
		margin-right: 10%;
		width: 80%;
		font-size: 1.4em;
		letter-spacing: 0.05em;
	}
	[data-tulito-open="info-pane"] {
		position: absolute;
		bottom: 30%;
		right: 20%;
		background-color: #ddd;
		color: #444;
		width: 60px;
		font-style: normal;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-align: center;
		&:active {
			background-color: #ccc;
		}
		&.active {
			background-color: #ccc;
		}
		&.hidden {
			display: none;
		}
	}
}

.warning {
	display: none;
	z-index: 5000;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: #457a87;
	p {
		position: absolute;
		margin: 20% 10%;
		color: #fff;
		font-size: 1.4em;
		line-height: 1.5em;
	}
}

@media screen and (orientation: landscape) {
  .warning {
	 display: block;
  }
}
<commit_msg>just leave media query without dimensions for now<commit_after>/*! index.less
 * http://tulito.org
 *
 * Copyright (c) 2013-2014 <NAME> <<EMAIL>>;
 * Licensed under the Apache 2 license */

@screenWidth: 320px;  /* the width of the screen, changed automatically by tulito */
@screenHeight: 960px; /* the height of the screen, changed automatically by tulito */

@titleSpeed: 500ms;
@cascadeSpeed: 300ms;

@openedPaneGap: 150px;

body {
  background-color: #fff;
  background-attachment: fixed;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.2rem;
  width: 100%;
  color: #fff;
  letter-spacing: 2px;
  overflow: hidden;
}

.app {
	display: inline;
    text-align:center;
	z-index: 1;
	margin: 0;
	padding: 0;
}

.title-bar {
	position: absolute;
	z-index: 100;
	top: 0; left: 0;
	height: 84px;
	background-color: #303030;
	color: #000;
	margin-bottom: 6px;
	width: 100%;
	text-align: center;
	pointer-events: none;
	transition: height @titleSpeed;
	
	.logo {
		position: absolute;
		top: 0;
		left: 0;
	 	width: 100%;
		height: 100%;
		z-index: 2;
		transition: width @titleSpeed, height @titleSpeed;
		img {
			width: 90%;
			height: auto;
			/* ^ this won't work well for ipad, so we will need a media query to constrain this */
			margin: 1em;
		}
	}
	
	.left:not(.menu-button) {
		margin: 0;
		transition: width @titleSpeed;
		width: 46%;
		height: 100%;
		background-color: #457a87;
		float: left;
		border-bottom:1px solid #303030;
		border-right:0.5px solid #303030;
	}
	.right:not(.menu-button) {
		margin: 0;
		transition: width @titleSpeed;
		width: 54%;
		height: 100%;
		background-color: #3c723b;
		float: right;
		border-bottom:1px solid #303030;
		position: relative;
		p {
			width: 14em;
			text-align: left;
			position: absolute;
			bottom: 4px;
			left: 6px;
			color: #fff;
			font-size: 0.8em;
			font-weight: 600;
			-webkit-transition: opacity 400ms;
		}
	}
	.menu-button.right {
		width: 40px;
		height: 40px;
		line-height: 40px;
		position: absolute;
		top: 0;
		right: -60px;
		font-size: 2.0rem;
		padding: 0;
		margin: 0;
		opacity: 0;
		pointer-events: none;
		transition: right 300ms, opacity 500ms;
		border-radius: 0;
		&.active {
			background-color: #3D5C3D;	
		}
		&:active {
			background-color: #3D5C3D;	
		}
		i {
			color: #ccc;
		}
		&.shown {
			pointer-events: auto;
			opacity: 1;
			right: -3px;
		}
	}
	&.small {
		height: 40px;
		p {
			opacity: 0;
		}
		.logo {
			width: 60%;
		}
		.left:not(.menu-button) {
			width: 28%;
		}
		.right:not(.menu-button) {
			width: 72%;
		}
	}
}

.stretch-v {
	height: 30%;
}

.stretch-vs {
	height: 15%;
}

.app div.text, .app p  {
	margin-left: 5%;
	margin-right: 5%;
	text-align: left;
	color: #333;
	font-size: 1.2em;
	font-weight: 500;
	letter-spacing: 0.1em;
	&.tiny {
		font-size: 0.8em;
	}
}

.button-group {
	display: inline-block;
	font-size: 1.2rem;
	width: 100%;
	letter-spacing: 1px;
	margin: 0;
	margin-top: 5px;
	white-space: nowrap;
	text-align: left;
	color: #ddd;
}

.welcome-message {
	position: absolute;
	top: 22%;
}

.summary-message {
	position: absolute;
	top: 12%;
}

.login-form {
	position: relative;
	top: 30%;
	input {
		-webkit-appearance: none;
		-webkit-border-radius: 2px;
	    -moz-border-radius: 2px;
	    border-radius: 2px;
		background-color: #f2f2f2;
		border: none;
		color: #666;
		-webkit-box-shadow: inset 0 0 2px #ddd;
		box-shadow: inset 0 0 2px #ddd;
		
		&[type="text"], &[type="password"] {
			width: 100%;
			height: 40px;
			line-height: 24px;
			margin-bottom: 13px;
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 1px;
			padding: 5px 12px;
		}
		&[type="checkbox"] {
			margin-left: 0;
			width: 28px;
			height: 28px;
			float: left;
		}
	}
	
	#login-button {
		width: 42%;
		float: right;
		text-align: center;
		margin-top: 6px;
		background-color: #5491a0;
		font-size: 18px;
		margin-right: 0;
		margin-left: 0;
		&.active {
			background-color: #71A1AD;
		}
		&:active {
			background-color: #71A1AD;
		}
	}
	
	#save-username {
		position: relative;
		margin-left: 5px;
		margin-top: 10px;
		width: 55%;
		float: left;
		text-align: left;
		letter-spacing: 0.06em;
		label {
			position: relative;
			top: 5px;
			font-size: 0.7em;
			margin-left: 6px;
			i {
				vertical-align: text-bottom;
				font-size: 2em;
				color: #aaa;
			}
		}
		.fa-check {
			pointer-events: none;
			display: none;
			font-size: 22px;
			color: #5491a0;
			position: absolute;
			left: 3px;
			top: 6px;
			margin: 0;
			padding: 0;
			&.shown {
				display: block;
			}
		}
	}
}

hr {
	border: 0;
	border-bottom: 1px solid #ccc;
	background: #999;
}

#login #other-links {
	margin: 0;
	padding: 0;
	width: 100%;
	position: absolute;
	bottom: 2%;
	min-height: 100px;
}

.cascade {
	transition: opacity @cascadeSpeed, margin-top @cascadeSpeed;
	opacity: 0;
	margin-top: -10px;
	&.shown {
		opacity: 1;
		margin-top: 0;
	} 
}

.small[data-tulito-class="button"] {
	height: 80px;
	line-height: 60px;
	font-size: 16px;
	background-color: #666;
}

[data-tulito-class="hidden-pane"] {
	background-color: #fff;
}

[data-tulito-class="pane"] {
	background-color: #fcfcfc;
}

.fa {
	margin-right: 5px;
	color: #ccc;
}

a {
	color: #2394b0;
	&:hover {
		color: #2394b0;
	}
	&:active {
		color: #71A1AD;
		background-color: #E4EFF2;
	}
	&:visited {
		color: #2394b0;
		background-color: #E4EFF2;
	}
}
[data-tulito-class="link"]
{
	position: relative;
	left: -4px;
	padding: 2px 4px;
	border-radius: 4px;
	color: #2394b0;
	&.active {
		color: #71A1AD;
		background-color: #E4EFF2;
	}
}

[data-tulito-class="back-pane"]
{
	color : #fff;
	ul {
		list-style: none;
		padding:0;
		margin:0;
		width:100%;
	}
	li {
		padding: 0 10px;
		height: 38px;
		line-height:40px;
		border-bottom: 1px solid #222;
		background-color: #3a3a3a;
		font-size: 1.3rem;
		color: #bbb;
		font-weight: 600;
		&.active {
			background-color: #444444;
		}
		&:active {
			background-color: #444444;
		}
	}
	ul > ul > li {
		font-weight: 400;
		font-size: 1.3rem;
		background-color: #2c2c2c;
	}
}

/*
   FIXME: Much of this remaining section needs cleanup. Vertical centering 
   within hidden panes needs these vcenter classes, and much of what follows that 
   is to allow these double-nested divs to center while still making the margins 
   happy properly.
*/

.vcenter-cont {
	display: table;
	height: 100%
}

.vcenter {
	display: table-cell;
    vertical-align: middle;
}

[data-tulito-class="hidden-pane"] p,
[data-tulito-class="hidden-pane"] ul
{
	margin: 20px;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	font-weight: 400;
	color: #eee;
}

[data-tulito-class="hidden-pane"] div
{
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	font-weight: 400;
	color: #eee;
}

.loader {
	position: absolute;
	z-index: 90;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 40px;
	line-height: @screenHeight;
	text-align: center;
	background-color: #fff;
	opacity: 0;
	display: none;
	transition: opacity 300ms;
	i {
		color: #333;
		opacity: 0.9;
		&.our-spin {
			-webkit-animation: spin 1.4s infinite linear;
		    -moz-animation: spin 1.4s infinite linear;
		    -o-animation: spin 1.4s infinite linear;
		    animation: spin 1.4s infinite linear;
		}
	}
	p {
		font-size: 13px;
		color: #333;
		opacity: 1;
		line-height: 16px;
	}
	&.shown {
		display: inline-block;
		&.opened {
			opacity: 0.8;
		}
	}
}

[data-tulito-id="info-pane"] {
	background-color: #3c723b;
	color: #000;
	opacity: 0.95;
	font-style: italic;
	line-height: 2em;
	border-right: solid 1px rgba(100,100,100,0.3);
	p.info {
		position: relative;
		color: #fff;
		top: 20%;
		margin-left: 10%;
		margin-right: 10%;
		width: 80%;
		font-size: 1.4em;
		letter-spacing: 0.05em;
	}
	[data-tulito-open="info-pane"] {
		position: absolute;
		bottom: 30%;
		right: 20%;
		background-color: #ddd;
		color: #444;
		width: 60px;
		font-style: normal;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-align: center;
		&:active {
			background-color: #ccc;
		}
		&.active {
			background-color: #ccc;
		}
		&.hidden {
			display: none;
		}
	}
}

.warning {
	display: none;
	z-index: 5000;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: #457a87;
	p {
		position: absolute;
		margin: 20% 10%;
		color: #fff;
		font-size: 1.4em;
		line-height: 1.5em;
	}
}
@media screen and (orientation: landscape) {
  .warning {
	 display: block;
  }
}

{'fraction_non_alphanumeric': 0.15915754203314786, 'fraction_numerical': 0.06150900496619398, 'mean_word_length': 2.9956968682763567, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3279415', 'n_tokens_mistral': 8497, 'n_tokens_neox': 7022, 'n_words': 1661}