Module:Sidebar/styles.css

 /* {{pp-template}} */
 /* TODO: Invert width design to be "mobile first" */
 .sidebar{
 /* TODO: Ask if we should have max-width 22em instead */
 width:22em;
 /* @noflip */
 float:right;
 /* @noflip */
 clear:right;
 /* @noflip */
 margin:0.5em01em1em;
 background:var(--background-color-neutral-subtle,#f8f9fa);
 border:1pxsolidvar(--border-color-base,#a2a9b1);
 padding:0.2em;
 text-align:center;
 line-height:1.4em;
 font-size:88%;
 border-collapse:collapse;
 /* Timeless has display: none on .nomobile at mobile resolutions, so we
 	 * unhide it with display: table and let precedence and proximity win.
 	 */
 display:table;
 }

 /* Unfortunately, so does Minerva desktop, except Minerva drops an
  * !important on the declaration. So we have to be mean for Minerva users.
  * Mobile removes the element entirely with `wgMFRemovableClasses` in 
  * https://github.com/wikimedia/operations-mediawiki-config/blob/master/
  wmf-config/InitialiseSettings.php#L16992
  * which is why displaying it categorically with display: table works.
  * We don't really want to expose the generic user in the wild on mobile to have
  * to deal with sidebars. (Maybe the ones with collapsible lists, so that
  * might be an improvement. That is blocked on [[:phab:T111565]].)
  */
 body.skin-minerva.sidebar{
 display:table!important;
 /* also, minerva is way too aggressive about other stylings on tables.
 	 * TODO remove when this template gets moved to a div. plans on talk page.
 	 * We always float right on Minerva because that's a lot of extra CSS
 	 * otherwise. */
 float:right!important;
 margin:0.5em01em1em!important;
 }

 .sidebar-subgroup{
 width:100%;
 margin:0;
 border-spacing:0;
 }

 .sidebar-left{
 /* @noflip */
 float:left;
 /* @noflip */
 clear:left;
 /* @noflip */
 margin:0.5em1em1em0;
 }

 .sidebar-none{
 float:none;
 clear:both;
 /* @noflip */
 margin:0.5em1em1em0;
 }

 .sidebar-outer-title{
 padding:00.4em0.2em;
 font-size:125%;
 line-height:1.2em;
 font-weight:bold;
 }

 .sidebar-top-image{
 padding:0.4em;
 }

 .sidebar-top-caption,
 .sidebar-pretitle-with-top-image,
 .sidebar-caption{
 padding:0.2em0.4em0;
 line-height:1.2em;
 }

 .sidebar-pretitle{
 padding:0.4em0.4em0;
 line-height:1.2em;
 }

 .sidebar-title,
 .sidebar-title-with-pretitle{
 padding:0.2em0.8em;
 font-size:145%;
 line-height:1.2em;
 }

 .sidebar-title-with-pretitle{
 padding:0.1em0.4em;
 }

 .sidebar-image{
 padding:0.2em0.4em0.4em;
 }

 .sidebar-heading{
 padding:0.1em0.4em;
 }

 .sidebar-content{
 padding:00.5em0.4em;
 }

 .sidebar-content-with-subgroup{
 padding:0.1em0.4em0.2em;
 }

 .sidebar-above,
 .sidebar-below{
 padding:0.3em0.8em;
 font-weight:bold;
 }

 .sidebar-collapse.sidebar-above,
 .sidebar-collapse.sidebar-below{
 border-top:1pxsolid#aaa;
 border-bottom:1pxsolid#aaa;
 }

 .sidebar-navbar{
 text-align:right;
 font-size:115%;
 padding:00.4em0.4em;
 }

 .sidebar-list-title{
 padding:00.4em;
 text-align:left;
 font-weight:bold;
 line-height:1.6em;
 font-size:105%;
 }

 /* centered text with mw-collapsible headers is finicky */
 .sidebar-list-title-c{
 padding:00.4em;
 text-align:center;
 margin:03.3em;
 }

 @media(max-width:640px){
 /* users have wide latitude to set arbitrary width and margin :(
 	 "Super-specific" selector to prevent overriding this appearance by
 	 lower level sidebars too */
 body.mediawiki.sidebar{
 width:100%!important;
 clear:both;
 float:none!important;/* Remove when we div based; Minerva is dumb */
 margin-left:0!important;
 margin-right:0!important;
 }
 /* TODO: We might consider making all links wrap at small resolutions and then
 	 * only introduce nowrap at higher resolutions. Do when we invert the media
 	 * query.
 	 */
 }

 /* Fixes: T367463 */
 body.skin--responsive.sidebara>img{
 max-width:none!important;
 }

 /* Disable backgrounds via style attribute in night mode Eg.https://phabricator.wikimedia.org/F55243859
  * https://en.wikipedia.org/w/index.php?title=Laissez-faire
  */

 @mediascreen{
 html.skin-theme-clientpref-night.sidebar:not(.notheme).sidebar-list-title,
 html.skin-theme-clientpref-night.sidebar:not(.notheme).sidebar-title-with-pretitle{
 background:transparent!important;
 }

 html.skin-theme-clientpref-night.sidebar:not(.notheme).sidebar-title-with-pretitlea{
 color:var(--color-progressive)!important;
 }
 }

 @mediascreenand(prefers-color-scheme:dark){
 html.skin-theme-clientpref-os.sidebar:not(.notheme).sidebar-list-title,
 html.skin-theme-clientpref-os.sidebar:not(.notheme).sidebar-title-with-pretitle{
 background:transparent!important;
 }

 html.skin-theme-clientpref-os.sidebar:not(.notheme).sidebar-title-with-pretitlea{
 color:var(--color-progressive)!important;
 }
 }

 @mediaprint{
 body.ns-0.sidebar{
 display:none!important;
 }
 }