IOP Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
m Backdrop filter for gallery and small fix to comment section
m Restrict display of nested tooltips
 
(45 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* Also see MediaWiki:Gadget-DesignTokens.css */


/* Replicate into MediaWiki:Mobile.css as necessary */


/*Mainpage no Title*/
/*Skip white background to display white logos when using Template:Thumb-Alpha*/
.thumbalpha > figure[typeof~="mw:File/Thumb"] > a > img {
background-color: transparent !important;
}


/* Small update for the MediaWiki Version 1.32.2 and Vector 22:07, 14 October 2018 */
/*1.44 text visibility corrections*/
figure[typeof~="mw:File/Thumb"] > figcaption{/*Image thumbnail text*/
color:var(--iopw-sys-palette-on-surface);
}
.cdx-message__content{
text-shadow: none;
}
.tabber__tab, .tabber__tab:visited{/*Tab titles*/
color: var(--iopw-sys-palette-primary-lighter);
}
.ext-WikiEditor-ManualWidget{/*Text color in dynamic preview tool*/
color:black;
}
.wikiEditor-ui .wikiEditor-ui-view {/*Text color in dynamic preview tool*/
  color: white !important;
}


#pagehistory li.selected {
#pagehistory li.selected {
Line 26: Line 44:
.mediawiki input[type='text'] {
.mediawiki input[type='text'] {
   color: var(--iopw-sys-palette-on-input);
   color: var(--iopw-sys-palette-on-input);
   background-color: (--iopw-sys-palette-input);
   background-color: var(--iopw-sys-palette-input);
   &::selection {
   &::selection {
     color: var(--iopw-sys-palette-on-primary);
     color: var(--iopw-sys-palette-on-primary);
Line 38: Line 56:
     color: var(--iopw-sys-palette-gray-99);
     color: var(--iopw-sys-palette-gray-99);
     background-color: #8a8a8a2b;
     background-color: #8a8a8a2b;
}
.mw-message-box {
text-shadow: none;
}
.mediawiki .wikiEditor-ui-toolbar .page-characters div span {
height: auto;
font-size: 1.25rem;
}
.mediawiki #msupload-dropzone {
height: auto;
}
}


Line 78: Line 109:
}
}


.rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
.mw-rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
     background-color: var(--iopw-sys-palette-primary-darker);
     background-color: var(--iopw-sys-palette-primary-darker);
     color: var(--iopw-sys-palette-on-primary);
     color: var(--iopw-sys-palette-on-primary);
Line 123: Line 154:
   border-top: thick solid gray;
   border-top: thick solid gray;
   padding-top: 10px;
   padding-top: 10px;
 
}
 
#flowthread,
.comment-container {
   & .comment-body textarea,
   & .comment-body textarea,
   & .comment-preview {
   & .comment-preview {
Line 405: Line 439:
     padding-left: var(--iopw-sys-size-4);
     padding-left: var(--iopw-sys-size-4);
     background: var(--iopw-sys-palette-gray-80);
     background: var(--iopw-sys-palette-gray-80);
  }
  & a.pager-disable {
    color: var(--iopw-sys-palette-gray-00);
    cursor: text;
    text-decoration: none
   }
   }
    
    
Line 531: Line 559:
     border-top: 0;
     border-top: 0;
   }
   }
}
#flowthread a.pager-disable,
a.pager-disable {
  color: var(--iopw-sys-palette-font-negative);
  cursor: text;
  text-decoration: none
}
}


Line 670: Line 705:
overflow: hidden;
overflow: hidden;
max-width: 800px;
max-width: 800px;
height:90px;
position:relative;
}
}


Line 682: Line 715:
.gradientDivs > h4 > .mw-editsection {display:none;}
.gradientDivs > h4 > .mw-editsection {display:none;}
.gradientDivs > div > div{background: linear-gradient(115deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 60%, transparent 90%);width:80%;padding:0 5px 0 5px;}
.gradientDivs > div > div{background: linear-gradient(115deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 60%, transparent 90%);width:80%;padding:0 5px 0 5px;}
.gradientDivs > div > p {width:75%;text-align:right;position:absolute;bottom:1em;}
.gradientDivs > div > p {width:75%;text-align:right;}


