Mercurial > hg > fapweb
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; }