MediaWiki:Common.css

/***** CSS placed here will be applied to all skins on the entire site. *****/

.portable-infobox.pi-theme-item .pi-image-thumbnail {
    background : url("https://vignette.wikia.nocookie.net/cherry-forest/images/f/fa/Inventory_slot_background.png") no-repeat;
    padding: 2px;
}
 
div.icon-frame,
div.icon-frame2 {
            position: relative;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            margin-top: 0px;
            width: 68px;
            height: 68px;
            background : url("https://vignette.wikia.nocookie.net/cherry-forest/images/f/fa/Inventory_slot_background.png") center;
            z-index: 1;   
}
div.icon,
div.icon2 { 
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /* margin: ;
            padding : ;*/
            width:68px ;
            height:68px ; 
            z-index: 5;
}

.pi-navigation {
    text-align: center;
    /*padding: 5px 0px 0px 0px !important;*/
    background-color:#FFFFFF;
}

/* Mark redirects in Special:Allpages and Special:Watchlist */
.allpagesredirect {
   font-style: italic;
}
.allpagesredirect:after {
   color: var(--wiki-content-text-mix-color);
   content: " (redirect)"
}
.watchlistredir {
   font-style: italic;
}

/* Copying stuff from wikia.css to here, due to FandomDesktop changes */

/* Notifications */
#WallNotifications .bubbles {
    background-image: url("https://images.wikia.nocookie.net/__cb20130809184047/dont-starve/ru/images/1/1f/%D0%A1%D1%83%D0%BD%D0%B4%D1%83%D0%BA_%D0%BF%D0%B0%D0%BD%D0%B4%D0%BE%D1%80%D1%8B.png");
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    margin-top: -3px;
    margin-left: -8px;
}
 
#WallNotifications .bubbles:hover {
    background-image: url("https://images.wikia.nocookie.net/dont-starve/ru/images/e/e9/%D0%A1%D1%83%D0%BD%D0%B4%D1%83%D0%BA_%D0%9F%D0%B0%D0%BD%D0%B4%D0%BE%D1%80%D1%8B2.png");
    background-repeat: no-repeat;
    width: 38px;
    height: 35px;
    margin-top: -11px;
    margin-left: -10px;
}

/* User profile header */
.UserProfileMasthead .masthead-info hgroup {
	padding-top: 10px;
    padding-bottom: 15px;
	background: #482D37;
}

/* User right group icons */
.tag.usergroup-bureaucrat {
	background-color: darkorange !important;
	color: white !important;
    font-weight: bolder;
}
.tag.usergroup-sysop {
	background-color: red !important;
    color: white !important;
    font-weight: bolder;
}
.tag.usergroup-bot {
	background-color: brown !important;
    color: white !important;
    font-weight: bolder;
}
.tag.usergroup-chatmoderator {
	background-color: maroon !important;
    color: white !important;
    font-weight: bolder;
}
.tag.usergroup-content-moderator {
	background-color: green !important;
	color: yellow !important;
    font-weight: bolder;
}
.tag.usergroup-rollback {
	background-color: blue !important;
	color: white !important;
    font-weight: bolder;
}
.tag.usergroup-threadmoderator {
	background-color: purple !important;
	color: white !important;
    font-weight: bolder;

}
#UserProfileMasthead .tag-container .autoconfirmed-user {
    display: none !important;
}

/* Tabber style. Street cred to Hedgeg*/
ul.tabbernav { /*tabs row+general parameters*/
    background-color: #EDEBDC;
    font-size: 22px;
    text-align:center;
}
ul.tabbernav li a /*tabs*/ {
    color:#3A3A3A !important;
    background: none !important;
}
ul.tabbernav li a:hover /*hover tab*/ {
    color:#3A3A3A !important;
    background-color: #B8939F !important;
}
ul.tabbernav li.tabberactive a { /*active tab*/
    color:#C3B3A3 !important;
    background-color: #482D37 !important;
}

