CSGO Panorama CSS Properties

From Valve Developer Community
Jump to navigation Jump to search

Panorama supports a subset of the HTML5 CSS properties, and also adds a number of custom CSS properties. Panorama differs slighty from the W3C spec in both properties and values.

Definitions

Panorama supports static definitions. The format is:
@define <variable-name>: <value>;

Examples: 

@define color-primary: #FF0000;
.example {
    background-color: color-primary;
}

@define default-transition-time: 0.3s;
.example {
    transition-duration: default-transition-time;
}

@define default-font-bold: Arial Bold, "Arial Unicode MS";
.example {
    font-family: default-font-bold;
}

Supported pseudo-selectors

  • :activationdisabled - panel is disabled for activation, may still be enabled for focus (normal disabled disallows all input/focus)
  • :active - panel is being actively used (mouse-down on the panel)
  • :descendantfocus - a descendant of the panel has keyboard focus
  • :disabled - panel is disabled
  • :enabled - panel is enabled
  • :focus - panel has keyboard focus
  • :hover - mouse is over the panel
  • :inspect - panel is being inspected by the debugger
  • :layoutfailed - panel failed to load requested layout file, and thus may want to display specially
  • :layoutloading - panel is in-progress loading it's layout file and thus may want to display specially
  • :parentdisabled - a parent of this panel is disabled, thus implicitly disabling it
  • :selected - panel is selected (button checked)

Values

Enumerated here are a list of values that differ from the W3C spec.

Gradients

Gradients can be used in place of many color values, such as color, background-color, etc. There is only one keyword for both linear and radial gradients, gradient.

Linear

