mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-27 01:02:42 +01:00
7aeefc0cca
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
194 lines
4.5 KiB
CSS
194 lines
4.5 KiB
CSS
/**
|
|
* @provides phabricator-action-list-view-css
|
|
*/
|
|
|
|
.device .phabricator-action-list-view {
|
|
padding: 4px 0;
|
|
display: none;
|
|
}
|
|
|
|
.device .phuix-dropdown-menu .phabricator-action-list-view {
|
|
/* When an action list view appears inside a dropdown menu, don't hide it
|
|
by default. */
|
|
display: block;
|
|
padding: 0;
|
|
}
|
|
|
|
.device .phabricator-action-list-view.phabricator-action-list-toggle,
|
|
.device-desktop .phui-document-content
|
|
.phabricator-action-list-view.phabricator-action-list-toggle {
|
|
display: block;
|
|
width: 200px;
|
|
border: 1px solid {$lightgreyborder};
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 42px;
|
|
background: #fff;
|
|
box-shadow: {$dropshadow};
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.device-phone .phabricator-action-list-view.phabricator-action-list-toggle {
|
|
right: 8px;
|
|
top: 38px;
|
|
}
|
|
|
|
.phabricator-action-view {
|
|
position: relative;
|
|
}
|
|
|
|
.phabricator-action-view button.phabricator-action-view-item {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
outline: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
width: 100%;
|
|
text-align: left;
|
|
text-shadow: none;
|
|
|
|
border-radius: 0;
|
|
color: {$anchor};
|
|
font: inherit;
|
|
display: inline;
|
|
min-width: 0;
|
|
}
|
|
|
|
.phabricator-action-view button.phabricator-action-view-item .phui-icon-view {
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.phabricator-action-view button.phabricator-action-view-item,
|
|
.phabricator-action-view-item {
|
|
padding: 4px 8px 6px 8px;
|
|
display: block;
|
|
text-decoration: none;
|
|
color: {$darkbluetext};
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.action-has-icon button.phabricator-action-view-item,
|
|
.action-has-icon .phabricator-action-view-item {
|
|
padding: 4px 4px 4px 28px;
|
|
}
|
|
|
|
.device-desktop .phabricator-action-view-href:hover
|
|
.phabricator-action-view-item {
|
|
text-decoration: none;
|
|
background: rgba({$alphablue}, .08);
|
|
color: {$sky};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.device-desktop .phabricator-action-view-href:hover
|
|
.phabricator-action-view-icon {
|
|
color: {$sky};
|
|
}
|
|
|
|
.device-desktop .phabricator-action-view-href.action-item-red:hover
|
|
.phabricator-action-view-item {
|
|
background-color: {$sh-redbackground};
|
|
color: {$sh-redtext};
|
|
}
|
|
|
|
.device-desktop .phabricator-action-view-href.action-item-red:hover
|
|
.phabricator-action-view-icon {
|
|
color: {$red};
|
|
}
|
|
|
|
.phabricator-action-view-label .phabricator-action-view-item,
|
|
.phabricator-action-view-type-label .phabricator-action-view-item {
|
|
font-size: {$smallerfontsize};
|
|
font-weight: bold;
|
|
color: {$bluetext};
|
|
padding: 4px 8px 6px 8px;
|
|
display: block;
|
|
text-transform: uppercase;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.device-desktop li.phabricator-action-view-label:hover
|
|
.phabricator-action-view-item {
|
|
background-color: {$page.content};
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.phabricator-action-view + .phabricator-action-view-label {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.phabricator-action-view-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
position: absolute;
|
|
top: 7px;
|
|
left: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phabricator-action-view-disabled .phabricator-action-view-item,
|
|
.phabricator-action-view-disabled button.phabricator-action-view-item {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phabricator-action-view-selected {
|
|
background: {$sh-violetbackground};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.phabricator-action-view-selected:hover a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phabricator-action-view button[disabled] {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.device-desktop .phabricator-action-view-disabled:hover
|
|
.phabricator-action-view-item,
|
|
.device-desktop .phabricator-action-view-disabled:hover
|
|
button.phabricator-action-view-item,
|
|
.device-desktop .phabricator-action-view-disabled:hover
|
|
.phabricator-action-view-icon,
|
|
.device-desktop .phabricator-action-view-disabled:hover
|
|
button.phabricator-action-view-icon {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phabricator-action-view-type-divider {
|
|
margin-top: 8px;
|
|
border-top: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
/******* Sub Menu *************************************************************/
|
|
|
|
.phabricator-action-view-submenu .caret-right {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
border-left-color: {$alphablue};
|
|
}
|
|
|
|
.phabricator-action-view-submenu .caret {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 8px;
|
|
border-top: 7px solid {$lightgreytext};
|
|
}
|
|
|
|
.phabricator-action-list-view .phabricator-action-view-submenu.phui-submenu-open
|
|
.phabricator-action-view-item {
|
|
background-color: rgba({$alphablue}, 0.07);
|
|
color: {$sky};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.phabricator-action-list-view .phabricator-action-view-submenu.phui-submenu-open
|
|
.phabricator-action-view-item .phui-icon-view {
|
|
color: {$sky};
|
|
}
|