mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 17:02:41 +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
314 lines
6.5 KiB
CSS
314 lines
6.5 KiB
CSS
/**
|
|
* @provides phui-list-view-css
|
|
*/
|
|
|
|
.phui-list-item-view {
|
|
position: relative;
|
|
}
|
|
|
|
.phui-list-item-header,
|
|
.phui-list-item-header a {
|
|
color: {$bluetext};
|
|
font-weight: bold;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* - Sidenav and Actions -------------------------------------------------------
|
|
|
|
Sidebar and Action Menus
|
|
|
|
*/
|
|
|
|
.phui-list-sidenav {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-type-label .phui-list-item-name {
|
|
font-weight: bold;
|
|
color: {$bluetext};
|
|
padding: 4px 8px 6px 8px;
|
|
display: block;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-type-divider {
|
|
margin: 8px 8px 12px 8px;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-icon {
|
|
height: 14px;
|
|
width: 14px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-icon + .phui-list-item-name {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-icon {
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-view {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-href {
|
|
display: block;
|
|
padding: 4px 16px;
|
|
clear: both;
|
|
color: {$darkgreytext};
|
|
line-height: 18px;
|
|
}
|
|
|
|
.phabricator-side-menu .phui-list-item-disabled .phui-list-item-href,
|
|
.phui-list-sidenav .phui-list-item-disabled .phui-list-item-href {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-href {
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-indented {
|
|
padding-left: 18px;
|
|
}
|
|
|
|
|
|
.device-desktop .phui-list-sidenav .phui-list-item-href:hover {
|
|
background: {$sky};
|
|
color: white;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.device-desktop .phui-list-sidenav .phui-list-item-href:hover .phui-icon-view {
|
|
color: {$page.content};
|
|
}
|
|
|
|
/* - Top, Full Width Navigations -----------------------------------------------
|
|
|
|
Sets a page or box with a top navbar
|
|
|
|
*/
|
|
|
|
.phui-list-view.phui-list-navbar {
|
|
list-style: none;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-view.phui-list-navbar > li {
|
|
list-style: none;
|
|
float: left;
|
|
display: block;
|
|
border-right: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-view.phui-list-navbar > li > * {
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-href {
|
|
color: {$bluetext};
|
|
padding: 8px 16px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-selected .phui-list-item-href {
|
|
background: {$lightbluebackground};
|
|
color: {$darkbluetext};
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-href:hover {
|
|
background: rgba(100,100,100,.1);
|
|
color: {$darkgreytext};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-icon {
|
|
height: 14px;
|
|
width: 14px;
|
|
display: block;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.device-phone .phui-list-view.phui-list-navbar > li {
|
|
float: none;
|
|
border: none;
|
|
}
|
|
|
|
/* - Two Column View, Responsive Navigations -----------------------------------
|
|
|
|
Sets a two column page with a responsive, top navbar
|
|
|
|
*/
|
|
|
|
.phui-list-view.phui-list-tabbar {
|
|
list-style: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phui-list-view.phui-list-tabbar > li {
|
|
list-style: none;
|
|
float: left;
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-view.phui-list-tabbar > li > * {
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-href {
|
|
color: {$bluetext};
|
|
padding: 8px 24px;
|
|
line-height: 24px;
|
|
font-weight: bold;
|
|
font-size: {$biggerfontsize};
|
|
border-top: 4px solid transparent;
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href {
|
|
color: {$sky};
|
|
border-bottom: 4px solid {$sky};
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href
|
|
.phui-icon-view {
|
|
color: {$sky};
|
|
}
|
|
|
|
.device-desktop .phui-list-tabbar .phui-list-item-href:hover {
|
|
color: {$sky};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-icon {
|
|
height: 20px;
|
|
width: 20px;
|
|
display: none;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.device-phone .phui-list-tabbar .phui-list-item-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.device-phone .phui-list-tabbar .phui-list-item-name {
|
|
display: none;
|
|
}
|
|
|
|
.device-phone .phui-list-tabbar .phui-list-item-href {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.device-phone .phui-list-view.phui-list-navbar > li {
|
|
float: none;
|
|
border: none;
|
|
}
|
|
|
|
/* - Status Colors -------------------------------------------------------------
|
|
|
|
Colors for navbars
|
|
|
|
*/
|
|
|
|
.phui-list-item-warn .phui-list-item-href {
|
|
color: #bc7837;
|
|
}
|
|
|
|
.phui-list-item-fail .phui-list-item-href {
|
|
color: {$red};
|
|
}
|
|
|
|
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href,
|
|
.phui-list-item-warn .phui-list-item-href:hover {
|
|
background: {$lightyellow};
|
|
color: #bc7837;
|
|
}
|
|
|
|
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href,
|
|
.phui-list-item-fail .phui-list-item-href:hover {
|
|
background: {$lightred};
|
|
color: {$red};
|
|
}
|
|
|
|
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover {
|
|
background: #fcf0bd;
|
|
}
|
|
|
|
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover {
|
|
background: #f5d3d0;
|
|
}
|
|
|
|
/* - Dashboards ------------------------------------------------------------ */
|
|
|
|
.dashboard-panel .phui-list-view.phui-list-navbar {
|
|
border-left: 1px solid {$lightblueborder};
|
|
border-right: 1px solid {$lightblueborder};
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
/* - Info Stack ------------------------------------------------------------ */
|
|
|
|
.phui-info-view + .phui-list-view {
|
|
margin-top: 16px;
|
|
border-top: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
/* - Action Icon ----------------------------------------------------------- */
|
|
|
|
.phui-list-item-has-action-icon .phui-list-item-action-href {
|
|
position: absolute;
|
|
width: 28px;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
background-color: transparent;
|
|
display: none;
|
|
}
|
|
|
|
.phui-list-item-has-action-icon.phui-list-item-selected .phui-list-item-href {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phui-list-item-has-action-icon.phui-list-item-selected
|
|
.phui-list-item-action-href {
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-item-has-action-icon .phui-list-item-action-href:hover {
|
|
background-color: rgba({$alphablack},.05);
|
|
}
|
|
|
|
.phui-list-item-has-action-icon .phui-list-item-action-icon {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.phui-list-item-has-action-icon .phui-list-item-action-href:hover
|
|
.phui-list-item-action-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* - Item Counts ----------------------------------------------------------- */
|
|
|
|
.phui-list-item-count {
|
|
position: absolute;
|
|
right: 7px;
|
|
top: 7px;
|
|
background: {$blue};
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
padding: 0 5px 1px;
|
|
font-size: {$smallestfontsize};
|
|
}
|