Parameters:
gradient( <gradient-type>, <from-start>, <to-end>, from( <color> ), [optional]color-stop( <point-along-gradient>, <color> ), ... /* more optional color stops */, to( <color> );

  • <gradient-type> - Specifies either a linear or radial gradient type. In this case, linear.
  • <from-start> - Two percentage values, horizontal (left) and vertical (top) in order, specifying the startpoint of the from color (from( <color> )).
  • <to-end> - Two percentage values, horizontal (right) and vertical (bottom) in order, specifying the endpoint of the to color (to( <color> )).
  • from( <color> ) - The color at the start of the gradient.
  • color-stop( <point-along-gradient>, <color> ) - Optional color between the starting & ending colors. <point-along-gradient> is a number between 0 and 1 specifying the point along the gradient (with respect to <from-start> and <to-end>) where this color is (0.5 is halfway).
  • to( <color> ) - The color at the end of the gradient.

Examples: 

/* Strictly vertical linear gradient, from white to black */
gradient( linear, 0% 0%, 0% 100%, from( white ), to( black ) );

/* Strictly horizontal linear gradient, from #000000 to #C8C8C8 to #FFFFFF evenly */
gradient( linear, 0% 0%, 100% 0%, from( #000000 ), color-stop( 0.5, #C8C8C8 ), to( #FFFFFF ) );

/* Diagonal linear gradient, from white to red to black evenly in both horizontal and vertical directions, ending in the middle of the panel */
gradient( linear, 0% 0%, 50% 50%, from( white ), color-stop( 0.5, red ), to( black ) );

/* Horizontal linear gradient from black to red midway, cutting to green sharply, then green to black gradient for the 2nd half */
gradient( linear, 0% 0%, 100% 0%, from( black ), color-stop( 0.5, red ), color-stop(0.5, green), to( white ) );

Radial

Parameters:
gradient( <gradient-type>, <radial-center>, <offset>, <radius>, from( <color> ), [optional]color-stop( <point-along-gradient>, <color> ), ... /* more optional color stops */, to( <color> );

  • <gradient-type> - Specifies either a linear or radial gradient type. In this case, radial.
  • <radial-center> - Two percentage values, horizontal and vertical in order, specifying the center position of the gradient.
  • <offset> - Two percentage values, horizontal and vertical in order, specifying the offset of the entire gradient.
  • <radius> - Two percentage values, horizontal and vertical in order, specifying the radius of the gradient.
  • from( <color> ) - The color at the start of the gradient.
  • color-stop( <point-along-gradient>, <color> ) - Optional color between the starting & ending colors. <point-along-gradient> is a number between 0 and 1 specifying the point along the gradient (with respect to <radial-center>, <offset> and <radius>) where this color is (0.5 is halfway).
  • to( <color> ) - The color at the end of the gradient.

Examples: 

/* Radial gradient with center at the top-left corner (white), ending at the bottom-right corner (black) */
gradient( radial, 0% 0%, 0% 0%, 100%, 100%, from( white ), to( black ) );

/* Radial gradient with center in the middle (white), ending at all 4 edges (black) */
gradient( radial, 50% 50%, 0% 0%, 50%, 50%, from( white ), to( black ) );

/* Radial gradient with center at the middle top (#CCCCCC), ending at the vertical middle of the panel (black), with a midpoint color of red */
gradient( radial, 50% 0%, 0% 0%, 100% 50%, from( #CCCCCC ), color-stop(0.5, red), to( black ) );

Property List

Contains every CSS property panorama supports.

-s2-mix-blend-mode

Controls blending mode for the panel. See CSS mix-blend-mode docs on web, except normal for us is with alpha blending.

Examples: 

-s2-mix-blend-mode: normal;
-s2-mix-blend-mode: multiply;
-s2-mix-blend-mode: screen;
-s2-mix-blend-mode: additive;
-s2-mix-blend-mode: SRGBadditive;
-s2-mix-blend-mode: opaque;


align

Controls the horizontal and/or vertical alignment of content. First value is the horizontal alignment, and second is the vertical. Both must be present. If you want to change just horizontal or just vertical alignment, see horizontal-align or vertical-align respectively. Defaults to left and top respectively.

Possible values for horizontal alignment:

  • left
  • center/middle
  • right
  • center_nopixelsnap - centers but does not round to an integer (pixel)

Possible values for vertical alignment:

  • top
  • center/middle
  • bottom
  • center_nopixelsnap

Examples: 

align: left bottom;
align: middle center_nopixelsnap;
align: right middle;


animation

Sets all of the following animation properties in order: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode. Only animation-name and animation-duration are required. animation-name is used to later define a keyframe.

Example: 

animation: example-anim 2.1s ease-in 0.2s 1 normal forwards;
animation: example-anim 10.2s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s infinite alternate-reverse both;
animation: example-anim 4.4s;

Additionally, the animation properties can be defined one after another: 

animation-name: example-anim;
animation-duration: 0.4s;
animation-iteration-count: 1;

Keyframing is done outside of the class. They must include from and to, with optional keyframes at percentages.

Example: 

.example-class
{
    animation-name: 'example-anim'
    [other animation properties]
}
@keyframe example-anim
{
    from
    {
        color: #FFFFFFFF;
    }
    33%
    {
        color: #00000000;
    }
    67%
    {
        color: #FFFFFFFF;
        wash-color: #FFFFFFFF;
    }
    to
    {
        color: #00000000;
    }
}


animation-delay

Controls the delay before the animation starts, in milliseconds (ms) or seconds (s).

Example: 

animation-delay: 2.3s;
animation-delay: 750ms;


animation-direction

The direction of the animation regarding time. Defaults to normal.

Possible values:

  • normal
  • alternate
  • reverse
  • alternate-reverse


animation-duration

Controls the duration of an animation, in milliseconds (ms) or seconds (s).

Example: 

animation-duration: 0.4s;
animation-duration: 150ms;


animation-fill-mode

Controls the fill mode of an animation.

Possible values:

  • none
  • forward
  • backwards
  • both


animation-iteration-count

Controls the number of iterations to play for an animation. Alternatively, "infinite" can be used to constantly play the animation.

Example: 

animation-iteration-count: 4;
animation-iteration-count: infinite;


animation-name

Name of animation to be used for keyframing. See animation for an explanation and example.


animation-timing-function

Controls the type of animation to perform. Defaults to ease.

Possible values:

  • none
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear
  • cubic-bezier - custom cubic bezier curve

Example: 

animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);


background-color

Sets the background fill color/gradient/combination for a panel.

Examples:

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-image

Comma separated list of images or movies to draw in the background. Can specify "none" to not draw a background layer. Combined with background-position, background-size and background-repeat values.

Example:

background-image: url("file://{images}/default.tga"), url( "file://{movies}/Background1080p.webm" );


background-img-opacity

Sets the Opacity of background-image

Examples:

background-img-opacity: 0.5;


background-position

Controls the horizontal and vertical placement of the background image, with the format: <left|center|right> <horizontal length> <top|center|bottom> <vertical length>

If length is a percent, the specified location within the image is positioned over that same specified position in the background. If the length is pixels, the top left corner is placed relative to the provided alignment keywords (left, bottom, etc.). See examples for more details.

If 1 value is specified, the other value is assumed to be center. If 2 values are specified, the first value must be for horizontal placement and the second for vertical.

Examples:

// 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

Controls if the background should be repeated in the horizontal and vertical directions.

Possible values per direction:

  • repeat - (default) Repeated in the specified direction until it fills the panel
  • space - Repeated as many times as required to fill the panel w/o being clipped. Space is added between images to to align first and last image with panel edges.
  • round - Repeated as many times as required to fill the panel w/o being clipped. The image is resized to align first and last image with panel edges.
  • no-repeat - Not repeated

Possible single values:

  • repeat-x - equals "repeat no-repeat"
  • repeat-y - equals "no-repeat repeat"

Examples: 

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

Sets the horizontal and vertical dimensions used to draw the background image. Can be set in pixels, percent, "contains" to size down to panel dimensions or "auto" preserves the image aspect ratio. By default, set to "auto" which preveres the image's original size.

Multiple background layers can be specified in a comma separated list, which are then combined with background-image, background-position, and background-repeat values.

Examples:

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


blur

Sets the amount of blur to apply to the panel and all it's children during composition. Default is no blur, for now Gaussian is the only blur type and takes a horizontal standard deviation, vertical standard deviation, and number of passes. Good std deviation values are around 0-10, if 10 is still not intense enough consider more passes, but more than one pass is bad for perf. As shorthand you can specify with just one value, which will be used for the standard deviation in both directions and 1 pass will be set.

Examples: 

blur: gaussian( 2.5 );
blur: gaussian( 6, 6, 1 );
blur: fastgaussian( 6, 6, 1 );
blur: fastanimgaussian( 6, 6, 1 );


border

Shorthand for setting panel border. Specify width, style, and color. Supported styles are: solid, none.

Examples:

border: 2px solid #111111FF;


border-bottom

Shorthand for setting the bottom panel border. Specify width, style, and color. Supported styles are: solid, none.

Examples:

border-bottom: 2px solid #111111FF;


border-bottom-color

Specifies border color for the bottom edge of the panel.

Examples:

border-bottom-color: #111111FF;


border-bottom-left-radius

Specifies border-radius for bottom-left corner which rounds off border and clips background/foreground content to rounded edge. Takes 1 or 2 values in px or %, first value is horizontal radii for elliptical corner, second is vertical radii, if only one is specified then horizontal/vertical will both be set and corner will be circular.

Examples:

border-bottom-left-radius: 2px 2px;
border-bottom-left-radius: 5%;


border-bottom-right-radius

Specifies border-radius for bottom-right corner which rounds off border and clips background/foreground content to rounded edge. Takes 1 or 2 values in px or %, first value is horizontal radii for elliptical corner, second is vertical radii, if only one is specified then horizontal/vertical will both be set and corner will be circular.

Examples:

border-bottom-right-radius: 2px 2px;
border-bottom-right-radius: 5%;


border-bottom-style

Specifies border style for the bottom edge of the panel.

Examples:

border-bottom-style: solid;


border-bottom-width

Specifies border width for the bottom edge of the panel.

Examples:

border-bottom-width: 2px;


border-color

Specifies border color for panel. If a single color value is set it applies to all sides, if 2 are set the first is top/bottom and the second is left/right, if all four are set then they are top, right, bottom, left in order.

Examples:

border-color: #111111FF;
border-color: #FF0000FF #00FF00FF #0000FFFF #00FFFFFF;


border-left

Shorthand for setting the left panel border. Specify width, style, and color. Supported styles are: solid, none.

Examples:

border-left: 2px solid #111111FF;


border-left-color

Specifies border color for the left edge of the panel.

Examples:

border-left-color: #111111FF;


border-left-style

Specifies border style for the left edge of the panel.

Examples:

border-left-style: solid;


border-left-width

Specifies border width for the left edge of the panel.

Examples:

border-left-width: 2px;


border-radius

Shorthand to set border radius for all corners at once. Border radius rounds off corners of the panel, adjusting the border to smoothly round and also clipping background image/color and contents to the specified elliptical or circular values. In this shorthand version you may specify a single value for all raddi, or horizontal / vertical separated by the '/' character. For both horizontal and vertical you may specify 1 to 4 values in pixels or %, they will be taken in order as top-left, top-right, bottom-right, bottom-left radii values.

Examples: 

border-radius: 2px; // 2 px circular corners on all sides
border-radius: 50% / 50%; // Perfect circular or elliptical panel (circular if box was square)
border-radius: 2px / 4px; // 2 px horizontal radii 4px vertical elliptical corners on all sides
border-radius: 2px 3px 4px 2px / 2px 3px 3px 2px; // All corners fully specified


border-right

Shorthand for setting the right panel border. Specify width, style, and color. Supported styles are: solid, none.

Examples:

border-right: 2px solid #111111FF;


border-right-color

Specifies border color for the right edge of the panel.

Examples:

border-right-color: #111111FF;


border-right-style

Specifies border style for the right edge of the panel.

Examples:

border-right-style: solid;


border-right-width

Specifies border width for the right edge of the panel.

Examples:

border-right-width: 2px;


border-style

Specifies border style for panel. If a single style value is set it applies to all sides, if 2 are set the first is top/bottom and the second is left/right, if all four are set then they are top, right, bottom, left in order.

Examples:

border-style: solid;
border-style: solid none solid none;


border-top

Shorthand for setting the top panel border. Specify width, style, and color. Supported styles are: solid, none.

Examples:

border-top: 2px solid #111111FF;


border-top-color

Specifies border color for the top edge of the panel.

Examples:

border-top-color: #111111FF;


border-top-left-radius

Specifies border-radius for top-left corner which rounds off border and clips background/foreground content to rounded edge. Takes 1 or 2 values in px or %, first value is horizontal radii for elliptical corner, second is vertical radii, if only one is specified then horizontal/vertical will both be set and corner will be circular.

Examples:

border-top-left-radius: 2px 2px;
border-top-left-radius: 5%;


border-top-right-radius

Specifies border-radius for top-right corner which rounds off border and clips background/foreground content to rounded edge. Takes 1 or 2 values in px or %, first value is horizontal radii for elliptical corner, second is vertical radii, if only one is specified then horizontal/vertical will both be set and corner will be circular.

Examples:

border-top-right-radius: 2px 2px;
border-top-right-radius: 5%;


border-top-style

Specifies border style for the top edge of the panel.

Examples:

border-top-style: solid;


border-top-width

Specifies border width for the top edge of the panel.

Examples:

border-top-width: 2px;


border-width

Specifies border width for panel. If a single width value is set it applies to all sides, if 2 are set the first is top/bottom and the second is left/right, if all four are set then they are top, right, bottom, left in order.

Examples: 

border-width: 1px;
border-width: 20px 1px 20px 1px;


box-shadow

Specifies outer shadows for boxes, or inset shadows/glows. The shadow shape will match the border box for the panel,so use border-radius to affect rounding. Syntax takes optional 'inset', optional 'fill' then color, and then horizontal offset pixels, vertical offset pixels, blur radius pixels, and spread distance in pixels. Inset means the shadow is an inner shadow/glow, fill is validonly on outer shadows and means draw the shadow behind the entire box, not clipping it to outside the border area only.

Examples:

box-shadow: #ffffff80 4px 4px 8px 0px; // outer
box-shadow: fill #ffffff80 4px 4px 8px 0px; // outer, filled
box-shadow: inset #333333b0 0px 0px 8px 12px; // inner


brightness

Sets the brightness that applies to the panel and all it's children during composition. The value is a multiplier on the HSB brightness value.

Example:

brightness: 1.5;


clip

Specifies a clip region within the panel, where contents will be clipped at render time. This clipping has no impact on layout, and is fast and supported for transitions/animations. Radial clip mode takes a center point, start angle and angular width of the revealed sector.

Example: 

clip: rect( 10%, 90%, 90%, 10% );
clip: radial( 50% %50, 0deg, 90deg );


color

Sets the foreground fill color/gradient/combination for a panel. This color is the color used to render text within the panel.

Examples:

color: #FFFFFFFF;
color: gradient( linear, 0% 0%, 0% 100%, from( #cbcbcbff ), to( #a0a0a0a0 ) );


context-menu-arrow-position

Specifies where to point the arrow of a context menu at on this panel. The first value controls how the arrow is positioned horizontally when the context menu is to the top or bottom of the panel, and the second value controls how the arrow is positioned vertically when the context menu is to the left or right of the panel. Default is '50% 50%'.

Example:

context-menu-arrow-position: 25% 50%;


context-menu-body-position

Specifies where to position the body of a context menu relative to this panel. The first value controls how the body is aligned horizontally when the context menu is to the top or bottom of the panel, and the second value controls how the body is aligned vertically when the context menu is to the left or right of the panel. 0% means left/top aligned, 50% means center/middle aligned, and 100% means right/bottom aligned. Default is '0% 0%'.

Example:

context-menu-body-position: 50% 100%;


context-menu-position

Specifies where to position a context menu relative to this panel. Valid options include 'left', 'top', 'right', and 'bottom'. List up to 4 positions to determine the order that positions are tried if the context menu doesn't fully fit on screen. Default is 'right left bottom top'. If less than 4 positions are specified, the context menu first tries the opposite of the specified position along the same axis before switching to the other axis.

Examples:

context-menu-position: bottom;
context-menu-position: left bottom;


contrast

Sets the contrast that applies to the panel and all it's children during composition.

Example:

contrast: 1.5;


flow-children

Controls the direction for the children of the panel to flow.

Possible values:

  • none - children will have to position themselves
  • down
  • right
  • up
  • left
  • down-wrap - children flow in this direction but wrap when lengths cannot fit (instead of overlapping)
  • right-wrap - etc.
  • up-wrap - etc.
  • left-wrap - etc.


font

This cannot be set directly. See font-family, font-size, font-style, and font-weight to set font properties.


font-family

Specifies the font face to use.

Examples:

font-family: Arial;
font-family: "Comic Sans MS";


font-size

Specifies the target font face height in pixels.

Example:

font-size: 12;


font-style

Specifies the font style to use. Supported values are normal, and italic

Example:

font-style: normal;


font-weight

Specifies the font weight to use. Supported values are light, thin, normal, medium, bold, and black.

Examples:

font-weight: normal;
font-weight: bold;
font-weight: thin;


height

Sets the height for this panel.

Possible values:

  • fit-children - Panel size is set to the required size of all children (default). Can be specified in pixels or percentage.
  • fill-parent-flow(<weight>) - Fills to remaining parent height. If multiple children are set to this value, weight is used to determine final height.
  • height-percentage(<percentage>) - Percentage of the panel's height, which allows you to enforce a particular aspect ratio.

Width percentage can be set in width.

Examples: 

height: 50px;
height: 20%;
height: fill-parent-flow(1.0); - If three children are set to fill-parent-flow of 1.0 and the parent is 300px tall, each child will be 100px tall.
height: height-percentage(30%);


horizontal-align

Controls the horizontal alignment of content. To change both this and vertical alignment in one property, see align. Defaults to left.

Possible values:

  • left
  • center/middle
  • right
  • center_nopixelsnap - centers but does not round to an integer (pixel)

Examples: 

horizontal-align: left;
horizontal-align: center_nopixelsnap;


hue-rotation

Sets the hue rotation to apply to the panel and all it's children during composition. Default of 0.0 means no adjustment, domain is in degrees.

Example:

hue-rotation: 180deg;


img-shadow

Specifies image shadows. The shadow shape will match the image the panel can generate,and this is only meaningful for images. Syntax takes horizontal offset pixels, vertical offset pixels, blur radius pixels, strength, and then shadow color.

Example:

img-shadow: 2px 2px 8px 3.0 #333333b0;


letter-spacing

Sets the space between letters for text in a string.

Possible values:

  • normal - no manual spacing
  • <pixels> - Any fixed pixel value

Examples 

letter-spacing: normal;
letter-spacing: 5px;


line-height

Specifies the line height (distance between top edge of line above and line below) to use for text. By default this is unset and a value that matches the font-size reasonably will be used automatically.

Example:

line-height: 20px;


margin

Sets the space between this panel to another panel, in pixels. The properties of all four sides in order are: margin-top, margin-right, margin-bottom, and margin-left. Not all properties need to be specified, though all lengths will be set from the values provided.

Examples: 

margin: 6px; /* Sets the margin of all sides to 6px */
margin: 4px 9px; /* Sets top and bottom margins to 4px, and left and right margins to 9px */
margin: 1px 3px 2px; /* Sets top margin to 1px, right and left to 3px, and bottom to 2px */
margin: 5px 8px 4px 1px /* Sets top margin to 5px, right to 8px, bottom to 4px, and left to 1px */


margin-bottom

Sets the space between the bottom of this panel to the top of another panel, in pixels.


margin-left

Sets the space between the left-side of this panel to the right-side of another panel, in pixels.


margin-right

Sets the space between the right-side of this panel to the left-side of another panel, in pixels.


margin-top

Sets the space between the top of this panel to the bottom of another panel, in pixels.


max-height

Sets the maximum height of the panel. Possible values and their explanations can be found in the description of height.


max-width

Sets the maximum width of the panel. Possible values and their explanations can be found in the description of width.


min-height

Sets the minimum height of the panel. Possible values and their explanations can be found in the description of height.


min-width

Sets the minimum width of the panel. Possible values and their explanations can be found in the description of width.


opacity

Sets the opacity or amount of transparency applied to the panel and all it's children during composition. Default of 1.0 means fully opaque, 0.0 means fully transparent.

Example:

opacity: 0.8;


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. The -scroll-down, -scroll-up, and -scroll-up-down variants override the mask and apply only when the various vertical scroll scenarios affect the panel based on the overflow property.

Examples: 

opacity-mask: url( "file://{images}/upper_row_mask.tga" );
opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.5;


opacity-mask-scroll-down

Overrides opacity-mask when the panel can scroll down, based on the overflow property, or when the height of the content in the panel is larger than the height of its layout.

Example: 

opacity-mask-scroll-down: url( "file://{images}/upper_row_mask_down.tga" );
opacity-mask-scroll-down: url( "file://{images}/upper_row_mask_down.tga" ) 0.5;


opacity-mask-scroll-up

Overrides opacity-mask when the panel can scroll up, based on the overflow property.

Example: 

opacity-mask-scroll-up: url( "file://{images}/upper_row_mask_up.tga" );
opacity-mask-scroll-up: url( "file://{images}/upper_row_mask_up.tga" ) 0.5;


opacity-mask-scroll-up-down

Overrides opacity-mask when the panel can scroll up and down, based on the overflow property.

Example: 

opacity-mask-scroll-up-down: url( "file://{images}/upper_row_mask_up_down.tga" );
opacity-mask-scroll-up-down: url( "file://{images}/upper_row_mask_up_down.tga" ) 0.5;


overflow

Specifies what to do with contents that overflow the available space for the panel.

Possible values:

  • squish - Children are squished to fit within the panel's bounds if needed (default)
  • clip - Children maintain their desired size but their contents are clipped
  • scroll - Children maintain their desired size and a scrollbar is added to this panel
  • noclip - Children maintain their desired size and content is allowed to overflow this panel

Examples: 

overflow: squish squish; // squishes contents in horizontal and vertical directions
overflow: squish scroll; // scrolls contents in the Y direction


padding

Sets the space between the content and the edge of the panel, in pixels. The properties of all four sides in order are: padding-top, padding-right, padding-bottom, and padding-left. Not all properties need to be specified, though all lengths will be set from the values provided.

Examples: 

padding: 6px; /* Sets the padding of all sides to 6px */
padding: 4px 9px; /* Sets top and bottom padding to 4px, and left and right padding to 9px */
padding: 1px 3px 2px; /* Sets top padding to 1px, right and left to 3px, and bottom to 2px */
padding: 5px 8px 4px 1px /* Sets top padding to 5px, right to 8px, bottom to 4px, and left to 1px */


padding-bottom

Sets the space between the content and the bottom edge of the panel, in pixels.


padding-left

Sets the space between the content and the left edge of the panel, in pixels.


padding-right

Sets the space between the content and the right edge of the panel, in pixels.


padding-top

Sets the space between the content and the top edge of the panel, in pixels.


perspective

Sets the perspective depth space available for children of the panel. Default of 1000 would mean that children at 1000px zpos are right at the viewers eye, -1000px are just out of view distance faded to nothing.

Example:

perspective: 1000;


perspective-origin

Sets the perspective origin which will be used when transforming children of this panel. This can be thought of as the camera x/y position relative to the panel.

Example:

perspective-origin: 50% 50%;


position

Sets the x, y, and z position for a panel, in pixels or percentage. Must not be in a flowing layout.

Example: 

position: 3% 20px 0px;


pre-transform-rotate2d

Sets 2 dimensional rotation degrees that apply to the quad for this panel prior to 3 dimensional transforms. This rotation applies without perspective and leaves the panel centered at the same spot as it started.

Example:

pre-transform-rotate2d: 45deg;


pre-transform-scale2d

Sets 2 dimensional X/Y scale factors that apply to the quad for this panel prior to 3 dimensional transforms. This scaling applies without perspective and leaves the panel centered at the same spot as it started. Default of 1.0 means no scaling, 0.5 would be half size.

Examples: 

pre-transform-scale2d: 0.8;
pre-transform-scale2d: 0.4, 0.6;


saturation

Sets the amount of saturation to apply to the panel and all it's children during composition. Default of 1.0 means no adjustment, 0.0 means fully desaturated to gray scale, greater than 1.0 means over-saturation.

Example:

saturation: 0.4;


sound

Specifies a sound name to play when this selector is applied.

Example:

sound: "whoosh_in";


sound-out

Specifies a sound name to play when this selector is removed.

Example:

sound-out: "whoosh_out";


sound-trans

Specifies a sound name to play when this selector is applied and the value was previously set.

Example:

sound-trans: "whoosh_in";


text-align

Specifies the horizontal text alignment for text within this panel, defaults to left.

Possible values:

  • left
  • center
  • right

Examples: 

text-align: left;
text-align: center;


text-decoration

Specifies the decoration for text within this panel, defaults to none. Possible values: none, underline, line-through.

Example:

text-decoration: underline;


text-overflow

Controls truncation of text that doesn't fit in a panel. "clip" means to simply truncate (on char boundaries), "ellipsis" means to end with '...', and "shrink" means lower the font size to fit. "noclip" allows the text to overflow based on the "overflow" style.

We default to ellipsis, which is contrary to the normal CSS spec.

Examples:

text-overflow: ellipsis;
text-overflow: clip;
text-overflow: shrink;
text-overflow: noclip;


text-shadow

Specifies text shadows. The shadow shape will match the text the panel can generate,and this is only meaningful for labels.

Syntax: text-shadow: <horizontal-offset-px> <vertical-offset-px> [blur-radius] [strength] <color>;

The shadow's blur radius and strength are optional and defaulted to 0 and 1.0 respectively.

Example: 

text-shadow: 2px 2px 8px 3.0 #333333b0;
text-shadow: 2px 2px #333333b0; /* blur-radius defaulting to 0 and strength to 1.0 */


text-shadow-fast

Specifies basic text drop shadows for fast rendering. Only meaningful for labels. Syntax takes horizontal offset pixels, vertical offset pixels and then shadow color.
Example:

text-shadow-fast: 2px 2px #333333b0;


text-transform

Specifies the transform for text within this panel, defaults to none. Possible values: none, uppercase, lowercase.

Example:

text-transform: uppercase;


texture-sampling

Controls texture sampling mode for the panel. Set to alpha-only to use the textures alpha data across all 3 color channels.

Examples:

texture-sampling: normal;
texture-sampling: alpha-only;


tooltip-arrow-position

Specifies where to point the arrow of a tooltip at on this panel. The first value controls how the arrow is positioned horizontally when the tooltip is to the top or bottom of the panel, and the second value controls how the arrow is positioned vertically when the tooltip is to the left or right of the panel. Default is '50% 50%'.

Example:

tooltip-arrow-position: 25% 50%;


tooltip-body-position

Specifies where to position the body of a tooltip relative to this panel. The first value controls how the body is aligned horizontally when the tooltip is to the top or bottom of the panel, and the second value controls how the body is aligned vertically when the tooltip is to the left or right of the panel. 0% means left/top aligned, 50% means center/middle aligned, and 100% means right/bottom aligned. Default is '0% 0%'.

Example:

tooltip-body-position: 50% 100%;


tooltip-position

Specifies where to position a tooltip relative to this panel. Valid options include 'left', 'top', 'right', and 'bottom'. List up to 4 positions to determine the order that positions are tried if the tooltip doesn't fully fit on screen. Default is 'right left bottom top'. If less than 4 positions are specified, the tooltip first tries the opposite of the specified position along the same axis before switching to the other axis.

Examples:

tooltip-position: bottom;
tooltip-position: left bottom;


transform

Sets the transforms to apply to the panel in 2d or 3d space. You can combine various transforms (comma separated) and they will be applied in order to create a 4x4 3d transform matrix. The possible operations are: translate3d( x, y, z ), translatex( x ), translatey( y ), translatez( z ), scale3d( x, y, z), rotate3d( x, y, z ), rotatex( x ), rotatey( y ), rotatez( z ).

Examples:

transform: translate3d( -100px, -100px, 0px );
transform: rotateZ( -32deg ) rotateX( 30deg ) translate3d( 125px, 520px, 230px );


transform-origin

Sets the transform origin about which transforms will be applied. Default is 50% 50% on the panel so a rotation/scale is centered.

Example: 

transform-origin: 50% 50%;


transition

Specifies which properties should transition smoothly to new values if a class/pseudo class changes the styles. Also specifies duration, timing function, and delay. Valid timing functions are: ease, ease-in, ease-out, ease-in-out, linear.

Example:

transition: position 2.0s ease-in-out 0.0s, perspective-origin 1.2s ease-in-out 0.8s;


transition-delay

Specifies the delay in seconds to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property.

Examples:

transition-delay: 0.0s;
transition-delay: 0.0s, 1.2s;


transition-duration

Specifies the durating in seconds to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property.

Examples:

transition-duration: 2.0s;
transition-duration: 2.0s, 1.2s, 1.2s, 4.0s, 2.0s;


transition-property

Specifies which properties should transition smoothly to new values if a class/pseudo class changes the styles.

Examples:

transition: position, transform, background-color;


transition-timing-function

Specifies the timing function to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property. Valid timing functions are: ease, ease-in, ease-out, ease-in-out, linear.

Examples:

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

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

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

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

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

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

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

Specifies a scale to apply to this panel's layout and all descendants. This scale happens at the layout level ratherthan the bitmap level, so things like text will increase their font size rather than just bitmap scaling.

Examples:

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

Controls the vertical alignment of content. To change both this and horizontal alignment in one property, see align. Defaults to top.

Possible values:

  • top
  • center/middle
  • bottom
  • center_nopixelsnap - centers but does not round to an integer (pixel)

Examples: 

vertical-align: bottom;
vertical-align: center;


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

Specifies a 'wash' color, which means a color that will be blended over the panel and all it's children at composition time, tinting them. The alpha value of the color determines the intensity of the tinting.

Example:

wash-color: #39b0d325;


wash-color-fast

Specifies a 'wash' color, which means a color that will be blended over the panel and all it's children at composition time, tinting them. The alpha value of the color determines the intensity of the tinting.

Example:

wash-color: #39b0d325;


white-space

Controls white-space wrapping on rendered text. "normal" means wrap on whitespace, "nowrap" means do no wrapping at all.

Examples:

white-space: normal;
white-space: nowrap;


width

Sets the width for this panel.

Possible values:

  • fit-children - Panel size is set to the required size of all children (default). Can be specified in pixels or percentage.
  • fill-parent-flow(<weight>) - Fills to remaining parent width. If multiple children are set to this value, weight is used to determine final width.
  • width-percentage(<percentage>) - Percentage of the panel's width, which allows you to enforce a particular aspect ratio.

Height percentage can be set in height.

Examples: 

width: 50px;
width: 20%;
width: fill-parent-flow(1.0); /* If three children are set to fill-parent-flow of 1.0 and the parent is 300px wide, each child will be 100px wide. */
width: width-percentage(70%);


x

Sets the x position for a panel, in pixels. Defaults to 0. Must not be in a flowing layout.


y

Sets the y position for a panel, in pixels. Defaults to 0. Must not be in a flowing layout.


z

Sets the z position for a panel, in pixels. Defaults to 0. Must not be in a flowing layout.


z-index

Sets the z-index for a panel, panels will be sorted and painted in order within a parent panel. The sorting first sorts by the z-pos computed from position and transforms, then if panels have matching zpos zindex is used. z-index is different than z-pos in that it doesn't affect rendering perspective, just paint/hit-test ordering. The default z-index value is 0, and any floating point value is accepted.

Example:

z-index: 1;
Level Design
Technical
Gameplay
General
Game Modes
Retrieved from "https://developer.valvesoftware.com/w/index.php?title=CSGO_Panorama_CSS_Properties&oldid=372647"