|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */
| | @media screen and (max-width: 1129px) { |
| @import url("/Template:Note/styles.css"); | | /* Move the header to top */ |
| /* To make images responsive */ | | .citizen-header { |
| img {
| | bottom: unset !important; |
| max-width:100%;
| | top: 0 !important; |
| height:auto;
| | } |
| } | |
|
| |
|
| /* Base Admonition Styling */
| | /* Fix navigation bar, page settings and user card dropdown positions */ |
| .admonition {
| | .citizen-header .citizen-menu__card { |
| max-width: 100%; /* Ensure the box does not exceed the container width */ | | bottom: unset !important; |
| display: flex; | | top: 50px !important; |
| align-items: flex-start;
| | } |
| border-radius: 4px;
| |
| padding: 16px;
| |
| margin: 1.5em 0;
| |
| border-top: none; /* Remove top border */
| |
| border-right: none; /* Remove right border */
| |
| border-bottom: none; /* Remove bottom border */
| |
| border-left: 5px solid; /* Add a 5px solid left border */
| |
| background-color: var(--admonition-bg, #e6ffed); /* Fallback to green */
| |
| word-wrap: break-word; /* Ensure long words break inside the container */
| |
| word-break: break-word; /* Alternative for modern CSS */
| |
| overflow-wrap: break-word; /* Ensure long words break inside the container */
| |
| box-sizing: border-box; /* Ensure padding and borders are included in the element's width */ | |
| } | |
|
| |
|
| .admonition-icon pre, | | /* Uncomment to fix notification menu popup position: can be buggy /* |
| .admonition-icon code,
| | /*.mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup { |
| .admonition-icon .mw-code {
| | top: -961px !important; |
| background-color: transparent !important;
| | }*/ |
| border: none !important;
| |
| color: inherit !important;
| |
| padding: 0 !important;
| |
| margin: 0 !important;
| |
| font-family: inherit !important;
| |
| font-size: inherit !important;
| |
| display: inline !important; | |
| } | |
|
| |
|
| .admonition-content { | | /* Fix header position (hide animation) when scrolling down */ |
| flex: 1;
| | .citizen-scroll--down .citizen-header { |
| } | | transform: translateY(-100%) !important; |
| | } |
|
| |
|
| /* Reset Styling for Code Blocks within Admonitions */ | | /* Fix page actions position gap */ |
| .admonition-title code, .admonition-title pre, | | .page-actions { |
| .admonition-text code, .admonition-text pre,
| | bottom: var(--space-xs) !important; |
| .admonition-title .mw-code, .admonition-text .mw-code {
| | } |
| background-color: transparent !important;
| |
| border: none !important;
| |
| color: inherit !important;
| |
| font-family: inherit !important;
| |
| font-size: inherit !important;
| |
| padding: 0 !important;
| |
| margin: 0 !important; | |
| display: inline !important;
| |
| word-wrap: break-word; /* Ensure text breaks within the container */
| |
| word-break: break-word; /* Alternative for modern CSS */
| |
| overflow-wrap: break-word; /* Ensure code blocks break properly within the container */
| |
| box-sizing: border-box;
| |
| } | |
|
| |
|
| /* Specific Admonition Types */ | | /* Fix ToC position gap */ |
| .admonition-note { | | .citizen-toc { |
| --admonition-bg: #f0f8ff;
| | bottom: var(--space-xs) !important; |
| --admonition-color: #a2c2e0;
| | } |
| border-left-color: #a2c2e0; /* Set the left border color */ | |
| } | |
|
| |
|
| .admonition-tip {
| | /* Make header not cover top of body */ |
| --admonition-bg: #e6ffed;
| | .citizen-body-container { |
| --admonition-color: #8acc90;
| | padding-top: var(--header-size); |
| border-left-color: #8acc90; /* Set the left border color */ | | } |
| }
| |
| | |
| .admonition-info {
| |
| --admonition-bg: #e7f5ff;
| |
| --admonition-color: #a3c2f0;
| |
| border-left-color: #a3c2f0; /* Set the left border color */
| |
| }
| |
| | |
| .admonition-warning {
| |
| --admonition-bg: #fff8e1;
| |
| --admonition-color: #eac261;
| |
| border-left-color: #eac261; /* Set the left border color */
| |
| }
| |
| | |
| .admonition-danger {
| |
| --admonition-bg: #ffe5e5;
| |
| --admonition-color: #e09191;
| |
| border-left-color: #e09191; /* Set the left border color */
| |
| }
| |
| | |
| | |
| /* Add space to the start of admonition text */
| |
| .admonition-text {
| |
| margin-left: 0.25em; /* Adjust the space as needed */ | |
| clear: both; /* Ensure no floating elements affect text alignment */
| |
| overflow-wrap: break-word; /* Ensure text wraps within the container */
| |
| }
| |
| | |
| /* Ensure no extra space is added to the title */
| |
| .admonition-title {
| |
| margin-left: 0;
| |
| overflow: hidden; /* Prevent content from overflowing */
| |
| text-overflow: ellipsis; /* Add ellipsis if content is too long */
| |
| font-weight: bold; /* Make the title bold */
| |
| overflow-wrap: break-word; /* Ensure text wraps within the container */
| |
| word-break: break-word; | |
| } | | } |
@media screen and (max-width: 1129px) {
/* Move the header to top */
.citizen-header {
bottom: unset !important;
top: 0 !important;
}
/* Fix navigation bar, page settings and user card dropdown positions */
.citizen-header .citizen-menu__card {
bottom: unset !important;
top: 50px !important;
}
/* Uncomment to fix notification menu popup position: can be buggy /*
/*.mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
top: -961px !important;
}*/
/* Fix header position (hide animation) when scrolling down */
.citizen-scroll--down .citizen-header {
transform: translateY(-100%) !important;
}
/* Fix page actions position gap */
.page-actions {
bottom: var(--space-xs) !important;
}
/* Fix ToC position gap */
.citizen-toc {
bottom: var(--space-xs) !important;
}
/* Make header not cover top of body */
.citizen-body-container {
padding-top: var(--header-size);
}
}