Public/pics
2
2
Fork 2
Code Issues 5 Pull Requests Releases Wiki Activity

Merge pull request 'Make crop editor usable' (#22) from crop-editor into master

Browse Source 
Reviewed-on: #22
This commit was merged in pull request #22.
This commit is contained in:
Aaron van Geffen
2020-12-30 20:06:15 +01:00
parent 71b71f8a03 c72e24c0c7
commit d069ddca18
7 changed files with 461 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/css/admin.css
View File

@@ -145,46 +145,55 @@ body {
/* Crop editor
----------------*/
#crop_editor {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000;
background: rgba(0, 0, 0, 0.8);
z-index: 100;
color: #fff;
}
#crop_editor input {
#crop_editor input[type=number] {
width: 50px;
background: #555;
color: #fff;
}
.crop_image_container {
position: relative;
#crop_editor input[type=checkbox] {
vertical-align: middle;
}
.crop_position {
background: rgba(0, 0, 0, 1.0);
border: none;
padding: 5px;
text-align: center;
}
.crop_position input, .crop_position .btn {
margin: 0 5px;
}
.crop_image_container {
position: relative;
flex-grow: 1;
max-height: calc(100% - 34px);
}
.crop_image_container img {
height: auto;
width: auto;
border: 1px solid #000;
max-height: 100%;
max-width: 100%;
max-height: 700px;
}
#crop_boundary {
border: 1px solid rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.75);
border: 1px dashed rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.4);
cursor: move;
position: absolute;
z-index: 200;
width: 500px;
height: 300px;
top: 400px;
left: 300px;
filter: invert(100%); /* temp */
}

61
public/css/default.css
View File

@@ -375,34 +375,59 @@ footer a {
input, select, .btn {
background: #fff;
border: 1px solid #ccc;
border: 1px solid #dbdbdb;
border-radius: 4px;
color: #000;
font: 13px/1.7 "Open Sans", "Helvetica", sans-serif;
padding: 3px;
}
input[type=submit], button, .btn {
background: #ddd;
border-radius: 3px;
border: 1px solid #aaa;
display: inline-block;
font: inherit;
padding: 4px 5px;
}
input[type=submit]:hover, button:hover, .btn:hover {
background-color: #d0d0d0;
border-color: #a0a0a0;
}
textarea {
border: 1px solid #ccc;
font: 12px/1.4 'Monaco', 'Inconsolata', 'DejaVu Sans Mono', monospace;
border: 1px solid #dbdbdb;
border-radius: 4px;
font: 14px/1.4 'Inconsolata', 'DejaVu Sans Mono', monospace;
padding: 0.75%;
width: 98.5%;
}
input[type=submit], button, .btn {
background-color: #eee;
border-color: #dbdbdb;
border-width: 1px;
border-radius: 4px;
color: #363636;
cursor: pointer;
display: inline-block;
justify-content: center;
padding-bottom: calc(0.4em - 1px);
padding-left: 0.8em;
padding-right: 0.8em;
padding-top: calc(0.4em - 1px);
text-align: center;
white-space: nowrap;
}
input:hover, select:hover, button:hover, .btn:hover {
border-color: #b5b5b5;
}
input:focus, select:focus, button:focus, .btn:focus {
border-color: #3273dc;
}
input:focus:not(:active), select:focus:not(:active), button:focus:not(:active), .btn:focus:not(:active) {
box-shadow: 0px 0px 0px 2px rgba(50, 115, 220, 0.25);
}
input:active, select:active, button:active, .btn:active {
border-color: #4a4a4a;
}
.btn-red {
background: #F3B076;
border-color: #C98245;
background: #eebbaa;
border-color: #cc9988;
}
.btn-red:hover, .btn-red:focus {
border-color: #bb7766;
color: #000;
}
.btn-red:focus:not(:active) {
box-shadow: 0px 0px 0px 2px rgba(241, 70, 104, 0.25);
}
/* Login box styles