mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 17:28:51 +02:00
5a7d9fb522
Summary: Fixes T2643. Show a loading state (currently just making the image transparent, but we could do something fancier) when an image is loading. Fixes T2648. Cleans up the double draws we were previously doing. Makes thumbnails react to mousedown in addition to click so they feel a little snappier. Make them stop reacting to control click, command click, etc. Test Plan: Used `setTimeout()` to simulate a 1s image load delay, switched between images. Reviewers: chad Reviewed By: chad CC: aran Maniphest Tasks: T2643, T2648 Differential Revision: https://secure.phabricator.com/D5219
90 lines
1.6 KiB
CSS
90 lines
1.6 KiB
CSS
/**
|
|
* @provides pholio-css
|
|
*/
|
|
.pholio-mock-image-container {
|
|
background-color: #282828;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
background: url('/rsrc/image/texture/pholio-background.gif');
|
|
}
|
|
|
|
.pholio-mock-carousel {
|
|
background-color: #282828;
|
|
text-align: center;
|
|
border-top: 1px solid #101010;
|
|
margin-right: 320px;
|
|
}
|
|
|
|
.pholio-mock-carousel-thumb-item {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
width: 140px;
|
|
height: 140px;
|
|
padding: 5px;
|
|
margin: 3px;
|
|
background: #181818;
|
|
vertical-align: middle;
|
|
border: 1px solid #383838;
|
|
position: relative;
|
|
}
|
|
|
|
.device-desktop .pholio-mock-carousel-thumb-item:hover,
|
|
.pholio-mock-carousel-thumb-current {
|
|
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: 319px;
|
|
border-top: 1px solid #333;
|
|
border-right: 1px solid #333;
|
|
}
|
|
|
|
.pholio-mock-image-viewport {
|
|
position: relative;
|
|
margin: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pholio-inline-comment-header {
|
|
color: #fff;
|
|
border-bottom: 1px solid #555;
|
|
font-weight: bold;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pholio-mock-inline-comment-highlight {
|
|
background-color: #222;
|
|
border-color: #555;
|
|
}
|
|
|
|
.pholio-image-loading img {
|
|
opacity: 0.50;
|
|
}
|