Difference between revisions of "MediaWiki:Common.css"

From EdTech Help
 
(69 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
#ca-formedit { display:none!important; }
 
#ca-formedit { display:none!important; }
  
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt, #p-logo-text a, #personal h2 span
+
/*default serifed font replaced*/
{
+
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt, #p-logo-text a, #personal h2 span {
 
font-family: 'Linux Libertine','Trebuchet MS', sans-serif;
 
font-family: 'Linux Libertine','Trebuchet MS', sans-serif;
 
}
 
}
 +
 +
/*customizations to class that typically contains other classes containing images and attachments*/
 
.thumbinner {
 
.thumbinner {
border: 2px solid ;
 
 
max-width: 80%;
 
max-width: 80%;
 
height: auto;
 
height: auto;
 
background-color: #f3f3f3;
 
background-color: #f3f3f3;
 +
box-shadow: 0 1px 2px 1px rgb(0 0 0 / 2%);
 
}
 
}
 +
 +
/*prevents images with large original size from overtaking the page*/
 
.thumbimage {
 
.thumbimage {
 
max-width: 80%;
 
max-width: 80%;
 
height: auto;
 
height: auto;
 
}
 
}
 +
 +
/*customization to 'center' Align type for attachments to allow space at bottom*/
 
.center {
 
.center {
 
padding-bottom: 25px ;
 
padding-bottom: 25px ;
 
}
 
}
  
#mw-content-container
+
/*unsure what this is*/
{
+
#mw-content-container {
 
background-image: linear-gradient(transparent,transparent),url(/wiki/skins/Timeless/resources/images/SakaigerBackground.png);
 
background-image: linear-gradient(transparent,transparent),url(/wiki/skins/Timeless/resources/images/SakaigerBackground.png);
 
}
 
}
  
a#p-banner.mw-wiki-title
+
/*allows 'EDTECH Help' to be centred rest of left page panel in desktop view*/
{
+
a#p-banner.mw-wiki-title {
 
   padding-left: 13px;
 
   padding-left: 13px;
 
}
 
}
  
 +
/*stealthing of login option from all standard wiki pages*/
 +
div#personal {
 +
display: none;
 +
}
 +
 +
/*unsure what this was before it was commented out*/
 
/*div#p-logo-text.mw-portlet
 
/*div#p-logo-text.mw-portlet
 
{
 
{
 
   padding-right: 1em;
 
   padding-right: 1em;
 
}*/
 
}*/
 +
 +
/*create a space for flex panels space on home page*/
 +
.flex-container {
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
  width: 100%;
 +
  align-items: center;
 +
  justify-content: center;
 +
}
 +
 +
/*individual flex panels on home page*/
 +
.flex-container > div {
 +
  background-color: #f3f3f3;
 +
  word-wrap: break-word;
 +
  min-height: 200px;
 +
  min-width: 200px;
 +
  margin: 10px;
 +
  padding: 20px;
 +
  width: 20%;
 +
  border: solid #eeeeee;
 +
  border-width: 1px 1px 0.2em;
 +
  box-shadow: 0 2px 4px 2px rgb(0 0 0 / 2%);
 +
}
 +
 +
/*info panel general containment*/
 +
.alert {
 +
    position: relative;
 +
    margin-bottom: 1rem;
 +
    border-radius: 0.25rem;
 +
    padding: 0.75rem;
 +
    width: 80%;
 +
    margin: 15px auto;
 +
}
 +
 +
/*keeps left icon space in info panels emptied of other content*/
 +
.d-flex {
 +
    display: flex;
 +
}
 +
 +
/*styling for attention info panel type*/
 +
.alert-attention{
 +
    background-color: #fffae6;
 +
    border-color: #ffeeba;
 +
}
 +
/*styling for warning info panel type*/
 +
.alert-warning{
 +
    background-color: #ffebe6;
 +
    border-color: #ffd4d4;
 +
}
 +
 +
/*styling for alert info panel type*/
 +
.alert-info{
 +
    background-color: #deebff;
 +
    border-color: #aecdff;
 +
}
 +
 +
/*creates a left space to contain info panel icon*/
 +
.mr-3, .mx-3 {
 +
    margin-right: 1rem;
 +
}
 +
 +
/*aligns info panel icon*/
 +
.floatleft {
 +
    float: left;
 +
}
 +
 +
/*an experiment that might not be doing anything useful*/
 +
.floatleft > div {
 +
min-height: 100%;
 +
}
 +
 +
/*styling for non-Heading heading text in info panel*/
 +
.alert-heading {
 +
    font-size: 16px;
 +
    font-weight: 700;
 +
}

Latest revision as of 19:21, 14 February 2022

/* CSS placed here will be applied to all skins */
#ca-talk { display:none!important; }
#ca-history { display:none!important; }
#ca-formedit { display:none!important; }

/*default serifed font replaced*/
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt, #p-logo-text a, #personal h2 span {
font-family: 'Linux Libertine','Trebuchet MS', sans-serif;
}

/*customizations to class that typically contains other classes containing images and attachments*/
.thumbinner {
max-width: 80%;
height: auto;
background-color: #f3f3f3;
box-shadow: 0 1px 2px 1px rgb(0 0 0 / 2%);
}

/*prevents images with large original size from overtaking the page*/
.thumbimage {
max-width: 80%;
height: auto;
}

/*customization to 'center' Align type for attachments to allow space at bottom*/
.center {
padding-bottom: 25px ;
}

/*unsure what this is*/
#mw-content-container {
background-image: linear-gradient(transparent,transparent),url(/wiki/skins/Timeless/resources/images/SakaigerBackground.png);
}

/*allows 'EDTECH Help' to be centred rest of left page panel in desktop view*/
a#p-banner.mw-wiki-title {
  padding-left: 13px;
}

/*stealthing of login option from all standard wiki pages*/
div#personal {
display: none;
}

/*unsure what this was before it was commented out*/
/*div#p-logo-text.mw-portlet
{
  padding-right: 1em;
}*/

/*create a space for flex panels space on home page*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: center;
}

/*individual flex panels on home page*/
.flex-container > div {
  background-color: #f3f3f3;
  word-wrap: break-word;
  min-height: 200px;
  min-width: 200px;
  margin: 10px;
  padding: 20px;
  width: 20%;
  border: solid #eeeeee;
  border-width: 1px 1px 0.2em;
  box-shadow: 0 2px 4px 2px rgb(0 0 0 / 2%);
}

/*info panel general containment*/
.alert {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    padding: 0.75rem;
    width: 80%;
    margin: 15px auto;
}

/*keeps left icon space in info panels emptied of other content*/
.d-flex {
    display: flex;
}

/*styling for attention info panel type*/
.alert-attention{
    background-color: #fffae6;
    border-color: #ffeeba;
}
/*styling for warning info panel type*/
.alert-warning{
    background-color: #ffebe6;
    border-color: #ffd4d4;
}

/*styling for alert info panel type*/
.alert-info{
    background-color: #deebff;
    border-color: #aecdff;
}

/*creates a left space to contain info panel icon*/
.mr-3, .mx-3 {
    margin-right: 1rem;
}

/*aligns info panel icon*/
.floatleft {
    float: left;
}

/*an experiment that might not be doing anything useful*/
.floatleft > div {
	min-height: 100%;
}

/*styling for non-Heading heading text in info panel*/
.alert-heading {
    font-size: 16px;
    font-weight: 700;
}