Skip to content

Instantly share code, notes, and snippets.

@danielhusar
Created November 21, 2017 04:18
Show Gist options
  • Save danielhusar/7dddeac15bb06abb87e3589bc49bf9a9 to your computer and use it in GitHub Desktop.
Save danielhusar/7dddeac15bb06abb87e3589bc49bf9a9 to your computer and use it in GitHub Desktop.
Viacoin banner
#header {
height: 111px; /* 18px + 75px + 18px */
background: #252525;
background: linear-gradient(to right, #252525 0%, #868585 50%, #252525 100%);
position: relative;
}
#header:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://i.imgur.com/kjgnXWk.png);
background-repeat: repeat;
z-index: 0;
opacity: .4;
}
#header-img.default-header {
width: 36px;
position: absolute;
bottom: 10px;
left: 10px;
opacity: .5;
-webkit-transition: opacity .3s;
transition: opacity .3s;
display: none;
}
#header-img.default-header:hover {
opacity: .9;
}
.pagename {
color: white;
}
.pagename a {
position: relative;
width: 222px;
height: 70px;
background-image: url(https://i.imgur.com/7SknDq1.png);
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
top: 50%;
margin: -35px 0 0 -111px;
font-size: 0;
}
.pagename a:after {
content: '';
position: absolute;
display: block;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
background-image: url(https://i.imgur.com/ZNCMdLh.png);
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
-webkit-animation: ViaLogoKeyframes 10s infinite;
animation: ViaLogoKeyframes 10s infinite;
}
.pagename a:hover:after {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
#sr-more-link,
#sr-header-area {
background: #848181;
color: white;
}
#sr-header-area {
border-bottom: 1px solid #6d6d6d;
line-height: 19px;
position: relative;
}
.dropdown.srdrop .selected,
.sr-bar a {
color: white;
}
.dropdown.srdrop .selected {
background: none;
padding-right: 5px;
}
.tabmenu {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 18px;
margin: 0;
display: block;
background: #6f6f6f;
border-top: 1px solid #6d6d6d;
font-size: 11px;
line-height: 18px;
}
.tabmenu li {
margin: 0;
padding: 0;
}
.tabmenu li a {
padding: 3px 10px;
font-weight: 100;
text-transform: uppercase;
background: none;
color: white;
border: none;
-webkit-transition: background .2s;
transition: background .2s;
}
.tabmenu li a:hover,
.tabmenu li.selected a {
background: #5e5a5a;
border: none;
color: white;
}
.tabmenu li.selected a {
border-top: 3px solid #5e5a5a;
}
#header-bottom-right {
background: none;
color: white;
}
#header-bottom-right .separator,
#header-bottom-right .user,
#header-bottom-right a {
color: white;
}
#header-bottom-right .pref-lang {
font-weight: 100;
}
#mail.nohavemail,
#modmail.nohavemail,
#new_modmail.nohavemail {
-webkit-transform: scale(.8);
transform: scale(.8);
}
@-webkit-keyframes ViaLogoKeyframes {
0% {
background-image: url(https://i.imgur.com/ZNCMdLh.png);
}
50% {
background-image: url(https://i.imgur.com/CtFIfc6.png);
}
100% {
background-image: url(https://i.imgur.com/ZNCMdLh.png);
}
}
@keyframes ViaLogoKeyframes {
0% {
background-image: url(https://i.imgur.com/ZNCMdLh.png);
}
50% {
background-image: url(https://i.imgur.com/CtFIfc6.png);
}
100% {
background-image: url(https://i.imgur.com/ZNCMdLh.png);
}
}
@danielhusar
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment