HomePhorge
Diffusion Phorge (HEAD -> master) Code

phorge/webroot/rsrc/css/phui/workboards/phui-workpanel.css
f3d49f740737HEAD -> master

Last Change
Raw File

phui-workpanel.css
View Options

/**
* @provides phui-workpanel-view-css
* @requires phui-workcard-view-css
*/
.phui-workpanel-view .phui-header-shell {
padding: 8px;
width: 284px;
}
.phui-workpanel-view .phui-header-shell .phui-header-header {
font-size: {$biggerfontsize};
line-height: 18px;
color: {$darkbluetext};
}
.phui-workpanel-view .phui-header-shell .phui-header-subheader {
padding: 0 4px;
margin: 0;
display: inline-block;
color: {$lightgreytext};
font-size: {$normalfontsize};
}
.device .phui-workpanel-view .phui-header-shell {
width: auto;
}
.phui-workboard-view {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.phui-workpanel-view .phui-box-grey {
background-color: rgba({$alphablue},0.1);
}
.phui-workpanel-view.phui-workboard-column-milestone .phui-box-grey {
background-color: rgba(234, 230, 247, 0.85);
}
.phui-workpanel-view .phui-header-col2 .phui-icon-view {
margin-right: 4px;
}
.phui-workpanel-view .phui-workpanel-header-action {
float: right;
width: 24px;
}
.phui-workpanel-view .phui-workpanel-body {
padding: 8px 4px 8px 0;
}
.phui-workpanel-view .phui-workpanel-body-content {
padding: 0 4px 0 8px;
}
.device .phui-workpanel-view .phui-workpanel-body {
padding: 8px 0;
}
.phui-workpanel-view .phui-workpanel-footer-action a {
color: {$darkbluetext};
font-weight: bold;
}
.device-desktop .phui-workpanel-view .phui-workpanel-footer-action:hover {
background-color: rgba(100,100,100,.1);
border-radius: 3px;
}
.device-desktop .aphront-multi-column-fixed .phui-workpanel-view {
width: 300px;
}
.device-phone .aphront-multi-column-fixed .phui-workpanel-view,
.device-phone .phui-workpanel-view .phui-header-shell {
width: auto;
}
.phui-workpanel-body .phui-oi-list-view {
min-height: 54px;
background-color: transparent;
}
.device .aphront-multi-column-outer
div.aphront-multi-column-column-outer .phui-workpanel-body {
width: auto;
}
.project-panel-hidden {
opacity: 0.75;
}
.device-desktop .phui-workpanel-body-content {
scrollbar-width: thin;
max-height: calc(100vh - 162px);
overflow-y: auto;
overflow-x: hidden;
}
/* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */
/* (Use the same selector as above for consistent behavior on Chrome/Firefox) */
.device-desktop .phui-workpanel-body-content::-webkit-scrollbar {
height: 8px;
width: 8px;
background: rgba({$alphablue},0.2);
border-radius: 4px;
}
.device-desktop .phui-workpanel-body-content::-webkit-scrollbar-thumb {
background: rgba({$alphablue},0.4);
border-radius: 4px;
}
.project-panel-empty .phui-oi-list-view {
background: rgba(234, 230, 247, 0.85);
border-radius: 3px;
margin-bottom: 4px;
border: 1px dashed {$sh-indigoborder};
}
.project-panel-empty .phui-oi-list-view .drag-ghost {
display: none;
}
.project-panel-empty .phui-oi-list-view.drag-target-list {
background: rgba({$alphawhite},.7);
}
.phui-workpanel-view.project-panel-over-limit .phui-header-header {
color: {$red};
}
.phui-workpanel-view.project-panel-over-limit .phui-header-shell {
border-color: {$red};
}
.phui-workpanel-view .phui-box-grey {
border: 1px solid transparent;
}
.phui-workpanel-view.workboard-column-drop-target .phui-box-grey {
border-color: {$lightblueborder};
}
.workboard-group-header {
background: rgba({$alphablue}, 0.10);
padding: 6px 8px;
margin: 0 0 8px -8px;
border-bottom: 1px solid {$lightgreyborder};
font-weight: bold;
color: {$darkgreytext};
position: relative;
}
.workboard-group-header .phui-icon-view {
position: absolute;
display: inline-block;
width: 24px;
padding: 5px 0 0 0;
height: 19px;
background-size: 100%;
border-radius: 3px;
background-repeat: no-repeat;
text-align: center;
background-color: {$lightgreybackground};
border: 1px solid {$lightgreybackground};
}
.workboard-group-header .workboard-group-header-name {
display: block;
position: relative;
height: 24px;
line-height: 24px;
margin-left: 36px;
overflow: hidden;
}
.workboard-drop-preview {
pointer-events: none;
position: absolute;
bottom: 12px;
right: 12px;
width: 300px;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
border: 1px solid {$lightblueborder};
padding: 4px 0;
background: #fff;
}
.workboard-drop-preview li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 4px 8px;
color: {$greytext};
border-radius: 3px;
}
.workboard-drop-preview li .phui-icon-view {
position: relative;
display: inline-block;
text-align: center;
width: 24px;
height: 18px;
padding-top: 6px;
border-radius: 3px;
background: {$bluebackground};
margin-right: 6px;
}
.workboard-drop-preview .workboard-drop-preview-header {
background: {$sky};
color: #fff;
}
.workboard-drop-preview .workboard-drop-preview-header .phui-icon-view {
background: {$blue};
color: #fff;
}
.workboard-drop-preview-fade {
animation: 0.1s workboard-drop-preview-fade-out;
opacity: 0.25;
}
@keyframes workboard-drop-preview-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
.phui-workpanel-view .phui-header-action-item a.phui-icon-view {
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 3px;
box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.05);
border: 1px solid {$lightgreyborder};
background: {$lightgreybackground};
}
.phui-workpanel-view .phui-header-action-item .phui-tag-view {
line-height: 24px;
}

Owner Packages

  • No Owners