543 lines
9.8 KiB
CSS
543 lines
9.8 KiB
CSS
.ripple.logo {
|
|
padding-top: 4px;
|
|
}
|
|
/* Chrome, Safari, Opera */
|
|
@-webkit-keyframes rainbow{
|
|
0%{color: orange;}
|
|
10%{color: purple;}
|
|
20%{color: red;}
|
|
30%{color: CadetBlue;}
|
|
40%{color: yellow;}
|
|
50%{color: coral;}
|
|
60%{color: green;}
|
|
70%{color: cyan;}
|
|
80%{color: DeepPink;}
|
|
90%{color: DodgerBlue;}
|
|
100%{color: orange;}
|
|
}
|
|
|
|
/* Internet Explorer */
|
|
@-ms-keyframes rainbow{
|
|
0%{color: orange;}
|
|
10%{color: purple;}
|
|
20%{color: red;}
|
|
30%{color: CadetBlue;}
|
|
40%{color: yellow;}
|
|
50%{color: coral;}
|
|
60%{color: green;}
|
|
70%{color: cyan;}
|
|
80%{color: DeepPink;}
|
|
90%{color: DodgerBlue;}
|
|
100%{color: orange;}
|
|
}
|
|
|
|
/* Standar Syntax */
|
|
@keyframes rainbow{
|
|
0%{color: orange;}
|
|
10%{color: purple;}
|
|
20%{color: red;}
|
|
30%{color: CadetBlue;}
|
|
40%{color: yellow;}
|
|
50%{color: coral;}
|
|
60%{color: green;}
|
|
70%{color: cyan;}
|
|
80%{color: DeepPink;}
|
|
90%{color: DodgerBlue;}
|
|
100%{color: orange;}
|
|
}
|
|
|
|
.huge.heading {
|
|
background-color: #2e2e2e;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
background-size: cover;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
.huge.heading.right .ui.container {
|
|
text-align: right;
|
|
}
|
|
@media (max-width: 700px) {
|
|
.huge.heading {
|
|
height: 100px;
|
|
}
|
|
.huge.heading h1 {
|
|
font-size: 24pt;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
.owner
|
|
{
|
|
/* Font options */
|
|
text-shadow: 2px 2px 4px #000000;
|
|
|
|
/* Chrome, Safari, Opera */
|
|
-webkit-animation: rainbow 5s infinite;
|
|
|
|
/* Internet Explorer */
|
|
-ms-animation: rainbow 5s infinite;
|
|
|
|
/* Standar Syntax */
|
|
animation: rainbow 5s infinite;
|
|
}
|
|
|
|
.dev
|
|
{
|
|
color: SpringGreen;
|
|
text-shadow:
|
|
-1px -1px 0 #006400,
|
|
1px -1px 0 #006400,
|
|
-1px 1px 0 #006400,
|
|
1px 1px 0 #006400;
|
|
|
|
}
|
|
@media (min-width: 700px) {
|
|
.huge.heading {
|
|
height: 175px;
|
|
}
|
|
.huge.heading h1 {
|
|
font-size: 40pt;
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.huge.heading h1 {
|
|
color: #f9f9f9;
|
|
text-shadow: 0 2px 10px #000;
|
|
}
|
|
|
|
.main.wrapper {
|
|
padding-bottom: 30px;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
a.inherit {
|
|
color: inherit;
|
|
opacity: 0.9;
|
|
}
|
|
a.inherit:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.autopad {
|
|
margin: 1rem 0;
|
|
}
|
|
.autopad:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.autopad:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.margined.container {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.main.wrapper {
|
|
min-height: calc(100vh - 43px);
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1px solid #bbb;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.top.right.icon {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
margin: 0;
|
|
top: .78575em;
|
|
right: .5em;
|
|
opacity: .7;
|
|
-webkit-transition: opacity .1s ease;
|
|
transition: opacity .1s ease;
|
|
}
|
|
.no.top.margin {
|
|
margin-top: 0;
|
|
}
|
|
.no.bottom.margin {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.menu:not(.secondary) > .item.active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mode-container {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.youtube.video.container {
|
|
position:relative;
|
|
padding-bottom:56.25%;
|
|
padding-top:30px;
|
|
height:0;
|
|
overflow:hidden;
|
|
}
|
|
.youtube.video.container iframe {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
.smallpadd {
|
|
margin: 0 .2em !important;
|
|
}
|
|
|
|
.white.background {
|
|
background-color: #454545 !important;
|
|
}
|
|
body.ds .white.background {
|
|
background-color: #FFF !important;
|
|
}
|
|
|
|
.user.avatar {
|
|
float: left;
|
|
overflow: auto;
|
|
padding-right: 10px;
|
|
display: block;
|
|
height: 80px;
|
|
}
|
|
|
|
.ui.attached.segment {
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
.ui.attached.menu, .ui.attached.segment {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.table.element {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
.table.element h1, .nopad {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
.magic.table {
|
|
overflow: auto;
|
|
display: table;
|
|
width: auto;
|
|
display: inline-table;
|
|
height: 80px;
|
|
}
|
|
.overflow.auto {
|
|
overflow: auto;
|
|
}
|
|
|
|
.magic.table.floating.right {
|
|
float: right;
|
|
}
|
|
|
|
.subtitle, .about.title {
|
|
color: rgba(255,255,255,.8);
|
|
}
|
|
.subtitle b {
|
|
color: rgba(255,255,255,.8);
|
|
}
|
|
|
|
/* ds = Dark Site */
|
|
body.ds .subtitle, body.ds .about.title {
|
|
color: rgba(0,0,0,.6);
|
|
}
|
|
body.ds .subtitle b {
|
|
color: rgba(0,0,0,.87);
|
|
}
|
|
|
|
.little.margin.top {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.two.column.table td {
|
|
width: 50%;
|
|
}
|
|
|
|
.centered {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui.secondary.inverted.main.menu {
|
|
background-color: #1B1C1D;
|
|
}
|
|
|
|
.ui.inverted.input > input {
|
|
background: #444;
|
|
color: #FFF;
|
|
}
|
|
.ui.inverted.input > input::selection {
|
|
background-color: rgba(255,255,255,.5);
|
|
}
|
|
.ui.inverted.input {
|
|
color: #FFF;
|
|
}
|
|
.dropped {
|
|
-webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.21) !important;
|
|
box-shadow: 0 4px 10px 0 rgba(0,0,0,.21) !important;
|
|
}
|
|
|
|
.score-table th:not([colspan]):nth-child(2) {
|
|
width: 15%;
|
|
}
|
|
|
|
#userpage-content {
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
}
|
|
|
|
#profile-actions {
|
|
text-align: right;
|
|
padding-top: 2px;
|
|
}
|
|
#profile-actions button, .smalltext.button {
|
|
font-size: .7rem;
|
|
}
|
|
|
|
.emoji {
|
|
width: 1em;
|
|
}
|
|
|
|
.right.aligned { text-align: right; }
|
|
.left.aligned { text-align: left; }
|
|
|
|
.clickable { cursor: pointer; }
|
|
|
|
/* thanks bootstrap */
|
|
code {
|
|
padding: 2px 4px;
|
|
font-size: 90%;
|
|
color: #c7254e;
|
|
background-color: #f9f2f4;
|
|
border-radius: 4px;
|
|
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
|
|
}
|
|
|
|
.g-recaptcha > div {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.big.text {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.about.subtitle {
|
|
margin-top: 10px;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.about.title {
|
|
margin-top: 15px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.nopadding.segment {
|
|
padding: 0;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.firetrucking-right-menu {
|
|
margin-left: auto!important;
|
|
display: flex;
|
|
display: -ms-flexbox;
|
|
-ms-flex-align: inherit;
|
|
align-items: inherit;
|
|
-ms-flex-direction: inherit;
|
|
flex-direction: inherit;
|
|
}
|
|
}
|
|
|
|
.firetrucking-right-menu .item {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.score.rank {
|
|
height: 1.2rem;
|
|
}
|
|
|
|
/* quick dirty partially-working menu fixes for mobile */
|
|
@media (max-width: 911px) {
|
|
#navbar .item {
|
|
margin: 0 !important;
|
|
}
|
|
#navbar {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.tiny.container {
|
|
margin: 0 auto;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.tiny.container {
|
|
width: auto;
|
|
}
|
|
}
|
|
@media (min-width: 720px) {
|
|
.tiny.container {
|
|
width: 720px;
|
|
}
|
|
}
|
|
|
|
.ui.form .error.message, .ui.form .success.message, .ui.form .warning.message {
|
|
display: block !important;
|
|
}
|
|
|
|
textarea.monospace {
|
|
height: 320px;
|
|
font-family: "Consolas", monospace;
|
|
}
|
|
|
|
.segment[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.compact-container {
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
#userpage-content {
|
|
-webkit-transition: all 500ms;
|
|
transition: all 500ms;
|
|
}
|
|
|
|
/* FUCK INTERNET EXPLORER */
|
|
input[type="submit"].ie {
|
|
height: 0;
|
|
width: 0;
|
|
font-size: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
/* Don't ask. Simply don't. I just tried random display values and this was what worked best */
|
|
display: flex;
|
|
}
|
|
|
|
/* A camouflaged link looks like normal text but it isn't. */
|
|
a.camouflaged {
|
|
color: inherit;
|
|
}
|
|
|
|
a.camouflaged:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.avatar-cell {
|
|
width: 90px;
|
|
}
|
|
.avatar-cell > img {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* column in a grid which is both vertically and horizontally centered */
|
|
.ui.grid > .row > .full-centered.column {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* SO, of course: https://stackoverflow.com/a/8612047/5328069 */
|
|
img.achievement {
|
|
-webkit-filter: drop-shadow(0 5px 5px #777);
|
|
filter: drop-shadow(0 5px 5px #777);
|
|
}
|
|
img.locked-achievement {
|
|
-webkit-filter: brightness(0) drop-shadow(0 5px 5px #777);
|
|
filter: brightness(0) drop-shadow(0 5px 5px #777);
|
|
-webkit-transition: all 500ms ;
|
|
-moz-transition: all 500ms ;
|
|
-ms-transition: all 500ms ;
|
|
-o-transition: all 500ms ;
|
|
transition: all 500ms ;
|
|
}
|
|
img.locked-achievement:hover {
|
|
filter: gray; /* IE6-9 */
|
|
-webkit-filter: brightness(0.5) drop-shadow(0 5px 5px #777);
|
|
filter: brightness(0.5) drop-shadow(0 5px 5px #777);
|
|
}
|
|
.animated.flipOutX,
|
|
.animated.flipOutY,
|
|
.animated.bounceIn,
|
|
.animated.bounceOut {
|
|
-webkit-animation-duration: .75s;
|
|
animation-duration: .75s;
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
from, 20%, 53%, 80%, to {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
40%, 43% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
|
|
70% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0,-4px,0);
|
|
transform: translate3d(0,-4px,0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
from, 20%, 53%, 80%, to {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
40%, 43% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
|
|
70% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
|
|
90% {
|
|
-webkit-transform: translate3d(0,-4px,0);
|
|
transform: translate3d(0,-4px,0);
|
|
}
|
|
}
|
|
#bouncy {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-name: bounce;
|
|
animation-name: bounce;
|
|
-webkit-transform-origin: center bottom;
|
|
transform-origin: center bottom;
|
|
} |