/* Stats Graph */
/* Stats Graph */
Line 826: Line 859:
   flex-flow: wrap;
   flex-flow: wrap;
   background-color: rgba(100, 100, 100, 0.3);
   background-color: rgba(100, 100, 100, 0.3);
}
.obtain-panel {
display: grid;
grid: auto / minmax(auto, max-content) 1fr;
grid-gap: 0.3rem;
& .obtainflagcontainer {
  color: var(--iopw-sys-palette-gray-00);
  text-shadow: none;
  display: flex;
  gap: 0.3rem;
  align-items: flex-start;
  flex-wrap: wrap;
  /* Remove in the future: */
  float: none;
  width: none;
}
& .obtainflag {
  border-radius: 0.2rem;
  padding-left: 0 0.2rem;
  white-space: nowrap;
  /* Remove in the future: */
  border: none;
  clear: both;
}
}
}


Line 849: Line 909:
.obtainflag.obtain-drop  { background:yellow; }
.obtainflag.obtain-drop  { background:yellow; }
.obtainflag.obtain-reward { background:salmon; }
.obtainflag.obtain-reward { background:salmon; }
.obtainflag.obtain-gacha { background:pink; }
.obtainflag.obtain-hoc-fragments { background: #f9d988; }
.obtainflag.obtain-hoc-fragments { background: #f9d988; }
.obtainflag.obtain-assimilation { background-color: #8abfee; }
.obtainflag.obtain-assimilation { background-color: #8abfee; }
Line 890: Line 951:
.profile-card .indexnumber { position: absolute; bottom: 5px; left: 80px; color: white;}
.profile-card .indexnumber { position: absolute; bottom: 5px; left: 80px; color: white;}


/* Equipment named card */
.entity-name {
.equipmentnamedcard {
display: inline-block;
   width: 80px;
& .entity-icon {
width: 1rem;
    display: inline-block;
    height: 1rem;
    vertical-align: text-bottom;
    background-size: contain;
    background-position: center;
    margin-right: 0.1rem;
}
}
 
/** GFL1 Fairy name */
.gfl-name-fairy {
&.fairy-battle {
color: var(--gfl-sys-unit-fairy-battle);
text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-battle);
}
&.fairy-strategy {
color: var(--gfl-sys-unit-fairy-strategy);
text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-strategy);
}
}
 
/** GFL1 Equipment name */
.gfl-name-equip {
&.rarity-2 {
color: var(--gfl-sys-rarity-2star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-2star);
}
&.rarity-3 {
color: var(--gfl-sys-rarity-3star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-3star);
}
&.rarity-4 {
color: var(--gfl-sys-rarity-4star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-4star);
}
&.rarity-5 {
color: var(--gfl-sys-rarity-5star);
text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-5star);
}
}
 
/* Equipment named card */
.equipmentnamedcard {
   width: 5rem;
   text-align: center;
   text-align: center;
   display: inline-block;
   display: inline-block;
   margin-right: 15px;
   margin-right: 1rem;
   vertical-align: top;
   vertical-align: top;
}
}


.equipmentnamedcard .equipmentcard {
.equipmentnamedcard .equipmentcard {
   margin-left: 5px;
   margin-left: 0.3125rem;
   margin-right: 5px;
   margin-right: 0.3125rem;
}
}


Line 915: Line 1,022:
.equipmentcard {
.equipmentcard {
   display: inline-block;
   display: inline-block;
  background-color: #303030;
  border: 2px solid #d0d0d0;
  width: 64px;
  height: 60px;
   position: relative;
   position: relative;
   overflow: hidden;
   overflow: hidden;
}
  background-color: var(--iopw-sys-palette-gray-20);
  border: 2px solid var(--iopw-sys-palette-gray-80);
  width: 4rem;
  height: 3.75rem;
 
  background-repeat: no-repeat;
  background-size: auto 0.45rem, contain;
  background-position: top right, top left;
 
  &.rarity2 { background-image: url(/images/2/25/2Stars.png), url(/images/9/96/2starE.png); }
  &.rarity3 { background-image: url(/images/d/dd/3Stars.png), url(/images/9/91/3starE.png); }
  &.rarity4 { background-image: url(/images/4/41/4Stars.png), url(/images/2/2e/4starE.png); }
  &.rarity5 { background-image: url(/images/8/81/5Stars.png), url(/images/d/d4/5starE.png); }


.equipmentcard .equipmentcardfiller {
  & .overlay-link {
  position: absolute;
    position: absolute;
  z-index: 5;
    width: 100%;
}
    height: 100%;
 
    top: 0;
.equipmentcard img.typeicon {
    left: 0;
  position: absolute;
  }
  z-index: 2;
 
  top: 0;
  & .type {
  left: 0;
    position: absolute;
}
    top: 0;
 
    left: 0;
.equipmentcard .raritystars {
    width: 1.6rem;
  position: absolute;
   }
  margin-top: 1px;
 
  margin-left: auto;
  & .equipimage {
  margin-right: 1px;
    position: absolute;
   height: 8px;
    margin-top: 3px;
  z-index: 3;
    top: 0;
  top: 0px;
    left: 0;
  right: 0px;
  }
}
}


.equipmentcard .equipimage {
  position: absolute;
  margin-top: 3px;
  top: 0;
  left: 0;
}


.event-node-difficulties .tabs-content {
.event-node-difficulties .tabs-content {
Line 1,062: Line 1,171:


/*image*/
/*image*/
.mediawiki .thumb .thumbimage {
width: 100%;
height: 100%;
}


div.thumbinner {
div.thumbinner {
     border: 0;
     border: 0;
     background-color: rgba(255,255,255,0.25);
     background-color: rgba(255,255,255,0.25);
}
.layout-image {
display: block;
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
}


Line 1,083: Line 1,204:


   & .doll-image {
   & .doll-image {
margin-top: 0.75rem;
background-size: contain;
width: 100%;
background-position-y: 0.8rem;
height: auto;
  }
object-fit: contain;
}


   & .rarity-class {
   & .rarity-class {
position: absolute;
position: absolute;
top: 0.05rem;
top: 0;
left: 0.05rem;
left: 0;
width: 3.3125rem;
background-position: 0.075rem 0.075rem;
height: auto;
pointer-events: none;
}
  }


   & .index {
   & .index {
Line 1,110: Line 1,229:
position: absolute;
position: absolute;
left: 0;
left: 0;
}
user-select: none;
  }


   & .card-frame {
   & .card-frame {
Line 1,120: Line 1,240:
top: 0;
top: 0;
left: 0;
left: 0;
}
  }


   & > .plainlinks.card-frame > .external.text {
   & > .plainlinks.card-frame > .external.text {
Line 1,128: Line 1,248:
width: 100%;
width: 100%;
height: 100%;
height: 100%;
}
  }


   & .name {
   & .name {
Line 1,149: Line 1,269:
position: absolute;
position: absolute;
overflow: hidden;
overflow: hidden;
}
user-select: none;
  }


   &.doll-rarity-2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); }
   &.doll-rarity-2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); }
