mirror of
https://we.phorge.it/source/phorge.git
synced 2025-02-01 01:18:22 +01:00
26f8e76ee2
Summary:
Currently, if an image is too wide for the viewport, we freak out. Instead, scale it down.
This means we must also scale down all the rectangles on it, which is why this is tricky. However, all the draw/load separation has made it reasonably straightforward.
We'll possibly need to add some kind of "view full size" thing. I'm planning to add an element which shows "85%" or whatever if it's currently scaled.
Test Plan:
Before:
{F33607}
After:
{F33608}
Reviewers: chad, ljalonen
Reviewed By: chad
CC: aran
Differential Revision: https://secure.phabricator.com/D5088
104 lines
1.7 KiB
CSS
104 lines
1.7 KiB
CSS
/**
|
|
* @provides pholio-css
|
|
*/
|
|
.pholio-mock-image-container {
|
|
background-color: #282828;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
}
|
|
|
|
.pholio-mock-carousel {
|
|
background-color: #202020;
|
|
text-align: center;
|
|
border-top: 1px solid #101010;
|
|
}
|
|
|
|
.pholio-mock-carousel-thumb-item {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
width: 140px;
|
|
height: 140px;
|
|
padding: 5px;
|
|
margin: 3px;
|
|
background: #282828;
|
|
vertical-align: middle;
|
|
border: 1px solid #383838;
|
|
position: relative;
|
|
}
|
|
|
|
.device-desktop .pholio-mock-carousel-thumb-item:hover {
|
|
background: #383838;
|
|
border-color: #686868;
|
|
}
|
|
|
|
.pholio-mock-carousel-thumbnail {
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.pholio-mock-image {
|
|
margin: auto;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.pholio-mock-select-border {
|
|
position: absolute;
|
|
background: #ffffff;
|
|
opacity: 0.25;
|
|
box-sizing: border-box;
|
|
border: 1px solid #000000;
|
|
}
|
|
|
|
.pholio-mock-select-fill {
|
|
position: absolute;
|
|
border: 1px dashed #ffffff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pholio-mock-image-panel {
|
|
padding: 20px;
|
|
margin-right: 320px;
|
|
}
|
|
|
|
.pholio-mock-image-viewport {
|
|
position: relative;
|
|
margin: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pholio-mock-inline-comments {
|
|
width: 320px;
|
|
border-left: 1px solid #101010;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow-x: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.pholio-inline-comment {
|
|
border: 1px solid #aa8;
|
|
background: #f9f9f1;
|
|
margin: 2px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.pholio-inline-comment-header {
|
|
border-bottom: 1px solid #cca;
|
|
color: #333;
|
|
font-weight: bold;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pholio-mock-inline-comment-highlight {
|
|
background-color: #F0B160;
|
|
}
|
|
|
|
.pholio-inline-head-links a {
|
|
font-weight: normal;
|
|
margin-left: 5px;
|
|
}
|
|
|