Difference between revisions of "User:Polymorph-Ash/vector.css"

Jump to navigation Jump to search
no edit summary
Line 64: Line 64:
}
}


/*top menu*/
/* Top menu & user tools */
#mw-head, #mw-page-base {
#mw-head, #mw-page-base { background: transparent; border: none; }
  background:transparent;
  border:none;
}


/* Top user tools bar */
#p-personal {
#p-personal {
   background-color: rgba(50, 50, 50, 0.55); /* dark modern color */
   background-color: rgba(50,50,50,0.55);
   border-bottom: 1px solid #444;           /* subtle separation */
   border-bottom: 1px solid #444;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);   /* optional depth */
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border-radius: 10px;
}
}


#p-personal ul {
#p-personal ul { margin: 0; padding: 0.2em 0.5em; }
  margin: 0;
  padding: 0.2em 0.5em;
}


#p-personal li a {
#p-personal li a {
   color: var(--whitetextandbg);             /* text color */
   color: var(--whitetextandbg);
   padding: 0.2em 0.5em;
   padding: 0.2em 0.5em;
   text-decoration: none;
   text-decoration: none;
Line 91: Line 85:
#p-personal li a:hover {
#p-personal li a:hover {
   color: var(--orange);
   color: var(--orange);
   background-color: rgba(255,255,255,0.1); /* subtle highlight on hover */
   background-color: rgba(255,255,255,0.1);
   border-radius: 4px;
   border-radius: 4px;
}
}


#p-personal {
  border-radius: 10px;
}
/* --- Left Sidebar Container --- */
#left-navigation {
  margin-left: 12em;
  background-color: rgba(255, 245, 220, 0.9); /* subtle parchment effect */
  border: 1px solid var(--bordercolour);
  border-radius: 10px;
  padding: 0.5em;
}
/* --- Sidebar Menu Headings --- */
.vector-menu-heading {
  background-color: var(--tablecolour3); /* parchment header */
  border-radius: 20px 20px 0 0;
  border-color: var(--bordercolour);
  border-style: solid;
  border-width: 0.15em;
  box-shadow: none !important;
}
/* --- Sidebar Links & Menu Items --- */
#left-navigation a,
#left-navigation li {
  background: transparent; /* allows container gradient/color to show */
  border-color: var(--bordercolour);
  color: var(--maintext);
  padding: 0.3em 0.5em;
  display: block;
  border-radius: 5px; /* optional rounded corners for individual items */
}
/* --- Sidebar Tabs (if used) --- */
.vector-menu-tabs,
.vector-menu-tabs,
.vector-menu {
.vector-menu,  
  background-color: rgba(var(--orange), 0.85);
#left-navigation a, #right-navigation a, #left-navigation, #right-navigation, #left-navigation li, #right-navigation li {
  border-color: var(--bordercolour);
   background-color:rgba(var(--orange),0.85);
  border-radius: 20px 20px 0 0;
  color: var(--whitetextandbg);
}
 
/* --- Dropdown / Submenu Styling --- */
.vector-menu-dropdown,
.vector-menu-dropdown a,
.vector-menu-dropdown li {
  background: transparent;
  border: none;
  color: var(--maintext);
}
 
/* --- Selected / Active Menu Item --- */
#p-tb-label.vector-menu-heading {
  border-radius: 10px;
  padding: 4px;
  border-left: 4px solid rgba(var(--orange), 0.85);
  background: transparent;
  background-image: linear-gradient(to right, rgba(var(--orange), 0.85), rgba(var(--orange), 0.85), transparent);
  color: var(--whitetextandbg);
  font-weight: bold;
}
 
/* --- Left Sidebar with Parchment Gradient --- */
#left-navigation {
  margin-left: 12em;
  background: linear-gradient(
    to bottom,
    rgba(255, 250, 230, 0.95),  /* light parchment at top */
    rgba(245, 230, 200, 0.95)  /* slightly warmer parchment at bottom */
  );
  border: 1px solid var(--bordercolour);
  border-radius: 12px;
  padding: 0.5em;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1); /* soft inner shadow for depth */
}
 
/* Optional: smooth hover effect for menu items */
#left-navigation a,
#left-navigation li {
  transition: background 0.3s, color 0.3s;
}
 
#left-navigation a:hover,
#left-navigation li:hover {
   background-color: rgba(255, 245, 210, 0.5); /* soft highlight on hover */
  color: var(--maintext);
  border-radius: 5px;
}
 
/*main body*/
 
#content.mw-body {
  background-color:rgba(255, 234, 189, 0.97);
  box-shadow: inset 0 0 10vw 1.5vw #d4b57e;
   border-color:var(--bordercolour);
   border-color:var(--bordercolour);
   border-radius:10px;
   border-radius:0px 0px 0px 0px;
   border-style:solid;
   color:var(--whitetextandbg);
  border-width:0.05em;
  margin-right:0.5%;
}
}


.mainpage-buttons ul li {
.vector-menu-tabs {
   background-color:var(--tableheaders);
   background-image: linear-gradient(rgba(182,110,35,0),rgba(182,110,35,0.8));
  box-shadow: inset -0.05vw -0.05vw 0.1vw 0.1vw #d4b57e;
   background-repeat: repeat;
  border-color:var(--bordercolour);
   border-radius:5px;
}
}

Navigation menu