Line 1,161: Line 1,282:
.card-bg {
.card-bg {
   background-image:url("/images/5/5a/Infobox_bg.png");
   background-image:url("/images/5/5a/Infobox_bg.png");
   width:256px;
   width:auto;
   height:456px;
   height:456px;
   padding:10px;
   padding:10px;
Line 1,319: Line 1,440:


.icon-bg-2star-small {
.icon-bg-2star-small {
background-image:url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
background-image: url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
padding:5px;
padding: 0.3125rem;
display: inline-block;
width: 3.125rem;
height: 3.125rem;
background-size: contain;
& img {
height: 100%;
width: 100%;
}
}
 
.gfl-item {
display: flex;
padding: 0.3125rem;
position: relative;
& h3 {
display: none;
}
& .container {
background-color: rgba(0, 0, 0, 0.5);
width: 21.25rem;
padding: 0.625rem 0.625rem 1.875rem 0.625rem;
}
& .item-background {
background-image: url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
background-size: cover;
padding: 0.3125rem;
float: left;
margin-right: 1.25rem;
width: 3.125rem;
height: 3.125rem;
& img {
height: 100%;
width: 100%;
}
}
& .item-name {
background: rgba(127, 127, 127, 0.4);
display: flex;
padding: 0.1rem 0.3125rem
}
& .item-desc {
border: 1px darkgrey solid;
width: 100%;
margin-bottom: 0.5rem;
padding: 0.5rem;
text-align: justify;
}
& .item-addon {
position: absolute;
left: 1rem;
bottom: 1rem;
}
}
}


Line 1,484: Line 1,665:
div#left-navigation{margin-left:0;}
div#left-navigation{margin-left:0;}
.mw-body {margin-left:0;}
.mw-body {margin-left:0;}
.aboutcontainer {flex-flow:row wrap;}
#aboutwiki, #aboutgame {width:100%;}
}
}




.floatright {
margin: 0;
float: right;
}
.floatleft {
margin: 0;
float: left;
}


