Line 1: |
Line 1: |
| + | /* For the Top banner on Start Page */ |
| + | |
| + | #pw-bottombanner { |
| + | clear: both; |
| + | position: relative; |
| + | box-sizing: border-box; |
| + | width: 100%; |
| + | margin-top: 0em; |
| + | min-width: 47em; |
| + | border-color: #ddd; |
| + | background-color: #f9f9f9; |
| + | white-space: nowrap; |
| + | } |
| + | |
| #mp-topbanner { | | #mp-topbanner { |
| clear: both; | | clear: both; |
Line 5: |
Line 19: |
| width: 100%; | | width: 100%; |
| margin-top: 1.2em; | | margin-top: 1.2em; |
| + | margin-bottom: 0em; |
| min-width: 47em; | | min-width: 47em; |
| border-color: #ddd; | | border-color: #ddd; |
Line 12: |
Line 27: |
| | | |
| .mp-bordered, | | .mp-bordered, |
| + | .pw-bordered, |
| .mp-h2, | | .mp-h2, |
| body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */ | | body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */ |
Line 104: |
Line 120: |
| } | | } |
| | | |
− | #mp-upper {
| + | /* End of Top banner on Start Page */ |
− | width: 100%;
| |
− | margin-top: 4px;
| |
− | margin-bottom: 0;
| |
− | border-spacing: 0;
| |
− | border-collapse: separate;
| |
− | }
| |
| | | |
− | #mp-upper .mid-table {
| + | /* For the rest of the Start Page */ |
− | border-color: transparent;
| |
− | }
| |
| | | |
− | #mp-left {
| + | .mainpage_row { |
− | width: 55%; | + | display: flex; |
− | border-color: #CFD7C7;
| + | flex-direction: row; |
− | background: #F5F7F3;
| + | flex-flow: row wrap; |
| + | justify-content: space-between; |
| + | padding: 0; |
| + | margin: 0 -5px 0 -5px; |
| } | | } |
− | | + | .mainpage_box { |
− | #mp-right {
| + | flex: 1; |
− | width: 45%;
| + | margin: 5px; |
− | border-color: #F6F1D1; | + | min-width: 210px; |
− | background: #FCFAEE;
| + | border: 1px solid #CCC; |
| + | padding: 0 10px 10px 10px; |
| + | box-shadow: 0 2px 2px rgba(0,0,0,0.1); |
| } | | } |
| + | .mainpage_box h3 { |
| + | /* Reset padding so is equal across skins */ |
| + | padding: 0; |
| + | margin: 0.5em 0; |
| | | |
− | #mp-left,
| |
− | #mp-right {
| |
− | padding: 0;
| |
− | vertical-align: top;
| |
| } | | } |
− | | + | .mainpage_box h3 .header_icon { |
− | #mp-left .mp-h2 {
| + | float: left; |
− | | + | margin-right: 5px; |
− | background: #CFD7C7;
| |
− | border-color: #a3bfb1;
| |
| | | |
| } | | } |
− | | + | .mainpage_box .items { |
− | #mp-right .mp-h2 {
| + | border-top: 1px solid #CCC; |
− | background: #F6F1D1; | + | padding-top: 0.5em; |
− | border-color: #a3b0bf;
| |
| } | | } |
− | | + | .mainpage_box p:last-child { |
− | #mp-tfa,
| + | margin-bottom: 0; |
− | #mp-dyk,
| |
− | #mp-itn,
| |
− | #mp-otd,
| |
− | #mp-other-lower > div {
| |
− | padding: 0.1em 0.6em; | |
| } | | } |
− | | + | .mainpage_boxcontents_small { |
− | #mp-dyk-h2,
| + | font-size: 95%; |
− | #mp-otd-h2 {
| |
− | clear: both; | |
| } | | } |
| | | |
− | #mp-middle {
| + | @media screen and (max-width: 719px) { |
− | margin-top: 4px; | + | .thumb { |
− | border-color: #70A9A1;
| + | float: none; |
− | background: #E6F0EE; | + | } |
| + | .thumb, .thumbinner { |
| + | margin-left: auto; |
| + | margin-right: auto; |
| + | } |
| } | | } |
| | | |
− | #mp-middle,
| + | .pw-ui-button, .pw-ui-progressive { |
− | #mp-lower, | + | border-radius: 4px !important; |
− | #mp-other-lower { | + | border: 1px solid #40798C !important; |
− | overflow: auto;
| + | color: #40798C !important; |
| + | background: #fff !important; |
| + | text-shadow: 0px 0px 0px; |
| } | | } |
| | | |
− | #mp-tfl-h2 {
| + | .pw-ui-button.pw-ui-progressive:hover, .pw-ui-button.pw-ui-progressive:focus, .pw-ui-button.pw-ui-progressive:active, .pw-ui-button:hover, .pw-ui-progressive:hover, .pw-ui-button:focus, .pw-ui-progressive:focus { |
− | background: #70A9A1;
| + | box-shadow: 0px 0px 0px !important; |
− | border-color: #afa3bf;
| + | text-shadow: 0px 0px 0px !important; |
− | color: #fff;
| + | border: 1px solid #40798C !important; |
| } | | } |
| | | |
− | #mp-tfl {
| + | /* End for the Start Page */ |
− | padding: 0.3em 0.7em;
| |
− | }
| |
− | | |
− | #mp-lower {
| |
− | margin-top: 4px;
| |
− | | |
− | background: #E3EEF2;
| |
− | border-color: #81B4C5;
| |
− | }
| |
− | | |
− | #mp-tfp-h2 {
| |
− | | |
− | border-color: #40798C;
| |
− | background: #40798C;
| |
− | color: #fff;
| |
− | }
| |
− | | |
− | #mp-tfp {
| |
− | margin: 0.1em 0.4em 0.6em;
| |
− | }
| |
− | | |
− | #mp-other-lower {
| |
− | padding: 0;
| |
− | border-color: #e2e2e2;
| |
− | margin-top: 4px;
| |
− | }
| |
− | | |
− | #mp-dyk,
| |
− | #mp-otd,
| |
− | #mp-other-lower {
| |
− | padding-bottom: 0.5em;
| |
− | }
| |
− | | |
− | #mp-other-lower .mp-h2 {
| |
− | background: #eee;
| |
− | border-color: #ddd;
| |
− | color: #222;
| |
− | }
| |
− | | |
− | @media (max-width: 875px) {
| |
− |
| |
− | body.skin--responsive #mp-welcomecount {
| |
− | width: auto;
| |
− | }
| |
− | | |
− | body.skin--responsive #mp-topbanner {
| |
− | min-width: 0;
| |
− | white-space: normal;
| |
− | }
| |
− |
| |
− | body.skin--responsive #mp-portals {
| |
− | display: block;
| |
− | position: static;
| |
− | width: auto;
| |
− | min-width: 0;
| |
− | text-align: center;
| |
− | border-top: 1px solid #ddd;
| |
− | padding: 0.4em 0;
| |
− | margin: 0 0.4em;
| |
− | }
| |
− |
| |
− | body.skin--responsive #mp-portals li {
| |
− | position: static;
| |
− | display: inline;
| |
− | padding: 0 5px;
| |
− | }
| |
− |
| |
− | body.skin--responsive #mp-topbanner .portal-hright {
| |
− | white-space: nowrap;
| |
− | }
| |
− |
| |
− | body.skin--responsive table,
| |
− | body.skin--responsive tr,
| |
− | body.skin--responsive td,
| |
− | body.skin--responsive tbody {
| |
− | display: block !important;
| |
− | width: 100% !important;
| |
− | box-sizing: border-box;
| |
− | }
| |
− | | |
− | body.skin--responsive #mp-tfp tr:first-child td:first-child a {
| |
− | text-align: center;
| |
− | display: table;
| |
− | margin: 0 auto;
| |
− | }
| |
− | }
| |
− | | |
− | | |
− | | |
− | */ | |
− | End of Start Page css | |
− | */ | |
− | | |
| | | |
| | | |
Line 276: |
Line 192: |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; | | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; |
| background: #fff !important; | | background: #fff !important; |
− | }
| |
− |
| |
− | a {
| |
− | color: #0B2027 !important;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | a:hover {
| |
− | color: #40798C !important;
| |
− | text-decoration: underline;
| |
− | }
| |
− |
| |
− | h1 {
| |
− | border: 0px !important;
| |
− | font-family: 'Arial' !important;
| |
− | font-weight: 700 !important;
| |
− | font-size: 36px !important;
| |
− | }
| |
− |
| |
− | h2 {
| |
− | border: 0px !important;
| |
− | font-family: 'Arial' !important;
| |
− | font-weight: 400 !important;
| |
− | font-size: 26px !important;
| |
− | }
| |
− |
| |
− | h3 {
| |
− | border: 0px !important;
| |
− | font-family: 'Arial' !important;
| |
− | font-weight: 400 !important;
| |
− | font-size: 16px !important;
| |
− | }
| |
− |
| |
− | #content h3 {
| |
− | font-size: 20px !important;
| |
| } | | } |
| | | |
Line 318: |
Line 199: |
| } | | } |
| | | |
− | /*
| + | |
| table, td, th { | | table, td, th { |
| border: 0px !important; | | border: 0px !important; |
Line 324: |
Line 205: |
| padding: 5px !important; | | padding: 5px !important; |
| } | | } |
− | */
| + | |
| | | |
| ul, li { | | ul, li { |
Line 551: |
Line 432: |
| -ms-transition-duration: 0.5s !important; | | -ms-transition-duration: 0.5s !important; |
| transition-duration: 0.25s !important; | | transition-duration: 0.25s !important; |
| + | |
| } | | } |
| | | |
Line 752: |
Line 634: |
| } | | } |
| | | |
| + | .mw-footer { |
| + | margin-left: 14em !important; |
| + | padding: 1.25em 1.5em 1.5em !important; |
| + | } |
| + | |
| + | |
| + | /* General styling */ |
| + | |
| + | :root { |
| + | --primary-color: #742774; |
| + | --primary-color-light:#c5b7c5; |
| + | --primary-color-light2: #e9e4e9; |
| + | --secondary-color: #236767; |
| + | --dark-color: #0B2027; |
| + | |
| + | --success-color: #11620B; |
| + | --success-color-light: #D2FBD0; |
| + | |
| + | --warning-color: #b88a00; |
| + | --warning-color-light: #FFEED8; |
| + | |
| + | --error-color: #CC0000; |
| + | --error-color-light: #E5B4B4; |
| + | |
| + | --grey-light-1: #F9F9F9; |
| + | |
| + | --powerautomate-primary-color: #356CDA; |
| + | --powervirtualagent-primary-color: #327B8F; |
| + | --powerbi-primary-color: #E1AD34; |
| + | } |
| + | |
| + | |
| + | /******* Styling headers *******/ |
| + | h1, h2, h3, h4, h5, h6 { |
| + | color: var(--primary-color); |
| + | border: 0px; |
| + | font-family: 'Arial'; |
| + | } |
| + | |
| + | h1 { |
| + | font-weight: 700; |
| + | font-size: 36px; |
| + | } |
| + | |
| + | h2 { |
| + | font-weight: 400; |
| + | font-size: 26px; |
| + | } |
| + | |
| + | h3 { |
| + | font-weight: 400; |
| + | font-size: 16px; |
| + | } |
| + | |
| + | /******* Styling links *******/ |
| + | a:not(.image), a:not(.image):visited { |
| + | color: black !important; |
| + | } |
| + | |
| + | a:not(.image):hover, a:not(.image):visited:hover{ |
| + | color: var(--primary-color) !important; |
| + | } |
| + | |
| + | #bodyContent a:not(.image), #bodyContent a:not(.image):visited{ |
| + | text-decoration: underline !important; |
| + | } |
| + | |
| + | #bodyContent a:not(.image):hover, #bodyContent a:not(.image):visited:hover { |
| + | text-decoration: none !important; |
| + | color: var(--primary-color) !important; |
| + | } |
| + | |
| + | .mw-cookiewarning-container a, .mw-cookiewarning-container a:visited{ |
| + | color: white !important; |
| + | } |
| + | |
| + | .mw-cookiewarning-container a:hover, .mw-cookiewarning-container input:hover{ |
| + | color: white !important; |
| + | text-decoration: underline; |
| + | } |
| + | |
| + | /******* Tables *******/ |
| + | table { |
| + | margin: 2em 0; |
| + | } |
| + | |
| + | table, td, th{ |
| + | border: 1px solid var(--primary-color) !important; |
| + | } |
| + | |
| + | tr:nth-child(odd) { |
| + | background-color: var(--primary-color-light2); |
| + | } |
| + | |
| + | th { |
| + | text-align:left; |
| + | background-color: var(--primary-color-light); |
| + | } |
| + | |
| + | /******* PW Boxes *******/ |
| + | #bodyContent .pw-box{ |
| + | margin: 1em 0; |
| + | padding: 1em; |
| + | border-width: 1px; |
| + | border-left-width: 5px; |
| + | border-style: solid; |
| + | border-color: black; |
| + | border-radius: 6px; |
| + | font-size: inherit !important; |
| + | } |
| + | |
| + | #bodyContent .pw-box.infobox-present{ |
| + | /* |
| + | 300px = width of infobox |
| + | 5em = 1x margin of infobox + 2x padding of infobox + 2x padding of PWBox |
| + | 8px = 5px left border of PWBox + 1px right border of PWBox + 2 pixel (left and right) border of InfoBox |
| + | */ |
| + | width:calc(100% - 300px - 5em - 8px); |
| + | max-width:calc(100% - 300px - 5em - 8px); |
| + | } |
| + | |
| + | #bodyContent .pw-box h3{ |
| + | margin-top: 0; |
| + | font-weight:bold; |
| + | } |
| + | |
| + | #bodyContent .pw-box.info{ |
| + | border-color: var(--primary-color); |
| + | color: var(--primary-color); |
| + | background-color: var(--primary-color-light); |
| + | } |
| + | #bodyContent .pw-box.info h3{ |
| + | color: var(--primary-color); |
| + | } |
| + | |
| + | #bodyContent .pw-box.info a, |
| + | #bodyContent .pw-box.info a:visited{ |
| + | color: var(--primary-color) !important; |
| + | } |
| + | |
| + | #bodyContent .pw-box.warning{ |
| + | border-color: var(--warning-color); |
| + | color: var(--warning-color); |
| + | background-color: var(--warning-color-light); |
| + | } |
| + | #bodyContent .pw-box.warning h3{ |
| + | color: var(--warning-color); |
| + | } |
| + | |
| + | #bodyContent .pw-box.warning a, |
| + | #bodyContent .pw-box.warning a:visited{ |
| + | color: var(--warning-color) !important; |
| + | } |
| + | |
| + | #bodyContent .pw-box.error{ |
| + | border-color: var(--error-color); |
| + | color: var(--error-color); |
| + | background-color: var(--error-color-light); |
| + | } |
| + | |
| + | #bodyContent .pw-box.error h3{ |
| + | color: var(--error-color); |
| + | } |
| + | |
| + | #bodyContent .pw-box.error a, |
| + | #bodyContent .pw-box.error a:visited{ |
| + | color: var(--error-color) !important; |
| + | } |
| + | |
| + | #bodyContent .pw-box.success{ |
| + | border-color: var(--success-color); |
| + | color: var(--success-color); |
| + | background-color: var(--success-color-light); |
| + | } |
| + | |
| + | #bodyContent .pw-box.success h3{ |
| + | color: var(--primary-success); |
| + | } |
| + | |
| + | #bodyContent .pw-box.success a, |
| + | #bodyContent .pw-box.success a:visited{ |
| + | color: var(--success-color) !important; |
| + | } |
| | | |
| + | #bodyContent .mw-ui-button, #bodyContent .mw-ui-progressive{ |
| + | border-color: var(--primary-color) !important; |
| + | color: var(--primary-color) !important; |
| + | } |
| | | |
− | /* CSS used for https://www.mediawiki.org/wiki/MediaWiki/Homepage_improvements_2018 : */ | + | /******* Infobox *******/ |
− | .mainpage_row { | + | .pw-infobox { |
− | display: flex;
| + | background-color: var(--grey-light-1); |
− | flex-direction: row;
| + | border: 1px solid #aaa; |
− | flex-flow: row wrap;
| + | float: right; |
− | justify-content: space-between;
| + | margin: 0 0 1em 1em; |
− | padding: 0;
| + | width: 300px; |
− | margin: 0 -5px 0 -5px;
| + | max-width: 300px; |
| + | min-width: 300px; |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-title { |
| + | padding: 1em; |
| + | font-size: 1.5em; |
| + | text-align: center; |
| + | font-family: 'Linux Libertine','Georgia','Times',serif; |
| + | font-weight:bold; |
| + | background-color: var(--primary-color); |
| + | color: white; |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-content { |
| + | padding: 1em; |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-content .pw-infobox-image { |
| + | text-align: center; |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-content table { |
| + | margin: inherate; |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-content table, |
| + | .pw-infobox .pw-infobox-content td, |
| + | .pw-infobox .pw-infobox-content th{ |
| + | border: 0 !important; |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-content tr:nth-child(odd) { |
| + | background-color: transparent; |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-content th { |
| + | text-align: left; |
| + | vertical-align: top; |
| + | width: 130px; |
| + | background-color: transparent; |
| + | color: var(--primary-color); |
| + | } |
| + | |
| + | .pw-infobox .pw-infobox-content td { |
| + | vertical-align: top; |
| } | | } |
− | .mainpage_box {
| + | |
− | flex: 1;
| + | /** Power Automate **/ |
− | margin: 5px;
| + | .pw-infobox.PowerAutomate .pw-infobox-title { |
− | min-width: 210px;
| + | background-color: var(--powerautomate-primary-color); |
− | border: 1px solid #CCC;
| |
− | padding: 0 10px 10px 10px;
| |
− | box-shadow: 0 2px 2px rgba(0,0,0,0.1);
| |
| } | | } |
− | .mainpage_box h3 {
| |
− | /* Reset padding so is equal across skins */
| |
− | padding: 0;
| |
− | margin: 0.5em 0;
| |
| | | |
| + | .pw-infobox.PowerAutomate .pw-infobox-content th { |
| + | color: var(--powerautomate-primary-color); |
| } | | } |
− | .mainpage_box h3 .header_icon {
| |
− | float: left;
| |
− | margin-right: 5px;
| |
| | | |
| + | /** Power Virtual Agent **/ |
| + | .pw-infobox.PowerVirtualAgent .pw-infobox-title { |
| + | background-color: var(--powervirtualagent-primary-color); |
| } | | } |
− | .mainpage_box .items { | + | |
− | border-top: 1px solid #CCC;
| + | .pw-infobox.PowerVirtualAgent .pw-infobox-content th { |
− | padding-top: 0.5em;
| + | color: var(--powervirtualagent-primary-color); |
| } | | } |
− | .mainpage_box p:last-child { | + | |
− | margin-bottom: 0;
| + | /** Power BI **/ |
| + | .pw-infobox.PowerBI .pw-infobox-title { |
| + | background-color: var(--powerbi-primary-color); |
| + | color:black; |
| } | | } |
− | .mainpage_boxcontents_small { | + | |
− | font-size: 95%;
| + | .pw-infobox.PowerBI .pw-infobox-content th { |
| + | color: var(--powerbi-primary-color); |
| } | | } |
− | /* Style the "other languages" box the same way as other boxes on the main page */ | + | |
− | .mw-pt-languages { | + | /******* Delete lines between menu entries in top horizontal menu *******/ |
− | display: block;
| + | .vector-menu-tabs, .vector-menu-tabs a{ |
− | background: none;
| + | background:none; |
− | border: 1px solid #CCC;
| |
− | box-shadow: 0 2px 2px rgba(0,0,0,0.1);
| |
− | width: auto;
| |
| } | | } |
− | .mw-pt-languages-label { | + | |
− | background: none; | + | /******* Cite *******/ |
− | border-right: none; | + | .PWCite blockquote { |
| + | font-weight: 100; |
| + | font-size: 2rem; |
| + | max-width: 600px; |
| + | line-height: 1.4; |
| + | position: relative; |
| + | margin: 0; |
| + | padding: .5rem; |
| } | | } |
| | | |
− | @media screen and (max-width: 719px) {
| + | .PWCite blockquote:before, |
− | .thumb {
| + | .PWCite blockquote:after { |
− | float: none;
| + | position: absolute; |
− | } | + | color: #f1efe6; |
− | .thumb, .thumbinner { | + | font-size: 8rem; |
− | margin-left: auto;
| + | width: 4rem; |
− | margin-right: auto;
| + | height: 4rem; |
− | } | |
| } | | } |
| | | |
| + | .PWCite blockquote:before { |
| + | content: '“'; |
| + | left: -5rem; |
| + | top: -2rem; |
| + | } |
| | | |
− | .pw-ui-button, .pw-ui-progressive { | + | .PWCite blockquote:after { |
− | border-radius: 4px !important;
| + | content: '”'; |
− | border: 1px solid #40798C !important;
| + | right: -5rem; |
− | color: #40798C !important;
| + | bottom: 1rem; |
− | background: #fff !important;
| |
− | text-shadow: 0px 0px 0px;
| |
| } | | } |
| | | |
− | .pw-ui-button.pw-ui-progressive:hover, .pw-ui-button.pw-ui-progressive:focus, .pw-ui-button.pw-ui-progressive:active, .pw-ui-button:hover, .pw-ui-progressive:hover, .pw-ui-button:focus, .pw-ui-progressive:focus { | + | .PWCite cite { |
− | box-shadow: 0px 0px 0px !important;
| + | line-height: 3; |
− | text-shadow: 0px 0px 0px !important;
| + | text-align: left; |
− | border: 1px solid #40798C !important;
| |
| } | | } |
| + | |
| + | /******* Advent Calendar *******/ |
| + | table.calendar { margin: 0; padding: 10px;} |
| + | table.calendar td { margin: 0; padding: 2px; vertical-align: top;} |
| + | table.calendar th { padding: 2px; text-align: center; font-size: 300%; font-weight: bold; border: none; } |
| + | table.month { border: 2px solid #717d8a; } |
| + | table.month .dow th { text-align: center; font-size: 150%; } |
| + | table.month .heading th { text-align: center; color: #fff; background-color: #742774; font-size: 150%;} |
| + | table.month td { |
| + | border: none; |
| + | margin: 0; |
| + | padding: 1pt 1.5pt; |
| + | font-weight: bold; |
| + | font-size: 25pt; |
| + | text-align: center; |
| + | } |
| + | table.month td.day-active {} |
| + | table.month td.day-empty {} |
| + | table.month td.today {} |