MediaWiki:PageLayout.css

From Almost a Hero Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/***** Header - replaces text with icons on mobile, moves logo to top ******/
/* Header Section: Page, Dicussion, etc. */
#mw-head {
  z-index:1;
  position: relative;
  display: flex;
  justify-content: space-between;
  color: var(--theme-link-color);
}

	
#mw-head .mw-list-item, .vector-menu-dropdown {
	background: var(--theme-header-background);
	color: var(--theme-header-link);
	border: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	box-shadow: 0 -2px 1px 1px rgba(0, 0, 0, .1) inset;
	padding: 0 6px;
}

#mw-head .mw-list-item {
	margin-right: 6px;
}


#mw-head .vector-menu-tabs {
	background: none;
}

#mw-head .vector-menu-tabs-legacy {
	padding-left: 0;
}

#mw-panel {
  --list-body-font-size: 14px;
  --list-body-padding-x: 6px;
  --list-body-padding-y: 6px;
  
  /* Override default to prevent horizontal scroll */
	padding-left: 0;
	width: unset;
}

#mw-panel a:not(:focus) {
  /* remove the underline from links, unless the links are focused (accessibility: focused links must be distinguishable in some way) */
  text-decoration: none;
}

#mw-panel .portal .vector-menu-heading {
  /* section heading */
  margin: 0;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--theme-sidebar-title-color);
}

#mw-panel .portal .body {
  /* list body */
  border: 0;
  padding: 0;
  margin: 0;
}

#mw-panel .portal .body ul {
  padding: 4px;
}

#mw-panel .portal .body li {
  margin: 0;
  padding: 0;
  font-size: var(--list-body-font-size);
  line-height: calc(var(--list-body-font-size) + 2px);
  border-radius: calc(var(--theme-widget-border-radius) - 2px);
  transition: background 0.3s;
}

#mw-panel .portal .body li a {
  display: block;
  padding: var(--list-body-padding-y) var(--list-body-padding-x);
  color: var(--theme-link-color);
}

#mw-panel .portal .body li a:visited {
  color: var(--theme-link-color-visited);
}

#mw-panel .portal .body li a:hover {
  color: var(--theme-link-color-hover);
}

#mw-head .mw-list-item.selected {
  background: var(--theme-header-selected);
  border: none;
  box-shadow: 0 -2px 1px 1px rgba(0, 0, 0, .15);
}

#mw-head .mw-list-item.selected a {
  color: var(--theme-header-foreground);
}

#p-logo {
  position: absolute;
  width: 100%;
}

#p-logo a {
  margin: auto;
}

#mw-panel .portal {
  background: var(--theme-sidebar-section-background);
  font-size: 18px;
}

#mw-panel .portal a {
  color: var(--theme-sidebar-link-color);
}

#mw-panel .portal a:hover {
  color: var(--theme-sidebar-link-color-hover);
}

@media only screen and (min-width: 768px) {
  #mw-head {
    margin-top: 100px;
	background: transparent;
  }

	#mw-panel .portal .body::before {
	  /* line between header and body */
	  content: "";
	  display: block;
	  pointer-events: none;
	  height: 0;
	  border-top: 1px solid var(--theme-hr-color-top);
	  border-bottom: 1px solid var(--theme-hr-color-bottom);
	}

  #p-logo {
    top: 50px;
  }
  
  #mw-panel .portal {
	  border-width: 1px;
	  border-radius: 6px;
	  border-style: solid;
	  border-color: var(--theme-sidebar-section-border-color);
	  margin: 10px;
	  padding: 0;
	}
  
  .vector-search-box {
    float: right;
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: end;
  }
  
  .vector-search-box-inner {
    width: 100%;
  }
  
  .vector-search-box-form {
    min-width: 300px;
  }
}

#right-navigation {
	margin-right: 16px;
}

/**************** MOBILE ********************/
@media only screen and (max-width: 768px) {
	.mobile-expanded {
		max-height: 800px !important;
	}
	
	#mw-panel {
		position: absolute;
		top: 0;
		display: grid;
		grid-template-columns: 50% 50%;
		width: 100%;
		z-index: 2;
	}
	
	/** HIDE TOOLS ON MOBIE **/
	#mw-panel #p-tb.portal {
		display: none;
	}
	
	#mw-head .mw-list-item, .vector-menu-dropdown {
		padding: 6px 6px 0;
	}
	
	#mw-panel .vector-menu {
		height: max-content;
	}
	
	#p-logo a {
	  height: 100px;
	}

	#mw-head .vector-menu-portal {
	  margin: 0;
	}

#mw-panel .portal {
  margin-top: 165px;
  width: 100%;
  border-color: var(--theme-sidebar-section-border-color);
  border-left: none;
  border-right: none;
  border-radius: 0;
}

