User:Pelagic/Sandbox/old

__NEWSECTIONLINK__

top lead section 0


 * https://en.wikipedia.org/w/index.php?title=User:Pelagic/Sandbox&action=edit&section=new
 * https://en.wikipedia.org/w/index.php?title=User:Pelagic/Sandbox&action=edit&section=new&preload=User:Pelagic/Sandbox/Preload&editintro=User:Pelagic/Sandbox/Editintro
 * https://en.wikipedia.org/w/index.php?title=User:Pelagic/Sandbox&veaction=edit&section=new&preload=User:Pelagic/Sandbox/Preload&editintro=User:Pelagic/Sandbox/Editintro


 * /Preload
 * /Editintro

section
some text in section 1

Hmm
Hujghuhbb.

Pelagic ( messages ) – (06:58 Fri 05, AEDT) 19:58, 4 March 2021 (UTC)


 * Upright text Oblique text yada yada Pelagic ( messages ) – (18:35 Wed 28, AEST) 08:35, 28 April 2021 (UTC)
 * Paste Upright text Oblique text type some more. Pelagic ( messages ) – (18:38 Wed 28, AEST) 08:38, 28 April 2021 (UTC)
 * Existing Upright text Oblique text and type text. Pelagic ( messages ) – (18:39 Wed 28, AEST) 08:39, 28 April 2021 (UTC)

blah blah or or

Scribunto
. (yes, we have no bananas!)

Five cards:

Signatures test
Here is a paragraph with sig at the end (auto-signed by New Discussion tool). ⁓ Pelagic ( messages ) 15:50, 30 July 2021 (UTC)

This paragraph signed ⁓ Pelagic ( messages ) 15:53, 30 July 2021 (UTC) in the middle.


 * This one is a list item, end signed ⁓ Pelagic ( messages ) 15:53, 30 July 2021 (UTC)
 * ⁓ Pelagic ( messages ) 15:53, 30 July 2021 (UTC) said: Another list item, signed at the beginning, same nesting level.
 * A third one end-signed. ⁓ Pelagic ( messages ) 15:53, 30 July 2021 (UTC)

Separating the user-link and date using three ⁓ Pelagic ( messages ) and five 15:56, 30 July 2021 (UTC) tildes.

User link in one para ⁓ Pelagic ( messages )

And time stamp in another 15:59, 30 July 2021 (UTC)


 * ⁓ Pelagic ( messages ) 16:01, 30 July 2021 (UTC): signed at beginning, but non-whitespace after datestamp.

colour swatches?
See also User:Pelagic/vector.css


 * 1) 000000 on #a2a9b1
 * 2) a2a9b1 on #ffffff

Color: #a2a9b1 Legend inline: Color box: #a2a9b1, or

span with nbsp. (This is how colour box is coded under the hood, but it also has a custom class="legend-color".)


 * 1) 000000 on #a2a9b1
 * 2) a2a9b1 on #ffffff

Color: #a2a9b1 Legend inline: Color box: #a2a9b1, or

