blessing-skin-server/resources/assets/sass/style.scss
2016-08-28 18:34:41 +08:00

193 lines
3.4 KiB
SCSS

/*
* @Author: printempw
* @Date: 2016-06-04 20:55:09
* @Last Modified by: printempw
* @Last Modified time: 2016-08-28 13:32:56
*/
$font_stack: Ubuntu, 'Segoe UI', 'Microsoft Yahei', 'Microsoft Jhenghei', sans-serif;
@font-face {
font-family: 'Ubuntu';
src: url('../fonts/ubuntu.woff2') format('woff2');
}
@font-face {
font-family: 'Minecraft';
src: url('../fonts/minecraft.eot');
src: url('../fonts/minecraft.eot') format('embedded-opentype'),
url('../fonts/minecraft.woff2') format('woff2'),
url('../fonts/minecraft.woff') format('woff'),
url('../fonts/minecraft.ttf') format('truetype'),
url('../fonts/minecraft.svg#minecraft') format('svg');
}
body, h1, h2, h3, h4, h5, h6, .logo {
font-family: $font_stack !important;
}
.swal2-modal, .swal2-content {
font-family: $font_stack;
font-weight: 400;
}
.swal2-modal h2 {
font-size: 25px;
}
/* fucking webkit autofill */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}
#page-select {
padding-left: 0;
margin: 0 20px 0 0;
border-radius: 4px;
padding: 5.5px 14px;
}
.item {
display: block;
background: #EFF1F0;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 2px;
float: left;
position: relative;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
width: 210px;
height: 196px;
-webkit-transition: box-shadow 0.1s ease-in-out 0s;
-moz-transition: box-shadow 0.1s ease-in-out 0s;
-o-transition: box-shadow 0.1s ease-in-out 0s;
-ms-transition: box-shadow 0.1s ease-in-out 0s;
transition: box-shadow 0.1s ease-in-out 0s;
}
.item-body {
height: 166px;
img {
max-width: 100%;
margin-left: 30px;
margin-top: 16px;
width: 150px;
}
}
@media (max-width: 756px) {
.item {
width: 45%;
margin-right: 5%;
}
.item-body > img {
margin-left: 25%;
}
.texture-name {
width: 65%;
}
}
@media (max-width: 520px) {
.item {
width: 100%;
}
.item-body > img {
margin-left: 30%;
}
.texture-name {
width: 80%;
}
}
.texture-name {
width: 65%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.item-selected {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.item-footer {
background: #50b3ec;
color: #fff;
font-size: 16px;
height: 30px;
padding: 3px 8px;
.more {
float: right;
margin-left: 6px;
margin-right: 3px;
color: #fff;
}
.more:hover {
color: #dadada;
}
small {
font-size: 50%;
}
}
.operations {
display: inline; float: right;
i {
padding: .5em .5em;
display: inline !important;
}
i:hover {
color: #555;
cursor: pointer;
}
}
.skin2d {
float: right;
max-height: 64px;
width: 64px;
font-size: 16px;
}
#canvas3d {
margin: 0 auto;
display: block;
}
#preview-2d > p {
height: 64px;
line-height: 64px;
}
#toast-container > div {
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
}
.captcha {
cursor: pointer;
}
.box-footer > p {
margin: 6px 15px 5px 0;
}