MediaWiki:Common.css: Difference between revisions

No edit summary
No edit summary
Line 120: Line 120:


/* Frontpage stuff */
/* Frontpage stuff */
.skill-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}
.skill-grid {
.skill-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 10px 20px;
   gap: 12px 18px;
   background: #f6f6f6;
   background: #f6f6f6;
   padding: 15px;
   padding: 20px;
   border-radius: 10px;
   border-radius: 12px;
   font-family: sans-serif;
   font-family: sans-serif;
   color: #101418;
   color: #101418;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
}


Line 134: Line 140:
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   padding: 5px 10px;
   padding: 6px 10px;
   border-radius: 6px;
   border-radius: 8px;
   transition: background 0.2s ease;
   transition: background 0.2s ease;
   cursor: pointer;
   cursor: pointer;
Line 141: Line 147:


.skill-icon {
.skill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
   padding: 4px;
   padding: 4px;
   margin-right: 10px;
   margin-right: 10px;
   border-radius: 4px;
   border-radius: 6px;
  width: 28px;
  height: 28px;
   flex-shrink: 0;
   flex-shrink: 0;
  width: 24px;
   text-align: center;
   text-align: center;
  font-size: 16px;
}
}


/* Skill colors */
/* Hover Backgrounds */
.skill-hitpoints:hover { background-color: #f2da85; }
.skill-hitpoints:hover { background-color: #f2da85; }
.skill-accuracy:hover { background-color: #d6f47c; }
.skill-accuracy:hover { background-color: #d6f47c; }
Line 167: Line 178:
.skill-smithing:hover { background-color: #ff7cf1; }
.skill-smithing:hover { background-color: #ff7cf1; }


/* Always-colored icon boxes */
.skill-hitpoints .skill-icon { background-color: #f2da85; }
.skill-hitpoints .skill-icon { background-color: #f2da85; }
.skill-accuracy .skill-icon { background-color: #d6f47c; }
.skill-accuracy .skill-icon { background-color: #d6f47c; }