User:Maëlan/global.css

/* helpful snippets here:
 *     https://en.wikipedia.org/wiki/Help:User_style
 */



/* 2023-08: disable layout customization, this is broken and useless with the new layout.
 * BEGIN: disable layout customization */
@media false {



/* OLD LAYOUT (2019): Fix the headings (quick & dirty). */
/*
#mw-head, #firstHeading
{
  position: fixed;
  z-index: 100;
  background: #f6f6f6;
}
#bodyContent { margin-top: 50px; }
*/



/* NEW LAYOUT (2020): Fix the header line (site logo + account information). */
.mw-header
{
  position: fixed;
  z-index: 300;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #f6f6f6;
}



/* NEW LAYOUT (2020): Remove the textual part of the logo. */
.mw-logo-container { display: none; }



/* NEW LAYOUT (2020): Remove the search field. */
#p-search { display: none; }



/* NEW LAYOUT (2020): Move the user menus to the right side of the header line. */
.vector-user-links { width: 100%; }



/* NEW LAYOUT (2020): Fix and tune the tab line:
 * make it small and vertical,
 * inside the left margin of the article
 * (previously it was sticking to the right edge of the sidebar,
 * now (January 2022) it is below the sidebar when the latter is expanded). */
#mw-head
{
  position: fixed;
  /* below the various notification popups: */
  z-index: 100;
  /* my ad-blocker overrides that property with the value zero even if I make it
   * !important, so instead I make it zero and shift the first child by 64px: */
  /*top: 64px !important;*/
  top: 0;
  /* 0px for sticking the tabs to the left edge of the window, or 144px for
   * sticking them to the right of the sidebar (issue with that option: when
   * the sidebar is collapsed, tabs remain at that position and they float atop
   * the page contents): */
  /*left: 144px;*/
  left: 0;
  width: 65px;
}
#mw-head > :first-child {
	/* hack for working around a rule inserted by my ad-blocker (see above): */
	margin-top: 64px;
}
/* This clears style from MediaWiki so that we can style these lists afresh: */
#mw-head div,
#mw-head nav,
#mw-head ul,
#mw-head li,
#mw-head li > a
{
  /*display: block;*/
  float: none;
  position: static;
  margin: 0;
  padding: 0;
  height: auto;
  border: none;
  background: none;
  box-shadow: none;
  /*transition: none*/
}
#left-navigation, #right-navigation
{
  background: #f6f6f6 !important;
  border: 1px solid #a7d7f9 !important;
  border-left: none !important;
}
#left-navigation { margin-bottom: 30px !important; }
#mw-head ul { min-width: auto; }
#mw-head li > a
{
  width: 100%;
  /* This truncates the text of items when required: */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ".";
}
#mw-head li.selected { font-style: italic; }
/* This enlarges the item to its full width when hovered (quick & dirty): */
#mw-head li > a:hover { overflow: visible; background: #ddeeff; }
/* Always show the actions that are normally hidden under the “Plus” menu: */
#p-cactions .vector-menu-content,
#p-cactions ul
{
  visibility: visible;
  opacity: 1;
}
/* Remove the “Plus” drop-down button at the end of the tab line: */
#p-cactions > input, #p-cactions-label { display: none; }
/* Position the “Watch/Unwatch” star: */
li.mw-watchlink > a::before
{
  display: inline-block !important;
  position: relative !important;
  top: 0.3ex !important;
  left: 0 !important;
  width: 2ex !important;
  height: 2ex !important;
  background-size: contain !important;
}
/* Remove some garbage: */
#mw-head > h2 { display: none; }

/* This SHOULD make the tabline disappear when the sidebar is collapsed;
 * it does not work because :has() is not supported by any browser as of 2020: */
header:has(> #mw-sidebar-button[aria-expanded="false"]) + div #mw-head
{ display: none !important; }



/* Fix the sidebar. */
#mw-panel
{
  position: fixed;
  /* just above the tabs (so as to cover them when visible), but still below the
   * various notification popups: */
  z-index: 101;
  top: 0;
  bottom: 0;
  height: 100%;
  /* Make room above the sidebar for the site logo: */
  padding-top: 60px;
  /* Prevent horizontal scrolling: */
  overflow-x: hidden;
  /* Hide the vertical scrollbar but do not disable vertical scrolling: */
  overflow-y: auto;
  scrollbar-width: none;     /* Firefox >= 64 */
  -ms-overflow-style: none;  /* IE >= 10 */
  /* Prevent content overlay when horizontal scrolling occurs: */
  background-color: #F6F6F6;
  border-right: 1px solid #A7D7F9;
}
#mw-panel::-webkit-scrollbar { display: none; } /* Chromium, Safari */



/* OLD LAYOUT (2019): Save space on the (wiki-specific) logo. */
#p-logo, #p-logo a
{
  /* Prevent the logo from being larger than the sidebar (which may otherwise
   * occur when there is a vertical scrollbar): */
  width: 100%;
  /* Reduce the logo’s height (its normal height is 160px; with height 120px,
   * only the motto (“The Free Encyclopedia” or similar) is truncated): */
  height: 120px;
  /* Alternatively, remove the logo: */
  /*display: none;*/
}



} /* END: disable layout customization */



