c3d2-web/content/static/style/default.css

1079 lines
20 KiB
CSS
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root {
--cms-text-size: 24px;
--cms-text-position-top: 253px;
--cms-text-position-left: 0px;
}
/* -- General -- */
html {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
}
pre {
border: thin dotted #ccc;
margin-left: 1em;
margin-right: 1em;
background-color: #fafafa;
padding: 1em;
}
#content img {
/* prevent overflow */
max-width: 33em;
}
/* -- Logo -- */
#logo::before {
margin-bottom: -20px;
height: 30px;
display: block;
border: none;
padding: 0;
line-height: 0.1em;
font-size: 1px;
}
#logo {
margin: 0;
padding: 35px 0 0;
background-image: url(../images/c3d2_blue.jpg);
text-align: left;
}
#logo > a {
display: block;
margin: 0 0 35px;
padding: 0;
}
#logo > a > h1 {
padding: 70px 0 0 0;
max-width: 960px;
margin: 0 auto;
overflow: hidden;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
height: 0px !important;
}
/* -- Navigation -- */
#navigation {
text-align: left;
margin: 0;
padding: 0 1em;
background-color: rgba(0, 0, 0, 0.7);
border-bottom: 3px solid black;
}
#navgroups {
display: block;
max-width: 960px;
margin: 0 auto;
}
#navigation ul {
display: inline-block;
list-style-type: none;
font-size: small;
margin: 0.5em 0;
padding: 0 5em 0 0;
vertical-align: top;
}
#navigation li {
line-height: 2em;
}
#navigation li:nth-child(7), #navigation li:nth-child(11) {
border-top: #ebc63c 1px solid;
margin-right: 2em;
}
#navigation a {
color: #ddd;
text-decoration: none;
}
#navigation a:hover {
color: white;
text-decoration: underline;
}
/* -- Content -- */
#content {
text-align: left;
line-height: 1.3em;
margin: 0 auto;
padding: 2em 0 4em;
min-height: 300px;
min-width: 30em;
max-width: 960px;
}
#content.portalcontainer {
max-width: inherit;
padding: 0 0 4em;
text-align: center;
}
#content p {
margin: 1.5em 1em;
}
#content a {
text-decoration: none;
border-bottom: #ebc63c 1px solid;
margin-bottom: 1px;
color: #555;
}
#content a:hover {
border-width: 2px;
margin-bottom: 0px;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5 {
letter-spacing: 3px;
margin: 0px;
background-color: transparent;
font-weight: bold;
}
#content h1 {
line-height: 1em;
}
#content h2 {
line-height: 1em;
font-size: 200%;
margin-bottom: 1em;
margin-top: 0px;
color: #333;
text-align: center;
}
#content h3 {
line-height: 1.3em;
font-size: 130%;
margin-top: 30px;
color: #555;
}
#content h4 {
font-size: 120%;
}
#content hr.news {
visibility: hidden;
/*clear: both;*/
}
#content div.news {
padding: 1em;
margin: 0;
margin-bottom: 0.5em;
}
.news_author {
font-size: small;
font-style: italic;
margin-left: 1em;
font-weight: bold;
}
#content h2.news, #content h3.news {
border-bottom: #ebc63c 3px solid;
padding: 0px;
line-height: 1.1em;
margin-bottom: 0px;
}
#content h3.news a {
border: none;
}
#content ul {
list-style-type: square;
list-style-image: url(../images/bullet.png);
}
#content li {
margin-top: .5em;
}
/* -- Comments -- */
div.comments > p:first-child {
padding: 1em 0 0;
/* like h2 */
font-size: 1.2em;
font-weight: bold;
color: #666;
}
div.comment {
border-bottom: #ccc 1.1px dashed !important;
border-top: #ccc 1.1px dashed !important;
padding: 1em 2em 1em !important;
margin: 0 -2em -1.1px;
}
div.comment .author {
font-weight: bold;
}
p.new_comment {
margin-bottom: 4em !important;
}
p.new_comment a:before {
content: url(../images/bullet.png);
padding-right: 4px;
}
/* -- footer -- */
#footer {
clear: both;
margin: 0 auto;
text-align: center;
font-size: small;
}
#footer ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#footer li {
display: inline-block;
list-style-type: none;
}
#footer li p {
margin: 0.5em 0;
}
#footer li a {
margin: 0 1em;
color: #676767;
text-decoration: none;
font-weight: bold;
}
#footer li a img {
border: none;
}
.hidden {
color: white;
font-size: xx-small;
clear: both;
}
#update {
font: xx-small sans-serif;
letter-spacing: 0.8px;
color: #666;
}
#footer #last-built {
font-size: 70%;
color: #777;
}
/* some little helpers */
img.left {
float: left;
margin-right: 1em;
}
img.right {
float: right;
margin-left: 1em;
}
dt {
font-weight: bold;
font-style: italic;
margin-left: 2em;
margin-top: 0.5em;
color: #555;
}
dt:after {
content: ":";
}
dl {
font-size: 90%;
margin-top: 2em;
margin-bottom: 3em;
display: inline-block;
}
dt.main {
font-style: normal;
font-size: 100%;
margin-left: 1em;
margin-top: 1em;
color: #000;
}
dt.main:after, dt.main:before {
content: "";
}
dd, dt {
font-size: 95%;
}
dd {
margin-left: 4em;
}
ul.details_event {
list-style-type: none;
}
abbr.dtstart, abbr.dtend {
border-bottom: none;
}
.spacestatus {
float: right;
padding: 0;
margin: 0 0 1em 0.5em;
width: 128px;
height: 128px;
}
.rightfilebox {
float: right;
background-color: #eee;
border-radius: 5px;
margin-left: 1em;
padding: 0 10px 30px;
}
.rightfilebox h3 {
text-align: center;
}
.rightfilebox .resource-meta {
display: none;
}
.rightfilebox ul {
padding-right: 2em;
}
/* -- Portal -- */
#portal {
white-space-collapsing: discard;
}
#portal article {
display: inline-block;
position: relative;
width: 14.5em;
height: 14.5em;
overflow: hidden;
text-align: left;
vertical-align: middle;
margin: 0.3em 0.15em 0;
padding: 0;
}
#portal article > a {
display: block;
border-bottom: none;
margin: 0;
padding: 0;
width: 14.5em;
height: 14.5em;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#portal article > a:hover {
margin: 0;
}
#portal h3, #portal .footer {
position: absolute;
left: 0;
right: 0;
height: 1.2em;
margin: 0;
padding: 0;
font-size: medium;
line-height: 1.2em;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 100;
background-color: rgba(0, 0, 0, 0.6);
color: white;
z-index: 2;
}
/* <header/> */
#portal h3 {
top: -1.3em;
transition: top 0.3s ease-out;
letter-spacing: 0;
}
#portal article:hover h3 {
top: 0;
transition: top 0.1s ease-in;
}
/* <footer/> */
#portal .footer {
bottom: -1.3em;
transition: bottom 0.3s ease-out;
letter-spacing: 0;
}
#portal article:hover .footer {
bottom: 0;
transition: bottom 0.1s ease-in;
}
/* <content-text/> */
#portal h4 {
position: absolute;
left: 0;
top: 1.2rem;
padding: 0.2em 0.1em;
line-height: 0.9em;
font-size: x-large;
font-weight: bold;
letter-spacing: 0;
color: #111;
text-shadow:
-1px 0 1px white, 0 1px 1px white,
1px 0 1px white, 0 -1px 1px white;
background-color: rgba(0, 0, 0, 0);
transition: all 0.3s ease-out;
}
#portal article.news:hover h4 {
color: white;
background-color: rgba(0, 0, 0, 0.6);
text-shadow: none;
transition: all 0.1s ease-in;
}
#portal .wiki {
background-color: #CFDFEF;
}
#portal .wiki h4 {
text-align: justify;
word-break: break-all;
}
#portal .wiki h4:before, #portal .wiki h4:after {
color: #999;
font-size: 120%;
}
#portal .wiki h4:before {
content: '[[';
}
#portal .wiki h4:after {
content: ']]';
}
#portal .space > a {
background: url(/status.png) 50% 50% no-repeat;
}
/* -- Upcoming, Chaosupdates -- */
#portal .upcoming h3 a, #portal .chaosupdates h3 a {
color: white;
}
#portal .upcoming ul, #portal .chaosupdates ul {
list-style-type: none;
font-size: small;
margin: 2em 0 0;
padding: 0 0 0 1.5em;
}
#portal .upcoming ul li, #portal .chaosupdates ul li {
line-height: 1.5em;
margin-top: .5em;
white-space: nowrap;
text-overflow: ellipsis;
}
/* -- Calendar -- */
table.calendar {
table-layout: fixed;
width: 99%;
border: 1px solid #ccc;
}
table.calendar th {
background: #DDD;
padding: .5em
}
table.calendar tr {
min-height: 5em;
}
table.calendar tr td {
border: none;
vertical-align: top;
background: #eee;
padding: .5em
}
.calendar a[data-before]:before{content:attr(data-before)"";}
/* styling active location.href.hash */
table.calendar tr td:target{
background: #bbb;
}
table.calendar tr td span.day {
font-size: 200%;
font-weight: bold;
}
td.calweek1 {
color: black;
}
td.calsun1 {
color: red;
}
td.calweek2 {
color: #6f6f6f;
}
td.calsun2 {
color: #ff6f6f;
}
td.calweek3 {
color: #bfbfbf;
}
td.calsun3 {
color: #ffbfbf;
}
table.calendar tr td ul {
font-size: 70%;
padding: 2px 0px;
margin: 0px;
}
table.calendar tr td ul li {
list-style-type: none;
list-style-image: none;
overflow: hidden;
line-height: 1.3em;
margin-top: 1.5em;
}
table.calendar tr td ul li a[href^="news/"] {
font-weight: bold;
}
.calendar .today {
background-color: #ebd16d;
-webkit-transition: background-color 2s linear;
-moz-transition: background-color 2s linear;
-o-transition: background-color 2s linear;
-ms-transition: background-color 2s linear;
transition: background-color 2s linear;
}
/* -- MIME Icons -- */
/* Icons from the Tango Project, http://art.gnome.org/themes/icon/1150 */
/* CSS Idea by Tigion, http://blog.tigion.de/2007/06/28/link-indication-der-kompromiss-des-linkbildes/ */
a.mime:before {
padding-right: 0.3em;
content: url(../images/mime/text.png);
text-align: right;
vertical-align: middle;
}
/* tab area */
.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 0px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; text-decoration: underline; }
.tabs:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.tab-boxes { position: relative; }
.tab-area div div { background: white; padding: 20px; position: absolute; top: 0; left: 0; }
.tab-area div div, .tabs li a { border: 1px solid #ccc; }
.tab-boxes .tab-box[id]:target { z-index: 1;}
/* video and maybe other caption and licenses */
a[rel='license']{
border: 0 !important;
}
.line-height-size {
height: 1em;
position: relative;
top: 0.1em;
}
.caption figcaption {
font-size:1.2em;
}
/* toggle content with css */
input.toggle {
position: absolute;
left: -9000px;
z-index: -9;
}
.toggle ~ .toggled {
display: none;
}
.toggle:checked ~ .toggled {
display: block;
}
a[href$=".pdf"].mime:before {
content: url(../images/mime/document.png);
}
a[href$=".ps"].mime:before {
content: url(../images/mime/document.png);
}
a[href$=".html"].mime:before {
content: url(../images/mime/document.png);
}
a[href$=".mp3"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".ogg"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".opus"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".m4a"].mime:before {
content: url(../images/mime/audio.png);
}
a[href$=".m3u"].mime:before {
content: url(../images/mime/playlist.png);
}
a[href$=".pls"].mime:before {
content: url(../images/mime/playlist.png);
}
a[href$=".svg"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".png"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".gif"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".jpg"].mime:before {
content: url(../images/mime/image.png);
}
a[href$=".avi"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mpg"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mpeg"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mov"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".wmv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".ogm"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mp4"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".mkv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".m4v"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".ogv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".webm"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".flv"].mime:before {
content: url(../images/mime/video.png);
}
a[href$=".tar"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tar.gz"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tgz"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tar.bz2"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".tbz"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".zip"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".rar"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".7z"].mime:before {
content: url(../images/mime/pkg.png);
}
a[href$=".torrent"].mime:before {
content: url(../images/mime/bittorrent.png);
}
a[href$="news-rss.xml"]:before, a[href$="news-atom.xml"]:before,
a[href$="podcast.xml"]:before, a[href$="pentaradio.xml"]:before,
a[href$="pentacast.xml"]:before, a[href$="pentamusic.xml"]:before,
a[href$="pentamedia.xml"]:before, a[href="pentacast-ogg.xml"]:before,
a[href$="-archiv.xml"]:before, a[href$="mitschnitte-rss.xml"]:before {
content: url(../images/mime/feed.png);
padding-right: 0.3em;
}
a[href$=".ics"]:before {
content: url(../images/mime/calendar.png);
padding-right: 0.3em;
}
a[href$="xcal.xml"]:before {
content: url(../images/mime/calendar.png);
padding-right: 0.3em;
}
#news h2 a:before {
content: url(../images/mime/feed.png);
padding-right: 0.3em;
}
li audio, li video, li .poster {
max-width: 100%;
margin: 0;
padding: 0;
color: #333;
background-color: white;
}
.play {
display: inline-block !important;
position: relative !important;
}
.play .postercaption {
position: absolute;
z-index: 10;
text-align: center;
right: 0;
left: 0;
top: 45%;
bottom: 45%;
font-size: 300%;
color: white;
text-shadow: #666 1px 1px 0;
font-weight: bold;
}
.play:hover .postercaption {
color: #ffff7f;
text-shadow: black 1px 1px 8.5px;
opacity: 0;
-webkit-transition: opacity 3s ease-in;
-moz-transition: opacity 3s ease-in;
-o-transition: opacity 3s ease-in;
-ms-transition: opacity 3s ease-in;
transition: opacity 3s ease-in;
}
.play {
cursor: pointer;
font-weight: bold;
}
/* -- green play button -- */
#content a.play.no-poster {
display: inline-block;
padding: 0.16em 0.8em 0.2em;
vertical-align: middle;
line-height: 1.3em;
height: 1.3em;
color: white;
font-weight: bold;
text-shadow: 0 -1px rgba(0, 0, 0, 0.55);
border: 1px solid rgba(0, 0, 0, 0.34);
border-bottom-color: rgba(0, 0, 0, 0.55);
background: #83AC35;
webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
moz-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
ms-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
o-box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,0 1.5px rgba(0,0,0,0.155),0 -0.65em rgba(0,0,0,0.15) inset;
webkit-border-radius: 3px;
moz-border-radius: 3px;
ms-border-radius: 3px;
o-border-radius: 3px;
border-radius: 3px;
}
#content a.play.no-poster:hover {
/* prevent default a:hover effect */
border: 1px solid #333;
margin-bottom: 1px;
text-shadow: 0 -1px black;
background: #639C15;
}
.video-resource {
vertical-align: top;
width: 48%;
margin: 1em auto;
display: inline-block;
text-align: center;
}
.video-resource.playing {
width: auto;
}
.video-resource h4 {
line-height: 1em;
height: 2em;
vertical-align: bottom;
}
.video-resource img {
max-width: 95%;
}
.video-resource ul {
padding: 0;
font-size: small;
}
.video-resource ul li.play-resource {
display: block;
}
.video-resource ul li {
display: inline-block;
margin: 0 0.8em;
}
.video-resource .size {
margin-left: 0.4em;
font-size: smaller;
color: #333;
}
.video-resource .torrent {
margin-left: 0.4em;
font-size: smaller;
}
.chapters {
margin: 0.5em auto;
}
.chapters dt, .chapters dd {
line-height: 2em;
margin: 0;
padding: 0;
}
.chapters dt {
width: 8em;
text-align: right;
margin-bottom: -2em;
}
.chapters dt:after {
content: '';
}
.chapters dd {
margin-left: 10em;
}
p.blockquote {
padding: .5em .5em .5em 2em;
border-left: 20px solid #eee;
background-color: #fafafa;
}
blockquote {
padding: .5em .5em .5em 2.5em;
border-left: 20px solid #eee;
background-color: #fafafa;
}
blockquote:before {
content: '“';
display: block;
float: left;
margin-top: 0.5em;
text-indent: -0.4em;
font-size: 800%;
font-family: serif;
font-style: italic;
color: #ddd;
}
/* CSS reset for deficient HTML5 support */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
p.center {
text-align: center;
}
.hidden[aria-hidden] {
display: none;
}
.qrcode {
display: inline-block;
width: 245px;
height: 245px;
}
.inline-block {
display: inline-block;
}
h3 + div {
margin-top: 1ex;
}
.figcaption {
width: 80%;
margin: 0 10%;
text-align: center;
border: 1px solid grey;
border-radius: 1.5ex;
}
#paypal-button {
margin: 1ex;
}
.calweek {
float: right;
color: #f99;
}
.membership-form {
margin: 1em 2em;
padding: 0.5em 1em;
width: 40em;
background-color: #ffffe0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#content .membership-form h3 {
margin: 1rem 0.5rem;
}
#content .membership-form p {
margin: 0.5rem 0.5rem 0;
}
#content .membership-form p.indented {
margin-left: 2rem;
}
.membership-form label {
padding-right: 1rem;
}
.membership-form input[type=text], .membership-form textarea {
margin: 0.5rem 0 0;
width: 100%;
font-family: monospace;
font-size: 110%;
background-color: white;
color: #333;
border: none;
border-bottom: 1px solid black;
}
.membership-form input[type=text] {
height: 2em;
}
#content .membership-form p.desc {
margin: 0 0.5rem 0;
font-size: 70%;
}
.membership-form #ok {
background-color: white;
color: #333;
cursor: pointer;
font-weight: bold;
padding: 0.2rem 0.5rem;
border-radius: 2px;
border: 1px solid black;
}
.cms-print-text-container {
position: absolute;
width: 400px;
height: 200px;
}
/* sorry, I tried but I couldn't get it to work without copying everything for each text */
.cms-print-text-1 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 0s;
}
.cms-print-text-2 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 2s;
}
.cms-print-text-3 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 4s;
}
.cms-print-text-4 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 6s;
}
@keyframes cmsPrintTextAnimation {
0%, 25%, 100% {
opacity: 0;
}
8%, 16% {
opacity: 1;
}
}
.cms