User:Canada/common.css

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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

:root {
  --transparent-white: rgba(255,255,255,0.6);
  --shadow: 0 3px 5px rgba(0,0,0,0.2);
}

body {
  font-family:tahoma;
}

body {
  background-image: url(https://i.imgur.com/MfGggpA.jpeg);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:bottom right;
}

#mw-page-base {
  background:unset;
}

#content {
  background-color:rgba(255,255,255,0.7);
  background-attachment:fixed;
  border:1px solid white;
  border-radius:10px;
  margin-right:15px;
  box-shadow:var(--shadow);
}

/* ------------------- left sidebar ------------------ */

#mw-panel .mw-portlet {
  background: var(--transparent-white);
  margin-bottom:2rem;
  padding:10px;
  border-radius: 5px;
  border: 1px solid white;
  box-shadow:var(--shadow);
}

#mw-panel .vector-menu-heading {
  background:white;
  font-size:0.9em;
  font-weight:bold;
  text-transform:uppercase;
  margin:0 -15px;
  margin-top:-20px;
  padding:8px 15px;
  border-radius:5px;
  
}

/* ------------------- top tabs ------------------ */

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
  background:unset;
}

.vector-menu-tabs-legacy ul {
  display:flex;
  align-items:flex-end;
  gap:8px;
}

#left-navigation {
  margin-left:13em;
}

#right-navigation {
  display:flex;
  align-items:flex-end;
  
}

.vector-menu-tabs-legacy {
  display:flex;
  align-items:flex-end;
}

.vector-menu-tabs li a {
  padding:8px 10px;
  height:unset;
}

.vector-menu-tabs-legacy li, #mw-head #p-cactions-label {
  background-image:unset;
  background:var(--transparent-white);
  border-radius:5px 5px 0 0;
  transition:background 0.2s;
}

.vector-menu-tabs-legacy li:not(.selected):hover {
  background:rgba(255,255,255,0.8);
}

.vector-menu-tabs-legacy .selected {
  padding-bottom:10px;
  background:white;
}

.vector-menu-tabs .mw-watchlink.icon a {
  padding-top:2.6em;
}
.vector-menu-tabs .mw-watchlink.icon a::before {
  top:0.5em;
}

#mw-head #p-cactions-label {
  margin-left:8px;
  padding:8px 10px;
}
#p-search #searchform {
  margin-bottom:5px;
  margin-right:10px;
  margin-top:unset;
}

/* ------------------- top right buttoms ------------------ */

#p-personal .vector-menu-content-list {
  background:var(--transparent-white);
  padding:6px 15px 6px 8px;
  border-radius:10px;
  box-shadow:var(--shadow);
}

#p-personal .vector-menu-content-list li:not(:last-child) {
  border-right:1px solid grey;
  margin:0;
  padding:0 7px;
}

#p-personal .vector-menu-content-list a, #p-personal .vector-menu-content-list li {
  padding-top:unset;
}
.vector-user-menu-legacy #pt-anonuserpage, .vector-user-menu-legacy #pt-userpage a {
  background-position:left;
}

/* ------------------- toc ------------------ */

#toc {
  background:var(--transparent-white);
  border: 1px solid #aaa;
  border-radius:10px;
  padding:0;
}

#toc .toctitle {
  padding:5px 10px;
  text-align:left;
}

#mw-toc-heading {
  margin-right:5px;
}


#toc > ul {
  padding:10px;
  border-top:1px solid #aaa;
  margin:0;
}

.tocnumber::after {
  content:'.';
}

/* ------------------- footer ------------------ */

#footer li {
  color:white;
}

#footer a {
  color:lightblue;
}