More actions
Technofied (talk | contribs) Add admonition css |
m Reverted edit by Asexualdinosaur (talk) to last revision by Technofied Tag: Rollback |
||
(21 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* To make images responsive */ | /* To make images responsive */ | ||
Line 28: | Line 7: | ||
} | } | ||
/* Base Admonition | /* Base Admonition Styling */ | ||
.admonition { | .admonition { | ||
max-width: 100%; /* Ensure the box does not exceed the container width */ | |||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
Line 35: | Line 15: | ||
padding: 16px; | padding: 16px; | ||
margin: 1.5em 0; | margin: 1.5em 0; | ||
border: | 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 { | .admonition-icon pre, | ||
font-size: | .admonition-icon code, | ||
.admonition-icon .mw-code { | |||
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; | |||
} | } | ||
Line 47: | Line 43: | ||
} | } | ||
.admonition-title { | /* Reset Styling for Code Blocks within Admonitions */ | ||
font- | .admonition-title code, .admonition-title pre, | ||
margin- | .admonition-text code, .admonition-text pre, | ||
.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 */ | /* Specific Admonition Types */ | ||
.admonition-note { | .admonition-note { | ||
--admonition-bg: #f0f8ff; | |||
border-left: | --admonition-color: #a2c2e0; | ||
border-left-color: #a2c2e0; /* Set the left border color */ | |||
} | } | ||
.admonition-tip { | .admonition-tip { | ||
--admonition-bg: #e6ffed; | |||
border-left: | --admonition-color: #8acc90; | ||
border-left-color: #8acc90; /* Set the left border color */ | |||
} | } | ||
.admonition-info { | |||
.admonition- | --admonition-bg: #e7f5ff; | ||
--admonition-color: #a3c2f0; | |||
border-left: | border-left-color: #a3c2f0; /* Set the left border color */ | ||
} | } | ||
.admonition-warning { | .admonition-warning { | ||
--admonition-bg: #fff8e1; | |||
border-left: | --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; | |||
} | } |
Latest revision as of 08:52, 26 August 2024
/* CSS placed here will be applied to all skins */
/* To make images responsive */
img {
max-width:100%;
height:auto;
}
/* Base Admonition Styling */
.admonition {
max-width: 100%; /* Ensure the box does not exceed the container width */
display: flex;
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,
.admonition-icon code,
.admonition-icon .mw-code {
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 {
flex: 1;
}
/* Reset Styling for Code Blocks within Admonitions */
.admonition-title code, .admonition-title pre,
.admonition-text code, .admonition-text pre,
.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 */
.admonition-note {
--admonition-bg: #f0f8ff;
--admonition-color: #a2c2e0;
border-left-color: #a2c2e0; /* Set the left border color */
}
.admonition-tip {
--admonition-bg: #e6ffed;
--admonition-color: #8acc90;
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;
}