MediaWiki:Common.css: Difference between revisions

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

/* Colors from custom Blockheads skin */
:root {
	--bh-sky: #4c91c5;
	--bh-sky-mid: #3976A2;
	--bh-sky-dark: #326d9b;
	--bh-grass: #79a957;
	--bh-dirt: #a87b50;
	--bh-wood: #c7a477;
	--bh-wood-dark: #8b6846;
	--bh-paper: #f7f3eb;
	--bh-paper-dark: #ebe3d5;
	--bh-ink: #3b332b;
	--bh-muted: #776f65;
	--bh-border: #cdbda5;
}

div.editsection
{
font-size: 80% !important;
float: right !important;
}

.ns-6 .editsection,
.ns-8 .editsection,
.ns-12 .editsection,
.ns-14 .editsection
{
display: none !important;
}

/* Message Box */
.msgbox{
    display:flex;
    background:#FCFCFC;
    box-sizing:border-box;
    align-items:center;
    width:auto;
    padding:.4em .8em;
    margin:0 auto;
    margin-bottom:1em
}
.msgbox + .msgbox{
    border-top:none;
    margin-top:-1em
}
:not(.msgbox) + .msgbox,.msgbox:first-of-type{
    border-top-right-radius:.15em;
    border-top-left-radius:.15em
}
.msgbox #msgbox-iconimage,.msgbox #msgbox-image{
    margin:0 1.5em 0 .5em
}
.msgbox-mini{
    padding:.4em .5em;
    margin:0 0;
    margin-bottom:1em
}
.msgbox-mini #msgbox-icon{
    align-self:flex-start
}
.msgbox-mini #msgbox-iconimage,.msgbox-mini #msgbox-image{
    margin:0 .4em 0 .5em
}
.msgbox-mini #msgbox-text{
    font-size:small
}
.msgbox-red{
    background:hsl(0,75%,92%);
    border-left:4px solid hsl(0,75%,85%)
}
.msgbox-orange{
    background:hsl(40,75%,92%);
    border-left:4px solid hsl(40,75%,85%)
}
.msgbox-yellow{
    background:hsl(60,75%,92%);
    border-left:4px solid hsl(60,75%,85%)
}
.msgbox-green{
    background:hsl(120,75%,92%);
    border-left:4px solid hsl(120,75%,85%)
}
.msgbox-blue{
    background:hsl(215,75%,92%);
    border-left:4px solid hsl(215,75%,85%)
}
.msgbox-magenta{
    background:hsl(310,75%,92%);
    border-left:4px solid hsl(310,75%,85%)
}
.msgbox-purple{
    background:hsl(260,75%,92%);
    border-left:4px solid hsl(260,75%,85%)
}
.msgbox-gray{
    background:hsl(0,0%,92%);
    border-left:4px solid hsl(0,0%,85%)
}

/* Crafting Recipe */

.craft-recipe {
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}
 
.craft-header {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
 
.craft-bench-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
 
.craft-bench-icon img {
  max-width: 100%;
  height: auto;
}
 
.craft-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
 
.craft-item {
  text-align: center;
  min-width: 60px;
}
 
.craft-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border: 0.5px solid var(--border);
  border-radius: 4px;
}
 
.craft-icon img {
  max-width: 100%;
  height: auto;
}
 
.craft-qty {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
 
.craft-name {
  font-size: 12px;
  color: var(--text-primary);
  word-break: break-word;
}
 
.craft-name a {
  color: var(--text-accent);
  text-decoration: none;
}
 
.craft-name a:hover {
  text-decoration: underline;
}
 
.craft-plus {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 300;
}
 
.craft-equals {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 300;
  margin: 0 0.5rem;
}