MediaWiki talk:Pivot.css

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Revision as of 17:33, September 3, 2020 by Kmdenmark (talk | contribs) (→‎Code requests: done)


Code requests

Category banner size and dismissable site notice on mobiles

User:Kmdenmark Please add this code to the end of Pivot.css, it should shrink the banner height where there is a colored banner (eg any potential treatments like ibuprofen), make the dismissable site notice wider/smaller when pivot is used on mobile screens and fix some layout issues with bullet and numbered lists. As usual ignore the "pre" tags. Thank you ~Njt (talk) 23:29, September 2, 2020 (UTC)

/* Mobiles and tablets - smaller category banner */
@media (max-width: 768px) {
  h1 {
   font-size: 1.4rem;
   margin-top: 4px;
   margin-bottom: 4px;
  }
  h1 div, .firstHeading {
   font-size: 1.25rem;
   padding: 2px!important;
   margin-left:0;
   margin-right: 0;
   color: #333;
   text-shadow: none;
 }
/* Mobiles and tablets (cont) - dismissable site notice - remove large gap on left to reduce the space it takes up, shrink top and bottom margins, reduce left margin on numbered lists */
  .sitedir-ltr .mw-dismissable-notice-body {
  margin: 2px 4.5em 2px 0.5em;
    }
   .mw-dismissable-notice {
     font-size: 90%;
   }
   ul { 
     padding-left: 0.25em;
    }
   ol {
    margin-left: 2em;
   }
}
/* end of mobile code */

Njt , ✓ Done

Old requests

(Done)

content hidden

1. User:Kmdenmark User:Pyrrhus Please change the following to fix the extra gap that it caused in the table of contents. Add usual, without the "pre" tags ~Njt (talk) 15:34, November 17, 2019 (EST) 1)


pre, td {  
 white-space: pre-wrap; /* css-3 */ 
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;   
 word-wrap: break-word;
 } 

to delete the ", td " from the top and change a setting to normal:


pre {  
 padding-left: 2em;
 white-space: pre-wrap; /* css-3 */ 
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;   
 word-wrap: normal;
 } 

2) 2. Please add the code below to the very top, above the existing code.



/* normalize paragraphs, lists and tables to reduce margins */
p {
 margin: 0 0 1em 0;
 padding: 0;
}
table {
  display: table;
  overflow-x: visible;
  margin: 0;
  padding: 0;
}
td {
 display: table-cell;
 margin: 0;
 padding: 0;
}
ul, ol {
 padding: 0;
 margin-top: 0.3em;
 margin-bottom: 0;
}


3) 3. Please change this code to allow article message boxes to be wider on small screens. This add a hyphen - to the start of a line to fix an error, and deletes the white-space lines. Thank you. ~Njt (talk) 15:34, November 17, 2019 (EST) From:


@media screen and (max-width: 500px) {
   td, #mw-content-text li {  
 margin-left: 2px;
 white-space: pre-wrap; /* css-3 */ 
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;   
 word-wrap: break-word;
 webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
 -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
 -webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
    } 
  }


To:


/* mobiles: break crazily long words in lists and tables, using hyphens and keep broken items in same column, put columns closer together */
@media screen and (max-width: 500px) {
  #mw-content, /* special pages */
  td,
  #mw-content-text li:not(.gallerybox) { 
 margin-left: 2px;
 overflow-wrap: break-word;
 word-wrap: break-word;
 -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
 -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
 -webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
    } 
  }


Color of error class

(Done)

content hidden

User:Kmdenmark User:Pyrrhus Please change the following code, which changes the error class color. ~Njt (talk) 17:47, November 17, 2019 (EST)

✓ Done Kmdenmark (talk) 17:25, November 18, 2019 (EST)
Smiley face Thanks User:Kmdenmark. Would you be able to do the changes 1-3 above as well? ~Njt (talk) 13:10, November 21, 2019 (EST)
✓ DoneKmdenmark (talk) 17:57, November 21, 2019 (EST)
Thanks ~Njt (talk) 19:46, November 22, 2019 (EST)

From:


.error code { 
    color: #FF4444 !important;
    color: #fff !important;
}

to:

.error code { 
    background-color: #fff;
    color: #FF4444 !important;
}

Code request - wanted categories are white

Done

content hidden
Please add the following code to the end of MediaWiki:Pivot.css, which should make any wanted categories visible at the bottom of pages - currently it's white text on cream. User:Kmdenmark Thanks notjusttired (talk)

#mw-normal-catlinks a.new { 
  color: #BA0000;
 }

Thanks notjusttired (talk) 16:06, August 12, 2019 (EDT)

Requested to copy to Pivot.css to set color scheme

(completed May 17, 2019)

/* Code by Notjusttired */
/* Custom colors - top bar MEActionRed */
.tab-bar {
    background: #E7453A;
    color: #FFF;
    font-family: "Helvetica Neue", sans-serif;
    font-weight:bold;
}
/* style the sidebar navigation labels */
ul.side-nav label {
    background: #E7453A;
    color: #fff;
    padding: .25em .5em;
}

