Difference between revisions of "Template:TU Darmstadt/CSS"

 
(95 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
 +
svg > text > tspan > a{
 +
color:#d4043bff;
 +
}
 +
/*object > #svgFlow > image{
 +
opacity:0.5;
 +
pointer-events:all;
 +
}
 +
object > #svgFlow > image:hover{
 +
opacity:1;
 +
pointer-events:all;
 +
cursor:pointer;
 +
}*/
 
/* austesten und später sortieren */
 
/* austesten und später sortieren */
−
#one .post-it p{
+
/*#one .post-it p{
−
font-size:20px;
+
font-size:1em;
 +
}*/
 +
#HQ_page table td{
 +
padding: 0.5em;
 +
}
 +
#HQ_page table.ref td{
 +
padding: 2px;
 
}
 
}
 
summary{
 
summary{
Line 67: Line 85:
 
.container figcaption{
 
.container figcaption{
 
font-size:10pt;
 
font-size:10pt;
 +
line-height: 1.5em;
 +
text-align: left;
 +
margin-top: 0.75em;
 
}
 
}
 
.info-follow{
 
.info-follow{
Line 77: Line 98:
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
−
.post-it {
+
.post-it{
 
background:#e4f1fe;  
 
background:#e4f1fe;  
 
padding:15px;
 
padding:15px;
 
color: #000;  
 
color: #000;  
−
width:70%;  
+
width:100%;  
  
 
-moz-transform: rotate(0deg);
 
-moz-transform: rotate(0deg);
Line 123: Line 144:
 
}
 
}
 
header.major p{
 
header.major p{
−
   font-size: 2em;
+
   font-size: 1em;
 
}
 
}
 
#header > header{
 
#header > header{
Line 240: Line 261:
 
}
 
}
 
.submenu a:hover {
 
.submenu a:hover {
−
     color: #ee7600;
+
     color: #orange;
 
}
 
}
 
.has_submenu a:hover{
 
.has_submenu a:hover{
Line 1,833: Line 1,854:
 
color: #d4043b !important;
 
color: #d4043b !important;
 
}
 
}
−
#header .nav-proj-drop a:hover {
+
 
 +
.container a {
 
border-bottom-color: transparent;
 
border-bottom-color: transparent;
−
color: #d4043b !important;
+
color: #005ba8 !important;
−
                        backgroundcolor:#edf1f5 !important;
+
 
}
 
}
−
/*a:hover {
+
         
 +
.container a:hover {
 
border-bottom-color: transparent;
 
border-bottom-color: transparent;
 
color: #d4043b !important;
 
color: #d4043b !important;
−
}*/
+
}
−
 
+
                .container a:active {
 +
border-bottom-color: transparent;
 +
color: #005ba8 !important;
 +
}
 
strong, b {
 
strong, b {
 
color: #777;
 
color: #777;
Line 1,870: Line 1,895:
  
 
h2 {
 
h2 {
−
font-size: 1.75em;
+
font-size: 2em;
 
line-height: 1.5em;
 
line-height: 1.5em;
 
}
 
}
  
 
h3 {
 
h3 {
−
font-size: 1.5em;
+
font-size: 1.75em;
 
line-height: 1.5em;
 
line-height: 1.5em;
 
}
 
}
  
 
h4 {
 
h4 {
−
font-size: 1em;
+
font-size: 1.5em;
 
line-height: 1.5em;
 
line-height: 1.5em;
 
}
 
}
  
 
h5 {
 
h5 {
−
font-size: 0.9em;
+
font-size: 1em;
 
line-height: 1.5em;
 
line-height: 1.5em;
 +
                margin-top:0.7em;
 +
                margin-bottom:0.3em;
 
}
 
}
  
Line 1,924: Line 1,951:
  
 
code {
 
code {
−
background: #555;
+
background: #ececec;
 
border-radius: 5px;
 
border-radius: 5px;
−
color: #fff;
+
color: #000;
 
font-family: "Source Code Pro", monospace;
 
font-family: "Source Code Pro", monospace;
 
font-size: 0.9em;
 
font-size: 0.9em;
Line 1,994: Line 2,021:
 
/*color: #4acaa8;*/
 
/*color: #4acaa8;*/
 
color: #d4043b;
 
color: #d4043b;
−
font-size: 2.5em;
+
font-size: 2em;
 
}
 
}
 +
 +
        header.major h2.projectTitle{
 +
        font-size:4.2em;
 +
        }
  
 
header.major h2 + p {
 
header.major h2 + p {
Line 2,004: Line 2,035:
 
}
 
}
 
                 header.major p{
 
                 header.major p{
−
                         font-size: 1.75em;
+
                         font-size: 1em;
 
                 }
 
                 }
  
Line 2,059: Line 2,090:
 
select:focus,
 
select:focus,
 
textarea:focus {
 
textarea:focus {
−
border-color: #d4043b;
+
border-color: #002d54;
 
}
 
}
  
Line 2,316: Line 2,347:
 
margin: 0 0 2.25em 0;
 
margin: 0 0 2.25em 0;
 
padding-left: 1em;
 
padding-left: 1em;
 +
}
 +
 +
#main ul {
 +
                font-size: 12pt;
 
}
 
}
  
