view examples/css/main.css @ 829:c2839190ca54

Update example CSS files.
author Matti Hamalainen <ccr@tnsp.org>
date Tue, 25 Nov 2014 09:56:03 +0200
parents 392d0fd006cd
children
line wrap: on
line source

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 300;
	src: local('Oswald Light'), local('Oswald-Light'), url(oswald.ttf) format('truetype');
}

html {
	-webkit-backface-visibility: hidden;
}

body {
	font-family: 'Oswald', sans-serif;
	background: #ea0;
	margin: 0;
	padding: 0;
}

li {
	margin-top: 0.5em;
}

img {
	border: none;
}

a:hover {
	text-decoration: underline;
	text-shadow: 2px 2px 3px black;
}

a:active, a:focus {
	outline: none;
}

a, a:visited, a:active {
	text-decoration: underline;
	text-shadow: 1px 1px 1px black;
	color: white;
}

#mainContent h1, #mainContent h2 {
	margin: 0em;
	margin-top: 1em;
	padding: 0.1em;
	padding-left: 1em;
	background: #d90;
	border-top: 2px solid #a70;
	border-bottom: 2px solid #fda;
}


#mainContent h1 {
	margin: 0em;
	background: #505;
	color: white;
}


/*
 * News
 */
div.newsItem {
}


div.newsText {
	margin-top: 0.5em;
	margin-left: 1.5em;
	margin-right: 1.5em;
	margin-bottom: 0.25em;
	border-bottom: 1px dotted black;
}

div.newsAuthor {
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: right;
}

span.newsSig {
	display: none;
}

span.newsDate {
	margin-left: 1em;
}



/*
 * Attendees
 */
table.attendees, table.vote {
	width: 100%;
}

table td, table th {
	border-radius: 2pt;
	overflow-x: hidden;
}

table th {
	background: #a04;
}

table.attendees .regtime {
	width: 15%;
}

table.attendees .oneliner  {
	width: 50%;
}

table.attendees .name {
	width: 15%;
}

table.attendees .groups {
	width: 15%;
}

table.attendees th.rname {
	width: 15%;
}

tr.rodd td {
	background: #d70;
	border-radius: 2pt;
}

tr.reven td {
	background: #c60;
}


/*
 * Voting
 */
div.voteControls {
	text-align: center;
	padding: 1em;
}

div.voteLogin {
	padding: 1em;
}

table.vote th {
	color: white;
	text-shadow: 2px 2px 1px black;
	font-size: 1.1em;
}

table.vote {
	padding-top: 1em;
}

table.vote tr:hover td {
	border: 2px dashed black;
	transition: all 0.3s;
}

table.vote tr td {
	border: 2px solid rgba(0,0,0,0);
	transition: all 0.3s;
}

table.vote th.vvalue {
	width: 1%;
	min-width: 2.5em;
}

table.vote td.vvalue {
	text-align: center;
}

table.vote td.vshown {
	text-align: center;
	width: 3em;
}

table.vote th.vcompo {
	font-size: 1.25em;
}

table.vote td.ventry {
	font-size: 1.1em;
	padding: 0.2em;
}

div.vpreview {
	display: inline-block;
	vertical-align: middle;
}

div.vinfo {
	padding-left: 1em;
	padding-right: 1em;
}

img.imagePreview {
	border: 2px solid black;
}


div.vinfo {
	display: inline-block;
}

div.vinfo span.vtitle, div.vinfo span.vauthor {
	font-size: 1.1em;
	font-weight: bold;
}

div.vinfo span.vby {
	margin-left: 1em;
	margin-right: 1em;
}


table.vote * input[type="radio"] {
	display: none;
}

table.vote * input[type="radio"] + label:before {
	content: "\0000a0";
	display: inline-block;
	color: black;
	font-size: 2em;
	background: black;
	width: 100%;
}

table.vote * input[type="radio"]:checked + label:before {
	content: "X";
	display: inline-block;
	color: #0f0;
	font-weight: bold;
	font-size: 2em;
}


/*
 * Generic controls
 */
input[type="submit"] {
	background: #ec0;
	border: 1px solid #fe0;

	margin: 0.5em;
	padding: 0.5em;
	border-radius: 0.3em;
	box-shadow: 0px 0px 6px #000;
}

input[type="submit"]:hover {
	background: #0c0;
	border: 1px solid #0f0;
}


/*
 * Main menu
 */
#menu {
	z-index: 15;
	position: absolute;
	top: 0;
	left: 0.5em;
	right: 15em;

	transform: skewX(-10deg);
	vertical-align: top;
}

#menuLogo {
	position: relative;
	display: inline-block;
	font-size: 2.3em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: center;
	background: #040;

	text-shadow: 0px 0px 6px #0f0, -1px -1px 6px #0f0, 1px 1px 6px #0f0;

	border-bottom-right-radius: 0.2em;
	border-bottom-left-radius: 0.2em;
}


#menuInner {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 9em;
	right: 0;
	height: auto;
	
	vertical-align: top;

	font-size: 1.15em;
	text-shadow: 0px 0px 3px #0f0;
}

#menuInner a {
	display: inline-block;
	vertical-align: top;
	width: 4em;
	margin: 0;
	padding: 0.1em;

	text-decoration: none;
	background: #960C85;
	color: #fff;

	text-shadow: 0px 0px 1px #ccc;
	border-bottom: 2px solid #760C55;
	border-right: 2px solid #760C55;
	border-left: 1px solid #760C55;

	border-bottom-right-radius: 0.2em;
	border-bottom-left-radius: 0.2em;

	transition: all 0.2s;
}

#menuInner a:hover {
	background: #5F004F;
	color: #fff;
	text-shadow: 0px 0px 3px #fff;
	border-bottom: 2px solid #460C25;
	border-right: 2px solid #460C25;
	border-left: 1px solid #460C25;
}

#menuInner a.active {
	background: #f6850C;
	border-bottom: 2px solid #d6650c;
	border-right: 2px solid #d6650c;
	border-left: 1px solid #d6650c;
}

#menuInner a.active:hover {
	background: #b6450c;
	color: #fff;
	text-shadow: 0px 0px 3px #fff;
	border-bottom: 2px solid #460C25;
	border-right: 2px solid #460C25;
	border-left: 1px solid #460C25;
}


/*
 * Message and image preview boxes
 */
#messageBox {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: none;
}

#messageBox div.messageBoxControls {
	text-align: right;
}

#messageBox > div {
	position: absolute;
	z-index: 62;
	padding: 0.5em;
	border-radius: 0.5em;
}

#messageBox div.messageBoxInner {
	top: 2em;
	left: 2em;
	min-width: 50%;
	height: auto;
	background: #080;
	border: 2px solid black;
	color: white;
}

#messageBox div.imageBoxInner {
	top: 2em;
	left: 2em;
	background: #444;
	border: 2px solid black;
}

#messageBox div.imageBoxInner img {
	position: relative;
}


/*
 * Miscellaneous
 */
div.reglink {
	text-align: center;
	padding: 0.5em;
	font-size: 1.25em;
	color: red;
	border: 0.2em solid black;
	background: #fc0;
	margin: 0.5em;
	border-radius: 0.5em;
	text-shadow: 1px 1px 1px black;
}

.notice {
	color: red;
	text-shadow: 1px 1px 1px #000;
	font-size: 1.25em;
}

div.notice {
	text-align: center;
	padding: 1em;
}

.quote {
	font-size: 1.5em;
	color: #0f0;
	text-shadow: 2px 2px 3px #0f0;
}

.overbooked {
	color: red;
}

div.moreNews {
	padding: 1em;
	font-size: 1.5em;
	text-align: right;
}