ares-ide/lib/layout/panels/samples/PanelsFlickrSample.css

A browser-based code editor and UI designer for Enyo 2 projects

.panels-sample-flickr-panels {
	color: white;
	background: #555;
}
.panels-sample-flickr-panels > * {
	width: 320px;
	box-shadow: -4px 0px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: -4px 0px 4px rgba(0,0,0,0.3);
	-webkit-box-shadow: -4px 0px 4px rgba(0,0,0,0.3);
}
.panels-sample-flickr-item {
	position: relative;
	border-bottom: 1px solid #0E0E0E;
	padding: 12px 16px;
	background-color: #333333;
}

.panels-sample-flickr-item.onyx-selected {
	background-color: MidnightBlue;
}

.panels-sample-flickr-title {
	position: absolute;
	top: 40px;
	right: 0;
	left: 100px;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.panels-sample-flickr-thumbnail {
	width: 75px;
	height: 75px;
}
.panels-sample-flickr-more-button {
	color: white; margin: 10px;
}
.panels-sample-flickr-more-spinner {
	vertical-align: middle;
	margin: -4px 0 0 4px;
}
.panels-sample-flickr-center {
	margin: auto;
}
.panels-sample-flickr-main {
	background-color: #333;
}
.panels-sample-flickr-image {
	box-sizing: border-box;
	max-height: 90%;
	max-width: 90%;
	border: solid 5px #CCC;
	box-shadow: 1px 1px 5px #999;
	width: auto;
	height: auto;
}

.panels-sample-flickr-image.wide {
	width: 100%;
}


@media all and (max-width: 800px) {
	.panels-sample-flickr-image.wide {
		width: auto;
	}
}

.panels-sample-flickr-image.tall {
	height: 100%;
}