Line 2,330: Line 2,365:
 
border-top: solid 2px #f4f4f4;
 
border-top: solid 2px #f4f4f4;
 
padding: 0.5em 0;
 
padding: 0.5em 0;
 +
                                font-size: 0.8em;
 
}
 
}
  
Line 2,470: Line 2,506:
 
-webkit-overflow-scrolling: touch;
 
-webkit-overflow-scrolling: touch;
 
overflow-x: auto;
 
overflow-x: auto;
−
                 font-size: 12pt;
+
                 /*font-size: 12pt;*/
 
}
 
}
  
Line 2,477: Line 2,513:
 
width: 100%;
 
width: 100%;
 
                 font-size: 12pt;
 
                 font-size: 12pt;
 +
}
 +
        table.ref {
 +
margin: 0 0 2.25em 0;
 +
width: 100%;
 +
                font-size: 8pt;
 
}
 
}
  
Line 2,500: Line 2,541:
 
text-align: left;
 
text-align: left;
 
}
 
}
 +
                table.ref th {
 +
color: #777;
 +
font-size: 8pt;
 +
font-weight: 700;
 +
padding: 0 0.75em 0.75em 0.75em;
 +
text-align: left;
 +
}
 +
                table.ref td{
 +
                        padding: 2px;
 +
                }
  
 
table thead {
 
table thead {
Line 2,663: Line 2,714:
 
input[type="button"].special:hover,
 
input[type="button"].special:hover,
 
.button.special:hover {
 
.button.special:hover {
−
background-color: #2a557a;
+
background-color: #d4043b;
 
}
 
}
  
Line 2,670: Line 2,721:
 
input[type="button"].special:active,
 
input[type="button"].special:active,
 
.button.special:active {
 
.button.special:active {
−
background-color: #2a557a;
+
background-color: #d4043b;
 
}
 
}
  
Line 2,804: Line 2,855:
 
bottom: 0;
 
bottom: 0;
 
left: 0;
 
left: 0;
−
padding: 2em;
+
padding: 2em 10%;
 
width: 100%;
 
width: 100%;
 
}
 
}
Line 2,837: Line 2,888:
 
}
 
}
  
−
#header > nav ul li a {
+
#header > nav ul .mainmenu li a {
 
-moz-transition: none;
 
-moz-transition: none;
 
-webkit-transition: none;
 
-webkit-transition: none;
Line 2,849: Line 2,900:
 
}
 
}
 
 
−
    #header > nav ul li a:hover {
+
    #header > nav ul .mainmenu li a:hover {
 
background: #fff;
 
background: #fff;
 
/*color: #4acaa8 !important;*/
 
/*color: #4acaa8 !important;*/
Line 2,856: Line 2,907:
 
}
 
}
  
