Homec4science
Diffusion Phabricator (stable) Browse

phab/webroot/rsrc/css/phui/phui-tag-view.css
b2d63d009cd2stable

Last Change
Raw File

phui-tag-view.css
View Options

/**
* @provides phui-tag-view-css
*/
.phui-tag-view {
font-weight: bold;
text-decoration: none;
position: relative;
-webkit-font-smoothing: antialiased;
white-space: nowrap;
}
a.phui-tag-view:hover {
text-decoration: none;
}
.phui-tag-core-closed {
text-decoration: line-through;
color: rgba({$alphablack},0.5);
}
.phui-tag-core-closed:hover {
text-decoration: none;
}
.phui-tag-core {
color: inherit;
border: 1px solid transparent;
border-radius: 3px;
padding: 0 4px;
}
.phui-tag-type-state .phui-tag-core {
padding: 1px 6px;
}
.phui-tag-view.phui-tag-type-state .phui-icon-view {
margin: 0 6px 0 0;
}
.phui-tag-view .phui-icon-view {
display: inline-block;
margin: 0 4px 0 2px;
}
.phui-tag-dot {
position: relative;
display: inline-block;
width: 5px;
height: 5px;
margin-right: 4px;
top: -1px;
border-radius: 5px;
border: 1px solid transparent;
}
.tokenizer-result .phui-tag-dot {
margin-right: 6px;
}
.jx-tokenizer-token .phui-tag-dot {
margin-left: 2px;
}
.phui-tag-type-state {
color: #ffffff;
text-shadow: rgba(100, 100, 100, 0.40) 0px -1px 1px;
}
.phui-tag-type-object,
a.phui-tag-type-object,
a.phui-tag-type-object:link,
.phui-tag-core-closed .phui-tag-color-object {
color: {$blacktext};
}
.phui-tag-type-person {
white-space: nowrap;
color: {$anchor};
}
.phui-tag-color-red {
background-color: {$red};
border-color: {$red};
}
.phui-tag-color-orange {
background-color: {$orange};
border-color: {$orange};
}
.phui-tag-color-yellow {
background-color: {$yellow};
border-color: {$yellow};
}
.phui-tag-color-blue {
background-color: {$blue};
border-color: {$blue};
}
.phui-tag-color-indigo {
background-color: {$indigo};
border-color: {$indigo};
}
.phui-tag-color-green {
background-color: {$green};
border-color: {$green};
}
.phui-tag-color-violet {
background-color: {$violet};
border-color: {$violet};
}
.phui-tag-color-black {
background-color: {$darkgreybackground};
border-color: {$darkgreybackground};
}
.phui-tag-color-grey {
background-color: {$lightgreytext};
border-color: {$lightgreytext};
}
.phui-tag-color-white {
background-color: {$lightgreybackground};
border-color: {$lightgreybackground};
}
.phui-tag-color-object {
background-color: {$greybackground};
border-color: {$lightgreyborder};
}
.phui-tag-color-person {
background-color: {$bluebackground};
border-color: {$thinblueborder};
}
a.phui-tag-view:hover
.phui-tag-core.phui-tag-color-person {
border-color: {$lightblueborder};
}
a.phui-tag-view:hover
.phui-tag-core.phui-tag-color-object {
border-color: {$greyborder};
}
.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
margin-top: 4px;
}
.phui-oi .phabricator-handle-tag-list {
display: inline;
}
.phui-oi .phabricator-handle-tag-list-item {
display: inline-block;
margin: 0 4px 2px 0;
}
.phui-tag-view.phui-tag-border-none .phui-tag-core {
border-color: transparent;
}
a.phui-tag-view:hover.phui-tag-border-none .phui-tag-core {
border-color: transparent !important;
text-decoration: underline;
}
/* - Shaded Tags ---------------------------------------------------------------
For object representation inside text areas and lists.
*/
.phui-tag-view.phui-tag-type-shade {
font-weight: normal;
}
.phui-tag-view.phui-tag-type-shade .phui-icon-view {
font-size: 12px;
}
/* - Slim Tags -----------------------------------------------------------------
A thinner tag for object list, workboards.
*/
.phui-tag-slim .phui-icon-view {
font-size: 11px;
}
.phui-tag-slim .phui-tag-core {
font-size: {$smallerfontsize};
}
/* - Red -------------------------------------------------------------------- */
.phui-tag-red .phui-tag-core,
.jx-tokenizer-token.red {
background: {$sh-redbackground};
border-color: {$sh-lightredborder};
color: {$sh-redtext};
}
.phui-tag-red .phui-icon-view,
.jx-tokenizer-token.red .phui-icon-view,
.jx-tokenizer-token.red .jx-tokenizer-x {
color: {$sh-redicon};
}
a.phui-tag-view:hover.phui-tag-red .phui-tag-core,
.jx-tokenizer-token.red:hover {
border-color: {$sh-redborder};
}
/* - Orange ----------------------------------------------------------------- */
.phui-tag-orange .phui-tag-core,
.jx-tokenizer-token.orange {
background: {$sh-orangebackground};
border-color: {$sh-lightorangeborder};
color: {$sh-orangetext};
}
.phui-tag-orange .phui-icon-view,
.jx-tokenizer-token.orange .phui-icon-view,
.jx-tokenizer-token.orange .jx-tokenizer-x {
color: {$sh-orangeicon};
}
a.phui-tag-view:hover.phui-tag-orange .phui-tag-core,
.jx-tokenizer-token.orange:hover {
border-color: {$sh-orangeborder};
}
/* - Yellow ----------------------------------------------------------------- */
.phui-tag-yellow .phui-tag-core,
.jx-tokenizer-token.yellow {
background: {$sh-yellowbackground};
border-color: {$sh-lightyellowborder};
color: {$sh-yellowtext};
}
.phui-tag-yellow .phui-icon-view,
.jx-tokenizer-token.yellow .phui-icon-view,
.jx-tokenizer-token.yellow .jx-tokenizer-x {
color: {$sh-yellowicon};
}
a.phui-tag-view:hover.phui-tag-yellow .phui-tag-core,
.jx-tokenizer-token.yellow:hover {
border-color: {$sh-yellowborder};
}
/* - Blue ------------------------------------------------------------------- */
.phui-tag-blue .phui-tag-core,
.jx-tokenizer-token.blue {
background: {$sh-bluebackground};
border-color: {$sh-lightblueborder};
color: {$sh-bluetext};
}
.phui-tag-blue .phui-icon-view,
.jx-tokenizer-token.blue .phui-icon-view,
.jx-tokenizer-token.blue .jx-tokenizer-x {
color: {$sh-blueicon};
}
a.phui-tag-view:hover.phui-tag-blue .phui-tag-core,
.jx-tokenizer-token.blue:hover {
border-color: {$sh-blueborder};
}
/* - Sky ------------------------------------------------------------------- */
.phui-tag-sky .phui-tag-core,
.jx-tokenizer-token.sky {
background: #E0F0FA;
border-color: {$sh-lightblueborder};
color: {$sh-bluetext};
}
.phui-tag-sky .phui-icon-view,
.jx-tokenizer-token.sky .phui-icon-view,
.jx-tokenizer-token.sky .jx-tokenizer-x {
color: {$sh-blueicon};
}
a.phui-tag-view:hover.phui-tag-sky .phui-tag-core,
.jx-tokenizer-token.sky:hover {
border-color: {$sh-blueborder};
}
/* - Indigo ----------------------------------------------------------------- */
.phui-tag-indigo .phui-tag-core,
.jx-tokenizer-token.indigo {
background: {$sh-indigobackground};
border-color: {$sh-lightindigoborder};
color: {$sh-indigotext};
}
.phui-tag-indigo .phui-icon-view,
.jx-tokenizer-token.indigo .phui-icon-view,
.jx-tokenizer-token.indigo .jx-tokenizer-x {
color: {$sh-indigoicon};
}
a.phui-tag-view:hover.phui-tag-indigo .phui-tag-core,
.jx-tokenizer-token.indigo:hover {
border-color: {$sh-indigoborder};
}
/* - Green ------------------------------------------------------------------ */
.phui-tag-green .phui-tag-core,
.jx-tokenizer-token.green {
background: {$sh-greenbackground};
border-color: {$sh-lightgreenborder};
color: {$sh-greentext};
}
.phui-tag-green .phui-icon-view,
.jx-tokenizer-token.green .phui-icon-view,
.jx-tokenizer-token.green .jx-tokenizer-x {
color: {$sh-greenicon};
}
a.phui-tag-view:hover.phui-tag-green .phui-tag-core,
.jx-tokenizer-token.green:hover {
border-color: {$sh-greenborder};
}
/* - Violet ----------------------------------------------------------------- */
.phui-tag-violet .phui-tag-core,
.jx-tokenizer-token.violet {
background: {$sh-violetbackground};
border-color: {$sh-lightvioletborder};
color: {$sh-violettext};
}
.phui-tag-violet .phui-icon-view,
.jx-tokenizer-token.violet .phui-icon-view,
.jx-tokenizer-token.violet .jx-tokenizer-x {
color: {$sh-violeticon};
}
a.phui-tag-view:hover.phui-tag-violet .phui-tag-core,
.jx-tokenizer-token.violet:hover {
border-color: {$sh-violetborder};
}
/* - Pink ------------------------------------------------------------------- */
.phui-tag-pink .phui-tag-core,
.jx-tokenizer-token.pink {
background: {$sh-pinkbackground};
border-color: {$sh-lightpinkborder};
color: {$sh-pinktext};
}
.phui-tag-pink .phui-icon-view,
.jx-tokenizer-token.pink .phui-icon-view,
.jx-tokenizer-token.pink .jx-tokenizer-x {
color: {$sh-pinkicon};
}
a.phui-tag-view:hover.phui-tag-pink .phui-tag-core,
.jx-tokenizer-token.pink:hover {
border-color: {$sh-pinkborder};
}
/* - Grey ------------------------------------------------------------------- */
.phui-tag-grey .phui-tag-core,
.jx-tokenizer-token.grey {
background: {$sh-greybackground};
border-color: {$sh-lightgreyborder};
color: {$sh-greytext};
}
.phui-tag-grey .phui-icon-view,
.jx-tokenizer-token.grey .phui-icon-view,
.jx-tokenizer-token.grey .jx-tokenizer-x {
color: {$sh-greyicon};
}
a.phui-tag-view:hover.phui-tag-grey .phui-tag-core,
.jx-tokenizer-token.grey:hover {
border-color: {$sh-greyborder};
}
/* - Checkered -------------------------------------------------------------- */
.phui-tag-checkered .phui-tag-core,
.jx-tokenizer-token.checkered {
background: url(/rsrc/image/checker_lighter.png);
border-style: dashed;
border-color: {$sh-greyborder};
color: {$sh-greytext};
text-shadow: 1px 1px #fff;
}
.phui-tag-checkered .phui-icon-view,
.jx-tokenizer-token.checkered .phui-icon-view,
.jx-tokenizer-token.checkered .jx-tokenizer-x {
color: {$sh-greyicon};
}
a.phui-tag-view:hover.phui-tag-checkered .phui-tag-core,
.jx-tokenizer-token.checkered:hover {
border-style: solid;
border-color: {$sh-greyborder};
}
/* - Disabled --------------------------------------------------------------- */
.phui-tag-disabled .phui-tag-core {
background-color: {$sh-disabledbackground};
border-color: {$sh-lightdisabledborder};
color: {$sh-disabledtext};
}
.phui-tag-disabled .phui-icon-view {
color: {$sh-disabledicon};
}
a.phui-tag-view:hover.phui-tag-disabled .phui-tag-core {
border-color: {$sh-disabledborder};
}
/* - Outline Tags --------------------------------------------------------------
Basic Tag with a bold border and white background
*/
.phui-tag-type-outline {
text-transform: uppercase;
font-weight: normal;
}
.phui-tag-view.phui-tag-type-outline .phui-tag-core {
background: #fff;
padding: 0 6px 1px 6px;
}
.phui-tag-slim.phui-tag-type-outline .phui-tag-core {
font-size: {$smallestfontsize};
}
.phui-tag-type-outline.phui-tag-red .phui-tag-core {
color: {$red};
border-color: {$red};
}
.phui-tag-type-outline.phui-tag-orange .phui-tag-core {
color: {$orange};
border-color: {$orange};
}
.phui-tag-type-outline.phui-tag-yellow .phui-tag-core {
color: {$yellow};
border-color: {$yellow};
}
.phui-tag-type-outline.phui-tag-green .phui-tag-core {
color: {$green};
border-color: {$green};
}
.phui-tag-type-outline.phui-tag-blue .phui-tag-core {
color: {$blue};
border-color: {$blue};
}
.phui-tag-type-outline.phui-tag-indigo .phui-tag-core {
color: {$indigo};
border-color: {$indigo};
}
.phui-tag-type-outline.phui-tag-violet .phui-tag-core {
color: {$violet};
border-color: {$violet};
}
.phui-tag-type-outline.phui-tag-grey .phui-tag-core {
color: {$bluetext};
border-color: {$bluetext};
}
.phui-tag-type-outline.phui-tag-disabled .phui-tag-core {
color: {$lightgreytext};
border-color: {$lightgreytext};
}
.phui-tag-type-outline.phui-tag-pink .phui-tag-core {
color: {$pink};
border-color: {$pink};
}
.phui-tag-type-outline.phui-tag-sky .phui-tag-core {
color: {$sky};
border-color: {$sky};
}
.phui-tag-type-outline.phui-tag-fire .phui-tag-core {
color: {$fire};
border-color: {$fire};
}
.phui-tag-type-outline.phui-tag-black .phui-tag-core {
color: {$blacktext};
border-color: {$blacktext};
}
c4science · Help