MediaWiki:Gadget-AdventurerPlateMaker.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Gadget-AdventurerPlateMaker CSS Variables and Classes */
:root {
/* Primary Colors */
--apm-primary-blue: #2196F3;
--apm-primary-red: #f44336;
--apm-primary-green: #4CAF50;
--apm-primary-orange: #FF9800;
/* Neutral Colors */
--apm-white: #fff;
--apm-black: black;
--apm-gray-light: #f9f9f9;
--apm-gray-medium: #ccc;
--apm-gray-dark: #999;
--apm-gray-item: #f0f0f0;
}
/* Section Containers */
.apm-section {
padding: 15px;
border: 1px solid var(--apm-gray-medium);
background: var(--apm-gray-light);
border-radius: 5px;
}
.apm-section-inline {
display: inline-block;
}
.apm-section-block {
display: block;
width: 900px;
box-sizing: border-box;
}
/* Dropdown Menus */
.apm-dropdown {
padding: 5px;
width: 200px;
background-color: var(--apm-white);
color: var(--apm-black);
border: 1px solid var(--apm-gray-medium);
border-radius: 3px;
}
/* Tab Buttons */
.apm-tab-button {
padding: 8px 20px;
cursor: pointer;
border: none;
border-radius: 3px 3px 0 0;
}
.apm-tab-button-active {
background-color: var(--apm-primary-blue);
color: white;
font-weight: bold;
}
.apm-tab-button-inactive {
background-color: var(--apm-gray-medium);
color: var(--apm-black);
}
/* Action Buttons */
.apm-button {
padding: 5px;
cursor: pointer;
color: var(--apm-white);
border: none;
border-radius: 3px;
width: 50px;
font-size: 16px;
}
.apm-button-clear {
background-color: var(--apm-primary-red);
}
.apm-button-randomize {
background-color: var(--apm-primary-green);
}
.apm-button-copy {
background-color: var(--apm-primary-orange);
}
/* Acquisition Display */
.apm-acquisition-section {
margin-top: 20px;
padding: 15px;
background-color: var(--apm-gray-light);
border: 1px solid var(--apm-gray-medium);
border-radius: 5px;
}
.apm-acquisition-item {
margin-bottom: 8px;
padding: 8px;
background-color: var(--apm-gray-item);
border-left: 3px solid var(--apm-primary-blue);
border-radius: 3px;
}
.apm-acquisition-empty {
color: var(--apm-gray-dark);
font-style: italic;
}