Last edited one week ago
by Demo writer

MediaWiki:Common.css and Template:Portal flex/styles.css: Difference between pages

(Difference between pages)
No edit summary
 
No edit summary
 
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/**Portalpage with flex EN ****/
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css');
.flexbox-portal {display: flex; flex-wrap: wrap; justify-content:space-between;}
/*link colors
.flexbox-portal > div {flex:1; padding: 10px;}
#content a, #content a:visited {color: #36b}*/
.flexbox-portal > div img  {max-width:100%; height:auto;}
#content a.new {color: #b73a3a !important}
.flexbox-portal.col2 > div {flex-basis:47%; margin: 0 15px 15px 0;}
#content  a.ve-ui-toolbar-saveButton {color:white !important}
.flexbox-portal.col3 > div {flex-basis:31%; margin: 0 15px 15px 0;}
#content .navContainer a.mw-selflink, #content .navContainer a.mw-selflink:visited {color: #252525}
.flexbox-portal.fullfirst div:first-child {flex-basis:100%}
.flexbox-portal.fulllast div:last-child {flex-basis:100%}


/*GUI overrides*/
.flexbox-portal.boxborder.p-blue > div {border: 1px solid #aed6f1;}
h2,.h2 {font-size:1.5rem; margin-top:3rem; border-bottom:1px solid #d8d8d9}
.flexbox-portal.boxborder.p-green > div {border: 1px solid #a9dfbf;}
h3 {font-size:1.3rem}
.flexbox-portal.boxborder.p-grey > div {border: 1px solid #e9e9ee;}
h4 {font-size:1.2rem}
.flexbox-portal.boxborder.p-orange > div {border: 1px solid #f5cba7;}
h5 {font-size:1.1rem}
.flexbox-portal.boxborder.p-purple > div {border: 1px solid #d7bde2;}
#content .toctitle h2 {font-size: 1.2rem;}
.flexbox-portal.boxborder.p-red > div {border: 1px solid #e6b0aa;}
#content .toc {padding: 10px;margin-top: 2rem;}
.flexbox-portal.boxborder.p-yellow > div {border: 1px solid #f9e79f;}
#content .toctitle {margin-bottom: 1rem;}
.flexbox-portal.boxborder.p-white > div {border: 1px solid #ffffff;}
.toctogglespan {margin-left: 12px;}
.flexbox-portal.none > div {border: none;}
.toc {font-size: 1em}
.flexbox-portal.boxborder > div.emptybox {border: none}
.ns-3002 #data-after-content {display:none;}
.qtip {font-size: 0.95em;line-height: 1.4em;}


/*sidebar */
.flexbox-portal.background > div {border:none;}
a#n-Knowledge-Base, a#n-Integriertes-Managementsystem, a#n-Dokumentationssystem, a#n-Organisationshandbuch {text-indent: -22px ;}
.flexbox-portal.background-hd.p-blue div > h2 {background: #aed6f1;}
a#n-Knowledge-Base::before {font-family:"Helvetica"; font-weight:bold; content:"1"; padding: 2px 6px;border-radius: 5px;font-size: 12px;text-align: center;background: #2b80ea;
.flexbox-portal.background-hd.p-green div > h2  {background: #a9dfbf ;}
color: #fefefe;margin-left: 0; margin-right:6px}
.flexbox-portal.background-hd.p-grey div > h2 {background: #e9e9ee;}
a#n-Integriertes-Managementsystem::before {font-family:"Helvetica"; font-weight:bold; content:"2"; padding: 2px 6px;border-radius: 5px;font-size: 12px;text-align: center;background: #0d6efd;
.flexbox-portal.background-hd.p-orange div > h2 {background: #f5cba7;}
color: #fefefe;margin-left: 0; margin-right:6px;}
.flexbox-portal.background-hd.p-purple div > h2 {background: #d7bde2;}
a#n-Dokumentationssystem::before {font-family:"Helvetica"; font-weight:bold; content:"3"; padding: 2px 6px;border-radius: 5px;font-size: 12px;text-align: center;background: #0d6efd;
.flexbox-portal.background-hd.p-red div > h2 {background: #e6b0aa;}
color: #fefefe;margin-left: 0; margin-right:6px}
.flexbox-portal.background-hd.p-yellow div > h2 {background: #f9e79f;}
a#n-Organisationshandbuch::before {font-family:"Helvetica"; font-weight:bold; content:"4"; padding: 2px 6px;border-radius: 5px;font-size: 12px;text-align: center;background: #0d6efd;
.flexbox-portal.background-hd.p-white div > h2 {background: #ffffff;}
color: #fefefe;margin-left: 0; margin-right:6px}


/*Main page*/
.flexbox-portal.background.p-blue > div {background: #d6eaf8 ;}
#mpbanner {background:#415589 url(/w/nsfr_img_auth.php/a/a4/BS_Wiki_Header_BG.jpg) right no-repeat; padding:20px}
.flexbox-portal.background.p-green > div {background: #d4efdf;}
#mpbanner-byline {font-size:1.8em; color:white;}
.flexbox-portal.background.p-grey > div {background: #e9e9ee;}
#mpbanner-title {font-size:4em; color:white; line-height:1.2em;}
.flexbox-portal.background.p-orange > div {background: #fae5d3;}
.mp big {
.flexbox-portal.background.p-purple > div {background: #ebdef0;}
    font-size: 1.1rem;
.flexbox-portal.background.p-red > div {background: #f2d7d5;}
    line-height: 1.4rem;
.flexbox-portal.background.p-yellow > div {background: #fcf3cf;}
    display: inline-block;
.flexbox-portal.background.p-white > div {background: #ffffff;}
    margin-bottom: 16px;
    margin-top: 14px;
}
.badge {display: inline-block;min-width: 16px;padding: 6px 9px;border-radius: 5px;font-size: 16px;text-align: center;background: #2b80ea;
color: #fefefe;margin-left: 0; margin-right:6px}
.badge-hp {display: inline-block;min-width: 16px;padding: 2px 4px 2px 8px;border-radius: 5px;font-size: 16px;text-align: center;background: #fdc300;
color: #fefefe; margin-left: 0; margin-right:6px}
#use_cases [class*=" bi-"]::before {vertical-align: -0.2em;font-size: 1.1em;}
#testlogin {background:rgba(248,197,127,0.5); padding:6px}
/*image-zooms*/
.screenshot {width: 100%; height: 200px;overflow: hidden;}


/*Content nav*/
.flexbox-portal > div.box.p-blue {background: #d6eaf8;}
.navContainer .pageNext {float:right}
.flexbox-portal > div.box.p-green {background: #d4efdf;}
.navContainer::after {content: ""; display: block; clear: both;}
.flexbox-portal > div.box.p-grey {background: #e9e9ee;}
.navContainer .badge {padding: 4px;font-size: 12px;padding: 3px 7px;font-family:"helvetica"}
.flexbox-portal > div.box.p-orange {background: #fae5d3;}
#content .navContainer .badge a, #content .navContainer .badge a:visited {color:white !important;}
.flexbox-portal > div.box.p-purple {background: #ebdef0;}
/*Simple flex-container */
.flexbox-portal > div.box.p-red {background: #f2d7d5;}
.flexbox-portal {display: flex; flex-direction: row;flex-wrap: wrap;justify-content: space-between; align-items: stretch;align-content: stretch;}
.flexbox-portal > div.box.p-yellow {background: #fcf3cf;}
.flexbox-portal > div {width: 48.5%; padding: 10px; margin-bottom: 18px;border: 1px solid #cdcdcd;}
.flexbox-portal > div.box.p-white  {background: #ffffff;}
.flexbox-portal div h2 {font-size: 1.3em;border-bottom: none; margin-top: 0;background: #efefef;padding: 10px;}
 
.flexbox-portal.background  div.emptybox {background: none}
.flexbox-portal div > h2 {font-size: 1.1em; border-bottom: none;margin-top: 0;  padding: 10px; font-weight: bold;}
.flexbox-portal.underline-hd div > h2 {font-size: 1.1em; background:none;border-bottom: 1px solid #8b8b8b;margin-top: 0; padding: 10px; font-weight: bold;}
.flexbox-portal.hide-hd div > h2 {display:none;}
.flexbox-portal h1 .mw-editsection, .flexbox-portal h2 .mw-editsection, .flexbox-portal h3 .mw-editsection, .flexbox-portal h4 .mw-editsection, .flexbox-portal h5 .mw-editsection, .flexbox-portal h6 .mw-editsection
.flexbox-portal h1 .mw-editsection, .flexbox-portal h2 .mw-editsection, .flexbox-portal h3 .mw-editsection, .flexbox-portal h4 .mw-editsection, .flexbox-portal h5 .mw-editsection, .flexbox-portal h6 .mw-editsection
{display:none;}
{display:none;}
.rss dd {display:none;}
.mw-parser-output .bs-layout-container.intro-text {font-size: 1.2em;}
.rss dt {font-weight:normal;margin-bottom:1.2em;}
h3 {font-size: 1.6em;}
/*mw-ui-button link*/
.ve-ce-surface-enabled .ve-ce-branchNode-blockSlug {visibility: hidden;display: none;}
.mw-ui-button.mw-ui-progressive a {color:#ffffff !important}
.thumbborder {border: 1px solid #e5e5e5;}
 
@media only screen and (max-width: 768px) { .flexbox-portal > div {width: 98%;}}
/*Tables*/
/**Formular **/
table.wikitable td, table.wikitable th {font-size:15px; color:#252525}
#pfForm section.ve-ce-branchNode a img {max-width:100% !important; height:auto !important;}/**im Formular **/
#features table.aligntop th, #features table.aligntop td, #features  .wikitable > tr > th,  #features .wikitable > * > tr > th {vertical-align: top !important;padding: 16px; text-align:left;}
.formtable th {text-align:right; padding:10px; background:#efefef; font-weight:normal;}
.mw-parser-output table.wikitable {color:#252525;}
.formtable td {padding:10px;}
/*Headertabs*/
.bs-mwvisualeditor-field-container {max-width:850px;}
#headertabs .oo-ui-panelLayout-framed {border:0;}
.bs-mwvisualeditor-field-container img {max-width:100%; height:auto;}
#headertabs .oo-ui-menuLayout-menu {border-bottom: 1px solid #d3d5da}
 
/*Forms*/
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {margin-left: 4px !important;}
.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {width: 500px;}
div.pfFormInputWrapper {margin-top:0}
#pfForm .mw-ui-input, #pfForm .createboxInput, #pfForm .mandatoryField, #pfForm textarea {width:auto !important}


/*Global templates */
@media only screen and (max-width: 768px) {.flexbox-portal, .flexbox-portal.col2, .flexbox-portal.col3 > div {flex-basis: 98%;}}
.infolink {float:right; display:inline; font-size: 14px;margin-left: 20px;}
/**Formular **/
#pfForm section.ve-ce-branchNode a img {max-width:100% !important; height:auto !important;}/**im Formular **/
.formtable th {text-align:right; padding:10px; background:#efefef; font-weight:normal;}
.formtable td {padding:10px;}
.bs-mwvisualeditor-field-container {max-width:850px;}
.bs-mwvisualeditor-field-container img {max-width:100%; height:auto;}

Revision as of 16:25, 1 December 2021

/**Portalpage with flex EN ****/
.flexbox-portal {display: flex; flex-wrap: wrap; justify-content:space-between;}
.flexbox-portal > div {flex:1; padding: 10px;}
.flexbox-portal > div img  {max-width:100%; height:auto;}
.flexbox-portal.col2 > div {flex-basis:47%; margin: 0 15px 15px 0;}
.flexbox-portal.col3 > div {flex-basis:31%; margin: 0 15px 15px 0;}
.flexbox-portal.fullfirst div:first-child {flex-basis:100%}
.flexbox-portal.fulllast div:last-child {flex-basis:100%}

.flexbox-portal.boxborder.p-blue > div {border: 1px solid #aed6f1;}
.flexbox-portal.boxborder.p-green > div {border: 1px solid #a9dfbf;}
.flexbox-portal.boxborder.p-grey > div {border: 1px solid #e9e9ee;}
.flexbox-portal.boxborder.p-orange > div {border: 1px solid #f5cba7;}
.flexbox-portal.boxborder.p-purple > div {border: 1px solid #d7bde2;}
.flexbox-portal.boxborder.p-red > div {border: 1px solid #e6b0aa;}
.flexbox-portal.boxborder.p-yellow > div {border: 1px solid #f9e79f;}
.flexbox-portal.boxborder.p-white > div {border: 1px solid #ffffff;}
.flexbox-portal.none > div {border: none;}
.flexbox-portal.boxborder > div.emptybox {border: none}

.flexbox-portal.background > div {border:none;}
.flexbox-portal.background-hd.p-blue div > h2 {background: #aed6f1;}
.flexbox-portal.background-hd.p-green div > h2  {background: #a9dfbf ;}
.flexbox-portal.background-hd.p-grey div > h2 {background:  #e9e9ee;}
.flexbox-portal.background-hd.p-orange div > h2 {background: #f5cba7;}
.flexbox-portal.background-hd.p-purple div > h2 {background: #d7bde2;}
.flexbox-portal.background-hd.p-red div > h2 {background: #e6b0aa;}
.flexbox-portal.background-hd.p-yellow div > h2 {background: #f9e79f;}
.flexbox-portal.background-hd.p-white div > h2 {background: #ffffff;}

.flexbox-portal.background.p-blue > div {background: #d6eaf8 ;}
.flexbox-portal.background.p-green > div {background: #d4efdf;}
.flexbox-portal.background.p-grey > div {background: #e9e9ee;}
.flexbox-portal.background.p-orange > div {background: #fae5d3;}
.flexbox-portal.background.p-purple > div {background: #ebdef0;}
.flexbox-portal.background.p-red > div {background:  #f2d7d5;}
.flexbox-portal.background.p-yellow > div {background: #fcf3cf;}
.flexbox-portal.background.p-white > div {background: #ffffff;}

.flexbox-portal > div.box.p-blue {background: #d6eaf8;}
.flexbox-portal > div.box.p-green {background: #d4efdf;}
.flexbox-portal > div.box.p-grey {background: #e9e9ee;}
.flexbox-portal > div.box.p-orange {background: #fae5d3;}
.flexbox-portal > div.box.p-purple {background: #ebdef0;}
.flexbox-portal > div.box.p-red {background:  #f2d7d5;}
.flexbox-portal > div.box.p-yellow {background: #fcf3cf;}
.flexbox-portal > div.box.p-white  {background: #ffffff;}

.flexbox-portal.background  div.emptybox {background: none}
.flexbox-portal div > h2 {font-size: 1.1em; border-bottom: none;margin-top: 0;  padding: 10px; font-weight: bold;}
.flexbox-portal.underline-hd div > h2 {font-size: 1.1em; background:none;border-bottom: 1px solid #8b8b8b;margin-top: 0;  padding: 10px; font-weight: bold;}
.flexbox-portal.hide-hd div > h2 {display:none;}
.flexbox-portal h1 .mw-editsection, .flexbox-portal h2 .mw-editsection, .flexbox-portal h3 .mw-editsection, .flexbox-portal h4 .mw-editsection, .flexbox-portal h5 .mw-editsection, .flexbox-portal h6 .mw-editsection
{display:none;}
.mw-parser-output .bs-layout-container.intro-text {font-size: 1.2em;}
h3 {font-size: 1.6em;}
.ve-ce-surface-enabled .ve-ce-branchNode-blockSlug {visibility: hidden;display: none;}
.thumbborder {border: 1px solid #e5e5e5;}
@media only screen and (max-width: 768px) { .flexbox-portal > div {width: 98%;}}
/**Formular **/
#pfForm section.ve-ce-branchNode a img {max-width:100% !important; height:auto !important;}/**im Formular **/
.formtable th {text-align:right; padding:10px; background:#efefef; font-weight:normal;}
.formtable td {padding:10px;}
.bs-mwvisualeditor-field-container {max-width:850px;}
.bs-mwvisualeditor-field-container img {max-width:100%; height:auto;}

@media only screen and (max-width: 768px) {.flexbox-portal, .flexbox-portal.col2, .flexbox-portal.col3 > div {flex-basis: 98%;}}
/**Formular **/
#pfForm section.ve-ce-branchNode a img {max-width:100% !important; height:auto !important;}/**im Formular **/
.formtable th {text-align:right; padding:10px; background:#efefef; font-weight:normal;}
.formtable td {padding:10px;}
.bs-mwvisualeditor-field-container {max-width:850px;}
.bs-mwvisualeditor-field-container img {max-width:100%; height:auto;}
No categories assignedEdit