/* 2023-08: now that the site menu is hidden by default,
 * we don’t care so much that it is so crowded,
 * so there is no pressing need to curate it anymore.
 * BEGIN: disable site menu curation */
@media false {

/* Remove unused items from the sidebar… */
/* … link “Basculer vers l’ancien habillage” */
.mw-sidebar-action,
/* … unused menu sections */
#p-navigation,
#p-interaction, #p-Contribuer,
#p-wikibase-otherprojects,
/* menu section “Au delà du web” (on meta.wikimedia.org) */
.mw-portlet-beyond_the_web,
/* menu section “Communauté” (on meta.wikimedia.org) */
#p-community,
/* … label of menu section “Outils” */
#p-tb-label,
/* … menu item “Outils > Téléverser un fichier” */
#t-upload,
/* … menu item “Outils > Pages spéciales” */
#t-specialpages,
/* … menu item “Outils > Informations sur la page” */
#t-info,
/* … menu item “Outils > Citer cette page” */
#t-cite,
/* … label of menu section “Imprimer / exporter” */
#p-coll-print_export-label,
/* … menu item “Imprimer / exporter > Version imprimable” */
#t-print
{ display: none; }

} /* END: disable site menu curation */

/* Show all inter-language links.
   (2022: the new interlanguage menu has made this obsolete) */
/*.interlanguage-link { display: list-item !important; }
button.mw-interlanguage-selector { display: none; }*/

/* 2023-08: hide the language menu placeholder in the site menu,
 * which is only there to say that the language menu has been moved. */
.vector-main-menu-action-lang-alert-empty
{ display: none; }

/* Highlight my favorite languages. */
.interwiki-en,
.interwiki-fr
{ font-weight: bold; }



/* Make room below the sidebar for the last-modified time:
   (2022: the new interlanguage menu has made this obsolete) */
/*.after-portlet-lang { margin-bottom: 20px; }*/

/* Remove all of the footer… */
.mw-footer-container
{
  visibility: hidden;
  margin: 0;
  padding: 0;
  border: none;
}
/* … Excepted the last-modified date, which is shown instead at the bottom-left
   of the screen (inside the page margin, over the sidebar when the sidebar is
   expanded): */
#footer-info-lastmod
{
  visibility: visible;
  position: fixed;
  z-index: 500;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: #f6f6f6;
  color: #222222;
  /* This size is hand-adjusted so that the date+time fits nicely the width
   * of the sidebar, or of the page margin when the sidebar is collapsed: */
  font-size: 7.5pt;
  /* We make the text scrollable horizontally, restrict its width, and arrange
   * so that it is scrolled to the right end by default; the goal is to hide as
   * much as possible of the constant prefix text “Dernière modification de
   * cette page le”, and have only the date+time visible. Scrolling allows to
   * read the hidden parts. */
  overflow: auto hidden;
  text-overflow: clip;
  white-space: nowrap;
  direction: rtl; /* < this makes the text scrolled to its right end by default */
  /* This width is hand-adjusted so that it fits the widest possible date, i.e.
   * "23 septembre 2024"; unfortunately we cannot select the element depending
   * on textual contents (with a pseudo-class such as `:has-text()` or
   * `:contains()`); otherwise, we could use sensible values for other monthes:
   *   "janvier, février": 109px;
   *   "mars": 101px;
   *   "avril": 98px;
   *   "mai, juin": 95px;
   *   "juillet": 103px;
   *   "août": 99px;
   *   "septembre": 128px;
   *   "octobre": 114px;
   *   "novembre, décembre": 125px;
   */
  width: 128px;
}



/* BEGIN: disable layout customization, part 2 */
@media false {



/* NEW LAYOUT (2020): Fix the page title. */
#firstHeading
{
  position: fixed;
  z-index: 301;  /* above the header line */
  top: 7px;
  left: 120px; /* to the right of the site logo */
  margin-right: 320px; /* avoid spanning atop user menus (in case of a very long title) */
  background: #f6f6f6;
}
/* Leave some room above the contents, in case the title spans several lines. */
#bodyContent { margin-top: 130px; }



/* NEW LAYOUT (2022): Stick the new interlanguage menu somewhere visible. */
#p-lang-btn
{
  position: fixed;
  /* top-right corner: */
  z-index: 100;
  top: 60px;
  right: 0px;
}



} /* END: disable layout customization, part 2 */



