pixsy/includes/style.less

133 lines
1.8 KiB
Plaintext

@background: #fff4d9;
@text: #ec6d7d;
@accent: #a3c4ef;
* {
box-sizing: border-box;
color: @text;
margin: 0 auto 0.5em auto;
text-align: center;
}
html, body {
background-color: @background;
font-size: 3vmin;
margin: 0;
padding: 0;
}
button {
padding: 1em;
white-space: nowrap;
width: 100%;
&.pagination:not(.normal) {
position: absolute;
bottom: 5vmin;
width: auto;
&.prev {
left: 5vmin;
}
&.next, &.start {
right: 5vmin;
}
}
}
h1 {
margin: 0;
}
h3 {
font-size: 0.9em;
}
input {
width: 100%;
text-align: left;
&[type="checkbox"] {
width: auto;
margin-right: 1em;
position: relative;
top: 0.25em;
left: 0.25em;
}
}
img {
max-width: 100%;
margin: 0;
}
p {
font-size: 0.8em;
margin: 0 auto 1em auto;
}
label {
font-size: 0.75em;
font-weight: bold;
}
select {
width: 100%;
}
textarea {
height: 15em;
padding: 0.5em;
text-align: left;
width: 100%;
}
.background {
background-color: @background;
padding: 0.5em;
border-radius: 0.5em;
}
.checkboxes label {
margin-right: 1em;
}
.cropper-tools {
margin-top: 0;
}
.half {
display: inline-block;
text-align: left;
width: 50%;
}
.image-container {
height: 46vh;
text-align: left;
}
.page {
height: 80vmin;
width: 80vmin;
background-color: @background;
border: 2px solid @accent;
border-radius: 5vmin;
box-shadow: @accent 1vmin 1vmin;
padding: 5vmin;
position: relative;
}
#crop canvas {
height: 32vh;
}
#preview {
width: 256px;
height: 256px;
image-rendering: pixelated;
image-rendering: crisp-edges;
}