User:Zlw11063/common.css

/* Global CSS Variables */
 * root {

--color-blue: #285edd; --color-teal: #00BFA7; --color-brown: #9D7D50; --color-tan: #EFECB0; --color-red: #B93F36; --color-panel: rgba(45, 45, 45, .9); --color-menu: rgba(10, 10, 10, .9); --color-menu-hover: rgba(10, 10, 10, .6); }

/* Adjust the background of the panels */ div#content, div#mw-panel, div#footer { background-color: var(--color-panel); border: none; box-shadow: none; border-radius: 4px; }

div#content::before, div#mw-panel::before, div#footer::before { background: none !important; }

/* Adjust panel sizes and location */ div#mw-panel { padding: 15px; margin-left: 1em; box-sizing: border-box; width: 11em; }

div#mw-navigation div#left-navigation { margin-left: calc(13em + 15px); }

div#mw-navigation div#right-navigation { margin-right: 15px; }

div#content, div#footer { margin-left: 13em; }

div#footer { margin-top: 1em; margin-bottom: 1em; }

a:hover { color: var(--color-teal) !important; text-decoration: none !important; }

div#mv-navigation #p-cactions-label{ margin-top: 0 !important; padding: 0; }

div#p-sharing, div#p-cactions { margin-top: 0 !important; }

div#mw-navigation #left-navigation a, div#mw-navigation #right-navigation a, div#mw-navigation #p-cactions-label > span { color: var(--color-tan); background-image: none !important; text-shadow: none; line-height: 1.125em; padding-top: 1em; margin-top: 0; }

/* Adjust social labels so they aren't so crazy */ div#p-socialProfiles { margin-bottom: 0 !important; }

/* Adjust content panel sizing */ div#content { padding: 3em 20px 20px; }

/* Adjust menus in header nav */ div#p-cactions .menu, div#p-sharing .menu { background-color: var(--color-menu); border: none; }

div#socialIconImages { text-shadow: none; }

div#p-sharing .menu { width: auto; }

div#p-sharing > div.menu > div#socialIconImages > a { padding: 0; margin: 5px; }

div#p-sharing > div.menu > div#socialIconImages img:hover { filter: contrast(180%); }

div#p-cactions .menu a { padding: 1em; transition: color .075s ease-in-out; }

div#p-sharing .menu a:hover, div#p-cactions .menu a:hover { color: var(--color-teal); background-color: var(--color-menu-hover); }