−
#header > nav ul li a.active {
+
#header > nav ul .mainmenu li a.active {
 
background: #fff;
 
background: #fff;
 
/*color: #4acaa8 !important;*/
 
/*color: #4acaa8 !important;*/
 
color: #d4043b !important;
 
color: #d4043b !important;
 +
}
 +
 +
#header > nav ul .nav-proj-drop li a {
 +
-moz-transition: none;
 +
-webkit-transition: none;
 +
-ms-transition: none;
 +
transition: none;
 +
border: 0;
 +
color: #edf1f5 !important;
 +
display: block;
 +
padding: 0.3em 0;
 +
text-decoration: none;
 +
}
 +
 +
    #header > nav ul .nav-proj-drop li a:hover {
 +
background: #edf1f5;
 +
/*color: #4acaa8 !important;*/
 +
color: #005ba8 !important;
 +
                                                        text-decoration: none;                                   
 +
}
 +
 +
#header > nav ul .nav-proj-drop li a.active {
 +
background: #edf1f5;
 +
/*color: #4acaa8 !important;*/
 +
color: #005ba8 !important;
 
}
 
}
  
Line 2,890: Line 2,966:
  
 
#one:before {
 
#one:before {
−
background-image: url("https://static.igem.org/mediawiki/2017/9/92/Banner_prov.jpg");
+
/*background-image: url("https://static.igem.org/mediawiki/2017/9/92/Banner_prov.jpg");*/
 
background-position: top right;
 
background-position: top right;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
Line 2,896: Line 2,972:
 
content: '';
 
content: '';
 
display: block;
 
display: block;
−
height: 15em;
+
/*height: 10em;*/
 
width: 100%;
 
width: 100%;
 
}
 
}
Line 2,907: Line 2,983:
 
color: #c0c0c0;
 
color: #c0c0c0;
 
overflow: hidden;
 
overflow: hidden;
−
padding: 4em 0 2em 0;
+
padding: 0em 0 0em 0;
 +
 
 
}
 
}
 +
 +
        #footer p{
 +
                font-size:1em;
 +
        }
  
 
#footer .copyright {
 
#footer .copyright {
Line 2,943: Line 3,024:
 
font-size: 13pt;
 
font-size: 13pt;
 
}
 
}
 +
                        header.major h2.projectTitle{
 +
                        font-size:4.2em;
 +
                        }
  
 
/* Header */
 
/* Header */
Line 2,955: Line 3,039:
  
 
#header > footer {
 
#header > footer {
−
padding: 1.5em;
+
padding: 1.5em 10%;
 
}
 
}
  
Line 2,981: Line 3,065:
 
font-size: 11pt;
 
font-size: 11pt;
 
}
 
}
 +
                        header.major h2.projectTitle{
 +
                        font-size:4.2em;
 +
                        }
  
 
/* Header */
 
/* Header */
Line 3,013: Line 3,100:
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
 +
                        header.major h2.projectTitle{
 +
                        font-size:4em;
 +
                        }
  
 
/* Image */
 
/* Image */
Line 3,035: Line 3,125:
 
-ms-transition: -ms-transform 0.5s ease;
 
-ms-transition: -ms-transform 0.5s ease;
 
transition: transform 0.5s ease;
 
transition: transform 0.5s ease;
−
display: block;
+
/*display: block;*/
 
height: 100%;
 
height: 100%;
 
overflow-y: auto;
 
overflow-y: auto;
 
position: fixed;
 
position: fixed;
 
top: 0;
 
top: 0;
−
width: 40%;
+
width: 23em;
 
z-index: 10002;
 
z-index: 10002;
 
-moz-transform: translateX(23em);
 
-moz-transform: translateX(23em);
Line 3,094: Line 3,184:
 
position: fixed;
 
position: fixed;
 
top: 0;
 
top: 0;
 +
                                margin-top:18px;
 
width: 100%;
 
width: 100%;
 
z-index: 10001;
 
z-index: 10001;
Line 3,115: Line 3,206:
 
border: 0;
 
border: 0;
 
