MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary Tag: Manual revert |
||
(67 intermediate revisions by the same user not shown) | |||
Line 41: | Line 41: | ||
/* for expand/collapse */ | /* for expand/collapse */ | ||
.mw-collapsible | .mw-collapsible .mw-collapsible-toggle { | ||
float: | float:left; !important | ||
font-weight: bold; | font-weight: bold; | ||
background-color: #ffff00; | background-color: #ffff00; | ||
Line 50: | Line 50: | ||
/* 5/15/24: text in <pre> does not wrap on Reading mode in Edge browser, and assume in others and extends past right margin; but doesn't work; the only thing that works is max-width: 80% which is good to limit the whitespace block, but on read mode it just extends off the page... none of these worked: | /* 5/15/24: text in <pre> does not wrap on Reading mode in Edge browser, and assume in others and extends past right margin; but doesn't work; the only thing that works is max-width: 80% which is good to limit the whitespace block, but on read mode it just extends off the page... none of these worked: | ||
pre { | |||
overflow: visible; | overflow: visible; | ||
nowrap: normal; | nowrap: normal; | ||
Line 56: | Line 57: | ||
white-space: normal; | white-space: normal; | ||
*/ | */ | ||
/* per chatgitp 6/5/24: doesant work | |||
pre { | |||
white-space: pre-wrap !important; /* Allows wrapping of text | |||
max-width: 80%; /* Ensures preformatted text does not exceed the width of the container | |||
word-wrap: break-word; /* Ensures long words are broken | |||
} | |||
*/ | |||
/* per Chatgtp 8/7/24: | |||
pre { | |||
white-space: pre-wrap; /* This will allow text to wrap inside <pre> tags */ | |||
} | |||
*/ | |||
/* looks better w/ pre set to smaller width than page, but on read mode it still spills off right margin*/ | /* looks better w/ pre set to smaller width than page, but on read mode it still spills off right margin*/ | ||
Line 64: | Line 80: | ||
/* for readability of blog posts, setting max width on blog namespace; however, it losess side margins on small screen, so needs fix */ | /* for readability of blog posts, setting max width on blog namespace; however, it losess side margins on small screen, so needs fix */ | ||
/* note: using | |||
margin: 0 auto; /* Center the content */ | |||
/* centers the content on wide mode but forces text on small screens to the edge of left margin */ | |||
@media screen and (min-width: 850px) { | |||
.ns-3000 #bodyContent { | .ns-3000 #bodyContent { | ||
max-width: 850px; /* Adjust the value as needed */ | max-width: 850px; /* Adjust the value as needed */ | ||
margin: 0 auto; /* Center the content */ | |||
} | |||
/* to use for Bible quotations instead of <pre> tag */ | |||
/* doesn't need "whitespace"; Edge still doesn't render other formatting so centering*/ | |||
.bible { | |||
font-family: Roboto Mono; !important /* Use a monospace font like <pre> */ | |||
max-width: 80% !important; | |||
white-space: pre-wrap !important; /* Preserve whitespace, wrap text */ | |||
overflow-wrap: break-word !important; /* Allow words to break to prevent overflow */ | |||
margin: 5px 5px 5px 25px !important; | |||
padding: 15px !important; /* Add padding for better readability */ | |||
background-color: #f5f5f5 !important; /* Light background to mimic <pre> appearance */ | |||
border: 1px solid #ccc !important; /* Optional border for styling */ | |||
border-radius: 4px !important; /* Optional rounded corners */ | |||
} | |||
blockquote { | |||
background-color: #f5f5f5; | |||
font-size: 120%; !important; | |||
border: 1px solid #ccc !important; | |||
font-family: Roboto Mono !important; | |||
padding: 10px !important; | |||
margin-right: 15px !important; /* 10/20/24: doesn't seem to work */ | |||
width:80% !important; | |||
border-radius: 4px !important; | |||
} | |||
/* for quoting non-scriptural sources */ | |||
.quote { | |||
font-family: Roboto Mono; !important /* Use a monospace font like <pre> */ | |||
max-width: 80% !important; | |||
white-space: pre-wrap !important; /* Preserve whitespace, wrap text */ | |||
overflow-wrap: break-word !important; /* Allow words to break to prevent overflow */ | |||
margin: 5px 5px 5px 25px !important; | |||
padding: 15px !important; /* Add padding for better readability */ | |||
border: 1px solid #ccc !important; /* Optional border for styling */ | |||
border-radius: 4px !important; /* Optional rounded corners */ | |||
} | } |
Latest revision as of 12:59, 21 December 2024
/* CSS placed here will be applied to all skins */
/* a class that will keep a header from appearing in the TOC on the page */
.noautonum .tocnumber {
display: none;
}
/* so that the tagline will show in all skins */
#siteSub {
display:block;
font-weight:normal;
font-size:normal;
}
/* so that columns won't spread all the way across the page */
/* see Books of the Bibles entry */
div#columns {
max-width: 450px;
}
/* enlarge text size */
body {
font-size: 115%;
}
/* creating class to have padding between table columns */
.table-padding td {
padding: 25px;
}
/* creating class to have padding between table columns, right side only */
.table-padding-right td {
padding: 25px;
}
/* for expand/collapse */
.mw-collapsible .mw-collapsible-toggle {
float:left; !important
font-weight: bold;
background-color: #ffff00;
margin-left:25px;
}
/* 5/15/24: text in <pre> does not wrap on Reading mode in Edge browser, and assume in others and extends past right margin; but doesn't work; the only thing that works is max-width: 80% which is good to limit the whitespace block, but on read mode it just extends off the page... none of these worked:
pre {
overflow: visible;
nowrap: normal;
max-width: 80%;
display: inline-block;
white-space: normal;
*/
/* per chatgitp 6/5/24: doesant work
pre {
white-space: pre-wrap !important; /* Allows wrapping of text
max-width: 80%; /* Ensures preformatted text does not exceed the width of the container
word-wrap: break-word; /* Ensures long words are broken
}
*/
/* per Chatgtp 8/7/24:
pre {
white-space: pre-wrap; /* This will allow text to wrap inside <pre> tags */
}
*/
/* looks better w/ pre set to smaller width than page, but on read mode it still spills off right margin*/
pre {
max-width: 80%;
}
/* for readability of blog posts, setting max width on blog namespace; however, it losess side margins on small screen, so needs fix */
/* note: using
margin: 0 auto; /* Center the content */
/* centers the content on wide mode but forces text on small screens to the edge of left margin */
@media screen and (min-width: 850px) {
.ns-3000 #bodyContent {
max-width: 850px; /* Adjust the value as needed */
margin: 0 auto; /* Center the content */
}
/* to use for Bible quotations instead of <pre> tag */
/* doesn't need "whitespace"; Edge still doesn't render other formatting so centering*/
.bible {
font-family: Roboto Mono; !important /* Use a monospace font like <pre> */
max-width: 80% !important;
white-space: pre-wrap !important; /* Preserve whitespace, wrap text */
overflow-wrap: break-word !important; /* Allow words to break to prevent overflow */
margin: 5px 5px 5px 25px !important;
padding: 15px !important; /* Add padding for better readability */
background-color: #f5f5f5 !important; /* Light background to mimic <pre> appearance */
border: 1px solid #ccc !important; /* Optional border for styling */
border-radius: 4px !important; /* Optional rounded corners */
}
blockquote {
background-color: #f5f5f5;
font-size: 120%; !important;
border: 1px solid #ccc !important;
font-family: Roboto Mono !important;
padding: 10px !important;
margin-right: 15px !important; /* 10/20/24: doesn't seem to work */
width:80% !important;
border-radius: 4px !important;
}
/* for quoting non-scriptural sources */
.quote {
font-family: Roboto Mono; !important /* Use a monospace font like <pre> */
max-width: 80% !important;
white-space: pre-wrap !important; /* Preserve whitespace, wrap text */
overflow-wrap: break-word !important; /* Allow words to break to prevent overflow */
margin: 5px 5px 5px 25px !important;
padding: 15px !important; /* Add padding for better readability */
border: 1px solid #ccc !important; /* Optional border for styling */
border-radius: 4px !important; /* Optional rounded corners */
}