#mw-panel .vector-menu-content.body {
  max-height: 0;
  padding: 0;
  transition: .1s ease-in;
  overflow: hidden;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

#mw-panel .portal .body li a {
	white-space: normal;
	padding: 8px;
}

#mw-head #p-search {
  top: 0;
  width: 100%;
}

#simpleSearch {
  margin: auto;
}


	
#searchInput:focus, #simpleSearch:hover #searchInput, #simpleSearch:hover #searchInput:focus {
  border-color: var(--theme-dropdown-hover);
  box-shadow: none;
}

#searchInput {
  border: 1px solid var(--theme-dropdown-selected);
}

.vector-search-box-input:focus {
  outline: 1px solid var(--theme-dropdown-text);
}

.vector-search-box form {
  margin: 1em 0 0;
}

#mw-head .mw-list-item, .vector-menu-dropdown {
  padding: 2px 6px;
}

#mw-head .vector-menu-tabs #ca-unwatch.icon a::before {
  background: none;
}

  :root {
    --layout-logo-scale:0.75;
    --layout-box-gap:6px
  }
  body {
    grid-template-columns:[body-left aside-left nav-left content-left footer-left] minmax(0,1fr) [content-right aside-right nav-right footer-right body-right]
  }
  #mw-page-base,
  #mw-panel,
  #mw-head,
  #content,
  #footer {
    border-radius:0;
    border-left:0;
    border-right:0
  }
  #mw-panel::before {
    padding:0;
    left:0
  }
  
  #mw-panel .menu-toggle {
    --mask:var(--icon-category) no-repeat;
    -webkit-mask:var(--mask);
    mask:var(--mask);
    -webkit-mask-size:20px 20px;
    mask-size:20px 20px;
    -webkit-mask-position:center calc(50% + 1px);
    mask-position:center calc(50% + 1px);
    background-color:var(--theme-heading-color);
    cursor:pointer;
    display:block;
    flex:0 0 auto;
    width:24px;
    height:24px;
    margin:9px 12px 6px
  }
  
  #mw-panel .portal {
    display:none;
    border:0;
    background:var(--theme-dropdown-background);
    border-radius:0
  }
  
  #mw-panel .portal .vector-menu-heading {
    padding: 0 12px 4px;
    border: 0;
    display: block;
    background: 0 0;
  }
  
  #mw-panel .portal .vector-menu-heading::after {
    display:none;
  }
 
  #mw-panel .portal.expanded .vector-menu-heading,
  #mw-panel .portal:hover .vector-menu-heading {
    background:0 0;
    color:var(--theme-heading-color)
  }
  
  #mw-panel .portal .body {
    position:unset;
    border:0;
    background: var(--theme-dropdown-background);
    backdrop-filter:none;
    box-shadow:none;
    padding:0 0 8px;
    width:100%
  }
  #mw-panel .portal .body ul {
    padding:0 12px;
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content:unset
  }
  
  #mw-panel .portal .vector-menu-heading {
    padding-top: 8px;
    height: 30px;
  }
  #mw-panel .menu-toggle.expanded~.portal {
    display:block
  }
  #mw-panel #p-lang {
    display:block;
    justify-content:flex-end;
    position:absolute;
    left:48px;
    top:9px;
    background:0 0
  }
  
  #mw-panel #p-lang .vector-menu-heading {
    margin:0;
    padding:0;
    width:24px;
    height:24px
  }
  
  #mw-panel #p-lang .vector-menu-heading span {
    display:none
  }
  
#mw-panel #p-lang .vector-menu-heading::before {
    content:"";
    display:block;
    pointer-events:none;
    --mask:var(--icon-language) no-repeat;
    -webkit-mask:var(--mask);
    mask:var(--mask);
    -webkit-mask-size:20px 20px;
    mask-size:20px 20px;
    -webkit-mask-position:center calc(50% + 1px);
    mask-position:center calc(50% + 1px);
    background-color:var(--theme-heading-color);
    width:24px;
    height:24px;
    margin:0
  }
 
#mw-panel #p-lang .body {
    display:none!important;
    position:absolute;
    left:0;
    top:100%;
    width:max-content;
    min-width:8em;
    border-width:var(--theme-dropdown-border-width);
    border-color:var(--theme-dropdown-border-color);
    border-style:var(--theme-dropdown-border-style);
    border-radius:var(--theme-dropdown-border-radius);
    background:var(--theme-dropdown-background);
    box-shadow:var(--theme-widget-shadow);
    border-top-left-radius:0;
    border-top-right-radius:0;
    margin-top:6px
  }
  
#mw-panel #p-lang .body ul {
    display:block;
    padding:4px 4px 0
  }
  