/** A few hover classes to allow mouse over behavior without javascript. 
These are from Don't Starve Wiki, so prefixed with DSW to avoid potential conflicts.
DSWHoverTabContainer - is to be applied to the top container which contains all tabs.
DSWHoverTab - is to be applied to a single tab of data, contained by the DSWHoverTabContainer
DSWHoverTabDefault - is to be applied to only one of the elements that has DSWHoverTab class to make it the default tab
DSWHoverTabSelector - is to be applied to selectors of tabs. This must be inside a DSWHoverTab, and must not be paret or child of DSWHoverTabContent
DSWHoverTabContent - is to be applied to content of tabs. This must be inside a DSWHoverTab, and must not be paret or child of DSWHoverTabSelector
**/

/*Hide the top container, only used for linking css styles*/
.DSWHoverTabContainer{
    visibility:hidden;
}

/*Content is not displayed by default, but it overrides the parent so that it would be visible*/
.DSWHoverTabContent{
    display:none;
    visibility:visible;
}

/*Selectors are by default transparent*/
.DSWHoverTabSelector{
    -webkit-filter: opacity(40%); /* Chrome, Safari, Opera */
    filter: opacity(40%); /* standard */
    visibility:visible;
}
 
/*When the tab is hovered, or 
when the container isn't hovered, but the tab is default
make the selector opaque*/
.DSWHoverTab:Hover .DSWHoverTabSelector, 
.DSWHoverTabContainer:not(:Hover) .DSWHoverTabDefault .DSWHoverTabSelector{
    -webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
    filter: opacity(100%); /* standard */
}

/*When the tab is hovered, or 
when the container isn't hovered, but the tab is default
make the content display*/
.DSWHoverTab:Hover .DSWHoverTabContent, 
.DSWHoverTabContainer:not(:Hover) .DSWHoverTabDefault .DSWHoverTabContent{
    pointer-events: none; /* The newly displayed container should not block infobox tabbers */
    display:block;
}

/** Styling for the warning message when attempting to reply old comments **/
.DSWOldCommentWarning{
    color:red;
}

/** Replacing the default frames on the leaderboard with the custom ones for this wiki **/
#about-achievements ul .bronze span {
    background-image: url("https://vignette.wikia.nocookie.net/dont-starve-game/images/2/27/Achievements_Leaderboard_Frame_Bronze.png/revision/latest?cb=20190518213939");
}

#about-achievements ul .silver span {
    background-image: url("https://vignette.wikia.nocookie.net/dont-starve-game/images/5/5c/Achievements_Leaderboard_Frame_Silver.png/revision/latest?cb=20190518213913");
}

#about-achievements ul .gold span {
    background-image: url("https://vignette.wikia.nocookie.net/dont-starve-game/images/0/01/Achievements_Leaderboard_Frame_Gold.png/revision/latest?cb=20190518213902");
}

/* imagewidth for infoboxes fix per queron */
.portable-infobox.pi-theme-64x .pi-image-thumbnail {
  max-width: 64px;
  height: auto;
}

.portable-infobox.pi-theme-80px .pi-image-thumbnail {
  max-width: 80px;
  height: auto;
}

.portable-infobox.pi-theme-90px .pi-image-thumbnail {
  max-width: 90px;
  height: auto;
}

.portable-infobox.pi-theme-100px .pi-image-thumbnail {
  max-width: 100px;
  height: auto;
}

.portable-infobox.pi-theme-110px .pi-image-thumbnail {
  max-width: 110px;
  height: auto;
}

.portable-infobox.pi-theme-120px .pi-image-thumbnail {
  max-width: 120px;
  height: auto;
}

.portable-infobox.pi-theme-130px .pi-image-thumbnail {
  max-width: 130px;
  height: auto;
}

.portable-infobox.pi-theme-140px .pi-image-thumbnail {
  max-width: 140px;
  height: auto;
}

