SPR-950: optimate Headerstyling in Mobile

This commit is contained in:
Silke Pisulla 2017-04-24 13:03:01 +02:00
commit 80134fae3c
3 changed files with 32 additions and 24 deletions

View file

@ -8,7 +8,7 @@
#dokuwiki__header {
@header-font-opacity: 1;
@media @screen_max-xxs {
@media @screen_max-xs {
min-height: 120px;
}
@ -70,7 +70,7 @@
padding-bottom: 1rem;
}
@media @screen_max-xxs {
@media @screen_max-xs {
padding-right: (@toggle-size + @headericons-margin-xxs);
}
}
@ -84,7 +84,7 @@
vertical-align: middle;
}
@media @screen_max-xxs {
@media @screen_max-xs {
padding-right: (@toggle-size + @headericons-margin-xxs);
}
}
@ -177,7 +177,7 @@
&.has-magicmatcher {
.logo {
@media @screen_min-md {
padding-top: 2rem;
padding-top: 3rem;
}
}

View file

@ -5,7 +5,20 @@
*/
.nav-usertools {
#dokuwiki__usertools.nav-usertools {
@media @screen_min-md {
right: 1.25rem;
}
@media @screen_max-md {
position: absolute;
top: 0;
left: (@toggle-size + 1.25); // margin-left content
right: @headericons-margin-xxs;
margin-top: 0;
margin-right: 0;
}
&.has-bar {
@media @screen_min-md {
margin-top: @height-context-bar;
@ -27,7 +40,7 @@
float: right;
min-height: 28px;
@media @screen_max-xxs {
@media @screen_max-xs {
display: block;
float: none;
margin-bottom: @headericons-margin-xxs;
@ -66,7 +79,7 @@
position: relative;
display: table-cell;
background-color: @ini_background;
border: solid 1px @noopentasks-border;//@ini_border_light;
border: solid 1px @wikiicons-border; // @ini_border_light;
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
color: @ini_text_webframe;
padding-right: .3rem;
@ -88,16 +101,20 @@
padding-top: @space-max-md;
}
@media @screen_max-xxs {
@media @screen_max-xs {
position: absolute;
top: @headericons-margin-xxs;
right: (@toggle-size + @headericons-margin-xxs);
max-width: 225px;
overflow-x: hidden;
overflow: hidden;
white-space: nowrap;
margin: -1px 0 0;
}
@media @screen_max-xxs {
left: -10px;
width: auto;
}
> a {
.display-flex();
.align-items();
@ -135,6 +152,10 @@
margin-top: -(@space-max-md);
}
@media @screen_max-xxs {
min-height: (@toggle-size - .15);
}
&::before {
content: '';
top: -1px;
@ -194,7 +215,7 @@
top: -.2rem;
}
@media @screen_max-xxs {
@media @screen_max-xs {
top: -.25rem;
}

View file

@ -194,15 +194,6 @@
margin: 0 1.25rem;
}
#dokuwiki__usertools {
margin-top: 0;
max-width: 75%;
position: absolute;
top: 0;
margin-right: 0;
right: 1.25rem;
}
.content {
position: relative;
@ -233,10 +224,6 @@
left: @mobileMargin;
}
#dokuwiki__usertools {
right: @mobileMargin;
}
#dokuwiki__footer {
.main-footer {
> * {