Difference between revisions of "MediaWiki:Chameleon.css"
From The Official Visionaire Studio: Adventure Game Engine Wiki
| Line 314: | Line 314: | ||
/* begin zebra tooltip css */ | /* begin zebra tooltip css */ | ||
| − | . | + | .tooltip, .arrow:after { |
| − | + | background: black; | |
| − | + | border: 2px solid white; | |
| − | |||
| − | |||
} | } | ||
| − | . | + | .tooltip { |
| − | + | pointer-events: none; | |
| − | + | opacity: 0; | |
| − | + | display: inline-block; | |
| − | + | position: absolute; | |
| − | + | padding: 10px 20px; | |
| − | + | color: white; | |
| − | + | border-radius: 20px; | |
| − | + | margin-top: 20px; | |
| − | + | text-align: center; | |
| − | + | font: bold 14px "Helvetica Neue", Sans-Serif; | |
| − | + | font-stretch: condensed; | |
| − | + | text-decoration: none; | |
| − | + | text-transform: uppercase; | |
| − | + | box-shadow: 0 0 7px black; | |
} | } | ||
| − | + | .arrow { | |
| − | . | + | width: 70px; |
| − | + | height: 16px; | |
| − | + | overflow: hidden; | |
| − | + | position: absolute; | |
| − | + | left: 50%; | |
| − | + | margin-left: -35px; | |
| − | + | bottom: -16px; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | .arrow:after { | |
| − | . | + | content: ""; |
| − | + | position: absolute; | |
| − | + | left: 20px; | |
| + | top: -20px; | ||
| + | width: 25px; | ||
| + | height: 25px; | ||
| + | -webkit-box-shadow: 6px 5px 9px -9px black, | ||
| + | 5px 6px 9px -9px black; | ||
| + | -moz-box-shadow: 6px 5px 9px -9px black, | ||
| + | 5px 6px 9px -9px black; | ||
| + | box-shadow: 6px 5px 9px -9px black, | ||
| + | 5px 6px 9px -9px black; | ||
| + | -webkit-transform: rotate(45deg); | ||
| + | -moz-transform: rotate(45deg); | ||
| + | -ms-transform: rotate(45deg); | ||
| + | -o-transform: rotate(45deg); | ||
} | } | ||
| − | + | .tooltip.active { | |
| − | . | + | opacity: 1; |
| − | + | margin-top: 5px; | |
| − | + | -webkit-transition: all 0.2s ease; | |
| − | + | -moz-transition: all 0.2s ease; | |
| − | + | -ms-transition: all 0.2s ease; | |
| − | + | -o-transition: all 0.2s ease; | |
| − | |||
| − | |||
} | } | ||
| − | + | .tooltip.out { | |
| − | . | + | opacity: 0; |
| − | + | margin-top: -20px; | |
} | } | ||
Revision as of 16:47, 18 January 2015
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
body{
background-image: url("http://wiki.visionaire-tracker.net/images/ftp/dark_bg.png");
background-repeat: repeat;
color: rgba(255, 255, 255, 0.6);
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
}
#content {
padding-top: 10px;
padding-bottom: 10px;
font-size: 17px;
}
#searchInput { width:180px !important; }
.p-logo, .navbar-brand {
border: none !important;
border-left: none !important;
}
.navbar-default .navbar-nav > li > a {
color: rgba(255, 255, 255, 0.8);
font-weight: 700;
font-size: 12px;
}
.navbar {
background-image: url("http://wiki.visionaire-tracker.net/images/ftp/dark_content.png");
-webkit-box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.5);
box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.5);
}
.navbar-default .navbar-nav > li > a:hover {
background: rgba(0,0,0,0.050);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > .active > a,
.navbar-default .dropdown-menu > .active > a:hover {
background-color: rgba(0,0,0,0.050);
}
.dropdown-menu {
background-image: url("http://wiki.visionaire-tracker.net/images/ftp/dark_content.png");
}
.tick {
background:url("http://wiki.visionaire-tracker.net/images/ftp/wiki_tick.png");
width:16px;
height:16px;
margin: 0 auto;
}
.cross {
background:url("http://wiki.visionaire-tracker.net/images/ftp/wiki_x.png");
width:16px;
height:16px;
margin: 0 auto;
}
/* table colors */
table.ts a, table.ex a, table.in a { text-decoration: none; font-weight: bold; }
table.ex th { font-size: 13px; }
table.ts, table.ex, table.in {
margin-top: 1em;
margin-bottom: 1em;
background: transparent;
border-collapse: separate;
border-spacing: 2px 2px;
/*font-weight: bold;*/
width: 100%;
}
table.ts td, table.ex td {
/*background: rgba(0, 0, 0, 0.1);*/
vertical-align: top;
padding: 5px;
font-size: 13px;
}
table.in td {
background: rgba(0, 0, 0, 0.1);
vertical-align: middle;
text-align: center;
padding: 5px;
/*font-size: 12px;*/
}
.i_arrow {
font-size:42px;
width: 5%;
}
.i_norm {
font-size: 24px;
width: 90%;
}
table.ex td {
font-size: 12px;
/* font-style: italic; */
}
table.ts th {
background: #5bc0de;
text-align:left;
padding: 5px;
color: rgba(0,0,0,0.7);
}
table.ts th a:link { color: rgba(0,0,0,0.7); }
table.ts th a:hover { color: rgba(0,0,0,0.9); }
table.ex th {
background: #454545;
text-align:left;
padding: 5px;
}
td.clickablecell a {
display:block;
width:100%;
height:100%;
}
.ftoc {
background: url("http://wiki.visionaire-tracker.net/images/ftp/dark_content.png");
background-repeat: repeat;
position: fixed;
left: -250px;
top: 50%;
margin-top: -200px;
width: 300px;
height: 400px;
overflow: auto;
padding: 5px;
font-size: 15px;
overflow: hidden;
z-index: 999;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.5);
box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.5);
}
.ftoc_content {
/*display:none;*/
left: -500px;
position:absolute;
}
/* .ftoc fix */
.ftoc h1, .ftoc h2, .ftoc h2, .ftoc h4, .ftoc h5, .ftoc h6 { color: rgba(255, 255, 255, 0.6);}
.mw-body .ftoc a { text-decoration: none; }
.mw-body .ftoc a:link { color: rgba(255, 255, 255, 0.6) !important; } /* normal unvisited links */
.mw-body .ftoc a:link:visited { color: rgba(255, 255, 255, 0.6) !important; } /* visited links */
.mw-body .ftoc a:link:active { color: rgba(255, 255, 255, 1) !important; } /* active links */
.mw-body .ftoc a:link.new { color: rgba(255, 0, 20, 0.8) !important; } /* new links */
.mw-body .ftoc a:link.new:hover { color: rgba(255, 0, 0, 1) !important; } /* new links hover */
.mw-body .ftoc a:link.interwiki { color: rgba(255, 255, 255, 0.6) !important; } /* interwiki links */
.mw-body .ftoc a:link.interwiki:hover { color: rgba(255, 255, 255, 1) !important; } /* interwiki links hover */
.mw-body .ftoc a:link.external { color: rgba(255, 255, 255, 0.6) !important; } /* external links */
.mw-body .ftoc a:link.external:hover { color: rgba(255, 255, 255, 1) !important; } /* external links */
.mw-body .ftoc a:link.stub { color: rgba(255, 255, 255, 1) !important; } /* hovered links */
.mw-body .ftoc a.mw-redirect {color: rgba(255, 255, 255, 0.6) !important;}
.mw-body .ftoc a.mw-redirect:hover {color: rgba(255, 255, 255, 1) !important;}
.mw-body .ftoc a:link {color: rgba(255, 255, 255, 0.6) !important;}
.mw-body .ftoc a:visited {color: rgba(255, 255, 255, 0.6) !important;}
.mw-body .ftoc a:hover {color: rgba(255, 255, 255, 1) !important;}
.mw-body .ftoc a:active {color: rgba(255, 255, 255, 1) !important;}
.mw-body .buy a:link:hover, .mw-body .download a:link:hover,
.mw-body .buy a:link.external:hover, .mw-body .download a:link.external:hover { color: #fff !important; }
@media screen and (min-width: 767px) {
.tt_div {
position: fixed;
top: 4px;
right: 310px;
height: 35px;
width: 35px;
z-index: 9999;
cursor: pointer;
opacity: 0.7;
}
}
@media screen and (max-width: 767px) {
.tt_div {
position: fixed;
top: 4px;
right: 60px;
height: 30px;
width: 30px;
z-index: 9999;
cursor: pointer;
opacity: 0.7;
}
}
.tt_div:hover {
opacity: 1;
}
.tt_div img {
height: 35px;
width: 35px;
}
.wikiEditor-ui, .wikiEditor-ui a, .wikiEditor-ui a:hover,
.wikiEditor-ui-toolbar, .wikiEditor-ui-toolbar a, .wikiEditor-ui-toolbar a:hover { color: black !important; }
.buy, .download, .buy_lrg, .download_lrg {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
background-color:#ffc477;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #eeb44f;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:12px 50px;
text-decoration:none;
text-align:center;
text-shadow:1px -1px 0px #cc9f52;
}
.buy:hover, .download:hover, .buy_lrg:hover, .download_lrg:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);
background-color:#fb9e25;
color: #fff;
}
.buy { width:49%; float:left; }
.download { width:49%; float:right; }
.buy_lrg { width:100%; float:left; }
.download_lrg { width:100%; float:right; }
.buy:active, .download:active, .buy_lrg:active, .download_lrg:active {
position:relative;
top:1px;
}
.orng-shdw {
color: rgba(255, 153, 0, 0.9);
}
.s15 { font-size: 15px; }
.s16 { font-size: 16px; }
.s17 { font-size: 17px; }
.s18 { font-size: 18px; }
.s19 { font-size: 19px; }
.s20 { font-size: 20px; }
.s24 { font-size: 24px; }
.cent { text-align: center; }
/*
#content img {
-webkit-box-shadow: 1px 0px 4px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 1px 0px 4px 0px rgba(50, 50, 50, 0.5);
box-shadow: 1px 0px 4px 0px rgba(50, 50, 50, 0.5);
}
*/
.paypal_btn {
position: absolute;
right: 50px;
top: 70px;
}
/* begin zebra tooltip css */
.tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position: absolute;
padding: 10px 20px;
color: white;
border-radius: 20px;
margin-top: 20px;
text-align: center;
font: bold 14px "Helvetica Neue", Sans-Serif;
font-stretch: condensed;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.tooltip.out {
opacity: 0;
margin-top: -20px;
}