.portable-infobox.pi-theme-150px .pi-image-thumbnail {
  max-width: 150px;
  height: auto;
}

.portable-infobox.pi-theme-160px .pi-image-thumbnail {
  max-width: 160px;
  height: auto;
}

.portable-infobox.pi-theme-170px .pi-image-thumbnail {
  max-width: 170px;
  height: auto;
}

.portable-infobox.pi-theme-180px .pi-image-thumbnail {
  max-width: 180px;
  height: auto;
}

.portable-infobox.pi-theme-190px .pi-image-thumbnail {
  max-width: 190px;
  height: auto;
}

.portable-infobox.pi-theme-200px .pi-image-thumbnail {
  max-width: 200px;
  height: auto;
}

.portable-infobox.pi-theme-210px .pi-image-thumbnail {
  max-width: 210px;
  height: auto;
}

.portable-infobox.pi-theme-220px .pi-image-thumbnail {
  max-width: 220px;
  height: auto;
}

.portable-infobox.pi-theme-230px .pi-image-thumbnail {
  max-width: 230px;
  height: auto;
}

.portable-infobox.pi-theme-240px .pi-image-thumbnail {
  max-width: 240px;
  height: auto;
}
/* end of imagewidth for infoboxes fix per queron */

/* The following code was copied from the Templates Wiki to allow for collapsible navboxes - Bluegeist */
/* For [show]/[hide] link of javascript collapsible tables */
.collapseButton {         /* 'show'/'hide' buttons created dynamically by the        */
    float: right;         /* CollapsibleTables javascript in [[MediaWiki:Common.js]] */
    font-weight: normal;  /* are styled here so they can be customised.              */
    text-align: right;
    width: auto;
}
/* End of collapsible code */
/* End of copy from wikia.css */

/* ---------------------------------------------------------------------------------------------------------------

For Template:Quotes and it's subtemplate Template:Quotes/single

--------------------------------------------------------------------------------------------------------------- */

.DSWHoverTabContainer {
    min-width:320px;
    position:relative;
    padding-top:25px;
}

.DSWHoverTabSelector {
    position:absolute;
    width:25px;
    padding-left:3px;
}
.DSWHoverTabSelector img {
    width: 20px;
    height: auto;
}

.DSWHoverTabContent {
    padding-top:25px;
}

.DSWQuote {
    display:table; 
    margin:0px auto; 
    padding-top:10px; 
    font-size:34px; 
    font-family:'Times New Roman', serif;
}

.DSWQuoteText {
    font-size:16px;
    font-family:'Segoe Print';
}

.DSWQuoteSource {
    font-size:12px;
    text-align:right;
    font-family:'Segoe Print'
}

/* CSS placed here will be applied to all skins */

/****************************
* Simple dark api.php pages *
*****************************/
@media (prefers-color-scheme: dark) {
  body {
    background-color:#20211f;
    border-color: #7b7261;
    color: #f6ecdb;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: rgb(234, 224, 207);
    border-color: rgb(83, 84, 81);
  }
  
  .mw-highlight .s2 {
    color: rgb(206, 99, 91);
  }
  
  a {
    color: rgb(133, 180, 221);
  }
  
  a:visited {
    color: rgb(141, 127, 218);
  }
  
  pre, code, .mw-code {
    background-color: rgb(34, 35, 33);
    color: rgb(234, 224, 207);
    border-color: rgb(63, 64, 62);
  }
}
/***************
* End dark API *
****************/

/********************************
* Miscellaneous utility classes *
*********************************/
.responsive-image {
	max-width:100%;
	height:auto;
}

.theme-dark .invert-on-dark,
.theme-light .invert-on-light {
    filter:invert(100%);
}

.pixelated {
  image-rendering:pixelated;
}

@media screen and (min-width:720px){
	.mobileonly {
		display:none;
	}
}
@media screen and (max-width:720px) {
	.nomobile {
		display:none;
	}
}
/***************************
* End misc utility classes *
****************************/

