SPR-950: optimate Headerstyling in Mobile
This commit is contained in:
parent
8f9af64d4e
commit
80134fae3c
3 changed files with 32 additions and 24 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
> * {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue