1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 22:10:55 +01:00
phorge-phorge/webroot/rsrc/css/application/pholio/pholio.css
Chad Little 7aeefc0cca Add an Experimental Dark Mode to Phabricator
Summary: Mostly this is an exercise to clean up our CSS and Celerity processor by making sure all important color decisions are generatable. It's somewhat resonable to use if you don't review code. Posting it up here mostly so I don't lose the work.

Test Plan: Visit lots and lots of pages with dark mode on and off.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D18227
2017-07-18 06:44:32 -07:00

263 lines
5.1 KiB
CSS

/**
* @provides pholio-css
*/
.pholio-mock-image-container {
text-align: center;
vertical-align: middle;
position: relative;
background: url('/rsrc/image/checker_lighter.png');
}
.pholio-mock-thumb-grid-container {
padding: 12px;
overflow-x: auto;
overflow-y: hidden;
}
.pholio-mock-thumb-grid {
margin: 0 auto;
}
.pholio-mock-thumb-grid-item {
display: inline-block;
cursor: pointer;
width: 100px;
height: 100px;
padding: 4px;
margin: 4px;
vertical-align: middle;
border: 1px solid {$lightgreyborder};
position: relative;
background: url('/rsrc/image/checker_lighter.png');
}
.device-desktop .pholio-mock-thumb-grid-item:hover {
border-color: {$pink};
}
.pholio-mock-thumb-grid-current {
border-color: {$sky};
}
.pholio-mock-thumb-grid-item-obsolete {
opacity: 0.5;
}
.pholio-mock-thumb-grid-image {
margin: auto;
position: relative;
}
.pholio-mock-image {
margin: auto;
cursor: crosshair;
}
.pholio-mock-image-viewport {
position: relative;
margin: auto;
display: inline-block;
}
.pholio-image-loading img {
opacity: 0.50;
}
.pholio-image-info-item {
padding: 0 8px;
margin: 8px 0;
}
.pholio-visible-size {
color: {$sky};
font-weight: bold;
}
.pholio-device-lightbox {
position: absolute;
overflow: auto;
}
.pholio-device-lightbox img {
display: block;
margin: auto;
}
.pholio-device-lightbox-loading {
background: url(/rsrc/image/darkload.gif) no-repeat center;
}
.device-desktop .pholio-transaction-inline-image-anchor:hover .phui-image-mask {
border-color: {$pink};
}
.pholio-transaction-inline-comment {
display: table-row;
}
.pholio-transaction-inline-comment img {
display: table-cell;
padding-bottom: 2px;
}
.pholio-transaction-inline-comment .transaction-comment {
display: table-cell;
vertical-align: top;
padding-left: 8px;
padding-top: 4px;
}
.pholio-mock-reticle {
position: absolute;
display: none;
box-sizing: border-box;
border: 4px solid transparent;
}
.pholio-mock-reticle-selection {
border: 1px solid rgba({$alphablack},.5);
box-shadow: 0 0 0 4px rgba({$alphawhite},.5);
}
.pholio-mock-comment-icon {
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.pholio-mock-reticle-draft .pholio-mock-comment-icon {
font-size: 2.2em;
color: {$yellow};
text-shadow: 0 3px 8px rgba({$alphablack}, 0.35);
-webkit-text-stroke: 1px white;
}
.pholio-mock-reticle-final .pholio-mock-comment-icon {
font-size: 2.2em;
color: {$pink};
text-shadow: 0 3px 8px rgba({$alphablack}, 0.35);
-webkit-text-stroke: 1px white;
}
.pholio-mock-reticle-draft:hover,
.pholio-mock-reticle-final:hover {
border: 1px solid rgba({$alphablack},.5);
box-shadow: 0 0 0 4px rgba({$alphawhite},.5);
cursor: pointer;
}
.device-desktop .pholio-mock-reticle-draft:hover .pholio-mock-comment-icon,
.device-desktop .pholio-mock-reticle-final:hover .pholio-mock-comment-icon {
opacity: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.device-desktop .mock-has-cursor .pholio-mock-reticle {
display: block;
}
.pholio-mock-image-header {
position: absolute;
top: 0;
right: 0;
font-size: 14px;
padding: 4px 8px;
background: rgba({$alphawhite},.6);
color: {$greytext};
}
.pholio-image-title {
font-weight: bold;
color: {$bluetext};
font-size: 15px;
}
.mock-image-description {
background: {$page.content};
border-top: 1px solid {$thinblueborder};
text-align: left;
}
.pholio-mock-thumb-grid-comment-count {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 17px;
font-weight: bold;
text-align: center;
line-height: 16px;
border-radius: 2px;
color: #fff;
text-decoration: none;
background: {$pink};
}
.pholio-image-button {
float: right;
margin-left: 2px;
}
.pholio-image-button-link {
width: 56px;
height: 56px;
overflow: hidden;
display: block;
position: relative;
background: {$lightgreybackground};
text-align: center;
line-height: 56px;
font-size: 24px;
}
button.pholio-image-button-link,
button.pholio-image-button-link:active {
/* Remove button styles. */
box-shadow: none;
text-shadow: none;
border: none;
border-radius: 0;
}
.pholio-image-button-active .pholio-image-button-link .phui-icon-view {
color: {$lightgreytext};
}
.pholio-image-button-disabled .pholio-image-button-link .phui-icon-view {
color: {$darkgreybackground};
}
.device-desktop .pholio-image-button-active .pholio-image-button-link:hover {
background: {$darkgreybackground};
}
.device-desktop .pholio-image-button-active
.pholio-image-button-link:hover .phui-icon-view {
color: {$sky};
}
.pholio-image-description {
padding: 12px 8px;
border-top: 1px solid {$thinblueborder};
}
.pholio-image-revision {
color: {$bluetext};
}
.pholio-history-header {
vertical-align: middle;
color: {$lightbluetext};
font-weight: bold;
padding-right: 8px;
-webkit-font-smoothing: antialiased;
white-space: nowrap;
}