/**************************
* [[Template:Doc]] styles *
***************************/
.documentation {
    margin: 0em auto 1em;
    background-color: rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.1);
    border: 2px solid var(--wiki-content-border-color);
    border-radius: 1em;
    padding: 1em;
}

.documentation-header {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--wiki-content-border-color);
    margin-bottom: 1ex;
}
/**************************
* End Template:Doc styles *
***************************/


/**************************
* Main page layout        *
* [[Cherry Forest Wiki]]  *
***************************/

#mp-intro-box {grid-area:intro;}
#mp-start-box {grid-area:start;}
#mp-about-box {grid-area:about;}
#mp-notes-box {grid-area:notes;}
#mp-todo-box {grid-area:todo;}

#mp-container {
  display:grid;
  grid-template-areas:"intro" "start" "about" "notes" "todo";
  grid-template-columns:1fr;
  gap:5px;
}

@media screen and (min-width:990px) {
  #mp-container {
    grid-template-areas:"intro intro" "start start" "about todo" "about notes";
    grid-template-columns:1fr 1fr;
  }
}

@media screen and (min-width:1350px) {
  #mp-container {
    grid-template-areas:"intro intro intro" "about about start" "about about todo" "about about notes";
    grid-template-columns:1fr 1fr 1fr;
  }
}

.mp-box { 
  display:flex;
  flex-flow:column nowrap;
  width: calc(100% - 2px);
  box-sizing: border-box;
  background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
  border:1px solid var(--wiki-content-border-color);
  border-radius:2px;
	box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1);
  padding:5px;
}

.mp-slideshow {
  text-align:center;
}

.HomepageTitle {
	color: var(--wiki-accent-label-color);
	background-color: var(--wiki-accent-color); 
	border-radius: 2px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
	font-size: 110%;
	font-weight: bold;
	padding-top: 3.5px;
	padding-bottom: 2px;
	text-indent: 15px;
	text-shadow: 1px 3px 3px black;
	width: 100%;
}

.FeaturedArticle {
  max-width:850px;
  margin:5px auto;
  background:var(--wiki-content-background-color);
  border:1px solid var(--wiki-content-border-color);
  padding:5px;
}

.mp-gallery {
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  justify-content:space-evenly;
  gap:10px;
  margin:10px;
}

.mp-gallery__item {
  flex:clamp(300px, calc(33% - 10px), 500px) 0 1;
  height:300px;
  display:flex;
  align-items:flex-start;
  justify-content: center;
  position:relative;
  overflow:hidden;
  background-color:rgba(var(--wiki-content-background-color--secondary--rgb), 0.9);
  border:1px solid var(--wiki-content-border-color);
  box-sizing:border-box;
}

.mp-gallery__item img {
  width:100%;
  height:auto;
}

.mp-gallery__caption {
  position:absolute;
  bottom:0;
  width:100%;
  background-color:rgba(var(--wiki-content-background-color--rgb), 0.9);
  box-sizing:border-box;
  padding:10px;
}
/***********************
* End main page layout *
************************/

/***********************
* [[Template:License]] *
************************/
.license {
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  background-color:var(--wiki-content-background-color--secondary);
  border:1px solid var(--wiki-content-border-color);
  padding:0.1em;
  margin:0.5em 0 0.5em 0;
}

.copyright-logo {
  filter:var(--wiki-icon-general-filter);
}
/***********************
* End Template:License *
************************/

/****************************
* [[Template:Navbox]] style *
*****************************/
table.navbox {
  border: 1px solid var(--wiki-content-border-color);
  background:var(--wiki-content-background-color--secondary);
  clear: both;
  font-size: 88%;
  margin: auto;
  padding: 1px;
  text-align: center;
  width: 100%;
}

/* Border between adjacent navboxes */
table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

.navbox-group {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap;
    width:15%;
}

.navbox-list {
    border-color: transparent;
}