/* sidebar background color */
body {
    background-color: #f2f2f2;
}

/* controls the main body area styling */
#p-cactions {
    padding-top: 1.5em;
    padding-bottom: .5em;
    margin-left: 0;
    margin-right:0;
    background-color: #f6f6f6;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

/* pull out side bar icons MEAction grey */
ul.off-canvas-list li label {
	background-color: #E7453A;
	color: #FFF;
}
ul.off-canvas-list li a {
   background-color: transparent;
   color: #333333;
   
}
/* very light grey pull out side bar */
.right-off-canvas-menu, .left-off-canvas-menu {
	background-color: #F6F6F6;
}
ul.off-canvas-list li a:hover {
	background-color: #F6F6F6;
}
.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
	background-color: #0BA7CD;
}
/* category button color dark grey */
h4.namespace.label {
	background-color: #767c7e;
}

/* new code */
#p-cactions {
	padding-left:5px;
	padding-right:5px;
   }
.center, text-center {
	text-align: center;
  }
/* paragraphs inside tables must not overwrite alignment */
th p, td p, th > p, td > p {
	text-align: inherit;
}
/* gallery margins are zero on vector */
ul.gallery {
	margin-left: 0;
	margin-right: 0;
}
/* gallery image border */
div.thumb div {
	margin: 0.5rem auto;
}

.gallerybox {
	text-align: center;
}

/* Fit images to containers */
img, .thumb, .image {
    max-width: 100%;
    height: auto;
}

/* unless image is clicked on set max width */
.gallery > img, table > img, img {
    max-width: 75%;
    height: auto;
}
h1.mw-body-content {
  font-size: 1.8rem; }
h2.mw-body-content, td.h2, th.h2 {
  font-size: 1.375rem; }
h3.mw-body-content {
  font-size: 1.25rem; }
h4.mw-body-content { font-size: 1.1rem; 
  font-weight: bold; }

h5.mw-body-content,
 h6.mw-body-content, 
 h7.mw-body-content {
  font-size: 1rem; 
 }

User:Kmdenmark could you do this please? It's for the new pivot skin notjusttired (talk) 09:57, 14 May 2019 (EDT)

User:Notjusttired I need more hand-holding, I'm not sure where you would like this copied to. I copied it to https://www.me-pedia.org/wiki/MediaWiki:Pivot.css. If you meant somewhere else, please flag me again. Kmdenmark (talk) 17:16, 16 May 2019 (EDT)
Thanks, Kmdenmark! I think that’s what Notjusttired meant. I think you just have to remove the beginning <pre> and the ending </pre> and then the CSScode should be correct!
Pyrrhus (talk) 17:43, 16 May 2019 (EDT)
User:Pyrrhus Thank you. I removed the tags, hope it is correct now! Kmdenmark (talk) 18:02, 16 May 2019 (EDT)
That's great! Thanks
(hide)
(read more)

Completed request - May 19th

User:Kmdenmark and User:Pyrrhus. Could you also add this onto the bottom of the existing code.
I've deleted the code already there from this talk page to avoid me getting mixed up or code getting copied in their twice. This should sort an issue with the pre tag scrolling, white on white for citation date errors, and prevent long links or long words messing up citations or lists on mobiles (example: Category:Potential treatments - wanted pages list). Extra code for pivot.css below. notjusttired (talk) 13:07, 19 May 2019 (EDT)

/* Make Echo extension more mobile friendly on small widths including mobiles in landscape view */

@media only screen and (max-width: 750px) {
.oo-ui-popupWidget-popup { 
    width: auto !important;
    position: relative !important;
    margin-left: 10rem !important;
    margin-right: 0!important;
    left: auto;
    right: 0.9rem;
    font-size: 75% !important;
}
.oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
    width: 100% !important;
    right: 1.5rem;
}
}

/* make donate look like button */
#n-donate {
 margin-left: 0.25em;
}
#n-donate a {
 display:inline-block;
}

/* pre tag must wrap, also break crazily long words in lists and tables */
pre, td {  
 white-space: pre-wrap; /* css-3 */ 
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;   
 word-wrap: break-word;
 } 

/* break long citation urls */
.citation { word-wrap: break-word; }

/* mobiles: break crazily long words in lists and tables, using hyphens and keep broken items in same column, put columns closer together */
@media screen and (max-width: 500px) {
   td, #mw-content-text li {  
 margin-left: 2px;
 white-space: pre-wrap; /* css-3 */ 
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;   
 word-wrap: break-word;
 webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
 -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
 -webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
    } 
  }

/* Headings centered on other skins eg for home page contents */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
  text-align: left;
}

