Difference between revisions of "Template:Portal/MainPage.css"

(Created page with "/* ----------------------------------------------------------------------------- Layout styles -----------------------------------------------------------------------------...")
 
Line 1: Line 1:
/* -----------------------------------------------------------------------------
+
/* Links top */
  Layout styles
+
.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{
  Common styles
+
font-size: 14px;
----------------------------------------------------------------------------- */
 
.bs-vspace {
 
margin-top: 10px;
 
    margin-bottom: 10px;
 
 
}
 
}
  
/* container */
+
/* Important information*/
.bs-layout-container {
+
 
width: 100%;
+
.testwiki-important-information-container {}
display: flex;
+
.testwiki-important-information-container .testwiki-label {
flex-wrap: wrap;
+
font-weight: bold;
justify-content: space-between;
+
margin-right: 5px;
 +
}
 +
.testwiki-important-information-container .testwiki-panel-trigger {
 +
margin-left: 5px;
 +
margin-right: 5px;
 +
color: #0060DF;
 
}
 
}
.bs-layout-container.bs-layout-space-between {
+
.testwiki-important-information-container .testwiki-panel-trigger i::before {
justify-content: space-between;
+
font-family: 'fontawesome';
 +
content: "\f0d7";
 +
font-style: normal;
 +
margin-right: 5px;
 
}
 
}
.bs-layout-container.bs-layout-space-around {
+
.testwiki-important-information-container .testwiki-panel-trigger[aria-expanded="true"] i::before {
justify-content: space-around;
+
content: "\f0d8";
 
}
 
}
.bs-layout-container.bs-layout-space-auto {
+
 
justify-content: space-between;
+
.testwiki-important-information-container .testwiki-panel-trigger[aria-expanded="true"] {
 +
color: #0060DF;
 
}
 
}
.bs-layout-container.bs-layout-space-start {
+
.testwiki-important-information-container .panel-body {
justify-content: flex-start;
+
border: 1px solid #CCCCCC;
 +
margin-top: 30px;
 +
margin-bottom: 30px;
 
}
 
}
.bs-layout-container.bs-layout-space-end {
+
 
justify-content: flex-end;
+
@media all and ( max-width: 500px ) {
 +
.testwiki-important-information-container .testwiki-label {
 +
display: block;
 +
}
 
}
 
}
  
/* cell */
+
/* Contact primary */
.bs-layout-cell {
+
.bs-layout-container.contact-primary {
padding: 10px;
+
border-top: 3px solid #F0F0F0;
margin-bottom: 10px;
+
border-bottom: 3px solid #F0F0F0;
overflow: hidden;
+
margin-top: 30px;
text-overflow: ellipsis;
+
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.image img {
+
.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-cell.bs-layout-cell-image {
+
/* Use cases*/
padding: 0px;
+
.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-cell.bs-layout-cell-image a > img {
+
.bs-layout-container.use-cases .use-case-headline {
max-width: 100%;
+
display: block;
height: auto;
+
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,
  Desktop only styles
+
.bs-layout-container.use-cases a.extern,
----------------------------------------------------------------------------- */
+
.bs-layout-container.use-cases a:hover,
@media all and ( min-width: 1001px ) {
+
.bs-layout-container.use-cases a.extern:hover,
.bs-layout-container.bs-space-auto {
+
.bs-layout-container.use-cases a:focus,
justify-content: space-between;
+
.bs-layout-container.use-cases a.extern:focus {
}
+
font-weight: bold;
 +
color: #C6752D !important;
 
}
 
}
/* -----------------------------------------------------------------------------
 
  Desktop and tablet styles
 
----------------------------------------------------------------------------- */
 
@media all and ( min-width: 721px ) {
 
.bs-layout-cell {
 
width: 100%;
 
min-height: 100%;
 
}
 
  
.bs-layout-container.bs-contain-col-2 .bs-layout-cell {
+
/* Common */
width: 49%;
 
}
 
.bs-layout-container.bs-contain-col-2 .bs-layout-cell:nth-child( odd ) {
 
margin-left: 0;
 
margin-right: 1%;
 
}
 
.bs-layout-container.bs-contain-col-2 .bs-layout-cell:nth-child( even ) {
 
margin-left: 1%;
 
margin-right: 0;
 
}
 
  
.bs-layout-container.bs-contain-col-3 .bs-layout-cell {
+
/*
width: 32%;
+
i.arrows-white and i.arrows-blue background-image is set in MediaWiki:Common.css
}
+
*/
.bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n+1 ) {
+
.portal-link i.arrows-white,
margin-left: 0;
+
.portal-link i.arrows-blue {
margin-right: 1%;
+
display: inline-block;
}
+
width: 26px;
.bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n+2 ) {
+
height: 16px;
margin-left: 0.5%;
+
}
margin-right: 0.5%;
 
}
 
.bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n ) {
 
margin-left: 1%;
 
margin-right: 0;
 
}
 
 
.bs-layout-container.bs-contain-col-3.colspan-2-left .bs-layout-cell:nth-child( odd ) {
 
width: 65%;
 
margin-left: 0;
 
margin-right: 1%;
 
}
 
.bs-layout-container.bs-contain-col-3.colspan-2-left .bs-layout-cell:nth-child( even ) {
 
width: 32%;
 
margin-left: 1%;
 
margin-right: 0;
 
}
 
.bs-layout-container.bs-contain-col-3.colspan-2-right .bs-layout-cell:nth-child( odd ) {
 
width: 32%;
 
margin-left: 0;
 
margin-right: 1%;
 
}
 
.bs-layout-container.bs-contain-col-3.colspan-2-right .bs-layout-cell:nth-child( even ) {
 
width: 65%;
 
margin-left: 1%;
 
margin-right: 0;
 
}
 
  
.bs-layout-container.bs-contain-col-4 .bs-layout-cell {
 
width: 23%;
 
}
 
.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+1 ) {
 
margin-left: 0;
 
margin-right: 1%;
 
}
 
.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+2 ),
 
.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+3 ){
 
margin-left: 0.5%;
 
margin-right: 0.5%;
 
}
 
.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n ) {
 
margin-left: 1%;
 
margin-right: 0;
 
}
 
 
.bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n+1 ) {
 
width: 45%;
 
margin-left: 0;
 
margin-right: 1%;
 
}
 
.bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n+2 ),
 
.bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n ){
 
margin-left: 1%;
 
}
 
 
.bs-layout-container.bs-contain-col-4.colspan-2-center .bs-layout-cell:nth-child( 3n+1 ) {
 
margin-right: 1%;
 
}
 
.bs-layout-container.bs-contain-col-4.colspan-2-center .bs-layout-cell:nth-child( 3n+2 ) {
 
width: 45%;
 
margin-right: 0;
 
}
 
.bs-layout-container.bs-contain-col-4.colspan-2-center .bs-layout-cell:nth-child( 3n ){
 
margin-left: 0;
 
margin-right: 1%;
 
}
 
  
.bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n+1 ),
+
.portal-link {
.bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n+2 ) {
+
width: 100%;
margin-right: 1%;
+
padding: 5px;
}
+
}
.bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n ){
 
width: 45%;
 
margin-left: 1%;
 
margin-right: 0;
 
}
 
  
.bs-layout-container.bs-contain-col-4.colspan-3-left .bs-layout-cell:nth-child( odd ) {
+
.portal-link a.external {
width: 75%;
+
background-image: none;
margin-left: 0;
+
}
margin-right: 1%;
 
}
 
.bs-layout-container.bs-contain-col-4.colspan-3-left .bs-layout-cell:nth-child( even ) {
 
margin-left: 1%;
 
margin-right: 0;
 
}
 
  
.bs-layout-container.bs-contain-col-4.colspan-3-right .bs-layout-cell:nth-child( odd ) {
+
.portal-link.yellow {
margin-left: 0;
+
background-color: #C6752D;
margin-right: 1%;
+
}
}
+
.portal-link.yellow a,
.bs-layout-container.bs-contain-col-4.colspan-3-right .bs-layout-cell:nth-child( even ) {
+
.portal-link.yellow i {
width: 75%;
+
color: white !important;
margin-left: 1%;
 
margin-right: 0;
 
}
 
 
}
 
}
/* -----------------------------------------------------------------------------
+
.portal-link.yellow a:hover,
  Tablet only styles
+
.portal-link.yellow a:focus {
----------------------------------------------------------------------------- */
+
text-decoration: none;
@media all and ( min-width: 721px ) and ( max-width: 1000px ) {
+
color: white !important;
.bs-layout-container.bs-space-auto {
 
justify-content: space-evenly;
 
}
 
 
}
 
}
/* -----------------------------------------------------------------------------
 
  Mobile only styles
 
----------------------------------------------------------------------------- */
 
@media all and ( max-width: 720px ) {
 
.bs-layout-container.bs-space-auto {
 
justify-content: space-evenly;
 
}
 
  
.bs-layout-container .bs-layout-cell {
+
.vertical-separator {
min-width: 100%;
+
margin-left: 2px;
min-height: 100% !important;
+
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;
}