#mw-panel #p-lang.expanded .body {
    display:block!important
  }
  
#mw-head #p-search {
    top:-10px
  }

  #content {
    --layout-padding-x:12px;
    --layout-padding-y:12px
  }
  
  #mw-head {
    --icon:var(--icon-wiki);
    --icon-size:18px;
    --icon-margin:2px
  }
  
  #mw-head .vector-menu-tabs .mw-list-item a,
  #mw-head .vector-menu-dropdown .vector-menu-heading {
    --theme-link-color-hover:var(--theme-icon-color-hover);
    width:calc(var(--icon-margin) * 2 + var(--icon-size));
    box-sizing:content-box;
    padding:var(--tab-padding-y);
    color:transparent;
    display:flex;
    align-items:center
  }

  #mw-head .vector-menu-tabs .mw-list-item a span,
  #mw-head .vector-menu-dropdown .vector-menu-heading span {
    display:none
  }
  #mw-head .vector-menu-dropdown .vector-menu-heading::after {
    display:none
  }

  #mw-head {
    margin-top: 155px;
    padding-top: 10px;
    position: absolute;
    display: flex;
    flex-direction: row;
    background: var(--theme-dropdown-hover);
  }
  
  #left-navigation {
    width: 40%;
  }
  
  #right-navigation {
    width: 60%;
    display: flex;
    justify-content: end;
  }
  
	#right-navigation a:not(.vector-menu-dropdown *), #left-navigation a:not(.vector-menu-dropdown *), #p-cactions-label {
	    width: 25px;
	    -webkit-mask-size: 100% 100%;
	    mask-size: 100% 100%;
	    -webkit-mask-position: center center;
	    mask-position: center center;
	    background-color: var(--theme-header-link);
	    mask: var(--mask) no-repeat;
	    -webkit-mask: var(--mask) no-repeat;
	    height: 30px;
    	margin-top: 6px;
	}
	
	#right-navigation span:not(.vector-menu-dropdown *),#left-navigation span:not(.vector-menu-dropdown *), #mw-head .vector-menu-heading-label {
	    display: none;
	}
	
	#mw-head .vector-menu-dropdown .vector-menu-heading-label {
	  display: none;
	}
	
	#mw-head .vector-menu-tabs #ca-unwatch.icon a::before,
	#mw-head .vector-menu-tabs #ca-watch.icon a::before,
	#mw-head .vector-menu-dropdown .vector-menu-heading::after {
	  background: var(--theme-header-link);
	}
	
	#mw-head .vector-menu-dropdown .vector-menu-heading::after {
	  mask-size: 20px;
	  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-dots-vertical' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3C/svg%3E");
	}
	
	#mw-head .vector-menu-dropdown .vector-menu-content {
	    left: -30px
	}
	
	#p-cactions-label {
	  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-dots-vertical' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3C/svg%3E");
	  height: 25px;
	}
	
	#left-navigation a {
	    --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Wikipedia'%3E%3Cpath d='M32.59,12.32a.46.46,0,0,1-.08.25.26.26,0,0,1-.19.11,2.34,2.34,0,0,0-1.35.53,5,5,0,0,0-1.09,1.73L24.16,27.82c0,.12-.14.18-.31.18a.33.33,0,0,1-.31-.18l-3.21-6.7-3.69,6.7a.34.34,0,0,1-.31.18.34.34,0,0,1-.33-.18L10.39,14.94a4.37,4.37,0,0,0-1.11-1.67,3,3,0,0,0-1.63-.59.19.19,0,0,1-.16-.1.29.29,0,0,1-.08-.22c0-.21.06-.31.18-.31.5,0,1,0,1.57.07s1,.07,1.43.07,1,0,1.61-.07,1.23-.07,1.73-.07c.12,0,.18.1.18.31s0,.32-.11.32a2.09,2.09,0,0,0-1.18.38,1,1,0,0,0-.44.85,1.72,1.72,0,0,0,.18.67L17.2,25.06l2.64-5-2.46-5.15a6.87,6.87,0,0,0-1.08-1.78A2.25,2.25,0,0,0,15,12.68a.17.17,0,0,1-.15-.1.33.33,0,0,1-.08-.22c0-.21.05-.31.16-.31a11.78,11.78,0,0,1,1.38.07,12.87,12.87,0,0,0,1.29.07c.45,0,.92,0,1.42-.07s1-.07,1.52-.07c.12,0,.18.1.18.31s0,.32-.11.32c-1,.07-1.5.35-1.5.85a2.8,2.8,0,0,0,.35,1l1.62,3.3,1.62-3A2.43,2.43,0,0,0,23,13.78c0-.69-.5-1.06-1.5-1.1-.09,0-.13-.11-.13-.32a.42.42,0,0,1,.06-.21c.05-.07.09-.1.14-.1.36,0,.8,0,1.32.07s.91.07,1.23.07.58,0,1-.06,1.05-.08,1.43-.08c.09,0,.13.09.13.27s-.08.36-.24.36a2.81,2.81,0,0,0-1.41.48,6.12,6.12,0,0,0-1.33,1.78l-2.15,4,2.91,5.94,4.31-10a2.64,2.64,0,0,0,.22-1c0-.73-.5-1.12-1.5-1.16-.09,0-.14-.11-.14-.32s.07-.31.21-.31c.36,0,.8,0,1.3.07s.85.07,1.16.07.71,0,1.14-.07a11.09,11.09,0,0,1,1.22-.07Q32.59,12.05,32.59,12.32Z'/%3E%3C/g%3E%3C/svg%3E")
	}
	
	#mw-head [id^="ca-nstab-"] a {
	    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-file' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'%3E%3C/path%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'%3E%3C/path%3E%3C/svg%3E")
	}
	
	#ca-addsection a {
	    --mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjxkZWZzPjxmaWx0ZXIgaWQ9ImRhcmtyZWFkZXItaW1hZ2UtZmlsdGVyIj48ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMC4yNDkgLTAuNjE0IC0wLjY3MiAwLjAwMCAxLjAzNSAtMC42NDYgMC4yODggLTAuNjY0IDAuMDAwIDEuMDIwIC0wLjYzNiAtMC42MDkgMC4yNTAgMC4wMDAgMC45OTQgMC4wMDAgMC4wMDAgMC4wMDAgMS4wMDAgMC4wMDAiIC8+PC9maWx0ZXI+PC9kZWZzPjxpbWFnZSB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbHRlcj0idXJsKCNkYXJrcmVhZGVyLWltYWdlLWZpbHRlcikiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEQ5NGJXd2dkbVZ5YzJsdmJqMGlNUzR3SWlCbGJtTnZaR2x1WnowaVZWUkdMVGdpUHo0S1BITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSGRwWkhSb1BTSXlNQ0lnYUdWcFoyaDBQU0l5TUNJZ2RtbGxkMEp2ZUQwaU1DQXdJREl3SURJd0lqNEtDVHgwYVhSc1pUNEtDUWwwWVdKc1pTQmhaR1FnY205M0lHRm1kR1Z5Q2drOEwzUnBkR3hsUGdvSlBIQmhkR2dnWkQwaVRUTWdNSFk0U0RKMk1USm9NVFpXT0dndE1WWXdlbTA0SURFd2RqTm9NM1l5YUMwemRqTklPWFl0TTBnMmRpMHlhRE4yTFRONmJUUXROSFl5U0RWV05ucHRNQzAwZGpKSU5WWXllaUl2UGdvOEwzTjJaejRLIiAvPjwvc3ZnPg==");
	}
	
	#left-navigation #ca-talk a {
	    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-messages' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10'%3E%3C/path%3E%3Cpath d='M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2'%3E%3C/path%3E%3C/svg%3E")
	}
	
	#right-navigation #ca-view a {
	    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-eye' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'%3E%3C/path%3E%3Cpath d='M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7'%3E%3C/path%3E%3C/svg%3E")
	}
	
	#right-navigation #ca-edit a, #right-navigation #ca-viewsource a {
	    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E")
	}
	
	#right-navigation #ca-history a {
	    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-history' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 8l0 4l2 2'%3E%3C/path%3E%3Cpath d='M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5'%3E%3C/path%3E%3C/svg%3E")
	}
	
	#right-navigation #ca-more a {
	    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E")
	}
	
	#right-navigation #ca-unwatch a {
		/** Filled star **/
	    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-star-filled' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z' stroke-width='0' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
	}
	
	#right-navigation #ca-watch a {
		/** Empty star **/
		--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-star' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'%3E%3C/path%3E%3C/svg%3E");
	}

	#mw-panel .vector-menu-content.body {
	  background: var(--theme-sidebar-section-background);
	  margin-top: -10px;
	  padding: 0;
	}
	
	#mw-head #p-search {
	  top: 0;
	  width: 100%;
	}
	
	#simpleSearch {
	  margin: auto;
	}
	
	#mw-panel .portal {
	   display: block;
	   z-index: 5;
	   max-height: 2em;
	   border:0;
	   background:var(--theme-dropdown-background);
	   border-radius:0;
	   margin-left: 0;
	}
	
	#mw-head .vector-menu-heading-label {
	  height: 2em;
	  display:block;
	  text-align: center;
	  margin: auto;
	}

}
Retrieved from "https://almostahero.wiki.gg/index.php?title=MediaWiki:PageLayout.css&oldid=910"