text-decoration: none;
 
text-decoration: none;
 +
                                                color: #fff !important;
 
}
 
}
  
Line 3,152: Line 3,244:
 
}
 
}
  
−
body.header-visible #wrapper, body.header-visible #titleBar {
+
/*body.header-visible #wrapper, body.header-visible #titleBar {
 
-moz-transform: translateX(-23em);
 
-moz-transform: translateX(-23em);
 
-webkit-transform: translateX(-23em);
 
-webkit-transform: translateX(-23em);
 
-ms-transform: translateX(-23em);
 
-ms-transform: translateX(-23em);
 
transform: translateX(-23em);
 
transform: translateX(-23em);
 +
}*/
 +
body.header-visible #wrapper {
 +
-moz-transform: translateX(-23em);
 +
-webkit-transform: translateX(-23em);
 +
-ms-transform: translateX(-23em);
 +
transform: translateX(-23em);
 +
}
 +
body.header-visible #titleBar {
 +
/*-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);*/
 +
-moz-transform: translateX(-23em);
 +
-webkit-transform: translateX(-23em);
 +
-ms-transform: translateX(-23em);
 +
transform: translateX(-23em);
 +
                                display: block;
 +
                                top: 17px;
 +
                                position: fixed;
 +
                                margin-top: 1px;
 
}
 
}
  
Line 3,164: Line 3,276:
 
-ms-transform: translateX(0);
 
-ms-transform: translateX(0);
 
transform: translateX(0);
 
transform: translateX(0);
 +
display: block;
 +
width: 23em;
 +
                                -moz-transition: -moz-transform 0.5s ease;
 +
-webkit-transition: -webkit-transform 0.5s ease;
 +
-ms-transition: -ms-transform 0.5s ease;
 +
transition: transform 0.5s ease;
 
}
 
}
  
Line 3,181: Line 3,299:
 
display: none;
 
display: none;
 
}
 
}
 +
 +
                        header.major h2.projectTitle{
 +
                        font-size:3em;
 +
                        }
  
 
h2 {
 
h2 {
Line 3,211: Line 3,333:
  
 
header.major h2 {
 
header.major h2 {
−
font-size: 2.5em;
+
font-size: 1.75em;
 
}
 
}
  
 
header.major h2 + p {
 
header.major h2 + p {
−
font-size: 1.5em;
+
font-size: 1em;
 
}
 
}
  
Line 3,235: Line 3,357:
  
 
#header {
 
#header {
−
width: 50%;
+
width: 17em;
 
-moz-transform: translateX(17em);
 
-moz-transform: translateX(17em);
 
-webkit-transform: translateX(17em);
 
-webkit-transform: translateX(17em);
 
-ms-transform: translateX(17em);
 
-ms-transform: translateX(17em);
 
transform: translateX(17em);
 
transform: translateX(17em);
 +
                                -moz-transition: -moz-transform 0.5s ease;
 +
-webkit-transition: -webkit-transform 0.5s ease;
 +
-ms-transition: -ms-transform 0.5s ease;
 +
transition: transform 0.5s ease;
 
right: 0;
 
right: 0;
 +
                                /*display:block;*/
 
}
 
}
  
Line 3,261: Line 3,388:
  
 
#header > footer {
 
#header > footer {
−
padding: 1.5em;
+
padding: 1.5em 10%;
 
}
 
}
  
Line 3,306: Line 3,433:
 
}
 
}
  
−
body.header-visible #wrapper, body.header-visible #titleBar {
+
/*body.header-visible #wrapper, body.header-visible #titleBar {
 +
-moz-transform: translateX(-17em);
 +
-webkit-transform: translateX(-17em);
 +
-ms-transform: translateX(-17em);
 +
transform: translateX(-17em);
 +
}*/
 +
body.header-visible #wrapper{
 
-moz-transform: translateX(-17em);
 
-moz-transform: translateX(-17em);
 
-webkit-transform: translateX(-17em);
 
-webkit-transform: translateX(-17em);
Line 3,312: Line 3,445:
 
