|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
| @import "/index.php?title=MediaWiki:Common.css/homepage.css&action=raw&ctype=text/css"; | | @import "/index.php?title=MediaWiki:Common.css/homepage.css&action=raw&ctype=text/css"; |
|
| |
| /* collapsible sidebar */
| |
| /* General style for collapsible elements */
| |
| .collapsible {
| |
| margin: 1em 0;
| |
| overflow: hidden;
| |
| position: relative;
| |
| }
| |
|
| |
| /* Style for the content that gets hidden/shown */
| |
| .collapsible .collapsible-content {
| |
| padding: 0.5em;
| |
| overflow: hidden;
| |
| transition: max-height 0.5s ease-in-out; /* Animated collapsing effect */
| |
| }
| |
|
| |
| /* Style for collapsed state (hidden content) */
| |
| .collapsible.collapsed .collapsible-content {
| |
| max-height: 0;
| |
| padding: 0 0.5em; /* Keeps padding during transition */
| |
| transition: max-height 0.5s ease-out, padding 0.5s ease-out;
| |
| }
| |
|
| |
| /* Style for the toggle button */
| |
| .collapsetoggle {
| |
| cursor: pointer;
| |
| user-select: none; /* Prevent text selection */
| |
| position: absolute; /* For positioning inside the collapsible */
| |
| right: 0;
| |
| top: 0;
| |
| background: #e9e9e9; /* Light background color */
| |
| border: 1px solid #ccc; /* Light border */
| |
| padding: 0.2em 0.5em;
| |
| font-size: 0.875em;
| |
| }
| |
|
| |
| /* When the toggle is on the left */
| |
| .collapsetoggle-left {
| |
| right: auto; /* Reset right alignment */
| |
| left: 0;
| |
| }
| |
|
| |
| /* When the toggle is inline with the content */
| |
| .collapsetoggle-inline {
| |
| position: relative; /* Allow it to sit within the flow of the document */
| |
| float: right; /* Align to the right */
| |
| margin-left: 10px; /* Space out from content */
| |
| }
| |
|
| |
| /* Visibility for custom toggles */
| |
| .collapsetoggle-custom {
| |
| visibility: hidden; /* Hide by default */
| |
| }
| |
|
| |
| /* Style to ensure visibility when necessary */
| |
| .collapsible .collapsetoggle-custom {
| |
| visibility: visible; /* Show when inside a collapsible */
| |
| }
| |
|
| |
| /* Style for elements with jslink class inside toggle */
| |
| .collapsetoggle .jslink {
| |
| color: #0645ad; /* Wikipedia link color, change as needed */
| |
| text-decoration: none;
| |
| outline: none;
| |
| }
| |
|
| |
| /* Adjust jslink when focused for accessibility */
| |
| .collapsetoggle .jslink:focus {
| |
| outline: 1px dashed #0645ad;
| |
| outline-offset: 1px;
| |
| }
| |
|
| |
| /* Style adjustments for tables */
| |
| .collapsible table {
| |
| width: 100%;
| |
| }
| |
|
| |
| .collapsible thead {
| |
| visibility: visible; /* Always show the thead */
| |
| }
| |
|
| |
| .collapsible th,
| |
| .collapsible td {
| |
| border: 1px solid #ddd; /* Light border for table cells */
| |
| }
| |
|
| |
| .collapsible th {
| |
| background-color: #f7f7f7; /* Light header background */
| |
| padding: 0.5em;
| |
| }
| |
|
| |
| /* Clearing floats for inline toggle */
| |
| .collapsible:after {
| |
| content: "";
| |
| display: table;
| |
| clear: both;
| |
| }
| |