You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.7 KiB
97 lines
3.7 KiB
7 months ago
|
.weui-navigation-bar {
|
||
|
--weui-FG-0:rgba(0,0,0,.9);
|
||
|
--height: 44px;
|
||
|
--left: 16px;
|
||
|
}
|
||
|
.weui-navigation-bar .android {
|
||
|
--height: 48px;
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar {
|
||
|
overflow: hidden;
|
||
|
color: var(--weui-FG-0);
|
||
|
flex: none;
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar__inner {
|
||
|
position: relative;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
height: calc(var(--height) + env(safe-area-inset-top));
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
padding-top: env(safe-area-inset-top);
|
||
|
width: 100%;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar__left {
|
||
|
position: relative;
|
||
|
padding-left: var(--left);
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
align-items: flex-start;
|
||
|
height: 100%;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar__btn_goback_wrapper {
|
||
|
padding: 11px 18px 11px 16px;
|
||
|
margin: -11px -18px -11px -16px;
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar__btn_goback_wrapper.weui-active {
|
||
|
opacity: 0.5;
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar__btn_goback {
|
||
|
font-size: 12px;
|
||
|
width: 12px;
|
||
|
height: 24px;
|
||
|
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||
|
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||
|
-webkit-mask-size: cover;
|
||
|
mask-size: cover;
|
||
|
background-color: var(--weui-FG-0);
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar__center {
|
||
|
font-size: 17px;
|
||
|
text-align: center;
|
||
|
position: relative;
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
font-weight: bold;
|
||
|
flex: 1;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
.weui-navigation-bar__loading {
|
||
|
margin-right: 4px;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.weui-loading {
|
||
|
font-size: 16px;
|
||
|
width: 16px;
|
||
|
height: 16px;
|
||
|
display: block;
|
||
|
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
|
||
|
background-size: 100%;
|
||
|
margin-left: 0;
|
||
|
animation: loading linear infinite 1s;
|
||
|
}
|
||
|
|
||
|
@keyframes loading {
|
||
|
from {
|
||
|
transform: rotate(0);
|
||
|
}
|
||
|
to {
|
||
|
transform: rotate(360deg);
|
||
|
}
|
||
|
}
|