Welcome to the DFO World Wiki. With many major updates since the release of DFO, many items are missing. Visit Item Database Project to learn more.
Please remember to click "show preview" before saving the page.
Thanks for the updated logo snafuPop!

Difference between revisions of "User:No.5972/common.css"

From DFO World Wiki
Jump to: navigation, search
 
(67 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
body {
 +
    background: #ccccff no-repeat;
 +
    background-size: 100%;
 +
    background-attachment: fixed;
 +
    background-position-y: 55%;
 +
}
 +
 +
.container table tr, .toc, table[lang=ja] {
 +
    background: #fff;
 +
    opacity: 0.7;
 +
}
 +
 +
.container table tr td:nth-child(4) {
 +
    display: none;
 +
}
 +
 +
.container table th:nth-child(4) {
 +
    display: none;
 +
}
 +
 +
.mw-body, #mw-head, #ca-nstab-user, #ca-view, #mw-page-base {
 +
    background: none !important;
 +
}
 +
 
.csstest1 {
 
.csstest1 {
 
     font-size:22px;
 
     font-size:22px;
 +
}
 +
 +
.top_button:hover {
 +
background: #99f;
 
}
 
}
  
 
.mask
 
.mask
 
{
 
{
−
width:2000px;
+
width:1000px;
 
height:2000px;
 
height:2000px;
 
background:#ffffff;
 
background:#ffffff;
 
position:absolute;
 
position:absolute;
−
transform:translateX(2000px);
+
display: none;
−
visibility:hidden;
+
animation-fill-mode : forwards;
−
animation:welcome 7s;
+
animation:welcome 5s ;
−
-moz-animation:welcome 7s; /* Firefox */
+
-moz-animation:welcome 5s; /* Firefox */
−
-webkit-animation:welcome 7s; /* Safari and Chrome */
+
-webkit-animation:welcome 5s; /* Safari and Chrome */
−
-o-animation:welcome 7s; /* Opera */
+
-o-animation:welcome 5s; /* Opera */
 +
}
 +
 
 +
.mw-wiki-logo
 +
{
 +
animation:scale 0.5s linear;
 +
-moz-animation:scale 0.5s linear;
 +
-webkit-animation:scale 0.5s linear;
 +
-o-animation:scale 0.5s linear;
 +
-ms-animation:scale 0.5s linear;
 +
}
 +
.mw-body-content
 +
{
 +
animation:welcome 1s linear;
 +
-moz-animation:welcome 1s linear; /* Firefox */
 +
-webkit-animation:welcome 1s linear; /* Safari and Chrome */
 +
-o-animation:welcome 1s linear; /* Opera */
 +
-ms-animation:welcome 1s linear;
 +
}
 +
 
 +
.mw-content-ltr {
 +
animation:changeBackground 1s linear infinite;
 +
-moz-animation:changeBackground 1s linear infinite; /* Firefox */
 +
-webkit-animation:changeBackground 1s linear infinite; /* Safari and Chrome */
 +
-o-animation:changeBackground 1s linear infinite; /* Opera */
 +
-ms-animation:changeBackground 1s linear infinite;
 +
}
 +
 
 +
/*
 +
.mw-body-content
 +
{
 +
animation:welcome 2s linear, shake 0.2s linear infinite;
 +
-moz-animation:welcome 2s linear, shake 0.2s linear infinite; /* Firefox */
 +
-webkit-animation:welcome 2s linear, shake 0.2s linear infinite; /* Safari and Chrome */
 +
-o-animation:welcome 2s linear, shake 0.2s linear infinite; /* Opera */
 +
-ms-animation:welcome 2s linear, shake 0.2s linear infinite;
 +
}
 +
*/
 +
