MediaWiki:Chameleon.css: Difference between revisions
From CSDMS
No edit summary |
No edit summary |
||
| (228 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Top image */ | /* page titles */ | ||
.PageTitle { | |||
font-size: 36px; | |||
margin-top: 20px; | |||
margin-bottom: 0px; | |||
font-family: inherit; | |||
font-weight: 500; | |||
line-height: 1.1; | |||
color: inherit; | |||
margin: 0.67em 0; | |||
display: block; | |||
-webkit-margin-before: 0.67em; | |||
/* -webkit-margin-after: 0.67em;*/ | |||
-webkit-margin-start: 0; | |||
-webkit-margin-end: 0; | |||
/*font-weight: Bold;*/ | |||
} | |||
/* front page adjustments */ | |||
#event-image-container{ | |||
position: relative; | |||
} | |||
#event-image-container img{ | |||
width: 100%; | |||
height: auto; | |||
} | |||
#event-image-text{ | |||
z-index: 0; | |||
position: absolute; | |||
color: #0645AD; | |||
font-size: 36px; | |||
left: 10%; | |||
top: 20%; | |||
} | |||
#event-image-text a:hover{ | |||
text-decoration: none; | |||
} | |||
.come-in { | |||
transform: translateY(150px); | |||
animation: come-in 0.8s ease forwards; | |||
} | |||
.banner-box-2 a:hover{ | |||
text-decoration: none; | |||
} | |||
.AutoScaleImage img { | |||
max-width: 100%; | |||
height: auto; | |||
width: auto\9; /* ie8 */ | |||
} | |||
/*grey-out images unless hover over; height scales automatic with width. NOT USED ANYMORE AT THIS POINT*/ | |||
#grey-image{ | |||
position: relative; | |||
} | |||
#grey-image img{ | |||
width:100%; | |||
height:auto; | |||
opacity: 0.9; | |||
filter: alpha(opacity=90); | |||
-webkit-filter: grayscale(100%); | |||
filter: grayscale(100%); | |||
} | |||
#grey-image img:hover{ | |||
opacity: 1.0; | |||
-webkit-filter: grayscale(0%); | |||
filter: grayscale(0%); | |||
} | |||
#grey-image .tag { | |||
position: absolute; | |||
left: 80px; | |||
top: 30px; | |||
color: #FFFFFF; | |||
font-weight: bold; | |||
} | |||
/* Top banner image */ | |||
#mw-navigation { | #mw-navigation { | ||
background-image: url(skins/common/CSDMS_high_res1.png), url(skins/common/CSDMSbanner3.png); | background-image: url(skins/common/CSDMS_high_res1.png), url(skins/common/CSDMSbanner3.png); | ||
| Line 12: | Line 92: | ||
height:70px; | height:70px; | ||
} | } | ||
#mw-navigation:hover { | |||
background-image: url(skins/common/CSDMS_high_res2.png), url(skins/common/CSDMSbanner3.png); | |||
background-color: #333333; | |||
background-attachment: fixed; | |||
text-indent:-9999px; | |||
background-size: 241px 75px, 100%; | |||
/* background-position: 0% 0%, 50% -2em;*/ | |||
background-position: 0% 0%, 0% -0.5em; | |||
background-repeat: no-repeat; | |||
background-origin: content-box; | |||
height:70px; | |||
} | |||
#p-logo { | |||
background-position: 0.1em -0.1em; | |||
background-repeat: no-repeat; | |||
background-image: url(images/Home_icon2.png); | |||
background-size: 35px 32px; | |||
} | |||
#p-logo:hover { | |||
background-position: 0.1em -0.1em; | |||
background-repeat: no-repeat; | |||
background-image: url(skins/common/home_icon3.png); | |||
background-size: 35px 32px; | |||
} | |||
/* Make it possible to click on logo upper left corner, using fake text in Mediawiki:Secondary-menu */ | /* Make it possible to click on logo upper left corner, using fake text in Mediawiki:Secondary-menu */ | ||
/*#text-logo{ | /*#text-logo{ | ||
| Line 25: | Line 130: | ||
background-color:#E9E9E9; | background-color:#E9E9E9; | ||
} | } | ||
#content{ | #content{ | ||
background-color:#FFF; | background-color:#FFF; | ||
| Line 30: | Line 136: | ||
border-width: 1px; | border-width: 1px; | ||
border-color: #C0C0C0; | border-color: #C0C0C0; | ||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); | ||
} | } | ||
| Line 41: | Line 147: | ||
position:relative; | position:relative; | ||
bottom:0px; | bottom:0px; | ||
left:0; | |||
height:50%; | height:50%; | ||
min-height:150px; | min-height:150px; | ||
| Line 54: | Line 160: | ||
} | } | ||
/ | /*#footer-icons, #footer-info, #footer-places { | ||
// display:none; | // display:none; | ||
//} | //}*/ | ||
#footer-info{ display:none; } | #footer-info{ display:none; } | ||
#footer-icons img, #footer-icons img:link, #footer-icons img:visited { | #footer-icons img, #footer-icons img:link, #footer-icons img:visited { | ||
opacity: 0.9; | opacity: 0.9; | ||
filter: alpha(opacity=90); | /*filter: alpha(opacity=90);*/ | ||
-webkit-filter: grayscale(100%); | -webkit-filter: grayscale(100%); | ||
filter: grayscale(100%); | filter: grayscale(100%); | ||
| Line 69: | Line 175: | ||
-webkit-filter: grayscale(0%); | -webkit-filter: grayscale(0%); | ||
filter: grayscale(0%); | filter: grayscale(0%); | ||
} | |||
/* Remove padding from the front page edges */ | |||
body.page-Main_Page #content{ | |||
padding: 0px !important; | |||
} | |||
body.page-Main_Page .contentHeader{ | |||
margin: 0em 0 0em; | |||
} | |||
/* Set properties for 1st front page image */ | |||
#frontimage { | |||
display:block; | |||
width:100%; | |||
height: 450px; | |||
background-image: url(skins/common/test-image2.jpg); | |||
background-size: 100% 100%; | |||
background-position: 0% 0%; | |||
background-attachment: fixed; | |||
background-repeat: no-repeat; | |||
background-origin:content-box; | |||
text-align: center; | |||
color: #FFF; | |||
font-family:Georgia, serif; | |||
font-size:1.25em; | |||
font-style:italic; | |||
text-decoration: none; | |||
} | |||
#frontimage a:hover { | |||
text-decoration: none; | |||
} | |||
#frontimage-text a:hover { | |||
text-decoration: none; | |||
color: #FFF; | |||
} | |||
#frontimage-text a:link { | |||
text-decoration: none; | |||
color: #FFF; | |||
} | |||
#frontimage-text a:visited { | |||
text-decoration: none; | |||
color: #FFF; | |||
} | |||
ul, ol{ | |||
margin-bottom: 10px !important; | |||
} | |||
.stackem div { | |||
width: 100%; | |||
} | |||
.pr_container{ | |||
# border: 3px solid black; | |||
} | |||
.pr_event_name{ | |||
text-align: right; | |||
font-style: italic; | |||
# border: 3px solid blue; | |||
color: grey; | |||
} | |||
.pr_title{ | |||
# border: 3px solid green; | |||
font-weight: bold; | |||
color:#0084b4; | |||
font-size: 36px; | |||
} | |||
.pr_author{ | |||
# border: 3px solid blue; | |||
padding-bottom: 4px; | |||
font-size: 1.5em; | |||
} | |||
.pr_coauthor{ | |||
# border: 3px solid red; | |||
} | |||
.pr_abstract{ | |||
# border: 3px solid yellow; | |||
} | |||
.pr_youtube{ | |||
# border: 3px solid red; | |||
padding-top: 13px; | |||
} | |||
.pr_buttons{ | |||
padding-bottom: 2px; | |||
} | } | ||
Latest revision as of 07:37, 22 July 2019
/* page titles */
.PageTitle {
font-size: 36px;
margin-top: 20px;
margin-bottom: 0px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
margin: 0.67em 0;
display: block;
-webkit-margin-before: 0.67em;
/* -webkit-margin-after: 0.67em;*/
-webkit-margin-start: 0;
-webkit-margin-end: 0;
/*font-weight: Bold;*/
}
/* front page adjustments */
#event-image-container{
position: relative;
}
#event-image-container img{
width: 100%;
height: auto;
}
#event-image-text{
z-index: 0;
position: absolute;
color: #0645AD;
font-size: 36px;
left: 10%;
top: 20%;
}
#event-image-text a:hover{
text-decoration: none;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.banner-box-2 a:hover{
text-decoration: none;
}
.AutoScaleImage img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/*grey-out images unless hover over; height scales automatic with width. NOT USED ANYMORE AT THIS POINT*/
#grey-image{
position: relative;
}
#grey-image img{
width:100%;
height:auto;
opacity: 0.9;
filter: alpha(opacity=90);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#grey-image img:hover{
opacity: 1.0;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
#grey-image .tag {
position: absolute;
left: 80px;
top: 30px;
color: #FFFFFF;
font-weight: bold;
}
/* Top banner image */
#mw-navigation {
background-image: url(skins/common/CSDMS_high_res1.png), url(skins/common/CSDMSbanner3.png);
background-color: #333333;
background-attachment: fixed;
text-indent:-9999px;
background-size: 241px 75px, 100%;
// background-position: 0% 0%, 50% -2em;
background-position: 0% 0%, 0% -0.5em;
background-repeat: no-repeat;
background-origin: content-box;
height:70px;
}
#mw-navigation:hover {
background-image: url(skins/common/CSDMS_high_res2.png), url(skins/common/CSDMSbanner3.png);
background-color: #333333;
background-attachment: fixed;
text-indent:-9999px;
background-size: 241px 75px, 100%;
/* background-position: 0% 0%, 50% -2em;*/
background-position: 0% 0%, 0% -0.5em;
background-repeat: no-repeat;
background-origin: content-box;
height:70px;
}
#p-logo {
background-position: 0.1em -0.1em;
background-repeat: no-repeat;
background-image: url(images/Home_icon2.png);
background-size: 35px 32px;
}
#p-logo:hover {
background-position: 0.1em -0.1em;
background-repeat: no-repeat;
background-image: url(skins/common/home_icon3.png);
background-size: 35px 32px;
}
/* Make it possible to click on logo upper left corner, using fake text in Mediawiki:Secondary-menu */
/*#text-logo{
height:30px;
width: 100%;
// background-color:#dddddd;
filter:alpha(opacity=60);
opacity:0.6;
} */
/* Setting color for the entire background & text area */
body {
background-color:#E9E9E9;
}
#content{
background-color:#FFF;
border-style: solid;
border-width: 1px;
border-color: #C0C0C0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Bottom of the Page / Footers */
.BottomPage {
background-color:#222;
width:100%;
position:relative;
bottom:0px;
left:0;
height:50%;
min-height:150px;
padding:20px;
padding-top:0px;
}
.BottomPage a:link, .BottomPage a:visited {
color:#B9BFBF;
}
.BottomPage a:hover, .BottomPage a:active {
color:#FFF;
}
/*#footer-icons, #footer-info, #footer-places {
// display:none;
//}*/
#footer-info{ display:none; }
#footer-icons img, #footer-icons img:link, #footer-icons img:visited {
opacity: 0.9;
/*filter: alpha(opacity=90);*/
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#footer-icons img:hover, #footer-icons img:active {
opacity: 1.0;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
/* Remove padding from the front page edges */
body.page-Main_Page #content{
padding: 0px !important;
}
body.page-Main_Page .contentHeader{
margin: 0em 0 0em;
}
/* Set properties for 1st front page image */
#frontimage {
display:block;
width:100%;
height: 450px;
background-image: url(skins/common/test-image2.jpg);
background-size: 100% 100%;
background-position: 0% 0%;
background-attachment: fixed;
background-repeat: no-repeat;
background-origin:content-box;
text-align: center;
color: #FFF;
font-family:Georgia, serif;
font-size:1.25em;
font-style:italic;
text-decoration: none;
}
#frontimage a:hover {
text-decoration: none;
}
#frontimage-text a:hover {
text-decoration: none;
color: #FFF;
}
#frontimage-text a:link {
text-decoration: none;
color: #FFF;
}
#frontimage-text a:visited {
text-decoration: none;
color: #FFF;
}
ul, ol{
margin-bottom: 10px !important;
}
.stackem div {
width: 100%;
}
.pr_container{
# border: 3px solid black;
}
.pr_event_name{
text-align: right;
font-style: italic;
# border: 3px solid blue;
color: grey;
}
.pr_title{
# border: 3px solid green;
font-weight: bold;
color:#0084b4;
font-size: 36px;
}
.pr_author{
# border: 3px solid blue;
padding-bottom: 4px;
font-size: 1.5em;
}
.pr_coauthor{
# border: 3px solid red;
}
.pr_abstract{
# border: 3px solid yellow;
}
.pr_youtube{
# border: 3px solid red;
padding-top: 13px;
}
.pr_buttons{
padding-bottom: 2px;
}