mirrors/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2025-08-02 02:38:30 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update side-menu.css

Browse Source
This commit is contained in:
Tommy Miland 2019-03-14 16:07:48 +01:00
parent 0407fb0635
commit d6d573d4b2
1 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
assets/css/side-menu.css
View File

@ -25,7 +25,6 @@ This is the parent `<div>` that contains the menu and the content area.
*/ */
#layout { #layout {
position: relative; position: relative;
left: 0;
padding-left: 0; padding-left: 0;
} }
#layout.active #menu { #layout.active #menu {
@ -48,22 +47,27 @@ The content `<div>` is where all your content goes.
} }
.header { .header {
margin: 0; font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333; max-width: 768px;
text-align: center; margin: 0 auto;
padding: 2.5em 2em 0; padding: 1em;
border-bottom: 1px solid #eee; text-align: center;
} border-bottom: 1px solid #eee;
background: #fff;
letter-spacing: 0.05em;
}
.header h1 { .header h1 {
margin: 0.2em 0; font-size: 300%;
font-size: 3em; font-weight: 100;
font-weight: 300; margin: 0;
} }
.header h2 { .header h2 {
font-weight: 300; font-size: 125%;
color: #ccc; font-weight: 100;
padding: 0; line-height: 1.5;
margin-top: 0; margin: 0;
color: #666;
letter-spacing: -0.02em;
} }
.content-subhead { .content-subhead {
@ -72,8 +76,6 @@ The content `<div>` is where all your content goes.
color: #888; color: #888;
} }
/* /*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page. appears on the left side of the page.
@ -191,19 +193,44 @@ small screens.
.menu-link span:after { .menu-link span:after {
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
height: 0.2em; height: .2em;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
} }
.menu-link span:before, .menu-link span:before,
.menu-link span:after { .menu-link span:after {
position: absolute; position: absolute;
margin-top: -0.6em; top: -.55em;
content: " "; content: " ";
} }
.menu-link span:after { .menu-link span:after {
margin-top: 0.6em; top: .55em;
} }
.menu-link.active span {
background: transparent;
}
.menu-link.active span:before {
-webkit-transform: rotate(45deg) translate(.5em, .4em);
-moz-transform: rotate(45deg) translate(.5em, .4em);
-ms-transform: rotate(45deg) translate(.5em, .4em);
-o-transform: rotate(45deg) translate(.5em, .4em);
transform: rotate(45deg) translate(.5em, .4em);
}
.menu-link.active span:after {
-webkit-transform: rotate(-45deg) translate(.4em, -.3em);
-moz-transform: rotate(-45deg) translate(.4em, -.3em);
-ms-transform: rotate(-45deg) translate(.4em, -.3em);
-o-transform: rotate(-45deg) translate(.4em, -.3em);
transform: rotate(-45deg) translate(.4em, -.3em);
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */ /* -- Responsive Styles (Media Queries) ------------------------------------- */
@ -238,12 +265,12 @@ min-width: 200em {
} }
} }
max-width: 48em { max-width: 58em {
/* Only apply this when the window is small. Otherwise, the following /* Only apply this when the window is smaller. Otherwise, the following
case results in extra padding on the left: case results in extra padding on the left:
* Make the window small. * Make the window small. (Rotate to portrait on a mobile.)
* Tap the menu to trigger the active state. * Tap the menu to trigger the active state.
* Make the window large again. * Make the window large again. (Rotate to landscape on mobile.)
*/ */
#layout.active { #layout.active {
position: relative; position: relative;