Template:CPU CHINA/VueNavbarCss
/* fix media wiki problems */
- content {
padding:0px; width:100%; margin-top:-7px; margin-left:0%; margin-right: 0%
}
- bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
margin-bottom: 0px;
}
- HQ_page p {
font-size:16px; font-family:"Raleway",sans-serif;
}
- globalWrapper{
margin: 0; padding: 0;
}
- content{
width: 100%; padding: 0; margin: -12px 0 0;
}
- top_title{
display: none;
}
- sideMenu{
display: none;
}
- content
{
background-color: transparent !important;
} body {
background: #56CCF2 !important; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2) !important; /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #2F80ED, #56CCF2) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: 'Raleway', sans-serif !important;
}
/* Vue Navbar */
/* make navbar sticky and center */
header {
position:fixed !important; /* fixing the position takes it out of html flow - knows
nothing about where to locate itself except by browser
coordinates */
left:0; /* top left corner should start at leftmost spot */
top:0; /* top left corner should start at topmost spot */
z-index:200; /* high z index so other content scrolls underneath */
height:auto; /* define height for content */
width: 100vw;
background: #56CCF2 !important; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2) !important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2F80ED, #56CCF2) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Raleway', sans-serif !important;
}
- nav {
width: 100vw;
}
/* Vue style navbar */
.vnb {
padding-top: 30px; padding-bottom: 20px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: auto;
} .vnb * {
box-sizing: border-box;
} .vnb a {
text-decoration: none;
} .tippy-tooltip {
padding: 0;
}
.vnb-image {
width: 200px; height: auto;
}
/*# sourceMappingURL=vue-navigation-bar.vue.map */.vnb__brand-image-wrapper {
padding-left: 30px;
}
.vnb__brand-image-wrapper__link__image {
max-height: 70px;
} .vnb-image {
max-width: 100%; height: auto;
}
/*# sourceMappingURL=BrandImage.vue.map */.vnb__menu-options {
display: flex;
flex-direction: row;
align-items: center;
}
.vnb__menu-options--left {
margin-right: auto; justify-content: flex-start; padding-left: 30px;
} .vnb__menu-options--right {
margin-left: auto; justify-content: flex-end; padding-right: 20px;
}
.vnb__menu-options__option__link {
font-size: 18px !important; color: white !important; line-height: 20px !important;
}
.vnb__sub-menu-options__option__link {
font-size: 15px !important; color: gray !important; line-height: 17px !important;
}
.vnb__menu-options__option:not(:last-child) {
margin-right: 20px;
}
/*# sourceMappingURL=MenuOptions.vue.map */.vnb__collapse-button {
cursor: pointer;
border: 0;
background: transparent;
margin-right: 5% !important;
margin-top: 2% !important;
}
.vnb__collapse-button:hover {
opacity: 0.75;
} .vnb__collapse-button__image {
max-height: 30px;
}
/*# sourceMappingURL=CollapseButton.vue.map */.vnb__popup {
background: #fff;
position: absolute;
top:15% !important;
margin: 10% 10% 10%;
display: flex;
flex-direction: column;
perspective: 2000px;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
z-index: 100000;
overflow-y: auto;
max-height: 25rem !important;
border-radius: 5%;
}
.vbn__popup a {
color: gray !important;
}
.vnb__popup__top {
padding: 15px 24px 0; border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-top-right-radius: 6px; border-top-left-radius: 6px;
} .vnb__popup__top__image {
margin-top: 5%; width: auto; margin-bottom: 5%;
} .vnb__popup__top__close-button {
position: fixed; position: -ms-device-fixed; margin-top: 5%; margin-right: 5%; cursor: pointer; border: 0; background: transparent;
} .vnb__popup__top__close-button:hover {
opacity: 0.75;
} .vnb__popup__top__close-button__image {
max-height: 15px;
} .vnb__popup__bottom {
background: #fff; padding: 10px 0 10px; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; width: 75%;
} .vnb__popup__bottom__menu-options {
list-style-type: none; padding-left: 0; display: flex; flex-direction: column; color: gray !important; list-style-type: none !important;
} .vnb__popup__bottom__menu-options__option:not(:last-child) {
margin-bottom: 10px;
} .vnb__popup__bottom__menu-options__option__link {
padding: 30px 50px 20px 40px; color: gray !important; font-weight: 500; font-size: 20px !important; display: inline-block; transition: color 0.2s ease-in, background 0.2s ease-in, border 0.2s ease-in; border-left: 5px solid ivory; width: 80%;
}
.vnb__popup__bottom__menu-options__option__link:hover {
color: black !important; text-decoration: none; background: #f3f3f3; border-left: 5px solid #66ccff ;
} .vnb__popup__bottom__menu-options__option__link--no-highlight {
padding: 12px 24px 6px; font-weight: 400; font-size: 0.8rem; color: gray !important;
} .vnb__popup__bottom__menu-options__option__link--no-highlight:hover {
color: black !important; background: ivory; border-left: 5px solid #66ccff;
} .vnb__popup__bottom__sub-menu-options {
display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; font-size: 0.9rem;
} .vnb__popup__bottom__sub-menu-options__option {
width: 100%;
} .vnb__popup__bottom__sub-menu-options__option__link {
padding: 6px 24px; width: 100%; display: block; color: #666666; font-weight: 500; transition: color 0.2s ease-in, background 0.2s ease-in, border 0.2s ease-in; border-left: 5px solid ivory;
} .vnb__popup__bottom__sub-menu-options__option__link:hover {
color: #333; text-decoration: none; background: #eee; border-left: 5px solid #66ccff;
} .vnb__popup__bottom__sub-menu-options__option__link__sub-text {
margin-top: 5px; display: block; font-size: 0.75rem;
} .vnb-image {
width:200px; height: auto;
}
/*# sourceMappingURL=Popup.vue.map */.vnb__menu-options__option__link {
cursor: pointer;
font-weight: 500;
color: ivory;
transition: color 0.2s ease-in;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.vnb__menu-options__option__link:hover {
color: white; text-decoration: none;
} .vnb__menu-options__option__arrow {
margin-left: 8px; max-height: 5px; transition: transform 0.2s ease-in-out;
} .vnb__menu-options__option__arrow--hover {
transform: rotate(180deg);
} .vnb__sub-menu-options {
background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 25px; padding: auto; max-width: 200px !important; min-width: 100px;
} .vnb__sub-menu-options__option {
max-width: 200px ; min-width: 100px;
} .vnb__sub-menu-options__option__link {
padding: 12px 12px; width: 100%; display: block; text-align: left; color: #666666; transition: color 0.2s ease-in, background 0.2s ease-in, border 0.2s ease-in; border-left: 5px solid ivory;
} .vnb__sub-menu-options__option__link:hover {
color: #333; text-decoration: none; background: ivory; border-left: 5px solid #66ccff;
} .vnb__sub-menu-options__option__link__sub-text {
margin-top: 5px; display: block; font-size: 0.75rem;
} .vnb__sub-menu-options__option__hr {
margin-top: 10px; margin-bottom: 10px; border-color: rgba(0, 0, 0, 0.1);
}
/*# sourceMappingURL=DesktopMenuItemLink.vue.map */.vnb__menu-options__option__button {
display: inline-block;
font-weight: 400;
color: #fff;
text-align: center;
vertical-align: middle;
user-select: none;
font-size: 0.9rem;
line-height: 1.0;
border-radius: .25rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.5rem 1rem;
transition: background 0.2s ease-in;
}
.vnb-button {
background: #66ccff;
} .vnb-button:hover {
color: #fff; background: #66ccff; text-decoration: none;
}
/*# sourceMappingURL=DesktopMenuItemButton.vue.map */.vnb__menu-options__option__spacer {
width: 30px;
}
/*# sourceMappingURL=DesktopMenuItemSpacer.vue.map */.tippy-tooltip.light-theme{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-tooltip.light-theme[x-placement^=top] .tippy-arrow{border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}.tippy-tooltip.light-theme[x-placement^=bottom] .tippy-arrow{border-bottom:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}.tippy-tooltip.light-theme[x-placement^=left] .tippy-arrow{border-left:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}.tippy-tooltip.light-theme[x-placement^=right] .tippy-arrow{border-right:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}.tippy-tooltip.light-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}
body {
margin: 0; font-family:'Raleway', sans-serif;
}