#footer-developers,
 #footer-cookiestatement {
 padding-right: 2rem;
 display: inline;
 text-align: center;
} 
#footer-left,
 #footer-places,
 #footer-disclaimers,
 #footer-privacypolicy,
 #footer-about {
  display: inline;
  text-align: center;
}
/* removed powered by mediawiki - which has several different names oddly */
#footer-poweredbyico,
 #footer-poweredby,
.poweredby { 
   display:none; 
}
/* center block - won't overlap sidebar */
#footer-left {
 display: inline-block;
 width: 100%!important;
 text-align: center;
 padding-right:8px;
}

/* fix footer bleed by fixing negative margin */
footer { margin-left: 0!important; margin-right: 0!important; padding-right: 8px;}

/* Color code snippets incl for errors  */
  code { 
  background: #999;
  background: rgba(204,204,204,0.9);
  color: #000; 
  font-weight:bold;
}
.error code { 
    color: #FF4444 !important;
    color: #fff !important;
}

/* allow scroll on tables */
table { 
 max-width: none;
 overflow-x: auto;
 display: block;
}
#p-cactions {
 max-width: none;
}
/* end of tested code May 23 2019 */

User:Notjusttired I added this code to the bottom of the existing code on the page. Crossing my fingers that I did it correctly. Kmdenmark (talk) 16:46, June 3, 2019 (EDT)
That's working great, thanks! With the code changes, once it is saved or previewed you will see it highlights different words or symbols in different colors. Only worry if everything new is in the same color. If you want to see how it looks you can go into your user preferences, and in Appearance pick the Pivot skin. Thanks again. notjusttired (talk) 17:37, June 3, 2019 (EDT)
(hide)
(read more)


CSS changes? -- Pyrrhus (talk) 19:11, June 8, 2019 (EDT)

Hi User:Notjusttired! I have just returned to the Pivot skin to see how the new CSS is working. I noticed a few things that may be related to the CSS changes:

  1. The search box on the main page is now left-aligned, which looks funny on large screens because it leaves a large empty space on the right side of the screen. If centering it causes problems on mobile, maybe we should just make it full-width?
  2. I noticed that the text in the “Recent changes” page is now disorganized.
  3. Some of the diff pages are running off the right side of the screen, such as here.

Any idea what may be going on? Thanks!
Pyrrhus (talk) 19:11, June 8, 2019 (EDT)

I will add those to the outstanding issues list.
1 The search box - do you mean the large one by Try Exact Match only on the main page? The whole section around the search box, ie the surrounding boxes in the tables, not just the search box? I think it's when the screen is wide enough for the sidebar to be visible that there are issues. I can't find the exact width what's it goes wrong, I use the quirktools screenfly website but can't really zoom out to tell. Can you check if this is an issue on the Timeless skin too? The issue might be adding display: block to the wikitable section.
2 I thought recent changes looked messy before? Can you describe how?
3 Will need to check into that code since I haven't done any changes aimed at the Recent Changes page. notjusttired (talk) 19:13, June 9, 2019 (EDT)
1 Sorry, I meant the whole section around the search box, including the “MEpedia’s articles have been viewed..” line. It looks fine on the Timeless skin.
2 Maybe it was messy before and I just didn’t notice! If there has been only one change to a page, it shows up correctly as a single line on the “Recent changes” page. But, if there have been multiple changes to a page, it shows up broken into 7-8 lines.
3 I only notice that the diff pages run off the right side of the screen on smaller screens, not on my desktop. This has nothing to do with the recent changes page, as it also happens when I select a diff from the page history. But it only happens with some diffs, not with others. Again, this may have existed before but I just didn’t notice.
Hope this helps! Pyrrhus (talk) 19:43, June 10, 2019 (EDT)
Thanks User:Pyrrhus. The first issue should have been sorted by a change to the main page. For the recent changes page layout try the code below. I don't yet have a solution for the history diff issue.
First 2 issues should be sorted now. notjusttired (talk) 15:56, August 13, 2019 (EDT)

Recent changes code - done

content hidden

notjusttired (talk) 20:33, July 27, 2019 (EDT)

User:Kmdenmark can you add the code below to the page, without the "pre" bits? Thanks notjusttired (talk) 10:04, August 12, 2019 (EDT)
/* recent changes improvements for small  screens */
.mw-enhancedchanges-arrow-space,
.mw-enhanced-rc-time,
.mw-changeslist-diff-cur {
   white-space: normal;
}
.mw-changeslist-line-prefix,
  .mw-enhanced-rc,
  .mw-changeslist-line-inner,
  .mw-enhanced-rc-nested {
    white-space: pre-line;
   }

Show poweredby in footer

It may be necessary to remove the following code from the CSS page to show the MEpedia default image at the bottom of all pages - will have to check once developer changes made. notjusttired (talk) 10:04, August 12, 2019 (EDT)

/* removed powered by mediawiki - which has several different names oddly */
#footer-poweredbyico,
 #footer-poweredby,
.poweredby { 
   display:none; 
}