mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-11 08:06:13 +01:00
fe7e288cf5
Summary:
Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications:
- Ponder
- Paste
- Slowvote
- Countdown
- Projects
- Profile
- Passphrase
This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages.
Test Plan:
Test each of the applications on mobile, tablet, and desktop breakpoints.
{F1135705}
{F1135706}
{F1135707}
{F1135708}
{F1135709}
{F1135710}
{F1135711}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15366
121 lines
2 KiB
CSS
121 lines
2 KiB
CSS
/**
|
|
* @provides phabricator-slowvote-css
|
|
*/
|
|
|
|
.slowvote-description {
|
|
padding: 12px 16px 4px;
|
|
}
|
|
|
|
.slowvote-header-content {
|
|
padding: 8px;
|
|
}
|
|
|
|
.slowvote-body-content {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.slowvote-option-label {
|
|
border: 1px solid {$sh-lightgreyborder};
|
|
display: block;
|
|
position: relative;
|
|
padding: 8px 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
background-color: {$lightgreybackground};
|
|
}
|
|
|
|
.device-desktop .slowvote-option-label:hover {
|
|
border-color: {$sh-blueborder};
|
|
}
|
|
|
|
.slowvote-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
background-color: {$sh-bluebackground};
|
|
}
|
|
|
|
.device-phone .slowvote-bar {
|
|
display: none;
|
|
}
|
|
|
|
.slowvote-control-offset {
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 32px;
|
|
top: 8px;
|
|
width: 100%;
|
|
color: {$darkbluetext};
|
|
text-shadow: {$whitetextshadow};
|
|
}
|
|
|
|
.device-phone .slowvote-control-offset {
|
|
white-space: normal;
|
|
position: static;
|
|
padding: 0 4px 8px;
|
|
}
|
|
|
|
.slowvote-option-label-group {
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.slowvote-option-label input[type="radio"],
|
|
.slowvote-option-label input[type="checkbox"] {
|
|
margin: 0 12px 0 8px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.slowvote-above-the-bar {
|
|
position: relative;
|
|
}
|
|
|
|
.slowvote-status {
|
|
color: {$darkbluetext};
|
|
font-weight: normal;
|
|
padding: 2px 0;
|
|
line-height: 15px;
|
|
text-align: right;
|
|
font-size: {$smallerfontsize};
|
|
top: 0;
|
|
right: 8px;
|
|
position: absolute;
|
|
text-shadow: {$whitetextshadow};
|
|
}
|
|
|
|
.slowvote-voters {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.slowvote-voter {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
background-size: 25px 25px;
|
|
border-radius: 3px;
|
|
margin: 0 4px;
|
|
box-shadow: {$borderinset};
|
|
}
|
|
|
|
.slowvote-footer {
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
border-top-color: {$thinblueborder};
|
|
position: relative;
|
|
}
|
|
|
|
.slowvote-footer-content {
|
|
padding: 8px 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slowvote-footer-content .slowvote-hint {
|
|
line-height: 24px;
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.slowvote-footer-content button {
|
|
float: right;
|
|
}
|