Rev. | 233ca9d157561caa2264cd7f1815b8c5e10e4d51 |
---|---|
大小 | 4,745 字节 |
时间 | 2017-08-07 12:27:41 |
作者 | HMML |
Log Message | Implement theme editor.
|
.draft-editor {
height: auto;
.draft-editor-table {
table-layout: fixed;
width: 100%;
table-collapse: collapse;
th { text-align: center; }
th, td { border: 1px solid #ccc; position: relative; }
td {
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
.corner {
background-image: linear-gradient(35deg, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%, transparent);
.first { text-align: right }
.second { text-align: left; }
.first, .second { padding: 0 1rem; }
}
}
.dropzone {
border-width: 4px;
border-color: #ddd;
border-style: dashed;
border-radius: 5px;
width: 100%;
height: 100%;
position: relative;
}
.dropzone-active {
border-style: solid;
}
.dropzone-accept {
border-color: #6c6;
border-style: solid;
}
.dropzone-reject {
border-color: #c66;
border-style: solid;
}
.user-weather-icon {
height: 120px;
width: 120px;
margin: auto;
position: relative;
vertical-align: middle;
text-align: center;
line-height: 120px;
background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.733), rgba(34, 34, 34, 0.866) 50%);
border-radius: 8px;
img {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 97%;
max-height: 97%;
}
}
.weather-icon-progress {
margin: auto;
width: 32px;
height: 32px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: image-url('loading.gif');
}
.day-frame-white .user-weather-icon {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.66666), rgba(255, 255, 255, 0.933333) 50%);
}
.weather-icon-missing {
text-align: center;
line-height: 1;
.fa {
font-size: 120px;
color: #bbb;
}
}
}
@media (max-width: map-get($grid-breakpoints, lg)) {
.draft-editor {
.user-weather-icon {
min-height: 80px;
}
.weather-icon-missing {
.fa {
font-size: 80px;
}
}
}
}
@media (max-width: map-get($grid-breakpoints, md)) {
.draft-editor {
.user-weather-icon {
min-height: 36px;
}
.weather-icon-missing {
.fa {
font-size: 36px;
}
}
}
}
.preview-info {
.qr-code {
display: inline-block;
width: 300px;
height: 300px;
position: relative;
svg { width: 100%; height: 100%; }
}
}
.preview-base {
background-image: image-url('preview-base.png');
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
height: 640px;
width: 360px;
position: relative;
.widget-frame {
position: relative;
}
.widget-frame1 {
top: 88px;
left: 11px;
width: 338px;
height: 154px;
}
.widget-frame2 {
top: 103px;
left: 11px;
width: 338px;
height: 238px;
}
.day-frame {
position: absolute;
top: 20px;
border-radius: 3px;
width: 164px;
background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.733), rgba(34, 34, 34, 0.866) 50%);
img {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 97%;
max-height: 97%;
}
}
.widget-frame1 .day-frame {
height: 111px;
}
.widget-frame2 .day-frame {
height: 195px;
}
.day-frame1 {
left: 2px;
}
.day-frame2 {
left: 171.5px;
}
.frame-white .day-frame {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.66666), rgba(255, 255, 255, 0.933333) 50%);
}
.weather-text {
text-align: center;
bottom: 3px;
position: absolute;
width: 100%;
span {
color: white;
font-size: 12px;
text-shadow: 0.5px 0.5px 2px #000;
display: inline-block;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 8px;
font-weight: bold;
padding: 1px 6px;
}
}
}