Panorama API — CSS Properties

CSS properties available in Dota 2's Panorama UI. Access via CssProperties.PROPERTY_NAME or use the string values directly.

Constant	CSS Property	Description
`ALIGN`	`align`
`ANIMATION`	`animation`
`ANIMATION_DELAY`	`animation-delay`
`ANIMATION_DIRECTION`	`animation-direction`
`ANIMATION_DURATION`	`animation-duration`
`ANIMATION_FILL_MODE`	`animation-fill-mode`
`ANIMATION_FRAME_TIME`	`animation-frame-time`
`ANIMATION_ITERATION_COUNT`	`animation-iteration-count`
`ANIMATION_NAME`	`animation-name`
`ANIMATION_TIMING_FUNCTION`	`animation-timing-function`
`BACKGROUND_BLUR`	`background-blur`	- background-blur: gaussian( 2.5 ); - background-blur: gaussian( 6, 6, 1 );
`BACKGROUND_COLOR`	`background-color`	- background-color: #FFFFFFFF; - background-color: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), to( #c0c0c0c0 ) ); - background-color: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), color-stop( 0.3, #ebebebff ), to( #c0c0c0c0 ) ); - background-color: gradient( radial, 50% 50%, 0% 0%, 80% 80%, from( #00ff00ff ), to( #0000ffff ) ); - background-color: #0d1c22ff, gradient( radial, 100% -0%, 100px -40px, 320% 270%, from( #3a464bff ), color-stop( 0.23, #0d1c22ff ), to( #0d1c22ff ) );
`BACKGROUND_COLOR_OPACITY`	`background-color-opacity`	- background-color-opacity: 0.5;
`BACKGROUND_IMAGE`	`background-image`	- background-image: url("file://{images}/default.tga"), url( "file://{movies}/Background1080p.webm" );
`BACKGROUND_IMG_OPACITY`	`background-img-opacity`	- background-img-opacity: 0.5;
`BACKGROUND_POSITION`	`background-position`	- // aligns the top left corner of the image with the top left corner of the panel (default) background-position: 0% 0%; - // centers the image within the background (same as "center center") background-position: center; - // aligns the bottom right corner of the image with the bottom right corner of the panel (same as "100% 100%") background-position: right bottom; - // the top left corner of the image is placed 10px to the right of, 40px below the top left corner of the panel background-position: left 10px top 40px;
`BACKGROUND_REPEAT`	`background-repeat`	- background-repeat: repeat; // equals "repeat repeat" (default) - background-repeat: repeat space; // repeats horizontally, spaces vertically - background-repeat: no-repeat round; // 1 column of images, scaled to fit evenly
`BACKGROUND_SIZE`	`background-size`	- background-size: auto; // same as "auto auto" (default) - background-size: 100% 100%; // image fills the panel - background-size: 50% 75%; // image fills 50% of the panel's width, and 75% of the panel's height - background-size: 300px 200px; // image is drawn 300px wide, 200px tall
`BACKGROUND_TEXTURE_SIZE`	`background-texture-size`	- background-texture-size: 100px 50px; // width 100px, height 50px
`BLUR`	`blur`	- blur: gaussian( 2.5 ); - blur: gaussian( 6, 6, 1 );
`BORDER`	`border`	- border: 2px solid #111111FF;
`BORDER_BOTTOM`	`border-bottom`	- border-bottom: 2px solid #111111FF;
`BORDER_BOTTOM_COLOR`	`border-bottom-color`	- border-bottom-color: #111111FF;
`BORDER_BOTTOM_LEFT_RADIUS`	`border-bottom-left-radius`	- border-bottom-left-radius: 2px 2px; - border-bottom-left-radius: 5%;
`BORDER_BOTTOM_RIGHT_RADIUS`	`border-bottom-right-radius`	- border-bottom-right-radius: 2px 2px; - border-bottom-right-radius: 5%;
`BORDER_BOTTOM_STYLE`	`border-bottom-style`	- border-bottom-style: solid;
`BORDER_BOTTOM_WIDTH`	`border-bottom-width`	- border-bottom-width: 2px;
`BORDER_BRUSH`	`border-brush`	- border-brush: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), to( #c0c0c0c0 ) ); - border-brush: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), color-stop( 0.3, #ebebebff ), to( #c0c0c0c0 ) ); - border-brush: gradient( radial, 50% 50%, 0% 0%, 80% 80%, from( #00ff00ff ), to( #0000ffff ) );
`BORDER_COLOR`	`border-color`	- border-color: #111111FF; - border-color: #FF0000FF #00FF00FF #0000FFFF #00FFFFFF;
`BORDER_IMAGE`	`border-image`	- border-image: url( "file://message_border.png" ) 25% repeat; - border-image: url( "file://message_border.png" ) 25% / 1 / 20px repeat;
`BORDER_IMAGE_OUTSET`	`border-image-outset`	- border-image-outset: 0px; - border-image-outset: 20px 20px 20px 20px;
`BORDER_IMAGE_REPEAT`	`border-image-repeat`	- border-image-repeat: stretch stretch; - border-image-outset: repeat; - border-image-outset: round; - border-image-outset: stetch space;
`BORDER_IMAGE_SLICE`	`border-image-slice`	- border-image-slice: 10px 10px 10px 10px; - border-image-slice: 20% 10% 20% 10% fill;
`BORDER_IMAGE_SOURCE`	`border-image-source`	- border-image-source: url( "file://message_border.png" );
`BORDER_IMAGE_WIDTH`	`border-image-width`	- border-image-width: 1 1 1 1; - border-image-slice: 50% 50% 50% 50%; - border-image-slice: auto;
`BORDER_LEFT`	`border-left`	- border-left: 2px solid #111111FF;
`BORDER_LEFT_COLOR`	`border-left-color`	- border-left-color: #111111FF;
`BORDER_LEFT_STYLE`	`border-left-style`	- border-left-style: solid;
`BORDER_LEFT_WIDTH`	`border-left-width`	- border-left-width: 2px;
`BORDER_RADIUS`	`border-radius`	- // 2 px circular corners on all sides border-radius: 2px; - // Perfect circular or elliptical panel (circular if box was square) border-radius: 50% / 50%; - // 2 px horizontal radii 4px vertical elliptical corners on all sides border-radius: 2px / 4px; - // All corners fully specified border-radius: 2px 3px 4px 2px / 2px 3px 3px 2px;
`BORDER_RIGHT`	`border-right`	- border-right: 2px solid #111111FF;
`BORDER_RIGHT_COLOR`	`border-right-color`	- border-right-color: #111111FF;
`BORDER_RIGHT_STYLE`	`border-right-style`	- border-right-style: solid;
`BORDER_RIGHT_WIDTH`	`border-right-width`	- border-right-width: 2px;
`BORDER_STYLE`	`border-style`	- border-style: dashed; - border-style: solid none solid none;
`BORDER_TOP`	`border-top`	- border-top: 2px solid #111111FF;
`BORDER_TOP_COLOR`	`border-top-color`	- border-top-color: #111111FF;
`BORDER_TOP_LEFT_RADIUS`	`border-top-left-radius`	- border-top-left-radius: 2px 2px; - border-top-left-radius: 5%;
`BORDER_TOP_RIGHT_RADIUS`	`border-top-right-radius`	- border-top-right-radius: 2px 2px; - border-top-right-radius: 5%;
`BORDER_TOP_STYLE`	`border-top-style`	- border-top-style: solid;
`BORDER_TOP_WIDTH`	`border-top-width`	- border-top-width: 2px;
`BORDER_WIDTH`	`border-width`	- border-width: 1px;' - border-width: 20px 1px 20px 1px;
`BOX_SHADOW`	`box-shadow`	- box-shadow: #ffffff80 4px 4px 8px 0px; // outer, filled - box-shadow: hollow #ffffff80 4px 4px 8px 0px; // outer, hollow - box-shadow: inset #333333b0 0px 0px 8px 12px; // inner
`BRIGHTNESS`	`brightness`	- brightness: 1.5;
`CLIP`	`clip`	- clip: rect( 10%, 90%, 90%, 10% ); - clip: radial( 50% %50, 0deg, 90deg );
`COLOR`	`color`	- color: #FFFFFFFF; - color: gradient( linear, 0% 0%, 0% 100%, from( #cbcbcbff ), to( #a0a0a0a0 ) );
`CONTEXT_MENU_ARROW_POSITION`	`context-menu-arrow-position`	- context-menu-arrow-position: 25% 50%;
`CONTEXT_MENU_BODY_POSITION`	`context-menu-body-position`	- context-menu-body-position: 50% 100%;
`CONTEXT_MENU_POSITION`	`context-menu-position`	- context-menu-position: bottom; - context-menu-position: left bottom;
`CONTRAST`	`contrast`	- contrast: 1.5;
`CURSOR`	`cursor`	- cursor: text;cursor: crosshair;
`FLOW_CHILDREN`	`flow-children`
`FONT`	`font`
`FONT_FAMILY`	`font-family`	- font-family: Arial; - font-family: "Comic Sans MS";
`FONT_SIZE`	`font-size`	- font-size: 12;
`FONT_STRETCH`	`font-stretch`	- font-stretch: normal; - font-stretch: condensed; - font-stretch: expanded;
`FONT_STYLE`	`font-style`	- font-style: normal;
`FONT_WEIGHT`	`font-weight`	- font-weight: normal; - font-weight: bold; - font-weight: thin;
`HEIGHT`	`height`	Sets the height for this panel. Possible values: "fit-children" - Panel size is set to the required size of all children (default) - Any fixed pixel value (ex: "100px") - Percentage of parent height (ex: "100%") "fill-parent-flow( )" - Fills to remaining parent width. If multiple children are set to this value, weight is used to determine final height. For example, if three children are set to fill-parent-flow of 1.0 and the parent is 300px tall, each child will be 100px tall. (ex: "fill-parent-flow( 1.0 )" ) "width-percentage( )" - Percentage of the panel's width, which allows you to enforce a particular aspect ratio. The width cannot also be height-percentage.
`HORIZONTAL_ALIGN`	`horizontal-align`
`HUE_ROTATION`	`hue-rotation`	- hue-rotation: 180deg;
`IGNORE_PARENT_FLOW`	`ignore-parent-flow`
`IMG_SHADOW`	`img-shadow`	- img-shadow: 2px 2px 8px 3.0 #333333b0 alpha-only;
`LAYOUT_POSITION`	`layout-position`	- layout-position: fixed;
`LETTER_SPACING`	`letter-spacing`	Sets letter-spacing for text in a string. Possible values: normal - no manual spacing - Any fixed pixel value (ex: "1px")
`LINE_HEIGHT`	`line-height`	- line-height: normal; - line-height: 20px; - line-height: 1.2; - line-height: 120%;
`MARGIN`	`margin`
`MARGIN_BOTTOM`	`margin-bottom`
`MARGIN_LEFT`	`margin-left`
`MARGIN_RIGHT`	`margin-right`
`MARGIN_TOP`	`margin-top`
`MAX_HEIGHT`	`max-height`
`MAX_WIDTH`	`max-width`
`MIN_HEIGHT`	`min-height`
`MIN_WIDTH`	`min-width`
`OPACITY`	`opacity`	- opacity: 0.8;
`OPACITY_BRUSH`	`opacity-brush`	- opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #ffffffff ), to( #ffffff00 ) );
`OPACITY_MASK`	`opacity-mask`	Applies an image as an opacity mask that stretches to the panel bounds and fades out it's content based on the alpha channel. The second float value is an optional opacity value for the mask itself, the image won't interpolate/cross-fade, but you can animate the opacity to fade the mask in/out. opacity-mask-threshold lets you specify a threshold and softness percentage of how the mask is applied. Below the threshold, pixels are fully transparent, and above the threshold pixels are fully opaque. The softness lets you apply a range during which the opacity is scaled by the alpha from the mask.Examples: opacity-mask: url( "file://{images}/upper_row_mask.tga" ); opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.5; opacity-mask: url( "file://{images}/upper_row_mask.tga" ) -1.0; opacity-mask-position: 5px 50%; opacity-mask-scale: 200%; opacity-mask-scale: 50% 100%; opacity-mask-scale: cover; opacity-mask-scale: contain; opacity-mask-threshold: 0% 30%;
`OPACITY_MASK_POSITION`	`opacity-mask-position`
`OPACITY_MASK_SCALE`	`opacity-mask-scale`
`OPACITY_MASK_THRESHOLD`	`opacity-mask-threshold`
`OVERFLOW`	`overflow`	- overflow: squish squish; // squishes contents in horizontal and vertical directions - overflow: squish scroll; // scrolls contents in the Y direction
`PADDING`	`padding`
`PADDING_BOTTOM`	`padding-bottom`
`PADDING_LEFT`	`padding-left`
`PADDING_RIGHT`	`padding-right`
`PADDING_TOP`	`padding-top`
`PARAGRAPH_SPACING`	`paragraph-spacing`	Sets paragraph-spacing for text in a string. Only affects multiple line breaks in a row ( , , etc.).Possible values: normal - no manual spacing, defauls to line height - Any fixed pixel value (ex: "1px")
`PERSPECTIVE`	`perspective`	- perspective: 1000;
`PERSPECTIVE_ORIGIN`	`perspective-origin`	- perspective-origin: 50% 50%;
`POSITION`	`position`	- position: 3% 20px 0px;
`SATURATION`	`saturation`	- saturation: 0.4;
`SOUND`	`sound`	- sound: "whoosh_in";
`SOUND_OUT`	`sound-out`	- sound-out: "whoosh_out";
`TEXT_ALIGN`	`text-align`	- text-align: left; - text-align: right; - text-align: center; - text-align: justify; - text-align: justify-letter-spacing;
`TEXT_DECORATION`	`text-decoration`	- text-decoration: underline;
`TEXT_DECORATION_STYLE`	`text-decoration-style`	- text-decoration-style: dotted;
`TEXT_OVERFLOW`	`text-overflow`	- text-overflow: ellipsis; - text-overflow: clip; - text-overflow: shrink; - text-overflow: shrink min( 10px ); - text-overflow: shrink min( 10px ) ellipsis; - text-overflow: noclip;
`TEXT_SHADOW`	`text-shadow`	- text-shadow: 2px 2px 8px 3.0 #333333b0;
`TEXT_TRANSFORM`	`text-transform`	- text-transform: uppercase;
`TEXTURE_SAMPLING`	`texture-sampling`	- texture-sampling: normal; - texture-sampling: alpha-only; - texture-sampling: point;
`TOOLTIP_ARROW_POSITION`	`tooltip-arrow-position`	- tooltip-arrow-position: 25% 50%;
`TOOLTIP_BODY_POSITION`	`tooltip-body-position`	- tooltip-body-position: 50% 100%;
`TOOLTIP_POSITION`	`tooltip-position`	- tooltip-position: bottom; - tooltip-position: left bottom;
`TRANSFORM`	`transform`	- transform: translate3d( -100px, -100px, 0px ); - transform: rotateZ( -32deg ) rotateX( 30deg ) translate3d( 125px, 520px, 230px );
`TRANSFORM_ORIGIN`	`transform-origin`	- transform-origin: 50% 50%
`TRANSITION`	`transition`	- transition: position 2.0s ease-in-out 0.0s, perspective-origin 1.2s ease-in-out 0.8s;
`TRANSITION_DELAY`	`transition-delay`	- transition-delay: 0.0s; - transition-delay: 0.0s, 1.2s;
`TRANSITION_DURATION`	`transition-duration`	- transition-duration: 2.0s; - transition-duration: 2.0s, 1.2s, 1.2s, 4.0s, 2.0s;
`TRANSITION_FRAME_TIME`	`transition-frame-time`	- transition-frame-time: 0.2s; - transition-frame-time: 0.2s, 0.0s;
`TRANSITION_HIGH_FRAMERATE`	`transition-high-framerate`	- transition-high-framerate: true; - transition-high-framerate: false, true, false;
`TRANSITION_PROPERTY`	`transition-property`	- transition: position, transform, background-color;
`TRANSITION_TIMING_FUNCTION`	`transition-timing-function`	- transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out, linear; - transition-timing-function: cubic-bezier( 0.785, 0.385, 0.555, 1.505 );
`UI_SCALE`	`ui-scale`	- ui-scale: 150%; // 150% scaling for X, Y, and Z. - ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.
`UI_SCALE_X`	`ui-scale-x`	- ui-scale: 150%; // 150% scaling for X, Y, and Z. - ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.
`UI_SCALE_Y`	`ui-scale-y`	- ui-scale: 150%; // 150% scaling for X, Y, and Z. - ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.
`UI_SCALE_Z`	`ui-scale-z`	- ui-scale: 150%; // 150% scaling for X, Y, and Z. - ui-scale: 50% 100% 150%; // 50% scaling for X, 100% for Y. 150% for Z.
`VERTICAL_ALIGN`	`vertical-align`
`VISIBILITY`	`visibility`	Controls if the panel is visible and is included in panel layout. Possible values: "visible" - panel is visible and included in layout (default) "collapse" - panel is invisible and not included in layout
`WASH_COLOR`	`wash-color`	- wash-color: #39b0d325;
`WHITE_SPACE`	`white-space`	- white-space: normal; - white-space: nowrap;
`WIDTH`	`width`	Sets the width for this panel. Possible values: "fit-children" - Panel size is set to the required size of all children (default) - Any fixed pixel value (ex: "100px") - Percentage of parent width (ex: "100%") "fill-parent-flow( )" - Fills to remaining parent width. If multiple children are set to this value, weight is used to determine final width. For example, if three children are set to fill-parent-flow of 1.0 and the parent is 300px wide, each child will be 100px wide. (ex: "fill-parent-flow( 1.0 )" ) "height-percentage( )" - Percentage of the panel's height, which allows you to enforce a particular aspect ratio. The height cannot also be width-percentage.
`WORLD_BLUR`	`world-blur`	- world-blur: gaussian( 2.5 ); - world-blur: gaussian( 6, 6, 1 ); - world-blur: mipmapgaussian( 6, 6, 4 ); In this version each gaussian pass is preceded by a quarter area downsample.
`X`	`x`	- position: 3% 20px 0px;
`Y`	`y`	- position: 3% 20px 0px;
`Z`	`z`	- position: 3% 20px 0px;
`Z_INDEX`	`z-index`	- z-index: 1;