You are viewing an old version of this page. Return to the latest version.
Version of 17:05, 19 February 2021 by Richard Phillips
Difference between revisions of "Template:Portal/MainPage.css"
(Created page with "/* ----------------------------------------------------------------------------- Layout styles -----------------------------------------------------------------------------...") |
|||
Line 1: | Line 1: | ||
− | /* --------------- | + | /* Links top */ |
− | + | .bs-layout-container.links-top { | |
− | ---- | + | margin-bottom: 10px; |
+ | } | ||
+ | .testwiki-icon-admin::before { | ||
+ | content: "\e971"; | ||
+ | font-family: icomoon; | ||
+ | font-style: normal; | ||
+ | color: #CCCCCC; | ||
+ | margin-left: 2px; | ||
+ | } | ||
+ | @media all and ( max-width: 500px ) { | ||
+ | .bs-layout-container.links-top { | ||
+ | justify-content: flex-start; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* Intro */ | ||
+ | .bs-layout-container.intro-text{ | ||
+ | font-size: 24px; | ||
+ | } | ||
− | + | .bs-layout-container.intro-text p{ | |
− | + | font-size: 14px; | |
− | |||
− | . | ||
− | |||
− | |||
} | } | ||
− | /* | + | /* Important information*/ |
− | . | + | |
− | + | .testwiki-important-information-container {} | |
− | + | .testwiki-important-information-container .testwiki-label { | |
− | + | font-weight: bold; | |
− | + | margin-right: 5px; | |
+ | } | ||
+ | .testwiki-important-information-container .testwiki-panel-trigger { | ||
+ | margin-left: 5px; | ||
+ | margin-right: 5px; | ||
+ | color: #0060DF; | ||
} | } | ||
− | . | + | .testwiki-important-information-container .testwiki-panel-trigger i::before { |
− | + | font-family: 'fontawesome'; | |
+ | content: "\f0d7"; | ||
+ | font-style: normal; | ||
+ | margin-right: 5px; | ||
} | } | ||
− | . | + | .testwiki-important-information-container .testwiki-panel-trigger[aria-expanded="true"] i::before { |
− | + | content: "\f0d8"; | |
} | } | ||
− | . | + | |
− | + | .testwiki-important-information-container .testwiki-panel-trigger[aria-expanded="true"] { | |
+ | color: #0060DF; | ||
} | } | ||
− | . | + | .testwiki-important-information-container .panel-body { |
− | + | border: 1px solid #CCCCCC; | |
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
} | } | ||
− | . | + | |
− | + | @media all and ( max-width: 500px ) { | |
+ | .testwiki-important-information-container .testwiki-label { | ||
+ | display: block; | ||
+ | } | ||
} | } | ||
− | /* | + | /* Contact primary */ |
− | .bs-layout-cell { | + | .bs-layout-container.contact-primary { |
− | padding: 10px; | + | border-top: 3px solid #F0F0F0; |
− | margin-bottom: | + | border-bottom: 3px solid #F0F0F0; |
− | + | margin-top: 30px; | |
− | + | margin-bottom: 30px; | |
+ | } | ||
+ | .bs-layout-container.contact-primary .bs-layout-cell { | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 0; | ||
+ | padding-bottom: 0; | ||
+ | min-height: 170px !important; | ||
+ | } | ||
+ | .bs-layout-container.contact-primary .bs-layout-cell p { | ||
+ | margin-top: 0 !important; | ||
+ | margin-bottom: 0 !important; | ||
+ | } | ||
+ | .bs-layout-cell.personal-contact { | ||
+ | min-width: 315px !important; | ||
+ | } | ||
+ | .bs-layout-cell.personal-contact > .floatleft { | ||
+ | margin-top: 10px; | ||
+ | margin-bottom: 0; | ||
+ | margin-right: 5px !important; | ||
+ | } | ||
+ | .bs-layout-cell.personal-contact > .body { | ||
+ | display: block; | ||
+ | } | ||
+ | @media all and ( max-width: 320px ) { | ||
+ | .bs-layout-cell.personal-contact > .body { | ||
+ | clear:both; | ||
+ | } | ||
+ | } | ||
+ | @media all and ( min-width: 321px ) { | ||
+ | .bs-layout-cell.personal-contact > .body { | ||
+ | float: left; | ||
+ | } | ||
} | } | ||
− | .bs-layout-cell a. | + | .bs-layout-cell.webinar, |
+ | .bs-layout-cell.helpdesk, | ||
+ | .bs-layout-cell.tour{ | ||
+ | width: 195px !important; | ||
+ | position: relative; | ||
+ | } | ||
+ | .bs-layout-cell.webinar a, | ||
+ | .bs-layout-cell.helpdesk a, | ||
+ | .bs-layout-cell.tour a { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | bottom: 35px; | ||
+ | } | ||
+ | .bs-layout-cell.webinar a > img, | ||
+ | .bs-layout-cell.helpdesk a > img, | ||
+ | .bs-layout-cell.tour a > img { | ||
max-width: 100%; | max-width: 100%; | ||
− | height: auto; | + | } |
+ | .bs-layout-cell.webinar a span, | ||
+ | .bs-layout-cell.helpdesk a span, | ||
+ | .bs-layout-cell.tour a span { | ||
+ | display: inline-block; | ||
+ | height: 16px; | ||
+ | } | ||
+ | @media all and ( min-width: 721px ) and ( max-width: 1080px ) { | ||
+ | .bs-layout-container.contact-primary .bs-layout-cell { | ||
+ | min-width: 40%; | ||
+ | } | ||
+ | } | ||
+ | @media all and ( max-width: 721px ) { | ||
+ | .bs-layout-cell.webinar a, | ||
+ | .bs-layout-cell.helpdesk a, | ||
+ | .bs-layout-cell.tour a { | ||
+ | position: relative; | ||
+ | bottom: auto; | ||
+ | } | ||
} | } | ||
− | .bs-layout- | + | /* Use cases*/ |
− | padding: | + | .bs-layout-container.use-cases { |
+ | margin-top: 30px; | ||
+ | } | ||
+ | .bs-layout-container.use-cases .bs-layout-cell { | ||
+ | background-color: #F0F0F0; | ||
+ | text-align: center; | ||
+ | padding: 30px; | ||
} | } | ||
− | .bs-layout- | + | .bs-layout-container.use-cases .use-case-headline { |
− | + | display: block; | |
− | + | margin-top: 30px; | |
+ | margin-bottom: 20px; | ||
+ | font-size: 1.2em; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | .bs-layout-container.use-cases .use-case-headline a, | ||
+ | .bs-layout-container.use-cases .use-case-headline a.extern, | ||
+ | .bs-layout-container.use-cases .use-case-headline a:focus, | ||
+ | .bs-layout-container.use-cases .use-case-headline a.extern:focus { | ||
+ | color: #0060df !important; | ||
+ | } | ||
+ | |||
+ | .bs-layout-container.use-cases .use-case-headline a:hover, | ||
+ | .bs-layout-container.use-cases .use-case-headline a.extern:hover { | ||
+ | color: #006eff !important; | ||
} | } | ||
− | + | .bs-layout-container.use-cases a, | |
− | + | .bs-layout-container.use-cases a.extern, | |
− | + | .bs-layout-container.use-cases a:hover, | |
− | + | .bs-layout-container.use-cases a.extern:hover, | |
− | + | .bs-layout-container.use-cases a:focus, | |
− | + | .bs-layout-container.use-cases a.extern:focus { | |
− | + | font-weight: bold; | |
+ | color: #C6752D !important; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* Common */ | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* | |
− | + | i.arrows-white and i.arrows-blue background-image is set in MediaWiki:Common.css | |
− | + | */ | |
− | + | .portal-link i.arrows-white, | |
− | + | .portal-link i.arrows-blue { | |
− | + | display: inline-block; | |
− | + | width: 26px; | |
− | + | height: 16px; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .portal-link { | |
− | + | width: 100%; | |
− | + | padding: 5px; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .portal-link a.external { | |
− | + | background-image: none; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .portal-link.yellow { | |
− | + | background-color: #C6752D; | |
− | + | } | |
− | + | .portal-link.yellow a, | |
− | + | .portal-link.yellow i { | |
− | + | color: white !important; | |
− | |||
− | |||
− | |||
} | } | ||
− | + | .portal-link.yellow a:hover, | |
− | + | .portal-link.yellow a:focus { | |
− | + | text-decoration: none; | |
− | + | color: white !important; | |
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .vertical-separator { | |
− | + | margin-left: 2px; | |
− | + | margin-right: 3px; | |
− | + | border-left: 1px solid #CCCCCC; | |
} | } |
Revision as of 16:18, 20 February 2021
/* Links top */
.bs-layout-container.links-top {
margin-bottom: 10px;
}
.testwiki-icon-admin::before {
content: "\e971";
font-family: icomoon;
font-style: normal;
color: #CCCCCC;
margin-left: 2px;
}
@media all and ( max-width: 500px ) {
.bs-layout-container.links-top {
justify-content: flex-start;
}
}
/* Intro */
.bs-layout-container.intro-text{
font-size: 24px;
}
.bs-layout-container.intro-text p{
font-size: 14px;
}
/* Important information*/
.testwiki-important-information-container {}
.testwiki-important-information-container .testwiki-label {
font-weight: bold;
margin-right: 5px;
}
.testwiki-important-information-container .testwiki-panel-trigger {
margin-left: 5px;
margin-right: 5px;
color: #0060DF;
}
.testwiki-important-information-container .testwiki-panel-trigger i::before {
font-family: 'fontawesome';
content: "\f0d7";
font-style: normal;
margin-right: 5px;
}
.testwiki-important-information-container .testwiki-panel-trigger[aria-expanded="true"] i::before {
content: "\f0d8";
}
.testwiki-important-information-container .testwiki-panel-trigger[aria-expanded="true"] {
color: #0060DF;
}
.testwiki-important-information-container .panel-body {
border: 1px solid #CCCCCC;
margin-top: 30px;
margin-bottom: 30px;
}
@media all and ( max-width: 500px ) {
.testwiki-important-information-container .testwiki-label {
display: block;
}
}
/* Contact primary */
.bs-layout-container.contact-primary {
border-top: 3px solid #F0F0F0;
border-bottom: 3px solid #F0F0F0;
margin-top: 30px;
margin-bottom: 30px;
}
.bs-layout-container.contact-primary .bs-layout-cell {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
min-height: 170px !important;
}
.bs-layout-container.contact-primary .bs-layout-cell p {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.bs-layout-cell.personal-contact {
min-width: 315px !important;
}
.bs-layout-cell.personal-contact > .floatleft {
margin-top: 10px;
margin-bottom: 0;
margin-right: 5px !important;
}
.bs-layout-cell.personal-contact > .body {
display: block;
}
@media all and ( max-width: 320px ) {
.bs-layout-cell.personal-contact > .body {
clear:both;
}
}
@media all and ( min-width: 321px ) {
.bs-layout-cell.personal-contact > .body {
float: left;
}
}
.bs-layout-cell.webinar,
.bs-layout-cell.helpdesk,
.bs-layout-cell.tour{
width: 195px !important;
position: relative;
}
.bs-layout-cell.webinar a,
.bs-layout-cell.helpdesk a,
.bs-layout-cell.tour a {
display: block;
position: absolute;
bottom: 35px;
}
.bs-layout-cell.webinar a > img,
.bs-layout-cell.helpdesk a > img,
.bs-layout-cell.tour a > img {
max-width: 100%;
}
.bs-layout-cell.webinar a span,
.bs-layout-cell.helpdesk a span,
.bs-layout-cell.tour a span {
display: inline-block;
height: 16px;
}
@media all and ( min-width: 721px ) and ( max-width: 1080px ) {
.bs-layout-container.contact-primary .bs-layout-cell {
min-width: 40%;
}
}
@media all and ( max-width: 721px ) {
.bs-layout-cell.webinar a,
.bs-layout-cell.helpdesk a,
.bs-layout-cell.tour a {
position: relative;
bottom: auto;
}
}
/* Use cases*/
.bs-layout-container.use-cases {
margin-top: 30px;
}
.bs-layout-container.use-cases .bs-layout-cell {
background-color: #F0F0F0;
text-align: center;
padding: 30px;
}
.bs-layout-container.use-cases .use-case-headline {
display: block;
margin-top: 30px;
margin-bottom: 20px;
font-size: 1.2em;
font-weight: bold;
}
.bs-layout-container.use-cases .use-case-headline a,
.bs-layout-container.use-cases .use-case-headline a.extern,
.bs-layout-container.use-cases .use-case-headline a:focus,
.bs-layout-container.use-cases .use-case-headline a.extern:focus {
color: #0060df !important;
}
.bs-layout-container.use-cases .use-case-headline a:hover,
.bs-layout-container.use-cases .use-case-headline a.extern:hover {
color: #006eff !important;
}
.bs-layout-container.use-cases a,
.bs-layout-container.use-cases a.extern,
.bs-layout-container.use-cases a:hover,
.bs-layout-container.use-cases a.extern:hover,
.bs-layout-container.use-cases a:focus,
.bs-layout-container.use-cases a.extern:focus {
font-weight: bold;
color: #C6752D !important;
}
/* Common */
/*
i.arrows-white and i.arrows-blue background-image is set in MediaWiki:Common.css
*/
.portal-link i.arrows-white,
.portal-link i.arrows-blue {
display: inline-block;
width: 26px;
height: 16px;
}
.portal-link {
width: 100%;
padding: 5px;
}
.portal-link a.external {
background-image: none;
}
.portal-link.yellow {
background-color: #C6752D;
}
.portal-link.yellow a,
.portal-link.yellow i {
color: white !important;
}
.portal-link.yellow a:hover,
.portal-link.yellow a:focus {
text-decoration: none;
color: white !important;
}
.vertical-separator {
margin-left: 2px;
margin-right: 3px;
border-left: 1px solid #CCCCCC;
}