Kullanıcı:EpochFail/HAPPI.css
Görünüm
Bu sayfaya eklediğiniz kodlar hesabınızı tehlike altına sokacak kötü amaçlı içerik barındırabilir. Başka bir sayfada yer alan betikleri "mw.loader.load", "importScript" veya "iusc" gibi yöntemlerle kullanmadan önce, bu yöntemle içeriği başkaları tarafından kontrol edilebilecek uzaktaki bir betiği dinamik olarak yüklemiş olacağınızı bilmeniz gerekir. Sayfaya eklediğiniz kodun güvenli olup olmadığından emin değilseniz, Köy Çeşmesi'nde deneyimli kullanıcılara danışabilirsiniz. Kod, sayfa önizlemesinde de çalıştırılacaktır. |
.progressBar{
position: absolute;
width: 420px;
padding: 10px;
background: #ccccdd;
margin: 0px 5px 0px 0px;
z-index: 100;
font-size: 1.1em;
border: 2px dotted #7777dd;
}
.progressBar .name{
text-align: center;
background: #5555aa;
color: #fff;
font-weight: bold;
padding: 5px;
margin: 5px 0px;
}
.progressBar .status{
color: #000;
margin: 5px 0px;
}
.progressBar .barContainer{
position: relative;
height: 15px;
background: #eeeeff;
border: 2px solid #eeeeff;
text-align: center;
padding: 5px;
}
.progressBar .barContainer .bar{
float: left;
height: 15px;
background: #7777dd;
margin: 0px 0px;
padding: 0px;
}
.progressBar .barContainer .description{
position: absolute;
text-align: center;
height: 15px;
width: 400px;
left: 0px;
top: 0px;
padding: 5px;
z-index: 10;
color: #aaaaff;
}
#controlsWrapper{
float:right;
margin: 0px;
clear:both;
}
#controlsWrapper .toggleButton {
background:transparent;
border-width:0;
float:right;
overflow:visible;
padding:0px;
text-decoration:none;
font-family:sans-serif;
position:relative;
padding: 1ex;
}
#controlsWrapper .toggleButton:hover{
background:#ffffdd;
}
#controlsWrapper .toggleButton span {
display:block;
margin: 0px;
padding: 8px 0;
}
#controlsWrapper .toggleButton span span {
display:block;
border-width:1px 0;
padding: 8px 1em;
margin-top: -9px;
margin-bottom: -9px;
}
#controlsWrapper .toggleButton, input[type="reset"], input[type="button"], input[type="submit"] {
cursor:pointer;
line-height:normal;
text-align:left;
}
#controlsWrapper input.toggleButton:hover{
background-position:0 -60px;
color:#222;
text-decoration:none;
}
#controlsWrapper .disabled {
font-size:12px;
}
#controlsWrapper .disabled span {
background:#f7f1f1;
border-left:1px solid #e0dada;
border-right:1px solid #e0dada;
}
#controlsWrapper .disabled span span {
border-bottom:1px solid #e0dada;
border-top:1px solid #e0dada;
color: #777;
}
#controlsWrapper .disabled label{
color: gray;
}
#controlsWrapper .off {
color: #000;
}
#controlsWrapper .off span {
background:#f7f1f1;
border-left:1px solid #bbbbbb;
border-right:1px solid #aaaaaa;
}
#controlsWrapper .off span span {
border-bottom:1px solid #aaaaaa;
border-top:1px solid #bbbbbb;
}
#controlsWrapper .on{
font-weight:bold;
}
#controlsWrapper .on span {
background:#fffff1;
border-left:1px solid #bbbbbb;
border-right:1px solid #aaaaaa;
}
#controlsWrapper .on span span {
border-bottom:1px solid #aaaaaa;
border-top:1px solid #bbbbbb;
}
#controlsWrapper .doubleToggle{
float:right;
}
#controlsWrapper .doubleToggle .radio{
float: left;
padding: 12px 5px 0px 0px;
}
#controlsWrapper .server_status{
float:right;
padding: 8px 1em;
}
#controlsWrapper .server_status div{
width: 24px;
height: 24px;
background-image: url();
}
#controlsWrapper .server_status div.idle{
background-image: url(http://upload.wikimedia.org/wikipedia/en/a/a7/HAPPI_Loading.gif);
}
#controlsWrapper .server_status div.loading{
background-image: url(http://upload.wikimedia.org/wikipedia/en/a/a7/HAPPI_Loading.gif);
}
#controlsWrapper .server_status div.error{
background-image: url(http://upload.wikimedia.org/wikipedia/en/5/5b/HAPPI_Frown.png);
}
#controlsWrapper .server_status div.success{
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2f/HAPPI_Happy.png);
}
#controlsWrapper .server_status div.long{
background-image: url(http://upload.wikimedia.org/wikipedia/en/d/d5/HAPPI_Clock.png);
}
#consoleWrapper{
width: 250px;
height: 100px;
float: right;
background: #ddd;
border: 1px dotted black;
padding: 5px;
overflow: auto;
}
#consoleWrapper div .prefix{
font-weight: bold;
color: darkgrey;
}
#consoleWrapper div.error{
font-weight: bold;
color: #990000;
}
#legendWrapper{
float: right;
margin-right: 10px;
padding: 2ex;
}
#legendWrapper .legend{
z-index: 0;
}
#legendWrapper .legend span{
margin: 1px;
border: 1px solid #aaaaaa;
}
#legendWrapper .legend .label{
margin: 5px;
border: 0px solid #ffffff;
}
#legendWrapper .legend .new{
background: #c5c4ff;
}
#legendWrapper .legend a{
cursor: pointer;
color: #44f;
text-decoration: none;
border: 2px solid #88f;
padding: 0px 5px;
}
#legendWrapper .established .survived_2{background: #ffffff;}
#legendWrapper .established .survived_4{background: #ffd0d0;}
#legendWrapper .established .survived_8{background: #ffb0b0;}
#legendWrapper .established .survived_16{background: #ff9090;}
#legendWrapper .established .survived_32{background: #ff4545;}
#legendWrapper .established .survived_max{background: #ff0000;}
#legendWrapper .novel .survived_2{background: #00ff00;}
#legendWrapper .novel .survived_4{background: #45ff45;}
#legendWrapper .novel .survived_8{background: #90ff90;}
#legendWrapper .novel .survived_16{background: #b0ffb0;}
#legendWrapper .novel .survived_32{background: #d0ffd0;}
#legendWrapper .novel .survived_max{background: #ffffff;}
#legendWrapper .truthiness .survived_2{background: #ff0000;}
#legendWrapper .truthiness .survived_4{background: #ff4545;}
#legendWrapper .truthiness .survived_8{background: #ff9090;}
#legendWrapper .truthiness .survived_16{background: #ffb0b0;}
#legendWrapper .truthiness .survived_32{background: #ffd0d0;}
#legendWrapper .truthiness .survived_max{background: #ffffff;}
#legendWrapper .legend .documentation{
position: absolute;
background: #fff;
border: 2px dotted #7777dd;
padding: 10px;
width: 300px;
}
#legendWrapper .legend .documentation h2{
border-bottom: 0px;
text-align: center;
}
#legendWrapper .legend .documentation .closeButton{
position: absolute;
top: 3px;
right: 3px;
border: 2px solid #88f;
padding: 0px 5px;
font-weight: bold;
cursor: pointer;
}
.happi_notice{
margin: 10px auto;
border: 1px solid #aaa;
text-align: center;
padding: 10px;
}
.happi_notice .title{
text-align: center;
font-weight: bold;
}
.happi_notice .hide_link{
float: right;
border: 1px dotted #00a;
color: #00e;
cursor: pointer;
padding: 2px 6px;
}