MediaWiki:Custom-common.less/site.less

/** * This page is for stylings that are for classes that we create for our own use in certain site components * For fixes of site elements that are not created by us, consider using general.less

/* Message Boxes */ .messagebox.messagebox-disambiguations { color: #222; font-size: 95%; text-align: center; margin: 6px auto; padding: 0 10px; border: 3px double #625; border-radius: 10px; background: #9B7070; display: table; } .darkmsgbox { margin: 6px auto 6px auto; .darkmsgbox-image { padding: 15px; color: black; background: #754242; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; }	.darkmsgbox-text { color: white; background: #542e2e; padding: 3px 8px; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; }	.darkmsgbox-bottom { text-align: center; background-color: #2c1e20; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; } } .messagebox-narrow-wrapper { text-align:center; overflow-x:hidden; margin:5px 5% 5px 5%; padding:1px 5px; } .messagebox.messagebox-darkgreen { display:inline-block; text-align:left; border-color:#8f8; background:#1d251c } .messagebox-image:not(.messagebox-image-right) { padding-right: 12px; } .messagebox-image-right { padding-left: 12px; }

/* AF Warning Styles */ .afwarning-box { display: flex; align-items: center; justify-content: space-evenly; margin-left: 2%; margin-right: 2%; padding: 10px; border-radius: 30px; background-color: #872525; &.disallow { background-color: #543c3f; }	&.warn { background-color: #843d0a; }	&.default { background-color: #872525; }	.afwarning-mark { opacity: 75%; }	.afwarning-main { margin-left: 1em; margin-right: 2em; max-width: 50%; }	.afwarning-title { font-size: 2.3em; } }

/* Submit Buttons */ .button.article-button-submit { padding: 10px 20px; font: bold 100% arial; }

/* Delete Box */ .delete-box { padding: 15px; margin: 5px; background-color: #7f1d1d; text-align: center; hr { margin: 0.1em 3px; border: 0.5px solid tan; }   .button { padding: 10px; font-size: 1em; font-weight: bold; width: 100%; height: 100%; }   .delete-box-buttons { margin-left: 2%; margin-right: 2%; font-size: 14px; td:first-of-type { text-align: left; }       td:last-of-type { margin-right: 2em; }   }    .delete-box-reason { font-size: 14px; } }

/* Comment id */ .comment-id-display, .reply-id-display { color: var(--theme-page-text-color); text-align: right; } .comment-id-display abbr, .reply-id-display abbr { font-size: .8em; text-align: right; cursor: default; text-decoration: none; padding: .4em 1em;

&:hover { background-color: rgba(254, 195, 86, .1); color: var(--theme-link-color); } } .comment-id-display { margin: 0 1em; }

/* Article Comments Notice */ text-align: left; margin-top: 1em; line-height: 1.8em; border: thin solid #F55; padding: 1em; }
 * 1) articleCommentsNotice {

/* Fetchur request styling */ .article-fetchur-request { overflow-x: hidden;

>span { font-size: large; display: block; border: 2px solid #ed9a01; border-radius: 5px; padding: 10px; text-align: center;

>span { font-size: medium; }   } }

/* Preloaded Styles for Tooltips Editor */ .editTooltips-Loading { padding: 1em; outline: #a2a2a2 groove; border: thin transparent solid; } .editTooltips-Loading img { max-width: 100%; height: auto; }

/* Preloaded Styles for JSCalculator */ .jcConfig { display: none; } .jcLoadspace { width: 40%; border: 1px var(--theme-accent-color) solid; margin: 2em 0; padding: 2em; color: var(--theme-accent-color); }

/* Gemstone slots */ .gemstone-slot { position: relative; display: inline-flex; width: 25px; height: 25px; line-height: 25px; border: 1px solid currentColor; border-radius: 3px; justify-content: center; align-items: center; cursor: help;

a { color: currentColor; cursor: help; width: 100%; text-align: center; }

.gemstone-slot-lock { position: absolute; bottom: -2px; right: -2px; font-size: 10px; line-height: 1;

&:after { content: '🔒'; }   } } .gemstone-slot-list { display: flex; gap: 3px; justify-content: center; }

/* Username Styling */ /* Bureaucrats */ .user-link-bcrat { color: #ff3f43 !important; text-shadow: 0 0 4px #ff3f43 !important; font-weight: bold; } /* Admins */ .user-link-admin { font-weight: bold; color: #a431fc !important; text-shadow: 0 0 4px #a431fc !important; } /* Code Editors */ .user-link-codeeditor { font-weight: bold !important; color: #5874f3 !important; text-shadow: 0 0 3px #5265ba !important; } /* Content moderators */ .user-link-mod { font-weight: bold; color: #7FFFD4 !important; text-shadow: 0 0 3px #397561 !important; } /* Discussion moderators */ .user-link-dmod { font-weight: bold; color: #1f9921; text-shadow: 0 0 3px #648264; } /* Rollbackers */ .user-link-rollback { font-weight: bold; color: #ff992b !important; text-shadow: 0 0 4px #a36726 !important; } /* Bots */ .user-link-bot { font-weight: bold; color: darkgray !important; text-shadow: 0 0 3px gray !important; }

/* Rarity/Tier Styling */ .tier-rare { text-shadow: 0 0 4px #000; }

/* Highlight table */ /* Mediawiki:Highlight.js */ .lighttable tr.highlight-over { background-color: #e2926b; color: white; } .lighttable tr.highlight-over a { color: purple; } .lighttable tr.highlight-on { background-color: #c15926; color: white; } .lighttable tr.highlight-on a { color: purple; } .highlight-over .tier-rare, highlight-on .tier-rare { text-shadow: none; }

/* Documentation Boxes */ .hsw-documentation { font-family: Arial !important; clear: both; .hsw-documentation-titlebox { padding: 18px 8px 2px 8px; border-top: 1.3px solid black; border-left: 1.3px solid black; border-right: 1.3px solid black; margin: 4px 4px 0 4px; box-shadow: 0 0 2px black; .hsw-documentation-icon { float: left; }		.hsw-documentation-header { font: bold x-large Arial; margin-left: 7px; text-align: center; }		.hsw-documentation-actions { font-size: small; margin-left: 7px; }		.hsw-documentation-tnote { font-size: small; font-style: italic; }		hr { background-color: #daa9ad; border: 0; height: 1px; margin-bottom: 3px; margin-top: 0; width: 100%; }		p { margin: 0; }	}	.hsw-documentation-body { background-color: rgba(120,120,120,0.05); box-shadow: 0 0 2px black; padding: 0.5em; margin: 0 4px 0 4px; border-left: 1.3px solid black; border-right: 1.3px solid black; clear: both; .hsw-documentation-main-idk { display: none; }		.hsw-documentation-main-pd { clear: both; margin-bottom: 5px; }	}	.hsw-documentation-bottombox { padding: 2px 8px; border-left: 1.3px solid black; border-right: 1.3px solid black; border-bottom: 1.3px solid black; margin: 0 4px 4px 4px; box-shadow: 0 0 2px black; .hsw-documentation-hdtw { margin: 5px; font-weight: bold; }	}	.hsw-documentation-jtc, .hsw-documentation-btt { float: right; font: italic small Arial; margin-top: 4px; a { color: white; }	} }

/* Keypress */ .keypress-diagram { white-space: nowrap; padding: 1px 6px; border: 1px solid #CCC; border-radius: 3px; box-shadow: 0.1em 0.2em 0.2em rgba(0, 0, 0, 0.2); font-size: 0.85em; font-family: Arial,Helvetica,sans-seri; }

/* Rightbox */ .hsw-rightbox { &.small { border: 1px solid #5e484a; background: #251214; margin: 5px 0 2px 5px; padding: 14px; float: right; text-align: center; font-size: 75%; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926; }	&.medium { float: right; width: 240px; margin: 0.1em 0 0.5em 0.25em; padding: 4px; }	.hsw-rightbox-sep { border-bottom: 1px solid #555; padding: 0 3px; clear: right; }	.hsw-rightbox-image { border-right: 0; padding: 0 12px; }	.hsw-rightbox-content { border-left: 0; width: 100%; padding: 0 5px 0 0; } } .hsw-luabox { float: right; width: 240px; margin: 0.1em 0 0.5em 0.25em; padding: 4px; box-shadow: 0 0 5px #c15926; border: 1px solid; border-color: #c15926 !important; background-color: #2c1e20 !important; .hsw-luabox-list { list-style-type: disc; margin: 0 0 0 15px; white-space: nowrap; }	.hsw-luabox-actions { font-size: small; } }	border-left: 0; width: 100%; padding: 12px 12px 12px 0 !important; }	border-right: 0; padding: 0 12px !important; } .hsw-userbox-list { padding: 2.5px } .hsw-shortcut-list { font-weight: bold; } .hsw-archivebox { margin: 7px 0; border: 2px solid black; box-shadow: 0 0 15px #000000; float: right; .hsw-archivebox-header { color: white; background: #542e2e; padding: 1.5px; }	.hsw-archivebox-content { border: 4.5px outset #555; padding: 2px 15px; background: #542e2e; }	.hsw-archivebox-text { border: 2.5px outset #555; padding: 0 15px; background: #542e2e; text-align: center; }	.hsw-archivebox-list { padding: 4px 14px; border-top: 2px solid #775454; }	.hsw-archivebox-search { padding: 4px; border-top: 2px solid #775454; }	.mw-ui-input { font-size: small; }	.mw-ui-button { height: 32px !important; } } .hsw-archivelist { .hsw-archivelist-actions { font-size: 10px; } }
 * 1) content .hsw-luabox .hsw-luabox-content {
 * 1) content .hsw-luabox .hsw-luabox-icon {

.article-new-feature { color: white; background: red; padding: 1px 3px; border-radius: 5px; border: 2px dotted darkred; text-decoration: underline dotted; }

/* Template:ArmorStats Styling */ table.armorstats2x2 { margin-right: 0; } .armorstats2x2 th { min-width: 184px; } .armorstats2x2 .as2x2-icon { padding: 0 3px; } .armorstats2x2 .as2x2-item-stats { padding: 0 5px; } .armorstats2x2 .as2x2-item-stats ul { line-height: inherit; list-style: none none; margin: 0; }

/* Template:SkyDateCountdownWidget */ .skydate-countdown-active { color: green; }

/* Article Scrollbar Tweaks */ .article-scrollable::-webkit-scrollbar { width: 10px; height: 10px; } .article-scrollable::-webkit-scrollbar-track { background: #50373a; } .article-scrollable::-webkit-scrollbar-thumb { background: #897e81; } .article-scrollable::-webkit-scrollbar-thumb:hover { background: #6e6568; }

/* Article Scrollbar Tweaks (Firefox) */ .article-scrollable { scrollbar-width: thin; scrollbar-color: #897e81 #50373a; overflow: auto; }

/* Disables text highlighting on browsers */ .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Bull Character */ .bull-c::before { content: "\2022"; margin: 0 4px; }

/* Vertical cell support */ .vertical th, .vertical td, td.vertical, th.vertical { writing-mode: vertical-rl; }

/* Darkens every other row */ .oddrow tr:nth-of-type(odd)>td, tr.oddrow td { background: rgba(0, 0, 0, 0.2); }

/* For replacing in-line styles */ .txt-nowrap { white-space: nowrap; } .cursor-help { cursor: help; }

/* General hide class to be used as necessary (pair to .mobile-hide) */ .desktop-hide { display: none !important; }

/* Blank Cells */ .blankCell { display: flex; cursor: not-allowed; background: rgba(150, 150, 150, 0.15); text-align: center; font-size: 65%; color: transparent; /* We only want to show what is in ::after, but still want an actual character in the template so the character is selectable */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .blankCell::after { content: "∅"; flex: 1; align-self: center; color: rgba(185, 185, 185, 0.55); }