Improve mobile UI.
This commit is contained in:
joyqi
+90
-37
@@ -5,6 +5,7 @@
|
||||
$border-nav: 1px solid #383D45;
|
||||
$color-nav-bg: #292D33;
|
||||
$color-nav-text-normal: #BBB;
|
||||
$color-nav-text-mute: #777;
|
||||
$color-nav-text-hover: #FFF;
|
||||
$color-nav-btn-hover: #202328;
|
||||
$color-nav-child-focus: #6DA1BB;
|
||||
@@ -14,7 +15,7 @@ $color-nav-child-focus: #6DA1BB;
|
||||
background: $color-nav-bg;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
a, button.menu-bar {
|
||||
padding: 0 20px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
@@ -25,11 +26,10 @@ $color-nav-child-focus: #6DA1BB;
|
||||
color: $color-nav-text-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-bar {
|
||||
display: none;
|
||||
border-right: $border-nav;
|
||||
}
|
||||
button.menu-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#typecho-nav-list {
|
||||
@@ -67,6 +67,10 @@ $color-nav-child-focus: #6DA1BB;
|
||||
z-index: 250;
|
||||
|
||||
li {
|
||||
&.return {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
overflow: hidden;
|
||||
text-overflow : ellipsis;
|
||||
@@ -118,49 +122,98 @@ $color-nav-child-focus: #6DA1BB;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-phone - 1px) {
|
||||
.typecho-head-nav {
|
||||
padding: 0;
|
||||
@keyframes out {
|
||||
from {left: 0%;}
|
||||
to {left: -100%;}
|
||||
}
|
||||
|
||||
#typecho-nav-list {
|
||||
display: none;
|
||||
}
|
||||
@keyframes in {
|
||||
from {left: -100%;}
|
||||
to {left: 0%;}
|
||||
}
|
||||
|
||||
.operate {
|
||||
a:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
.typecho-head-nav {
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
a.menu-bar {
|
||||
display: inline-block;
|
||||
|
||||
&.focus {
|
||||
color: $color-nav-text-hover;
|
||||
#typecho-nav-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.operate {
|
||||
a:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button.menu-bar {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
background: $color-nav-bg;
|
||||
border-right: $border-nav;
|
||||
|
||||
& + #typecho-nav-list {
|
||||
display: block;
|
||||
float: none;
|
||||
&.focus {
|
||||
color: $color-nav-text-hover;
|
||||
|
||||
& + #typecho-nav-list {
|
||||
display: block;
|
||||
float: none;
|
||||
position: absolute;
|
||||
bottom: 36px;
|
||||
width: 100%;
|
||||
|
||||
& > ul {
|
||||
float: none;
|
||||
border-bottom: $border-nav;
|
||||
position: static;
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.parent {
|
||||
a {
|
||||
display: block;
|
||||
border: none;
|
||||
background: $color-nav-btn-hover;
|
||||
}
|
||||
}
|
||||
.child {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
width: 240px;
|
||||
|
||||
& > ul {
|
||||
float: none;
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
.parent {
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
top: auto;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
|
||||
li {
|
||||
border-bottom: $border-nav;
|
||||
&.return {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
color: $color-nav-text-mute;
|
||||
}
|
||||
}
|
||||
.child {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
animation: out .3s ease-out forwards;
|
||||
}
|
||||
|
||||
&.noexpanded {
|
||||
animation: in .3s ease-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,21 +78,21 @@
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@include editor-button(bold)
|
||||
@include editor-button(italic)
|
||||
@include editor-button(link)
|
||||
@include editor-button(quote)
|
||||
@include editor-button(code)
|
||||
@include editor-button(image)
|
||||
@include editor-button(olist)
|
||||
@include editor-button(ulist)
|
||||
@include editor-button(heading)
|
||||
@include editor-button(hr)
|
||||
@include editor-button(more)
|
||||
@include editor-button(undo)
|
||||
@include editor-button(redo)
|
||||
@include editor-button(fullscreen)
|
||||
@include editor-button(exit-fullscreen)
|
||||
@include editor-button(bold);
|
||||
@include editor-button(italic);
|
||||
@include editor-button(link);
|
||||
@include editor-button(quote);
|
||||
@include editor-button(code);
|
||||
@include editor-button(image);
|
||||
@include editor-button(olist);
|
||||
@include editor-button(ulist);
|
||||
@include editor-button(heading);
|
||||
@include editor-button(hr);
|
||||
@include editor-button(more);
|
||||
@include editor-button(undo);
|
||||
@include editor-button(redo);
|
||||
@include editor-button(fullscreen);
|
||||
@include editor-button(exit-fullscreen);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -308,3 +308,20 @@
|
||||
.preview-loading { background-image: url(../img/ajax-loader.gif); background-position: center; background-repeat: no-repeat }
|
||||
#btn-cancel-preview { display: inline-block }
|
||||
}
|
||||
|
||||
@media (max-width: $screen-phone - 1px) {
|
||||
#wmd-spacer2,
|
||||
#wmd-olist-button,
|
||||
#wmd-ulist-button,
|
||||
#wmd-heading-button,
|
||||
#wmd-hr-button,
|
||||
#wmd-more-button,
|
||||
#wmd-spacer3,
|
||||
#wmd-undo-button,
|
||||
#wmd-redo-button,
|
||||
#wmd-spacer4,
|
||||
#wmd-fullscreen-button,
|
||||
#wmd-exit-fullscreen-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -171,8 +171,9 @@ a.button:hover, a.balloon-button:hover {
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
border: 1px dashed #D9D9D6;
|
||||
max-width: 100%;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/** 增加配置面板内部的错误样式 by 70 */
|
||||
@@ -435,12 +436,15 @@ a.button:hover, a.balloon-button:hover {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.typecho-list-operate .operate {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.typecho-list-operate .search {
|
||||
float: right;
|
||||
@media (min-width: $screen-phone) {
|
||||
.typecho-list-operate {
|
||||
.operate {
|
||||
float: left;
|
||||
}
|
||||
.search {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typecho-list-operate span.operate-delete, a.operate-delete,
|
||||
@@ -949,6 +953,29 @@ background: #FFF1A8;
|
||||
background-color: #FFFBCC;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-phone - 1px) {
|
||||
.typecho-list-operate {
|
||||
.search {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.typecho-table-wrap {
|
||||
padding: 10px;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.typecho-option-submit {
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入扩展样式
|
||||
|
||||
Reference in New Issue
Block a user