1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- /* Menu */
- body > nav > ul:nth-child(2) li p.normal,
- body > nav > ul:nth-child(3) li p.normal {
- height: 6rem;
- line-height: 6.25rem;
- }
- body > nav > ul.list li > .primary ~ :not(.primary):not(.counter):not(.bubble):not(.control) {
- padding-left: 7rem;
- }
- body > nav > ul.list li > .primary {
- left: 0.5rem;
- }
- body > nav > ul.list li > .primary.bubble {
- left: 1rem;
- }
- body > nav.color.dark > ul a {
- color: white;
- }
- body > nav > ul.list li > p:nth-last-of-type(2) + p {
- color: gray;
- }
- body > nav > ul.list.active li:hover:not(.subheader),
- body > nav > ul.list.active li.active:not(.subheader) {
- background-color: rgba(255, 255, 255, 0.035);
- }
- ul.oppose {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- min-width: 10rem;
- }
- @media screen and (max-height: 500px) {
- ul.oppose {
- bottom: initial;
- }
- }
- /* Navigation */
- ul.navigation {
- display:flex;
- justify-content:center;
- }
- body > nav > ul.list.active li:not(.active) span.primary,
- ul.navigation li > span.primary {
- opacity: 0.5;
- }
- ul.navigation li {
- text-align: center;
- flex: 1;
- padding: 0.75rem;
- position: relative;
- }
- ul.navigation li:hover {
- background-color: rgba(0, 0, 0, 0.1);
- cursor: pointer;
- }
- ul.navigation li.active > span.primary,
- ul.navigation li:hover > span.primary {
- opacity: 1;
- }
- ul.navigation li > span.primary {
- line-height: 3.5rem;
- }
- ul.navigation li > p {
- display: block;
- list-style-type: none;
- font-size: 1.5rem;
- }
- ul.navigation li > span.counter {
- right: calc(50% - 3rem);
- font-size: 1.5rem;
- line-height: 1.5rem;
- min-width: 1.5rem;
- }
|