retroarch-playlist-editor.css

/* classes */
.text-right{text-align:right}
.hidden{display:none}
.clickable:hover{cursor:pointer;text-decoration:underline}
.editable:hover{cursor:text;text-decoration:underline}
.text-ellipsis{/*white-space:nowrap;*/overflow:hidden;text-overflow:ellipsis}

.unselectable{-moz-user-select:none;-webkit-user-select: none;-ms-user-select:none;-o-user-select:none;user-select:none}


body{
	font:15px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	background-color:#e2e3de;
	margin:0;
	color:black;
	cursor:default;
}




span.icon{
	display:inline-block;
	width:16px;
	height:16px;
	vertical-align:middle;
	background-image:url('icons.png');
	background-size: 144px 16px;
}
.icon.donate{background-position: -16px}
.icon.select{background-position: -32px}
.icon.selectall{background-position: -48px}
.icon.add{background-position: -64px}
.icon.save{background-position: -80px}
.icon.edit{background-position: -96px}
.icon.trash{background-position: -112px}
.icon.tweak{background-position: -128px}


button,input,select{
	font-family:inherit;
	font-size:inherit;
	box-sizing:border-box;
}
button{
	font-size:95%;
	background-color:#eee;
	border:none;
	border-radius:2px;
	padding: 5px 8px;
}
button:hover{
	background-color:#ddd;
	cursor:pointer;
}
button:disabled{opacity:.35}
button.colored{background-color:#2663d2;color:white}
button.colored:hover{background-color:#3673e2}

#main-panel{
	overflow:hidden
}
#table-panel{
	height:100%;
	overflow-y:scroll
}

h1{
	margin:0;
	padding:12px 20px;
	font-size:135%;
	font-weight:normal;
	color:white;
}
h1 small{font-size:70%;color:#777;display:none}
h1:hover small{display:inline}
h1 img{
	max-width:32px;
	vertical-align: middle;
	margin-right:8px;
}
#topright{
	position:absolute;
	top:10px;right:10px;
	font-size:90%
}
h2{
	font-size:100%;
	font-weight:normal;
	display:inline-block;
}
h2 a{
	border-bottom: 1px solid #80a8f1;
	color:white;
	text-decoration:none;
}
#topright .extlink{
	border:none;
	padding: 10px 20px;
	border-radius: 3px;
	background-color:#383838;
	vertical-align:middle;
	color:white;
	text-decoration:none;
}
#topright .extlink:hover{
	background-color:#282828;
}
#topright .extlink.donate{
	background-color:#db3754;
}
#topright .extlink.donate:hover{
	background-color:#c9344e;
}
#topbar{
	background-color:#454545;
	color:#9d9d9d;
}
#toolbar{
	padding:10px;
}
#toolbar button{
	background-color:transparent;
	color:#fff;
	opacity:.25;
	transition: opacity .1s;
}
#toolbar button:hover,#toolbar button.active{
	opacity:1
}

#warning-core-path{
	color:red
}


#toolbar-right{
	visibility:hidden;
	float:right;
}







table{
	width:100%;
	border-collapse:collapse;
}



hr{
	margin:0;
	width:0px;
	height:20px;
	display:inline-block;
	border:none;
	border-right:1px solid black;
	vertical-align:middle;
}


td,th{
	padding: 7px;
}
th{
	font-size:80%;
	text-align:left;
	background-color:#fff;
	border-bottom:1px solid #e2e3de;
}
tbody tr:nth-child(odd){background-color:#fff}
tbody tr:nth-child(even){background-color:#fafafa}


tbody>*.row-selected:nth-child(odd){background-color:#de8c33;color:white}
tbody>*.row-selected:nth-child(even){background-color:#d58329;color:white}
tbody>*.row-focused{box-shadow: #ab6100 0 0 0 1px inset}

tr.row-over{
	background-color:#f3f3f3 !important;
}
tr.row-over-top{box-shadow: inset 0 2px 0px orange}
tr.row-over-bottom{box-shadow: inset 0 -2px 0px orange}

body.moving-rows{cursor:grabbing}
tbody.moving-rows .row-selected{background-color:#e1b889}




/*tbody tr.selected{background-color:#ffebd6;color:#b66d1e}*/
td:nth-child(2){
	font-size:80%;
	max-width:300px;
}
td:nth-child(4){
	font-family:monospace;
	font-size:90%;
}


#drop-message{
	text-align:center;
	border: 1px dotted #858683;
	border-radius:3px;
	padding: 20px;
	max-width:500px;
	margin: 60px auto;
}
#drop-message span{text-decoration:underline}
#drop-message span:hover{color:#de8c33}

tbody small{opacity:.6}











/* MarcDragAndDrop */
#drop-overlay{
	z-index: 9000;
	background: white; /* Old browsers */
	background: radial-gradient(ellipse at center, #fff 0%,transparent 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	padding:50px 0;
	font-size:22px;
	text-align: center;
	text-shadow: white 0 0 8px;
	opacity:0;
	visibility:hidden;
	transition: visibility .2s,opacity .2s;
}
#drop-overlay:before{
	content:"";
	display:block;
	height:40%
}
body.dragging-files #drop-overlay{visibility:visible;opacity:1;}
body.dragging-files #drop-message{visibility:hidden !important}


/* ballons */
.balloon{
	visibility:hidden;opacity:0;
	position:absolute;top:0;/* fix for reserved space */

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

	background-color:#454545;
	color:#9d9d9d;

	padding:18px;
	min-width:440px;
	max-width:85%;
	border-radius:2px;
	line-height:1.8;
	box-shadow: rgba(0,0,0,.3) 0 1px 2px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.balloon.open{visibility:visible;opacity:1;transform:translateY(0px);transition-delay:0s/* fixes fade-in/fade-out*/}
@media only screen and (max-width:480px){
	.balloon{min-width:auto}
}


/* arrow */
.balloon:before{width:0;height:0;position:absolute;content:"";

top:-8px;border-bottom:8px solid #454545;border-left:8px solid transparent;border-right:8px solid transparent
}

#balloon-save:before{left:10px}
#balloon-edit:before{right:10px}





.row-tweak-toggled{
	padding-left:30px;
}
.balloon label{
	font-weight:bold;
	font-size:80%;
}
.balloon input[type=text], .balloon select{
	background-color:#303030;
	border:0;
	color:#9a9a9a;
	padding: 6px 8px;
	width:100%;
}
.balloon input[type=text]:hover, .balloon select:hover{
	background-color:#282828;
}
.balloon input[type=text]:focus, .balloon select:focus{
	background-color:#232323;
	color:#fff;
}
.balloon button{min-width:120px}

.balloon input.full-width,.balloon select.full-width{width:100%}

/*input.transparent{
	padding:0;
	margin:-1px 0;
	background-color:inherit;
	color:inherit;
	border: 1px solid #e2e3de;
}*/


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