MediaWiki:Mobile.css

Note: After saving, you may have to bypass your browser's cache to see the changes. Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac); IE: hold Ctrl while clicking Refresh, or press Ctrl-F5; Konqueror: simply click the Reload button, or press F5; Opera users may need to completely clear their cache in Tools→Preferences. — More skins

/* CSS placed here will affect users of the mobile site */

.desktop-only {
  display: none;
}

.votings-only-0 .votings-non-0,
.votings-only-non-0 .votings-0 {
  display: none;
}

/* format wikidialog interactive elements so they stand out. [[Category:Dialog CSS pages]]
   shade-and-outline enabled buttons and menus, outline input boxen
*/
input[type="button"].wikidialog-button, button.wikidialog-button, select.wikidialog-select {
  background-color: #e8e8e8;
  border: 1px solid #e0e0e0;
}
[disabled].wikidialog-button {
  background-color: white;
}
input[type="text"].wikidialog-text, textarea.wikidialog-textarea {
  border: 1px solid #c0c0c0;
}

/* Explicit article message boxen
   differences from desktop xambox: image padding, bar width
*/
table.xambox-mobile {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  background: #f8fcff;
  border: 1px solid #aaa;
  border-left: 10px solid #39f;          /* default "notice" blue */
}
table.xambox-mobile th,
table.xambox-mobile td {                 /* message body cell(s) */
  padding: 0.25em 0.5em;                 /* 0.5em left/right */
}
table.xambox-mobile td.xambox-image {     /* left image cell */
  width: 52px;
  padding: 2px 0px;                      /* 0px left/right */
  text-align: center;
}
table.xambox-mobile td.xambox-imageright { /* right image cell */
  width: 52px;
  padding: 2px 0px;                      /* 0px left/right */
  text-align: center;
}
table.xambox-type-notice {
  border-left: 10px solid #39f;          /* Blue */
}
table.xambox-type-serious {
  border-left: 10px solid #c00;          /* Red */
}
table.xambox-type-content {
  border-left: 10px solid #f63;          /* Orange */
}
table.xambox-type-style {
  border-left: 10px solid #fc3;          /* Yellow */
}
table.xambox-type-merge {
  border-left: 10px solid #95b;          /* Purple */
}

/* rounded corners class for block elements */
.roundedCorners {
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

/* for translated quotes */
.lang-quote {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    color: #0645ad;
    cursor: pointer;
}

.lang-quote .transquote {
    visibility: hidden;
    width: 300px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
    background: rgba(0, 0, 0, 0.8);
}

.lang-quote:hover .transquote {
    visibility: visible;
    opacity: 1;
    font-size: 100%;
}

/* float in the title bar (Ex little FA icons in top-right corner) */
/*! important is to overide legacy inline stuff */
/*Vector.css overides this for vector! */
/*This assumes that the page body is not relatively positioned (aka in everything but vector)*/
.float_in_title { position: absolute; z-index: 100; right: 20px; top: 20px  !important;}

/* publish tag for mobile site needs 100% width */
#social_bookmarks { width: 100% !important; }