savegame-editor.css

/* Savegame Editor CSS template by Marc Robledo v20170504 */
/* minify at https://cssminifier.com/ + https://www.base64-image.de/ (sprites */

/* @FONT-FACES */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,800');


body{
	margin:0;
	font:14px 'Open Sans',sans-serif;
	cursor:default;
	margin:120px 0 40px;
	background-color:#141518;
	color:#f2f2f2
}

/* flex box */
.row{
	display:flex;
	flex-flow:row wrap; /* this is the same as flex-direction:row;flex-wrap:wrap; */
	align-items:center; /* vertical align */
	justify-content:space-between
}
.columns.c1,.columns.one{width:7.33333%}
.columns.c2,.columns.two{width:15.66667%}
.columns.c3,.columns.three{width:24%}
.columns.c4,.columns.four{width:32.33333%}
.columns.c5,.columns.five{width:40.66667%}
.columns.c6,.columns.six{width:49%}
.columns.c7,.columns.seven{width:57.33333%}
.columns.c8,.columns.eight{width:65.66667%}
.columns.c9,.columns.nine{width:74%}
.columns.c10,.columns.ten{width:82.33333%}
.columns.c11,.columns.eleven{width:90.66667%}
.columns.c12,.columns.twelve{width:99%}
#the-editor .columns{margin-bottom:3px}