/* floatright */
div.floatright, table.floatright {margin: 0;}
/* floatleft */
div.floatleft, table.floatleft {margin: 0;}
/* standard link colors */
a, .mw-body a.external  { color: var(--iopw-sys-palette-primary); } /* normal unvisited links */
a:visited .mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--iopw-sys-palette-primary-darker); } /* visited links */
.mw-body a.new { color: var(--iopw-sys-palette-font-negative); } /* new links */
.mw-body a.extiw, .mw-body a.external {
background-position: center right;
background-repeat: no-repeat;
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E");
padding-right: 13px;
}


/* plain links*/
/* plain links*/
Line 1,542: Line 1,712:
background: rgba(50,50,50,0.5);
background: rgba(50,50,50,0.5);
overflow: auto;
overflow: auto;
}
.gfwiki-message-box + .gfwiki-message-box {
margin-top: 1rem;
}
}


Line 1,709: Line 1,882:
}
}
/* mutilmediaViewer 信息栏修复 */
/* mutilmediaViewer 信息栏修复 */
.mw-mmv-image-metadata {
margin-top: 0;
}
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column {
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column {
     width: 30%;
     width: 30%;
Line 1,902: Line 2,078:
display:inline-block;
display:inline-block;
box-sizing:border-box;
box-sizing:border-box;
width:800px;
color:white;
}
}


Line 1,969: Line 2,147:
background-position: -1.5em -0.2em,left top;
background-position: -1.5em -0.2em,left top;
margin-right: 10px;
margin-right: 10px;
color:white;
}
}


Line 2,023: Line 2,202:
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: var(--iopw-sys-size-2);
   gap: var(--iopw-sys-size-2);
   justify-content: center;
   margin-left: auto;
  margin-right: auto;


   & .game-thumb {
   & .game-thumb {
Line 2,033: Line 2,213:
   & .game-thumb-img {
   & .game-thumb-img {
     position: absolute;
     position: absolute;
    object-fit: cover;
     filter: brightness(50%);
     filter: brightness(50%);
     transition: 0.35s ease-in-out;
     transition: 0.35s ease-in-out;
    & .mw-file-element {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
   }
   }


Line 2,407: Line 2,591:
     z-index: 1;
     z-index: 1;


     bottom: 100%;
     top: 17px;
     left: 50%;
     left: 10px;
    margin-left: -150px; /* Use half of the width, to center the tooltip */
}
}


Line 2,422: Line 2,605:
}
}


.tooltip:hover .tooltiptext {
.tooltip:hover > .tooltipcontainer > .tooltiptext {
     visibility: visible;
     visibility: visible;
    display: block;
}
}
.tooltiptext .tooltiptext-content {
.tooltiptext .tooltiptext-content {
   margin: 17px;
   margin: 17px;
   margin-bottom: 20px;
   margin-bottom: 20px;
  display: block;
}
}
.tooltiptext-corners {
.tooltiptext-corners {
Line 2,556: Line 2,741:
display: inline-block;
display: inline-block;
height: 250px;
height: 250px;
width: 128px;
width: 126px;
overflow: hidden;
overflow: hidden;
margin-right: 20px;
margin-right: 20px;
Line 2,574: Line 2,759:
.pnc-index-entry .back {
.pnc-index-entry .back {
position: absolute;
position: absolute;
top: 20px;
bottom: -30px;
left: 0px;
}
}
.pnc-index-entry .hero {
.pnc-index-entry .hero {
position: absolute;
position: absolute;
top: 0px;
left: 1px;
width: 126px;
}
}
.pnc-index-entry .front {
.pnc-index-entry .front {
position: absolute;
position: absolute;
bottom: 0px;
bottom: -28px;
}
}
.pnc-index-entry .company {
.pnc-index-entry .company {
Line 2,595: Line 2,776:
}
}
.pnc-index-entry .rarity {
.pnc-index-entry .rarity {
position: absolute;
position: relative;
bottom: 32px;
top: 190px;
left: 4px;
left: 4px;
height: 16px;
}
}
.pnc-index-entry .name {
.pnc-index-entry .name {
Line 2,664: Line 2,844:
.heading-holder .tagline {
.heading-holder .tagline {
display:none;
display:none;
}
/* More readable standard toggle button */
.mw-collapsible-toggle-default .mw-collapsible-text{
color: #3877df;
}
}
Retrieved from "http://iopwiki.com/wiki/MediaWiki:Common.css"