vector-menu-dropdown h3:hover,.vector-menu-dropdown h3:focus{color:#202122}

vector-menu-dropdown h3:hover,.vector-menu-dropdown h3:focus{color:#202122}

Colours from resource loader
Found in https://en.wikipedia.org/w/load.php?lang=en&modules=ext.cite.styles%7Cext.echo.styles.alert%2Cbadge%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Coojs-ui.styles.icons-alerts%7Cskins.vector.styles.legacy%7Cwikibase.client.init&only=styles&skin=vector (%7c is pipe '|').


 * TOC
 * .toc,.toccolours{border:1px solid ;background-color:;padding:5px;font-size:95%}... .tocnumber{color:{{{{color box|202122|#202122}};...}... .toctogglelabel{cursor:pointer;color:
 * [hide] num ...
 * [hide] num ... the num and the border with the actual classes look lighter in Timeless.
 * Langlinks
 * .wb-langlinks-link > a:link,.wb-langlinks-link > a:visited{color: !important} ... .wb-langlinks-link > a:hover{color: !important} ... .skin-vector:not(.skin-vector-legacy) .wb-langlinks-link a{color:#0645ad !important}
 * Textarea
 * textarea{display:block;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid ;
 * Legend
 * legend{padding:0.5em;font-size:95%}
 * Code
 * pre,code,.mw-code{background-color:;color:;border:1px solid }code{border-radius:2px;padding:1px 4px}pre,.mw-code{padding:1em;white-space:pre-wrap;overflow-x:hidden;word-wrap:break-word}
 * code  – the Timeless border is darker
 * Headings
 * h1,h2,h3,h4,h5,h6{color:;margin:0;padding-top:0.5em;padding-bottom:0.17em;overflow:hidden}h1,h2{margin-bottom:0.6em;border-bottom:1px solid }
 * heading
 * Hyperlinks
 * a{text-decoration:none;color:;background:none}a:not([href]){cursor:pointer}a:visited{color:}a:active{color:}a:hover,a:focus{text-decoration:underline}
 * .mw-parser-output a.extiw,.mw-parser-output a.extiw:active{color:}.mw-parser-output a.external{color:#36b}.mw-body-content:after{clear:both;content:'';display:block}.mw-body-content a.external.free{word-wrap:break-word}
 * a.new{color:}a.mw-selflink{color:inherit;font-weight:bold;text-decoration:inherit}a.mw-selflink:hover{cursor:inherit;text-decoration:inherit}a.mw-selflink:active,a.mw-selflink:visited{color:inherit}a.new:visited{color:}.mw-parser-output a.extiw,.mw-parser-output a.external{color:}.mw-parser-output a.extiw:visited,.mw-parser-output a.external:visited{color:}
 * link visited external internal link external
 * Horizontal rule
 * hr{height:1px;background-color:;border:0;margin:0.2em 0}
 * Categories
 * .catlinks{border:1px solid ;background-color:;padding:5px;margin-top:1em;clear:both}.catlinks ul{display:inline;margin:0;padding:0;list-style:none}.catlinks li{display:inline-block;line-height:1.25em;border-left:1px solid ;margin:0.125em 0;padding:0 0.5em}
 * category
 * Wikitables
 * .wikitable{background-color:;color:;margin:1em 0;border:1px solid ;border-collapse:collapse}.wikitable > tr > th,.wikitable > tr > td,.wikitable > * > tr > th,.wikitable > * > tr > td{border:1px solid #a2a9b1;padding:0.2em 0.4em}.wikitable > tr > th,.wikitable > * > tr > th{background-color:;text-align:center}.wikitable > caption{font-weight:bold}
 * header table
 * Messages
 * .usermessage{background-color:;border:1px solid ;color:#000;font-weight:bold;margin:2em 0 1em;padding:0.5em 1em;vertical-align:middle}#siteNotice{position:relative;text-align:center;margin:0}#localNotice{margin-bottom:0.9em}#siteSub{display:none}#contentSub,#contentSub2{font-size:84%;line-height:1.2em;margin:0 0 1.4em
 * message
 * Errors
 * .mw-body-content .error{font-size:larger;color:}
 * error
 * Echo
 * #pt-notifications-alert .mw-echo-notifications-badge:focus,#pt-notifications-notice .mw-echo-notifications-badge:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px ;opacity:1}#pt-notifications-alert .mw-echo-notifications-badge:focus:after,#pt-notifications-notice .mw-echo-notifications-badge:focus:after{border-color:#36c}#pt-notifications-alert .mw-echo-notifications-badge:after,#pt-notifications-notice .mw-echo-notifications-badge:after{position:absolute;display:inline-block;cursor:pointer;top:9px;text-indent:0;left:55%;font-size:0.9em;font-weight:bold;padding:0 0.3em;border:1px solid #fff;border-radius:2px;background-color:;content:attr(data-counter-text);color:#fff}
 * #pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after,#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications:after{background-}
 * Echo uses Base30 and the blue badge is 36c instead of 36b. Red badge is the standard d33.

More colours from resourceloader
Now on a laptop with F12 tolls to try to locate where the elusive main colours come from. The URL still has  in the list of modules:
 * https://en.wikipedia.org/w/load.php?lang=en&modules=ext.echo.styles.alert%2Cbadge%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Coojs-ui.styles.icons-alerts%7Cskins.vector.styles.legacy&only=styles&skin=vector


 * @media screen{body{background-color:#f6f6f6;overflow-y:scroll}
 * #mw-page-base{background-color:;background-image:linear-gradient(to bottom, 50%, 100%);background-position:bottom left;height:5em}
 * div id mw-page-base runs across the top of the page (including behind the globe logo); mw-head-base behind the tabs and userlinks (but not the sidebar). Oddly neither seem to have DOM content.
 *  g r a d i e n t
 * Having trouble picturing how the background colour and gradient interact. Are ff and fb to close for me to see a boundary at 5em?
 * div id-content class=mw-body is the main content panel, it has a 160px left margin where the sidebar shows.
 * div id=mw-navigation contains both div id=mw-head (topbar) and div id=mw-panel (sidebar). It is sibling to footer id=footer class=mw-footer. They appear to get their grey colour from @media screen{body...}, though the F12 inspectors aren't helping
 * .mw-body,.parsoid-body{background-color:;color:;direction:ltr;padding:1em} ... .mw-body{margin-top:-1px;border:1px solid ;border-right-width:0}
 * Main content panel is mini-black text on white background with light-blue border, this sits on top of the light-grey body which only shows through the periphery.
 * .vector-menu-tabs li{background-image:url(/w/skins/Vector/resources/common/images/tab-normal-fade.png?1cc52);background-image:linear-gradient(to top, 0, 1px, 100%);background-position:left bottom;background-repeat:repeat-x;float:left;display:block;height:100%;margin:0;padding:0;line-height:1.125em;white-space:nowrap}
 * This is the blue background gradient for the tabs. Active tab has an overriding style for flat white background. The 1px stop seems an odd way to create a bottom border, but I guess there's a reason for it.
 *  g r a d i e n t
 * .vector-menu-portal h3{display:block;background-image:url(/w/skins/Vector/resources/common/images/portal-separator.png?4ab04);background-image:linear-gradient(to right,rgba(200,204,209,0) 0, 33%,#c8ccd1 66%,rgba(200,204,209,0) 100%);background-position:center bottom;background-repeat:no-repeat;background-size:100% 1px;color:;margin:0.5em 0 0 0.66666667em;border:0;padding:0.25em 0;font-size:0.75em;font-weight:normal;cursor:default}
 * This has the fade-to-transparent horizontal line in the sidebar sections. Also defines the colour of the headings as dark grey.

WM base colours
Nesting from M82 diagram

Base90 Base100 Base80 Base70

Analogous dark theme

Base10 Base0 Base20 Base30

CSS Variables
Need to start transferring this from Sandbox to the journal.

This code works, but the MW CSS editor flags it for errors:

Old notes from vector.css diff

/* Vector colours

=
=

From MediaWiki:Common.css (not Vector.css !) - Navbox	#fdfdfd Nested navbox title colours	#ccccff, #ddddff, #e6e6ff ... more to follow

From F12 tools inspection -

TOC: border = #a2a9b1; background = #f8f9fa https://en.wikipedia.org/w/load.php?lang=en&modules=ext.cite.styles%7Cext.echo.styles.alert%2Cbadge%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Coojs-ui.styles.icons-alerts%7Cskins.vector.styles.legacy%7Cwikibase.client.init&only=styles&skin=vector

Load.php -

The CSS served up from that load.php URL is somewhat impenetrable (is probably compiled from LESS and minified), but here's a quick list of some colours that jumped out at me.

.vector-menu-tabs li{background-image:url ...;background-image:linear-gradient(to top,#77c1f6 0,#e8f2f8 1px,#ffffff 100%)

.vector-menu-tabs li a { ...; color:%230645ad; ...}

.vector-menu-tabs .new a:visited{color:#dd3333} .vector-menu-tabs .selected{background:#ffffff} - selected tab is pure white?

vector-menu-dropdown h3:hover,.vector-menu-dropdown h3:focus{color:#202122}

vector-menu-content{background-color:#ffffff;...;border:1px solid #a2a9b1;...

.vector-search-box-input{background-color:rgba(255,255,255,0.5);color:#000000;...;border:1px solid #a2a9b1;... Search box is black on translucent white, with a ¿ light blue / blue-grey ? border.

Search box input placeholder #72777d, border and inset shadow #3366cc



/* There's better investigation now at   https://en.wikipedia.org/wiki/User:Pelagic/Sandbox#colour_swatches%3F */

temp for post to rfc

 * 1) Regretfully, weak oppose for now. You can win me over to support by providing not-logged-in readers with a cookie-based toggle to "switch to old look" (and back again), and measuring the results. Yes we have supportive opt-out data from other wikis, but users without accounts don't yet have that choice. (Aside: can you also instrument to measure when users enable their browser's reading mode? I suspect the numbers would be small.) Caveats: (a) I haven't read all the posts on this long page; there might be a good argument here that changes my mind. (b) I don't see this !vote as mutually exclusive with also posting at the alt proposal (short answer - I'd like to see both a "switch to old look" and a separate width toggle). P.S. shout out to WAID and Peter, I would love to have used Discussion Tools to post a numbered reply here, but had to do a whole-section edit instead. ⁓ Pelagic ( messages ) 09:35, 4 October 2022 (UTC)

Del Rio newspapers
Doing this here because no VE on Wikidata. ⁓ Pelagic ( messages ) 08:35, 27 November 2022 (UTC)