/* Justify the contents of the page. */
#bodyContent { text-align: justify; }



/* Get rid of tedious boilerplate… */
/* … in the header: */
#pt-betafeatures, #siteSub,
/* … in the footer: */
#footer-info-copyright, #footer-places, #footer-icons,
/* … in the edition zone: */
#wpSummaryLabel .oo-ui-fieldLayout-header, #MediaWiki-summary, #editpage-copywarn, .editHelp,
/*.mw-editTools,*/ .limitreport, .templatesUsed, .wikibase-entity-usage, .hiddencats, .previewnote,
/* … elsewhere: */
#category-namespace-editnotice
{ display: none !important; }

/* Make the edit options more compact (preview of edit summary,
 * checkboxes and buttons on a single line, with shorter labels). */
.editOptions {
    margin: 0;
    padding: 2px;
    display: flex;
    flex-wrap: wrap;
}
/* show the input field for the edit summary on a whole line: */
.editOptions > #wpSummaryLabel { flex: 0 0 100%; }
.editOptions > #wpSummaryLabel #wpSummaryWidget { margin-bottom: 0; }
/* then, on a 2nd line…
 * show the preview of edit summary, in small, without the preceeding label
 * using every horizontal width left by checkboxes and buttons: */
.editOptions .mw-summary-preview { flex: 1 1 10%; visibility: hidden; font-size: 0; text-align: left; }
.editOptions .mw-summary-preview > .comment { visibility: visible; font-size: 12px; }
/* show the checkboxes ("minor edit", "watch"), with custom shortened labels: */
.editOptions > .editCheckboxes { flex: 0 0 max-content; margin-right: 2ex; }
.editOptions > .editCheckboxes .oo-ui-labelElement { margin-right: 0; }
.editOptions > .editCheckboxes #mw-editpage-minoredit label { font-size: 0; }
.editOptions > .editCheckboxes #mw-editpage-minoredit label::after { font-size: 14px; content: '(m)'; }
.editOptions > .editCheckboxes #mw-editpage-watch label { font-size: 0; }
.editOptions > .editCheckboxes #mw-editpage-watch label::after { font-size: 14px; content: 'suivre'; }
/* show the buttons ("save", "preview", "show diff", "cancel") compacted: */
.editOptions > .editButtons { flex: 0 0 max-content; display: flex; margin-top: 0; }
.editOptions > .editButtons > .oo-ui-inputWidget { margin-right: 0; }
.editOptions > .editButtons input,
.editOptions > .editButtons .cancelLink { display: inline; max-width: 9ex; }
/* set a shorter and more recognizable label for the diff button, that fits in
 * the reduced width (before: English "Show changes", French "Voir les
 * modifications" / after: "Diff±");
 * also, make the button green, for better distinction with the preview button: */
.editOptions > .editButtons #wpDiff {
  /* make the actual label invisible: */
  color: #00000000;
  /* add our own text as a background SVG:
   * (hack from https://stackoverflow.com/questions/1191464 )
   * (cannot put line breaks here because MediaWiki escapes the backslashes) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' style='background:rgb(72,128,0); fill:white; font:bold 14px sans-serif;'><text x='12px' y='1.4em'>Diff±</text></svg>");
  /* be sure to pick colors that are legible in both light and dark themes
   * (because the "Dark Reader Mode" for Firefox does not changes the colors
   * inside the SVG image). */
}

/* Stick the edit toolbox to the left edge of the screen,
 * and hide it until it is hovered. */
.mw-editTools {
    position: fixed;
    z-index: 999;
    top: 50%;
    transform: translate(0, -50%); /* vertically centered */
    left: calc(15px - 300px); /* 15px outset when hidden */
    width: 300px;
    font-size: 85%;
    background-color: #ffe;
}
.mw-editTools:hover, 
.mw-editTools:active, 
.mw-editTools:focus-within { left: 0; } /* show toolbox when hovered */



/* French Wiktionary: hide the button that expands the list of examples
 * when this list is an empty stub (disappointing).
 * If the gadget that collapses examples by default is enabled,
 * then the list itself remains hidden when reading pages;
 * however it is visible when previewing changes
 * (because the gadget does not act on previews) */
.HQToggle:has( + ul > li > .example .stubedit) { display: none; }