@keyframes changeBackground
 +
{
 +
0% {background-color: #fff;}
 +
50% {background-color: #aaa;}
 +
100% {background-color: #fff;}
 
}
 
}
  
 
@keyframes welcome
 
@keyframes welcome
 
{
 
{
−
from {transform:translateX(0px);visibility:visible;}
+
0% {left:100%;}
−
to {transform:translateX(2000px);visibility:visible;}
+
100% {left:0%;}
 
}
 
}
  
 
@-webkit-keyframes welcome
 
@-webkit-keyframes welcome
 
{
 
{
−
from {transform:translateX(0px);visibility:visible;}
+
0% {left:100%;}
−
to {transform:translateX(2000px);visibility:visible;}
+
100% {left:0%;}
 
}
 
}
  
 
@-ms-keyframes welcome
 
@-ms-keyframes welcome
 
{
 
{
−
from {transform:translateX(0px);visibility:visible;}
+
0% {left:100%;}
−
to {transform:translateX(2000px);visibility:visible;}
+
100% {left:0%;}
 +
}
 +
/*--------------------------------*/
 +
 
 +
@keyframes right {
 +
from {width:0%;}
 +
to {width:100%;}
 +
}
 +
 
 +
@-webkit-keyframes right {
 +
from {width:0%;}
 +
to {width:100%;}
 +
}
 +
 
 +
@-o-keyframes right {
 +
from {width:0%;}
 +
to {width:100%;}
 +
}
 +
 
 +
@-moz-keyframes right {
 +
from {width:0%;}
 +
to {width:100%;}
 +
}
 +
 
 +
@-ms-keyframes right {
 +
from {width:0%;}
 +
to {width:100%;}
 +
}
 +
 
 +
.progress-common {
 +
animation: right 2s ;
 +
-moz-animation: right 2s ;
 +
-webkit-animation: right 2s ;
 +
-o-animation: right 2s ;
 +
-ms-animation: right 2s ;
 +
}
 +
 
 +
.forwarding {
 +
animation: right 2s infinite;
 +
-moz-animation: right 2s infinite;
 +
-webkit-animation: right 2s infinite;
 +
-o-animation: right 2s infinite;
 +
-ms-animation: right 2s infinite;
 +
}
 +
 
 +
/*--------------------------------*/
 +
@keyframes scale
 +
{
 +
0% {transform: scale(1,1);}
 +
100% {transform: scale(5,5);}
 +
}
 +
 
 +
@-webkit-keyframes scale
 +
{
 +
0% {transform: scale(1,1);}
 +
100% {transform: scale(5,5);}
 +
}
 +
 
 +
@-o-keyframes scale
 +
{
 +
0% {transform: scale(1,1);}
 +
100% {transform: scale(5,5);}
 +
}
 +
 
 +
@-moz-keyframes scale
 +
{
 +
0% {transform: scale(1,1);}
 +
100% {transform: scale(5,5);}
 +
}
 +
 
 +
@-ms-keyframes scale
 +
{
 +
0% {transform: scale(1,1);}
 +
100% {transform: scale(5,5);}
 +
}
 +
 
 +
/*--------------------------------*/
 +
@keyframes shake
 +
{
 +
0% {transform:translate(-1px,-1px);}
 +
25% {transform:translate(0px,-1px);}
 +
50% {transform:translate(-1px,0px);}
 +
75% {transform:translate(1px,-1px);}
 +
100% {transform:translate(0px,0px);}
 +
}
 +
 
 +
@-webkit-keyframes shake
 +
{
 +
0% {transform:translate(-1px,-1px);}
 +
25% {transform:translate(0px,-1px);}
 +
50% {transform:translate(-1px,0px);}
 +
75% {transform:translate(1px,-1px);}
 +
100% {transform:translate(0px,0px);}
 
}
 
}
  
 +
@-moz-keyframes shake
 +
{
 +
0% {transform:translate(-1px,-1px);}
 +
25% {transform:translate(0px,-1px);}
 +
50% {transform:translate(-1px,0px);}
 +
75% {transform:translate(1px,-1px);}
 +
100% {transform:translate(0px,0px);}
 +
}
 +
 +
@-ms-keyframes shake
 +
{
 +
0% {transform:translate(-1px,-1px);}
 +
25% {transform:translate(0px,-1px);}
 +
50% {transform:translate(-1px,0px);}
 +
75% {transform:translate(1px,-1px);}
 +
100% {transform:translate(0px,0px);}
 +
}
 +
 +
@-o-keyframes shake
 +
{
 +
0% {transform:translate(-1px,-1px);}
 +
25% {transform:translate(0px,-1px);}
 +
50% {transform:translate(-1px,0px);}
 +
75% {transform:translate(1px,-1px);}
 +
100% {transform:translate(0px,0px);}
 +
}
 +
 +
/*--------------------------------*/
 
@-webkit-keyframes marquee {
 
@-webkit-keyframes marquee {
−
   from {left:100%}
+
   0%{left:100%}
−
   to {left: -150%}
+
   100%{left: -150%}
 
}
 
}
 
@-moz-keyframes marquee {
 
@-moz-keyframes marquee {
−
   from {left:100%}
+
   0%{left:100%}
−
   to {left: -150%}
+
   100%{left: -150%}
 
}
 
}
 
@-ms-keyframes marquee {
 
@-ms-keyframes marquee {
−
   from {left:100%}
+
   0%{left:100%}
−
   to {left: -150%}
+
   100%{left: -150%}
 
}
 
}
 
@-o-keyframes marquee {
 
@-o-keyframes marquee {
−
   from {left:100%}
+
   0%{left:100%}
−
   to {left: -150%}
+
   100%{left: -150%}
 
}
 
}
 
@keyframes marquee {
 
@keyframes marquee {
−
   from {left:100%}
+
   0%{left:100%}
−
   to {left: -150%}
+
   100%{left: -150%}
 +
}
 +
@-webkit-keyframes marquee {
 +
  0%{left:100%}
 +
  100%{left: -150%}
 
}
 
}
 +
@-moz-keyframes marquee {
 +
  0%{left:100%}
 +
  100%{left: -150%}
 +
}
 +
@-ms-keyframes marquee {
 +
  0%{left:100%}
 +
  100%{left: -150%}
 +
}
 +
@-o-keyframes marquee {
 +
  0%{left:100%}
 +
  100%{left: -150%}
 +
}
 +
@keyframes marquee {
 +
  0%{left:100%}
 +
  100%{left: -500%}
 +
}
 +
 
.marquee {
 
.marquee {
−
  width: 100%;
 
−
  background: #ffffff;
 
 
   height: 30px;
 
   height: 30px;
−
   -webkit-animation: marquee 8s linear infinite;
+
 
−
   -moz-animation: marquee 8s linear infinite;
+
  overflow: hidden;
−
   -ms-animation: marquee 8s linear infinite;
+
  position: relative;
−
   -o-animation: marquee 8s linear infinite;
+
}
−
   animation: marquee 8s linear infinite;
+
 
 +
.marquee div {
 +
  display: block;
 +
  width: 500%;
 +
  height: 30px;
 +
 
 +
  position: absolute;
 +
  overflow: hidden;
 +
 
 +
   -webkit-animation: marquee 50s linear infinite;
 +
   -moz-animation: marquee 50s linear infinite;
 +
   -ms-animation: marquee 50s linear infinite;
 +
   -o-animation: marquee 50s linear infinite;
 +
   animation: marquee 50s linear infinite;
 +
}
 +
 
 +
td {
 +
  padding: 0.2em 0.4em !important;
 
}
 
}

Latest revision as of 20:54, 9 May 2020

body {
    background: #ccccff no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    background-position-y: 55%;
}

.container table tr, .toc, table[lang=ja] {
    background: #fff;
    opacity: 0.7;
}

.container table tr td:nth-child(4) {
    display: none;
}

.container table th:nth-child(4) {
    display: none;
}

.mw-body, #mw-head, #ca-nstab-user, #ca-view, #mw-page-base {
    background: none !important;
}

.csstest1 {
    font-size:22px;
}

.top_button:hover {
background: #99f;
}

.mask
{
width:1000px;
height:2000px;
background:#ffffff;
position:absolute;
display: none;
animation-fill-mode : forwards;
animation:welcome 5s ;
-moz-animation:welcome 5s; /* Firefox */
-webkit-animation:welcome 5s; /* Safari and Chrome */
-o-animation:welcome 5s; /* Opera */
}

.mw-wiki-logo
{
animation:scale 0.5s linear;
-moz-animation:scale 0.5s linear;
-webkit-animation:scale 0.5s linear;
-o-animation:scale 0.5s linear;
-ms-animation:scale 0.5s linear;
}
.mw-body-content
{
animation:welcome 1s linear;
-moz-animation:welcome 1s linear; /* Firefox */
-webkit-animation:welcome 1s linear; /* Safari and Chrome */
-o-animation:welcome 1s linear; /* Opera */
-ms-animation:welcome 1s linear;
}

.mw-content-ltr {
animation:changeBackground 1s linear infinite;
-moz-animation:changeBackground 1s linear infinite; /* Firefox */
-webkit-animation:changeBackground 1s linear infinite; /* Safari and Chrome */
-o-animation:changeBackground 1s linear infinite; /* Opera */
-ms-animation:changeBackground 1s linear infinite;
}

/*
.mw-body-content
{
animation:welcome 2s linear, shake 0.2s linear infinite;
-moz-animation:welcome 2s linear, shake 0.2s linear infinite; /* Firefox */
-webkit-animation:welcome 2s linear, shake 0.2s linear infinite; /* Safari and Chrome */
-o-animation:welcome 2s linear, shake 0.2s linear infinite; /* Opera */
-ms-animation:welcome 2s linear, shake 0.2s linear infinite;
}
*/
@keyframes changeBackground
{
0% {background-color: #fff;}
50% {background-color: #aaa;}
100% {background-color: #fff;}
}

@keyframes welcome
{
0% {left:100%;}
100% {left:0%;}
}

@-webkit-keyframes welcome
{
0% {left:100%;}
100% {left:0%;}
}

@-ms-keyframes welcome
{
0% {left:100%;}
100% {left:0%;}
}
/*--------------------------------*/

@keyframes right {
from {width:0%;}
to {width:100%;}
}

@-webkit-keyframes right {
from {width:0%;}
to {width:100%;}
}

@-o-keyframes right {
from {width:0%;}
to {width:100%;}
}

@-moz-keyframes right {
from {width:0%;}
to {width:100%;}
}

@-ms-keyframes right {
from {width:0%;}
to {width:100%;}
}

.progress-common {
animation: right 2s ;
-moz-animation: right 2s ;
-webkit-animation: right 2s ;
-o-animation: right 2s ;
-ms-animation: right 2s ;
}

.forwarding {
animation: right 2s infinite;
-moz-animation: right 2s infinite;
-webkit-animation: right 2s infinite;
-o-animation: right 2s infinite;
-ms-animation: right 2s infinite;
}

/*--------------------------------*/
@keyframes scale
{
0% {transform: scale(1,1);}
100% {transform: scale(5,5);}
}

@-webkit-keyframes scale
{
0% {transform: scale(1,1);}
100% {transform: scale(5,5);}
}

@-o-keyframes scale
{
0% {transform: scale(1,1);}
100% {transform: scale(5,5);}
}

@-moz-keyframes scale
{
0% {transform: scale(1,1);}
100% {transform: scale(5,5);}
}

@-ms-keyframes scale
{
0% {transform: scale(1,1);}
100% {transform: scale(5,5);}
}

/*--------------------------------*/
@keyframes shake
{
0% {transform:translate(-1px,-1px);}
25% {transform:translate(0px,-1px);}
50% {transform:translate(-1px,0px);}
75% {transform:translate(1px,-1px);}
100% {transform:translate(0px,0px);}
}

@-webkit-keyframes shake
{
0% {transform:translate(-1px,-1px);}
25% {transform:translate(0px,-1px);}
50% {transform:translate(-1px,0px);}
75% {transform:translate(1px,-1px);}
100% {transform:translate(0px,0px);}
}

@-moz-keyframes shake
{
0% {transform:translate(-1px,-1px);}
25% {transform:translate(0px,-1px);}
50% {transform:translate(-1px,0px);}
75% {transform:translate(1px,-1px);}
100% {transform:translate(0px,0px);}
}

@-ms-keyframes shake
{
0% {transform:translate(-1px,-1px);}
25% {transform:translate(0px,-1px);}
50% {transform:translate(-1px,0px);}
75% {transform:translate(1px,-1px);}
100% {transform:translate(0px,0px);}
}

@-o-keyframes shake
{
0% {transform:translate(-1px,-1px);}
25% {transform:translate(0px,-1px);}
50% {transform:translate(-1px,0px);}
75% {transform:translate(1px,-1px);}
100% {transform:translate(0px,0px);}
}

/*--------------------------------*/
@-webkit-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@-moz-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@-ms-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@-o-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@-webkit-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@-moz-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@-ms-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@-o-keyframes marquee {
  0%{left:100%}
  100%{left: -150%}
}
@keyframes marquee {
  0%{left:100%}
  100%{left: -500%}
}

.marquee {
  height: 30px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 500%;
  height: 30px;
  
  position: absolute;
  overflow: hidden;

  -webkit-animation: marquee 50s linear infinite;
  -moz-animation: marquee 50s linear infinite;
  -ms-animation: marquee 50s linear infinite;
  -o-animation: marquee 50s linear infinite;
  animation: marquee 50s linear infinite;
}

td {
  padding: 0.2em 0.4em !important;
}
Retrieved from "https://wiki.dfo.world/index.php?title=User:No.5972/common.css&oldid=148102"