transform: translateX(-17em);
 
transform: translateX(-17em);
 
}
 
}
 +
body.header-visible #titleBar {
 +
/*-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);*/
 +
-moz-transform: translateX(-17em);
 +
-webkit-transform: translateX(-17em);
 +
-ms-transform: translateX(-17em);
 +
transform: translateX(-17em);
 +
                                display: block;
 +
                                top: 17px;
 +
                                position: fixed;
 +
                                margin-top: 1px;
 +
}
 +
 +
                        body.header-visible #header{
 +
width: 17em;
 +
                                display:block;
 +
                                -moz-transition: -moz-transform 0.5s ease;
 +
-webkit-transition: -webkit-transform 0.5s ease;
 +
-ms-transition: -ms-transform 0.5s ease;
 +
transition: transform 0.5s ease;
 +
                        }
  
 
}
 
}
Line 3,328: Line 3,484:
 
font-size: 12pt;
 
font-size: 12pt;
 
}
 
}
 +
 +
                        header.major h2.projectTitle{
 +
                        font-size:2.5em;
 +
                        }
  
 
/* List */
 
/* List */
Line 3,376: Line 3,536:
 
padding: 0;
 
padding: 0;
 
                                 button:focus {outline:0;};
 
                                 button:focus {outline:0;};
 +
}
 +
 +
                /* Header */
 +
 +
#header {
 +
width: 12em;
 +
-moz-transform: translateX(12em);
 +
-webkit-transform: translateX(12em);
 +
-ms-transform: translateX(12em);
 +
transform: translateX(12em);
 +
                                -moz-transition: -moz-transform 0.5s ease;
 +
-webkit-transition: -webkit-transform 0.5s ease;
 +
-ms-transition: -ms-transform 0.5s ease;
 +
transition: transform 0.5s ease;
 +
right: 0;
 +
                                /*display:block;*/
 +
}
 +
 +
#header > header {
 +
padding: 1.5em 2% 0.75em 2%;
 +
}
 +
 +
#header > header .avatar {
 +
margin: 0 auto 0.75em auto;
 +
width: 75%;
 +
}
 +
 +
#header > header h1 {
 +
font-size: 1.5em;
 +
}
 +
 +
#header > header p {
 +
margin: 1em 0 0 0;
 +
}
 +
 +
#header > footer {
 +
padding: 1.5em 10%;
 +
}
 +
 +
                /* Off-Canvas Navigation */
 +
 +
#titleBar .toggle {
 +
height: 4em;
 +
width: 6em;
 +
}
 +
 +
#titleBar .toggle:before {
 +
font-size: 14px;
 +
width: 44px;
 +
}
 +
 +
/*body.header-visible #wrapper, body.header-visible #titleBar {
 +
-moz-transform: translateX(-12em);
 +
-webkit-transform: translateX(-12em);
 +
-ms-transform: translateX(-12em);
 +
transform: translateX(-12em);
 +
}*/
 +
body.header-visible #wrapper{
 +
-moz-transform: translateX(-12em);
 +
-webkit-transform: translateX(-12em);
 +
-ms-transform: translateX(-12em);
 +
transform: translateX(-12em);
 +
}
 +
                        body.header-visible #header{
 +
-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);
 +
                                -moz-transition: -moz-transform 0.5s ease;
 +
-webkit-transition: -webkit-transform 0.5s ease;
 +
-ms-transition: -ms-transform 0.5s ease;
 +
transition: transform 0.5s ease;
 +
                                display: block;
 +
width: 12em;
 +
}
 +
body.header-visible #titleBar {
 +
/*-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);*/
 +
-moz-transform: translateX(-12em);
 +
-webkit-transform: translateX(-12em);
 +
-ms-transform: translateX(-12em);
 +
transform: translateX(-12em);
 +
                                display: block;
 +
                                top: 17px;
 +
                                position: fixed;
 +
                                margin-top: 1px;
 
}
 
}
  

Latest revision as of 22:08, 31 October 2017