mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-26 08:42:41 +01:00
840a7fab2b
Summary: In edit mode, Archived Panels are shown differently, with content text in grey and with the usual red tag. In view mode, Archived Panels are just not rendered. This makes it easier to design Dashboards with individual components that can be de-activated and re-activated on the fly. Closes T15366. {F325637} Test Plan: Have a Dashboard somewhere (e.g in your homepage). Visit a Panel (W-ID) and Archive it. See that now the Panel is not shown anymore on the Dashboard. Edit the Dashboard and you see the Panel again as "Archived". Anything around is just normal. Reviewers: O1 Blessed Committers, avivey Reviewed By: O1 Blessed Committers, avivey Subscribers: avivey, speck, tobiaswiese, Matthew, Cigaryno Maniphest Tasks: T15366 Differential Revision: https://we.phorge.it/D25368
354 lines
7.3 KiB
CSS
354 lines
7.3 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;
|
|
}
|
|
|
|
.phabricator-side-menu .phui-list-item-has-icon .phui-list-item-indented {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.phui-list-view.phui-list-navbar-horizontal {
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-view.phui-list-navbar > li {
|
|
list-style: none;
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-view.phui-list-navbar-horizontal > li {
|
|
float: left;
|
|
border-right: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-href {
|
|
color: {$bluetext};
|
|
line-height: 16px;
|
|
}
|
|
|
|
.phui-list-navbar-horizontal .phui-list-item-href {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.phui-list-navbar-vertical .phui-list-item-href {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.phui-list-navbar-vertical {
|
|
box-shadow: 0 1px 0 rgba({$alphablue}, 0.05);
|
|
}
|
|
|
|
.phui-list-navbar-vertical .phui-list-item-href {
|
|
display: block;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-selected .phui-list-item-href {
|
|
background: {$lightbluebackground};
|
|
color: {$darkbluetext};
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phui-tab-group-view-tab-column {
|
|
width: 220px;
|
|
border-right: 1px solid {$thinblueborder};
|
|
background: {$lightgreybackground};
|
|
}
|
|
|
|
.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;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phui-list-navbar-vertical .phui-list-item-icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.phui-list-navbar-horizontal .phui-list-item-icon {
|
|
display: block;
|
|
}
|
|
|
|
.device-phone .phui-list-view.phui-list-navbar-horizontal > 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};
|
|
}
|
|
|
|
.dashboard-panel-disabled {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
/* - Info Stack ------------------------------------------------------------ */
|
|
|
|
.phui-info-view + .phui-list-view {
|
|
margin-top: 16px;
|
|
border-top: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
/* - Action Icon ----------------------------------------------------------- */
|
|
|
|
.phabricator-nav-local .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;
|
|
}
|
|
|
|
.phabricator-nav-local .phui-list-item-has-action-icon.phui-list-item-selected
|
|
.phui-list-item-href {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phabricator-nav-local .phui-list-item-has-action-icon.phui-list-item-selected
|
|
.phui-list-item-action-href {
|
|
display: block;
|
|
}
|
|
|
|
.phabricator-nav-local .phui-list-item-has-action-icon
|
|
.phui-list-item-action-href:hover {
|
|
background-color: rgba({$alphablack},.05);
|
|
}
|
|
|
|
.phabricator-nav-local .phui-list-item-has-action-icon
|
|
.phui-list-item-action-icon {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.phabricator-nav-local .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};
|
|
}
|