Difference between revisions of "User:Wookipan/Page.css"
m |
|||
Line 29: | Line 29: | ||
color: #fff; | color: #fff; | ||
− | background: #373737; | + | background: #373737; |
+ | background-image: url("https://i.imgur.com/8ITarjK.gif"); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
position: relative; | position: relative; | ||
text-align: left; | text-align: left; | ||
Line 37: | Line 41: | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
border-radius: 10px; | border-radius: 10px; | ||
− | border: | + | border: 2.5px solid #A4B1BD; |
overflow: hidden; | overflow: hidden; | ||
clear: both; | clear: both; | ||
Line 45: | Line 49: | ||
position: absolute; | position: absolute; | ||
− | width:100%; | + | width: 100%; |
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
Line 59: | Line 63: | ||
text-align: center; | text-align: center; | ||
− | animation: | + | animation: colorAnimation 2s infinite; |
− | -webkit-animation: | + | -webkit-animation: colorAnimation 2s infinite; |
− | + | -moz-animation: colorAnimation 2s infinite; | |
} | } | ||
− | @keyframes | + | @keyframes colorAnimation |
{ | { | ||
− | 0% {color: #B8383B;} | + | 0% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} |
− | 25% {color: #5885A2;} | + | 25% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} |
− | 50% {color: #B8383B;} | + | 50% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} |
− | 75% {color: #5885A2;} | + | 75% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} |
− | 100%{color: #B8383B;} | + | 100%{color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} |
} | } | ||
− | @keyframes | + | @keyframes colorAnimation |
{ | { | ||
− | 0% {color: #B8383B;} | + | 0% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} |
− | 25% {color: #5885A2;} | + | 25% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} |
− | 50% {color: #B8383B;} | + | 50% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} |
− | 75% {color: #5885A2;} | + | 75% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} |
− | 100%{color: #B8383B;} | + | 100%{color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} |
} | } | ||
Line 90: | Line 94: | ||
.task-table { | .task-table { | ||
− | background-color: | + | background-color: rgba(0,0,0,0.8); |
− | width: | + | width: 14%; |
− | border: | + | border: 1.5px solid #fff; |
border-radius: 3px; | border-radius: 3px; | ||
position: absolute; | position: absolute; | ||
Line 101: | Line 105: | ||
.infobawx-container { | .infobawx-container { | ||
− | background: | + | background: rgba(0,0,0,0.8); |
width: 50%; | width: 50%; | ||
text-align: center; | text-align: center; | ||
Line 109: | Line 113: | ||
-moz-border-radius: 20px; | -moz-border-radius: 20px; | ||
border-radius: 10px; | border-radius: 10px; | ||
− | border: | + | border: 2px solid #fff; |
overflow: auto; | overflow: auto; | ||
} | } | ||
− | .infobawx- | + | .user-infobawx-container { |
+ | width: 13%; | ||
+ | height: auto; | ||
+ | position: absolute; | ||
+ | top: 25%; | ||
+ | right: 5%; | ||
+ | padding: 1px; | ||
+ | background: rgba(0,0,0,0.8); | ||
+ | margin-bottom: 20px; | ||
+ | border: 2px solid #fff; | ||
+ | -webkit-border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | .wooki-header { | ||
height: 40px; | height: 40px; | ||
− | font-family:'TF2 Build'; | + | font-family: 'TF2 Build'; |
− | font-size:1em | + | font-size: 1em; |
} | } | ||
+ | |||
+ | .wookichievements-container { | ||
+ | background: rgba(0,0,0,0.8); | ||
+ | width: 50%; | ||
+ | height: 30em; | ||
+ | padding: 1px; | ||
+ | text-align: center; | ||
+ | margin: 5px auto 5px auto; | ||
+ | -webkit-border-radius: 10px; | ||
+ | -moz-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | border: 3px solid #fff; | ||
+ | overflow-y: scroll; | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 960px) { | ||
+ | |||
+ | .task-table, .user-infobawx-container { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .infobawx-container, .wookichievements-container { | ||
+ | width: 90%; | ||
+ | } | ||
+ | } |
Revision as of 21:49, 12 April 2019
.mw-body a.external { color: #476291 !important; } .mw-body a.external:visited { color: #8650AC !important; } .mw-body a.external:hover { color: #70B04A !important; } a:link { color: #476291; text-decoration: none; } a:visited { color: #8650AC; } a:hover { color: #70B04A; } #userpage-wrapper { color: #fff; background: #373737; background-image: url("https://i.imgur.com/8ITarjK.gif"); background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; text-align: left; padding: 60px 30px 300px 30px; margin: 10px auto 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 2.5px solid #A4B1BD; overflow: hidden; clear: both; } .main-header { position: absolute; width: 100%; top: 0; left: 0; background: #252525; font-size: 30px; font-family: 'TF2 Professor'; text-align: center; } .daysAgo { font-size: 16pt; color: #70B04A; text-align: center; animation: colorAnimation 2s infinite; -webkit-animation: colorAnimation 2s infinite; -moz-animation: colorAnimation 2s infinite; } @keyframes colorAnimation { 0% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} 25% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} 50% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} 75% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} 100%{color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} } @keyframes colorAnimation { 0% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} 25% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} 50% {color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} 75% {color: #5885A2; text-shadow: 0 0 10px #5885A2, 0 0 20px #5885A2, 0 0 30px #5885A2, 0 0 40px #5885A2;} 100%{color: #B8383B; text-shadow: 0 0 10px #b8383b, 0 0 20px #b8383b, 0 0 30px #b8383b, 0 0 40px #b8383b;} } .task-table { background-color: rgba(0,0,0,0.8); width: 14%; border: 1.5px solid #fff; border-radius: 3px; position: absolute; left: 3%; top: 30%; } .infobawx-container { background: rgba(0,0,0,0.8); width: 50%; text-align: center; padding: 30px; margin: 5px auto 5px auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 10px; border: 2px solid #fff; overflow: auto; } .user-infobawx-container { width: 13%; height: auto; position: absolute; top: 25%; right: 5%; padding: 1px; background: rgba(0,0,0,0.8); margin-bottom: 20px; border: 2px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .wooki-header { height: 40px; font-family: 'TF2 Build'; font-size: 1em; } .wookichievements-container { background: rgba(0,0,0,0.8); width: 50%; height: 30em; padding: 1px; text-align: center; margin: 5px auto 5px auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 3px solid #fff; overflow-y: scroll; } @media only screen and (max-width: 960px) { .task-table, .user-infobawx-container { display: none; } .infobawx-container, .wookichievements-container { width: 90%; } }