MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
(Add citizen CSS (direct copy of timeless for now))
 
(Hiding edit notice from main page)
 
(24 intermediate revisions by the same user not shown)
Line 6: Line 6:
   flex-direction: row;
   flex-direction: row;
   flex-wrap: wrap;
   flex-wrap: wrap;
}
#mainpage-flexbox, #help-flexbox {
  margin-top: 0.8rem;
}
}


Line 13: Line 17:


.flexchild-border {
.flexchild-border {
   background-color: #f8f9fa;
   background-color: var(--color-surface-1);
  border-style: solid;
   font-size: 0.875rem;
  border-width: 1px;
   border-radius: 8px;
  border-color: #eaecf0;
   padding: 15px;
  padding-left: 15px;
   padding-right: 15px;
   padding-top: 15px;
   padding-bottom: 15px;
   margin: 5px;
   margin: 5px;
   box-shadow:
   box-shadow:
Line 29: Line 29:


.flexheading3 {
.flexheading3 {
  font-size: 1.4em;
   margin-top: 0rem !important;
   margin-top: 0em;
}
}


.flexheading4 {
.flexheading4 {
   font-size: 1.2em;
   margin-top: 0.8rem !important;
  margin-top: 0em;
  margin-bottom: 0.5em;
}
 
@media screen and ( max-width: 850px ) {
  .flexheading4 {
    margin-top: 0.5em;
  }
}
 
.text-bottomline {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #a2a9b1;
}
 
.flexchild-borderless > ul {
  margin-top: 0em;
}
}


Line 58: Line 39:
.vginfobox {
.vginfobox {
   float: right;
   float: right;
   max-width: 365px;
   max-width: 23rem;
  border-spacing: 0;
  border-radius: 8px;
  background-color: var(--color-surface-1);
  font-size: 0.875rem;
  padding: 15px;
   margin-left: 15px;
   margin-left: 15px;
   margin-bottom: 15px;
   margin-bottom: 15px;
  font-size: 90%;
  background-color: #f8f9fa;
  border-style: solid;
  border-width: 1px;
  border-color: #eaecf0;
  border-spacing: 0px;
   box-shadow:
   box-shadow:
     1px 2px 2px hsl(238deg 66% 65% / 0.3),
     1px 2px 2px hsl(238deg 66% 65% / 0.3),
Line 73: Line 53:
}
}


@media screen and ( max-width: 850px ) {
@media screen and ( max-width: 719px ) {
   .vginfobox {
   .vginfobox {
     float: none;
     float: none;
     font-size: 100%;
     font-size: 100%;
     margin: auto !important;
     margin: auto !important;
    max-width: 30rem !important;
   }
   }
}
}
Line 83: Line 64:
.vginfobox > * > tr > th, .vginfobox > * > tr > td {
.vginfobox > * > tr > th, .vginfobox > * > tr > td {
   padding: 10px 15px;
   padding: 10px 15px;
}
/* Add background and color to user message notifications */
.usermessage {
  background-color: var(--color-surface-2);
  color: var(--color-base--subtle);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 10px 15px;
  margin-top: 0.6rem;
  margin-bottom: 0.8rem;
  max-width: var(--width-layout);
  margin-right: auto;
  margin-left: auto;
  border-color: rgb(104, 109, 224);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--medium);
}
.usermessage:hover {
  border-color: var(--color-primary--hover);
}
/* Fix Padding on bottom of Patch */
pre.mw-collapsed  {
  padding-bottom: 2.5rem;
}
/* Add styled borders to wikitables */
.wikitable {
  box-shadow:
    0px 0px 2px hsl(238deg 66% 65% / 0.3),
    0px 0px 4px hsl(238deg 66% 65% / 0.3),
    0px 0px 6px hsl(238deg 66% 65% / 0.3),
    0px 0px 8px hsl(238deg 66% 65% / 0.3);
}
/* Force images to be shown inline with surrounding text */
.image-inline {
  display: inline-flex;
}
/* Edit notice on pages with no categories */
.mw-editnotice-0 {
  color: var(--color-warning);
}
/* Hide the Edit notice on the main page */
.action-edit.page-Main_Page .mw-editnotice-0, .action-submit.page-Main_Page .mw-editnotice-0 {
  display: none;
}
}

Latest revision as of 07:06, 15 June 2023

/* All CSS here will be loaded for users of the Citizen skin */

/* Flexbox used in the Main page */
.flexbox-row-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#mainpage-flexbox, #help-flexbox {
  margin-top: 0.8rem;
}

.flexchild-stretch {
  flex-grow: 1;
}

.flexchild-border {
  background-color: var(--color-surface-1);
  font-size: 0.875rem;
  border-radius: 8px;
  padding: 15px;
  margin: 5px;
  box-shadow:
    1px 2px 2px hsl(238deg 66% 65% / 0.3),
    2px 4px 4px hsl(238deg 66% 65% / 0.3),
    4px 8px 8px hsl(238deg 66% 65% / 0.3);
}

.flexheading3 {
  margin-top: 0rem !important;
}

.flexheading4 {
  margin-top: 0.8rem !important;
}

/* Video game infobox */
.vginfobox {
  float: right;
  max-width: 23rem;
  border-spacing: 0;
  border-radius: 8px;
  background-color: var(--color-surface-1);
  font-size: 0.875rem;
  padding: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  box-shadow:
    1px 2px 2px hsl(238deg 66% 65% / 0.3),
    2px 4px 4px hsl(238deg 66% 65% / 0.3),
    4px 8px 8px hsl(238deg 66% 65% / 0.3);
}

@media screen and ( max-width: 719px ) {
  .vginfobox {
    float: none;
    font-size: 100%;
    margin: auto !important;
    max-width: 30rem !important;
  }
}

.vginfobox > * > tr > th, .vginfobox > * > tr > td {
  padding: 10px 15px;
}

/* Add background and color to user message notifications */
.usermessage {
  background-color: var(--color-surface-2);
  color: var(--color-base--subtle);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 10px 15px;
  margin-top: 0.6rem;
  margin-bottom: 0.8rem;
  max-width: var(--width-layout);
  margin-right: auto;
  margin-left: auto;
  border-color: rgb(104, 109, 224);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius--medium);
}
.usermessage:hover {
  border-color: var(--color-primary--hover);
}

/* Fix Padding on bottom of Patch */
pre.mw-collapsed  {
  padding-bottom: 2.5rem;
}

/* Add styled borders to wikitables */
.wikitable {
  box-shadow:
    0px 0px 2px hsl(238deg 66% 65% / 0.3),
    0px 0px 4px hsl(238deg 66% 65% / 0.3),
    0px 0px 6px hsl(238deg 66% 65% / 0.3),
    0px 0px 8px hsl(238deg 66% 65% / 0.3);
}

/* Force images to be shown inline with surrounding text */
.image-inline {
  display: inline-flex;
}

/* Edit notice on pages with no categories */
.mw-editnotice-0 {
  color: var(--color-warning);
}

/* Hide the Edit notice on the main page */
.action-edit.page-Main_Page .mw-editnotice-0, .action-submit.page-Main_Page .mw-editnotice-0 {
  display: none;
}