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:Dfoplayer/common.css"
(dont need) |
(test button css) |
||
| Line 1: | Line 1: | ||
| + | /* =====dfoplayer==== */ | ||
| + | /* taken from https://en.wikipedia.org/wiki/Template:Clickable_button | ||
| + | Main purpose is to create a floating "back to top button" */ | ||
| + | .mw-ui-button { | ||
| + | font-family:inherit; | ||
| + | font-size:1em; | ||
| + | -webkit-box-sizing:border-box; | ||
| + | -moz-box-sizing:border-box; | ||
| + | box-sizing:border-box; | ||
| + | -webkit-appearance:none; | ||
| + | display:inline; | ||
| + | zoom:1; | ||
| + | background:#fff; | ||
| + | color:#555; | ||
| + | border:1px solid #ccc; | ||
| + | border-radius:2px; | ||
| + | min-width:4em; | ||
| + | vertical-align:middle; | ||
| + | text-align:center; | ||
| + | font-weight:700; | ||
| + | cursor:pointer; | ||
| + | margin:0; | ||
| + | padding:.5em 1em; | ||
| + | } | ||
| + | .mw-ui-button:hover { | ||
| + | background-color:#ccc; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button:focus { | ||
| + | box-shadow:0 0 0 1px #ccc; | ||
| + | outline:none; | ||
| + | background-color:#ccc; | ||
| + | border-color:#fff; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button:active,.mw-ui-button.mw-ui-checked { | ||
| + | background:#777; | ||
| + | box-shadow:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button:disabled { | ||
| + | color:#ccc; | ||
| + | text-shadow:none; | ||
| + | cursor:default; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button:disabled:hover,.mw-ui-button:disabled:active { | ||
| + | background:#fff; | ||
| + | box-shadow:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-big { | ||
| + | font-size:1.3em; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-block { | ||
| + | display:block; | ||
| + | width:100%; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive,.mw-ui-button.mw-ui-primary { | ||
| + | background:#347bff; | ||
| + | color:#fff; | ||
| + | border:1px solid #347bff; | ||
| + | text-shadow:0 1px rgba(0,0,0,0.1); | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive:hover,.mw-ui-button.mw-ui-primary:hover { | ||
| + | background-color:#2962cc; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive:focus,.mw-ui-button.mw-ui-primary:focus { | ||
| + | box-shadow:0 0 0 1px #2962cc; | ||
| + | outline:none; | ||
| + | border-color:#fff; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive:active,.mw-ui-button.mw-ui-primary:active,.mw-ui-button.mw-ui-progressive.mw-ui-checked,.mw-ui-button.mw-ui-primary.mw-ui-checked { | ||
| + | background:#2962cc; | ||
| + | box-shadow:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive.mw-ui-quiet:hover,.mw-ui-button.mw-ui-primary.mw-ui-quiet:hover,.mw-ui-button.mw-ui-progressive.mw-ui-quiet:focus,.mw-ui-button.mw-ui-primary.mw-ui-quiet:focus { | ||
| + | background:transparent; | ||
| + | color:#347bff; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive.mw-ui-quiet:active,.mw-ui-button.mw-ui-primary.mw-ui-quiet:active,.mw-ui-button.mw-ui-progressive.mw-ui-quiet.mw-ui-checked,.mw-ui-button.mw-ui-primary.mw-ui-quiet.mw-ui-checked { | ||
| + | color:#2962cc; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-constructive { | ||
| + | background:#00af89; | ||
| + | color:#fff; | ||
| + | border:1px solid #00af89; | ||
| + | text-shadow:0 1px rgba(0,0,0,0.1); | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-constructive:hover { | ||
| + | background-color:#008c6d; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-constructive:focus { | ||
| + | box-shadow:0 0 0 1px #008c6d; | ||
| + | outline:none; | ||
| + | border-color:#fff; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-constructive:active,.mw-ui-button.mw-ui-constructive.mw-ui-checked { | ||
| + | background:#008c6d; | ||
| + | box-shadow:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-constructive.mw-ui-quiet:hover,.mw-ui-button.mw-ui-constructive.mw-ui-quiet:focus { | ||
| + | background:transparent; | ||
| + | color:#00af89; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-constructive.mw-ui-quiet:active,.mw-ui-button.mw-ui-constructive.mw-ui-quiet.mw-ui-checked { | ||
| + | color:#008c6d; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-destructive { | ||
| + | background:#d11d13; | ||
| + | color:#fff; | ||
| + | border:1px solid #d11d13; | ||
| + | text-shadow:0 1px rgba(0,0,0,0.1); | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-destructive:hover { | ||
| + | background-color:#a7170f; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-destructive:focus { | ||
| + | box-shadow:0 0 0 1px #a7170f; | ||
| + | outline:none; | ||
| + | border-color:#fff; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-destructive:active,.mw-ui-button.mw-ui-destructive.mw-ui-checked { | ||
| + | background:#a7170f; | ||
| + | box-shadow:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-destructive.mw-ui-quiet:hover,.mw-ui-button.mw-ui-destructive.mw-ui-quiet:focus { | ||
| + | background:transparent; | ||
| + | color:#d11d13; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-destructive.mw-ui-quiet:active,.mw-ui-button.mw-ui-destructive.mw-ui-quiet.mw-ui-checked { | ||
| + | color:#a7170f; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-quiet { | ||
| + | background:transparent; | ||
| + | border:0; | ||
| + | text-shadow:none; | ||
| + | color:#555; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-quiet:hover,.mw-ui-button.mw-ui-quiet:focus { | ||
| + | background:transparent; | ||
| + | color:#555; | ||
| + | box-shadow:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-quiet:active,.mw-ui-button.mw-ui-quiet.mw-ui-checked { | ||
| + | color:#777; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-quiet:active,.mw-ui-button.mw-ui-quiet:disabled { | ||
| + | background:transparent; | ||
| + | } | ||
| + | |||
| + | a.mw-ui-button { | ||
| + | text-decoration:none; | ||
| + | line-height:normal; | ||
| + | } | ||
| + | |||
| + | a.mw-ui-button:hover,a.mw-ui-button:focus { | ||
| + | text-decoration:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button-group > * { | ||
| + | min-width:48px; | ||
| + | border-radius:0; | ||
| + | float:left; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button-group > :first-child { | ||
| + | border-top-left-radius:2px; | ||
| + | border-bottom-left-radius:2px; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button-group > :not( :first-child ) { | ||
| + | border-left:0; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button:focus::-moz-focus-inner,.mw-ui-button.mw-ui-progressive:focus::-moz-focus-inner,.mw-ui-button.mw-ui-primary:focus::-moz-focus-inner,.mw-ui-button.mw-ui-constructive:focus::-moz-focus-inner,.mw-ui-button.mw-ui-destructive:focus::-moz-focus-inner { | ||
| + | border-color:transparent; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button:hover,.mw-ui-button:active,.mw-ui-button:visited,.mw-ui-button.mw-ui-progressive.mw-ui-quiet,.mw-ui-button.mw-ui-primary.mw-ui-quiet,.mw-ui-button.mw-ui-constructive.mw-ui-quiet,.mw-ui-button.mw-ui-destructive.mw-ui-quiet { | ||
| + | color:#555; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive:disabled,.mw-ui-button.mw-ui-primary:disabled,.mw-ui-button.mw-ui-constructive:disabled,.mw-ui-button.mw-ui-destructive:disabled { | ||
| + | background:#ddd; | ||
| + | border-color:#ddd; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive:disabled:hover,.mw-ui-button.mw-ui-primary:disabled:hover,.mw-ui-button.mw-ui-progressive:disabled:active,.mw-ui-button.mw-ui-primary:disabled:active,.mw-ui-button.mw-ui-progressive:disabled.mw-ui-checked,.mw-ui-button.mw-ui-primary:disabled.mw-ui-checked,.mw-ui-button.mw-ui-constructive:disabled:hover,.mw-ui-button.mw-ui-constructive:disabled:active,.mw-ui-button.mw-ui-constructive:disabled.mw-ui-checked,.mw-ui-button.mw-ui-destructive:disabled:hover,.mw-ui-button.mw-ui-destructive:disabled:active,.mw-ui-button.mw-ui-destructive:disabled.mw-ui-checked { | ||
| + | box-shadow:none; | ||
| + | } | ||
| + | |||
| + | .mw-ui-button.mw-ui-progressive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-primary.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-constructive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-destructive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-quiet:disabled { | ||
| + | color:#ccc; | ||
| + | } | ||
Revision as of 18:54, 2 February 2016
/* =====dfoplayer==== */
/* taken from https://en.wikipedia.org/wiki/Template:Clickable_button
Main purpose is to create a floating "back to top button" */
.mw-ui-button {
font-family:inherit;
font-size:1em;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-appearance:none;
display:inline;
zoom:1;
background:#fff;
color:#555;
border:1px solid #ccc;
border-radius:2px;
min-width:4em;
vertical-align:middle;
text-align:center;
font-weight:700;
cursor:pointer;
margin:0;
padding:.5em 1em;
}
.mw-ui-button:hover {
background-color:#ccc;
}
.mw-ui-button:focus {
box-shadow:0 0 0 1px #ccc;
outline:none;
background-color:#ccc;
border-color:#fff;
}
.mw-ui-button:active,.mw-ui-button.mw-ui-checked {
background:#777;
box-shadow:none;
}
.mw-ui-button:disabled {
color:#ccc;
text-shadow:none;
cursor:default;
}
.mw-ui-button:disabled:hover,.mw-ui-button:disabled:active {
background:#fff;
box-shadow:none;
}
.mw-ui-button.mw-ui-big {
font-size:1.3em;
}
.mw-ui-button.mw-ui-block {
display:block;
width:100%;
}
.mw-ui-button.mw-ui-progressive,.mw-ui-button.mw-ui-primary {
background:#347bff;
color:#fff;
border:1px solid #347bff;
text-shadow:0 1px rgba(0,0,0,0.1);
}
.mw-ui-button.mw-ui-progressive:hover,.mw-ui-button.mw-ui-primary:hover {
background-color:#2962cc;
}
.mw-ui-button.mw-ui-progressive:focus,.mw-ui-button.mw-ui-primary:focus {
box-shadow:0 0 0 1px #2962cc;
outline:none;
border-color:#fff;
}
.mw-ui-button.mw-ui-progressive:active,.mw-ui-button.mw-ui-primary:active,.mw-ui-button.mw-ui-progressive.mw-ui-checked,.mw-ui-button.mw-ui-primary.mw-ui-checked {
background:#2962cc;
box-shadow:none;
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:hover,.mw-ui-button.mw-ui-primary.mw-ui-quiet:hover,.mw-ui-button.mw-ui-progressive.mw-ui-quiet:focus,.mw-ui-button.mw-ui-primary.mw-ui-quiet:focus {
background:transparent;
color:#347bff;
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:active,.mw-ui-button.mw-ui-primary.mw-ui-quiet:active,.mw-ui-button.mw-ui-progressive.mw-ui-quiet.mw-ui-checked,.mw-ui-button.mw-ui-primary.mw-ui-quiet.mw-ui-checked {
color:#2962cc;
}
.mw-ui-button.mw-ui-constructive {
background:#00af89;
color:#fff;
border:1px solid #00af89;
text-shadow:0 1px rgba(0,0,0,0.1);
}
.mw-ui-button.mw-ui-constructive:hover {
background-color:#008c6d;
}
.mw-ui-button.mw-ui-constructive:focus {
box-shadow:0 0 0 1px #008c6d;
outline:none;
border-color:#fff;
}
.mw-ui-button.mw-ui-constructive:active,.mw-ui-button.mw-ui-constructive.mw-ui-checked {
background:#008c6d;
box-shadow:none;
}
.mw-ui-button.mw-ui-constructive.mw-ui-quiet:hover,.mw-ui-button.mw-ui-constructive.mw-ui-quiet:focus {
background:transparent;
color:#00af89;
}
.mw-ui-button.mw-ui-constructive.mw-ui-quiet:active,.mw-ui-button.mw-ui-constructive.mw-ui-quiet.mw-ui-checked {
color:#008c6d;
}
.mw-ui-button.mw-ui-destructive {
background:#d11d13;
color:#fff;
border:1px solid #d11d13;
text-shadow:0 1px rgba(0,0,0,0.1);
}
.mw-ui-button.mw-ui-destructive:hover {
background-color:#a7170f;
}
.mw-ui-button.mw-ui-destructive:focus {
box-shadow:0 0 0 1px #a7170f;
outline:none;
border-color:#fff;
}
.mw-ui-button.mw-ui-destructive:active,.mw-ui-button.mw-ui-destructive.mw-ui-checked {
background:#a7170f;
box-shadow:none;
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:hover,.mw-ui-button.mw-ui-destructive.mw-ui-quiet:focus {
background:transparent;
color:#d11d13;
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:active,.mw-ui-button.mw-ui-destructive.mw-ui-quiet.mw-ui-checked {
color:#a7170f;
}
.mw-ui-button.mw-ui-quiet {
background:transparent;
border:0;
text-shadow:none;
color:#555;
}
.mw-ui-button.mw-ui-quiet:hover,.mw-ui-button.mw-ui-quiet:focus {
background:transparent;
color:#555;
box-shadow:none;
}
.mw-ui-button.mw-ui-quiet:active,.mw-ui-button.mw-ui-quiet.mw-ui-checked {
color:#777;
}
.mw-ui-button.mw-ui-quiet:active,.mw-ui-button.mw-ui-quiet:disabled {
background:transparent;
}
a.mw-ui-button {
text-decoration:none;
line-height:normal;
}
a.mw-ui-button:hover,a.mw-ui-button:focus {
text-decoration:none;
}
.mw-ui-button-group > * {
min-width:48px;
border-radius:0;
float:left;
}
.mw-ui-button-group > :first-child {
border-top-left-radius:2px;
border-bottom-left-radius:2px;
}
.mw-ui-button-group > :not( :first-child ) {
border-left:0;
}
.mw-ui-button:focus::-moz-focus-inner,.mw-ui-button.mw-ui-progressive:focus::-moz-focus-inner,.mw-ui-button.mw-ui-primary:focus::-moz-focus-inner,.mw-ui-button.mw-ui-constructive:focus::-moz-focus-inner,.mw-ui-button.mw-ui-destructive:focus::-moz-focus-inner {
border-color:transparent;
}
.mw-ui-button:hover,.mw-ui-button:active,.mw-ui-button:visited,.mw-ui-button.mw-ui-progressive.mw-ui-quiet,.mw-ui-button.mw-ui-primary.mw-ui-quiet,.mw-ui-button.mw-ui-constructive.mw-ui-quiet,.mw-ui-button.mw-ui-destructive.mw-ui-quiet {
color:#555;
}
.mw-ui-button.mw-ui-progressive:disabled,.mw-ui-button.mw-ui-primary:disabled,.mw-ui-button.mw-ui-constructive:disabled,.mw-ui-button.mw-ui-destructive:disabled {
background:#ddd;
border-color:#ddd;
}
.mw-ui-button.mw-ui-progressive:disabled:hover,.mw-ui-button.mw-ui-primary:disabled:hover,.mw-ui-button.mw-ui-progressive:disabled:active,.mw-ui-button.mw-ui-primary:disabled:active,.mw-ui-button.mw-ui-progressive:disabled.mw-ui-checked,.mw-ui-button.mw-ui-primary:disabled.mw-ui-checked,.mw-ui-button.mw-ui-constructive:disabled:hover,.mw-ui-button.mw-ui-constructive:disabled:active,.mw-ui-button.mw-ui-constructive:disabled.mw-ui-checked,.mw-ui-button.mw-ui-destructive:disabled:hover,.mw-ui-button.mw-ui-destructive:disabled:active,.mw-ui-button.mw-ui-destructive:disabled.mw-ui-checked {
box-shadow:none;
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-primary.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-constructive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-destructive.mw-ui-quiet:disabled,.mw-ui-button.mw-ui-quiet:disabled {
color:#ccc;
}