.container{background-color:#2c2f34;padding:15px;color:#f2f2f2;border-radius:5px;}
.container.orange{border-top:2px solid #feb806}
.container.green{border-top:2px solid #9ac430}
.container.red{border-top:2px solid #fe5d05}

/* useful classes */
.help:hover{cursor:help}
.hidden{display:none}
.mono{font-family:monospace;color:#888}
.clickable{cursor:pointer} /* also Safari iOS fix for clickable elements */
.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-justify{text-align:justify}
.round{border-radius:3px}
/* colors */
.bg-light-gray{background-color:rgba(216,216,216,.99)}
.bg-mid-gray{background-color:rgba(144,144,144,.99);color:white}
.bg-dark-gray{background-color:rgba(72,72,72,.99);color:white}
.bg-red{background-color:#e74c3c}
.bg-orange{background-color:#f39c12}
.bg-blue{background-color:#3498db}
.bg-green{background-color:#25ba84}
.fnt-white{color:white}
.fnt-light-gray{color:#d8d8d8}
.fnt-mid-gray{color:#909090}
.fnt-dark-gray{color:#48484}
.fnt-red{color:#e74c3c}
/*.fnt-red{color:#fe5d05}*/
.fnt-orange{color:#f39c12}
/*.fnt-orange{color:#feb806}*/
.fnt-blue{color:#3498db}
.fnt-green{color:#25ba84}
/*.fnt-green{color:#9ac430}*/
.border-white{border-color:white}
.border-light-gray{border-color:#d8d8d8}
.border-mid-gray{border-color:#909090}
.border-dark-gray{border-color:#48484}

/* Icons */
i.icon{
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAAkCAYAAAApQLALAAAFm0lEQVR42u2cf2hWVRjHX+d0ldbyj4JSKwOzFKeMHGQhFBREU8KgENLWD6KCoh+QxRAjo/qjKCL7SVk6SoVgJNjW0n4IlUGtsloZlNF01rJXKzZfy92+D3suPHu4977n3t079r73OfDB+Z5z7r3vPZ+de85zzl3B87yCYVQq/g9ewn+rmbfAf+C3GHUmgpWgExT5Ph0GXeAGUGvSZSNwFshUKTfkWlAPJoPv+NqP82eTWM6akLpzQLcXnb4G83Iu3WrwOTgtZr3zwc9gVVQPHEfO8Spw1Dmj8h7gPLpJB9X1/wX28M+vBUhM8vZ7bulQjiVeK+5Dd8y6G7gePRWvr+YeOOy8UddzCvjTUcAS9wZy2KB73i9BM5gFloAOlf8N9+jjXbg02+8RdQ/WONY7B7wNZoDtXPeXau6Bg87tci1rVbkfwEbwmfr8WVVvpco/AE4Fi8EmcBXL+q0qd2OFyOvShtPBCSF5E8AT6lgPOl7DuWCfGH6RxG1gYRY9cJyURX2X44WVbVCitnHP6ue3irwfwQUir1OdYys3Wg//fzeXe1WV60p4H8aiB41z7kt5wkrf5ySVR0OtF0T9IXCX4zWcB35V5+8sF4UYTQ883gSO8xTQ6cyA6EJ/yPGK6vN/ubfwOO9iMC2gMYopCZRGDzqaX6Be9Ut5ouh5X1Ty3uF4DTSn2K/O26eGbtYDh5Qd4iiELrM35Fhh6Sho5Nn2Fwm+R5ryZjmUa+SJqZ/e4znFK+Izmnjd4ni82QHy/g7musSB8zoGforjvX66LmCIcVzk74zogf20nfN3hOQXMxoCjPaXP0n9RjUJPqqeSCtiyKufVH+ABXmKAyeJQhR4YuGnv8E9oInjjr1qklYn6nWFNDTNlO/m3ico7aigCZxLOy7iRRuZjoFrYox5ewPkXRhnJS7PceAtjsOXIofH/HqrQsp9yuPfn0Lyb6qiKIRPk+iJKdx4dYxFiqBhQ4OtxLlBYa5djgIPqUdirZi0eWqYMVtEI2TqCRlnV0McuJGfPs0x6uiFI5owz7e9EPGYysOB1dyryjFxOzfIV+D2gLpz1USmXA/eUIX3L63Orj9qzDuWPXCls1nc1PkinBZWfh6vsEWlHpM3UuCyY14TOPuhSAv35HI3Gk3Ybq6QYUPF70ajMcxzvBtrgPmeg9JNGVzE/WCQG7uF9xG4JloVWy4mDa3WqPkVeAovdw6VmcC0caA6rYsYFMcngZ8B2xx5SQjsxx+tYXMoMMn7SYyej/Zz1vsH6Wu+hFgAOsAAOAI2g7PBDNAGDoNB0AUupDoBA/iWBF9ieYVFPIwMBH5DiEmB53c5DreboTDH+97whu+PxczcF5iE/Ad4iv2gN+BzEvkiE9hIQ+AlahdWuUovi/KXs8AfBEhajo9MYCMNgTeJxn/aodKjovybLHApgcDHTGAjDYH3iQna6Q6V6nmDhr/eTwL3JRD4oAlspCGwv3NoIEbFQ3LWDxkfTiDwYyawkYbAchvcGQ6VpomthUUWeBJojyHvO6AuQOBbE3yJFSZwvgX+UDT+OodKctvhLhFGI4m3OshLoteFhNG6wVne8KsoLkwXURETOKcC38kNv4f3bz7OEunCM1lwub/1PiEwUQtej5B3C4teCBE4jWQNmzOBp/BEjgReIwS90hv54p5OB/wVOSEwUQOeD5B3A5goy5rARloLGYt5SZfeIF0G7vVG/hmkOiVJiaUuBAhMTABPCnnXs9gFE9jIai/EFTwp28vjyqkib7IQ5AhYKg8SILDPOoo2hOWXEZj2hd7GkYkoOkxgE9iHohDrWZ6T1TbBft48MzPjV1c8vVQtuMwbfsPXp8bCaCbweH2BsN0h5msCm8AmsGECm8BGbgUupShwyRrVBB5rWr2Rf8klSmBaxl4kKKhXih6yRs0X/wMhEBsJUtVSfgAAAABJRU5ErkJggg==');
	background-position:0px 0px;
	display:inline-block;
	vertical-align:middle;
	width:16px;height:16px
}
i.icon.reset,i.icon.blank{background-position:-0px 0px}
i.icon.add,i.icon.plus{background-position:-16px 0px}
i.icon.remove,i.icon.minus{background-position:-32px 0px}
i.icon.close{background-position:-48px 0px}
i.icon.config,i.icon.settings{background-position:-64px 0px}
i.icon.help{background-position:-80px 0px}
i.icon.down{background-position:-96px 0px}
i.icon.up{background-position:-112px 0px}
i.icon.sort{background-position:-128px 0px}
i.icon.check,i.icon.accept,i.icon.save{background-position:-144px 0px}
i.icon.pencil,i.icon.edit{background-position:-160px 0px}
i.icon.github{background-position:0px -16px}
i.icon.heart{background-position:-16px -16px}
i.icon.disk{background-position:-32px -16px;width:20px;height:20px}














/* header+toolbar+footer */
#header{
	color:white;
	position:fixed;
	top:0;left:0;
	width:100%;
	z-index:100;
}
#header-top{
	background-color:#34373c;
	padding:15px 0
	/*background-color:rgba(37,103,150,.97);*/
}
#header h1 img{width:24px; vertical-align:middle}
#header h1{font-size:140%;margin:0;display:inline-block}
#header h1 small{color:#717377;font-size:60%}
#toolbar{margin-top:10px}


.header-buttons{
	font-size:85%
}
.header-buttons a{
	color:white;
	text-decoration:none;
	border-bottom:1px solid #5d5f63;
	margin-right:10px
}
.header-buttons a:hover{border-color:#41d5ff}






hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
h3{
	/*border-bottom:2px solid #888;*/
	font-size:13px;
	padding:10px 0;
	font-weight:normal;
	color:white;
	text-align:center;
	margin: 20px 0 0
}
h3:before,h3:after{
	content:"";
	display:inline-block;
	width:130px;
	height:1px;
	background-color:red;
	vertical-align:middle;
}
h3:before{
	margin-right:5px;
	background:linear-gradient(to right, transparent 0%,#818181 100%);
}
h3:after{
	margin-left:5px;
	background:linear-gradient(to left, transparent 0%,#818181 100%);
}

h3.red:before{background:linear-gradient(to right, transparent 0%,#e74c3c 100%)}
h3.red:after{background:linear-gradient(to left, transparent 0%,#e74c3c 100%)}
h3.orange:before{background:linear-gradient(to right, transparent 0%,#f39c12 100%)}
h3.orange:after{background:linear-gradient(to left, transparent 0%,#f39c12 100%)}
h3.blue:before{background:linear-gradient(to right, transparent 0%,#3498db 100%)}
h3.blue:after{background:linear-gradient(to left, transparent 0%,#3498db 100%)}
h3.green:before{background:linear-gradient(to right, transparent 0%,#25ba84 100%)}
h3.green:after{background:linear-gradient(to left, transparent 0%,#25ba84 100%)}




h4{}

table{width:100%}
tbody tr:nth-child(even){background-color:#f2f2f2}
th{background-color:#d4d4d4}




/* forms */
input[type=text],input[type=number],select{
	padding:6px 10px;
	outline:0;
	width:250px;
	max-width:90%;
	font:14px 'Open Sans', sans-serif;
	border:1px solid #191919;
	border-radius:4px;
	box-sizing:border-box;
	background-color:#191919;
	color:#f2f2f2;
	letter-spacing:.02em;
}
input[type=text]:hover,input[type=number]:hover,select:hover{
	background-color:#222;
}
input[type=text]:focus,input[type=number]:focus,select:focus{
	border-color:#41d5ff;
	box-shadow:#35a1c0 0 0 3px;
}
input[type=text].error,input[type=number].error,select.error{
	box-shadow:#f88 0 0 3px;
	border-color:red
}
input[type=text].small,input[type=number].small,select.small{width:70px}
input[type=text].medium,input[type=number].medium,select.medium{width:130px}
input[type=text].fw,input[type=number].fw,select.fw{width:100% !important;max-width:100% !important}



/* buttons */
button{
	font-family:inherit;
	font-size:100%;
	min-width:120px;
	border-radius:3px;border:0;

	padding:8px 16px;
	margin:0 5px;

	background-color:#4c4f53;
	color:white;

	transition:background-color .15s;

	box-sizing:border-box
}
button.small{
	min-width:1px
}
button:hover{
	cursor:pointer;
	background-color:#6e7177;
}
button:active{
	background-color:#47494f;
	transform:translateY(1px)
}
button:disabled{opacity:.35}
button.colored{color:white;background-color:#40a2c9}
button.colored:hover{background-color:#63bfe3}
button.close{color:white;background-color:#}
button.no-text.with-icon:before{margin-right:0px}













.wrapper{
	max-width:900px;
	margin:0 auto
}






/* drag and drop zone */
#dragzone{
	border:2px dashed #bbb;
	color:#bbb;
	text-align:center;
	border-radius:8px;
	position:relative;
	transition:all .2s;
	padding-bottom:20px;
	background-color:#222327;
	/*font-weight:bold;*/
}
.dragging-files #dragzone{
	border-color:#3498db;
	color:#3498db;
	background-color:#43454c;
}
#dragzone-message{
	font-size:180%;
	margin:128px 0;
	line-height:2
}
#demo{
	text-decoration:none;
	padding:4px 16px;
	border-radius:3px;
	clear:both;
	position:relative;
	top:80px;
}
#demo:hover{
	background-color:#bbb;
	color:#000
}

#warning{
	position:fixed;
	bottom:-80px;
	width:100%;
	background-color:#a30202;
	background-color:rgba(164,0,0,.96);
	color:white;
	transition:bottom .5s
}
#warning.visible{bottom:0px}
#warning:hover{background-color:#b31212}
#warning u{
	background-color:white;
	color:#b31212;
	text-decoration:none;
	padding:6px 16px;
	border-radius:3px;
	font-weight:bold
}






/* responsive */
@media only screen and (max-width:961px){
	.wrapper{max-width:auto; padding-left:10px;padding-right:10px;}
}
@media only screen and (max-width:721px){
	#header .columns-6,#header .columns.six{width:100%;text-align:center}
	#the-editor{font-size:13px}
	h3:before,h3:after{width:40px}
}
@media only screen and (max-width:481px){
	#the-editor{font-size:12px}
}






/* MarcDialogs */
#dialog-about{background-color:#ffd823}



.dialog-overlay,.dialog{visibility:hidden;opacity:0}
.dialog-overlay.active,.dialog.active{visibility:visible;opacity:1;transition-delay:0s}/* fixes fade-in/fade-out*/

.dialog-overlay{
	transition:visibility 0s .2s, opacity .2s;

	background-color:black;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";/* IE8 */
	background-color:rgba(0,0,0,.7)
}

.dialog{
	position:absolute;top:0;left:0; /* fix for reserved space */

	transform:translateY(-10px);
	transition:visibility 0s .2s, opacity .2s ease-in, transform .2s ease-in;

	background-color:#45484f;
	padding:15px;
	min-width:360px;
	max-width:80%;
	border-radius:4px;
	box-shadow:0 5px 15px 0 rgba(0,0,0,.5);
	line-height:1.8;
}
.dialog.active{transform:translateY(0px)}

.buttons{
	margin-top:20px;
	text-align:center
}