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.
308 lines
6.9 KiB
308 lines
6.9 KiB
#u-search { |
|
display: none; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
padding: 60px 20px; |
|
z-index: 999999; |
|
|
|
@media (max-width: @modal-threshold) { |
|
padding: 0px; |
|
} |
|
.modal { |
|
position: fixed; |
|
height: 80%; |
|
width: 100%; |
|
max-width: 640px; |
|
left: 50%; |
|
top: 0; |
|
margin: 64px 0px 0px -320px; |
|
background: #fff; |
|
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); |
|
z-index: 3; |
|
border-radius: @border-radius-width; |
|
@media (max-width: @modal-threshold) { |
|
box-shadow: none; |
|
max-width: none; |
|
top: 0; |
|
left: 0; |
|
margin: 0; |
|
height: 100%; |
|
border-radius: 0; |
|
} |
|
|
|
.modal-ajax-content { |
|
opacity: 0; |
|
visibility: hidden; |
|
.enable-trans(); |
|
|
|
&.loaded { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
} |
|
.modal-header { |
|
position: relative; |
|
width: 100%; |
|
height: @header-height; |
|
background-color: @primary-color; |
|
z-index: 3; |
|
border-top-left-radius: @border-radius-width; |
|
border-top-right-radius: @border-radius-width; |
|
@media (max-width: @modal-threshold) { |
|
padding: 0px; |
|
border-radius: 0; |
|
} |
|
&:extend(.z-depth-nav); |
|
.enable-trans(); |
|
&:hover { |
|
&:extend(.z-depth-nav-raised); |
|
} |
|
&:active { |
|
|
|
} |
|
.btn-close { |
|
display: block; |
|
position: absolute; |
|
width: 50px + 5px; |
|
height: @header-height; |
|
top: 0; |
|
right: 0; |
|
color: @text-color-inside-theme; |
|
cursor: pointer; |
|
text-align: center; |
|
line-height: @header-height; |
|
vertical-align: middle; |
|
font-size: @header-switcher-font-size; |
|
.enable-trans(); |
|
z-index: 2; |
|
|
|
&:hover { |
|
transform: rotate(90deg); |
|
} |
|
} |
|
.modal-loading { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 2px; |
|
background: transparent; |
|
z-index: 1; |
|
|
|
.modal-loading-bar { |
|
display: block; |
|
position: relative; |
|
width: 0%; |
|
height: 100%; |
|
background: fade(@white, 100%); |
|
.enable-trans(); |
|
} |
|
} |
|
#u-search-modal-form { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 2; |
|
|
|
#u-search-modal-input { |
|
width: 100%; |
|
padding: 0px 50px; |
|
height: @header-height; |
|
font-size: @base-font-size; |
|
line-height: @base-line-height; |
|
vertical-align: middle; |
|
color: @text-color-inside-theme; |
|
border: none; |
|
background: transparent; |
|
.enable-trans(); |
|
font-weight: thin; |
|
appearance: none; |
|
box-shadow: none; |
|
|
|
&:focus { |
|
border-top-left-radius: @border-radius-width; |
|
border-top-right-radius: @border-radius-width; |
|
} |
|
} |
|
} |
|
#u-search-modal-btn-submit { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
padding-left: 5px; |
|
padding-top: 2px; |
|
background: transparent; |
|
border: none; |
|
width: 50px; |
|
height: @header-height; |
|
vertical-align: middle; |
|
font-size: @header-switcher-font-size; |
|
color: @text-color-inside-theme; |
|
z-index: 2; |
|
} |
|
} |
|
.modal-footer { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 50px; |
|
padding: 0px 15px; |
|
background: #fff; |
|
border-top: 1px solid lighten(@black,60%); |
|
|
|
.logo { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
text-align: center; |
|
z-index: 0; |
|
|
|
a { |
|
display: inline-block; |
|
} |
|
&.google img { |
|
height: 24px; |
|
margin-top: 13px; |
|
} |
|
&.baidu img { |
|
height: 22px; |
|
margin-top: 14px; |
|
} |
|
img { |
|
position: relative; |
|
display: inline-block; |
|
width: auto; |
|
height: 18px; |
|
margin-top: 16px; |
|
} |
|
} |
|
.modal-error { |
|
position: relative; |
|
float: left; |
|
vertical-align: middle; |
|
line-height: 50px; |
|
font-size: 13px; |
|
z-index: 1; |
|
} |
|
.modal-metadata { |
|
position: relative; |
|
float: left; |
|
vertical-align: middle; |
|
line-height: 50px; |
|
font-size: 13px; |
|
z-index: 1; |
|
} |
|
.nav { |
|
position: relative; |
|
display: block; |
|
float: right; |
|
vertical-align: middle; |
|
font-size: 13px; |
|
font-weight: 500; |
|
line-height: 50px; |
|
color: @grey-color; |
|
cursor: pointer; |
|
z-index: 1; |
|
|
|
&:hover { |
|
color: @black; |
|
} |
|
&.btn-next { |
|
margin-left: 10px; |
|
} |
|
.icon { |
|
font-size: 12px; |
|
} |
|
} |
|
} |
|
.modal-body { |
|
position: absolute; |
|
padding: 64px 50px 80px 50px; |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
overflow-y: scroll; |
|
-webkit-overflow-scrolling: touch; |
|
|
|
@media (max-width: @modal-threshold) { |
|
padding: 60px 20px 80px 20px; |
|
} |
|
.modal-results { |
|
list-style: none; |
|
|
|
li { |
|
border-bottom: 1px solid #e6e8ea; |
|
|
|
&:last-child { |
|
border-bottom: none; |
|
} |
|
} |
|
.result { |
|
position: relative; |
|
display: block; |
|
padding: 15px 30px 15px 0px; |
|
text-decoration: none; |
|
|
|
&:hover { |
|
.digest, .icon { |
|
// color: @black; |
|
} |
|
.title { |
|
color: @text-color-theme; |
|
} |
|
} |
|
.title { |
|
display: inline-block; |
|
max-width: 100%; |
|
color: lighten(@text-color, 10%); |
|
font-size: @base-font-size; |
|
font-weight: bold; |
|
padding: 1px; |
|
margin-bottom: 2px; |
|
line-height: @base-line-height; |
|
white-space: normal; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
.digest { |
|
display: block; |
|
white-space: pre-wrap; |
|
overflow: scroll; |
|
text-overflow: ellipsis; |
|
font-size: @small-font-size; |
|
line-height: @base-line-height; |
|
color: lighten(@text-color, 30%); |
|
.enable-trans(); |
|
em { |
|
// font-weight: bold; |
|
} |
|
} |
|
.icon { |
|
position: absolute; |
|
top: 50%; |
|
right: 0; |
|
margin-top: -4px; |
|
font-size: 11px; |
|
color: @grey-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.modal-overlay { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(0,0,0,0.7); |
|
z-index: 1; |
|
} |
|
}
|
|
|