Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(8 intermediate revisions by the same user not shown) | |||
Line 20: | Line 20: | ||
flex: 1; | flex: 1; | ||
} | } | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
.cover-container .cover-header-container h1, .cover-container .cover-header-container h2, .cover-container .cover-header-container h3 { | .cover-container .cover-header-container h1, .cover-container .cover-header-container h2, .cover-container .cover-header-container h3 { | ||
border-bottom: 0; | border-bottom: 0; | ||
Line 35: | Line 31: | ||
.cover-container .cover-header-container { | .cover-container .cover-header-container { | ||
margin-bottom: 1.5em; | margin-bottom: 1.5em; | ||
+ | background: white; | ||
+ | border: 1px solid #c8ccd1; | ||
+ | padding: 12px 24px 12px 24px; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | align-items: center; | ||
+ | } | ||
+ | .cover-container .file-container { | ||
+ | margin: 0; | ||
+ | margin-right: 20px; | ||
+ | } | ||
+ | .cover-container .file-container .thumb.tright { | ||
+ | margin:0; | ||
} | } | ||
.cover-container .cover-content-container { | .cover-container .cover-content-container { | ||
Line 54: | Line 63: | ||
border: 1px solid #c8ccd1; | border: 1px solid #c8ccd1; | ||
padding: 12px 24px 12px 24px; | padding: 12px 24px 12px 24px; | ||
− | + | display: flex; | |
+ | align-items: center; | ||
} | } | ||
.cover-container .cover-left-side .middle-section { | .cover-container .cover-left-side .middle-section { | ||
Line 61: | Line 71: | ||
.cover-container .cover-content-header { | .cover-container .cover-content-header { | ||
text-align: center; | text-align: center; | ||
− | margin-bottom: | + | margin-bottom: 1.5em; |
margin-top: 1em; | margin-top: 1em; | ||
} | } | ||
Line 70: | Line 80: | ||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
border: 1px solid #c8ccd1; | border: 1px solid #c8ccd1; | ||
+ | flex: 1; | ||
+ | max-width: 450px; | ||
} | } | ||
.cover-container .cover-content-footer { | .cover-container .cover-content-footer { | ||
Line 83: | Line 95: | ||
border: 1px solid #c8ccd1; | border: 1px solid #c8ccd1; | ||
padding: 12px 24px 12px 24px; | padding: 12px 24px 12px 24px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .cover-container .cover-content p { | ||
+ | text-align: center; | ||
+ | margin-bottom: 1em; | ||
+ | } | ||
+ | /* used for columns template */ | ||
+ | .two-columns-container { | ||
+ | display: flex; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | .two-columns-container .first-column { | ||
+ | flex: 1; | ||
+ | margin-right: 20px; | ||
+ | } | ||
+ | .two-columns-container .second-column { | ||
+ | flex: 1; | ||
+ | } | ||
+ | .two-columns-container .column-questions-delimiter { | ||
+ | border-top: 0.15em solid; | ||
+ | width: 56px; | ||
+ | color: #5f6367; | ||
+ | background-color: inherit; | ||
+ | } | ||
+ | .two-columns-container .column-question-container { | ||
+ | font-size: 11.9px; | ||
+ | } | ||
+ | .dynamic-size-image { | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | } | ||
+ | .wh-header-image { | ||
+ | max-width: 100% ; | ||
+ | height: auto; | ||
+ | } | ||
+ | @media only screen and (max-width: 855px), print { | ||
+ | .two-columns-container { | ||
+ | flex-direction:column; | ||
+ | } | ||
+ | .two-columns-container .first-column { | ||
+ | margin-right: 0; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | .two-columns-container .second-column { | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
} | } |
Latest revision as of 09:35, 3 October 2020
/* CSS placed here will be applied to all skins */
.pagenum {
display:flex;
padding-right: 10px;
}
.publication-firstpage {
display:flex;
}
.page-splitter {
content: '';
display: block;
border-top: 1px solid #80a276;
border-bottom: 1px solid #fff;
}
.custom-delimiter-container {
display: flex;
align-items: center;
}
.custom-delimiter-container .page-splitter{
flex: 1;
}
.cover-container .cover-header-container h1, .cover-container .cover-header-container h2, .cover-container .cover-header-container h3 {
border-bottom: 0;
margin: 0;
padding-top: 0;
}
.cover-container .cover-header-container p {
margin: 0;
}
.cover-container .cover-header-container {
margin-bottom: 1.5em;
background: white;
border: 1px solid #c8ccd1;
padding: 12px 24px 12px 24px;
display: flex;
flex-direction: column;
align-items: center;
}
.cover-container .file-container {
margin: 0;
margin-right: 20px;
}
.cover-container .file-container .thumb.tright {
margin:0;
}
.cover-container .cover-content-container {
display: flex;
justify-content: space-around;
margin-bottom: 3em;
}
.cover-container .cover-left-side {
text-align: center;
display: flex;
flex-direction: column;
flex: 1;
margin-right: 32px;
align-items: center;
justify-content: space-evenly;
}
.cover-container .cover-left-side .header {
background-color: #f8f9fa;
border: 1px solid #c8ccd1;
padding: 12px 24px 12px 24px;
display: flex;
align-items: center;
}
.cover-container .cover-left-side .middle-section {
flex: 1;
}
.cover-container .cover-content-header {
text-align: center;
margin-bottom: 1.5em;
margin-top: 1em;
}
.cover-container .cover-right-side {
border: 10px solid #72777d;
border-style: double;
padding: 12px 24px 12px 24px;
background-color: #f8f9fa;
border: 1px solid #c8ccd1;
flex: 1;
max-width: 450px;
}
.cover-container .cover-content-footer {
text-align: center;
margin-top: 2em;
}
.cover-container .cover-content-header h3, .cover-container .cover-content-header h4 {
padding: 0;
margin: 0;
}
.cover-container .cover-content table {
background: white;
border: 1px solid #c8ccd1;
padding: 12px 24px 12px 24px;
width: 100%;
}
.cover-container .cover-content p {
text-align: center;
margin-bottom: 1em;
}
/* used for columns template */
.two-columns-container {
display: flex;
text-align: justify;
}
.two-columns-container .first-column {
flex: 1;
margin-right: 20px;
}
.two-columns-container .second-column {
flex: 1;
}
.two-columns-container .column-questions-delimiter {
border-top: 0.15em solid;
width: 56px;
color: #5f6367;
background-color: inherit;
}
.two-columns-container .column-question-container {
font-size: 11.9px;
}
.dynamic-size-image {
width:100%;
height:100%;
}
.wh-header-image {
max-width: 100% ;
height: auto;
}
@media only screen and (max-width: 855px), print {
.two-columns-container {
flex-direction:column;
}
.two-columns-container .first-column {
margin-right: 0;
margin-bottom: 5px;
}
.two-columns-container .second-column {
margin-bottom: 5px;
}
}