/* Level 1 color */
.navbox-title,
table.navbox th {
  background: var(--wiki-navigation-background-color);
  color:var(--wiki-navigation-text-color);
}

/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.1);
}

/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: rgba(0, 0, 0, 0.05);
}

/* Even row striping */
.navbox-even {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.05);
}

/* Odd row striping */
.navbox-odd {
    background: transparent;
}

.navbar {
    font-size: 88%;
    font-weight: normal;
}

.navbox .navbox-title a,
.navbox .navbox-title a:visited,
.navbox .navbox-title a.external,
.navbox .navbox-title a.external:visited {
  color:var(--wiki-navigation-text-color)
}

.navbox-list.hlist ul {
  margin:0;
}

.navbox-list.hlist li {
  display:inline-block;
}

.navbox-list.hlist li:not(:first-child)::before {
  content:'\2022\0020';
  margin:0 0.2em;
}

/*********************
* End Navbox styling *
**********************/

/************
* Infoboxes *
*************/
:root {
	--pi-background: var(--wiki-content-background-color);
	--pi-secondary-background: var(--wiki-accent-color);
	--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
	--pi-secondary-background-label: var(--wiki-accent-label-color);
	--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
}

.portable-infobox {
	border:4px solid var(--pi-border-color);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align:center;
	font-size:1.5em;
	background:rgba(var(--pi-secondary-background--rgb), 0.75);
	color:var(--pi-secondary-background-label);
}

.portable-infobox .pi-data {
	background:rgba(var(--pi-secondary-background--rgb), 0.18);
}

.portable-infobox .pi-image {
	padding: 8px;
}

.pi-image-thumbnail {
	max-width:100%;
}

/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
	border-bottom: 0;
	font-family: inherit;
	font-weight: 700;
	margin: 0;
}
/****************
* End infoboxes *
*****************/

/*****************************
* Used by [[Template:Ambox]] *
******************************/
.ambox {
    background-color: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-border-color);
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox + .ambox {
    margin-top: -2px;
}

.ambox-text {
    padding: 0.25em 0.5em;
}

.ambox-image {
    padding: 2px 0px 2px 0.5em;
    text-align: center;
    width: 60px;
}

.ambox-tiny .ambox-image {
    padding: 2px 0.5em;
    text-align: left;
    width: auto;
}

/* Ambox colors */
.ambox-blue {
    border-left: 10px solid #1e90ff;
}

.ambox-red {
    border-left: 10px solid #b22222;
}

.ambox-orange {
    border-left: 10px solid #f28500;
}

.ambox-yellow {
    border-left: 10px solid #f4c430;
}

.ambox-purple {
    border-left: 10px solid #9932cc;
}

.ambox-gray {
    border-left: 10px solid #bba;
}

.ambox-green {
    border-left: 10px solid #228b22;
}
/*********************
* End Template:Ambox *
**********************/

/********************************************
* Utility classes for standard MW galleries *
*********************************************/
.gallery.centered {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.gallery.spaced {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-evenly;
  margin-left:unset;
}
/**********************
* End gallery classes *
***********************/

/******************************
* Used by [[Template:Recipe]] *
*******************************/
.recipe {
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  gap:2px;
  margin:4px 0;
}

.recipe-item {
  display:flex;
  flex-flow:row wrap;
  gap:2px;
}
/**********************
* End Template:Recipe *
***********************/

/* import Konstanting font*/
@font-face {
    font-family: 'Konstanting';
    src: url(https://static.wikia.nocookie.net/indisoyuz/images/d/d9/Konstanting.woff/revision/latest?cb=20230319193559&path-prefix=ru) format('woff');
}
/* import Belisa plumilla font*/
@font-face {
    font-family: 'Belisa_plumilla';
    src: url(https://static.wikia.nocookie.net/indisoyuz/images/8/87/Belisa_plumilla.woff/revision/latest?cb=20230319192002&path-prefix=ru) format('woff');
}