/* Import all components */ /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ Import this file into your LESS project to use Semantic UI without build tools */ /* Global */ /*! * # Semantic UI - Reset * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Reset *******************************/ /* Packaged Theme */ /******************************* Reset *******************************/ /* Site Theme */ /******************************* User Global Variables *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Reset *******************************/ /* Border-Box */ @import url('https://fonts.googleapis.com/css?family=Roboto Mono:400,700,400italic,700italic&subset=latin'); *, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; } /* iPad Input Shadows */ input[type="text"], input[type="email"], input[type="search"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; /* mobile firefox too! */ } /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Site * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged Theme */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site Theme */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Page *******************************/ html, body { height: 100%; } html { font-size: 14px; } body { margin: 0px; padding: 0px; overflow-x: hidden; min-width: 320px; background: #FDFDFA; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4285em; color: rgba(0, 0, 0, 0.87); font-smoothing: antialiased; } /******************************* Headers *******************************/ h1, h2, h3, h4, h5 { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; line-height: 1.28571429em; margin: calc(2rem - 0.14285714em ) 0em 1rem; font-weight: bold; padding: 0em; } h1 { min-height: 1rem; font-size: 2rem; } h2 { font-size: 1.71428571rem; } h3 { font-size: 1.28571429rem; } h4 { font-size: 1.07142857rem; } h5 { font-size: 1rem; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top: 0em; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child { margin-bottom: 0em; } /******************************* Text *******************************/ p { margin: 0em 0em 1em; line-height: 1.4285em; } p:first-child { margin-top: 0em; } p:last-child { margin-bottom: 0em; } /*------------------- Links --------------------*/ a { color: #4183C4; text-decoration: none; } a:hover { color: #1e70bf; text-decoration: none; } /******************************* Scrollbars *******************************/ /******************************* Highlighting *******************************/ /* Site */ ::-webkit-selection { background-color: #CCE2FF; color: rgba(0, 0, 0, 0.87); } ::-moz-selection { background-color: #CCE2FF; color: rgba(0, 0, 0, 0.87); } ::selection { background-color: #CCE2FF; color: rgba(0, 0, 0, 0.87); } /* Form */ textarea::-webkit-selection, input::-webkit-selection { background-color: rgba(100, 100, 100, 0.4); color: rgba(0, 0, 0, 0.87); } textarea::-moz-selection, input::-moz-selection { background-color: rgba(100, 100, 100, 0.4); color: rgba(0, 0, 0, 0.87); } textarea::selection, input::selection { background-color: rgba(100, 100, 100, 0.4); color: rgba(0, 0, 0, 0.87); } /* Force Simple Scrollbars */ body ::-webkit-scrollbar { -webkit-appearance: none; width: 10px; } body ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0px; } body ::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 5px; background: rgba(0, 0, 0, 0.25); transition: color 0.2s ease; } body ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.15); } body ::-webkit-scrollbar-thumb:hover { background: rgba(128, 135, 139, 0.8); } /* Inverted UI */ body .ui.inverted::-webkit-scrollbar-track, body .play-button.inverted::-webkit-scrollbar-track, body .download-button.inverted::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } body .ui.inverted::-webkit-scrollbar-thumb, body .play-button.inverted::-webkit-scrollbar-thumb, body .download-button.inverted::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } body .ui.inverted::-webkit-scrollbar-thumb:window-inactive, body .play-button.inverted::-webkit-scrollbar-thumb:window-inactive, body .download-button.inverted::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } body .ui.inverted::-webkit-scrollbar-thumb:hover, body .play-button.inverted::-webkit-scrollbar-thumb:hover, body .download-button.inverted::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /* Elements */ /*! * # Semantic UI - Button * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Button *******************************/ /*------------------- Element --------------------*/ /* Button */ /* Button defaults to using same height as input globally */ /* Text */ /* Internal Shadow */ /* Box Shadow */ /* Icon */ /* Loader */ /* @willChange: box-shadow, transform, opacity, color, background; */ /*------------------- Group --------------------*/ /*------------------- States --------------------*/ /* Hovered */ /* Focused */ /* Disabled */ /* Pressed Down */ /* Active */ /* Active + Hovered */ /* Loading */ /*------------------- Types --------------------*/ /* Or */ /* Icon */ /* Labeled */ /* hypotenuse of triangle */ /* Labeled Icon */ /* Inverted */ /* Basic */ /* Basic Hover */ /* Basic Focus */ /* Basic Down */ /* Basic Active */ /* Basic Inverted */ /* Basic Group */ /*------------------- Variations --------------------*/ /* Colors */ /* Colored */ /* Inverted */ /* Ordinality */ /* Compact */ /* Attached */ /* Floated */ /* Animated */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Button *******************************/ .ui.button, .play-button.button, .ui.play-button, .download-button.button, .ui.download-button { cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: baseline; background: #E0E1E2 none; color: rgba(0, 0, 0, 0.6); font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin: 0em 0.25em 0em 0em; padding: 0.78571429em 1.5em 0.78571429em; text-transform: none; text-shadow: none; font-weight: bold; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: 0.28571429rem; box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; user-select: none; transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; will-change: ''; -webkit-tap-highlight-color: transparent; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.button:hover, .play-button.button:hover, .ui.play-button:hover, .download-button.button:hover, .ui.download-button:hover { background-color: #CACBCD; background-image: none; box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; color: rgba(0, 0, 0, 0.8); } .ui.button:hover .icon, .play-button.button:hover .icon, .ui.play-button:hover .icon, .download-button.button:hover .icon, .ui.download-button:hover .icon { opacity: 0.85; } /*-------------- Focus ---------------*/ .ui.button:focus, .play-button.button:focus, .ui.play-button:focus, .download-button.button:focus, .ui.download-button:focus { background-color: #CACBCD; color: rgba(0, 0, 0, 0.8); background-image: '' !important; box-shadow: '' !important; } .ui.button:focus .icon, .play-button.button:focus .icon, .ui.play-button:focus .icon, .download-button.button:focus .icon, .ui.download-button:focus .icon { opacity: 0.85; } /*-------------- Down ---------------*/ .ui.button:active, .ui.active.button:active, .play-button.button:active, .play-button.active.button:active, .ui.play-button:active, .ui.active.play-button:active, .download-button.button:active, .download-button.active.button:active, .ui.download-button:active, .ui.active.download-button:active { background-color: #BABBBC; background-image: ''; color: rgba(0, 0, 0, 0.9); box-shadow: 0px 0px 0px 1px transparent inset, none; } /*-------------- Active ---------------*/ .ui.active.button, .play-button.active.button, .ui.active.play-button, .download-button.active.button, .ui.active.download-button { background-color: #C0C1C2; background-image: none; box-shadow: 0px 0px 0px 1px transparent inset; color: rgba(0, 0, 0, 0.95); } .ui.active.button:hover, .play-button.active.button:hover, .ui.active.play-button:hover, .download-button.active.button:hover, .ui.active.download-button:hover { background-color: #C0C1C2; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.button:active, .play-button.active.button:active, .ui.active.play-button:active, .download-button.active.button:active, .ui.active.download-button:active { background-color: #C0C1C2; background-image: none; } /*-------------- Loading ---------------*/ /* Specificity hack */ .ui.loading.loading.loading.loading.loading.loading.button, .play-button.loading.loading.loading.loading.loading.loading.button, .ui.loading.loading.loading.loading.loading.loading.play-button, .download-button.loading.loading.loading.loading.loading.loading.button, .ui.loading.loading.loading.loading.loading.loading.download-button { position: relative; cursor: default; text-shadow: none !important; color: transparent !important; opacity: 1; pointer-events: auto; transition: all 0s linear, opacity 0.1s ease; } .ui.loading.button:before, .play-button.loading.button:before, .ui.loading.play-button:before, .download-button.loading.button:before, .ui.loading.download-button:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.15); } .ui.loading.button:after, .play-button.loading.button:after, .ui.loading.play-button:after, .download-button.loading.button:after, .ui.loading.download-button:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #FFFFFF transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } .ui.labeled.icon.loading.button .icon, .play-button.labeled.icon.loading.button .icon, .ui.labeled.icon.loading.play-button .icon, .download-button.labeled.icon.loading.button .icon, .ui.labeled.icon.loading.download-button .icon { background-color: transparent; box-shadow: none; } @keyframes button-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ui.basic.loading.button:not(.inverted):before, .play-button.basic.loading.button:not(.inverted):before, .ui.basic.loading.play-button:not(.inverted):before, .download-button.basic.loading.button:not(.inverted):before, .ui.basic.loading.download-button:not(.inverted):before { border-color: rgba(0, 0, 0, 0.1); } .ui.basic.loading.button:not(.inverted):after, .play-button.basic.loading.button:not(.inverted):after, .ui.basic.loading.play-button:not(.inverted):after, .download-button.basic.loading.button:not(.inverted):after, .ui.basic.loading.download-button:not(.inverted):after { border-top-color: #42495F; } /*------------------- Disabled --------------------*/ .ui.buttons .disabled.button, .ui.disabled.button, .ui.button:disabled, .ui.disabled.button:hover, .ui.disabled.active.button, .play-button.buttons .disabled.button, .play-button.disabled.button, .play-button.button:disabled, .play-button.disabled.button:hover, .play-button.disabled.active.button, .ui.buttons .disabled.play-button, .ui.disabled.play-button, .ui.play-button:disabled, .ui.disabled.play-button:hover, .ui.disabled.active.play-button, .download-button.buttons .disabled.button, .download-button.disabled.button, .download-button.button:disabled, .download-button.disabled.button:hover, .download-button.disabled.active.button, .ui.buttons .disabled.download-button, .ui.disabled.download-button, .ui.download-button:disabled, .ui.disabled.download-button:hover, .ui.disabled.active.download-button { cursor: default; opacity: 0.45 !important; background-image: none !important; box-shadow: none !important; pointer-events: none !important; } /* Basic Group With Disabled */ .ui.basic.buttons .ui.disabled.button, .play-button.basic.buttons .play-button.disabled.button, .ui.basic.buttons .ui.disabled.play-button, .download-button.basic.buttons .download-button.disabled.button, .ui.basic.buttons .ui.disabled.download-button { border-color: rgba(34, 36, 38, 0.5); } /******************************* Types *******************************/ /*------------------- Animated --------------------*/ .ui.animated.button, .play-button.animated.button, .ui.animated.play-button, .download-button.animated.button, .ui.animated.download-button { position: relative; overflow: hidden; padding-right: 0em !important; vertical-align: middle; z-index: 1; } .ui.animated.button .content, .play-button.animated.button .content, .ui.animated.play-button .content, .download-button.animated.button .content, .ui.animated.download-button .content { will-change: transform, opacity; } .ui.animated.button .visible.content, .play-button.animated.button .visible.content, .ui.animated.play-button .visible.content, .download-button.animated.button .visible.content, .ui.animated.download-button .visible.content { position: relative; margin-right: 1.5em; } .ui.animated.button .hidden.content, .play-button.animated.button .hidden.content, .ui.animated.play-button .hidden.content, .download-button.animated.button .hidden.content, .ui.animated.download-button .hidden.content { position: absolute; width: 100%; } /* Horizontal */ .ui.animated.button .visible.content, .ui.animated.button .hidden.content, .play-button.animated.button .visible.content, .play-button.animated.button .hidden.content, .ui.animated.play-button .visible.content, .ui.animated.play-button .hidden.content, .download-button.animated.button .visible.content, .download-button.animated.button .hidden.content, .ui.animated.download-button .visible.content, .ui.animated.download-button .hidden.content { transition: right 0.3s ease 0s; } .ui.animated.button .visible.content, .play-button.animated.button .visible.content, .ui.animated.play-button .visible.content, .download-button.animated.button .visible.content, .ui.animated.download-button .visible.content { left: auto; right: 0%; } .ui.animated.button .hidden.content, .play-button.animated.button .hidden.content, .ui.animated.play-button .hidden.content, .download-button.animated.button .hidden.content, .ui.animated.download-button .hidden.content { top: 50%; left: auto; right: -100%; margin-top: -0.5em; } .ui.animated.button:focus .visible.content, .ui.animated.button:hover .visible.content, .play-button.animated.button:focus .visible.content, .play-button.animated.button:hover .visible.content, .ui.animated.play-button:focus .visible.content, .ui.animated.play-button:hover .visible.content, .download-button.animated.button:focus .visible.content, .download-button.animated.button:hover .visible.content, .ui.animated.download-button:focus .visible.content, .ui.animated.download-button:hover .visible.content { left: auto; right: 200%; } .ui.animated.button:focus .hidden.content, .ui.animated.button:hover .hidden.content, .play-button.animated.button:focus .hidden.content, .play-button.animated.button:hover .hidden.content, .ui.animated.play-button:focus .hidden.content, .ui.animated.play-button:hover .hidden.content, .download-button.animated.button:focus .hidden.content, .download-button.animated.button:hover .hidden.content, .ui.animated.download-button:focus .hidden.content, .ui.animated.download-button:hover .hidden.content { left: auto; right: 0%; } /* Vertical */ .ui.vertical.animated.button .visible.content, .ui.vertical.animated.button .hidden.content, .play-button.vertical.animated.button .visible.content, .play-button.vertical.animated.button .hidden.content, .ui.vertical.animated.play-button .visible.content, .ui.vertical.animated.play-button .hidden.content, .download-button.vertical.animated.button .visible.content, .download-button.vertical.animated.button .hidden.content, .ui.vertical.animated.download-button .visible.content, .ui.vertical.animated.download-button .hidden.content { transition: top 0.3s ease, transform 0.3s ease; } .ui.vertical.animated.button .visible.content, .play-button.vertical.animated.button .visible.content, .ui.vertical.animated.play-button .visible.content, .download-button.vertical.animated.button .visible.content, .ui.vertical.animated.download-button .visible.content { transform: translateY(0%); right: auto; } .ui.vertical.animated.button .hidden.content, .play-button.vertical.animated.button .hidden.content, .ui.vertical.animated.play-button .hidden.content, .download-button.vertical.animated.button .hidden.content, .ui.vertical.animated.download-button .hidden.content { top: -50%; left: 0%; right: auto; } .ui.vertical.animated.button:focus .visible.content, .ui.vertical.animated.button:hover .visible.content, .play-button.vertical.animated.button:focus .visible.content, .play-button.vertical.animated.button:hover .visible.content, .ui.vertical.animated.play-button:focus .visible.content, .ui.vertical.animated.play-button:hover .visible.content, .download-button.vertical.animated.button:focus .visible.content, .download-button.vertical.animated.button:hover .visible.content, .ui.vertical.animated.download-button:focus .visible.content, .ui.vertical.animated.download-button:hover .visible.content { transform: translateY(200%); right: auto; } .ui.vertical.animated.button:focus .hidden.content, .ui.vertical.animated.button:hover .hidden.content, .play-button.vertical.animated.button:focus .hidden.content, .play-button.vertical.animated.button:hover .hidden.content, .ui.vertical.animated.play-button:focus .hidden.content, .ui.vertical.animated.play-button:hover .hidden.content, .download-button.vertical.animated.button:focus .hidden.content, .download-button.vertical.animated.button:hover .hidden.content, .ui.vertical.animated.download-button:focus .hidden.content, .ui.vertical.animated.download-button:hover .hidden.content { top: 50%; right: auto; } /* Fade */ .ui.fade.animated.button .visible.content, .ui.fade.animated.button .hidden.content, .play-button.fade.animated.button .visible.content, .play-button.fade.animated.button .hidden.content, .ui.fade.animated.play-button .visible.content, .ui.fade.animated.play-button .hidden.content, .download-button.fade.animated.button .visible.content, .download-button.fade.animated.button .hidden.content, .ui.fade.animated.download-button .visible.content, .ui.fade.animated.download-button .hidden.content { transition: opacity 0.3s ease, transform 0.3s ease; } .ui.fade.animated.button .visible.content, .play-button.fade.animated.button .visible.content, .ui.fade.animated.play-button .visible.content, .download-button.fade.animated.button .visible.content, .ui.fade.animated.download-button .visible.content { left: auto; right: auto; opacity: 1; transform: scale(1); } .ui.fade.animated.button .hidden.content, .play-button.fade.animated.button .hidden.content, .ui.fade.animated.play-button .hidden.content, .download-button.fade.animated.button .hidden.content, .ui.fade.animated.download-button .hidden.content { opacity: 0; left: 0%; right: auto; transform: scale(1.5); } .ui.fade.animated.button:focus .visible.content, .ui.fade.animated.button:hover .visible.content, .play-button.fade.animated.button:focus .visible.content, .play-button.fade.animated.button:hover .visible.content, .ui.fade.animated.play-button:focus .visible.content, .ui.fade.animated.play-button:hover .visible.content, .download-button.fade.animated.button:focus .visible.content, .download-button.fade.animated.button:hover .visible.content, .ui.fade.animated.download-button:focus .visible.content, .ui.fade.animated.download-button:hover .visible.content { left: auto; right: auto; opacity: 0; transform: scale(0.75); } .ui.fade.animated.button:focus .hidden.content, .ui.fade.animated.button:hover .hidden.content, .play-button.fade.animated.button:focus .hidden.content, .play-button.fade.animated.button:hover .hidden.content, .ui.fade.animated.play-button:focus .hidden.content, .ui.fade.animated.play-button:hover .hidden.content, .download-button.fade.animated.button:focus .hidden.content, .download-button.fade.animated.button:hover .hidden.content, .ui.fade.animated.download-button:focus .hidden.content, .ui.fade.animated.download-button:hover .hidden.content { left: 0%; right: auto; opacity: 1; transform: scale(1); } /*------------------- Inverted --------------------*/ .ui.inverted.button, .play-button.inverted.button, .ui.inverted.play-button, .download-button.inverted.button, .ui.inverted.download-button { box-shadow: 0px 0px 0px 2px #FFFFFF inset !important; background: transparent none; color: #FFFFFF; text-shadow: none !important; } /* Group */ .ui.inverted.buttons .button, .play-button.inverted.buttons .button, .ui.inverted.buttons .play-button, .download-button.inverted.buttons .button, .ui.inverted.buttons .download-button { margin: 0px 0px 0px -2px; } .ui.inverted.buttons .button:first-child, .play-button.inverted.buttons .button:first-child, .ui.inverted.buttons .play-button:first-child, .download-button.inverted.buttons .button:first-child, .ui.inverted.buttons .download-button:first-child { margin-left: 0em; } .ui.inverted.vertical.buttons .button, .play-button.inverted.vertical.buttons .button, .ui.inverted.vertical.buttons .play-button, .download-button.inverted.vertical.buttons .button, .ui.inverted.vertical.buttons .download-button { margin: 0px 0px -2px 0px; } .ui.inverted.vertical.buttons .button:first-child, .play-button.inverted.vertical.buttons .button:first-child, .ui.inverted.vertical.buttons .play-button:first-child, .download-button.inverted.vertical.buttons .button:first-child, .ui.inverted.vertical.buttons .download-button:first-child { margin-top: 0em; } /* States */ /* Hover */ .ui.inverted.button:hover, .play-button.inverted.button:hover, .ui.inverted.play-button:hover, .download-button.inverted.button:hover, .ui.inverted.download-button:hover { background: #FFFFFF; box-shadow: 0px 0px 0px 2px #FFFFFF inset !important; color: rgba(0, 0, 0, 0.8); } /* Active / Focus */ .ui.inverted.button:focus, .ui.inverted.button.active, .play-button.inverted.button:focus, .play-button.inverted.button.active, .ui.inverted.play-button:focus, .ui.inverted.play-button.active, .download-button.inverted.button:focus, .download-button.inverted.button.active, .ui.inverted.download-button:focus, .ui.inverted.download-button.active { background: #FFFFFF; box-shadow: 0px 0px 0px 2px #FFFFFF inset !important; color: rgba(0, 0, 0, 0.8); } /* Active Focus */ .ui.inverted.button.active:focus, .play-button.inverted.button.active:focus, .ui.inverted.play-button.active:focus, .download-button.inverted.button.active:focus, .ui.inverted.download-button.active:focus { background: #DCDDDE; box-shadow: 0px 0px 0px 2px #DCDDDE inset !important; color: rgba(0, 0, 0, 0.8); } /*------------------- Labeled Button --------------------*/ .ui.labeled.button:not(.icon), .play-button.labeled.button:not(.icon), .ui.labeled.play-button:not(.icon), .download-button.labeled.button:not(.icon), .ui.labeled.download-button:not(.icon) { display: inline-flex; flex-direction: row; background: none !important; padding: 0px !important; border: none !important; box-shadow: none !important; } .ui.labeled.button > .button, .play-button.labeled.button > .button, .ui.labeled.play-button > .play-button, .download-button.labeled.button > .button, .ui.labeled.download-button > .download-button { margin: 0px; } .ui.labeled.button > .label, .play-button.labeled.button > .label, .ui.labeled.play-button > .label, .download-button.labeled.button > .label, .ui.labeled.download-button > .label { display: flex; align-items: center; margin: 0px 0px 0px -1px !important; padding: ''; font-size: 1em; border-color: rgba(34, 36, 38, 0.15); } /* Tag */ .ui.labeled.button > .tag.label:before, .play-button.labeled.button > .tag.label:before, .ui.labeled.play-button > .tag.label:before, .download-button.labeled.button > .tag.label:before, .ui.labeled.download-button > .tag.label:before { width: 1.85em; height: 1.85em; } /* Right */ .ui.labeled.button:not([class*="left labeled"]) > .button, .play-button.labeled.button:not([class*="left labeled"]) > .button, .ui.labeled.play-button:not([class*="left labeled"]) > .play-button, .download-button.labeled.button:not([class*="left labeled"]) > .button, .ui.labeled.download-button:not([class*="left labeled"]) > .download-button { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .ui.labeled.button:not([class*="left labeled"]) > .label, .play-button.labeled.button:not([class*="left labeled"]) > .label, .ui.labeled.play-button:not([class*="left labeled"]) > .label, .download-button.labeled.button:not([class*="left labeled"]) > .label, .ui.labeled.download-button:not([class*="left labeled"]) > .label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /* Left Side */ .ui[class*="left labeled"].button > .button, .play-button[class*="left labeled"].button > .button, .ui[class*="left labeled"].play-button > .play-button, .download-button[class*="left labeled"].button > .button, .ui[class*="left labeled"].download-button > .download-button { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .ui[class*="left labeled"].button > .label, .play-button[class*="left labeled"].button > .label, .ui[class*="left labeled"].play-button > .label, .download-button[class*="left labeled"].button > .label, .ui[class*="left labeled"].download-button > .label { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } /*------------------- Social --------------------*/ /* Facebook */ .ui.facebook.button, .play-button.facebook.button, .ui.facebook.play-button, .download-button.facebook.button, .ui.facebook.download-button { background-color: #3B5998; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.facebook.button:hover, .play-button.facebook.button:hover, .ui.facebook.play-button:hover, .download-button.facebook.button:hover, .ui.facebook.download-button:hover { background-color: #304d8a; color: #FFFFFF; text-shadow: none; } .ui.facebook.button:active, .play-button.facebook.button:active, .ui.facebook.play-button:active, .download-button.facebook.button:active, .ui.facebook.download-button:active { background-color: #2d4373; color: #FFFFFF; text-shadow: none; } /* Twitter */ .ui.twitter.button, .play-button.twitter.button, .ui.twitter.play-button, .download-button.twitter.button, .ui.twitter.download-button { background-color: #55ACEE; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.twitter.button:hover, .play-button.twitter.button:hover, .ui.twitter.play-button:hover, .download-button.twitter.button:hover, .ui.twitter.download-button:hover { background-color: #35a2f4; color: #FFFFFF; text-shadow: none; } .ui.twitter.button:active, .play-button.twitter.button:active, .ui.twitter.play-button:active, .download-button.twitter.button:active, .ui.twitter.download-button:active { background-color: #2795e9; color: #FFFFFF; text-shadow: none; } /* Google Plus */ .ui.google.plus.button, .play-button.google.plus.button, .ui.google.plus.play-button, .download-button.google.plus.button, .ui.google.plus.download-button { background-color: #DD4B39; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.google.plus.button:hover, .play-button.google.plus.button:hover, .ui.google.plus.play-button:hover, .download-button.google.plus.button:hover, .ui.google.plus.download-button:hover { background-color: #e0321c; color: #FFFFFF; text-shadow: none; } .ui.google.plus.button:active, .play-button.google.plus.button:active, .ui.google.plus.play-button:active, .download-button.google.plus.button:active, .ui.google.plus.download-button:active { background-color: #c23321; color: #FFFFFF; text-shadow: none; } /* Linked In */ .ui.linkedin.button, .play-button.linkedin.button, .ui.linkedin.play-button, .download-button.linkedin.button, .ui.linkedin.download-button { background-color: #1F88BE; color: #FFFFFF; text-shadow: none; } .ui.linkedin.button:hover, .play-button.linkedin.button:hover, .ui.linkedin.play-button:hover, .download-button.linkedin.button:hover, .ui.linkedin.download-button:hover { background-color: #147baf; color: #FFFFFF; text-shadow: none; } .ui.linkedin.button:active, .play-button.linkedin.button:active, .ui.linkedin.play-button:active, .download-button.linkedin.button:active, .ui.linkedin.download-button:active { background-color: #186992; color: #FFFFFF; text-shadow: none; } /* YouTube */ .ui.youtube.button, .play-button.youtube.button, .ui.youtube.play-button, .download-button.youtube.button, .ui.youtube.download-button { background-color: #CC181E; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.youtube.button:hover, .play-button.youtube.button:hover, .ui.youtube.play-button:hover, .download-button.youtube.button:hover, .ui.youtube.download-button:hover { background-color: #bd0d13; color: #FFFFFF; text-shadow: none; } .ui.youtube.button:active, .play-button.youtube.button:active, .ui.youtube.play-button:active, .download-button.youtube.button:active, .ui.youtube.download-button:active { background-color: #9e1317; color: #FFFFFF; text-shadow: none; } /* Instagram */ .ui.instagram.button, .play-button.instagram.button, .ui.instagram.play-button, .download-button.instagram.button, .ui.instagram.download-button { background-color: #49769C; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.instagram.button:hover, .play-button.instagram.button:hover, .ui.instagram.play-button:hover, .download-button.instagram.button:hover, .ui.instagram.download-button:hover { background-color: #3d698e; color: #FFFFFF; text-shadow: none; } .ui.instagram.button:active, .play-button.instagram.button:active, .ui.instagram.play-button:active, .download-button.instagram.button:active, .ui.instagram.download-button:active { background-color: #395c79; color: #FFFFFF; text-shadow: none; } /* Pinterest */ .ui.pinterest.button, .play-button.pinterest.button, .ui.pinterest.play-button, .download-button.pinterest.button, .ui.pinterest.download-button { background-color: #BD081C; color: #FFFFFF; text-shadow: none; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.pinterest.button:hover, .play-button.pinterest.button:hover, .ui.pinterest.play-button:hover, .download-button.pinterest.button:hover, .ui.pinterest.download-button:hover { background-color: #ac0013; color: #FFFFFF; text-shadow: none; } .ui.pinterest.button:active, .play-button.pinterest.button:active, .ui.pinterest.play-button:active, .download-button.pinterest.button:active, .ui.pinterest.download-button:active { background-color: #8c0615; color: #FFFFFF; text-shadow: none; } /* VK */ .ui.vk.button, .play-button.vk.button, .ui.vk.play-button, .download-button.vk.button, .ui.vk.download-button { background-color: #4D7198; color: #FFFFFF; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.vk.button:hover, .play-button.vk.button:hover, .ui.vk.play-button:hover, .download-button.vk.button:hover, .ui.vk.download-button:hover { background-color: #41648a; color: #FFFFFF; } .ui.vk.button:active, .play-button.vk.button:active, .ui.vk.play-button:active, .download-button.vk.button:active, .ui.vk.download-button:active { background-color: #3c5876; color: #FFFFFF; } /*-------------- Icon ---------------*/ .ui.button > .icon:not(.button), .play-button.button > .icon:not(.button), .ui.play-button > .icon:not(.button), .download-button.button > .icon:not(.button), .ui.download-button > .icon:not(.button) { height: 0.85714286em; opacity: 0.8; margin: 0em 0.42857143em 0em -0.21428571em; transition: opacity 0.1s ease; vertical-align: ''; color: ''; } .ui.button:not(.icon) > .icon:not(.button):not(.dropdown), .play-button.button:not(.icon) > .icon:not(.button):not(.dropdown), .ui.play-button:not(.icon) > .icon:not(.button):not(.dropdown), .download-button.button:not(.icon) > .icon:not(.button):not(.dropdown), .ui.download-button:not(.icon) > .icon:not(.button):not(.dropdown) { margin: 0em 0.42857143em 0em -0.21428571em; } .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown), .play-button.button:not(.icon) > .right.icon:not(.button):not(.dropdown), .ui.play-button:not(.icon) > .right.icon:not(.button):not(.dropdown), .download-button.button:not(.icon) > .right.icon:not(.button):not(.dropdown), .ui.download-button:not(.icon) > .right.icon:not(.button):not(.dropdown) { margin: 0em -0.21428571em 0em 0.42857143em; } /******************************* Variations *******************************/ /*------------------- Floated --------------------*/ .ui[class*="left floated"].buttons, .ui[class*="left floated"].button, .play-button[class*="left floated"].buttons, .play-button[class*="left floated"].button, .ui[class*="left floated"].play-button, .download-button[class*="left floated"].buttons, .download-button[class*="left floated"].button, .ui[class*="left floated"].download-button { float: left; margin-left: 0em; margin-right: 0.25em; } .ui[class*="right floated"].buttons, .ui[class*="right floated"].button, .play-button[class*="right floated"].buttons, .play-button[class*="right floated"].button, .ui[class*="right floated"].play-button, .download-button[class*="right floated"].buttons, .download-button[class*="right floated"].button, .ui[class*="right floated"].download-button { float: right; margin-right: 0em; margin-left: 0.25em; } /*------------------- Compact --------------------*/ .ui.compact.buttons .button, .ui.compact.button, .play-button.compact.buttons .button, .play-button.compact.button, .ui.compact.buttons .play-button, .ui.compact.play-button, .download-button.compact.buttons .button, .download-button.compact.button, .ui.compact.buttons .download-button, .ui.compact.download-button { padding: 0.58928571em 1.125em 0.58928571em; } .ui.compact.icon.buttons .button, .ui.compact.icon.button, .play-button.compact.icon.buttons .button, .play-button.compact.icon.button, .ui.compact.icon.buttons .play-button, .ui.compact.icon.play-button, .download-button.compact.icon.buttons .button, .download-button.compact.icon.button, .ui.compact.icon.buttons .download-button, .ui.compact.icon.download-button { padding: 0.58928571em 0.58928571em 0.58928571em; } .ui.compact.labeled.icon.buttons .button, .ui.compact.labeled.icon.button, .play-button.compact.labeled.icon.buttons .button, .play-button.compact.labeled.icon.button, .ui.compact.labeled.icon.buttons .play-button, .ui.compact.labeled.icon.play-button, .download-button.compact.labeled.icon.buttons .button, .download-button.compact.labeled.icon.button, .ui.compact.labeled.icon.buttons .download-button, .ui.compact.labeled.icon.download-button { padding: 0.58928571em 3.69642857em 0.58928571em; } /*------------------- Sizes --------------------*/ .ui.mini.buttons .button, .ui.mini.buttons .or, .ui.mini.button, .play-button.mini.buttons .button, .play-button.mini.buttons .or, .play-button.mini.button, .ui.mini.buttons .play-button, .ui.mini.play-button, .download-button.mini.buttons .button, .download-button.mini.buttons .or, .download-button.mini.button, .ui.mini.buttons .download-button, .ui.mini.download-button { font-size: 0.78571429rem; } .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.tiny.button, .play-button.tiny.buttons .button, .play-button.tiny.buttons .or, .play-button.tiny.button, .ui.tiny.buttons .play-button, .ui.tiny.play-button, .download-button.tiny.buttons .button, .download-button.tiny.buttons .or, .download-button.tiny.button, .ui.tiny.buttons .download-button, .ui.tiny.download-button { font-size: 0.85714286rem; } .ui.small.buttons .button, .ui.small.buttons .or, .ui.small.button, .play-button.small.buttons .button, .play-button.small.buttons .or, .play-button.small.button, .ui.small.buttons .play-button, .ui.small.play-button, .download-button.small.buttons .button, .download-button.small.buttons .or, .download-button.small.button, .ui.small.buttons .download-button, .ui.small.download-button { font-size: 0.92857143rem; } .ui.buttons .button, .ui.buttons .or, .ui.button, .play-button.buttons .button, .play-button.buttons .or, .play-button.button, .ui.buttons .play-button, .ui.play-button, .download-button.buttons .button, .download-button.buttons .or, .download-button.button, .ui.buttons .download-button, .ui.download-button { font-size: 1rem; } .ui.large.buttons .button, .ui.large.buttons .or, .ui.large.button, .play-button.large.buttons .button, .play-button.large.buttons .or, .play-button.large.button, .ui.large.buttons .play-button, .ui.large.play-button, .download-button.large.buttons .button, .download-button.large.buttons .or, .download-button.large.button, .ui.large.buttons .download-button, .ui.large.download-button { font-size: 1.14285714rem; } .ui.big.buttons .button, .ui.big.buttons .or, .ui.big.button, .play-button.big.buttons .button, .play-button.big.buttons .or, .play-button.big.button, .ui.big.buttons .play-button, .ui.big.play-button, .download-button.big.buttons .button, .download-button.big.buttons .or, .download-button.big.button, .ui.big.buttons .download-button, .ui.big.download-button { font-size: 1.28571429rem; } .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.huge.button, .play-button.huge.buttons .button, .play-button.huge.buttons .or, .play-button.huge.button, .ui.huge.buttons .play-button, .ui.huge.play-button, .download-button.huge.buttons .button, .download-button.huge.buttons .or, .download-button.huge.button, .ui.huge.buttons .download-button, .ui.huge.download-button { font-size: 1.42857143rem; } .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.massive.button, .play-button.massive.buttons .button, .play-button.massive.buttons .or, .play-button.massive.button, .ui.massive.buttons .play-button, .ui.massive.play-button, .download-button.massive.buttons .button, .download-button.massive.buttons .or, .download-button.massive.button, .ui.massive.buttons .download-button, .ui.massive.download-button { font-size: 1.71428571rem; } /*-------------- Icon Only ---------------*/ .ui.icon.buttons .button, .ui.icon.button, .play-button.icon.buttons .button, .play-button.icon.button, .ui.icon.buttons .play-button, .ui.icon.play-button, .download-button.icon.buttons .button, .download-button.icon.button, .ui.icon.buttons .download-button, .ui.icon.download-button { padding: 0.78571429em 0.78571429em 0.78571429em; } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon, .play-button.icon.buttons .button > .icon, .play-button.icon.button > .icon, .ui.icon.buttons .play-button > .icon, .ui.icon.play-button > .icon, .download-button.icon.buttons .button > .icon, .download-button.icon.button > .icon, .ui.icon.buttons .download-button > .icon, .ui.icon.download-button > .icon { opacity: 0.9; margin: 0em !important; vertical-align: top; } /*------------------- Basic --------------------*/ .ui.basic.buttons .button, .ui.basic.button, .play-button.basic.buttons .button, .play-button.basic.button, .ui.basic.buttons .play-button, .ui.basic.play-button, .download-button.basic.buttons .button, .download-button.basic.button, .ui.basic.buttons .download-button, .ui.basic.download-button { background: transparent none !important; color: rgba(0, 0, 0, 0.6) !important; font-weight: normal; border-radius: 0.28571429rem; text-transform: none; text-shadow: none !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons, .play-button.basic.buttons, .download-button.basic.buttons { box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; } .ui.basic.buttons .button, .play-button.basic.buttons .button, .ui.basic.buttons .play-button, .download-button.basic.buttons .button, .ui.basic.buttons .download-button { border-radius: 0em; } .ui.basic.buttons .button:hover, .ui.basic.button:hover, .play-button.basic.buttons .button:hover, .play-button.basic.button:hover, .ui.basic.buttons .play-button:hover, .ui.basic.play-button:hover, .download-button.basic.buttons .button:hover, .download-button.basic.button:hover, .ui.basic.buttons .download-button:hover, .ui.basic.download-button:hover { background: #FFFFFF !important; color: rgba(0, 0, 0, 0.8) !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:focus, .ui.basic.button:focus, .play-button.basic.buttons .button:focus, .play-button.basic.button:focus, .ui.basic.buttons .play-button:focus, .ui.basic.play-button:focus, .download-button.basic.buttons .button:focus, .download-button.basic.button:focus, .ui.basic.buttons .download-button:focus, .ui.basic.download-button:focus { background: #FFFFFF !important; color: rgba(0, 0, 0, 0.8) !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:active, .ui.basic.button:active, .play-button.basic.buttons .button:active, .play-button.basic.button:active, .ui.basic.buttons .play-button:active, .ui.basic.play-button:active, .download-button.basic.buttons .button:active, .download-button.basic.button:active, .ui.basic.buttons .download-button:active, .ui.basic.download-button:active { background: #F8F8F8 !important; color: rgba(0, 0, 0, 0.9) !important; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .active.button, .ui.basic.active.button, .play-button.basic.buttons .active.button, .play-button.basic.active.button, .ui.basic.buttons .active.play-button, .ui.basic.active.play-button, .download-button.basic.buttons .active.button, .download-button.basic.active.button, .ui.basic.buttons .active.download-button, .ui.basic.active.download-button { background: rgba(0, 0, 0, 0.05) !important; box-shadow: '' !important; color: rgba(0, 0, 0, 0.95); } .ui.basic.buttons .active.button:hover, .ui.basic.active.button:hover, .play-button.basic.buttons .active.button:hover, .play-button.basic.active.button:hover, .ui.basic.buttons .active.play-button:hover, .ui.basic.active.play-button:hover, .download-button.basic.buttons .active.button:hover, .download-button.basic.active.button:hover, .ui.basic.buttons .active.download-button:hover, .ui.basic.active.download-button:hover { background-color: rgba(0, 0, 0, 0.05); } /* Vertical */ .ui.basic.buttons .button:hover, .play-button.basic.buttons .button:hover, .ui.basic.buttons .play-button:hover, .download-button.basic.buttons .button:hover, .ui.basic.buttons .download-button:hover { box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset; } .ui.basic.buttons .button:active, .play-button.basic.buttons .button:active, .ui.basic.buttons .play-button:active, .download-button.basic.buttons .button:active, .ui.basic.buttons .download-button:active { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset; } .ui.basic.buttons .active.button, .play-button.basic.buttons .active.button, .ui.basic.buttons .active.play-button, .download-button.basic.buttons .active.button, .ui.basic.buttons .active.download-button { box-shadow: '' !important; } /* Standard Basic Inverted */ .ui.basic.inverted.buttons .button, .ui.basic.inverted.button, .play-button.basic.inverted.buttons .button, .play-button.basic.inverted.button, .ui.basic.inverted.buttons .play-button, .ui.basic.inverted.play-button, .download-button.basic.inverted.buttons .button, .download-button.basic.inverted.button, .ui.basic.inverted.buttons .download-button, .ui.basic.inverted.download-button { background-color: transparent !important; color: #F9FAFB !important; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; } .ui.basic.inverted.buttons .button:hover, .ui.basic.inverted.button:hover, .play-button.basic.inverted.buttons .button:hover, .play-button.basic.inverted.button:hover, .ui.basic.inverted.buttons .play-button:hover, .ui.basic.inverted.play-button:hover, .download-button.basic.inverted.buttons .button:hover, .download-button.basic.inverted.button:hover, .ui.basic.inverted.buttons .download-button:hover, .ui.basic.inverted.download-button:hover { color: #FFFFFF !important; box-shadow: 0px 0px 0px 2px #ffffff inset !important; } .ui.basic.inverted.buttons .button:focus, .ui.basic.inverted.button:focus, .play-button.basic.inverted.buttons .button:focus, .play-button.basic.inverted.button:focus, .ui.basic.inverted.buttons .play-button:focus, .ui.basic.inverted.play-button:focus, .download-button.basic.inverted.buttons .button:focus, .download-button.basic.inverted.button:focus, .ui.basic.inverted.buttons .download-button:focus, .ui.basic.inverted.download-button:focus { color: #FFFFFF !important; box-shadow: 0px 0px 0px 2px #ffffff inset !important; } .ui.basic.inverted.buttons .button:active, .ui.basic.inverted.button:active, .play-button.basic.inverted.buttons .button:active, .play-button.basic.inverted.button:active, .ui.basic.inverted.buttons .play-button:active, .ui.basic.inverted.play-button:active, .download-button.basic.inverted.buttons .button:active, .download-button.basic.inverted.button:active, .ui.basic.inverted.buttons .download-button:active, .ui.basic.inverted.download-button:active { background-color: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important; } .ui.basic.inverted.buttons .active.button, .ui.basic.inverted.active.button, .play-button.basic.inverted.buttons .active.button, .play-button.basic.inverted.active.button, .ui.basic.inverted.buttons .active.play-button, .ui.basic.inverted.active.play-button, .download-button.basic.inverted.buttons .active.button, .download-button.basic.inverted.active.button, .ui.basic.inverted.buttons .active.download-button, .ui.basic.inverted.active.download-button { background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF; text-shadow: none; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset; } .ui.basic.inverted.buttons .active.button:hover, .ui.basic.inverted.active.button:hover, .play-button.basic.inverted.buttons .active.button:hover, .play-button.basic.inverted.active.button:hover, .ui.basic.inverted.buttons .active.play-button:hover, .ui.basic.inverted.active.play-button:hover, .download-button.basic.inverted.buttons .active.button:hover, .download-button.basic.inverted.active.button:hover, .ui.basic.inverted.buttons .active.download-button:hover, .ui.basic.inverted.active.download-button:hover { background-color: rgba(255, 255, 255, 0.15); box-shadow: 0px 0px 0px 2px #ffffff inset !important; } /* Basic Group */ .ui.basic.buttons .button, .play-button.basic.buttons .button, .ui.basic.buttons .play-button, .download-button.basic.buttons .button, .ui.basic.buttons .download-button { border-left: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.vertical.buttons .button, .play-button.basic.vertical.buttons .button, .ui.basic.vertical.buttons .play-button, .download-button.basic.vertical.buttons .button, .ui.basic.vertical.buttons .download-button { border-left: none; } .ui.basic.vertical.buttons .button, .play-button.basic.vertical.buttons .button, .ui.basic.vertical.buttons .play-button, .download-button.basic.vertical.buttons .button, .ui.basic.vertical.buttons .download-button { border-left-width: 0px; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.basic.vertical.buttons .button:first-child, .play-button.basic.vertical.buttons .button:first-child, .ui.basic.vertical.buttons .play-button:first-child, .download-button.basic.vertical.buttons .button:first-child, .ui.basic.vertical.buttons .download-button:first-child { border-top-width: 0px; } /*-------------- Labeled Icon ---------------*/ .ui.labeled.icon.buttons .button, .ui.labeled.icon.button, .play-button.labeled.icon.buttons .button, .play-button.labeled.icon.button, .ui.labeled.icon.buttons .play-button, .ui.labeled.icon.play-button, .download-button.labeled.icon.buttons .button, .download-button.labeled.icon.button, .ui.labeled.icon.buttons .download-button, .ui.labeled.icon.download-button { position: relative; padding-left: 4.07142857em !important; padding-right: 1.5em !important; } /* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon, .play-button.labeled.icon.buttons > .button > .icon, .play-button.labeled.icon.button > .icon, .ui.labeled.icon.buttons > .play-button > .icon, .ui.labeled.icon.play-button > .icon, .download-button.labeled.icon.buttons > .button > .icon, .download-button.labeled.icon.button > .icon, .ui.labeled.icon.buttons > .download-button > .icon, .ui.labeled.icon.download-button > .icon { position: absolute; height: 100%; line-height: 1; border-radius: 0px; border-top-left-radius: inherit; border-bottom-left-radius: inherit; text-align: center; margin: 0em; width: 2.57142857em; background-color: rgba(0, 0, 0, 0.05); color: ''; box-shadow: -1px 0px 0px 0px transparent inset; } /* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon, .play-button.labeled.icon.buttons > .button > .icon, .play-button.labeled.icon.button > .icon, .ui.labeled.icon.buttons > .play-button > .icon, .ui.labeled.icon.play-button > .icon, .download-button.labeled.icon.buttons > .button > .icon, .download-button.labeled.icon.button > .icon, .ui.labeled.icon.buttons > .download-button > .icon, .ui.labeled.icon.download-button > .icon { top: 0em; left: 0em; } /* Right Labeled */ .ui[class*="right labeled"].icon.button, .play-button[class*="right labeled"].icon.button, .ui[class*="right labeled"].icon.play-button, .download-button[class*="right labeled"].icon.button, .ui[class*="right labeled"].icon.download-button { padding-right: 4.07142857em !important; padding-left: 1.5em !important; } .ui[class*="right labeled"].icon.button > .icon, .play-button[class*="right labeled"].icon.button > .icon, .ui[class*="right labeled"].icon.play-button > .icon, .download-button[class*="right labeled"].icon.button > .icon, .ui[class*="right labeled"].icon.download-button > .icon { left: auto; right: 0em; border-radius: 0px; border-top-right-radius: inherit; border-bottom-right-radius: inherit; box-shadow: 1px 0px 0px 0px transparent inset; } .ui.labeled.icon.buttons > .button > .icon:before, .ui.labeled.icon.button > .icon:before, .ui.labeled.icon.buttons > .button > .icon:after, .ui.labeled.icon.button > .icon:after, .play-button.labeled.icon.buttons > .button > .icon:before, .play-button.labeled.icon.button > .icon:before, .play-button.labeled.icon.buttons > .button > .icon:after, .play-button.labeled.icon.button > .icon:after, .ui.labeled.icon.buttons > .play-button > .icon:before, .ui.labeled.icon.play-button > .icon:before, .ui.labeled.icon.buttons > .play-button > .icon:after, .ui.labeled.icon.play-button > .icon:after, .download-button.labeled.icon.buttons > .button > .icon:before, .download-button.labeled.icon.button > .icon:before, .download-button.labeled.icon.buttons > .button > .icon:after, .download-button.labeled.icon.button > .icon:after, .ui.labeled.icon.buttons > .download-button > .icon:before, .ui.labeled.icon.download-button > .icon:before, .ui.labeled.icon.buttons > .download-button > .icon:after, .ui.labeled.icon.download-button > .icon:after { display: block; position: absolute; width: 100%; top: 50%; text-align: center; transform: translateY(-50%); } .ui.labeled.icon.buttons .button > .icon, .play-button.labeled.icon.buttons .button > .icon, .ui.labeled.icon.buttons .play-button > .icon, .download-button.labeled.icon.buttons .button > .icon, .ui.labeled.icon.buttons .download-button > .icon { border-radius: 0em; } .ui.labeled.icon.buttons .button:first-child > .icon, .play-button.labeled.icon.buttons .button:first-child > .icon, .ui.labeled.icon.buttons .play-button:first-child > .icon, .download-button.labeled.icon.buttons .button:first-child > .icon, .ui.labeled.icon.buttons .download-button:first-child > .icon { border-top-left-radius: 0.28571429rem; border-bottom-left-radius: 0.28571429rem; } .ui.labeled.icon.buttons .button:last-child > .icon, .play-button.labeled.icon.buttons .button:last-child > .icon, .ui.labeled.icon.buttons .play-button:last-child > .icon, .download-button.labeled.icon.buttons .button:last-child > .icon, .ui.labeled.icon.buttons .download-button:last-child > .icon { border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } .ui.vertical.labeled.icon.buttons .button:first-child > .icon, .play-button.vertical.labeled.icon.buttons .button:first-child > .icon, .ui.vertical.labeled.icon.buttons .play-button:first-child > .icon, .download-button.vertical.labeled.icon.buttons .button:first-child > .icon, .ui.vertical.labeled.icon.buttons .download-button:first-child > .icon { border-radius: 0em; border-top-left-radius: 0.28571429rem; } .ui.vertical.labeled.icon.buttons .button:last-child > .icon, .play-button.vertical.labeled.icon.buttons .button:last-child > .icon, .ui.vertical.labeled.icon.buttons .play-button:last-child > .icon, .download-button.vertical.labeled.icon.buttons .button:last-child > .icon, .ui.vertical.labeled.icon.buttons .download-button:last-child > .icon { border-radius: 0em; border-bottom-left-radius: 0.28571429rem; } /* Fluid Labeled */ .ui.fluid[class*="left labeled"].icon.button, .ui.fluid[class*="right labeled"].icon.button, .play-button.fluid[class*="left labeled"].icon.button, .play-button.fluid[class*="right labeled"].icon.button, .ui.fluid[class*="left labeled"].icon.play-button, .ui.fluid[class*="right labeled"].icon.play-button, .download-button.fluid[class*="left labeled"].icon.button, .download-button.fluid[class*="right labeled"].icon.button, .ui.fluid[class*="left labeled"].icon.download-button, .ui.fluid[class*="right labeled"].icon.download-button { padding-left: 1.5em !important; padding-right: 1.5em !important; } /*-------------- Toggle ---------------*/ /* Toggle (Modifies active state to give affordances) */ .ui.toggle.buttons .active.button, .ui.buttons .button.toggle.active, .ui.button.toggle.active, .play-button.toggle.buttons .active.button, .play-button.buttons .button.toggle.active, .play-button.button.toggle.active, .ui.toggle.buttons .active.play-button, .ui.buttons .play-button.toggle.active, .ui.play-button.toggle.active, .download-button.toggle.buttons .active.button, .download-button.buttons .button.toggle.active, .download-button.button.toggle.active, .ui.toggle.buttons .active.download-button, .ui.buttons .download-button.toggle.active, .ui.download-button.toggle.active { background-color: #3FC863 !important; box-shadow: none !important; text-shadow: none; color: #FFFFFF !important; } .ui.button.toggle.active:hover, .play-button.button.toggle.active:hover, .ui.play-button.toggle.active:hover, .download-button.button.toggle.active:hover, .ui.download-button.toggle.active:hover { background-color: #2ebf54 !important; text-shadow: none; color: #FFFFFF !important; } /*-------------- Circular ---------------*/ .ui.circular.button, .play-button.circular.button, .ui.circular.play-button, .download-button.circular.button, .ui.circular.download-button { border-radius: 10em; } .ui.circular.button > .icon, .play-button.circular.button > .icon, .ui.circular.play-button > .icon, .download-button.circular.button > .icon, .ui.circular.download-button > .icon { width: 1em; vertical-align: baseline; } /*------------------- Or Buttons --------------------*/ .ui.buttons .or, .play-button.buttons .or, .download-button.buttons .or { position: relative; width: 0.3em; height: 2.57142857em; z-index: 3; } .ui.buttons .or:before, .play-button.buttons .or:before, .download-button.buttons .or:before { position: absolute; text-align: center; border-radius: 500rem; content: 'or'; top: 50%; left: 50%; background-color: #FFFFFF; text-shadow: none; margin-top: -0.89285714em; margin-left: -0.89285714em; width: 1.78571429em; height: 1.78571429em; line-height: 1.78571429em; color: rgba(0, 0, 0, 0.4); font-style: normal; font-weight: bold; box-shadow: 0px 0px 0px 1px transparent inset; } .ui.buttons .or[data-text]:before, .play-button.buttons .or[data-text]:before, .download-button.buttons .or[data-text]:before { content: attr(data-text); } /* Fluid Or */ .ui.fluid.buttons .or, .play-button.fluid.buttons .or, .download-button.fluid.buttons .or { width: 0em !important; } .ui.fluid.buttons .or:after, .play-button.fluid.buttons .or:after, .download-button.fluid.buttons .or:after { display: none; } /*------------------- Attached --------------------*/ /* Singular */ .ui.attached.button, .play-button.attached.button, .ui.attached.play-button, .download-button.attached.button, .ui.attached.download-button { position: relative; display: block; margin: 0em; border-radius: 0em; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important; } /* Top / Bottom */ .ui.attached.top.button, .play-button.attached.top.button, .ui.attached.top.play-button, .download-button.attached.top.button, .ui.attached.top.download-button { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.attached.bottom.button, .play-button.attached.bottom.button, .ui.attached.bottom.play-button, .download-button.attached.bottom.button, .ui.attached.bottom.download-button { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Left / Right */ .ui.left.attached.button, .play-button.left.attached.button, .ui.left.attached.play-button, .download-button.left.attached.button, .ui.left.attached.download-button { display: inline-block; border-left: none; text-align: right; padding-right: 0.75em; border-radius: 0.28571429rem 0em 0em 0.28571429rem; } .ui.right.attached.button, .play-button.right.attached.button, .ui.right.attached.play-button, .download-button.right.attached.button, .ui.right.attached.download-button { display: inline-block; text-align: left; padding-left: 0.75em; border-radius: 0em 0.28571429rem 0.28571429rem 0em; } /* Plural */ .ui.attached.buttons, .play-button.attached.buttons, .download-button.attached.buttons { position: relative; display: flex; border-radius: 0em; width: auto !important; z-index: 2; margin-left: -1px; margin-right: -1px; } .ui.attached.buttons .button, .play-button.attached.buttons .button, .ui.attached.buttons .play-button, .download-button.attached.buttons .button, .ui.attached.buttons .download-button { margin: 0em; } .ui.attached.buttons .button:first-child, .play-button.attached.buttons .button:first-child, .ui.attached.buttons .play-button:first-child, .download-button.attached.buttons .button:first-child, .ui.attached.buttons .download-button:first-child { border-radius: 0em; } .ui.attached.buttons .button:last-child, .play-button.attached.buttons .button:last-child, .ui.attached.buttons .play-button:last-child, .download-button.attached.buttons .button:last-child, .ui.attached.buttons .download-button:last-child { border-radius: 0em; } /* Top / Bottom */ .ui[class*="top attached"].buttons, .play-button[class*="top attached"].buttons, .download-button[class*="top attached"].buttons { margin-bottom: -1px; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui[class*="top attached"].buttons .button:first-child, .play-button[class*="top attached"].buttons .button:first-child, .ui[class*="top attached"].buttons .play-button:first-child, .download-button[class*="top attached"].buttons .button:first-child, .ui[class*="top attached"].buttons .download-button:first-child { border-radius: 0.28571429rem 0em 0em 0em; } .ui[class*="top attached"].buttons .button:last-child, .play-button[class*="top attached"].buttons .button:last-child, .ui[class*="top attached"].buttons .play-button:last-child, .download-button[class*="top attached"].buttons .button:last-child, .ui[class*="top attached"].buttons .download-button:last-child { border-radius: 0em 0.28571429rem 0em 0em; } .ui[class*="bottom attached"].buttons, .play-button[class*="bottom attached"].buttons, .download-button[class*="bottom attached"].buttons { margin-top: -1px; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui[class*="bottom attached"].buttons .button:first-child, .play-button[class*="bottom attached"].buttons .button:first-child, .ui[class*="bottom attached"].buttons .play-button:first-child, .download-button[class*="bottom attached"].buttons .button:first-child, .ui[class*="bottom attached"].buttons .download-button:first-child { border-radius: 0em 0em 0em 0.28571429rem; } .ui[class*="bottom attached"].buttons .button:last-child, .play-button[class*="bottom attached"].buttons .button:last-child, .ui[class*="bottom attached"].buttons .play-button:last-child, .download-button[class*="bottom attached"].buttons .button:last-child, .ui[class*="bottom attached"].buttons .download-button:last-child { border-radius: 0em 0em 0.28571429rem 0em; } /* Left / Right */ .ui[class*="left attached"].buttons, .play-button[class*="left attached"].buttons, .download-button[class*="left attached"].buttons { display: inline-flex; margin-right: 0em; margin-left: -1px; border-radius: 0em 0.28571429rem 0.28571429rem 0em; } .ui[class*="left attached"].buttons .button:first-child, .play-button[class*="left attached"].buttons .button:first-child, .ui[class*="left attached"].buttons .play-button:first-child, .download-button[class*="left attached"].buttons .button:first-child, .ui[class*="left attached"].buttons .download-button:first-child { margin-left: -1px; border-radius: 0em 0.28571429rem 0em 0em; } .ui[class*="left attached"].buttons .button:last-child, .play-button[class*="left attached"].buttons .button:last-child, .ui[class*="left attached"].buttons .play-button:last-child, .download-button[class*="left attached"].buttons .button:last-child, .ui[class*="left attached"].buttons .download-button:last-child { margin-left: -1px; border-radius: 0em 0em 0.28571429rem 0em; } .ui[class*="right attached"].buttons, .play-button[class*="right attached"].buttons, .download-button[class*="right attached"].buttons { display: inline-flex; margin-left: 0em; margin-right: -1px; border-radius: 0.28571429rem 0em 0em 0.28571429rem; } .ui[class*="right attached"].buttons .button:first-child, .play-button[class*="right attached"].buttons .button:first-child, .ui[class*="right attached"].buttons .play-button:first-child, .download-button[class*="right attached"].buttons .button:first-child, .ui[class*="right attached"].buttons .download-button:first-child { margin-left: -1px; border-radius: 0.28571429rem 0em 0em 0em; } .ui[class*="right attached"].buttons .button:last-child, .play-button[class*="right attached"].buttons .button:last-child, .ui[class*="right attached"].buttons .play-button:last-child, .download-button[class*="right attached"].buttons .button:last-child, .ui[class*="right attached"].buttons .download-button:last-child { margin-left: -1px; border-radius: 0em 0em 0em 0.28571429rem; } /*------------------- Fluid --------------------*/ .ui.fluid.buttons, .ui.fluid.button, .play-button.fluid.buttons, .play-button.fluid.button, .ui.fluid.play-button, .download-button.fluid.buttons, .download-button.fluid.button, .ui.fluid.download-button { width: 100%; } .ui.fluid.button, .play-button.fluid.button, .ui.fluid.play-button, .download-button.fluid.button, .ui.fluid.download-button { display: block; } .ui.two.buttons, .play-button.two.buttons, .download-button.two.buttons { width: 100%; } .ui.two.buttons > .button, .play-button.two.buttons > .button, .ui.two.buttons > .play-button, .download-button.two.buttons > .button, .ui.two.buttons > .download-button { width: 50%; } .ui.three.buttons, .play-button.three.buttons, .download-button.three.buttons { width: 100%; } .ui.three.buttons > .button, .play-button.three.buttons > .button, .ui.three.buttons > .play-button, .download-button.three.buttons > .button, .ui.three.buttons > .download-button { width: 33.333%; } .ui.four.buttons, .play-button.four.buttons, .download-button.four.buttons { width: 100%; } .ui.four.buttons > .button, .play-button.four.buttons > .button, .ui.four.buttons > .play-button, .download-button.four.buttons > .button, .ui.four.buttons > .download-button { width: 25%; } .ui.five.buttons, .play-button.five.buttons, .download-button.five.buttons { width: 100%; } .ui.five.buttons > .button, .play-button.five.buttons > .button, .ui.five.buttons > .play-button, .download-button.five.buttons > .button, .ui.five.buttons > .download-button { width: 20%; } .ui.six.buttons, .play-button.six.buttons, .download-button.six.buttons { width: 100%; } .ui.six.buttons > .button, .play-button.six.buttons > .button, .ui.six.buttons > .play-button, .download-button.six.buttons > .button, .ui.six.buttons > .download-button { width: 16.666%; } .ui.seven.buttons, .play-button.seven.buttons, .download-button.seven.buttons { width: 100%; } .ui.seven.buttons > .button, .play-button.seven.buttons > .button, .ui.seven.buttons > .play-button, .download-button.seven.buttons > .button, .ui.seven.buttons > .download-button { width: 14.285%; } .ui.eight.buttons, .play-button.eight.buttons, .download-button.eight.buttons { width: 100%; } .ui.eight.buttons > .button, .play-button.eight.buttons > .button, .ui.eight.buttons > .play-button, .download-button.eight.buttons > .button, .ui.eight.buttons > .download-button { width: 12.500%; } .ui.nine.buttons, .play-button.nine.buttons, .download-button.nine.buttons { width: 100%; } .ui.nine.buttons > .button, .play-button.nine.buttons > .button, .ui.nine.buttons > .play-button, .download-button.nine.buttons > .button, .ui.nine.buttons > .download-button { width: 11.11%; } .ui.ten.buttons, .play-button.ten.buttons, .download-button.ten.buttons { width: 100%; } .ui.ten.buttons > .button, .play-button.ten.buttons > .button, .ui.ten.buttons > .play-button, .download-button.ten.buttons > .button, .ui.ten.buttons > .download-button { width: 10%; } .ui.eleven.buttons, .play-button.eleven.buttons, .download-button.eleven.buttons { width: 100%; } .ui.eleven.buttons > .button, .play-button.eleven.buttons > .button, .ui.eleven.buttons > .play-button, .download-button.eleven.buttons > .button, .ui.eleven.buttons > .download-button { width: 9.09%; } .ui.twelve.buttons, .play-button.twelve.buttons, .download-button.twelve.buttons { width: 100%; } .ui.twelve.buttons > .button, .play-button.twelve.buttons > .button, .ui.twelve.buttons > .play-button, .download-button.twelve.buttons > .button, .ui.twelve.buttons > .download-button { width: 8.3333%; } /* Fluid Vertical Buttons */ .ui.fluid.vertical.buttons, .ui.fluid.vertical.buttons > .button, .play-button.fluid.vertical.buttons, .play-button.fluid.vertical.buttons > .button, .ui.fluid.vertical.buttons > .play-button, .download-button.fluid.vertical.buttons, .download-button.fluid.vertical.buttons > .button, .ui.fluid.vertical.buttons > .download-button { display: flex; width: auto; } .ui.two.vertical.buttons > .button, .play-button.two.vertical.buttons > .button, .ui.two.vertical.buttons > .play-button, .download-button.two.vertical.buttons > .button, .ui.two.vertical.buttons > .download-button { height: 50%; } .ui.three.vertical.buttons > .button, .play-button.three.vertical.buttons > .button, .ui.three.vertical.buttons > .play-button, .download-button.three.vertical.buttons > .button, .ui.three.vertical.buttons > .download-button { height: 33.333%; } .ui.four.vertical.buttons > .button, .play-button.four.vertical.buttons > .button, .ui.four.vertical.buttons > .play-button, .download-button.four.vertical.buttons > .button, .ui.four.vertical.buttons > .download-button { height: 25%; } .ui.five.vertical.buttons > .button, .play-button.five.vertical.buttons > .button, .ui.five.vertical.buttons > .play-button, .download-button.five.vertical.buttons > .button, .ui.five.vertical.buttons > .download-button { height: 20%; } .ui.six.vertical.buttons > .button, .play-button.six.vertical.buttons > .button, .ui.six.vertical.buttons > .play-button, .download-button.six.vertical.buttons > .button, .ui.six.vertical.buttons > .download-button { height: 16.666%; } .ui.seven.vertical.buttons > .button, .play-button.seven.vertical.buttons > .button, .ui.seven.vertical.buttons > .play-button, .download-button.seven.vertical.buttons > .button, .ui.seven.vertical.buttons > .download-button { height: 14.285%; } .ui.eight.vertical.buttons > .button, .play-button.eight.vertical.buttons > .button, .ui.eight.vertical.buttons > .play-button, .download-button.eight.vertical.buttons > .button, .ui.eight.vertical.buttons > .download-button { height: 12.500%; } .ui.nine.vertical.buttons > .button, .play-button.nine.vertical.buttons > .button, .ui.nine.vertical.buttons > .play-button, .download-button.nine.vertical.buttons > .button, .ui.nine.vertical.buttons > .download-button { height: 11.11%; } .ui.ten.vertical.buttons > .button, .play-button.ten.vertical.buttons > .button, .ui.ten.vertical.buttons > .play-button, .download-button.ten.vertical.buttons > .button, .ui.ten.vertical.buttons > .download-button { height: 10%; } .ui.eleven.vertical.buttons > .button, .play-button.eleven.vertical.buttons > .button, .ui.eleven.vertical.buttons > .play-button, .download-button.eleven.vertical.buttons > .button, .ui.eleven.vertical.buttons > .download-button { height: 9.09%; } .ui.twelve.vertical.buttons > .button, .play-button.twelve.vertical.buttons > .button, .ui.twelve.vertical.buttons > .play-button, .download-button.twelve.vertical.buttons > .button, .ui.twelve.vertical.buttons > .download-button { height: 8.3333%; } /*------------------- Colors --------------------*/ /*--- Black ---*/ .ui.black.buttons .button, .ui.black.button, .play-button.black.buttons .button, .play-button.black.button, .ui.black.buttons .play-button, .ui.black.play-button, .download-button.black.buttons .button, .download-button.black.button, .ui.black.buttons .download-button, .ui.black.download-button { background-color: #1B1C1D; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.black.button, .play-button.black.button, .ui.black.play-button, .download-button.black.button, .ui.black.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.black.buttons .button:hover, .ui.black.button:hover, .play-button.black.buttons .button:hover, .play-button.black.button:hover, .ui.black.buttons .play-button:hover, .ui.black.play-button:hover, .download-button.black.buttons .button:hover, .download-button.black.button:hover, .ui.black.buttons .download-button:hover, .ui.black.download-button:hover { background-color: #27292a; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .button:focus, .ui.black.button:focus, .play-button.black.buttons .button:focus, .play-button.black.button:focus, .ui.black.buttons .play-button:focus, .ui.black.play-button:focus, .download-button.black.buttons .button:focus, .download-button.black.button:focus, .ui.black.buttons .download-button:focus, .ui.black.download-button:focus { background-color: #2f3032; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .button:active, .ui.black.button:active, .play-button.black.buttons .button:active, .play-button.black.button:active, .ui.black.buttons .play-button:active, .ui.black.play-button:active, .download-button.black.buttons .button:active, .download-button.black.button:active, .ui.black.buttons .download-button:active, .ui.black.download-button:active { background-color: #343637; color: #FFFFFF; text-shadow: none; } .ui.black.buttons .active.button, .ui.black.buttons .active.button:active, .ui.black.active.button, .ui.black.button .active.button:active, .play-button.black.buttons .active.button, .play-button.black.buttons .active.button:active, .play-button.black.active.button, .play-button.black.button .active.button:active, .ui.black.buttons .active.play-button, .ui.black.buttons .active.play-button:active, .ui.black.active.play-button, .ui.black.play-button .active.play-button:active, .download-button.black.buttons .active.button, .download-button.black.buttons .active.button:active, .download-button.black.active.button, .download-button.black.button .active.button:active, .ui.black.buttons .active.download-button, .ui.black.buttons .active.download-button:active, .ui.black.active.download-button, .ui.black.download-button .active.download-button:active { background-color: #0f0f10; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.black.buttons .button, .ui.basic.black.button, .play-button.basic.black.buttons .button, .play-button.basic.black.button, .ui.basic.black.buttons .play-button, .ui.basic.black.play-button, .download-button.basic.black.buttons .button, .download-button.basic.black.button, .ui.basic.black.buttons .download-button, .ui.basic.black.download-button { box-shadow: 0px 0px 0px 1px #1B1C1D inset !important; color: #1B1C1D !important; } .ui.basic.black.buttons .button:hover, .ui.basic.black.button:hover, .play-button.basic.black.buttons .button:hover, .play-button.basic.black.button:hover, .ui.basic.black.buttons .play-button:hover, .ui.basic.black.play-button:hover, .download-button.basic.black.buttons .button:hover, .download-button.basic.black.button:hover, .ui.basic.black.buttons .download-button:hover, .ui.basic.black.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #27292a inset !important; color: #27292a !important; } .ui.basic.black.buttons .button:focus, .ui.basic.black.button:focus, .play-button.basic.black.buttons .button:focus, .play-button.basic.black.button:focus, .ui.basic.black.buttons .play-button:focus, .ui.basic.black.play-button:focus, .download-button.basic.black.buttons .button:focus, .download-button.basic.black.button:focus, .ui.basic.black.buttons .download-button:focus, .ui.basic.black.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #2f3032 inset !important; color: #27292a !important; } .ui.basic.black.buttons .active.button, .ui.basic.black.active.button, .play-button.basic.black.buttons .active.button, .play-button.basic.black.active.button, .ui.basic.black.buttons .active.play-button, .ui.basic.black.active.play-button, .download-button.basic.black.buttons .active.button, .download-button.basic.black.active.button, .ui.basic.black.buttons .active.download-button, .ui.basic.black.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #0f0f10 inset !important; color: #343637 !important; } .ui.basic.black.buttons .button:active, .ui.basic.black.button:active, .play-button.basic.black.buttons .button:active, .play-button.basic.black.button:active, .ui.basic.black.buttons .play-button:active, .ui.basic.black.play-button:active, .download-button.basic.black.buttons .button:active, .download-button.basic.black.button:active, .ui.basic.black.buttons .download-button:active, .ui.basic.black.download-button:active { box-shadow: 0px 0px 0px 1px #343637 inset !important; color: #343637 !important; } .ui.buttons:not(.vertical) > .basic.black.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.black.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.black.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.black.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.black.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.black.buttons .button, .ui.inverted.black.button, .play-button.inverted.black.buttons .button, .play-button.inverted.black.button, .ui.inverted.black.buttons .play-button, .ui.inverted.black.play-button, .download-button.inverted.black.buttons .button, .download-button.inverted.black.button, .ui.inverted.black.buttons .download-button, .ui.inverted.black.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; color: #FFFFFF; } .ui.inverted.black.buttons .button:hover, .ui.inverted.black.button:hover, .ui.inverted.black.buttons .button:focus, .ui.inverted.black.button:focus, .ui.inverted.black.buttons .button.active, .ui.inverted.black.button.active, .ui.inverted.black.buttons .button:active, .ui.inverted.black.button:active, .play-button.inverted.black.buttons .button:hover, .play-button.inverted.black.button:hover, .play-button.inverted.black.buttons .button:focus, .play-button.inverted.black.button:focus, .play-button.inverted.black.buttons .button.active, .play-button.inverted.black.button.active, .play-button.inverted.black.buttons .button:active, .play-button.inverted.black.button:active, .ui.inverted.black.buttons .play-button:hover, .ui.inverted.black.play-button:hover, .ui.inverted.black.buttons .play-button:focus, .ui.inverted.black.play-button:focus, .ui.inverted.black.buttons .play-button.active, .ui.inverted.black.play-button.active, .ui.inverted.black.buttons .play-button:active, .ui.inverted.black.play-button:active, .download-button.inverted.black.buttons .button:hover, .download-button.inverted.black.button:hover, .download-button.inverted.black.buttons .button:focus, .download-button.inverted.black.button:focus, .download-button.inverted.black.buttons .button.active, .download-button.inverted.black.button.active, .download-button.inverted.black.buttons .button:active, .download-button.inverted.black.button:active, .ui.inverted.black.buttons .download-button:hover, .ui.inverted.black.download-button:hover, .ui.inverted.black.buttons .download-button:focus, .ui.inverted.black.download-button:focus, .ui.inverted.black.buttons .download-button.active, .ui.inverted.black.download-button.active, .ui.inverted.black.buttons .download-button:active, .ui.inverted.black.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.black.buttons .button:hover, .ui.inverted.black.button:hover, .play-button.inverted.black.buttons .button:hover, .play-button.inverted.black.button:hover, .ui.inverted.black.buttons .play-button:hover, .ui.inverted.black.play-button:hover, .download-button.inverted.black.buttons .button:hover, .download-button.inverted.black.button:hover, .ui.inverted.black.buttons .download-button:hover, .ui.inverted.black.download-button:hover { background-color: #000000; } .ui.inverted.black.buttons .button:focus, .ui.inverted.black.button:focus, .play-button.inverted.black.buttons .button:focus, .play-button.inverted.black.button:focus, .ui.inverted.black.buttons .play-button:focus, .ui.inverted.black.play-button:focus, .download-button.inverted.black.buttons .button:focus, .download-button.inverted.black.button:focus, .ui.inverted.black.buttons .download-button:focus, .ui.inverted.black.download-button:focus { background-color: #000000; } .ui.inverted.black.buttons .active.button, .ui.inverted.black.active.button, .play-button.inverted.black.buttons .active.button, .play-button.inverted.black.active.button, .ui.inverted.black.buttons .active.play-button, .ui.inverted.black.active.play-button, .download-button.inverted.black.buttons .active.button, .download-button.inverted.black.active.button, .ui.inverted.black.buttons .active.download-button, .ui.inverted.black.active.download-button { background-color: #000000; } .ui.inverted.black.buttons .button:active, .ui.inverted.black.button:active, .play-button.inverted.black.buttons .button:active, .play-button.inverted.black.button:active, .ui.inverted.black.buttons .play-button:active, .ui.inverted.black.play-button:active, .download-button.inverted.black.buttons .button:active, .download-button.inverted.black.button:active, .ui.inverted.black.buttons .download-button:active, .ui.inverted.black.download-button:active { background-color: #000000; } /* Inverted Basic */ .ui.inverted.black.basic.buttons .button, .ui.inverted.black.buttons .basic.button, .ui.inverted.black.basic.button, .play-button.inverted.black.basic.buttons .button, .play-button.inverted.black.buttons .basic.button, .play-button.inverted.black.basic.button, .ui.inverted.black.basic.buttons .play-button, .ui.inverted.black.buttons .basic.play-button, .ui.inverted.black.basic.play-button, .download-button.inverted.black.basic.buttons .button, .download-button.inverted.black.buttons .basic.button, .download-button.inverted.black.basic.button, .ui.inverted.black.basic.buttons .download-button, .ui.inverted.black.buttons .basic.download-button, .ui.inverted.black.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.black.basic.buttons .button:hover, .ui.inverted.black.buttons .basic.button:hover, .ui.inverted.black.basic.button:hover, .play-button.inverted.black.basic.buttons .button:hover, .play-button.inverted.black.buttons .basic.button:hover, .play-button.inverted.black.basic.button:hover, .ui.inverted.black.basic.buttons .play-button:hover, .ui.inverted.black.buttons .basic.play-button:hover, .ui.inverted.black.basic.play-button:hover, .download-button.inverted.black.basic.buttons .button:hover, .download-button.inverted.black.buttons .basic.button:hover, .download-button.inverted.black.basic.button:hover, .ui.inverted.black.basic.buttons .download-button:hover, .ui.inverted.black.buttons .basic.download-button:hover, .ui.inverted.black.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #FFFFFF !important; } .ui.inverted.black.basic.buttons .button:focus, .ui.inverted.black.basic.buttons .button:focus, .ui.inverted.black.basic.button:focus, .play-button.inverted.black.basic.buttons .button:focus, .play-button.inverted.black.basic.buttons .button:focus, .play-button.inverted.black.basic.button:focus, .ui.inverted.black.basic.buttons .play-button:focus, .ui.inverted.black.basic.buttons .play-button:focus, .ui.inverted.black.basic.play-button:focus, .download-button.inverted.black.basic.buttons .button:focus, .download-button.inverted.black.basic.buttons .button:focus, .download-button.inverted.black.basic.button:focus, .ui.inverted.black.basic.buttons .download-button:focus, .ui.inverted.black.basic.buttons .download-button:focus, .ui.inverted.black.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #545454 !important; } .ui.inverted.black.basic.buttons .active.button, .ui.inverted.black.buttons .basic.active.button, .ui.inverted.black.basic.active.button, .play-button.inverted.black.basic.buttons .active.button, .play-button.inverted.black.buttons .basic.active.button, .play-button.inverted.black.basic.active.button, .ui.inverted.black.basic.buttons .active.play-button, .ui.inverted.black.buttons .basic.active.play-button, .ui.inverted.black.basic.active.play-button, .download-button.inverted.black.basic.buttons .active.button, .download-button.inverted.black.buttons .basic.active.button, .download-button.inverted.black.basic.active.button, .ui.inverted.black.basic.buttons .active.download-button, .ui.inverted.black.buttons .basic.active.download-button, .ui.inverted.black.basic.active.download-button { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #FFFFFF !important; } .ui.inverted.black.basic.buttons .button:active, .ui.inverted.black.buttons .basic.button:active, .ui.inverted.black.basic.button:active, .play-button.inverted.black.basic.buttons .button:active, .play-button.inverted.black.buttons .basic.button:active, .play-button.inverted.black.basic.button:active, .ui.inverted.black.basic.buttons .play-button:active, .ui.inverted.black.buttons .basic.play-button:active, .ui.inverted.black.basic.play-button:active, .download-button.inverted.black.basic.buttons .button:active, .download-button.inverted.black.buttons .basic.button:active, .download-button.inverted.black.basic.button:active, .ui.inverted.black.basic.buttons .download-button:active, .ui.inverted.black.buttons .basic.download-button:active, .ui.inverted.black.basic.download-button:active { box-shadow: 0px 0px 0px 2px #000000 inset !important; color: #FFFFFF !important; } /*--- Grey ---*/ .ui.grey.buttons .button, .ui.grey.button, .ui.ui.button.editortools-btn.buttons .button, .ui.ui.button.editortools-btn.button, .play-button.grey.buttons .button, .play-button.grey.button, .ui.grey.buttons .play-button, .ui.grey.play-button, .download-button.grey.buttons .button, .download-button.grey.button, .ui.grey.buttons .download-button, .ui.grey.download-button, .ui.play-button.button.editortools-btn.buttons .button, .ui.play-button.button.editortools-btn.button, .ui.ui.play-button.editortools-btn.buttons .button, .ui.ui.play-button.editortools-btn.button, .ui.download-button.button.editortools-btn.buttons .button, .ui.download-button.button.editortools-btn.button, .ui.ui.download-button.editortools-btn.buttons .button, .ui.ui.download-button.editortools-btn.button { background-color: #42495F; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.grey.button, .ui.ui.button.editortools-btn.button, .play-button.grey.button, .ui.grey.play-button, .download-button.grey.button, .ui.grey.download-button, .ui.play-button.button.editortools-btn.button, .ui.ui.play-button.editortools-btn.button, .ui.download-button.button.editortools-btn.button, .ui.ui.download-button.editortools-btn.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.grey.buttons .button:hover, .ui.grey.button:hover, .ui.ui.button.editortools-btn.buttons .button:hover, .ui.ui.button.editortools-btn.button:hover, .play-button.grey.buttons .button:hover, .play-button.grey.button:hover, .ui.grey.buttons .play-button:hover, .ui.grey.play-button:hover, .download-button.grey.buttons .button:hover, .download-button.grey.button:hover, .ui.grey.buttons .download-button:hover, .ui.grey.download-button:hover, .ui.play-button.button.editortools-btn.buttons .button:hover, .ui.play-button.button.editortools-btn.button:hover, .ui.ui.play-button.editortools-btn.buttons .button:hover, .ui.ui.play-button.editortools-btn.button:hover, .ui.download-button.button.editortools-btn.buttons .button:hover, .ui.download-button.button.editortools-btn.button:hover, .ui.ui.download-button.editortools-btn.buttons .button:hover, .ui.ui.download-button.editortools-btn.button:hover { background-color: #4c556e; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .button:focus, .ui.grey.button:focus, .ui.ui.button.editortools-btn.buttons .button:focus, .ui.ui.button.editortools-btn.button:focus, .play-button.grey.buttons .button:focus, .play-button.grey.button:focus, .ui.grey.buttons .play-button:focus, .ui.grey.play-button:focus, .download-button.grey.buttons .button:focus, .download-button.grey.button:focus, .ui.grey.buttons .download-button:focus, .ui.grey.download-button:focus, .ui.play-button.button.editortools-btn.buttons .button:focus, .ui.play-button.button.editortools-btn.button:focus, .ui.ui.play-button.editortools-btn.buttons .button:focus, .ui.ui.play-button.editortools-btn.button:focus, .ui.download-button.button.editortools-btn.buttons .button:focus, .ui.download-button.button.editortools-btn.button:focus, .ui.ui.download-button.editortools-btn.buttons .button:focus, .ui.ui.download-button.editortools-btn.button:focus { background-color: #535b77; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .button:active, .ui.grey.button:active, .ui.ui.button.editortools-btn.buttons .button:active, .ui.ui.button.editortools-btn.button:active, .play-button.grey.buttons .button:active, .play-button.grey.button:active, .ui.grey.buttons .play-button:active, .ui.grey.play-button:active, .download-button.grey.buttons .button:active, .download-button.grey.button:active, .ui.grey.buttons .download-button:active, .ui.grey.download-button:active, .ui.play-button.button.editortools-btn.buttons .button:active, .ui.play-button.button.editortools-btn.button:active, .ui.ui.play-button.editortools-btn.buttons .button:active, .ui.ui.play-button.editortools-btn.button:active, .ui.download-button.button.editortools-btn.buttons .button:active, .ui.download-button.button.editortools-btn.button:active, .ui.ui.download-button.editortools-btn.buttons .button:active, .ui.ui.download-button.editortools-btn.button:active { background-color: #57607d; color: #FFFFFF; text-shadow: none; } .ui.grey.buttons .active.button, .ui.grey.buttons .active.button:active, .ui.grey.active.button, .ui.grey.button .active.button:active, .ui.ui.button.editortools-btn.buttons .active.button, .ui.ui.button.editortools-btn.buttons .active.button:active, .ui.ui.button.editortools-btn.active.button, .ui.ui.button.editortools-btn.button .active.button:active, .play-button.grey.buttons .active.button, .play-button.grey.buttons .active.button:active, .play-button.grey.active.button, .play-button.grey.button .active.button:active, .ui.grey.buttons .active.play-button, .ui.grey.buttons .active.play-button:active, .ui.grey.active.play-button, .ui.grey.play-button .active.play-button:active, .download-button.grey.buttons .active.button, .download-button.grey.buttons .active.button:active, .download-button.grey.active.button, .download-button.grey.button .active.button:active, .ui.grey.buttons .active.download-button, .ui.grey.buttons .active.download-button:active, .ui.grey.active.download-button, .ui.grey.download-button .active.download-button:active, .ui.play-button.button.editortools-btn.buttons .active.button, .ui.play-button.button.editortools-btn.buttons .active.button:active, .ui.play-button.button.editortools-btn.active.button, .ui.play-button.button.editortools-btn.button .active.button:active, .ui.ui.play-button.editortools-btn.buttons .active.button, .ui.ui.play-button.editortools-btn.buttons .active.button:active, .ui.ui.play-button.editortools-btn.active.button, .ui.ui.play-button.editortools-btn.button .active.button:active, .ui.download-button.button.editortools-btn.buttons .active.button, .ui.download-button.button.editortools-btn.buttons .active.button:active, .ui.download-button.button.editortools-btn.active.button, .ui.download-button.button.editortools-btn.button .active.button:active, .ui.ui.download-button.editortools-btn.buttons .active.button, .ui.ui.download-button.editortools-btn.buttons .active.button:active, .ui.ui.download-button.editortools-btn.active.button, .ui.ui.download-button.editortools-btn.button .active.button:active { background-color: #383d50; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.grey.buttons .button, .ui.basic.grey.button, .ui.basic.ui.button.editortools-btn.buttons .button, .ui.basic.ui.button.editortools-btn.button, .play-button.basic.grey.buttons .button, .play-button.basic.grey.button, .ui.basic.grey.buttons .play-button, .ui.basic.grey.play-button, .download-button.basic.grey.buttons .button, .download-button.basic.grey.button, .ui.basic.grey.buttons .download-button, .ui.basic.grey.download-button, .ui.basic.play-button.button.editortools-btn.buttons .button, .ui.basic.play-button.button.editortools-btn.button, .ui.basic.ui.play-button.editortools-btn.buttons .button, .ui.basic.ui.play-button.editortools-btn.button, .ui.basic.download-button.button.editortools-btn.buttons .button, .ui.basic.download-button.button.editortools-btn.button, .ui.basic.ui.download-button.editortools-btn.buttons .button, .ui.basic.ui.download-button.editortools-btn.button { box-shadow: 0px 0px 0px 1px #42495F inset !important; color: #42495F !important; } .ui.basic.grey.buttons .button:hover, .ui.basic.grey.button:hover, .ui.basic.ui.button.editortools-btn.buttons .button:hover, .ui.basic.ui.button.editortools-btn.button:hover, .play-button.basic.grey.buttons .button:hover, .play-button.basic.grey.button:hover, .ui.basic.grey.buttons .play-button:hover, .ui.basic.grey.play-button:hover, .download-button.basic.grey.buttons .button:hover, .download-button.basic.grey.button:hover, .ui.basic.grey.buttons .download-button:hover, .ui.basic.grey.download-button:hover, .ui.basic.play-button.button.editortools-btn.buttons .button:hover, .ui.basic.play-button.button.editortools-btn.button:hover, .ui.basic.ui.play-button.editortools-btn.buttons .button:hover, .ui.basic.ui.play-button.editortools-btn.button:hover, .ui.basic.download-button.button.editortools-btn.buttons .button:hover, .ui.basic.download-button.button.editortools-btn.button:hover, .ui.basic.ui.download-button.editortools-btn.buttons .button:hover, .ui.basic.ui.download-button.editortools-btn.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #4c556e inset !important; color: #4c556e !important; } .ui.basic.grey.buttons .button:focus, .ui.basic.grey.button:focus, .ui.basic.ui.button.editortools-btn.buttons .button:focus, .ui.basic.ui.button.editortools-btn.button:focus, .play-button.basic.grey.buttons .button:focus, .play-button.basic.grey.button:focus, .ui.basic.grey.buttons .play-button:focus, .ui.basic.grey.play-button:focus, .download-button.basic.grey.buttons .button:focus, .download-button.basic.grey.button:focus, .ui.basic.grey.buttons .download-button:focus, .ui.basic.grey.download-button:focus, .ui.basic.play-button.button.editortools-btn.buttons .button:focus, .ui.basic.play-button.button.editortools-btn.button:focus, .ui.basic.ui.play-button.editortools-btn.buttons .button:focus, .ui.basic.ui.play-button.editortools-btn.button:focus, .ui.basic.download-button.button.editortools-btn.buttons .button:focus, .ui.basic.download-button.button.editortools-btn.button:focus, .ui.basic.ui.download-button.editortools-btn.buttons .button:focus, .ui.basic.ui.download-button.editortools-btn.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #535b77 inset !important; color: #4c556e !important; } .ui.basic.grey.buttons .active.button, .ui.basic.grey.active.button, .ui.basic.ui.button.editortools-btn.buttons .active.button, .ui.basic.ui.button.editortools-btn.active.button, .play-button.basic.grey.buttons .active.button, .play-button.basic.grey.active.button, .ui.basic.grey.buttons .active.play-button, .ui.basic.grey.active.play-button, .download-button.basic.grey.buttons .active.button, .download-button.basic.grey.active.button, .ui.basic.grey.buttons .active.download-button, .ui.basic.grey.active.download-button, .ui.basic.play-button.button.editortools-btn.buttons .active.button, .ui.basic.play-button.button.editortools-btn.active.button, .ui.basic.ui.play-button.editortools-btn.buttons .active.button, .ui.basic.ui.play-button.editortools-btn.active.button, .ui.basic.download-button.button.editortools-btn.buttons .active.button, .ui.basic.download-button.button.editortools-btn.active.button, .ui.basic.ui.download-button.editortools-btn.buttons .active.button, .ui.basic.ui.download-button.editortools-btn.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #383d50 inset !important; color: #57607d !important; } .ui.basic.grey.buttons .button:active, .ui.basic.grey.button:active, .ui.basic.ui.button.editortools-btn.buttons .button:active, .ui.basic.ui.button.editortools-btn.button:active, .play-button.basic.grey.buttons .button:active, .play-button.basic.grey.button:active, .ui.basic.grey.buttons .play-button:active, .ui.basic.grey.play-button:active, .download-button.basic.grey.buttons .button:active, .download-button.basic.grey.button:active, .ui.basic.grey.buttons .download-button:active, .ui.basic.grey.download-button:active, .ui.basic.play-button.button.editortools-btn.buttons .button:active, .ui.basic.play-button.button.editortools-btn.button:active, .ui.basic.ui.play-button.editortools-btn.buttons .button:active, .ui.basic.ui.play-button.editortools-btn.button:active, .ui.basic.download-button.button.editortools-btn.buttons .button:active, .ui.basic.download-button.button.editortools-btn.button:active, .ui.basic.ui.download-button.editortools-btn.buttons .button:active, .ui.basic.ui.download-button.editortools-btn.button:active { box-shadow: 0px 0px 0px 1px #57607d inset !important; color: #57607d !important; } .ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.ui.button.editortools-btn.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.grey.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.grey.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.grey.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.grey.download-button:not(:first-child), .ui.buttons:not(.vertical) > .basic.play-button.button.editortools-btn.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.ui.play-button.editortools-btn.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.download-button.button.editortools-btn.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.ui.download-button.editortools-btn.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.grey.buttons .button, .ui.inverted.grey.button, .ui.inverted.ui.button.editortools-btn.buttons .button, .ui.inverted.ui.button.editortools-btn.button, .play-button.inverted.grey.buttons .button, .play-button.inverted.grey.button, .ui.inverted.grey.buttons .play-button, .ui.inverted.grey.play-button, .download-button.inverted.grey.buttons .button, .download-button.inverted.grey.button, .ui.inverted.grey.buttons .download-button, .ui.inverted.grey.download-button, .ui.inverted.play-button.button.editortools-btn.buttons .button, .ui.inverted.play-button.button.editortools-btn.button, .ui.inverted.ui.play-button.editortools-btn.buttons .button, .ui.inverted.ui.play-button.editortools-btn.button, .ui.inverted.download-button.button.editortools-btn.buttons .button, .ui.inverted.download-button.button.editortools-btn.button, .ui.inverted.ui.download-button.editortools-btn.buttons .button, .ui.inverted.ui.download-button.editortools-btn.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; color: #FFFFFF; } .ui.inverted.grey.buttons .button:hover, .ui.inverted.grey.button:hover, .ui.inverted.grey.buttons .button:focus, .ui.inverted.grey.button:focus, .ui.inverted.grey.buttons .button.active, .ui.inverted.grey.button.active, .ui.inverted.grey.buttons .button:active, .ui.inverted.grey.button:active, .ui.inverted.ui.button.editortools-btn.buttons .button:hover, .ui.inverted.ui.button.editortools-btn.button:hover, .ui.inverted.ui.button.editortools-btn.buttons .button:focus, .ui.inverted.ui.button.editortools-btn.button:focus, .ui.inverted.ui.button.editortools-btn.buttons .button.active, .ui.inverted.ui.button.editortools-btn.button.active, .ui.inverted.ui.button.editortools-btn.buttons .button:active, .ui.inverted.ui.button.editortools-btn.button:active, .play-button.inverted.grey.buttons .button:hover, .play-button.inverted.grey.button:hover, .play-button.inverted.grey.buttons .button:focus, .play-button.inverted.grey.button:focus, .play-button.inverted.grey.buttons .button.active, .play-button.inverted.grey.button.active, .play-button.inverted.grey.buttons .button:active, .play-button.inverted.grey.button:active, .ui.inverted.grey.buttons .play-button:hover, .ui.inverted.grey.play-button:hover, .ui.inverted.grey.buttons .play-button:focus, .ui.inverted.grey.play-button:focus, .ui.inverted.grey.buttons .play-button.active, .ui.inverted.grey.play-button.active, .ui.inverted.grey.buttons .play-button:active, .ui.inverted.grey.play-button:active, .download-button.inverted.grey.buttons .button:hover, .download-button.inverted.grey.button:hover, .download-button.inverted.grey.buttons .button:focus, .download-button.inverted.grey.button:focus, .download-button.inverted.grey.buttons .button.active, .download-button.inverted.grey.button.active, .download-button.inverted.grey.buttons .button:active, .download-button.inverted.grey.button:active, .ui.inverted.grey.buttons .download-button:hover, .ui.inverted.grey.download-button:hover, .ui.inverted.grey.buttons .download-button:focus, .ui.inverted.grey.download-button:focus, .ui.inverted.grey.buttons .download-button.active, .ui.inverted.grey.download-button.active, .ui.inverted.grey.buttons .download-button:active, .ui.inverted.grey.download-button:active, .ui.inverted.play-button.button.editortools-btn.buttons .button:hover, .ui.inverted.play-button.button.editortools-btn.button:hover, .ui.inverted.play-button.button.editortools-btn.buttons .button:focus, .ui.inverted.play-button.button.editortools-btn.button:focus, .ui.inverted.play-button.button.editortools-btn.buttons .button.active, .ui.inverted.play-button.button.editortools-btn.button.active, .ui.inverted.play-button.button.editortools-btn.buttons .button:active, .ui.inverted.play-button.button.editortools-btn.button:active, .ui.inverted.ui.play-button.editortools-btn.buttons .button:hover, .ui.inverted.ui.play-button.editortools-btn.button:hover, .ui.inverted.ui.play-button.editortools-btn.buttons .button:focus, .ui.inverted.ui.play-button.editortools-btn.button:focus, .ui.inverted.ui.play-button.editortools-btn.buttons .button.active, .ui.inverted.ui.play-button.editortools-btn.button.active, .ui.inverted.ui.play-button.editortools-btn.buttons .button:active, .ui.inverted.ui.play-button.editortools-btn.button:active, .ui.inverted.download-button.button.editortools-btn.buttons .button:hover, .ui.inverted.download-button.button.editortools-btn.button:hover, .ui.inverted.download-button.button.editortools-btn.buttons .button:focus, .ui.inverted.download-button.button.editortools-btn.button:focus, .ui.inverted.download-button.button.editortools-btn.buttons .button.active, .ui.inverted.download-button.button.editortools-btn.button.active, .ui.inverted.download-button.button.editortools-btn.buttons .button:active, .ui.inverted.download-button.button.editortools-btn.button:active, .ui.inverted.ui.download-button.editortools-btn.buttons .button:hover, .ui.inverted.ui.download-button.editortools-btn.button:hover, .ui.inverted.ui.download-button.editortools-btn.buttons .button:focus, .ui.inverted.ui.download-button.editortools-btn.button:focus, .ui.inverted.ui.download-button.editortools-btn.buttons .button.active, .ui.inverted.ui.download-button.editortools-btn.button.active, .ui.inverted.ui.download-button.editortools-btn.buttons .button:active, .ui.inverted.ui.download-button.editortools-btn.button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.grey.buttons .button:hover, .ui.inverted.grey.button:hover, .ui.inverted.ui.button.editortools-btn.buttons .button:hover, .ui.inverted.ui.button.editortools-btn.button:hover, .play-button.inverted.grey.buttons .button:hover, .play-button.inverted.grey.button:hover, .ui.inverted.grey.buttons .play-button:hover, .ui.inverted.grey.play-button:hover, .download-button.inverted.grey.buttons .button:hover, .download-button.inverted.grey.button:hover, .ui.inverted.grey.buttons .download-button:hover, .ui.inverted.grey.download-button:hover, .ui.inverted.play-button.button.editortools-btn.buttons .button:hover, .ui.inverted.play-button.button.editortools-btn.button:hover, .ui.inverted.ui.play-button.editortools-btn.buttons .button:hover, .ui.inverted.ui.play-button.editortools-btn.button:hover, .ui.inverted.download-button.button.editortools-btn.buttons .button:hover, .ui.inverted.download-button.button.editortools-btn.button:hover, .ui.inverted.ui.download-button.editortools-btn.buttons .button:hover, .ui.inverted.ui.download-button.editortools-btn.button:hover { background-color: #cfd0d2; } .ui.inverted.grey.buttons .button:focus, .ui.inverted.grey.button:focus, .ui.inverted.ui.button.editortools-btn.buttons .button:focus, .ui.inverted.ui.button.editortools-btn.button:focus, .play-button.inverted.grey.buttons .button:focus, .play-button.inverted.grey.button:focus, .ui.inverted.grey.buttons .play-button:focus, .ui.inverted.grey.play-button:focus, .download-button.inverted.grey.buttons .button:focus, .download-button.inverted.grey.button:focus, .ui.inverted.grey.buttons .download-button:focus, .ui.inverted.grey.download-button:focus, .ui.inverted.play-button.button.editortools-btn.buttons .button:focus, .ui.inverted.play-button.button.editortools-btn.button:focus, .ui.inverted.ui.play-button.editortools-btn.buttons .button:focus, .ui.inverted.ui.play-button.editortools-btn.button:focus, .ui.inverted.download-button.button.editortools-btn.buttons .button:focus, .ui.inverted.download-button.button.editortools-btn.button:focus, .ui.inverted.ui.download-button.editortools-btn.buttons .button:focus, .ui.inverted.ui.download-button.editortools-btn.button:focus { background-color: #c7c9cb; } .ui.inverted.grey.buttons .active.button, .ui.inverted.grey.active.button, .ui.inverted.ui.button.editortools-btn.buttons .active.button, .ui.inverted.ui.button.editortools-btn.active.button, .play-button.inverted.grey.buttons .active.button, .play-button.inverted.grey.active.button, .ui.inverted.grey.buttons .active.play-button, .ui.inverted.grey.active.play-button, .download-button.inverted.grey.buttons .active.button, .download-button.inverted.grey.active.button, .ui.inverted.grey.buttons .active.download-button, .ui.inverted.grey.active.download-button, .ui.inverted.play-button.button.editortools-btn.buttons .active.button, .ui.inverted.play-button.button.editortools-btn.active.button, .ui.inverted.ui.play-button.editortools-btn.buttons .active.button, .ui.inverted.ui.play-button.editortools-btn.active.button, .ui.inverted.download-button.button.editortools-btn.buttons .active.button, .ui.inverted.download-button.button.editortools-btn.active.button, .ui.inverted.ui.download-button.editortools-btn.buttons .active.button, .ui.inverted.ui.download-button.editortools-btn.active.button { background-color: #cfd0d2; } .ui.inverted.grey.buttons .button:active, .ui.inverted.grey.button:active, .ui.inverted.ui.button.editortools-btn.buttons .button:active, .ui.inverted.ui.button.editortools-btn.button:active, .play-button.inverted.grey.buttons .button:active, .play-button.inverted.grey.button:active, .ui.inverted.grey.buttons .play-button:active, .ui.inverted.grey.play-button:active, .download-button.inverted.grey.buttons .button:active, .download-button.inverted.grey.button:active, .ui.inverted.grey.buttons .download-button:active, .ui.inverted.grey.download-button:active, .ui.inverted.play-button.button.editortools-btn.buttons .button:active, .ui.inverted.play-button.button.editortools-btn.button:active, .ui.inverted.ui.play-button.editortools-btn.buttons .button:active, .ui.inverted.ui.play-button.editortools-btn.button:active, .ui.inverted.download-button.button.editortools-btn.buttons .button:active, .ui.inverted.download-button.button.editortools-btn.button:active, .ui.inverted.ui.download-button.editortools-btn.buttons .button:active, .ui.inverted.ui.download-button.editortools-btn.button:active { background-color: #c2c4c5; } /* Inverted Basic */ .ui.inverted.grey.basic.buttons .button, .ui.inverted.grey.buttons .basic.button, .ui.inverted.grey.basic.button, .ui.inverted.ui.button.editortools-btn.basic.buttons .button, .ui.inverted.ui.button.editortools-btn.buttons .basic.button, .ui.inverted.ui.button.editortools-btn.basic.button, .play-button.inverted.grey.basic.buttons .button, .play-button.inverted.grey.buttons .basic.button, .play-button.inverted.grey.basic.button, .ui.inverted.grey.basic.buttons .play-button, .ui.inverted.grey.buttons .basic.play-button, .ui.inverted.grey.basic.play-button, .download-button.inverted.grey.basic.buttons .button, .download-button.inverted.grey.buttons .basic.button, .download-button.inverted.grey.basic.button, .ui.inverted.grey.basic.buttons .download-button, .ui.inverted.grey.buttons .basic.download-button, .ui.inverted.grey.basic.download-button, .ui.inverted.play-button.button.editortools-btn.basic.buttons .button, .ui.inverted.play-button.button.editortools-btn.buttons .basic.button, .ui.inverted.play-button.button.editortools-btn.basic.button, .ui.inverted.ui.play-button.editortools-btn.basic.buttons .button, .ui.inverted.ui.play-button.editortools-btn.buttons .basic.button, .ui.inverted.ui.play-button.editortools-btn.basic.button, .ui.inverted.download-button.button.editortools-btn.basic.buttons .button, .ui.inverted.download-button.button.editortools-btn.buttons .basic.button, .ui.inverted.download-button.button.editortools-btn.basic.button, .ui.inverted.ui.download-button.editortools-btn.basic.buttons .button, .ui.inverted.ui.download-button.editortools-btn.buttons .basic.button, .ui.inverted.ui.download-button.editortools-btn.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.grey.basic.buttons .button:hover, .ui.inverted.grey.buttons .basic.button:hover, .ui.inverted.grey.basic.button:hover, .ui.inverted.ui.button.editortools-btn.basic.buttons .button:hover, .ui.inverted.ui.button.editortools-btn.buttons .basic.button:hover, .ui.inverted.ui.button.editortools-btn.basic.button:hover, .play-button.inverted.grey.basic.buttons .button:hover, .play-button.inverted.grey.buttons .basic.button:hover, .play-button.inverted.grey.basic.button:hover, .ui.inverted.grey.basic.buttons .play-button:hover, .ui.inverted.grey.buttons .basic.play-button:hover, .ui.inverted.grey.basic.play-button:hover, .download-button.inverted.grey.basic.buttons .button:hover, .download-button.inverted.grey.buttons .basic.button:hover, .download-button.inverted.grey.basic.button:hover, .ui.inverted.grey.basic.buttons .download-button:hover, .ui.inverted.grey.buttons .basic.download-button:hover, .ui.inverted.grey.basic.download-button:hover, .ui.inverted.play-button.button.editortools-btn.basic.buttons .button:hover, .ui.inverted.play-button.button.editortools-btn.buttons .basic.button:hover, .ui.inverted.play-button.button.editortools-btn.basic.button:hover, .ui.inverted.ui.play-button.editortools-btn.basic.buttons .button:hover, .ui.inverted.ui.play-button.editortools-btn.buttons .basic.button:hover, .ui.inverted.ui.play-button.editortools-btn.basic.button:hover, .ui.inverted.download-button.button.editortools-btn.basic.buttons .button:hover, .ui.inverted.download-button.button.editortools-btn.buttons .basic.button:hover, .ui.inverted.download-button.button.editortools-btn.basic.button:hover, .ui.inverted.ui.download-button.editortools-btn.basic.buttons .button:hover, .ui.inverted.ui.download-button.editortools-btn.buttons .basic.button:hover, .ui.inverted.ui.download-button.editortools-btn.basic.button:hover { box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; color: #FFFFFF !important; } .ui.inverted.grey.basic.buttons .button:focus, .ui.inverted.grey.basic.buttons .button:focus, .ui.inverted.grey.basic.button:focus, .ui.inverted.ui.button.editortools-btn.basic.buttons .button:focus, .ui.inverted.ui.button.editortools-btn.basic.buttons .button:focus, .ui.inverted.ui.button.editortools-btn.basic.button:focus, .play-button.inverted.grey.basic.buttons .button:focus, .play-button.inverted.grey.basic.buttons .button:focus, .play-button.inverted.grey.basic.button:focus, .ui.inverted.grey.basic.buttons .play-button:focus, .ui.inverted.grey.basic.buttons .play-button:focus, .ui.inverted.grey.basic.play-button:focus, .download-button.inverted.grey.basic.buttons .button:focus, .download-button.inverted.grey.basic.buttons .button:focus, .download-button.inverted.grey.basic.button:focus, .ui.inverted.grey.basic.buttons .download-button:focus, .ui.inverted.grey.basic.buttons .download-button:focus, .ui.inverted.grey.basic.download-button:focus, .ui.inverted.play-button.button.editortools-btn.basic.buttons .button:focus, .ui.inverted.play-button.button.editortools-btn.basic.buttons .button:focus, .ui.inverted.play-button.button.editortools-btn.basic.button:focus, .ui.inverted.ui.play-button.editortools-btn.basic.buttons .button:focus, .ui.inverted.ui.play-button.editortools-btn.basic.buttons .button:focus, .ui.inverted.ui.play-button.editortools-btn.basic.button:focus, .ui.inverted.download-button.button.editortools-btn.basic.buttons .button:focus, .ui.inverted.download-button.button.editortools-btn.basic.buttons .button:focus, .ui.inverted.download-button.button.editortools-btn.basic.button:focus, .ui.inverted.ui.download-button.editortools-btn.basic.buttons .button:focus, .ui.inverted.ui.download-button.editortools-btn.basic.buttons .button:focus, .ui.inverted.ui.download-button.editortools-btn.basic.button:focus { box-shadow: 0px 0px 0px 2px #c7c9cb inset !important; color: #DCDDDE !important; } .ui.inverted.grey.basic.buttons .active.button, .ui.inverted.grey.buttons .basic.active.button, .ui.inverted.grey.basic.active.button, .ui.inverted.ui.button.editortools-btn.basic.buttons .active.button, .ui.inverted.ui.button.editortools-btn.buttons .basic.active.button, .ui.inverted.ui.button.editortools-btn.basic.active.button, .play-button.inverted.grey.basic.buttons .active.button, .play-button.inverted.grey.buttons .basic.active.button, .play-button.inverted.grey.basic.active.button, .ui.inverted.grey.basic.buttons .active.play-button, .ui.inverted.grey.buttons .basic.active.play-button, .ui.inverted.grey.basic.active.play-button, .download-button.inverted.grey.basic.buttons .active.button, .download-button.inverted.grey.buttons .basic.active.button, .download-button.inverted.grey.basic.active.button, .ui.inverted.grey.basic.buttons .active.download-button, .ui.inverted.grey.buttons .basic.active.download-button, .ui.inverted.grey.basic.active.download-button, .ui.inverted.play-button.button.editortools-btn.basic.buttons .active.button, .ui.inverted.play-button.button.editortools-btn.buttons .basic.active.button, .ui.inverted.play-button.button.editortools-btn.basic.active.button, .ui.inverted.ui.play-button.editortools-btn.basic.buttons .active.button, .ui.inverted.ui.play-button.editortools-btn.buttons .basic.active.button, .ui.inverted.ui.play-button.editortools-btn.basic.active.button, .ui.inverted.download-button.button.editortools-btn.basic.buttons .active.button, .ui.inverted.download-button.button.editortools-btn.buttons .basic.active.button, .ui.inverted.download-button.button.editortools-btn.basic.active.button, .ui.inverted.ui.download-button.editortools-btn.basic.buttons .active.button, .ui.inverted.ui.download-button.editortools-btn.buttons .basic.active.button, .ui.inverted.ui.download-button.editortools-btn.basic.active.button { box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; color: #FFFFFF !important; } .ui.inverted.grey.basic.buttons .button:active, .ui.inverted.grey.buttons .basic.button:active, .ui.inverted.grey.basic.button:active, .ui.inverted.ui.button.editortools-btn.basic.buttons .button:active, .ui.inverted.ui.button.editortools-btn.buttons .basic.button:active, .ui.inverted.ui.button.editortools-btn.basic.button:active, .play-button.inverted.grey.basic.buttons .button:active, .play-button.inverted.grey.buttons .basic.button:active, .play-button.inverted.grey.basic.button:active, .ui.inverted.grey.basic.buttons .play-button:active, .ui.inverted.grey.buttons .basic.play-button:active, .ui.inverted.grey.basic.play-button:active, .download-button.inverted.grey.basic.buttons .button:active, .download-button.inverted.grey.buttons .basic.button:active, .download-button.inverted.grey.basic.button:active, .ui.inverted.grey.basic.buttons .download-button:active, .ui.inverted.grey.buttons .basic.download-button:active, .ui.inverted.grey.basic.download-button:active, .ui.inverted.play-button.button.editortools-btn.basic.buttons .button:active, .ui.inverted.play-button.button.editortools-btn.buttons .basic.button:active, .ui.inverted.play-button.button.editortools-btn.basic.button:active, .ui.inverted.ui.play-button.editortools-btn.basic.buttons .button:active, .ui.inverted.ui.play-button.editortools-btn.buttons .basic.button:active, .ui.inverted.ui.play-button.editortools-btn.basic.button:active, .ui.inverted.download-button.button.editortools-btn.basic.buttons .button:active, .ui.inverted.download-button.button.editortools-btn.buttons .basic.button:active, .ui.inverted.download-button.button.editortools-btn.basic.button:active, .ui.inverted.ui.download-button.editortools-btn.basic.buttons .button:active, .ui.inverted.ui.download-button.editortools-btn.buttons .basic.button:active, .ui.inverted.ui.download-button.editortools-btn.basic.button:active { box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important; color: #FFFFFF !important; } /*--- Brown ---*/ .ui.brown.buttons .button, .ui.brown.button, .play-button.brown.buttons .button, .play-button.brown.button, .ui.brown.buttons .play-button, .ui.brown.play-button, .download-button.brown.buttons .button, .download-button.brown.button, .ui.brown.buttons .download-button, .ui.brown.download-button { background-color: #6B5B4C; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.brown.button, .play-button.brown.button, .ui.brown.play-button, .download-button.brown.button, .ui.brown.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.brown.buttons .button:hover, .ui.brown.button:hover, .play-button.brown.buttons .button:hover, .play-button.brown.button:hover, .ui.brown.buttons .play-button:hover, .ui.brown.play-button:hover, .download-button.brown.buttons .button:hover, .download-button.brown.button:hover, .ui.brown.buttons .download-button:hover, .ui.brown.download-button:hover { background-color: #5d4e40; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .button:focus, .ui.brown.button:focus, .play-button.brown.buttons .button:focus, .play-button.brown.button:focus, .ui.brown.buttons .play-button:focus, .ui.brown.play-button:focus, .download-button.brown.buttons .button:focus, .download-button.brown.button:focus, .ui.brown.buttons .download-button:focus, .ui.brown.download-button:focus { background-color: #564739; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .button:active, .ui.brown.button:active, .play-button.brown.buttons .button:active, .play-button.brown.button:active, .ui.brown.buttons .play-button:active, .ui.brown.play-button:active, .download-button.brown.buttons .button:active, .download-button.brown.button:active, .ui.brown.buttons .download-button:active, .ui.brown.download-button:active { background-color: #4d4237; color: #FFFFFF; text-shadow: none; } .ui.brown.buttons .active.button, .ui.brown.buttons .active.button:active, .ui.brown.active.button, .ui.brown.button .active.button:active, .play-button.brown.buttons .active.button, .play-button.brown.buttons .active.button:active, .play-button.brown.active.button, .play-button.brown.button .active.button:active, .ui.brown.buttons .active.play-button, .ui.brown.buttons .active.play-button:active, .ui.brown.active.play-button, .ui.brown.play-button .active.play-button:active, .download-button.brown.buttons .active.button, .download-button.brown.buttons .active.button:active, .download-button.brown.active.button, .download-button.brown.button .active.button:active, .ui.brown.buttons .active.download-button, .ui.brown.buttons .active.download-button:active, .ui.brown.active.download-button, .ui.brown.download-button .active.download-button:active { background-color: #5e4e3f; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.brown.buttons .button, .ui.basic.brown.button, .play-button.basic.brown.buttons .button, .play-button.basic.brown.button, .ui.basic.brown.buttons .play-button, .ui.basic.brown.play-button, .download-button.basic.brown.buttons .button, .download-button.basic.brown.button, .ui.basic.brown.buttons .download-button, .ui.basic.brown.download-button { box-shadow: 0px 0px 0px 1px #6B5B4C inset !important; color: #6B5B4C !important; } .ui.basic.brown.buttons .button:hover, .ui.basic.brown.button:hover, .play-button.basic.brown.buttons .button:hover, .play-button.basic.brown.button:hover, .ui.basic.brown.buttons .play-button:hover, .ui.basic.brown.play-button:hover, .download-button.basic.brown.buttons .button:hover, .download-button.basic.brown.button:hover, .ui.basic.brown.buttons .download-button:hover, .ui.basic.brown.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #5d4e40 inset !important; color: #5d4e40 !important; } .ui.basic.brown.buttons .button:focus, .ui.basic.brown.button:focus, .play-button.basic.brown.buttons .button:focus, .play-button.basic.brown.button:focus, .ui.basic.brown.buttons .play-button:focus, .ui.basic.brown.play-button:focus, .download-button.basic.brown.buttons .button:focus, .download-button.basic.brown.button:focus, .ui.basic.brown.buttons .download-button:focus, .ui.basic.brown.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #564739 inset !important; color: #5d4e40 !important; } .ui.basic.brown.buttons .active.button, .ui.basic.brown.active.button, .play-button.basic.brown.buttons .active.button, .play-button.basic.brown.active.button, .ui.basic.brown.buttons .active.play-button, .ui.basic.brown.active.play-button, .download-button.basic.brown.buttons .active.button, .download-button.basic.brown.active.button, .ui.basic.brown.buttons .active.download-button, .ui.basic.brown.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #5e4e3f inset !important; color: #4d4237 !important; } .ui.basic.brown.buttons .button:active, .ui.basic.brown.button:active, .play-button.basic.brown.buttons .button:active, .play-button.basic.brown.button:active, .ui.basic.brown.buttons .play-button:active, .ui.basic.brown.play-button:active, .download-button.basic.brown.buttons .button:active, .download-button.basic.brown.button:active, .ui.basic.brown.buttons .download-button:active, .ui.basic.brown.download-button:active { box-shadow: 0px 0px 0px 1px #4d4237 inset !important; color: #4d4237 !important; } .ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.brown.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.brown.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.brown.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.brown.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.brown.buttons .button, .ui.inverted.brown.button, .play-button.inverted.brown.buttons .button, .play-button.inverted.brown.button, .ui.inverted.brown.buttons .play-button, .ui.inverted.brown.play-button, .download-button.inverted.brown.buttons .button, .download-button.inverted.brown.button, .ui.inverted.brown.buttons .download-button, .ui.inverted.brown.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D67C1C inset !important; color: #D67C1C; } .ui.inverted.brown.buttons .button:hover, .ui.inverted.brown.button:hover, .ui.inverted.brown.buttons .button:focus, .ui.inverted.brown.button:focus, .ui.inverted.brown.buttons .button.active, .ui.inverted.brown.button.active, .ui.inverted.brown.buttons .button:active, .ui.inverted.brown.button:active, .play-button.inverted.brown.buttons .button:hover, .play-button.inverted.brown.button:hover, .play-button.inverted.brown.buttons .button:focus, .play-button.inverted.brown.button:focus, .play-button.inverted.brown.buttons .button.active, .play-button.inverted.brown.button.active, .play-button.inverted.brown.buttons .button:active, .play-button.inverted.brown.button:active, .ui.inverted.brown.buttons .play-button:hover, .ui.inverted.brown.play-button:hover, .ui.inverted.brown.buttons .play-button:focus, .ui.inverted.brown.play-button:focus, .ui.inverted.brown.buttons .play-button.active, .ui.inverted.brown.play-button.active, .ui.inverted.brown.buttons .play-button:active, .ui.inverted.brown.play-button:active, .download-button.inverted.brown.buttons .button:hover, .download-button.inverted.brown.button:hover, .download-button.inverted.brown.buttons .button:focus, .download-button.inverted.brown.button:focus, .download-button.inverted.brown.buttons .button.active, .download-button.inverted.brown.button.active, .download-button.inverted.brown.buttons .button:active, .download-button.inverted.brown.button:active, .ui.inverted.brown.buttons .download-button:hover, .ui.inverted.brown.download-button:hover, .ui.inverted.brown.buttons .download-button:focus, .ui.inverted.brown.download-button:focus, .ui.inverted.brown.buttons .download-button.active, .ui.inverted.brown.download-button.active, .ui.inverted.brown.buttons .download-button:active, .ui.inverted.brown.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.brown.buttons .button:hover, .ui.inverted.brown.button:hover, .play-button.inverted.brown.buttons .button:hover, .play-button.inverted.brown.button:hover, .ui.inverted.brown.buttons .play-button:hover, .ui.inverted.brown.play-button:hover, .download-button.inverted.brown.buttons .button:hover, .download-button.inverted.brown.button:hover, .ui.inverted.brown.buttons .download-button:hover, .ui.inverted.brown.download-button:hover { background-color: #c86f11; } .ui.inverted.brown.buttons .button:focus, .ui.inverted.brown.button:focus, .play-button.inverted.brown.buttons .button:focus, .play-button.inverted.brown.button:focus, .ui.inverted.brown.buttons .play-button:focus, .ui.inverted.brown.play-button:focus, .download-button.inverted.brown.buttons .button:focus, .download-button.inverted.brown.button:focus, .ui.inverted.brown.buttons .download-button:focus, .ui.inverted.brown.download-button:focus { background-color: #c16808; } .ui.inverted.brown.buttons .active.button, .ui.inverted.brown.active.button, .play-button.inverted.brown.buttons .active.button, .play-button.inverted.brown.active.button, .ui.inverted.brown.buttons .active.play-button, .ui.inverted.brown.active.play-button, .download-button.inverted.brown.buttons .active.button, .download-button.inverted.brown.active.button, .ui.inverted.brown.buttons .active.download-button, .ui.inverted.brown.active.download-button { background-color: #cc6f0d; } .ui.inverted.brown.buttons .button:active, .ui.inverted.brown.button:active, .play-button.inverted.brown.buttons .button:active, .play-button.inverted.brown.button:active, .ui.inverted.brown.buttons .play-button:active, .ui.inverted.brown.play-button:active, .download-button.inverted.brown.buttons .button:active, .download-button.inverted.brown.button:active, .ui.inverted.brown.buttons .download-button:active, .ui.inverted.brown.download-button:active { background-color: #a96216; } /* Inverted Basic */ .ui.inverted.brown.basic.buttons .button, .ui.inverted.brown.buttons .basic.button, .ui.inverted.brown.basic.button, .play-button.inverted.brown.basic.buttons .button, .play-button.inverted.brown.buttons .basic.button, .play-button.inverted.brown.basic.button, .ui.inverted.brown.basic.buttons .play-button, .ui.inverted.brown.buttons .basic.play-button, .ui.inverted.brown.basic.play-button, .download-button.inverted.brown.basic.buttons .button, .download-button.inverted.brown.buttons .basic.button, .download-button.inverted.brown.basic.button, .ui.inverted.brown.basic.buttons .download-button, .ui.inverted.brown.buttons .basic.download-button, .ui.inverted.brown.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.brown.basic.buttons .button:hover, .ui.inverted.brown.buttons .basic.button:hover, .ui.inverted.brown.basic.button:hover, .play-button.inverted.brown.basic.buttons .button:hover, .play-button.inverted.brown.buttons .basic.button:hover, .play-button.inverted.brown.basic.button:hover, .ui.inverted.brown.basic.buttons .play-button:hover, .ui.inverted.brown.buttons .basic.play-button:hover, .ui.inverted.brown.basic.play-button:hover, .download-button.inverted.brown.basic.buttons .button:hover, .download-button.inverted.brown.buttons .basic.button:hover, .download-button.inverted.brown.basic.button:hover, .ui.inverted.brown.basic.buttons .download-button:hover, .ui.inverted.brown.buttons .basic.download-button:hover, .ui.inverted.brown.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #c86f11 inset !important; color: #D67C1C !important; } .ui.inverted.brown.basic.buttons .button:focus, .ui.inverted.brown.basic.buttons .button:focus, .ui.inverted.brown.basic.button:focus, .play-button.inverted.brown.basic.buttons .button:focus, .play-button.inverted.brown.basic.buttons .button:focus, .play-button.inverted.brown.basic.button:focus, .ui.inverted.brown.basic.buttons .play-button:focus, .ui.inverted.brown.basic.buttons .play-button:focus, .ui.inverted.brown.basic.play-button:focus, .download-button.inverted.brown.basic.buttons .button:focus, .download-button.inverted.brown.basic.buttons .button:focus, .download-button.inverted.brown.basic.button:focus, .ui.inverted.brown.basic.buttons .download-button:focus, .ui.inverted.brown.basic.buttons .download-button:focus, .ui.inverted.brown.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #c16808 inset !important; color: #D67C1C !important; } .ui.inverted.brown.basic.buttons .active.button, .ui.inverted.brown.buttons .basic.active.button, .ui.inverted.brown.basic.active.button, .play-button.inverted.brown.basic.buttons .active.button, .play-button.inverted.brown.buttons .basic.active.button, .play-button.inverted.brown.basic.active.button, .ui.inverted.brown.basic.buttons .active.play-button, .ui.inverted.brown.buttons .basic.active.play-button, .ui.inverted.brown.basic.active.play-button, .download-button.inverted.brown.basic.buttons .active.button, .download-button.inverted.brown.buttons .basic.active.button, .download-button.inverted.brown.basic.active.button, .ui.inverted.brown.basic.buttons .active.download-button, .ui.inverted.brown.buttons .basic.active.download-button, .ui.inverted.brown.basic.active.download-button { box-shadow: 0px 0px 0px 2px #cc6f0d inset !important; color: #D67C1C !important; } .ui.inverted.brown.basic.buttons .button:active, .ui.inverted.brown.buttons .basic.button:active, .ui.inverted.brown.basic.button:active, .play-button.inverted.brown.basic.buttons .button:active, .play-button.inverted.brown.buttons .basic.button:active, .play-button.inverted.brown.basic.button:active, .ui.inverted.brown.basic.buttons .play-button:active, .ui.inverted.brown.buttons .basic.play-button:active, .ui.inverted.brown.basic.play-button:active, .download-button.inverted.brown.basic.buttons .button:active, .download-button.inverted.brown.buttons .basic.button:active, .download-button.inverted.brown.basic.button:active, .ui.inverted.brown.basic.buttons .download-button:active, .ui.inverted.brown.buttons .basic.download-button:active, .ui.inverted.brown.basic.download-button:active { box-shadow: 0px 0px 0px 2px #a96216 inset !important; color: #D67C1C !important; } /*--- Blue ---*/ .ui.blue.buttons .button, .ui.blue.button, .play-button.blue.buttons .button, .play-button.blue.button, .ui.blue.buttons .play-button, .ui.blue.play-button, .ui.play-button.buttons .button, .ui.play-button.button, .download-button.blue.buttons .button, .download-button.blue.button, .ui.blue.buttons .download-button, .ui.blue.download-button { background-color: #54C9C9; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.blue.button, .play-button.blue.button, .ui.blue.play-button, .ui.play-button.button, .download-button.blue.button, .ui.blue.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.blue.buttons .button:hover, .ui.blue.button:hover, .play-button.blue.buttons .button:hover, .play-button.blue.button:hover, .ui.blue.buttons .play-button:hover, .ui.blue.play-button:hover, .ui.play-button.buttons .button:hover, .ui.play-button.button:hover, .download-button.blue.buttons .button:hover, .download-button.blue.button:hover, .ui.blue.buttons .download-button:hover, .ui.blue.download-button:hover { background-color: #3ac9c9; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .button:focus, .ui.blue.button:focus, .play-button.blue.buttons .button:focus, .play-button.blue.button:focus, .ui.blue.buttons .play-button:focus, .ui.blue.play-button:focus, .ui.play-button.buttons .button:focus, .ui.play-button.button:focus, .download-button.blue.buttons .button:focus, .download-button.blue.button:focus, .ui.blue.buttons .download-button:focus, .ui.blue.download-button:focus { background-color: #2ec6c6; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .button:active, .ui.blue.button:active, .play-button.blue.buttons .button:active, .play-button.blue.button:active, .ui.blue.buttons .play-button:active, .ui.blue.play-button:active, .ui.play-button.buttons .button:active, .ui.play-button.button:active, .download-button.blue.buttons .button:active, .download-button.blue.button:active, .ui.blue.buttons .download-button:active, .ui.blue.download-button:active { background-color: #38b2b2; color: #FFFFFF; text-shadow: none; } .ui.blue.buttons .active.button, .ui.blue.buttons .active.button:active, .ui.blue.active.button, .ui.blue.button .active.button:active, .play-button.blue.buttons .active.button, .play-button.blue.buttons .active.button:active, .play-button.blue.active.button, .play-button.blue.button .active.button:active, .ui.blue.buttons .active.play-button, .ui.blue.buttons .active.play-button:active, .ui.blue.active.play-button, .ui.blue.play-button .active.play-button:active, .ui.play-button.buttons .active.button, .ui.play-button.buttons .active.button:active, .ui.play-button.active.button, .ui.play-button.button .active.button:active, .download-button.blue.buttons .active.button, .download-button.blue.buttons .active.button:active, .download-button.blue.active.button, .download-button.blue.button .active.button:active, .ui.blue.buttons .active.download-button, .ui.blue.buttons .active.download-button:active, .ui.blue.active.download-button, .ui.blue.download-button .active.download-button:active { background-color: #37cdcd; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.blue.buttons .button, .ui.basic.blue.button, .play-button.basic.blue.buttons .button, .play-button.basic.blue.button, .ui.basic.blue.buttons .play-button, .ui.basic.blue.play-button, .ui.basic.play-button.buttons .button, .ui.basic.play-button.button, .download-button.basic.blue.buttons .button, .download-button.basic.blue.button, .ui.basic.blue.buttons .download-button, .ui.basic.blue.download-button { box-shadow: 0px 0px 0px 1px #54C9C9 inset !important; color: #54C9C9 !important; } .ui.basic.blue.buttons .button:hover, .ui.basic.blue.button:hover, .play-button.basic.blue.buttons .button:hover, .play-button.basic.blue.button:hover, .ui.basic.blue.buttons .play-button:hover, .ui.basic.blue.play-button:hover, .ui.basic.play-button.buttons .button:hover, .ui.basic.play-button.button:hover, .download-button.basic.blue.buttons .button:hover, .download-button.basic.blue.button:hover, .ui.basic.blue.buttons .download-button:hover, .ui.basic.blue.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #3ac9c9 inset !important; color: #3ac9c9 !important; } .ui.basic.blue.buttons .button:focus, .ui.basic.blue.button:focus, .play-button.basic.blue.buttons .button:focus, .play-button.basic.blue.button:focus, .ui.basic.blue.buttons .play-button:focus, .ui.basic.blue.play-button:focus, .ui.basic.play-button.buttons .button:focus, .ui.basic.play-button.button:focus, .download-button.basic.blue.buttons .button:focus, .download-button.basic.blue.button:focus, .ui.basic.blue.buttons .download-button:focus, .ui.basic.blue.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #2ec6c6 inset !important; color: #3ac9c9 !important; } .ui.basic.blue.buttons .active.button, .ui.basic.blue.active.button, .play-button.basic.blue.buttons .active.button, .play-button.basic.blue.active.button, .ui.basic.blue.buttons .active.play-button, .ui.basic.blue.active.play-button, .ui.basic.play-button.buttons .active.button, .ui.basic.play-button.active.button, .download-button.basic.blue.buttons .active.button, .download-button.basic.blue.active.button, .ui.basic.blue.buttons .active.download-button, .ui.basic.blue.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #37cdcd inset !important; color: #38b2b2 !important; } .ui.basic.blue.buttons .button:active, .ui.basic.blue.button:active, .play-button.basic.blue.buttons .button:active, .play-button.basic.blue.button:active, .ui.basic.blue.buttons .play-button:active, .ui.basic.blue.play-button:active, .ui.basic.play-button.buttons .button:active, .ui.basic.play-button.button:active, .download-button.basic.blue.buttons .button:active, .download-button.basic.blue.button:active, .ui.basic.blue.buttons .download-button:active, .ui.basic.blue.download-button:active { box-shadow: 0px 0px 0px 1px #38b2b2 inset !important; color: #38b2b2 !important; } .ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.blue.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.blue.play-button:not(:first-child), .ui.buttons:not(.vertical) > .basic.play-button.button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.blue.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.blue.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.blue.buttons .button, .ui.inverted.blue.button, .play-button.inverted.blue.buttons .button, .play-button.inverted.blue.button, .ui.inverted.blue.buttons .play-button, .ui.inverted.blue.play-button, .ui.inverted.play-button.buttons .button, .ui.inverted.play-button.button, .download-button.inverted.blue.buttons .button, .download-button.inverted.blue.button, .ui.inverted.blue.buttons .download-button, .ui.inverted.blue.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #54C8FF inset !important; color: #54C8FF; } .ui.inverted.blue.buttons .button:hover, .ui.inverted.blue.button:hover, .ui.inverted.blue.buttons .button:focus, .ui.inverted.blue.button:focus, .ui.inverted.blue.buttons .button.active, .ui.inverted.blue.button.active, .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.button:active, .play-button.inverted.blue.buttons .button:hover, .play-button.inverted.blue.button:hover, .play-button.inverted.blue.buttons .button:focus, .play-button.inverted.blue.button:focus, .play-button.inverted.blue.buttons .button.active, .play-button.inverted.blue.button.active, .play-button.inverted.blue.buttons .button:active, .play-button.inverted.blue.button:active, .ui.inverted.blue.buttons .play-button:hover, .ui.inverted.blue.play-button:hover, .ui.inverted.blue.buttons .play-button:focus, .ui.inverted.blue.play-button:focus, .ui.inverted.blue.buttons .play-button.active, .ui.inverted.blue.play-button.active, .ui.inverted.blue.buttons .play-button:active, .ui.inverted.blue.play-button:active, .ui.inverted.play-button.buttons .button:hover, .ui.inverted.play-button.button:hover, .ui.inverted.play-button.buttons .button:focus, .ui.inverted.play-button.button:focus, .ui.inverted.play-button.buttons .button.active, .ui.inverted.play-button.button.active, .ui.inverted.play-button.buttons .button:active, .ui.inverted.play-button.button:active, .download-button.inverted.blue.buttons .button:hover, .download-button.inverted.blue.button:hover, .download-button.inverted.blue.buttons .button:focus, .download-button.inverted.blue.button:focus, .download-button.inverted.blue.buttons .button.active, .download-button.inverted.blue.button.active, .download-button.inverted.blue.buttons .button:active, .download-button.inverted.blue.button:active, .ui.inverted.blue.buttons .download-button:hover, .ui.inverted.blue.download-button:hover, .ui.inverted.blue.buttons .download-button:focus, .ui.inverted.blue.download-button:focus, .ui.inverted.blue.buttons .download-button.active, .ui.inverted.blue.download-button.active, .ui.inverted.blue.buttons .download-button:active, .ui.inverted.blue.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.blue.buttons .button:hover, .ui.inverted.blue.button:hover, .play-button.inverted.blue.buttons .button:hover, .play-button.inverted.blue.button:hover, .ui.inverted.blue.buttons .play-button:hover, .ui.inverted.blue.play-button:hover, .ui.inverted.play-button.buttons .button:hover, .ui.inverted.play-button.button:hover, .download-button.inverted.blue.buttons .button:hover, .download-button.inverted.blue.button:hover, .ui.inverted.blue.buttons .download-button:hover, .ui.inverted.blue.download-button:hover { background-color: #3ac0ff; } .ui.inverted.blue.buttons .button:focus, .ui.inverted.blue.button:focus, .play-button.inverted.blue.buttons .button:focus, .play-button.inverted.blue.button:focus, .ui.inverted.blue.buttons .play-button:focus, .ui.inverted.blue.play-button:focus, .ui.inverted.play-button.buttons .button:focus, .ui.inverted.play-button.button:focus, .download-button.inverted.blue.buttons .button:focus, .download-button.inverted.blue.button:focus, .ui.inverted.blue.buttons .download-button:focus, .ui.inverted.blue.download-button:focus { background-color: #2bbbff; } .ui.inverted.blue.buttons .active.button, .ui.inverted.blue.active.button, .play-button.inverted.blue.buttons .active.button, .play-button.inverted.blue.active.button, .ui.inverted.blue.buttons .active.play-button, .ui.inverted.blue.active.play-button, .ui.inverted.play-button.buttons .active.button, .ui.inverted.play-button.active.button, .download-button.inverted.blue.buttons .active.button, .download-button.inverted.blue.active.button, .ui.inverted.blue.buttons .active.download-button, .ui.inverted.blue.active.download-button { background-color: #3ac0ff; } .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.button:active, .play-button.inverted.blue.buttons .button:active, .play-button.inverted.blue.button:active, .ui.inverted.blue.buttons .play-button:active, .ui.inverted.blue.play-button:active, .ui.inverted.play-button.buttons .button:active, .ui.inverted.play-button.button:active, .download-button.inverted.blue.buttons .button:active, .download-button.inverted.blue.button:active, .ui.inverted.blue.buttons .download-button:active, .ui.inverted.blue.download-button:active { background-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.blue.basic.buttons .button, .ui.inverted.blue.buttons .basic.button, .ui.inverted.blue.basic.button, .play-button.inverted.blue.basic.buttons .button, .play-button.inverted.blue.buttons .basic.button, .play-button.inverted.blue.basic.button, .ui.inverted.blue.basic.buttons .play-button, .ui.inverted.blue.buttons .basic.play-button, .ui.inverted.blue.basic.play-button, .ui.inverted.play-button.basic.buttons .button, .ui.inverted.play-button.buttons .basic.button, .ui.inverted.play-button.basic.button, .download-button.inverted.blue.basic.buttons .button, .download-button.inverted.blue.buttons .basic.button, .download-button.inverted.blue.basic.button, .ui.inverted.blue.basic.buttons .download-button, .ui.inverted.blue.buttons .basic.download-button, .ui.inverted.blue.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.blue.basic.buttons .button:hover, .ui.inverted.blue.buttons .basic.button:hover, .ui.inverted.blue.basic.button:hover, .play-button.inverted.blue.basic.buttons .button:hover, .play-button.inverted.blue.buttons .basic.button:hover, .play-button.inverted.blue.basic.button:hover, .ui.inverted.blue.basic.buttons .play-button:hover, .ui.inverted.blue.buttons .basic.play-button:hover, .ui.inverted.blue.basic.play-button:hover, .ui.inverted.play-button.basic.buttons .button:hover, .ui.inverted.play-button.buttons .basic.button:hover, .ui.inverted.play-button.basic.button:hover, .download-button.inverted.blue.basic.buttons .button:hover, .download-button.inverted.blue.buttons .basic.button:hover, .download-button.inverted.blue.basic.button:hover, .ui.inverted.blue.basic.buttons .download-button:hover, .ui.inverted.blue.buttons .basic.download-button:hover, .ui.inverted.blue.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; color: #54C8FF !important; } .ui.inverted.blue.basic.buttons .button:focus, .ui.inverted.blue.basic.buttons .button:focus, .ui.inverted.blue.basic.button:focus, .play-button.inverted.blue.basic.buttons .button:focus, .play-button.inverted.blue.basic.buttons .button:focus, .play-button.inverted.blue.basic.button:focus, .ui.inverted.blue.basic.buttons .play-button:focus, .ui.inverted.blue.basic.buttons .play-button:focus, .ui.inverted.blue.basic.play-button:focus, .ui.inverted.play-button.basic.buttons .button:focus, .ui.inverted.play-button.basic.buttons .button:focus, .ui.inverted.play-button.basic.button:focus, .download-button.inverted.blue.basic.buttons .button:focus, .download-button.inverted.blue.basic.buttons .button:focus, .download-button.inverted.blue.basic.button:focus, .ui.inverted.blue.basic.buttons .download-button:focus, .ui.inverted.blue.basic.buttons .download-button:focus, .ui.inverted.blue.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #2bbbff inset !important; color: #54C8FF !important; } .ui.inverted.blue.basic.buttons .active.button, .ui.inverted.blue.buttons .basic.active.button, .ui.inverted.blue.basic.active.button, .play-button.inverted.blue.basic.buttons .active.button, .play-button.inverted.blue.buttons .basic.active.button, .play-button.inverted.blue.basic.active.button, .ui.inverted.blue.basic.buttons .active.play-button, .ui.inverted.blue.buttons .basic.active.play-button, .ui.inverted.blue.basic.active.play-button, .ui.inverted.play-button.basic.buttons .active.button, .ui.inverted.play-button.buttons .basic.active.button, .ui.inverted.play-button.basic.active.button, .download-button.inverted.blue.basic.buttons .active.button, .download-button.inverted.blue.buttons .basic.active.button, .download-button.inverted.blue.basic.active.button, .ui.inverted.blue.basic.buttons .active.download-button, .ui.inverted.blue.buttons .basic.active.download-button, .ui.inverted.blue.basic.active.download-button { box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; color: #54C8FF !important; } .ui.inverted.blue.basic.buttons .button:active, .ui.inverted.blue.buttons .basic.button:active, .ui.inverted.blue.basic.button:active, .play-button.inverted.blue.basic.buttons .button:active, .play-button.inverted.blue.buttons .basic.button:active, .play-button.inverted.blue.basic.button:active, .ui.inverted.blue.basic.buttons .play-button:active, .ui.inverted.blue.buttons .basic.play-button:active, .ui.inverted.blue.basic.play-button:active, .ui.inverted.play-button.basic.buttons .button:active, .ui.inverted.play-button.buttons .basic.button:active, .ui.inverted.play-button.basic.button:active, .download-button.inverted.blue.basic.buttons .button:active, .download-button.inverted.blue.buttons .basic.button:active, .download-button.inverted.blue.basic.button:active, .ui.inverted.blue.basic.buttons .download-button:active, .ui.inverted.blue.buttons .basic.download-button:active, .ui.inverted.blue.basic.download-button:active { box-shadow: 0px 0px 0px 2px #21b8ff inset !important; color: #54C8FF !important; } /*--- Green ---*/ .ui.green.buttons .button, .ui.green.button, .ui.ui.button.getting-started-btn.buttons .button, .ui.ui.button.getting-started-btn.button, .play-button.green.buttons .button, .play-button.green.button, .ui.green.buttons .play-button, .ui.green.play-button, .download-button.green.buttons .button, .download-button.green.button, .ui.green.buttons .download-button, .ui.green.download-button, .ui.play-button.button.getting-started-btn.buttons .button, .ui.play-button.button.getting-started-btn.button, .ui.ui.play-button.getting-started-btn.buttons .button, .ui.ui.play-button.getting-started-btn.button, .ui.download-button.button.getting-started-btn.buttons .button, .ui.download-button.button.getting-started-btn.button, .ui.ui.download-button.getting-started-btn.buttons .button, .ui.ui.download-button.getting-started-btn.button { background-color: #3FC863; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.green.button, .ui.ui.button.getting-started-btn.button, .play-button.green.button, .ui.green.play-button, .download-button.green.button, .ui.green.download-button, .ui.play-button.button.getting-started-btn.button, .ui.ui.play-button.getting-started-btn.button, .ui.download-button.button.getting-started-btn.button, .ui.ui.download-button.getting-started-btn.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.green.buttons .button:hover, .ui.green.button:hover, .ui.ui.button.getting-started-btn.buttons .button:hover, .ui.ui.button.getting-started-btn.button:hover, .play-button.green.buttons .button:hover, .play-button.green.button:hover, .ui.green.buttons .play-button:hover, .ui.green.play-button:hover, .download-button.green.buttons .button:hover, .download-button.green.button:hover, .ui.green.buttons .download-button:hover, .ui.green.download-button:hover, .ui.play-button.button.getting-started-btn.buttons .button:hover, .ui.play-button.button.getting-started-btn.button:hover, .ui.ui.play-button.getting-started-btn.buttons .button:hover, .ui.ui.play-button.getting-started-btn.button:hover, .ui.download-button.button.getting-started-btn.buttons .button:hover, .ui.download-button.button.getting-started-btn.button:hover, .ui.ui.download-button.getting-started-btn.buttons .button:hover, .ui.ui.download-button.getting-started-btn.button:hover { background-color: #2ebf54; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .button:focus, .ui.green.button:focus, .ui.ui.button.getting-started-btn.buttons .button:focus, .ui.ui.button.getting-started-btn.button:focus, .play-button.green.buttons .button:focus, .play-button.green.button:focus, .ui.green.buttons .play-button:focus, .ui.green.play-button:focus, .download-button.green.buttons .button:focus, .download-button.green.button:focus, .ui.green.buttons .download-button:focus, .ui.green.download-button:focus, .ui.play-button.button.getting-started-btn.buttons .button:focus, .ui.play-button.button.getting-started-btn.button:focus, .ui.ui.play-button.getting-started-btn.buttons .button:focus, .ui.ui.play-button.getting-started-btn.button:focus, .ui.download-button.button.getting-started-btn.buttons .button:focus, .ui.download-button.button.getting-started-btn.button:focus, .ui.ui.download-button.getting-started-btn.buttons .button:focus, .ui.ui.download-button.getting-started-btn.button:focus { background-color: #25b94c; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .button:active, .ui.green.button:active, .ui.ui.button.getting-started-btn.buttons .button:active, .ui.ui.button.getting-started-btn.button:active, .play-button.green.buttons .button:active, .play-button.green.button:active, .ui.green.buttons .play-button:active, .ui.green.play-button:active, .download-button.green.buttons .button:active, .download-button.green.button:active, .ui.green.buttons .download-button:active, .ui.green.download-button:active, .ui.play-button.button.getting-started-btn.buttons .button:active, .ui.play-button.button.getting-started-btn.button:active, .ui.ui.play-button.getting-started-btn.buttons .button:active, .ui.ui.play-button.getting-started-btn.button:active, .ui.download-button.button.getting-started-btn.buttons .button:active, .ui.download-button.button.getting-started-btn.button:active, .ui.ui.download-button.getting-started-btn.buttons .button:active, .ui.ui.download-button.getting-started-btn.button:active { background-color: #2fa54e; color: #FFFFFF; text-shadow: none; } .ui.green.buttons .active.button, .ui.green.buttons .active.button:active, .ui.green.active.button, .ui.green.button .active.button:active, .ui.ui.button.getting-started-btn.buttons .active.button, .ui.ui.button.getting-started-btn.buttons .active.button:active, .ui.ui.button.getting-started-btn.active.button, .ui.ui.button.getting-started-btn.button .active.button:active, .play-button.green.buttons .active.button, .play-button.green.buttons .active.button:active, .play-button.green.active.button, .play-button.green.button .active.button:active, .ui.green.buttons .active.play-button, .ui.green.buttons .active.play-button:active, .ui.green.active.play-button, .ui.green.play-button .active.play-button:active, .download-button.green.buttons .active.button, .download-button.green.buttons .active.button:active, .download-button.green.active.button, .download-button.green.button .active.button:active, .ui.green.buttons .active.download-button, .ui.green.buttons .active.download-button:active, .ui.green.active.download-button, .ui.green.download-button .active.download-button:active, .ui.play-button.button.getting-started-btn.buttons .active.button, .ui.play-button.button.getting-started-btn.buttons .active.button:active, .ui.play-button.button.getting-started-btn.active.button, .ui.play-button.button.getting-started-btn.button .active.button:active, .ui.ui.play-button.getting-started-btn.buttons .active.button, .ui.ui.play-button.getting-started-btn.buttons .active.button:active, .ui.ui.play-button.getting-started-btn.active.button, .ui.ui.play-button.getting-started-btn.button .active.button:active, .ui.download-button.button.getting-started-btn.buttons .active.button, .ui.download-button.button.getting-started-btn.buttons .active.button:active, .ui.download-button.button.getting-started-btn.active.button, .ui.download-button.button.getting-started-btn.button .active.button:active, .ui.ui.download-button.getting-started-btn.buttons .active.button, .ui.ui.download-button.getting-started-btn.buttons .active.button:active, .ui.ui.download-button.getting-started-btn.active.button, .ui.ui.download-button.getting-started-btn.button .active.button:active { background-color: #2bc253; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.green.buttons .button, .ui.basic.green.button, .ui.basic.ui.button.getting-started-btn.buttons .button, .ui.basic.ui.button.getting-started-btn.button, .play-button.basic.green.buttons .button, .play-button.basic.green.button, .ui.basic.green.buttons .play-button, .ui.basic.green.play-button, .download-button.basic.green.buttons .button, .download-button.basic.green.button, .ui.basic.green.buttons .download-button, .ui.basic.green.download-button, .ui.basic.play-button.button.getting-started-btn.buttons .button, .ui.basic.play-button.button.getting-started-btn.button, .ui.basic.ui.play-button.getting-started-btn.buttons .button, .ui.basic.ui.play-button.getting-started-btn.button, .ui.basic.download-button.button.getting-started-btn.buttons .button, .ui.basic.download-button.button.getting-started-btn.button, .ui.basic.ui.download-button.getting-started-btn.buttons .button, .ui.basic.ui.download-button.getting-started-btn.button { box-shadow: 0px 0px 0px 1px #3FC863 inset !important; color: #3FC863 !important; } .ui.basic.green.buttons .button:hover, .ui.basic.green.button:hover, .ui.basic.ui.button.getting-started-btn.buttons .button:hover, .ui.basic.ui.button.getting-started-btn.button:hover, .play-button.basic.green.buttons .button:hover, .play-button.basic.green.button:hover, .ui.basic.green.buttons .play-button:hover, .ui.basic.green.play-button:hover, .download-button.basic.green.buttons .button:hover, .download-button.basic.green.button:hover, .ui.basic.green.buttons .download-button:hover, .ui.basic.green.download-button:hover, .ui.basic.play-button.button.getting-started-btn.buttons .button:hover, .ui.basic.play-button.button.getting-started-btn.button:hover, .ui.basic.ui.play-button.getting-started-btn.buttons .button:hover, .ui.basic.ui.play-button.getting-started-btn.button:hover, .ui.basic.download-button.button.getting-started-btn.buttons .button:hover, .ui.basic.download-button.button.getting-started-btn.button:hover, .ui.basic.ui.download-button.getting-started-btn.buttons .button:hover, .ui.basic.ui.download-button.getting-started-btn.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #2ebf54 inset !important; color: #2ebf54 !important; } .ui.basic.green.buttons .button:focus, .ui.basic.green.button:focus, .ui.basic.ui.button.getting-started-btn.buttons .button:focus, .ui.basic.ui.button.getting-started-btn.button:focus, .play-button.basic.green.buttons .button:focus, .play-button.basic.green.button:focus, .ui.basic.green.buttons .play-button:focus, .ui.basic.green.play-button:focus, .download-button.basic.green.buttons .button:focus, .download-button.basic.green.button:focus, .ui.basic.green.buttons .download-button:focus, .ui.basic.green.download-button:focus, .ui.basic.play-button.button.getting-started-btn.buttons .button:focus, .ui.basic.play-button.button.getting-started-btn.button:focus, .ui.basic.ui.play-button.getting-started-btn.buttons .button:focus, .ui.basic.ui.play-button.getting-started-btn.button:focus, .ui.basic.download-button.button.getting-started-btn.buttons .button:focus, .ui.basic.download-button.button.getting-started-btn.button:focus, .ui.basic.ui.download-button.getting-started-btn.buttons .button:focus, .ui.basic.ui.download-button.getting-started-btn.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #25b94c inset !important; color: #2ebf54 !important; } .ui.basic.green.buttons .active.button, .ui.basic.green.active.button, .ui.basic.ui.button.getting-started-btn.buttons .active.button, .ui.basic.ui.button.getting-started-btn.active.button, .play-button.basic.green.buttons .active.button, .play-button.basic.green.active.button, .ui.basic.green.buttons .active.play-button, .ui.basic.green.active.play-button, .download-button.basic.green.buttons .active.button, .download-button.basic.green.active.button, .ui.basic.green.buttons .active.download-button, .ui.basic.green.active.download-button, .ui.basic.play-button.button.getting-started-btn.buttons .active.button, .ui.basic.play-button.button.getting-started-btn.active.button, .ui.basic.ui.play-button.getting-started-btn.buttons .active.button, .ui.basic.ui.play-button.getting-started-btn.active.button, .ui.basic.download-button.button.getting-started-btn.buttons .active.button, .ui.basic.download-button.button.getting-started-btn.active.button, .ui.basic.ui.download-button.getting-started-btn.buttons .active.button, .ui.basic.ui.download-button.getting-started-btn.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #2bc253 inset !important; color: #2fa54e !important; } .ui.basic.green.buttons .button:active, .ui.basic.green.button:active, .ui.basic.ui.button.getting-started-btn.buttons .button:active, .ui.basic.ui.button.getting-started-btn.button:active, .play-button.basic.green.buttons .button:active, .play-button.basic.green.button:active, .ui.basic.green.buttons .play-button:active, .ui.basic.green.play-button:active, .download-button.basic.green.buttons .button:active, .download-button.basic.green.button:active, .ui.basic.green.buttons .download-button:active, .ui.basic.green.download-button:active, .ui.basic.play-button.button.getting-started-btn.buttons .button:active, .ui.basic.play-button.button.getting-started-btn.button:active, .ui.basic.ui.play-button.getting-started-btn.buttons .button:active, .ui.basic.ui.play-button.getting-started-btn.button:active, .ui.basic.download-button.button.getting-started-btn.buttons .button:active, .ui.basic.download-button.button.getting-started-btn.button:active, .ui.basic.ui.download-button.getting-started-btn.buttons .button:active, .ui.basic.ui.download-button.getting-started-btn.button:active { box-shadow: 0px 0px 0px 1px #2fa54e inset !important; color: #2fa54e !important; } .ui.buttons:not(.vertical) > .basic.green.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.ui.button.getting-started-btn.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.green.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.green.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.green.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.green.download-button:not(:first-child), .ui.buttons:not(.vertical) > .basic.play-button.button.getting-started-btn.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.ui.play-button.getting-started-btn.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.download-button.button.getting-started-btn.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.ui.download-button.getting-started-btn.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.green.buttons .button, .ui.inverted.green.button, .ui.inverted.ui.button.getting-started-btn.buttons .button, .ui.inverted.ui.button.getting-started-btn.button, .play-button.inverted.green.buttons .button, .play-button.inverted.green.button, .ui.inverted.green.buttons .play-button, .ui.inverted.green.play-button, .download-button.inverted.green.buttons .button, .download-button.inverted.green.button, .ui.inverted.green.buttons .download-button, .ui.inverted.green.download-button, .ui.inverted.play-button.button.getting-started-btn.buttons .button, .ui.inverted.play-button.button.getting-started-btn.button, .ui.inverted.ui.play-button.getting-started-btn.buttons .button, .ui.inverted.ui.play-button.getting-started-btn.button, .ui.inverted.download-button.button.getting-started-btn.buttons .button, .ui.inverted.download-button.button.getting-started-btn.button, .ui.inverted.ui.download-button.getting-started-btn.buttons .button, .ui.inverted.ui.download-button.getting-started-btn.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #2ECC40 inset !important; color: #2ECC40; } .ui.inverted.green.buttons .button:hover, .ui.inverted.green.button:hover, .ui.inverted.green.buttons .button:focus, .ui.inverted.green.button:focus, .ui.inverted.green.buttons .button.active, .ui.inverted.green.button.active, .ui.inverted.green.buttons .button:active, .ui.inverted.green.button:active, .ui.inverted.ui.button.getting-started-btn.buttons .button:hover, .ui.inverted.ui.button.getting-started-btn.button:hover, .ui.inverted.ui.button.getting-started-btn.buttons .button:focus, .ui.inverted.ui.button.getting-started-btn.button:focus, .ui.inverted.ui.button.getting-started-btn.buttons .button.active, .ui.inverted.ui.button.getting-started-btn.button.active, .ui.inverted.ui.button.getting-started-btn.buttons .button:active, .ui.inverted.ui.button.getting-started-btn.button:active, .play-button.inverted.green.buttons .button:hover, .play-button.inverted.green.button:hover, .play-button.inverted.green.buttons .button:focus, .play-button.inverted.green.button:focus, .play-button.inverted.green.buttons .button.active, .play-button.inverted.green.button.active, .play-button.inverted.green.buttons .button:active, .play-button.inverted.green.button:active, .ui.inverted.green.buttons .play-button:hover, .ui.inverted.green.play-button:hover, .ui.inverted.green.buttons .play-button:focus, .ui.inverted.green.play-button:focus, .ui.inverted.green.buttons .play-button.active, .ui.inverted.green.play-button.active, .ui.inverted.green.buttons .play-button:active, .ui.inverted.green.play-button:active, .download-button.inverted.green.buttons .button:hover, .download-button.inverted.green.button:hover, .download-button.inverted.green.buttons .button:focus, .download-button.inverted.green.button:focus, .download-button.inverted.green.buttons .button.active, .download-button.inverted.green.button.active, .download-button.inverted.green.buttons .button:active, .download-button.inverted.green.button:active, .ui.inverted.green.buttons .download-button:hover, .ui.inverted.green.download-button:hover, .ui.inverted.green.buttons .download-button:focus, .ui.inverted.green.download-button:focus, .ui.inverted.green.buttons .download-button.active, .ui.inverted.green.download-button.active, .ui.inverted.green.buttons .download-button:active, .ui.inverted.green.download-button:active, .ui.inverted.play-button.button.getting-started-btn.buttons .button:hover, .ui.inverted.play-button.button.getting-started-btn.button:hover, .ui.inverted.play-button.button.getting-started-btn.buttons .button:focus, .ui.inverted.play-button.button.getting-started-btn.button:focus, .ui.inverted.play-button.button.getting-started-btn.buttons .button.active, .ui.inverted.play-button.button.getting-started-btn.button.active, .ui.inverted.play-button.button.getting-started-btn.buttons .button:active, .ui.inverted.play-button.button.getting-started-btn.button:active, .ui.inverted.ui.play-button.getting-started-btn.buttons .button:hover, .ui.inverted.ui.play-button.getting-started-btn.button:hover, .ui.inverted.ui.play-button.getting-started-btn.buttons .button:focus, .ui.inverted.ui.play-button.getting-started-btn.button:focus, .ui.inverted.ui.play-button.getting-started-btn.buttons .button.active, .ui.inverted.ui.play-button.getting-started-btn.button.active, .ui.inverted.ui.play-button.getting-started-btn.buttons .button:active, .ui.inverted.ui.play-button.getting-started-btn.button:active, .ui.inverted.download-button.button.getting-started-btn.buttons .button:hover, .ui.inverted.download-button.button.getting-started-btn.button:hover, .ui.inverted.download-button.button.getting-started-btn.buttons .button:focus, .ui.inverted.download-button.button.getting-started-btn.button:focus, .ui.inverted.download-button.button.getting-started-btn.buttons .button.active, .ui.inverted.download-button.button.getting-started-btn.button.active, .ui.inverted.download-button.button.getting-started-btn.buttons .button:active, .ui.inverted.download-button.button.getting-started-btn.button:active, .ui.inverted.ui.download-button.getting-started-btn.buttons .button:hover, .ui.inverted.ui.download-button.getting-started-btn.button:hover, .ui.inverted.ui.download-button.getting-started-btn.buttons .button:focus, .ui.inverted.ui.download-button.getting-started-btn.button:focus, .ui.inverted.ui.download-button.getting-started-btn.buttons .button.active, .ui.inverted.ui.download-button.getting-started-btn.button.active, .ui.inverted.ui.download-button.getting-started-btn.buttons .button:active, .ui.inverted.ui.download-button.getting-started-btn.button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.green.buttons .button:hover, .ui.inverted.green.button:hover, .ui.inverted.ui.button.getting-started-btn.buttons .button:hover, .ui.inverted.ui.button.getting-started-btn.button:hover, .play-button.inverted.green.buttons .button:hover, .play-button.inverted.green.button:hover, .ui.inverted.green.buttons .play-button:hover, .ui.inverted.green.play-button:hover, .download-button.inverted.green.buttons .button:hover, .download-button.inverted.green.button:hover, .ui.inverted.green.buttons .download-button:hover, .ui.inverted.green.download-button:hover, .ui.inverted.play-button.button.getting-started-btn.buttons .button:hover, .ui.inverted.play-button.button.getting-started-btn.button:hover, .ui.inverted.ui.play-button.getting-started-btn.buttons .button:hover, .ui.inverted.ui.play-button.getting-started-btn.button:hover, .ui.inverted.download-button.button.getting-started-btn.buttons .button:hover, .ui.inverted.download-button.button.getting-started-btn.button:hover, .ui.inverted.ui.download-button.getting-started-btn.buttons .button:hover, .ui.inverted.ui.download-button.getting-started-btn.button:hover { background-color: #22be34; } .ui.inverted.green.buttons .button:focus, .ui.inverted.green.button:focus, .ui.inverted.ui.button.getting-started-btn.buttons .button:focus, .ui.inverted.ui.button.getting-started-btn.button:focus, .play-button.inverted.green.buttons .button:focus, .play-button.inverted.green.button:focus, .ui.inverted.green.buttons .play-button:focus, .ui.inverted.green.play-button:focus, .download-button.inverted.green.buttons .button:focus, .download-button.inverted.green.button:focus, .ui.inverted.green.buttons .download-button:focus, .ui.inverted.green.download-button:focus, .ui.inverted.play-button.button.getting-started-btn.buttons .button:focus, .ui.inverted.play-button.button.getting-started-btn.button:focus, .ui.inverted.ui.play-button.getting-started-btn.buttons .button:focus, .ui.inverted.ui.play-button.getting-started-btn.button:focus, .ui.inverted.download-button.button.getting-started-btn.buttons .button:focus, .ui.inverted.download-button.button.getting-started-btn.button:focus, .ui.inverted.ui.download-button.getting-started-btn.buttons .button:focus, .ui.inverted.ui.download-button.getting-started-btn.button:focus { background-color: #19b82b; } .ui.inverted.green.buttons .active.button, .ui.inverted.green.active.button, .ui.inverted.ui.button.getting-started-btn.buttons .active.button, .ui.inverted.ui.button.getting-started-btn.active.button, .play-button.inverted.green.buttons .active.button, .play-button.inverted.green.active.button, .ui.inverted.green.buttons .active.play-button, .ui.inverted.green.active.play-button, .download-button.inverted.green.buttons .active.button, .download-button.inverted.green.active.button, .ui.inverted.green.buttons .active.download-button, .ui.inverted.green.active.download-button, .ui.inverted.play-button.button.getting-started-btn.buttons .active.button, .ui.inverted.play-button.button.getting-started-btn.active.button, .ui.inverted.ui.play-button.getting-started-btn.buttons .active.button, .ui.inverted.ui.play-button.getting-started-btn.active.button, .ui.inverted.download-button.button.getting-started-btn.buttons .active.button, .ui.inverted.download-button.button.getting-started-btn.active.button, .ui.inverted.ui.download-button.getting-started-btn.buttons .active.button, .ui.inverted.ui.download-button.getting-started-btn.active.button { background-color: #1fc231; } .ui.inverted.green.buttons .button:active, .ui.inverted.green.button:active, .ui.inverted.ui.button.getting-started-btn.buttons .button:active, .ui.inverted.ui.button.getting-started-btn.button:active, .play-button.inverted.green.buttons .button:active, .play-button.inverted.green.button:active, .ui.inverted.green.buttons .play-button:active, .ui.inverted.green.play-button:active, .download-button.inverted.green.buttons .button:active, .download-button.inverted.green.button:active, .ui.inverted.green.buttons .download-button:active, .ui.inverted.green.download-button:active, .ui.inverted.play-button.button.getting-started-btn.buttons .button:active, .ui.inverted.play-button.button.getting-started-btn.button:active, .ui.inverted.ui.play-button.getting-started-btn.buttons .button:active, .ui.inverted.ui.play-button.getting-started-btn.button:active, .ui.inverted.download-button.button.getting-started-btn.buttons .button:active, .ui.inverted.download-button.button.getting-started-btn.button:active, .ui.inverted.ui.download-button.getting-started-btn.buttons .button:active, .ui.inverted.ui.download-button.getting-started-btn.button:active { background-color: #25a233; } /* Inverted Basic */ .ui.inverted.green.basic.buttons .button, .ui.inverted.green.buttons .basic.button, .ui.inverted.green.basic.button, .ui.inverted.ui.button.getting-started-btn.basic.buttons .button, .ui.inverted.ui.button.getting-started-btn.buttons .basic.button, .ui.inverted.ui.button.getting-started-btn.basic.button, .play-button.inverted.green.basic.buttons .button, .play-button.inverted.green.buttons .basic.button, .play-button.inverted.green.basic.button, .ui.inverted.green.basic.buttons .play-button, .ui.inverted.green.buttons .basic.play-button, .ui.inverted.green.basic.play-button, .download-button.inverted.green.basic.buttons .button, .download-button.inverted.green.buttons .basic.button, .download-button.inverted.green.basic.button, .ui.inverted.green.basic.buttons .download-button, .ui.inverted.green.buttons .basic.download-button, .ui.inverted.green.basic.download-button, .ui.inverted.play-button.button.getting-started-btn.basic.buttons .button, .ui.inverted.play-button.button.getting-started-btn.buttons .basic.button, .ui.inverted.play-button.button.getting-started-btn.basic.button, .ui.inverted.ui.play-button.getting-started-btn.basic.buttons .button, .ui.inverted.ui.play-button.getting-started-btn.buttons .basic.button, .ui.inverted.ui.play-button.getting-started-btn.basic.button, .ui.inverted.download-button.button.getting-started-btn.basic.buttons .button, .ui.inverted.download-button.button.getting-started-btn.buttons .basic.button, .ui.inverted.download-button.button.getting-started-btn.basic.button, .ui.inverted.ui.download-button.getting-started-btn.basic.buttons .button, .ui.inverted.ui.download-button.getting-started-btn.buttons .basic.button, .ui.inverted.ui.download-button.getting-started-btn.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.green.basic.buttons .button:hover, .ui.inverted.green.buttons .basic.button:hover, .ui.inverted.green.basic.button:hover, .ui.inverted.ui.button.getting-started-btn.basic.buttons .button:hover, .ui.inverted.ui.button.getting-started-btn.buttons .basic.button:hover, .ui.inverted.ui.button.getting-started-btn.basic.button:hover, .play-button.inverted.green.basic.buttons .button:hover, .play-button.inverted.green.buttons .basic.button:hover, .play-button.inverted.green.basic.button:hover, .ui.inverted.green.basic.buttons .play-button:hover, .ui.inverted.green.buttons .basic.play-button:hover, .ui.inverted.green.basic.play-button:hover, .download-button.inverted.green.basic.buttons .button:hover, .download-button.inverted.green.buttons .basic.button:hover, .download-button.inverted.green.basic.button:hover, .ui.inverted.green.basic.buttons .download-button:hover, .ui.inverted.green.buttons .basic.download-button:hover, .ui.inverted.green.basic.download-button:hover, .ui.inverted.play-button.button.getting-started-btn.basic.buttons .button:hover, .ui.inverted.play-button.button.getting-started-btn.buttons .basic.button:hover, .ui.inverted.play-button.button.getting-started-btn.basic.button:hover, .ui.inverted.ui.play-button.getting-started-btn.basic.buttons .button:hover, .ui.inverted.ui.play-button.getting-started-btn.buttons .basic.button:hover, .ui.inverted.ui.play-button.getting-started-btn.basic.button:hover, .ui.inverted.download-button.button.getting-started-btn.basic.buttons .button:hover, .ui.inverted.download-button.button.getting-started-btn.buttons .basic.button:hover, .ui.inverted.download-button.button.getting-started-btn.basic.button:hover, .ui.inverted.ui.download-button.getting-started-btn.basic.buttons .button:hover, .ui.inverted.ui.download-button.getting-started-btn.buttons .basic.button:hover, .ui.inverted.ui.download-button.getting-started-btn.basic.button:hover { box-shadow: 0px 0px 0px 2px #22be34 inset !important; color: #2ECC40 !important; } .ui.inverted.green.basic.buttons .button:focus, .ui.inverted.green.basic.buttons .button:focus, .ui.inverted.green.basic.button:focus, .ui.inverted.ui.button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.ui.button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.ui.button.getting-started-btn.basic.button:focus, .play-button.inverted.green.basic.buttons .button:focus, .play-button.inverted.green.basic.buttons .button:focus, .play-button.inverted.green.basic.button:focus, .ui.inverted.green.basic.buttons .play-button:focus, .ui.inverted.green.basic.buttons .play-button:focus, .ui.inverted.green.basic.play-button:focus, .download-button.inverted.green.basic.buttons .button:focus, .download-button.inverted.green.basic.buttons .button:focus, .download-button.inverted.green.basic.button:focus, .ui.inverted.green.basic.buttons .download-button:focus, .ui.inverted.green.basic.buttons .download-button:focus, .ui.inverted.green.basic.download-button:focus, .ui.inverted.play-button.button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.play-button.button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.play-button.button.getting-started-btn.basic.button:focus, .ui.inverted.ui.play-button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.ui.play-button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.ui.play-button.getting-started-btn.basic.button:focus, .ui.inverted.download-button.button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.download-button.button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.download-button.button.getting-started-btn.basic.button:focus, .ui.inverted.ui.download-button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.ui.download-button.getting-started-btn.basic.buttons .button:focus, .ui.inverted.ui.download-button.getting-started-btn.basic.button:focus { box-shadow: 0px 0px 0px 2px #19b82b inset !important; color: #2ECC40 !important; } .ui.inverted.green.basic.buttons .active.button, .ui.inverted.green.buttons .basic.active.button, .ui.inverted.green.basic.active.button, .ui.inverted.ui.button.getting-started-btn.basic.buttons .active.button, .ui.inverted.ui.button.getting-started-btn.buttons .basic.active.button, .ui.inverted.ui.button.getting-started-btn.basic.active.button, .play-button.inverted.green.basic.buttons .active.button, .play-button.inverted.green.buttons .basic.active.button, .play-button.inverted.green.basic.active.button, .ui.inverted.green.basic.buttons .active.play-button, .ui.inverted.green.buttons .basic.active.play-button, .ui.inverted.green.basic.active.play-button, .download-button.inverted.green.basic.buttons .active.button, .download-button.inverted.green.buttons .basic.active.button, .download-button.inverted.green.basic.active.button, .ui.inverted.green.basic.buttons .active.download-button, .ui.inverted.green.buttons .basic.active.download-button, .ui.inverted.green.basic.active.download-button, .ui.inverted.play-button.button.getting-started-btn.basic.buttons .active.button, .ui.inverted.play-button.button.getting-started-btn.buttons .basic.active.button, .ui.inverted.play-button.button.getting-started-btn.basic.active.button, .ui.inverted.ui.play-button.getting-started-btn.basic.buttons .active.button, .ui.inverted.ui.play-button.getting-started-btn.buttons .basic.active.button, .ui.inverted.ui.play-button.getting-started-btn.basic.active.button, .ui.inverted.download-button.button.getting-started-btn.basic.buttons .active.button, .ui.inverted.download-button.button.getting-started-btn.buttons .basic.active.button, .ui.inverted.download-button.button.getting-started-btn.basic.active.button, .ui.inverted.ui.download-button.getting-started-btn.basic.buttons .active.button, .ui.inverted.ui.download-button.getting-started-btn.buttons .basic.active.button, .ui.inverted.ui.download-button.getting-started-btn.basic.active.button { box-shadow: 0px 0px 0px 2px #1fc231 inset !important; color: #2ECC40 !important; } .ui.inverted.green.basic.buttons .button:active, .ui.inverted.green.buttons .basic.button:active, .ui.inverted.green.basic.button:active, .ui.inverted.ui.button.getting-started-btn.basic.buttons .button:active, .ui.inverted.ui.button.getting-started-btn.buttons .basic.button:active, .ui.inverted.ui.button.getting-started-btn.basic.button:active, .play-button.inverted.green.basic.buttons .button:active, .play-button.inverted.green.buttons .basic.button:active, .play-button.inverted.green.basic.button:active, .ui.inverted.green.basic.buttons .play-button:active, .ui.inverted.green.buttons .basic.play-button:active, .ui.inverted.green.basic.play-button:active, .download-button.inverted.green.basic.buttons .button:active, .download-button.inverted.green.buttons .basic.button:active, .download-button.inverted.green.basic.button:active, .ui.inverted.green.basic.buttons .download-button:active, .ui.inverted.green.buttons .basic.download-button:active, .ui.inverted.green.basic.download-button:active, .ui.inverted.play-button.button.getting-started-btn.basic.buttons .button:active, .ui.inverted.play-button.button.getting-started-btn.buttons .basic.button:active, .ui.inverted.play-button.button.getting-started-btn.basic.button:active, .ui.inverted.ui.play-button.getting-started-btn.basic.buttons .button:active, .ui.inverted.ui.play-button.getting-started-btn.buttons .basic.button:active, .ui.inverted.ui.play-button.getting-started-btn.basic.button:active, .ui.inverted.download-button.button.getting-started-btn.basic.buttons .button:active, .ui.inverted.download-button.button.getting-started-btn.buttons .basic.button:active, .ui.inverted.download-button.button.getting-started-btn.basic.button:active, .ui.inverted.ui.download-button.getting-started-btn.basic.buttons .button:active, .ui.inverted.ui.download-button.getting-started-btn.buttons .basic.button:active, .ui.inverted.ui.download-button.getting-started-btn.basic.button:active { box-shadow: 0px 0px 0px 2px #25a233 inset !important; color: #2ECC40 !important; } /*--- Orange ---*/ .ui.orange.buttons .button, .ui.orange.button, .play-button.orange.buttons .button, .play-button.orange.button, .ui.orange.buttons .play-button, .ui.orange.play-button, .download-button.orange.buttons .button, .download-button.orange.button, .ui.orange.buttons .download-button, .ui.orange.download-button { background-color: #DF4600; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.orange.button, .play-button.orange.button, .ui.orange.play-button, .download-button.orange.button, .ui.orange.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.orange.buttons .button:hover, .ui.orange.button:hover, .play-button.orange.buttons .button:hover, .play-button.orange.button:hover, .ui.orange.buttons .play-button:hover, .ui.orange.play-button:hover, .download-button.orange.buttons .button:hover, .download-button.orange.button:hover, .ui.orange.buttons .download-button:hover, .ui.orange.download-button:hover { background-color: #c63e00; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .button:focus, .ui.orange.button:focus, .play-button.orange.buttons .button:focus, .play-button.orange.button:focus, .ui.orange.buttons .play-button:focus, .ui.orange.play-button:focus, .download-button.orange.buttons .button:focus, .download-button.orange.button:focus, .ui.orange.buttons .download-button:focus, .ui.orange.download-button:focus { background-color: #b63900; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .button:active, .ui.orange.button:active, .play-button.orange.buttons .button:active, .play-button.orange.button:active, .ui.orange.buttons .play-button:active, .ui.orange.play-button:active, .download-button.orange.buttons .button:active, .download-button.orange.button:active, .ui.orange.buttons .download-button:active, .ui.orange.download-button:active { background-color: #ac3600; color: #FFFFFF; text-shadow: none; } .ui.orange.buttons .active.button, .ui.orange.buttons .active.button:active, .ui.orange.active.button, .ui.orange.button .active.button:active, .play-button.orange.buttons .active.button, .play-button.orange.buttons .active.button:active, .play-button.orange.active.button, .play-button.orange.button .active.button:active, .ui.orange.buttons .active.play-button, .ui.orange.buttons .active.play-button:active, .ui.orange.active.play-button, .ui.orange.play-button .active.play-button:active, .download-button.orange.buttons .active.button, .download-button.orange.buttons .active.button:active, .download-button.orange.active.button, .download-button.orange.button .active.button:active, .ui.orange.buttons .active.download-button, .ui.orange.buttons .active.download-button:active, .ui.orange.active.download-button, .ui.orange.download-button .active.download-button:active { background-color: #c63e00; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.orange.buttons .button, .ui.basic.orange.button, .play-button.basic.orange.buttons .button, .play-button.basic.orange.button, .ui.basic.orange.buttons .play-button, .ui.basic.orange.play-button, .download-button.basic.orange.buttons .button, .download-button.basic.orange.button, .ui.basic.orange.buttons .download-button, .ui.basic.orange.download-button { box-shadow: 0px 0px 0px 1px #DF4600 inset !important; color: #DF4600 !important; } .ui.basic.orange.buttons .button:hover, .ui.basic.orange.button:hover, .play-button.basic.orange.buttons .button:hover, .play-button.basic.orange.button:hover, .ui.basic.orange.buttons .play-button:hover, .ui.basic.orange.play-button:hover, .download-button.basic.orange.buttons .button:hover, .download-button.basic.orange.button:hover, .ui.basic.orange.buttons .download-button:hover, .ui.basic.orange.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #c63e00 inset !important; color: #c63e00 !important; } .ui.basic.orange.buttons .button:focus, .ui.basic.orange.button:focus, .play-button.basic.orange.buttons .button:focus, .play-button.basic.orange.button:focus, .ui.basic.orange.buttons .play-button:focus, .ui.basic.orange.play-button:focus, .download-button.basic.orange.buttons .button:focus, .download-button.basic.orange.button:focus, .ui.basic.orange.buttons .download-button:focus, .ui.basic.orange.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #b63900 inset !important; color: #c63e00 !important; } .ui.basic.orange.buttons .active.button, .ui.basic.orange.active.button, .play-button.basic.orange.buttons .active.button, .play-button.basic.orange.active.button, .ui.basic.orange.buttons .active.play-button, .ui.basic.orange.active.play-button, .download-button.basic.orange.buttons .active.button, .download-button.basic.orange.active.button, .ui.basic.orange.buttons .active.download-button, .ui.basic.orange.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #c63e00 inset !important; color: #ac3600 !important; } .ui.basic.orange.buttons .button:active, .ui.basic.orange.button:active, .play-button.basic.orange.buttons .button:active, .play-button.basic.orange.button:active, .ui.basic.orange.buttons .play-button:active, .ui.basic.orange.play-button:active, .download-button.basic.orange.buttons .button:active, .download-button.basic.orange.button:active, .ui.basic.orange.buttons .download-button:active, .ui.basic.orange.download-button:active { box-shadow: 0px 0px 0px 1px #ac3600 inset !important; color: #ac3600 !important; } .ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.orange.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.orange.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.orange.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.orange.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.orange.buttons .button, .ui.inverted.orange.button, .play-button.inverted.orange.buttons .button, .play-button.inverted.orange.button, .ui.inverted.orange.buttons .play-button, .ui.inverted.orange.play-button, .download-button.inverted.orange.buttons .button, .download-button.inverted.orange.button, .ui.inverted.orange.buttons .download-button, .ui.inverted.orange.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FF851B inset !important; color: #FF851B; } .ui.inverted.orange.buttons .button:hover, .ui.inverted.orange.button:hover, .ui.inverted.orange.buttons .button:focus, .ui.inverted.orange.button:focus, .ui.inverted.orange.buttons .button.active, .ui.inverted.orange.button.active, .ui.inverted.orange.buttons .button:active, .ui.inverted.orange.button:active, .play-button.inverted.orange.buttons .button:hover, .play-button.inverted.orange.button:hover, .play-button.inverted.orange.buttons .button:focus, .play-button.inverted.orange.button:focus, .play-button.inverted.orange.buttons .button.active, .play-button.inverted.orange.button.active, .play-button.inverted.orange.buttons .button:active, .play-button.inverted.orange.button:active, .ui.inverted.orange.buttons .play-button:hover, .ui.inverted.orange.play-button:hover, .ui.inverted.orange.buttons .play-button:focus, .ui.inverted.orange.play-button:focus, .ui.inverted.orange.buttons .play-button.active, .ui.inverted.orange.play-button.active, .ui.inverted.orange.buttons .play-button:active, .ui.inverted.orange.play-button:active, .download-button.inverted.orange.buttons .button:hover, .download-button.inverted.orange.button:hover, .download-button.inverted.orange.buttons .button:focus, .download-button.inverted.orange.button:focus, .download-button.inverted.orange.buttons .button.active, .download-button.inverted.orange.button.active, .download-button.inverted.orange.buttons .button:active, .download-button.inverted.orange.button:active, .ui.inverted.orange.buttons .download-button:hover, .ui.inverted.orange.download-button:hover, .ui.inverted.orange.buttons .download-button:focus, .ui.inverted.orange.download-button:focus, .ui.inverted.orange.buttons .download-button.active, .ui.inverted.orange.download-button.active, .ui.inverted.orange.buttons .download-button:active, .ui.inverted.orange.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.orange.buttons .button:hover, .ui.inverted.orange.button:hover, .play-button.inverted.orange.buttons .button:hover, .play-button.inverted.orange.button:hover, .ui.inverted.orange.buttons .play-button:hover, .ui.inverted.orange.play-button:hover, .download-button.inverted.orange.buttons .button:hover, .download-button.inverted.orange.button:hover, .ui.inverted.orange.buttons .download-button:hover, .ui.inverted.orange.download-button:hover { background-color: #ff7701; } .ui.inverted.orange.buttons .button:focus, .ui.inverted.orange.button:focus, .play-button.inverted.orange.buttons .button:focus, .play-button.inverted.orange.button:focus, .ui.inverted.orange.buttons .play-button:focus, .ui.inverted.orange.play-button:focus, .download-button.inverted.orange.buttons .button:focus, .download-button.inverted.orange.button:focus, .ui.inverted.orange.buttons .download-button:focus, .ui.inverted.orange.download-button:focus { background-color: #f17000; } .ui.inverted.orange.buttons .active.button, .ui.inverted.orange.active.button, .play-button.inverted.orange.buttons .active.button, .play-button.inverted.orange.active.button, .ui.inverted.orange.buttons .active.play-button, .ui.inverted.orange.active.play-button, .download-button.inverted.orange.buttons .active.button, .download-button.inverted.orange.active.button, .ui.inverted.orange.buttons .active.download-button, .ui.inverted.orange.active.download-button { background-color: #ff7701; } .ui.inverted.orange.buttons .button:active, .ui.inverted.orange.button:active, .play-button.inverted.orange.buttons .button:active, .play-button.inverted.orange.button:active, .ui.inverted.orange.buttons .play-button:active, .ui.inverted.orange.play-button:active, .download-button.inverted.orange.buttons .button:active, .download-button.inverted.orange.button:active, .ui.inverted.orange.buttons .download-button:active, .ui.inverted.orange.download-button:active { background-color: #e76b00; } /* Inverted Basic */ .ui.inverted.orange.basic.buttons .button, .ui.inverted.orange.buttons .basic.button, .ui.inverted.orange.basic.button, .play-button.inverted.orange.basic.buttons .button, .play-button.inverted.orange.buttons .basic.button, .play-button.inverted.orange.basic.button, .ui.inverted.orange.basic.buttons .play-button, .ui.inverted.orange.buttons .basic.play-button, .ui.inverted.orange.basic.play-button, .download-button.inverted.orange.basic.buttons .button, .download-button.inverted.orange.buttons .basic.button, .download-button.inverted.orange.basic.button, .ui.inverted.orange.basic.buttons .download-button, .ui.inverted.orange.buttons .basic.download-button, .ui.inverted.orange.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.orange.basic.buttons .button:hover, .ui.inverted.orange.buttons .basic.button:hover, .ui.inverted.orange.basic.button:hover, .play-button.inverted.orange.basic.buttons .button:hover, .play-button.inverted.orange.buttons .basic.button:hover, .play-button.inverted.orange.basic.button:hover, .ui.inverted.orange.basic.buttons .play-button:hover, .ui.inverted.orange.buttons .basic.play-button:hover, .ui.inverted.orange.basic.play-button:hover, .download-button.inverted.orange.basic.buttons .button:hover, .download-button.inverted.orange.buttons .basic.button:hover, .download-button.inverted.orange.basic.button:hover, .ui.inverted.orange.basic.buttons .download-button:hover, .ui.inverted.orange.buttons .basic.download-button:hover, .ui.inverted.orange.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #ff7701 inset !important; color: #FF851B !important; } .ui.inverted.orange.basic.buttons .button:focus, .ui.inverted.orange.basic.buttons .button:focus, .ui.inverted.orange.basic.button:focus, .play-button.inverted.orange.basic.buttons .button:focus, .play-button.inverted.orange.basic.buttons .button:focus, .play-button.inverted.orange.basic.button:focus, .ui.inverted.orange.basic.buttons .play-button:focus, .ui.inverted.orange.basic.buttons .play-button:focus, .ui.inverted.orange.basic.play-button:focus, .download-button.inverted.orange.basic.buttons .button:focus, .download-button.inverted.orange.basic.buttons .button:focus, .download-button.inverted.orange.basic.button:focus, .ui.inverted.orange.basic.buttons .download-button:focus, .ui.inverted.orange.basic.buttons .download-button:focus, .ui.inverted.orange.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #f17000 inset !important; color: #FF851B !important; } .ui.inverted.orange.basic.buttons .active.button, .ui.inverted.orange.buttons .basic.active.button, .ui.inverted.orange.basic.active.button, .play-button.inverted.orange.basic.buttons .active.button, .play-button.inverted.orange.buttons .basic.active.button, .play-button.inverted.orange.basic.active.button, .ui.inverted.orange.basic.buttons .active.play-button, .ui.inverted.orange.buttons .basic.active.play-button, .ui.inverted.orange.basic.active.play-button, .download-button.inverted.orange.basic.buttons .active.button, .download-button.inverted.orange.buttons .basic.active.button, .download-button.inverted.orange.basic.active.button, .ui.inverted.orange.basic.buttons .active.download-button, .ui.inverted.orange.buttons .basic.active.download-button, .ui.inverted.orange.basic.active.download-button { box-shadow: 0px 0px 0px 2px #ff7701 inset !important; color: #FF851B !important; } .ui.inverted.orange.basic.buttons .button:active, .ui.inverted.orange.buttons .basic.button:active, .ui.inverted.orange.basic.button:active, .play-button.inverted.orange.basic.buttons .button:active, .play-button.inverted.orange.buttons .basic.button:active, .play-button.inverted.orange.basic.button:active, .ui.inverted.orange.basic.buttons .play-button:active, .ui.inverted.orange.buttons .basic.play-button:active, .ui.inverted.orange.basic.play-button:active, .download-button.inverted.orange.basic.buttons .button:active, .download-button.inverted.orange.buttons .basic.button:active, .download-button.inverted.orange.basic.button:active, .ui.inverted.orange.basic.buttons .download-button:active, .ui.inverted.orange.buttons .basic.download-button:active, .ui.inverted.orange.basic.download-button:active { box-shadow: 0px 0px 0px 2px #e76b00 inset !important; color: #FF851B !important; } /*--- Pink ---*/ .ui.pink.buttons .button, .ui.pink.button, .play-button.pink.buttons .button, .play-button.pink.button, .ui.pink.buttons .play-button, .ui.pink.play-button, .download-button.pink.buttons .button, .download-button.pink.button, .ui.pink.buttons .download-button, .ui.pink.download-button { background-color: #E2008C; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.pink.button, .play-button.pink.button, .ui.pink.play-button, .download-button.pink.button, .ui.pink.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.pink.buttons .button:hover, .ui.pink.button:hover, .play-button.pink.buttons .button:hover, .play-button.pink.button:hover, .ui.pink.buttons .play-button:hover, .ui.pink.play-button:hover, .download-button.pink.buttons .button:hover, .download-button.pink.button:hover, .ui.pink.buttons .download-button:hover, .ui.pink.download-button:hover { background-color: #c9007c; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .button:focus, .ui.pink.button:focus, .play-button.pink.buttons .button:focus, .play-button.pink.button:focus, .ui.pink.buttons .play-button:focus, .ui.pink.play-button:focus, .download-button.pink.buttons .button:focus, .download-button.pink.button:focus, .ui.pink.buttons .download-button:focus, .ui.pink.download-button:focus { background-color: #b90073; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .button:active, .ui.pink.button:active, .play-button.pink.buttons .button:active, .play-button.pink.button:active, .ui.pink.buttons .play-button:active, .ui.pink.play-button:active, .download-button.pink.buttons .button:active, .download-button.pink.button:active, .ui.pink.buttons .download-button:active, .ui.pink.download-button:active { background-color: #af006c; color: #FFFFFF; text-shadow: none; } .ui.pink.buttons .active.button, .ui.pink.buttons .active.button:active, .ui.pink.active.button, .ui.pink.button .active.button:active, .play-button.pink.buttons .active.button, .play-button.pink.buttons .active.button:active, .play-button.pink.active.button, .play-button.pink.button .active.button:active, .ui.pink.buttons .active.play-button, .ui.pink.buttons .active.play-button:active, .ui.pink.active.play-button, .ui.pink.play-button .active.play-button:active, .download-button.pink.buttons .active.button, .download-button.pink.buttons .active.button:active, .download-button.pink.active.button, .download-button.pink.button .active.button:active, .ui.pink.buttons .active.download-button, .ui.pink.buttons .active.download-button:active, .ui.pink.active.download-button, .ui.pink.download-button .active.download-button:active { background-color: #c9007c; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.pink.buttons .button, .ui.basic.pink.button, .play-button.basic.pink.buttons .button, .play-button.basic.pink.button, .ui.basic.pink.buttons .play-button, .ui.basic.pink.play-button, .download-button.basic.pink.buttons .button, .download-button.basic.pink.button, .ui.basic.pink.buttons .download-button, .ui.basic.pink.download-button { box-shadow: 0px 0px 0px 1px #E2008C inset !important; color: #E2008C !important; } .ui.basic.pink.buttons .button:hover, .ui.basic.pink.button:hover, .play-button.basic.pink.buttons .button:hover, .play-button.basic.pink.button:hover, .ui.basic.pink.buttons .play-button:hover, .ui.basic.pink.play-button:hover, .download-button.basic.pink.buttons .button:hover, .download-button.basic.pink.button:hover, .ui.basic.pink.buttons .download-button:hover, .ui.basic.pink.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #c9007c inset !important; color: #c9007c !important; } .ui.basic.pink.buttons .button:focus, .ui.basic.pink.button:focus, .play-button.basic.pink.buttons .button:focus, .play-button.basic.pink.button:focus, .ui.basic.pink.buttons .play-button:focus, .ui.basic.pink.play-button:focus, .download-button.basic.pink.buttons .button:focus, .download-button.basic.pink.button:focus, .ui.basic.pink.buttons .download-button:focus, .ui.basic.pink.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #b90073 inset !important; color: #c9007c !important; } .ui.basic.pink.buttons .active.button, .ui.basic.pink.active.button, .play-button.basic.pink.buttons .active.button, .play-button.basic.pink.active.button, .ui.basic.pink.buttons .active.play-button, .ui.basic.pink.active.play-button, .download-button.basic.pink.buttons .active.button, .download-button.basic.pink.active.button, .ui.basic.pink.buttons .active.download-button, .ui.basic.pink.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #c9007c inset !important; color: #af006c !important; } .ui.basic.pink.buttons .button:active, .ui.basic.pink.button:active, .play-button.basic.pink.buttons .button:active, .play-button.basic.pink.button:active, .ui.basic.pink.buttons .play-button:active, .ui.basic.pink.play-button:active, .download-button.basic.pink.buttons .button:active, .download-button.basic.pink.button:active, .ui.basic.pink.buttons .download-button:active, .ui.basic.pink.download-button:active { box-shadow: 0px 0px 0px 1px #af006c inset !important; color: #af006c !important; } .ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.pink.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.pink.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.pink.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.pink.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.pink.buttons .button, .ui.inverted.pink.button, .play-button.inverted.pink.buttons .button, .play-button.inverted.pink.button, .ui.inverted.pink.buttons .play-button, .ui.inverted.pink.play-button, .download-button.inverted.pink.buttons .button, .download-button.inverted.pink.button, .ui.inverted.pink.buttons .download-button, .ui.inverted.pink.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FF8EDF inset !important; color: #FF8EDF; } .ui.inverted.pink.buttons .button:hover, .ui.inverted.pink.button:hover, .ui.inverted.pink.buttons .button:focus, .ui.inverted.pink.button:focus, .ui.inverted.pink.buttons .button.active, .ui.inverted.pink.button.active, .ui.inverted.pink.buttons .button:active, .ui.inverted.pink.button:active, .play-button.inverted.pink.buttons .button:hover, .play-button.inverted.pink.button:hover, .play-button.inverted.pink.buttons .button:focus, .play-button.inverted.pink.button:focus, .play-button.inverted.pink.buttons .button.active, .play-button.inverted.pink.button.active, .play-button.inverted.pink.buttons .button:active, .play-button.inverted.pink.button:active, .ui.inverted.pink.buttons .play-button:hover, .ui.inverted.pink.play-button:hover, .ui.inverted.pink.buttons .play-button:focus, .ui.inverted.pink.play-button:focus, .ui.inverted.pink.buttons .play-button.active, .ui.inverted.pink.play-button.active, .ui.inverted.pink.buttons .play-button:active, .ui.inverted.pink.play-button:active, .download-button.inverted.pink.buttons .button:hover, .download-button.inverted.pink.button:hover, .download-button.inverted.pink.buttons .button:focus, .download-button.inverted.pink.button:focus, .download-button.inverted.pink.buttons .button.active, .download-button.inverted.pink.button.active, .download-button.inverted.pink.buttons .button:active, .download-button.inverted.pink.button:active, .ui.inverted.pink.buttons .download-button:hover, .ui.inverted.pink.download-button:hover, .ui.inverted.pink.buttons .download-button:focus, .ui.inverted.pink.download-button:focus, .ui.inverted.pink.buttons .download-button.active, .ui.inverted.pink.download-button.active, .ui.inverted.pink.buttons .download-button:active, .ui.inverted.pink.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.pink.buttons .button:hover, .ui.inverted.pink.button:hover, .play-button.inverted.pink.buttons .button:hover, .play-button.inverted.pink.button:hover, .ui.inverted.pink.buttons .play-button:hover, .ui.inverted.pink.play-button:hover, .download-button.inverted.pink.buttons .button:hover, .download-button.inverted.pink.button:hover, .ui.inverted.pink.buttons .download-button:hover, .ui.inverted.pink.download-button:hover { background-color: #ff74d8; } .ui.inverted.pink.buttons .button:focus, .ui.inverted.pink.button:focus, .play-button.inverted.pink.buttons .button:focus, .play-button.inverted.pink.button:focus, .ui.inverted.pink.buttons .play-button:focus, .ui.inverted.pink.play-button:focus, .download-button.inverted.pink.buttons .button:focus, .download-button.inverted.pink.button:focus, .ui.inverted.pink.buttons .download-button:focus, .ui.inverted.pink.download-button:focus { background-color: #ff65d3; } .ui.inverted.pink.buttons .active.button, .ui.inverted.pink.active.button, .play-button.inverted.pink.buttons .active.button, .play-button.inverted.pink.active.button, .ui.inverted.pink.buttons .active.play-button, .ui.inverted.pink.active.play-button, .download-button.inverted.pink.buttons .active.button, .download-button.inverted.pink.active.button, .ui.inverted.pink.buttons .active.download-button, .ui.inverted.pink.active.download-button { background-color: #ff74d8; } .ui.inverted.pink.buttons .button:active, .ui.inverted.pink.button:active, .play-button.inverted.pink.buttons .button:active, .play-button.inverted.pink.button:active, .ui.inverted.pink.buttons .play-button:active, .ui.inverted.pink.play-button:active, .download-button.inverted.pink.buttons .button:active, .download-button.inverted.pink.button:active, .ui.inverted.pink.buttons .download-button:active, .ui.inverted.pink.download-button:active { background-color: #ff5bd1; } /* Inverted Basic */ .ui.inverted.pink.basic.buttons .button, .ui.inverted.pink.buttons .basic.button, .ui.inverted.pink.basic.button, .play-button.inverted.pink.basic.buttons .button, .play-button.inverted.pink.buttons .basic.button, .play-button.inverted.pink.basic.button, .ui.inverted.pink.basic.buttons .play-button, .ui.inverted.pink.buttons .basic.play-button, .ui.inverted.pink.basic.play-button, .download-button.inverted.pink.basic.buttons .button, .download-button.inverted.pink.buttons .basic.button, .download-button.inverted.pink.basic.button, .ui.inverted.pink.basic.buttons .download-button, .ui.inverted.pink.buttons .basic.download-button, .ui.inverted.pink.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.pink.basic.buttons .button:hover, .ui.inverted.pink.buttons .basic.button:hover, .ui.inverted.pink.basic.button:hover, .play-button.inverted.pink.basic.buttons .button:hover, .play-button.inverted.pink.buttons .basic.button:hover, .play-button.inverted.pink.basic.button:hover, .ui.inverted.pink.basic.buttons .play-button:hover, .ui.inverted.pink.buttons .basic.play-button:hover, .ui.inverted.pink.basic.play-button:hover, .download-button.inverted.pink.basic.buttons .button:hover, .download-button.inverted.pink.buttons .basic.button:hover, .download-button.inverted.pink.basic.button:hover, .ui.inverted.pink.basic.buttons .download-button:hover, .ui.inverted.pink.buttons .basic.download-button:hover, .ui.inverted.pink.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; color: #FF8EDF !important; } .ui.inverted.pink.basic.buttons .button:focus, .ui.inverted.pink.basic.buttons .button:focus, .ui.inverted.pink.basic.button:focus, .play-button.inverted.pink.basic.buttons .button:focus, .play-button.inverted.pink.basic.buttons .button:focus, .play-button.inverted.pink.basic.button:focus, .ui.inverted.pink.basic.buttons .play-button:focus, .ui.inverted.pink.basic.buttons .play-button:focus, .ui.inverted.pink.basic.play-button:focus, .download-button.inverted.pink.basic.buttons .button:focus, .download-button.inverted.pink.basic.buttons .button:focus, .download-button.inverted.pink.basic.button:focus, .ui.inverted.pink.basic.buttons .download-button:focus, .ui.inverted.pink.basic.buttons .download-button:focus, .ui.inverted.pink.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #ff65d3 inset !important; color: #FF8EDF !important; } .ui.inverted.pink.basic.buttons .active.button, .ui.inverted.pink.buttons .basic.active.button, .ui.inverted.pink.basic.active.button, .play-button.inverted.pink.basic.buttons .active.button, .play-button.inverted.pink.buttons .basic.active.button, .play-button.inverted.pink.basic.active.button, .ui.inverted.pink.basic.buttons .active.play-button, .ui.inverted.pink.buttons .basic.active.play-button, .ui.inverted.pink.basic.active.play-button, .download-button.inverted.pink.basic.buttons .active.button, .download-button.inverted.pink.buttons .basic.active.button, .download-button.inverted.pink.basic.active.button, .ui.inverted.pink.basic.buttons .active.download-button, .ui.inverted.pink.buttons .basic.active.download-button, .ui.inverted.pink.basic.active.download-button { box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; color: #FF8EDF !important; } .ui.inverted.pink.basic.buttons .button:active, .ui.inverted.pink.buttons .basic.button:active, .ui.inverted.pink.basic.button:active, .play-button.inverted.pink.basic.buttons .button:active, .play-button.inverted.pink.buttons .basic.button:active, .play-button.inverted.pink.basic.button:active, .ui.inverted.pink.basic.buttons .play-button:active, .ui.inverted.pink.buttons .basic.play-button:active, .ui.inverted.pink.basic.play-button:active, .download-button.inverted.pink.basic.buttons .button:active, .download-button.inverted.pink.buttons .basic.button:active, .download-button.inverted.pink.basic.button:active, .ui.inverted.pink.basic.buttons .download-button:active, .ui.inverted.pink.buttons .basic.download-button:active, .ui.inverted.pink.basic.download-button:active { box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important; color: #FF8EDF !important; } /*--- Violet ---*/ .ui.violet.buttons .button, .ui.violet.button, .play-button.violet.buttons .button, .play-button.violet.button, .ui.violet.buttons .play-button, .ui.violet.play-button, .download-button.violet.buttons .button, .download-button.violet.button, .ui.violet.buttons .download-button, .ui.violet.download-button { background-color: #C90072; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.violet.button, .play-button.violet.button, .ui.violet.play-button, .download-button.violet.button, .ui.violet.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.violet.buttons .button:hover, .ui.violet.button:hover, .play-button.violet.buttons .button:hover, .play-button.violet.button:hover, .ui.violet.buttons .play-button:hover, .ui.violet.play-button:hover, .download-button.violet.buttons .button:hover, .download-button.violet.button:hover, .ui.violet.buttons .download-button:hover, .ui.violet.download-button:hover { background-color: #b00064; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .button:focus, .ui.violet.button:focus, .play-button.violet.buttons .button:focus, .play-button.violet.button:focus, .ui.violet.buttons .play-button:focus, .ui.violet.play-button:focus, .download-button.violet.buttons .button:focus, .download-button.violet.button:focus, .ui.violet.buttons .download-button:focus, .ui.violet.download-button:focus { background-color: #a0005b; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .button:active, .ui.violet.button:active, .play-button.violet.buttons .button:active, .play-button.violet.button:active, .ui.violet.buttons .play-button:active, .ui.violet.play-button:active, .download-button.violet.buttons .button:active, .download-button.violet.button:active, .ui.violet.buttons .download-button:active, .ui.violet.download-button:active { background-color: #960055; color: #FFFFFF; text-shadow: none; } .ui.violet.buttons .active.button, .ui.violet.buttons .active.button:active, .ui.violet.active.button, .ui.violet.button .active.button:active, .play-button.violet.buttons .active.button, .play-button.violet.buttons .active.button:active, .play-button.violet.active.button, .play-button.violet.button .active.button:active, .ui.violet.buttons .active.play-button, .ui.violet.buttons .active.play-button:active, .ui.violet.active.play-button, .ui.violet.play-button .active.play-button:active, .download-button.violet.buttons .active.button, .download-button.violet.buttons .active.button:active, .download-button.violet.active.button, .download-button.violet.button .active.button:active, .ui.violet.buttons .active.download-button, .ui.violet.buttons .active.download-button:active, .ui.violet.active.download-button, .ui.violet.download-button .active.download-button:active { background-color: #b00064; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.violet.buttons .button, .ui.basic.violet.button, .play-button.basic.violet.buttons .button, .play-button.basic.violet.button, .ui.basic.violet.buttons .play-button, .ui.basic.violet.play-button, .download-button.basic.violet.buttons .button, .download-button.basic.violet.button, .ui.basic.violet.buttons .download-button, .ui.basic.violet.download-button { box-shadow: 0px 0px 0px 1px #C90072 inset !important; color: #C90072 !important; } .ui.basic.violet.buttons .button:hover, .ui.basic.violet.button:hover, .play-button.basic.violet.buttons .button:hover, .play-button.basic.violet.button:hover, .ui.basic.violet.buttons .play-button:hover, .ui.basic.violet.play-button:hover, .download-button.basic.violet.buttons .button:hover, .download-button.basic.violet.button:hover, .ui.basic.violet.buttons .download-button:hover, .ui.basic.violet.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #b00064 inset !important; color: #b00064 !important; } .ui.basic.violet.buttons .button:focus, .ui.basic.violet.button:focus, .play-button.basic.violet.buttons .button:focus, .play-button.basic.violet.button:focus, .ui.basic.violet.buttons .play-button:focus, .ui.basic.violet.play-button:focus, .download-button.basic.violet.buttons .button:focus, .download-button.basic.violet.button:focus, .ui.basic.violet.buttons .download-button:focus, .ui.basic.violet.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #a0005b inset !important; color: #b00064 !important; } .ui.basic.violet.buttons .active.button, .ui.basic.violet.active.button, .play-button.basic.violet.buttons .active.button, .play-button.basic.violet.active.button, .ui.basic.violet.buttons .active.play-button, .ui.basic.violet.active.play-button, .download-button.basic.violet.buttons .active.button, .download-button.basic.violet.active.button, .ui.basic.violet.buttons .active.download-button, .ui.basic.violet.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #b00064 inset !important; color: #960055 !important; } .ui.basic.violet.buttons .button:active, .ui.basic.violet.button:active, .play-button.basic.violet.buttons .button:active, .play-button.basic.violet.button:active, .ui.basic.violet.buttons .play-button:active, .ui.basic.violet.play-button:active, .download-button.basic.violet.buttons .button:active, .download-button.basic.violet.button:active, .ui.basic.violet.buttons .download-button:active, .ui.basic.violet.download-button:active { box-shadow: 0px 0px 0px 1px #960055 inset !important; color: #960055 !important; } .ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.violet.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.violet.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.violet.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.violet.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.violet.buttons .button, .ui.inverted.violet.button, .play-button.inverted.violet.buttons .button, .play-button.inverted.violet.button, .ui.inverted.violet.buttons .play-button, .ui.inverted.violet.play-button, .download-button.inverted.violet.buttons .button, .download-button.inverted.violet.button, .ui.inverted.violet.buttons .download-button, .ui.inverted.violet.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #A291FB inset !important; color: #A291FB; } .ui.inverted.violet.buttons .button:hover, .ui.inverted.violet.button:hover, .ui.inverted.violet.buttons .button:focus, .ui.inverted.violet.button:focus, .ui.inverted.violet.buttons .button.active, .ui.inverted.violet.button.active, .ui.inverted.violet.buttons .button:active, .ui.inverted.violet.button:active, .play-button.inverted.violet.buttons .button:hover, .play-button.inverted.violet.button:hover, .play-button.inverted.violet.buttons .button:focus, .play-button.inverted.violet.button:focus, .play-button.inverted.violet.buttons .button.active, .play-button.inverted.violet.button.active, .play-button.inverted.violet.buttons .button:active, .play-button.inverted.violet.button:active, .ui.inverted.violet.buttons .play-button:hover, .ui.inverted.violet.play-button:hover, .ui.inverted.violet.buttons .play-button:focus, .ui.inverted.violet.play-button:focus, .ui.inverted.violet.buttons .play-button.active, .ui.inverted.violet.play-button.active, .ui.inverted.violet.buttons .play-button:active, .ui.inverted.violet.play-button:active, .download-button.inverted.violet.buttons .button:hover, .download-button.inverted.violet.button:hover, .download-button.inverted.violet.buttons .button:focus, .download-button.inverted.violet.button:focus, .download-button.inverted.violet.buttons .button.active, .download-button.inverted.violet.button.active, .download-button.inverted.violet.buttons .button:active, .download-button.inverted.violet.button:active, .ui.inverted.violet.buttons .download-button:hover, .ui.inverted.violet.download-button:hover, .ui.inverted.violet.buttons .download-button:focus, .ui.inverted.violet.download-button:focus, .ui.inverted.violet.buttons .download-button.active, .ui.inverted.violet.download-button.active, .ui.inverted.violet.buttons .download-button:active, .ui.inverted.violet.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.violet.buttons .button:hover, .ui.inverted.violet.button:hover, .play-button.inverted.violet.buttons .button:hover, .play-button.inverted.violet.button:hover, .ui.inverted.violet.buttons .play-button:hover, .ui.inverted.violet.play-button:hover, .download-button.inverted.violet.buttons .button:hover, .download-button.inverted.violet.button:hover, .ui.inverted.violet.buttons .download-button:hover, .ui.inverted.violet.download-button:hover { background-color: #8a73ff; } .ui.inverted.violet.buttons .button:focus, .ui.inverted.violet.button:focus, .play-button.inverted.violet.buttons .button:focus, .play-button.inverted.violet.button:focus, .ui.inverted.violet.buttons .play-button:focus, .ui.inverted.violet.play-button:focus, .download-button.inverted.violet.buttons .button:focus, .download-button.inverted.violet.button:focus, .ui.inverted.violet.buttons .download-button:focus, .ui.inverted.violet.download-button:focus { background-color: #7d64ff; } .ui.inverted.violet.buttons .active.button, .ui.inverted.violet.active.button, .play-button.inverted.violet.buttons .active.button, .play-button.inverted.violet.active.button, .ui.inverted.violet.buttons .active.play-button, .ui.inverted.violet.active.play-button, .download-button.inverted.violet.buttons .active.button, .download-button.inverted.violet.active.button, .ui.inverted.violet.buttons .active.download-button, .ui.inverted.violet.active.download-button { background-color: #8a73ff; } .ui.inverted.violet.buttons .button:active, .ui.inverted.violet.button:active, .play-button.inverted.violet.buttons .button:active, .play-button.inverted.violet.button:active, .ui.inverted.violet.buttons .play-button:active, .ui.inverted.violet.play-button:active, .download-button.inverted.violet.buttons .button:active, .download-button.inverted.violet.button:active, .ui.inverted.violet.buttons .download-button:active, .ui.inverted.violet.download-button:active { background-color: #7860f9; } /* Inverted Basic */ .ui.inverted.violet.basic.buttons .button, .ui.inverted.violet.buttons .basic.button, .ui.inverted.violet.basic.button, .play-button.inverted.violet.basic.buttons .button, .play-button.inverted.violet.buttons .basic.button, .play-button.inverted.violet.basic.button, .ui.inverted.violet.basic.buttons .play-button, .ui.inverted.violet.buttons .basic.play-button, .ui.inverted.violet.basic.play-button, .download-button.inverted.violet.basic.buttons .button, .download-button.inverted.violet.buttons .basic.button, .download-button.inverted.violet.basic.button, .ui.inverted.violet.basic.buttons .download-button, .ui.inverted.violet.buttons .basic.download-button, .ui.inverted.violet.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.violet.basic.buttons .button:hover, .ui.inverted.violet.buttons .basic.button:hover, .ui.inverted.violet.basic.button:hover, .play-button.inverted.violet.basic.buttons .button:hover, .play-button.inverted.violet.buttons .basic.button:hover, .play-button.inverted.violet.basic.button:hover, .ui.inverted.violet.basic.buttons .play-button:hover, .ui.inverted.violet.buttons .basic.play-button:hover, .ui.inverted.violet.basic.play-button:hover, .download-button.inverted.violet.basic.buttons .button:hover, .download-button.inverted.violet.buttons .basic.button:hover, .download-button.inverted.violet.basic.button:hover, .ui.inverted.violet.basic.buttons .download-button:hover, .ui.inverted.violet.buttons .basic.download-button:hover, .ui.inverted.violet.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #8a73ff inset !important; color: #A291FB !important; } .ui.inverted.violet.basic.buttons .button:focus, .ui.inverted.violet.basic.buttons .button:focus, .ui.inverted.violet.basic.button:focus, .play-button.inverted.violet.basic.buttons .button:focus, .play-button.inverted.violet.basic.buttons .button:focus, .play-button.inverted.violet.basic.button:focus, .ui.inverted.violet.basic.buttons .play-button:focus, .ui.inverted.violet.basic.buttons .play-button:focus, .ui.inverted.violet.basic.play-button:focus, .download-button.inverted.violet.basic.buttons .button:focus, .download-button.inverted.violet.basic.buttons .button:focus, .download-button.inverted.violet.basic.button:focus, .ui.inverted.violet.basic.buttons .download-button:focus, .ui.inverted.violet.basic.buttons .download-button:focus, .ui.inverted.violet.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #7d64ff inset !important; color: #A291FB !important; } .ui.inverted.violet.basic.buttons .active.button, .ui.inverted.violet.buttons .basic.active.button, .ui.inverted.violet.basic.active.button, .play-button.inverted.violet.basic.buttons .active.button, .play-button.inverted.violet.buttons .basic.active.button, .play-button.inverted.violet.basic.active.button, .ui.inverted.violet.basic.buttons .active.play-button, .ui.inverted.violet.buttons .basic.active.play-button, .ui.inverted.violet.basic.active.play-button, .download-button.inverted.violet.basic.buttons .active.button, .download-button.inverted.violet.buttons .basic.active.button, .download-button.inverted.violet.basic.active.button, .ui.inverted.violet.basic.buttons .active.download-button, .ui.inverted.violet.buttons .basic.active.download-button, .ui.inverted.violet.basic.active.download-button { box-shadow: 0px 0px 0px 2px #8a73ff inset !important; color: #A291FB !important; } .ui.inverted.violet.basic.buttons .button:active, .ui.inverted.violet.buttons .basic.button:active, .ui.inverted.violet.basic.button:active, .play-button.inverted.violet.basic.buttons .button:active, .play-button.inverted.violet.buttons .basic.button:active, .play-button.inverted.violet.basic.button:active, .ui.inverted.violet.basic.buttons .play-button:active, .ui.inverted.violet.buttons .basic.play-button:active, .ui.inverted.violet.basic.play-button:active, .download-button.inverted.violet.basic.buttons .button:active, .download-button.inverted.violet.buttons .basic.button:active, .download-button.inverted.violet.basic.button:active, .ui.inverted.violet.basic.buttons .download-button:active, .ui.inverted.violet.buttons .basic.download-button:active, .ui.inverted.violet.basic.download-button:active { box-shadow: 0px 0px 0px 2px #7860f9 inset !important; color: #A291FB !important; } /*--- Purple ---*/ .ui.purple.buttons .button, .ui.purple.button, .play-button.purple.buttons .button, .play-button.purple.button, .ui.purple.buttons .play-button, .ui.purple.play-button, .download-button.purple.buttons .button, .download-button.purple.button, .ui.purple.buttons .download-button, .ui.purple.download-button { background-color: #8169E6; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.purple.button, .play-button.purple.button, .ui.purple.play-button, .download-button.purple.button, .ui.purple.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.purple.buttons .button:hover, .ui.purple.button:hover, .play-button.purple.buttons .button:hover, .play-button.purple.button:hover, .ui.purple.buttons .play-button:hover, .ui.purple.play-button:hover, .download-button.purple.buttons .button:hover, .download-button.purple.button:hover, .ui.purple.buttons .download-button:hover, .ui.purple.download-button:hover { background-color: #6a4cea; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .button:focus, .ui.purple.button:focus, .play-button.purple.buttons .button:focus, .play-button.purple.button:focus, .ui.purple.buttons .play-button:focus, .ui.purple.play-button:focus, .download-button.purple.buttons .button:focus, .download-button.purple.button:focus, .ui.purple.buttons .download-button:focus, .ui.purple.download-button:focus { background-color: #5a37f0; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .button:active, .ui.purple.button:active, .play-button.purple.buttons .button:active, .play-button.purple.button:active, .ui.purple.buttons .play-button:active, .ui.purple.play-button:active, .download-button.purple.buttons .button:active, .download-button.purple.button:active, .ui.purple.buttons .download-button:active, .ui.purple.download-button:active { background-color: #5c3ddf; color: #FFFFFF; text-shadow: none; } .ui.purple.buttons .active.button, .ui.purple.buttons .active.button:active, .ui.purple.active.button, .ui.purple.button .active.button:active, .play-button.purple.buttons .active.button, .play-button.purple.buttons .active.button:active, .play-button.purple.active.button, .play-button.purple.button .active.button:active, .ui.purple.buttons .active.play-button, .ui.purple.buttons .active.play-button:active, .ui.purple.active.play-button, .ui.purple.play-button .active.play-button:active, .download-button.purple.buttons .active.button, .download-button.purple.buttons .active.button:active, .download-button.purple.active.button, .download-button.purple.button .active.button:active, .ui.purple.buttons .active.download-button, .ui.purple.buttons .active.download-button:active, .ui.purple.active.download-button, .ui.purple.download-button .active.download-button:active { background-color: #6848ed; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.purple.buttons .button, .ui.basic.purple.button, .play-button.basic.purple.buttons .button, .play-button.basic.purple.button, .ui.basic.purple.buttons .play-button, .ui.basic.purple.play-button, .download-button.basic.purple.buttons .button, .download-button.basic.purple.button, .ui.basic.purple.buttons .download-button, .ui.basic.purple.download-button { box-shadow: 0px 0px 0px 1px #8169E6 inset !important; color: #8169E6 !important; } .ui.basic.purple.buttons .button:hover, .ui.basic.purple.button:hover, .play-button.basic.purple.buttons .button:hover, .play-button.basic.purple.button:hover, .ui.basic.purple.buttons .play-button:hover, .ui.basic.purple.play-button:hover, .download-button.basic.purple.buttons .button:hover, .download-button.basic.purple.button:hover, .ui.basic.purple.buttons .download-button:hover, .ui.basic.purple.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #6a4cea inset !important; color: #6a4cea !important; } .ui.basic.purple.buttons .button:focus, .ui.basic.purple.button:focus, .play-button.basic.purple.buttons .button:focus, .play-button.basic.purple.button:focus, .ui.basic.purple.buttons .play-button:focus, .ui.basic.purple.play-button:focus, .download-button.basic.purple.buttons .button:focus, .download-button.basic.purple.button:focus, .ui.basic.purple.buttons .download-button:focus, .ui.basic.purple.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #5a37f0 inset !important; color: #6a4cea !important; } .ui.basic.purple.buttons .active.button, .ui.basic.purple.active.button, .play-button.basic.purple.buttons .active.button, .play-button.basic.purple.active.button, .ui.basic.purple.buttons .active.play-button, .ui.basic.purple.active.play-button, .download-button.basic.purple.buttons .active.button, .download-button.basic.purple.active.button, .ui.basic.purple.buttons .active.download-button, .ui.basic.purple.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #6848ed inset !important; color: #5c3ddf !important; } .ui.basic.purple.buttons .button:active, .ui.basic.purple.button:active, .play-button.basic.purple.buttons .button:active, .play-button.basic.purple.button:active, .ui.basic.purple.buttons .play-button:active, .ui.basic.purple.play-button:active, .download-button.basic.purple.buttons .button:active, .download-button.basic.purple.button:active, .ui.basic.purple.buttons .download-button:active, .ui.basic.purple.download-button:active { box-shadow: 0px 0px 0px 1px #5c3ddf inset !important; color: #5c3ddf !important; } .ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.purple.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.purple.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.purple.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.purple.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.purple.buttons .button, .ui.inverted.purple.button, .play-button.inverted.purple.buttons .button, .play-button.inverted.purple.button, .ui.inverted.purple.buttons .play-button, .ui.inverted.purple.play-button, .download-button.inverted.purple.buttons .button, .download-button.inverted.purple.button, .ui.inverted.purple.buttons .download-button, .ui.inverted.purple.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #DC73FF inset !important; color: #DC73FF; } .ui.inverted.purple.buttons .button:hover, .ui.inverted.purple.button:hover, .ui.inverted.purple.buttons .button:focus, .ui.inverted.purple.button:focus, .ui.inverted.purple.buttons .button.active, .ui.inverted.purple.button.active, .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.button:active, .play-button.inverted.purple.buttons .button:hover, .play-button.inverted.purple.button:hover, .play-button.inverted.purple.buttons .button:focus, .play-button.inverted.purple.button:focus, .play-button.inverted.purple.buttons .button.active, .play-button.inverted.purple.button.active, .play-button.inverted.purple.buttons .button:active, .play-button.inverted.purple.button:active, .ui.inverted.purple.buttons .play-button:hover, .ui.inverted.purple.play-button:hover, .ui.inverted.purple.buttons .play-button:focus, .ui.inverted.purple.play-button:focus, .ui.inverted.purple.buttons .play-button.active, .ui.inverted.purple.play-button.active, .ui.inverted.purple.buttons .play-button:active, .ui.inverted.purple.play-button:active, .download-button.inverted.purple.buttons .button:hover, .download-button.inverted.purple.button:hover, .download-button.inverted.purple.buttons .button:focus, .download-button.inverted.purple.button:focus, .download-button.inverted.purple.buttons .button.active, .download-button.inverted.purple.button.active, .download-button.inverted.purple.buttons .button:active, .download-button.inverted.purple.button:active, .ui.inverted.purple.buttons .download-button:hover, .ui.inverted.purple.download-button:hover, .ui.inverted.purple.buttons .download-button:focus, .ui.inverted.purple.download-button:focus, .ui.inverted.purple.buttons .download-button.active, .ui.inverted.purple.download-button.active, .ui.inverted.purple.buttons .download-button:active, .ui.inverted.purple.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.purple.buttons .button:hover, .ui.inverted.purple.button:hover, .play-button.inverted.purple.buttons .button:hover, .play-button.inverted.purple.button:hover, .ui.inverted.purple.buttons .play-button:hover, .ui.inverted.purple.play-button:hover, .download-button.inverted.purple.buttons .button:hover, .download-button.inverted.purple.button:hover, .ui.inverted.purple.buttons .download-button:hover, .ui.inverted.purple.download-button:hover { background-color: #d65aff; } .ui.inverted.purple.buttons .button:focus, .ui.inverted.purple.button:focus, .play-button.inverted.purple.buttons .button:focus, .play-button.inverted.purple.button:focus, .ui.inverted.purple.buttons .play-button:focus, .ui.inverted.purple.play-button:focus, .download-button.inverted.purple.buttons .button:focus, .download-button.inverted.purple.button:focus, .ui.inverted.purple.buttons .download-button:focus, .ui.inverted.purple.download-button:focus { background-color: #d24aff; } .ui.inverted.purple.buttons .active.button, .ui.inverted.purple.active.button, .play-button.inverted.purple.buttons .active.button, .play-button.inverted.purple.active.button, .ui.inverted.purple.buttons .active.play-button, .ui.inverted.purple.active.play-button, .download-button.inverted.purple.buttons .active.button, .download-button.inverted.purple.active.button, .ui.inverted.purple.buttons .active.download-button, .ui.inverted.purple.active.download-button { background-color: #d65aff; } .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.button:active, .play-button.inverted.purple.buttons .button:active, .play-button.inverted.purple.button:active, .ui.inverted.purple.buttons .play-button:active, .ui.inverted.purple.play-button:active, .download-button.inverted.purple.buttons .button:active, .download-button.inverted.purple.button:active, .ui.inverted.purple.buttons .download-button:active, .ui.inverted.purple.download-button:active { background-color: #cf40ff; } /* Inverted Basic */ .ui.inverted.purple.basic.buttons .button, .ui.inverted.purple.buttons .basic.button, .ui.inverted.purple.basic.button, .play-button.inverted.purple.basic.buttons .button, .play-button.inverted.purple.buttons .basic.button, .play-button.inverted.purple.basic.button, .ui.inverted.purple.basic.buttons .play-button, .ui.inverted.purple.buttons .basic.play-button, .ui.inverted.purple.basic.play-button, .download-button.inverted.purple.basic.buttons .button, .download-button.inverted.purple.buttons .basic.button, .download-button.inverted.purple.basic.button, .ui.inverted.purple.basic.buttons .download-button, .ui.inverted.purple.buttons .basic.download-button, .ui.inverted.purple.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.purple.basic.buttons .button:hover, .ui.inverted.purple.buttons .basic.button:hover, .ui.inverted.purple.basic.button:hover, .play-button.inverted.purple.basic.buttons .button:hover, .play-button.inverted.purple.buttons .basic.button:hover, .play-button.inverted.purple.basic.button:hover, .ui.inverted.purple.basic.buttons .play-button:hover, .ui.inverted.purple.buttons .basic.play-button:hover, .ui.inverted.purple.basic.play-button:hover, .download-button.inverted.purple.basic.buttons .button:hover, .download-button.inverted.purple.buttons .basic.button:hover, .download-button.inverted.purple.basic.button:hover, .ui.inverted.purple.basic.buttons .download-button:hover, .ui.inverted.purple.buttons .basic.download-button:hover, .ui.inverted.purple.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #d65aff inset !important; color: #DC73FF !important; } .ui.inverted.purple.basic.buttons .button:focus, .ui.inverted.purple.basic.buttons .button:focus, .ui.inverted.purple.basic.button:focus, .play-button.inverted.purple.basic.buttons .button:focus, .play-button.inverted.purple.basic.buttons .button:focus, .play-button.inverted.purple.basic.button:focus, .ui.inverted.purple.basic.buttons .play-button:focus, .ui.inverted.purple.basic.buttons .play-button:focus, .ui.inverted.purple.basic.play-button:focus, .download-button.inverted.purple.basic.buttons .button:focus, .download-button.inverted.purple.basic.buttons .button:focus, .download-button.inverted.purple.basic.button:focus, .ui.inverted.purple.basic.buttons .download-button:focus, .ui.inverted.purple.basic.buttons .download-button:focus, .ui.inverted.purple.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #d24aff inset !important; color: #DC73FF !important; } .ui.inverted.purple.basic.buttons .active.button, .ui.inverted.purple.buttons .basic.active.button, .ui.inverted.purple.basic.active.button, .play-button.inverted.purple.basic.buttons .active.button, .play-button.inverted.purple.buttons .basic.active.button, .play-button.inverted.purple.basic.active.button, .ui.inverted.purple.basic.buttons .active.play-button, .ui.inverted.purple.buttons .basic.active.play-button, .ui.inverted.purple.basic.active.play-button, .download-button.inverted.purple.basic.buttons .active.button, .download-button.inverted.purple.buttons .basic.active.button, .download-button.inverted.purple.basic.active.button, .ui.inverted.purple.basic.buttons .active.download-button, .ui.inverted.purple.buttons .basic.active.download-button, .ui.inverted.purple.basic.active.download-button { box-shadow: 0px 0px 0px 2px #d65aff inset !important; color: #DC73FF !important; } .ui.inverted.purple.basic.buttons .button:active, .ui.inverted.purple.buttons .basic.button:active, .ui.inverted.purple.basic.button:active, .play-button.inverted.purple.basic.buttons .button:active, .play-button.inverted.purple.buttons .basic.button:active, .play-button.inverted.purple.basic.button:active, .ui.inverted.purple.basic.buttons .play-button:active, .ui.inverted.purple.buttons .basic.play-button:active, .ui.inverted.purple.basic.play-button:active, .download-button.inverted.purple.basic.buttons .button:active, .download-button.inverted.purple.buttons .basic.button:active, .download-button.inverted.purple.basic.button:active, .ui.inverted.purple.basic.buttons .download-button:active, .ui.inverted.purple.buttons .basic.download-button:active, .ui.inverted.purple.basic.download-button:active { box-shadow: 0px 0px 0px 2px #cf40ff inset !important; color: #DC73FF !important; } /*--- Red ---*/ .ui.red.buttons .button, .ui.red.button, .play-button.red.buttons .button, .play-button.red.button, .ui.red.buttons .play-button, .ui.red.play-button, .download-button.red.buttons .button, .download-button.red.button, .ui.red.buttons .download-button, .ui.red.download-button { background-color: #E81123; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.red.button, .play-button.red.button, .ui.red.play-button, .download-button.red.button, .ui.red.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.red.buttons .button:hover, .ui.red.button:hover, .play-button.red.buttons .button:hover, .play-button.red.button:hover, .ui.red.buttons .play-button:hover, .ui.red.play-button:hover, .download-button.red.buttons .button:hover, .download-button.red.button:hover, .ui.red.buttons .download-button:hover, .ui.red.download-button:hover { background-color: #da0617; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .button:focus, .ui.red.button:focus, .play-button.red.buttons .button:focus, .play-button.red.button:focus, .ui.red.buttons .play-button:focus, .ui.red.play-button:focus, .download-button.red.buttons .button:focus, .download-button.red.button:focus, .ui.red.buttons .download-button:focus, .ui.red.download-button:focus { background-color: #d00011; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .button:active, .ui.red.button:active, .play-button.red.buttons .button:active, .play-button.red.button:active, .ui.red.buttons .play-button:active, .ui.red.play-button:active, .download-button.red.buttons .button:active, .download-button.red.button:active, .ui.red.buttons .download-button:active, .ui.red.download-button:active { background-color: #b80e1c; color: #FFFFFF; text-shadow: none; } .ui.red.buttons .active.button, .ui.red.buttons .active.button:active, .ui.red.active.button, .ui.red.button .active.button:active, .play-button.red.buttons .active.button, .play-button.red.buttons .active.button:active, .play-button.red.active.button, .play-button.red.button .active.button:active, .ui.red.buttons .active.play-button, .ui.red.buttons .active.play-button:active, .ui.red.active.play-button, .ui.red.play-button .active.play-button:active, .download-button.red.buttons .active.button, .download-button.red.buttons .active.button:active, .download-button.red.active.button, .download-button.red.button .active.button:active, .ui.red.buttons .active.download-button, .ui.red.buttons .active.download-button:active, .ui.red.active.download-button, .ui.red.download-button .active.download-button:active { background-color: #df0113; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.red.buttons .button, .ui.basic.red.button, .play-button.basic.red.buttons .button, .play-button.basic.red.button, .ui.basic.red.buttons .play-button, .ui.basic.red.play-button, .download-button.basic.red.buttons .button, .download-button.basic.red.button, .ui.basic.red.buttons .download-button, .ui.basic.red.download-button { box-shadow: 0px 0px 0px 1px #E81123 inset !important; color: #E81123 !important; } .ui.basic.red.buttons .button:hover, .ui.basic.red.button:hover, .play-button.basic.red.buttons .button:hover, .play-button.basic.red.button:hover, .ui.basic.red.buttons .play-button:hover, .ui.basic.red.play-button:hover, .download-button.basic.red.buttons .button:hover, .download-button.basic.red.button:hover, .ui.basic.red.buttons .download-button:hover, .ui.basic.red.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #da0617 inset !important; color: #da0617 !important; } .ui.basic.red.buttons .button:focus, .ui.basic.red.button:focus, .play-button.basic.red.buttons .button:focus, .play-button.basic.red.button:focus, .ui.basic.red.buttons .play-button:focus, .ui.basic.red.play-button:focus, .download-button.basic.red.buttons .button:focus, .download-button.basic.red.button:focus, .ui.basic.red.buttons .download-button:focus, .ui.basic.red.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #d00011 inset !important; color: #da0617 !important; } .ui.basic.red.buttons .active.button, .ui.basic.red.active.button, .play-button.basic.red.buttons .active.button, .play-button.basic.red.active.button, .ui.basic.red.buttons .active.play-button, .ui.basic.red.active.play-button, .download-button.basic.red.buttons .active.button, .download-button.basic.red.active.button, .ui.basic.red.buttons .active.download-button, .ui.basic.red.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #df0113 inset !important; color: #b80e1c !important; } .ui.basic.red.buttons .button:active, .ui.basic.red.button:active, .play-button.basic.red.buttons .button:active, .play-button.basic.red.button:active, .ui.basic.red.buttons .play-button:active, .ui.basic.red.play-button:active, .download-button.basic.red.buttons .button:active, .download-button.basic.red.button:active, .ui.basic.red.buttons .download-button:active, .ui.basic.red.download-button:active { box-shadow: 0px 0px 0px 1px #b80e1c inset !important; color: #b80e1c !important; } .ui.buttons:not(.vertical) > .basic.red.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.red.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.red.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.red.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.red.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.red.buttons .button, .ui.inverted.red.button, .play-button.inverted.red.buttons .button, .play-button.inverted.red.button, .ui.inverted.red.buttons .play-button, .ui.inverted.red.play-button, .download-button.inverted.red.buttons .button, .download-button.inverted.red.button, .ui.inverted.red.buttons .download-button, .ui.inverted.red.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FF695E inset !important; color: #FF695E; } .ui.inverted.red.buttons .button:hover, .ui.inverted.red.button:hover, .ui.inverted.red.buttons .button:focus, .ui.inverted.red.button:focus, .ui.inverted.red.buttons .button.active, .ui.inverted.red.button.active, .ui.inverted.red.buttons .button:active, .ui.inverted.red.button:active, .play-button.inverted.red.buttons .button:hover, .play-button.inverted.red.button:hover, .play-button.inverted.red.buttons .button:focus, .play-button.inverted.red.button:focus, .play-button.inverted.red.buttons .button.active, .play-button.inverted.red.button.active, .play-button.inverted.red.buttons .button:active, .play-button.inverted.red.button:active, .ui.inverted.red.buttons .play-button:hover, .ui.inverted.red.play-button:hover, .ui.inverted.red.buttons .play-button:focus, .ui.inverted.red.play-button:focus, .ui.inverted.red.buttons .play-button.active, .ui.inverted.red.play-button.active, .ui.inverted.red.buttons .play-button:active, .ui.inverted.red.play-button:active, .download-button.inverted.red.buttons .button:hover, .download-button.inverted.red.button:hover, .download-button.inverted.red.buttons .button:focus, .download-button.inverted.red.button:focus, .download-button.inverted.red.buttons .button.active, .download-button.inverted.red.button.active, .download-button.inverted.red.buttons .button:active, .download-button.inverted.red.button:active, .ui.inverted.red.buttons .download-button:hover, .ui.inverted.red.download-button:hover, .ui.inverted.red.buttons .download-button:focus, .ui.inverted.red.download-button:focus, .ui.inverted.red.buttons .download-button.active, .ui.inverted.red.download-button.active, .ui.inverted.red.buttons .download-button:active, .ui.inverted.red.download-button:active { box-shadow: none !important; color: #FFFFFF; } .ui.inverted.red.buttons .button:hover, .ui.inverted.red.button:hover, .play-button.inverted.red.buttons .button:hover, .play-button.inverted.red.button:hover, .ui.inverted.red.buttons .play-button:hover, .ui.inverted.red.play-button:hover, .download-button.inverted.red.buttons .button:hover, .download-button.inverted.red.button:hover, .ui.inverted.red.buttons .download-button:hover, .ui.inverted.red.download-button:hover { background-color: #ff5144; } .ui.inverted.red.buttons .button:focus, .ui.inverted.red.button:focus, .play-button.inverted.red.buttons .button:focus, .play-button.inverted.red.button:focus, .ui.inverted.red.buttons .play-button:focus, .ui.inverted.red.play-button:focus, .download-button.inverted.red.buttons .button:focus, .download-button.inverted.red.button:focus, .ui.inverted.red.buttons .download-button:focus, .ui.inverted.red.download-button:focus { background-color: #ff4335; } .ui.inverted.red.buttons .active.button, .ui.inverted.red.active.button, .play-button.inverted.red.buttons .active.button, .play-button.inverted.red.active.button, .ui.inverted.red.buttons .active.play-button, .ui.inverted.red.active.play-button, .download-button.inverted.red.buttons .active.button, .download-button.inverted.red.active.button, .ui.inverted.red.buttons .active.download-button, .ui.inverted.red.active.download-button { background-color: #ff5144; } .ui.inverted.red.buttons .button:active, .ui.inverted.red.button:active, .play-button.inverted.red.buttons .button:active, .play-button.inverted.red.button:active, .ui.inverted.red.buttons .play-button:active, .ui.inverted.red.play-button:active, .download-button.inverted.red.buttons .button:active, .download-button.inverted.red.button:active, .ui.inverted.red.buttons .download-button:active, .ui.inverted.red.download-button:active { background-color: #ff392b; } /* Inverted Basic */ .ui.inverted.red.basic.buttons .button, .ui.inverted.red.buttons .basic.button, .ui.inverted.red.basic.button, .play-button.inverted.red.basic.buttons .button, .play-button.inverted.red.buttons .basic.button, .play-button.inverted.red.basic.button, .ui.inverted.red.basic.buttons .play-button, .ui.inverted.red.buttons .basic.play-button, .ui.inverted.red.basic.play-button, .download-button.inverted.red.basic.buttons .button, .download-button.inverted.red.buttons .basic.button, .download-button.inverted.red.basic.button, .ui.inverted.red.basic.buttons .download-button, .ui.inverted.red.buttons .basic.download-button, .ui.inverted.red.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.red.basic.buttons .button:hover, .ui.inverted.red.buttons .basic.button:hover, .ui.inverted.red.basic.button:hover, .play-button.inverted.red.basic.buttons .button:hover, .play-button.inverted.red.buttons .basic.button:hover, .play-button.inverted.red.basic.button:hover, .ui.inverted.red.basic.buttons .play-button:hover, .ui.inverted.red.buttons .basic.play-button:hover, .ui.inverted.red.basic.play-button:hover, .download-button.inverted.red.basic.buttons .button:hover, .download-button.inverted.red.buttons .basic.button:hover, .download-button.inverted.red.basic.button:hover, .ui.inverted.red.basic.buttons .download-button:hover, .ui.inverted.red.buttons .basic.download-button:hover, .ui.inverted.red.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #ff5144 inset !important; color: #FF695E !important; } .ui.inverted.red.basic.buttons .button:focus, .ui.inverted.red.basic.buttons .button:focus, .ui.inverted.red.basic.button:focus, .play-button.inverted.red.basic.buttons .button:focus, .play-button.inverted.red.basic.buttons .button:focus, .play-button.inverted.red.basic.button:focus, .ui.inverted.red.basic.buttons .play-button:focus, .ui.inverted.red.basic.buttons .play-button:focus, .ui.inverted.red.basic.play-button:focus, .download-button.inverted.red.basic.buttons .button:focus, .download-button.inverted.red.basic.buttons .button:focus, .download-button.inverted.red.basic.button:focus, .ui.inverted.red.basic.buttons .download-button:focus, .ui.inverted.red.basic.buttons .download-button:focus, .ui.inverted.red.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #ff4335 inset !important; color: #FF695E !important; } .ui.inverted.red.basic.buttons .active.button, .ui.inverted.red.buttons .basic.active.button, .ui.inverted.red.basic.active.button, .play-button.inverted.red.basic.buttons .active.button, .play-button.inverted.red.buttons .basic.active.button, .play-button.inverted.red.basic.active.button, .ui.inverted.red.basic.buttons .active.play-button, .ui.inverted.red.buttons .basic.active.play-button, .ui.inverted.red.basic.active.play-button, .download-button.inverted.red.basic.buttons .active.button, .download-button.inverted.red.buttons .basic.active.button, .download-button.inverted.red.basic.active.button, .ui.inverted.red.basic.buttons .active.download-button, .ui.inverted.red.buttons .basic.active.download-button, .ui.inverted.red.basic.active.download-button { box-shadow: 0px 0px 0px 2px #ff5144 inset !important; color: #FF695E !important; } .ui.inverted.red.basic.buttons .button:active, .ui.inverted.red.buttons .basic.button:active, .ui.inverted.red.basic.button:active, .play-button.inverted.red.basic.buttons .button:active, .play-button.inverted.red.buttons .basic.button:active, .play-button.inverted.red.basic.button:active, .ui.inverted.red.basic.buttons .play-button:active, .ui.inverted.red.buttons .basic.play-button:active, .ui.inverted.red.basic.play-button:active, .download-button.inverted.red.basic.buttons .button:active, .download-button.inverted.red.buttons .basic.button:active, .download-button.inverted.red.basic.button:active, .ui.inverted.red.basic.buttons .download-button:active, .ui.inverted.red.buttons .basic.download-button:active, .ui.inverted.red.basic.download-button:active { box-shadow: 0px 0px 0px 2px #ff392b inset !important; color: #FF695E !important; } /*--- Teal ---*/ .ui.teal.buttons .button, .ui.teal.button, .play-button.teal.buttons .button, .play-button.teal.button, .ui.teal.buttons .play-button, .ui.teal.play-button, .download-button.teal.buttons .button, .download-button.teal.button, .ui.teal.buttons .download-button, .ui.teal.download-button { background-color: #008272; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.teal.button, .play-button.teal.button, .ui.teal.play-button, .download-button.teal.button, .ui.teal.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.teal.buttons .button:hover, .ui.teal.button:hover, .play-button.teal.buttons .button:hover, .play-button.teal.button:hover, .ui.teal.buttons .play-button:hover, .ui.teal.play-button:hover, .download-button.teal.buttons .button:hover, .download-button.teal.button:hover, .ui.teal.buttons .download-button:hover, .ui.teal.download-button:hover { background-color: #00695c; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .button:focus, .ui.teal.button:focus, .play-button.teal.buttons .button:focus, .play-button.teal.button:focus, .ui.teal.buttons .play-button:focus, .ui.teal.play-button:focus, .download-button.teal.buttons .button:focus, .download-button.teal.button:focus, .ui.teal.buttons .download-button:focus, .ui.teal.download-button:focus { background-color: #00594e; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .button:active, .ui.teal.button:active, .play-button.teal.buttons .button:active, .play-button.teal.button:active, .ui.teal.buttons .play-button:active, .ui.teal.play-button:active, .download-button.teal.buttons .button:active, .download-button.teal.button:active, .ui.teal.buttons .download-button:active, .ui.teal.download-button:active { background-color: #004f45; color: #FFFFFF; text-shadow: none; } .ui.teal.buttons .active.button, .ui.teal.buttons .active.button:active, .ui.teal.active.button, .ui.teal.button .active.button:active, .play-button.teal.buttons .active.button, .play-button.teal.buttons .active.button:active, .play-button.teal.active.button, .play-button.teal.button .active.button:active, .ui.teal.buttons .active.play-button, .ui.teal.buttons .active.play-button:active, .ui.teal.active.play-button, .ui.teal.play-button .active.play-button:active, .download-button.teal.buttons .active.button, .download-button.teal.buttons .active.button:active, .download-button.teal.active.button, .download-button.teal.button .active.button:active, .ui.teal.buttons .active.download-button, .ui.teal.buttons .active.download-button:active, .ui.teal.active.download-button, .ui.teal.download-button .active.download-button:active { background-color: #00695c; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.teal.buttons .button, .ui.basic.teal.button, .play-button.basic.teal.buttons .button, .play-button.basic.teal.button, .ui.basic.teal.buttons .play-button, .ui.basic.teal.play-button, .download-button.basic.teal.buttons .button, .download-button.basic.teal.button, .ui.basic.teal.buttons .download-button, .ui.basic.teal.download-button { box-shadow: 0px 0px 0px 1px #008272 inset !important; color: #008272 !important; } .ui.basic.teal.buttons .button:hover, .ui.basic.teal.button:hover, .play-button.basic.teal.buttons .button:hover, .play-button.basic.teal.button:hover, .ui.basic.teal.buttons .play-button:hover, .ui.basic.teal.play-button:hover, .download-button.basic.teal.buttons .button:hover, .download-button.basic.teal.button:hover, .ui.basic.teal.buttons .download-button:hover, .ui.basic.teal.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #00695c inset !important; color: #00695c !important; } .ui.basic.teal.buttons .button:focus, .ui.basic.teal.button:focus, .play-button.basic.teal.buttons .button:focus, .play-button.basic.teal.button:focus, .ui.basic.teal.buttons .play-button:focus, .ui.basic.teal.play-button:focus, .download-button.basic.teal.buttons .button:focus, .download-button.basic.teal.button:focus, .ui.basic.teal.buttons .download-button:focus, .ui.basic.teal.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #00594e inset !important; color: #00695c !important; } .ui.basic.teal.buttons .active.button, .ui.basic.teal.active.button, .play-button.basic.teal.buttons .active.button, .play-button.basic.teal.active.button, .ui.basic.teal.buttons .active.play-button, .ui.basic.teal.active.play-button, .download-button.basic.teal.buttons .active.button, .download-button.basic.teal.active.button, .ui.basic.teal.buttons .active.download-button, .ui.basic.teal.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #00695c inset !important; color: #004f45 !important; } .ui.basic.teal.buttons .button:active, .ui.basic.teal.button:active, .play-button.basic.teal.buttons .button:active, .play-button.basic.teal.button:active, .ui.basic.teal.buttons .play-button:active, .ui.basic.teal.play-button:active, .download-button.basic.teal.buttons .button:active, .download-button.basic.teal.button:active, .ui.basic.teal.buttons .download-button:active, .ui.basic.teal.download-button:active { box-shadow: 0px 0px 0px 1px #004f45 inset !important; color: #004f45 !important; } .ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.teal.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.teal.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.teal.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.teal.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.teal.buttons .button, .ui.inverted.teal.button, .play-button.inverted.teal.buttons .button, .play-button.inverted.teal.button, .ui.inverted.teal.buttons .play-button, .ui.inverted.teal.play-button, .download-button.inverted.teal.buttons .button, .download-button.inverted.teal.button, .ui.inverted.teal.buttons .download-button, .ui.inverted.teal.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #6DFFFF inset !important; color: #6DFFFF; } .ui.inverted.teal.buttons .button:hover, .ui.inverted.teal.button:hover, .ui.inverted.teal.buttons .button:focus, .ui.inverted.teal.button:focus, .ui.inverted.teal.buttons .button.active, .ui.inverted.teal.button.active, .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.button:active, .play-button.inverted.teal.buttons .button:hover, .play-button.inverted.teal.button:hover, .play-button.inverted.teal.buttons .button:focus, .play-button.inverted.teal.button:focus, .play-button.inverted.teal.buttons .button.active, .play-button.inverted.teal.button.active, .play-button.inverted.teal.buttons .button:active, .play-button.inverted.teal.button:active, .ui.inverted.teal.buttons .play-button:hover, .ui.inverted.teal.play-button:hover, .ui.inverted.teal.buttons .play-button:focus, .ui.inverted.teal.play-button:focus, .ui.inverted.teal.buttons .play-button.active, .ui.inverted.teal.play-button.active, .ui.inverted.teal.buttons .play-button:active, .ui.inverted.teal.play-button:active, .download-button.inverted.teal.buttons .button:hover, .download-button.inverted.teal.button:hover, .download-button.inverted.teal.buttons .button:focus, .download-button.inverted.teal.button:focus, .download-button.inverted.teal.buttons .button.active, .download-button.inverted.teal.button.active, .download-button.inverted.teal.buttons .button:active, .download-button.inverted.teal.button:active, .ui.inverted.teal.buttons .download-button:hover, .ui.inverted.teal.download-button:hover, .ui.inverted.teal.buttons .download-button:focus, .ui.inverted.teal.download-button:focus, .ui.inverted.teal.buttons .download-button.active, .ui.inverted.teal.download-button.active, .ui.inverted.teal.buttons .download-button:active, .ui.inverted.teal.download-button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.teal.buttons .button:hover, .ui.inverted.teal.button:hover, .play-button.inverted.teal.buttons .button:hover, .play-button.inverted.teal.button:hover, .ui.inverted.teal.buttons .play-button:hover, .ui.inverted.teal.play-button:hover, .download-button.inverted.teal.buttons .button:hover, .download-button.inverted.teal.button:hover, .ui.inverted.teal.buttons .download-button:hover, .ui.inverted.teal.download-button:hover { background-color: #54ffff; } .ui.inverted.teal.buttons .button:focus, .ui.inverted.teal.button:focus, .play-button.inverted.teal.buttons .button:focus, .play-button.inverted.teal.button:focus, .ui.inverted.teal.buttons .play-button:focus, .ui.inverted.teal.play-button:focus, .download-button.inverted.teal.buttons .button:focus, .download-button.inverted.teal.button:focus, .ui.inverted.teal.buttons .download-button:focus, .ui.inverted.teal.download-button:focus { background-color: #44ffff; } .ui.inverted.teal.buttons .active.button, .ui.inverted.teal.active.button, .play-button.inverted.teal.buttons .active.button, .play-button.inverted.teal.active.button, .ui.inverted.teal.buttons .active.play-button, .ui.inverted.teal.active.play-button, .download-button.inverted.teal.buttons .active.button, .download-button.inverted.teal.active.button, .ui.inverted.teal.buttons .active.download-button, .ui.inverted.teal.active.download-button { background-color: #54ffff; } .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.button:active, .play-button.inverted.teal.buttons .button:active, .play-button.inverted.teal.button:active, .ui.inverted.teal.buttons .play-button:active, .ui.inverted.teal.play-button:active, .download-button.inverted.teal.buttons .button:active, .download-button.inverted.teal.button:active, .ui.inverted.teal.buttons .download-button:active, .ui.inverted.teal.download-button:active { background-color: #3affff; } /* Inverted Basic */ .ui.inverted.teal.basic.buttons .button, .ui.inverted.teal.buttons .basic.button, .ui.inverted.teal.basic.button, .play-button.inverted.teal.basic.buttons .button, .play-button.inverted.teal.buttons .basic.button, .play-button.inverted.teal.basic.button, .ui.inverted.teal.basic.buttons .play-button, .ui.inverted.teal.buttons .basic.play-button, .ui.inverted.teal.basic.play-button, .download-button.inverted.teal.basic.buttons .button, .download-button.inverted.teal.buttons .basic.button, .download-button.inverted.teal.basic.button, .ui.inverted.teal.basic.buttons .download-button, .ui.inverted.teal.buttons .basic.download-button, .ui.inverted.teal.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.teal.basic.buttons .button:hover, .ui.inverted.teal.buttons .basic.button:hover, .ui.inverted.teal.basic.button:hover, .play-button.inverted.teal.basic.buttons .button:hover, .play-button.inverted.teal.buttons .basic.button:hover, .play-button.inverted.teal.basic.button:hover, .ui.inverted.teal.basic.buttons .play-button:hover, .ui.inverted.teal.buttons .basic.play-button:hover, .ui.inverted.teal.basic.play-button:hover, .download-button.inverted.teal.basic.buttons .button:hover, .download-button.inverted.teal.buttons .basic.button:hover, .download-button.inverted.teal.basic.button:hover, .ui.inverted.teal.basic.buttons .download-button:hover, .ui.inverted.teal.buttons .basic.download-button:hover, .ui.inverted.teal.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #54ffff inset !important; color: #6DFFFF !important; } .ui.inverted.teal.basic.buttons .button:focus, .ui.inverted.teal.basic.buttons .button:focus, .ui.inverted.teal.basic.button:focus, .play-button.inverted.teal.basic.buttons .button:focus, .play-button.inverted.teal.basic.buttons .button:focus, .play-button.inverted.teal.basic.button:focus, .ui.inverted.teal.basic.buttons .play-button:focus, .ui.inverted.teal.basic.buttons .play-button:focus, .ui.inverted.teal.basic.play-button:focus, .download-button.inverted.teal.basic.buttons .button:focus, .download-button.inverted.teal.basic.buttons .button:focus, .download-button.inverted.teal.basic.button:focus, .ui.inverted.teal.basic.buttons .download-button:focus, .ui.inverted.teal.basic.buttons .download-button:focus, .ui.inverted.teal.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #44ffff inset !important; color: #6DFFFF !important; } .ui.inverted.teal.basic.buttons .active.button, .ui.inverted.teal.buttons .basic.active.button, .ui.inverted.teal.basic.active.button, .play-button.inverted.teal.basic.buttons .active.button, .play-button.inverted.teal.buttons .basic.active.button, .play-button.inverted.teal.basic.active.button, .ui.inverted.teal.basic.buttons .active.play-button, .ui.inverted.teal.buttons .basic.active.play-button, .ui.inverted.teal.basic.active.play-button, .download-button.inverted.teal.basic.buttons .active.button, .download-button.inverted.teal.buttons .basic.active.button, .download-button.inverted.teal.basic.active.button, .ui.inverted.teal.basic.buttons .active.download-button, .ui.inverted.teal.buttons .basic.active.download-button, .ui.inverted.teal.basic.active.download-button { box-shadow: 0px 0px 0px 2px #54ffff inset !important; color: #6DFFFF !important; } .ui.inverted.teal.basic.buttons .button:active, .ui.inverted.teal.buttons .basic.button:active, .ui.inverted.teal.basic.button:active, .play-button.inverted.teal.basic.buttons .button:active, .play-button.inverted.teal.buttons .basic.button:active, .play-button.inverted.teal.basic.button:active, .ui.inverted.teal.basic.buttons .play-button:active, .ui.inverted.teal.buttons .basic.play-button:active, .ui.inverted.teal.basic.play-button:active, .download-button.inverted.teal.basic.buttons .button:active, .download-button.inverted.teal.buttons .basic.button:active, .download-button.inverted.teal.basic.button:active, .ui.inverted.teal.basic.buttons .download-button:active, .ui.inverted.teal.buttons .basic.download-button:active, .ui.inverted.teal.basic.download-button:active { box-shadow: 0px 0px 0px 2px #3affff inset !important; color: #6DFFFF !important; } /*--- Olive ---*/ .ui.olive.buttons .button, .ui.olive.button, .play-button.olive.buttons .button, .play-button.olive.button, .ui.olive.buttons .play-button, .ui.olive.play-button, .download-button.olive.buttons .button, .download-button.olive.button, .ui.olive.buttons .download-button, .ui.olive.download-button { background-color: #B5CC18; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.olive.button, .play-button.olive.button, .ui.olive.play-button, .download-button.olive.button, .ui.olive.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.olive.buttons .button:hover, .ui.olive.button:hover, .play-button.olive.buttons .button:hover, .play-button.olive.button:hover, .ui.olive.buttons .play-button:hover, .ui.olive.play-button:hover, .download-button.olive.buttons .button:hover, .download-button.olive.button:hover, .ui.olive.buttons .download-button:hover, .ui.olive.download-button:hover { background-color: #a7bd0d; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .button:focus, .ui.olive.button:focus, .play-button.olive.buttons .button:focus, .play-button.olive.button:focus, .ui.olive.buttons .play-button:focus, .ui.olive.play-button:focus, .download-button.olive.buttons .button:focus, .download-button.olive.button:focus, .ui.olive.buttons .download-button:focus, .ui.olive.download-button:focus { background-color: #a0b605; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .button:active, .ui.olive.button:active, .play-button.olive.buttons .button:active, .play-button.olive.button:active, .ui.olive.buttons .play-button:active, .ui.olive.play-button:active, .download-button.olive.buttons .button:active, .download-button.olive.button:active, .ui.olive.buttons .download-button:active, .ui.olive.download-button:active { background-color: #8d9e13; color: #FFFFFF; text-shadow: none; } .ui.olive.buttons .active.button, .ui.olive.buttons .active.button:active, .ui.olive.active.button, .ui.olive.button .active.button:active, .play-button.olive.buttons .active.button, .play-button.olive.buttons .active.button:active, .play-button.olive.active.button, .play-button.olive.button .active.button:active, .ui.olive.buttons .active.play-button, .ui.olive.buttons .active.play-button:active, .ui.olive.active.play-button, .ui.olive.play-button .active.play-button:active, .download-button.olive.buttons .active.button, .download-button.olive.buttons .active.button:active, .download-button.olive.active.button, .download-button.olive.button .active.button:active, .ui.olive.buttons .active.download-button, .ui.olive.buttons .active.download-button:active, .ui.olive.active.download-button, .ui.olive.download-button .active.download-button:active { background-color: #aac109; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.olive.buttons .button, .ui.basic.olive.button, .play-button.basic.olive.buttons .button, .play-button.basic.olive.button, .ui.basic.olive.buttons .play-button, .ui.basic.olive.play-button, .download-button.basic.olive.buttons .button, .download-button.basic.olive.button, .ui.basic.olive.buttons .download-button, .ui.basic.olive.download-button { box-shadow: 0px 0px 0px 1px #B5CC18 inset !important; color: #B5CC18 !important; } .ui.basic.olive.buttons .button:hover, .ui.basic.olive.button:hover, .play-button.basic.olive.buttons .button:hover, .play-button.basic.olive.button:hover, .ui.basic.olive.buttons .play-button:hover, .ui.basic.olive.play-button:hover, .download-button.basic.olive.buttons .button:hover, .download-button.basic.olive.button:hover, .ui.basic.olive.buttons .download-button:hover, .ui.basic.olive.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #a7bd0d inset !important; color: #a7bd0d !important; } .ui.basic.olive.buttons .button:focus, .ui.basic.olive.button:focus, .play-button.basic.olive.buttons .button:focus, .play-button.basic.olive.button:focus, .ui.basic.olive.buttons .play-button:focus, .ui.basic.olive.play-button:focus, .download-button.basic.olive.buttons .button:focus, .download-button.basic.olive.button:focus, .ui.basic.olive.buttons .download-button:focus, .ui.basic.olive.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #a0b605 inset !important; color: #a7bd0d !important; } .ui.basic.olive.buttons .active.button, .ui.basic.olive.active.button, .play-button.basic.olive.buttons .active.button, .play-button.basic.olive.active.button, .ui.basic.olive.buttons .active.play-button, .ui.basic.olive.active.play-button, .download-button.basic.olive.buttons .active.button, .download-button.basic.olive.active.button, .ui.basic.olive.buttons .active.download-button, .ui.basic.olive.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #aac109 inset !important; color: #8d9e13 !important; } .ui.basic.olive.buttons .button:active, .ui.basic.olive.button:active, .play-button.basic.olive.buttons .button:active, .play-button.basic.olive.button:active, .ui.basic.olive.buttons .play-button:active, .ui.basic.olive.play-button:active, .download-button.basic.olive.buttons .button:active, .download-button.basic.olive.button:active, .ui.basic.olive.buttons .download-button:active, .ui.basic.olive.download-button:active { box-shadow: 0px 0px 0px 1px #8d9e13 inset !important; color: #8d9e13 !important; } .ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.olive.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.olive.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.olive.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.olive.download-button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.olive.buttons .button, .ui.inverted.olive.button, .play-button.inverted.olive.buttons .button, .play-button.inverted.olive.button, .ui.inverted.olive.buttons .play-button, .ui.inverted.olive.play-button, .download-button.inverted.olive.buttons .button, .download-button.inverted.olive.button, .ui.inverted.olive.buttons .download-button, .ui.inverted.olive.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px #D9E778 inset !important; color: #D9E778; } .ui.inverted.olive.buttons .button:hover, .ui.inverted.olive.button:hover, .ui.inverted.olive.buttons .button:focus, .ui.inverted.olive.button:focus, .ui.inverted.olive.buttons .button.active, .ui.inverted.olive.button.active, .ui.inverted.olive.buttons .button:active, .ui.inverted.olive.button:active, .play-button.inverted.olive.buttons .button:hover, .play-button.inverted.olive.button:hover, .play-button.inverted.olive.buttons .button:focus, .play-button.inverted.olive.button:focus, .play-button.inverted.olive.buttons .button.active, .play-button.inverted.olive.button.active, .play-button.inverted.olive.buttons .button:active, .play-button.inverted.olive.button:active, .ui.inverted.olive.buttons .play-button:hover, .ui.inverted.olive.play-button:hover, .ui.inverted.olive.buttons .play-button:focus, .ui.inverted.olive.play-button:focus, .ui.inverted.olive.buttons .play-button.active, .ui.inverted.olive.play-button.active, .ui.inverted.olive.buttons .play-button:active, .ui.inverted.olive.play-button:active, .download-button.inverted.olive.buttons .button:hover, .download-button.inverted.olive.button:hover, .download-button.inverted.olive.buttons .button:focus, .download-button.inverted.olive.button:focus, .download-button.inverted.olive.buttons .button.active, .download-button.inverted.olive.button.active, .download-button.inverted.olive.buttons .button:active, .download-button.inverted.olive.button:active, .ui.inverted.olive.buttons .download-button:hover, .ui.inverted.olive.download-button:hover, .ui.inverted.olive.buttons .download-button:focus, .ui.inverted.olive.download-button:focus, .ui.inverted.olive.buttons .download-button.active, .ui.inverted.olive.download-button.active, .ui.inverted.olive.buttons .download-button:active, .ui.inverted.olive.download-button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.olive.buttons .button:hover, .ui.inverted.olive.button:hover, .play-button.inverted.olive.buttons .button:hover, .play-button.inverted.olive.button:hover, .ui.inverted.olive.buttons .play-button:hover, .ui.inverted.olive.play-button:hover, .download-button.inverted.olive.buttons .button:hover, .download-button.inverted.olive.button:hover, .ui.inverted.olive.buttons .download-button:hover, .ui.inverted.olive.download-button:hover { background-color: #d8ea5c; } .ui.inverted.olive.buttons .button:focus, .ui.inverted.olive.button:focus, .play-button.inverted.olive.buttons .button:focus, .play-button.inverted.olive.button:focus, .ui.inverted.olive.buttons .play-button:focus, .ui.inverted.olive.play-button:focus, .download-button.inverted.olive.buttons .button:focus, .download-button.inverted.olive.button:focus, .ui.inverted.olive.buttons .download-button:focus, .ui.inverted.olive.download-button:focus { background-color: #daef47; } .ui.inverted.olive.buttons .active.button, .ui.inverted.olive.active.button, .play-button.inverted.olive.buttons .active.button, .play-button.inverted.olive.active.button, .ui.inverted.olive.buttons .active.play-button, .ui.inverted.olive.active.play-button, .download-button.inverted.olive.buttons .active.button, .download-button.inverted.olive.active.button, .ui.inverted.olive.buttons .active.download-button, .ui.inverted.olive.active.download-button { background-color: #daed59; } .ui.inverted.olive.buttons .button:active, .ui.inverted.olive.button:active, .play-button.inverted.olive.buttons .button:active, .play-button.inverted.olive.button:active, .ui.inverted.olive.buttons .play-button:active, .ui.inverted.olive.play-button:active, .download-button.inverted.olive.buttons .button:active, .download-button.inverted.olive.button:active, .ui.inverted.olive.buttons .download-button:active, .ui.inverted.olive.download-button:active { background-color: #cddf4d; } /* Inverted Basic */ .ui.inverted.olive.basic.buttons .button, .ui.inverted.olive.buttons .basic.button, .ui.inverted.olive.basic.button, .play-button.inverted.olive.basic.buttons .button, .play-button.inverted.olive.buttons .basic.button, .play-button.inverted.olive.basic.button, .ui.inverted.olive.basic.buttons .play-button, .ui.inverted.olive.buttons .basic.play-button, .ui.inverted.olive.basic.play-button, .download-button.inverted.olive.basic.buttons .button, .download-button.inverted.olive.buttons .basic.button, .download-button.inverted.olive.basic.button, .ui.inverted.olive.basic.buttons .download-button, .ui.inverted.olive.buttons .basic.download-button, .ui.inverted.olive.basic.download-button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.olive.basic.buttons .button:hover, .ui.inverted.olive.buttons .basic.button:hover, .ui.inverted.olive.basic.button:hover, .play-button.inverted.olive.basic.buttons .button:hover, .play-button.inverted.olive.buttons .basic.button:hover, .play-button.inverted.olive.basic.button:hover, .ui.inverted.olive.basic.buttons .play-button:hover, .ui.inverted.olive.buttons .basic.play-button:hover, .ui.inverted.olive.basic.play-button:hover, .download-button.inverted.olive.basic.buttons .button:hover, .download-button.inverted.olive.buttons .basic.button:hover, .download-button.inverted.olive.basic.button:hover, .ui.inverted.olive.basic.buttons .download-button:hover, .ui.inverted.olive.buttons .basic.download-button:hover, .ui.inverted.olive.basic.download-button:hover { box-shadow: 0px 0px 0px 2px #d8ea5c inset !important; color: #D9E778 !important; } .ui.inverted.olive.basic.buttons .button:focus, .ui.inverted.olive.basic.buttons .button:focus, .ui.inverted.olive.basic.button:focus, .play-button.inverted.olive.basic.buttons .button:focus, .play-button.inverted.olive.basic.buttons .button:focus, .play-button.inverted.olive.basic.button:focus, .ui.inverted.olive.basic.buttons .play-button:focus, .ui.inverted.olive.basic.buttons .play-button:focus, .ui.inverted.olive.basic.play-button:focus, .download-button.inverted.olive.basic.buttons .button:focus, .download-button.inverted.olive.basic.buttons .button:focus, .download-button.inverted.olive.basic.button:focus, .ui.inverted.olive.basic.buttons .download-button:focus, .ui.inverted.olive.basic.buttons .download-button:focus, .ui.inverted.olive.basic.download-button:focus { box-shadow: 0px 0px 0px 2px #daef47 inset !important; color: #D9E778 !important; } .ui.inverted.olive.basic.buttons .active.button, .ui.inverted.olive.buttons .basic.active.button, .ui.inverted.olive.basic.active.button, .play-button.inverted.olive.basic.buttons .active.button, .play-button.inverted.olive.buttons .basic.active.button, .play-button.inverted.olive.basic.active.button, .ui.inverted.olive.basic.buttons .active.play-button, .ui.inverted.olive.buttons .basic.active.play-button, .ui.inverted.olive.basic.active.play-button, .download-button.inverted.olive.basic.buttons .active.button, .download-button.inverted.olive.buttons .basic.active.button, .download-button.inverted.olive.basic.active.button, .ui.inverted.olive.basic.buttons .active.download-button, .ui.inverted.olive.buttons .basic.active.download-button, .ui.inverted.olive.basic.active.download-button { box-shadow: 0px 0px 0px 2px #daed59 inset !important; color: #D9E778 !important; } .ui.inverted.olive.basic.buttons .button:active, .ui.inverted.olive.buttons .basic.button:active, .ui.inverted.olive.basic.button:active, .play-button.inverted.olive.basic.buttons .button:active, .play-button.inverted.olive.buttons .basic.button:active, .play-button.inverted.olive.basic.button:active, .ui.inverted.olive.basic.buttons .play-button:active, .ui.inverted.olive.buttons .basic.play-button:active, .ui.inverted.olive.basic.play-button:active, .download-button.inverted.olive.basic.buttons .button:active, .download-button.inverted.olive.buttons .basic.button:active, .download-button.inverted.olive.basic.button:active, .ui.inverted.olive.basic.buttons .download-button:active, .ui.inverted.olive.buttons .basic.download-button:active, .ui.inverted.olive.basic.download-button:active { box-shadow: 0px 0px 0px 2px #cddf4d inset !important; color: #D9E778 !important; } /*--- Yellow ---*/ .ui.yellow.buttons .button, .ui.yellow.button, .play-button.yellow.buttons .button, .play-button.yellow.button, .ui.yellow.buttons .play-button, .ui.yellow.play-button, .download-button.yellow.buttons .button, .download-button.yellow.button, .ui.yellow.buttons .download-button, .ui.yellow.download-button, .ui.download-button.buttons .button, .ui.download-button.button { background-color: #F4C918; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.yellow.button, .play-button.yellow.button, .ui.yellow.play-button, .download-button.yellow.button, .ui.yellow.download-button, .ui.download-button.button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.yellow.buttons .button:hover, .ui.yellow.button:hover, .play-button.yellow.buttons .button:hover, .play-button.yellow.button:hover, .ui.yellow.buttons .play-button:hover, .ui.yellow.play-button:hover, .download-button.yellow.buttons .button:hover, .download-button.yellow.button:hover, .ui.yellow.buttons .download-button:hover, .ui.yellow.download-button:hover, .ui.download-button.buttons .button:hover, .ui.download-button.button:hover { background-color: #f3c300; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .button:focus, .ui.yellow.button:focus, .play-button.yellow.buttons .button:focus, .play-button.yellow.button:focus, .ui.yellow.buttons .play-button:focus, .ui.yellow.play-button:focus, .download-button.yellow.buttons .button:focus, .download-button.yellow.button:focus, .ui.yellow.buttons .download-button:focus, .ui.yellow.download-button:focus, .ui.download-button.buttons .button:focus, .ui.download-button.button:focus { background-color: #e3b700; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .button:active, .ui.yellow.button:active, .play-button.yellow.buttons .button:active, .play-button.yellow.button:active, .ui.yellow.buttons .play-button:active, .ui.yellow.play-button:active, .download-button.yellow.buttons .button:active, .download-button.yellow.button:active, .ui.yellow.buttons .download-button:active, .ui.yellow.download-button:active, .ui.download-button.buttons .button:active, .ui.download-button.button:active { background-color: #cfa90a; color: #FFFFFF; text-shadow: none; } .ui.yellow.buttons .active.button, .ui.yellow.buttons .active.button:active, .ui.yellow.active.button, .ui.yellow.button .active.button:active, .play-button.yellow.buttons .active.button, .play-button.yellow.buttons .active.button:active, .play-button.yellow.active.button, .play-button.yellow.button .active.button:active, .ui.yellow.buttons .active.play-button, .ui.yellow.buttons .active.play-button:active, .ui.yellow.active.play-button, .ui.yellow.play-button .active.play-button:active, .download-button.yellow.buttons .active.button, .download-button.yellow.buttons .active.button:active, .download-button.yellow.active.button, .download-button.yellow.button .active.button:active, .ui.yellow.buttons .active.download-button, .ui.yellow.buttons .active.download-button:active, .ui.yellow.active.download-button, .ui.yellow.download-button .active.download-button:active, .ui.download-button.buttons .active.button, .ui.download-button.buttons .active.button:active, .ui.download-button.active.button, .ui.download-button.button .active.button:active { background-color: #f3c300; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.yellow.buttons .button, .ui.basic.yellow.button, .play-button.basic.yellow.buttons .button, .play-button.basic.yellow.button, .ui.basic.yellow.buttons .play-button, .ui.basic.yellow.play-button, .download-button.basic.yellow.buttons .button, .download-button.basic.yellow.button, .ui.basic.yellow.buttons .download-button, .ui.basic.yellow.download-button, .ui.basic.download-button.buttons .button, .ui.basic.download-button.button { box-shadow: 0px 0px 0px 1px #F4C918 inset !important; color: #F4C918 !important; } .ui.basic.yellow.buttons .button:hover, .ui.basic.yellow.button:hover, .play-button.basic.yellow.buttons .button:hover, .play-button.basic.yellow.button:hover, .ui.basic.yellow.buttons .play-button:hover, .ui.basic.yellow.play-button:hover, .download-button.basic.yellow.buttons .button:hover, .download-button.basic.yellow.button:hover, .ui.basic.yellow.buttons .download-button:hover, .ui.basic.yellow.download-button:hover, .ui.basic.download-button.buttons .button:hover, .ui.basic.download-button.button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #f3c300 inset !important; color: #f3c300 !important; } .ui.basic.yellow.buttons .button:focus, .ui.basic.yellow.button:focus, .play-button.basic.yellow.buttons .button:focus, .play-button.basic.yellow.button:focus, .ui.basic.yellow.buttons .play-button:focus, .ui.basic.yellow.play-button:focus, .download-button.basic.yellow.buttons .button:focus, .download-button.basic.yellow.button:focus, .ui.basic.yellow.buttons .download-button:focus, .ui.basic.yellow.download-button:focus, .ui.basic.download-button.buttons .button:focus, .ui.basic.download-button.button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #e3b700 inset !important; color: #f3c300 !important; } .ui.basic.yellow.buttons .active.button, .ui.basic.yellow.active.button, .play-button.basic.yellow.buttons .active.button, .play-button.basic.yellow.active.button, .ui.basic.yellow.buttons .active.play-button, .ui.basic.yellow.active.play-button, .download-button.basic.yellow.buttons .active.button, .download-button.basic.yellow.active.button, .ui.basic.yellow.buttons .active.download-button, .ui.basic.yellow.active.download-button, .ui.basic.download-button.buttons .active.button, .ui.basic.download-button.active.button { background: transparent !important; box-shadow: 0px 0px 0px 1px #f3c300 inset !important; color: #cfa90a !important; } .ui.basic.yellow.buttons .button:active, .ui.basic.yellow.button:active, .play-button.basic.yellow.buttons .button:active, .play-button.basic.yellow.button:active, .ui.basic.yellow.buttons .play-button:active, .ui.basic.yellow.play-button:active, .download-button.basic.yellow.buttons .button:active, .download-button.basic.yellow.button:active, .ui.basic.yellow.buttons .download-button:active, .ui.basic.yellow.download-button:active, .ui.basic.download-button.buttons .button:active, .ui.basic.download-button.button:active { box-shadow: 0px 0px 0px 1px #cfa90a inset !important; color: #cfa90a !important; } .ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.yellow.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.yellow.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.yellow.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.yellow.download-button:not(:first-child), .ui.buttons:not(.vertical) > .basic.download-button.button:not(:first-child) { margin-left: -1px; } /* Inverted */ .ui.inverted.yellow.buttons .button, .ui.inverted.yellow.button, .play-button.inverted.yellow.buttons .button, .play-button.inverted.yellow.button, .ui.inverted.yellow.buttons .play-button, .ui.inverted.yellow.play-button, .download-button.inverted.yellow.buttons .button, .download-button.inverted.yellow.button, .ui.inverted.yellow.buttons .download-button, .ui.inverted.yellow.download-button, .ui.inverted.download-button.buttons .button, .ui.inverted.download-button.button { background-color: transparent; box-shadow: 0px 0px 0px 2px #FFE21F inset !important; color: #FFE21F; } .ui.inverted.yellow.buttons .button:hover, .ui.inverted.yellow.button:hover, .ui.inverted.yellow.buttons .button:focus, .ui.inverted.yellow.button:focus, .ui.inverted.yellow.buttons .button.active, .ui.inverted.yellow.button.active, .ui.inverted.yellow.buttons .button:active, .ui.inverted.yellow.button:active, .play-button.inverted.yellow.buttons .button:hover, .play-button.inverted.yellow.button:hover, .play-button.inverted.yellow.buttons .button:focus, .play-button.inverted.yellow.button:focus, .play-button.inverted.yellow.buttons .button.active, .play-button.inverted.yellow.button.active, .play-button.inverted.yellow.buttons .button:active, .play-button.inverted.yellow.button:active, .ui.inverted.yellow.buttons .play-button:hover, .ui.inverted.yellow.play-button:hover, .ui.inverted.yellow.buttons .play-button:focus, .ui.inverted.yellow.play-button:focus, .ui.inverted.yellow.buttons .play-button.active, .ui.inverted.yellow.play-button.active, .ui.inverted.yellow.buttons .play-button:active, .ui.inverted.yellow.play-button:active, .download-button.inverted.yellow.buttons .button:hover, .download-button.inverted.yellow.button:hover, .download-button.inverted.yellow.buttons .button:focus, .download-button.inverted.yellow.button:focus, .download-button.inverted.yellow.buttons .button.active, .download-button.inverted.yellow.button.active, .download-button.inverted.yellow.buttons .button:active, .download-button.inverted.yellow.button:active, .ui.inverted.yellow.buttons .download-button:hover, .ui.inverted.yellow.download-button:hover, .ui.inverted.yellow.buttons .download-button:focus, .ui.inverted.yellow.download-button:focus, .ui.inverted.yellow.buttons .download-button.active, .ui.inverted.yellow.download-button.active, .ui.inverted.yellow.buttons .download-button:active, .ui.inverted.yellow.download-button:active, .ui.inverted.download-button.buttons .button:hover, .ui.inverted.download-button.button:hover, .ui.inverted.download-button.buttons .button:focus, .ui.inverted.download-button.button:focus, .ui.inverted.download-button.buttons .button.active, .ui.inverted.download-button.button.active, .ui.inverted.download-button.buttons .button:active, .ui.inverted.download-button.button:active { box-shadow: none !important; color: rgba(0, 0, 0, 0.6); } .ui.inverted.yellow.buttons .button:hover, .ui.inverted.yellow.button:hover, .play-button.inverted.yellow.buttons .button:hover, .play-button.inverted.yellow.button:hover, .ui.inverted.yellow.buttons .play-button:hover, .ui.inverted.yellow.play-button:hover, .download-button.inverted.yellow.buttons .button:hover, .download-button.inverted.yellow.button:hover, .ui.inverted.yellow.buttons .download-button:hover, .ui.inverted.yellow.download-button:hover, .ui.inverted.download-button.buttons .button:hover, .ui.inverted.download-button.button:hover { background-color: #ffdf05; } .ui.inverted.yellow.buttons .button:focus, .ui.inverted.yellow.button:focus, .play-button.inverted.yellow.buttons .button:focus, .play-button.inverted.yellow.button:focus, .ui.inverted.yellow.buttons .play-button:focus, .ui.inverted.yellow.play-button:focus, .download-button.inverted.yellow.buttons .button:focus, .download-button.inverted.yellow.button:focus, .ui.inverted.yellow.buttons .download-button:focus, .ui.inverted.yellow.download-button:focus, .ui.inverted.download-button.buttons .button:focus, .ui.inverted.download-button.button:focus { background-color: #f5d500; } .ui.inverted.yellow.buttons .active.button, .ui.inverted.yellow.active.button, .play-button.inverted.yellow.buttons .active.button, .play-button.inverted.yellow.active.button, .ui.inverted.yellow.buttons .active.play-button, .ui.inverted.yellow.active.play-button, .download-button.inverted.yellow.buttons .active.button, .download-button.inverted.yellow.active.button, .ui.inverted.yellow.buttons .active.download-button, .ui.inverted.yellow.active.download-button, .ui.inverted.download-button.buttons .active.button, .ui.inverted.download-button.active.button { background-color: #ffdf05; } .ui.inverted.yellow.buttons .button:active, .ui.inverted.yellow.button:active, .play-button.inverted.yellow.buttons .button:active, .play-button.inverted.yellow.button:active, .ui.inverted.yellow.buttons .play-button:active, .ui.inverted.yellow.play-button:active, .download-button.inverted.yellow.buttons .button:active, .download-button.inverted.yellow.button:active, .ui.inverted.yellow.buttons .download-button:active, .ui.inverted.yellow.download-button:active, .ui.inverted.download-button.buttons .button:active, .ui.inverted.download-button.button:active { background-color: #ebcd00; } /* Inverted Basic */ .ui.inverted.yellow.basic.buttons .button, .ui.inverted.yellow.buttons .basic.button, .ui.inverted.yellow.basic.button, .play-button.inverted.yellow.basic.buttons .button, .play-button.inverted.yellow.buttons .basic.button, .play-button.inverted.yellow.basic.button, .ui.inverted.yellow.basic.buttons .play-button, .ui.inverted.yellow.buttons .basic.play-button, .ui.inverted.yellow.basic.play-button, .download-button.inverted.yellow.basic.buttons .button, .download-button.inverted.yellow.buttons .basic.button, .download-button.inverted.yellow.basic.button, .ui.inverted.yellow.basic.buttons .download-button, .ui.inverted.yellow.buttons .basic.download-button, .ui.inverted.yellow.basic.download-button, .ui.inverted.download-button.basic.buttons .button, .ui.inverted.download-button.buttons .basic.button, .ui.inverted.download-button.basic.button { background-color: transparent; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; color: #FFFFFF !important; } .ui.inverted.yellow.basic.buttons .button:hover, .ui.inverted.yellow.buttons .basic.button:hover, .ui.inverted.yellow.basic.button:hover, .play-button.inverted.yellow.basic.buttons .button:hover, .play-button.inverted.yellow.buttons .basic.button:hover, .play-button.inverted.yellow.basic.button:hover, .ui.inverted.yellow.basic.buttons .play-button:hover, .ui.inverted.yellow.buttons .basic.play-button:hover, .ui.inverted.yellow.basic.play-button:hover, .download-button.inverted.yellow.basic.buttons .button:hover, .download-button.inverted.yellow.buttons .basic.button:hover, .download-button.inverted.yellow.basic.button:hover, .ui.inverted.yellow.basic.buttons .download-button:hover, .ui.inverted.yellow.buttons .basic.download-button:hover, .ui.inverted.yellow.basic.download-button:hover, .ui.inverted.download-button.basic.buttons .button:hover, .ui.inverted.download-button.buttons .basic.button:hover, .ui.inverted.download-button.basic.button:hover { box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; color: #FFE21F !important; } .ui.inverted.yellow.basic.buttons .button:focus, .ui.inverted.yellow.basic.buttons .button:focus, .ui.inverted.yellow.basic.button:focus, .play-button.inverted.yellow.basic.buttons .button:focus, .play-button.inverted.yellow.basic.buttons .button:focus, .play-button.inverted.yellow.basic.button:focus, .ui.inverted.yellow.basic.buttons .play-button:focus, .ui.inverted.yellow.basic.buttons .play-button:focus, .ui.inverted.yellow.basic.play-button:focus, .download-button.inverted.yellow.basic.buttons .button:focus, .download-button.inverted.yellow.basic.buttons .button:focus, .download-button.inverted.yellow.basic.button:focus, .ui.inverted.yellow.basic.buttons .download-button:focus, .ui.inverted.yellow.basic.buttons .download-button:focus, .ui.inverted.yellow.basic.download-button:focus, .ui.inverted.download-button.basic.buttons .button:focus, .ui.inverted.download-button.basic.buttons .button:focus, .ui.inverted.download-button.basic.button:focus { box-shadow: 0px 0px 0px 2px #f5d500 inset !important; color: #FFE21F !important; } .ui.inverted.yellow.basic.buttons .active.button, .ui.inverted.yellow.buttons .basic.active.button, .ui.inverted.yellow.basic.active.button, .play-button.inverted.yellow.basic.buttons .active.button, .play-button.inverted.yellow.buttons .basic.active.button, .play-button.inverted.yellow.basic.active.button, .ui.inverted.yellow.basic.buttons .active.play-button, .ui.inverted.yellow.buttons .basic.active.play-button, .ui.inverted.yellow.basic.active.play-button, .download-button.inverted.yellow.basic.buttons .active.button, .download-button.inverted.yellow.buttons .basic.active.button, .download-button.inverted.yellow.basic.active.button, .ui.inverted.yellow.basic.buttons .active.download-button, .ui.inverted.yellow.buttons .basic.active.download-button, .ui.inverted.yellow.basic.active.download-button, .ui.inverted.download-button.basic.buttons .active.button, .ui.inverted.download-button.buttons .basic.active.button, .ui.inverted.download-button.basic.active.button { box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; color: #FFE21F !important; } .ui.inverted.yellow.basic.buttons .button:active, .ui.inverted.yellow.buttons .basic.button:active, .ui.inverted.yellow.basic.button:active, .play-button.inverted.yellow.basic.buttons .button:active, .play-button.inverted.yellow.buttons .basic.button:active, .play-button.inverted.yellow.basic.button:active, .ui.inverted.yellow.basic.buttons .play-button:active, .ui.inverted.yellow.buttons .basic.play-button:active, .ui.inverted.yellow.basic.play-button:active, .download-button.inverted.yellow.basic.buttons .button:active, .download-button.inverted.yellow.buttons .basic.button:active, .download-button.inverted.yellow.basic.button:active, .ui.inverted.yellow.basic.buttons .download-button:active, .ui.inverted.yellow.buttons .basic.download-button:active, .ui.inverted.yellow.basic.download-button:active, .ui.inverted.download-button.basic.buttons .button:active, .ui.inverted.download-button.buttons .basic.button:active, .ui.inverted.download-button.basic.button:active { box-shadow: 0px 0px 0px 2px #ebcd00 inset !important; color: #FFE21F !important; } /*------------------- Primary --------------------*/ /*--- Standard ---*/ .ui.primary.buttons .button, .ui.primary.button, .play-button.primary.buttons .button, .play-button.primary.button, .ui.primary.buttons .play-button, .ui.primary.play-button, .download-button.primary.buttons .button, .download-button.primary.button, .ui.primary.buttons .download-button, .ui.primary.download-button { background-color: #3CB5B5; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.primary.button, .play-button.primary.button, .ui.primary.play-button, .download-button.primary.button, .ui.primary.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.primary.buttons .button:hover, .ui.primary.button:hover, .play-button.primary.buttons .button:hover, .play-button.primary.button:hover, .ui.primary.buttons .play-button:hover, .ui.primary.play-button:hover, .download-button.primary.buttons .button:hover, .download-button.primary.button:hover, .ui.primary.buttons .download-button:hover, .ui.primary.download-button:hover { background-color: #30a7a7; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .button:focus, .ui.primary.button:focus, .play-button.primary.buttons .button:focus, .play-button.primary.button:focus, .ui.primary.buttons .play-button:focus, .ui.primary.play-button:focus, .download-button.primary.buttons .button:focus, .download-button.primary.button:focus, .ui.primary.buttons .download-button:focus, .ui.primary.download-button:focus { background-color: #28a0a0; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .button:active, .ui.primary.button:active, .play-button.primary.buttons .button:active, .play-button.primary.button:active, .ui.primary.buttons .play-button:active, .ui.primary.play-button:active, .download-button.primary.buttons .button:active, .download-button.primary.button:active, .ui.primary.buttons .download-button:active, .ui.primary.download-button:active { background-color: #2f8f8f; color: #FFFFFF; text-shadow: none; } .ui.primary.buttons .active.button, .ui.primary.buttons .active.button:active, .ui.primary.active.button, .ui.primary.button .active.button:active, .play-button.primary.buttons .active.button, .play-button.primary.buttons .active.button:active, .play-button.primary.active.button, .play-button.primary.button .active.button:active, .ui.primary.buttons .active.play-button, .ui.primary.buttons .active.play-button:active, .ui.primary.active.play-button, .ui.primary.play-button .active.play-button:active, .download-button.primary.buttons .active.button, .download-button.primary.buttons .active.button:active, .download-button.primary.active.button, .download-button.primary.button .active.button:active, .ui.primary.buttons .active.download-button, .ui.primary.buttons .active.download-button:active, .ui.primary.active.download-button, .ui.primary.download-button .active.download-button:active { background-color: #2eaaaa; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.primary.buttons .button, .ui.basic.primary.button, .play-button.basic.primary.buttons .button, .play-button.basic.primary.button, .ui.basic.primary.buttons .play-button, .ui.basic.primary.play-button, .download-button.basic.primary.buttons .button, .download-button.basic.primary.button, .ui.basic.primary.buttons .download-button, .ui.basic.primary.download-button { box-shadow: 0px 0px 0px 1px #3CB5B5 inset !important; color: #3CB5B5 !important; } .ui.basic.primary.buttons .button:hover, .ui.basic.primary.button:hover, .play-button.basic.primary.buttons .button:hover, .play-button.basic.primary.button:hover, .ui.basic.primary.buttons .play-button:hover, .ui.basic.primary.play-button:hover, .download-button.basic.primary.buttons .button:hover, .download-button.basic.primary.button:hover, .ui.basic.primary.buttons .download-button:hover, .ui.basic.primary.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #30a7a7 inset !important; color: #30a7a7 !important; } .ui.basic.primary.buttons .button:focus, .ui.basic.primary.button:focus, .play-button.basic.primary.buttons .button:focus, .play-button.basic.primary.button:focus, .ui.basic.primary.buttons .play-button:focus, .ui.basic.primary.play-button:focus, .download-button.basic.primary.buttons .button:focus, .download-button.basic.primary.button:focus, .ui.basic.primary.buttons .download-button:focus, .ui.basic.primary.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #28a0a0 inset !important; color: #30a7a7 !important; } .ui.basic.primary.buttons .active.button, .ui.basic.primary.active.button, .play-button.basic.primary.buttons .active.button, .play-button.basic.primary.active.button, .ui.basic.primary.buttons .active.play-button, .ui.basic.primary.active.play-button, .download-button.basic.primary.buttons .active.button, .download-button.basic.primary.active.button, .ui.basic.primary.buttons .active.download-button, .ui.basic.primary.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #2eaaaa inset !important; color: #2f8f8f !important; } .ui.basic.primary.buttons .button:active, .ui.basic.primary.button:active, .play-button.basic.primary.buttons .button:active, .play-button.basic.primary.button:active, .ui.basic.primary.buttons .play-button:active, .ui.basic.primary.play-button:active, .download-button.basic.primary.buttons .button:active, .download-button.basic.primary.button:active, .ui.basic.primary.buttons .download-button:active, .ui.basic.primary.download-button:active { box-shadow: 0px 0px 0px 1px #2f8f8f inset !important; color: #2f8f8f !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.download-button:not(:first-child) { margin-left: -1px; } /*------------------- Secondary --------------------*/ /* Standard */ .ui.secondary.buttons .button, .ui.secondary.button, .play-button.secondary.buttons .button, .play-button.secondary.button, .ui.secondary.buttons .play-button, .ui.secondary.play-button, .download-button.secondary.buttons .button, .download-button.secondary.button, .ui.secondary.buttons .download-button, .ui.secondary.download-button { background-color: #43C9C9; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.secondary.button, .play-button.secondary.button, .ui.secondary.play-button, .download-button.secondary.button, .ui.secondary.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.secondary.buttons .button:hover, .ui.secondary.button:hover, .play-button.secondary.buttons .button:hover, .play-button.secondary.button:hover, .ui.secondary.buttons .play-button:hover, .ui.secondary.play-button:hover, .download-button.secondary.buttons .button:hover, .download-button.secondary.button:hover, .ui.secondary.buttons .download-button:hover, .ui.secondary.download-button:hover { background-color: #51d5d5; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .button:focus, .ui.secondary.button:focus, .play-button.secondary.buttons .button:focus, .play-button.secondary.button:focus, .ui.secondary.buttons .play-button:focus, .ui.secondary.play-button:focus, .download-button.secondary.buttons .button:focus, .download-button.secondary.button:focus, .ui.secondary.buttons .download-button:focus, .ui.secondary.download-button:focus { background-color: #58dddd; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .button:active, .ui.secondary.button:active, .play-button.secondary.buttons .button:active, .play-button.secondary.button:active, .ui.secondary.buttons .play-button:active, .ui.secondary.play-button:active, .download-button.secondary.buttons .button:active, .download-button.secondary.button:active, .ui.secondary.buttons .download-button:active, .ui.secondary.download-button:active { background-color: #6bd4d4; color: #FFFFFF; text-shadow: none; } .ui.secondary.buttons .active.button, .ui.secondary.buttons .active.button:active, .ui.secondary.active.button, .ui.secondary.button .active.button:active, .play-button.secondary.buttons .active.button, .play-button.secondary.buttons .active.button:active, .play-button.secondary.active.button, .play-button.secondary.button .active.button:active, .ui.secondary.buttons .active.play-button, .ui.secondary.buttons .active.play-button:active, .ui.secondary.active.play-button, .ui.secondary.play-button .active.play-button:active, .download-button.secondary.buttons .active.button, .download-button.secondary.buttons .active.button:active, .download-button.secondary.active.button, .download-button.secondary.button .active.button:active, .ui.secondary.buttons .active.download-button, .ui.secondary.buttons .active.download-button:active, .ui.secondary.active.download-button, .ui.secondary.download-button .active.download-button:active { background-color: #4ed8d8; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.secondary.buttons .button, .ui.basic.secondary.button, .play-button.basic.secondary.buttons .button, .play-button.basic.secondary.button, .ui.basic.secondary.buttons .play-button, .ui.basic.secondary.play-button, .download-button.basic.secondary.buttons .button, .download-button.basic.secondary.button, .ui.basic.secondary.buttons .download-button, .ui.basic.secondary.download-button { box-shadow: 0px 0px 0px 1px #43C9C9 inset !important; color: #43C9C9 !important; } .ui.basic.secondary.buttons .button:hover, .ui.basic.secondary.button:hover, .play-button.basic.secondary.buttons .button:hover, .play-button.basic.secondary.button:hover, .ui.basic.secondary.buttons .play-button:hover, .ui.basic.secondary.play-button:hover, .download-button.basic.secondary.buttons .button:hover, .download-button.basic.secondary.button:hover, .ui.basic.secondary.buttons .download-button:hover, .ui.basic.secondary.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #51d5d5 inset !important; color: #51d5d5 !important; } .ui.basic.secondary.buttons .button:focus, .ui.basic.secondary.button:focus, .play-button.basic.secondary.buttons .button:focus, .play-button.basic.secondary.button:focus, .ui.basic.secondary.buttons .play-button:focus, .ui.basic.secondary.play-button:focus, .download-button.basic.secondary.buttons .button:focus, .download-button.basic.secondary.button:focus, .ui.basic.secondary.buttons .download-button:focus, .ui.basic.secondary.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #58dddd inset !important; color: #51d5d5 !important; } .ui.basic.secondary.buttons .active.button, .ui.basic.secondary.active.button, .play-button.basic.secondary.buttons .active.button, .play-button.basic.secondary.active.button, .ui.basic.secondary.buttons .active.play-button, .ui.basic.secondary.active.play-button, .download-button.basic.secondary.buttons .active.button, .download-button.basic.secondary.active.button, .ui.basic.secondary.buttons .active.download-button, .ui.basic.secondary.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #4ed8d8 inset !important; color: #6bd4d4 !important; } .ui.basic.secondary.buttons .button:active, .ui.basic.secondary.button:active, .play-button.basic.secondary.buttons .button:active, .play-button.basic.secondary.button:active, .ui.basic.secondary.buttons .play-button:active, .ui.basic.secondary.play-button:active, .download-button.basic.secondary.buttons .button:active, .download-button.basic.secondary.button:active, .ui.basic.secondary.buttons .download-button:active, .ui.basic.secondary.download-button:active { box-shadow: 0px 0px 0px 1px #6bd4d4 inset !important; color: #6bd4d4 !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.download-button:not(:first-child) { margin-left: -1px; } /*--------------- Positive ----------------*/ /* Standard */ .ui.positive.buttons .button, .ui.positive.button, .play-button.positive.buttons .button, .play-button.positive.button, .ui.positive.buttons .play-button, .ui.positive.play-button, .download-button.positive.buttons .button, .download-button.positive.button, .ui.positive.buttons .download-button, .ui.positive.download-button { background-color: #3FC863; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.positive.button, .play-button.positive.button, .ui.positive.play-button, .download-button.positive.button, .ui.positive.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.positive.buttons .button:hover, .ui.positive.button:hover, .play-button.positive.buttons .button:hover, .play-button.positive.button:hover, .ui.positive.buttons .play-button:hover, .ui.positive.play-button:hover, .download-button.positive.buttons .button:hover, .download-button.positive.button:hover, .ui.positive.buttons .download-button:hover, .ui.positive.download-button:hover { background-color: #2ebf54; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .button:focus, .ui.positive.button:focus, .play-button.positive.buttons .button:focus, .play-button.positive.button:focus, .ui.positive.buttons .play-button:focus, .ui.positive.play-button:focus, .download-button.positive.buttons .button:focus, .download-button.positive.button:focus, .ui.positive.buttons .download-button:focus, .ui.positive.download-button:focus { background-color: #25b94c; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .button:active, .ui.positive.button:active, .play-button.positive.buttons .button:active, .play-button.positive.button:active, .ui.positive.buttons .play-button:active, .ui.positive.play-button:active, .download-button.positive.buttons .button:active, .download-button.positive.button:active, .ui.positive.buttons .download-button:active, .ui.positive.download-button:active { background-color: #2fa54e; color: #FFFFFF; text-shadow: none; } .ui.positive.buttons .active.button, .ui.positive.buttons .active.button:active, .ui.positive.active.button, .ui.positive.button .active.button:active, .play-button.positive.buttons .active.button, .play-button.positive.buttons .active.button:active, .play-button.positive.active.button, .play-button.positive.button .active.button:active, .ui.positive.buttons .active.play-button, .ui.positive.buttons .active.play-button:active, .ui.positive.active.play-button, .ui.positive.play-button .active.play-button:active, .download-button.positive.buttons .active.button, .download-button.positive.buttons .active.button:active, .download-button.positive.active.button, .download-button.positive.button .active.button:active, .ui.positive.buttons .active.download-button, .ui.positive.buttons .active.download-button:active, .ui.positive.active.download-button, .ui.positive.download-button .active.download-button:active { background-color: #2bc253; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.positive.buttons .button, .ui.basic.positive.button, .play-button.basic.positive.buttons .button, .play-button.basic.positive.button, .ui.basic.positive.buttons .play-button, .ui.basic.positive.play-button, .download-button.basic.positive.buttons .button, .download-button.basic.positive.button, .ui.basic.positive.buttons .download-button, .ui.basic.positive.download-button { box-shadow: 0px 0px 0px 1px #3FC863 inset !important; color: #3FC863 !important; } .ui.basic.positive.buttons .button:hover, .ui.basic.positive.button:hover, .play-button.basic.positive.buttons .button:hover, .play-button.basic.positive.button:hover, .ui.basic.positive.buttons .play-button:hover, .ui.basic.positive.play-button:hover, .download-button.basic.positive.buttons .button:hover, .download-button.basic.positive.button:hover, .ui.basic.positive.buttons .download-button:hover, .ui.basic.positive.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #2ebf54 inset !important; color: #2ebf54 !important; } .ui.basic.positive.buttons .button:focus, .ui.basic.positive.button:focus, .play-button.basic.positive.buttons .button:focus, .play-button.basic.positive.button:focus, .ui.basic.positive.buttons .play-button:focus, .ui.basic.positive.play-button:focus, .download-button.basic.positive.buttons .button:focus, .download-button.basic.positive.button:focus, .ui.basic.positive.buttons .download-button:focus, .ui.basic.positive.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #25b94c inset !important; color: #2ebf54 !important; } .ui.basic.positive.buttons .active.button, .ui.basic.positive.active.button, .play-button.basic.positive.buttons .active.button, .play-button.basic.positive.active.button, .ui.basic.positive.buttons .active.play-button, .ui.basic.positive.active.play-button, .download-button.basic.positive.buttons .active.button, .download-button.basic.positive.active.button, .ui.basic.positive.buttons .active.download-button, .ui.basic.positive.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #2bc253 inset !important; color: #2fa54e !important; } .ui.basic.positive.buttons .button:active, .ui.basic.positive.button:active, .play-button.basic.positive.buttons .button:active, .play-button.basic.positive.button:active, .ui.basic.positive.buttons .play-button:active, .ui.basic.positive.play-button:active, .download-button.basic.positive.buttons .button:active, .download-button.basic.positive.button:active, .ui.basic.positive.buttons .download-button:active, .ui.basic.positive.download-button:active { box-shadow: 0px 0px 0px 1px #2fa54e inset !important; color: #2fa54e !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.download-button:not(:first-child) { margin-left: -1px; } /*--------------- Negative ----------------*/ /* Standard */ .ui.negative.buttons .button, .ui.negative.button, .play-button.negative.buttons .button, .play-button.negative.button, .ui.negative.buttons .play-button, .ui.negative.play-button, .download-button.negative.buttons .button, .download-button.negative.button, .ui.negative.buttons .download-button, .ui.negative.download-button { background-color: #E81123; color: #FFFFFF; text-shadow: none; background-image: none; } .ui.negative.button, .play-button.negative.button, .ui.negative.play-button, .download-button.negative.button, .ui.negative.download-button { box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.negative.buttons .button:hover, .ui.negative.button:hover, .play-button.negative.buttons .button:hover, .play-button.negative.button:hover, .ui.negative.buttons .play-button:hover, .ui.negative.play-button:hover, .download-button.negative.buttons .button:hover, .download-button.negative.button:hover, .ui.negative.buttons .download-button:hover, .ui.negative.download-button:hover { background-color: #da0617; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .button:focus, .ui.negative.button:focus, .play-button.negative.buttons .button:focus, .play-button.negative.button:focus, .ui.negative.buttons .play-button:focus, .ui.negative.play-button:focus, .download-button.negative.buttons .button:focus, .download-button.negative.button:focus, .ui.negative.buttons .download-button:focus, .ui.negative.download-button:focus { background-color: #d00011; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .button:active, .ui.negative.button:active, .play-button.negative.buttons .button:active, .play-button.negative.button:active, .ui.negative.buttons .play-button:active, .ui.negative.play-button:active, .download-button.negative.buttons .button:active, .download-button.negative.button:active, .ui.negative.buttons .download-button:active, .ui.negative.download-button:active { background-color: #b80e1c; color: #FFFFFF; text-shadow: none; } .ui.negative.buttons .active.button, .ui.negative.buttons .active.button:active, .ui.negative.active.button, .ui.negative.button .active.button:active, .play-button.negative.buttons .active.button, .play-button.negative.buttons .active.button:active, .play-button.negative.active.button, .play-button.negative.button .active.button:active, .ui.negative.buttons .active.play-button, .ui.negative.buttons .active.play-button:active, .ui.negative.active.play-button, .ui.negative.play-button .active.play-button:active, .download-button.negative.buttons .active.button, .download-button.negative.buttons .active.button:active, .download-button.negative.active.button, .download-button.negative.button .active.button:active, .ui.negative.buttons .active.download-button, .ui.negative.buttons .active.download-button:active, .ui.negative.active.download-button, .ui.negative.download-button .active.download-button:active { background-color: #df0113; color: #FFFFFF; text-shadow: none; } /* Basic */ .ui.basic.negative.buttons .button, .ui.basic.negative.button, .play-button.basic.negative.buttons .button, .play-button.basic.negative.button, .ui.basic.negative.buttons .play-button, .ui.basic.negative.play-button, .download-button.basic.negative.buttons .button, .download-button.basic.negative.button, .ui.basic.negative.buttons .download-button, .ui.basic.negative.download-button { box-shadow: 0px 0px 0px 1px #E81123 inset !important; color: #E81123 !important; } .ui.basic.negative.buttons .button:hover, .ui.basic.negative.button:hover, .play-button.basic.negative.buttons .button:hover, .play-button.basic.negative.button:hover, .ui.basic.negative.buttons .play-button:hover, .ui.basic.negative.play-button:hover, .download-button.basic.negative.buttons .button:hover, .download-button.basic.negative.button:hover, .ui.basic.negative.buttons .download-button:hover, .ui.basic.negative.download-button:hover { background: transparent !important; box-shadow: 0px 0px 0px 1px #da0617 inset !important; color: #da0617 !important; } .ui.basic.negative.buttons .button:focus, .ui.basic.negative.button:focus, .play-button.basic.negative.buttons .button:focus, .play-button.basic.negative.button:focus, .ui.basic.negative.buttons .play-button:focus, .ui.basic.negative.play-button:focus, .download-button.basic.negative.buttons .button:focus, .download-button.basic.negative.button:focus, .ui.basic.negative.buttons .download-button:focus, .ui.basic.negative.download-button:focus { background: transparent !important; box-shadow: 0px 0px 0px 1px #d00011 inset !important; color: #da0617 !important; } .ui.basic.negative.buttons .active.button, .ui.basic.negative.active.button, .play-button.basic.negative.buttons .active.button, .play-button.basic.negative.active.button, .ui.basic.negative.buttons .active.play-button, .ui.basic.negative.active.play-button, .download-button.basic.negative.buttons .active.button, .download-button.basic.negative.active.button, .ui.basic.negative.buttons .active.download-button, .ui.basic.negative.active.download-button { background: transparent !important; box-shadow: 0px 0px 0px 1px #df0113 inset !important; color: #b80e1c !important; } .ui.basic.negative.buttons .button:active, .ui.basic.negative.button:active, .play-button.basic.negative.buttons .button:active, .play-button.basic.negative.button:active, .ui.basic.negative.buttons .play-button:active, .ui.basic.negative.play-button:active, .download-button.basic.negative.buttons .button:active, .download-button.basic.negative.button:active, .ui.basic.negative.buttons .download-button:active, .ui.basic.negative.download-button:active { box-shadow: 0px 0px 0px 1px #b80e1c inset !important; color: #b80e1c !important; } .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .play-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.play-button:not(:first-child), .download-button.buttons:not(.vertical) > .basic.primary.button:not(:first-child), .ui.buttons:not(.vertical) > .basic.primary.download-button:not(:first-child) { margin-left: -1px; } /******************************* Groups *******************************/ .ui.buttons, .play-button.buttons, .download-button.buttons { display: inline-flex; flex-direction: row; font-size: 0em; vertical-align: baseline; margin: 0em 0.25em 0em 0em; } .ui.buttons:not(.basic):not(.inverted), .play-button.buttons:not(.basic):not(.inverted), .download-button.buttons:not(.basic):not(.inverted) { box-shadow: none; } /* Clearfix */ .ui.buttons:after, .play-button.buttons:after, .download-button.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Standard Group */ .ui.buttons .button, .play-button.buttons .button, .ui.buttons .play-button, .download-button.buttons .button, .ui.buttons .download-button { flex: 1 0 auto; margin: 0em; border-radius: 0em; margin: 0px 0px 0px 0px; } .ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button, .play-button.buttons > .play-button.button:not(.basic):not(.inverted), .play-button.buttons:not(.basic):not(.inverted) > .button, .ui.buttons > .ui.play-button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .play-button, .download-button.buttons > .download-button.button:not(.basic):not(.inverted), .download-button.buttons:not(.basic):not(.inverted) > .button, .ui.buttons > .ui.download-button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .download-button { box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.buttons .button:first-child, .play-button.buttons .button:first-child, .ui.buttons .play-button:first-child, .download-button.buttons .button:first-child, .ui.buttons .download-button:first-child { border-left: none; margin-left: 0em; border-top-left-radius: 0.28571429rem; border-bottom-left-radius: 0.28571429rem; } .ui.buttons .button:last-child, .play-button.buttons .button:last-child, .ui.buttons .play-button:last-child, .download-button.buttons .button:last-child, .ui.buttons .download-button:last-child { border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } /* Vertical Style */ .ui.vertical.buttons, .play-button.vertical.buttons, .download-button.vertical.buttons { display: inline-flex; flex-direction: column; } .ui.vertical.buttons .button, .play-button.vertical.buttons .button, .ui.vertical.buttons .play-button, .download-button.vertical.buttons .button, .ui.vertical.buttons .download-button { display: block; float: none; width: 100%; margin: 0px 0px 0px 0px; box-shadow: none; border-radius: 0em; } .ui.vertical.buttons .button:first-child, .play-button.vertical.buttons .button:first-child, .ui.vertical.buttons .play-button:first-child, .download-button.vertical.buttons .button:first-child, .ui.vertical.buttons .download-button:first-child { border-top-left-radius: 0.28571429rem; border-top-right-radius: 0.28571429rem; } .ui.vertical.buttons .button:last-child, .play-button.vertical.buttons .button:last-child, .ui.vertical.buttons .play-button:last-child, .download-button.vertical.buttons .button:last-child, .ui.vertical.buttons .download-button:last-child { margin-bottom: 0px; border-bottom-left-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } .ui.vertical.buttons .button:only-child, .play-button.vertical.buttons .button:only-child, .ui.vertical.buttons .play-button:only-child, .download-button.vertical.buttons .button:only-child, .ui.vertical.buttons .download-button:only-child { border-radius: 0.28571429rem; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Container * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Container *******************************/ /*------------------- Element --------------------*/ /* Minimum Gutter is used to determine the maximum container width for a given device */ /* Devices */ /* Coupling (Add Negative Margin to container size) */ /*------------------- Types --------------------*/ /* Text */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Container *******************************/ /* All Sizes */ .ui.container, .play-button.container, .download-button.container { display: block; max-width: 100% !important; } /* Mobile */ @media only screen and (max-width: 767px) { .ui.container, .play-button.container, .download-button.container { width: auto !important; margin-left: 1em !important; margin-right: 1em !important; } .ui.grid.container, .play-button.grid.container, .download-button.grid.container { width: auto !important; } .ui.relaxed.grid.container, .play-button.relaxed.grid.container, .download-button.relaxed.grid.container { width: auto !important; } .ui.very.relaxed.grid.container, .play-button.very.relaxed.grid.container, .download-button.very.relaxed.grid.container { width: auto !important; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.container, .play-button.container, .download-button.container { width: 723px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container, .play-button.grid.container, .download-button.grid.container { width: calc( 723px + 2rem ) !important; } .ui.relaxed.grid.container, .play-button.relaxed.grid.container, .download-button.relaxed.grid.container { width: calc( 723px + 3rem ) !important; } .ui.very.relaxed.grid.container, .play-button.very.relaxed.grid.container, .download-button.very.relaxed.grid.container { width: calc( 723px + 5rem ) !important; } } /* Small Monitor */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .ui.container, .play-button.container, .download-button.container { width: 933px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container, .play-button.grid.container, .download-button.grid.container { width: calc( 933px + 2rem ) !important; } .ui.relaxed.grid.container, .play-button.relaxed.grid.container, .download-button.relaxed.grid.container { width: calc( 933px + 3rem ) !important; } .ui.very.relaxed.grid.container, .play-button.very.relaxed.grid.container, .download-button.very.relaxed.grid.container { width: calc( 933px + 5rem ) !important; } } /* Large Monitor */ @media only screen and (min-width: 1200px) { .ui.container, .play-button.container, .download-button.container { width: 1127px; margin-left: auto !important; margin-right: auto !important; } .ui.grid.container, .play-button.grid.container, .download-button.grid.container { width: calc( 1127px + 2rem ) !important; } .ui.relaxed.grid.container, .play-button.relaxed.grid.container, .download-button.relaxed.grid.container { width: calc( 1127px + 3rem ) !important; } .ui.very.relaxed.grid.container, .play-button.very.relaxed.grid.container, .download-button.very.relaxed.grid.container { width: calc( 1127px + 5rem ) !important; } } /******************************* Types *******************************/ /* Text Container */ .ui.text.container, .play-button.text.container, .download-button.text.container { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; max-width: 700px !important; line-height: 1.5; } .ui.text.container, .play-button.text.container, .download-button.text.container { font-size: 1.14285714rem; } /* Fluid */ .ui.fluid.container, .play-button.fluid.container, .download-button.fluid.container { width: 100%; } /******************************* Variations *******************************/ .ui[class*="left aligned"].container, .play-button[class*="left aligned"].container, .download-button[class*="left aligned"].container { text-align: left; } .ui[class*="center aligned"].container, .play-button[class*="center aligned"].container, .download-button[class*="center aligned"].container { text-align: center; } .ui[class*="right aligned"].container, .play-button[class*="right aligned"].container, .download-button[class*="right aligned"].container { text-align: right; } .ui.justified.container, .play-button.justified.container, .download-button.justified.container { text-align: justify; hyphens: auto; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Divider * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Divider *******************************/ /*------------------- Element --------------------*/ /* Text */ /*------------------- Coupling --------------------*/ /* Icon */ /******************************* Variations *******************************/ /* Horizontal / Vertical */ /* Inverted */ /* Section */ /* Sizes */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Divider *******************************/ .ui.divider, .play-button.divider, .download-button.divider { margin: 1rem 0rem; line-height: 1; height: 0em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(0, 0, 0, 0.85); user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*-------------- Basic ---------------*/ .ui.divider:not(.vertical):not(.horizontal), .play-button.divider:not(.vertical):not(.horizontal), .download-button.divider:not(.vertical):not(.horizontal) { border-top: 1px solid rgba(34, 36, 38, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /*-------------- Coupling ---------------*/ /* Allow divider between each column row */ .ui.grid > .column + .divider, .ui.grid > .row > .column + .divider, .play-button.grid > .column + .divider, .play-button.grid > .row > .column + .divider, .download-button.grid > .column + .divider, .download-button.grid > .row > .column + .divider { left: auto; } /*-------------- Horizontal ---------------*/ .ui.horizontal.divider, .play-button.horizontal.divider, .download-button.horizontal.divider { display: table; white-space: nowrap; height: auto; margin: ''; line-height: 1; text-align: center; } .ui.horizontal.divider:before, .ui.horizontal.divider:after, .play-button.horizontal.divider:before, .play-button.horizontal.divider:after, .download-button.horizontal.divider:before, .download-button.horizontal.divider:after { content: ''; display: table-cell; position: relative; top: 50%; width: 50%; background-repeat: no-repeat; } .ui.horizontal.divider:before, .play-button.horizontal.divider:before, .download-button.horizontal.divider:before { background-position: right 1em top 50%; } .ui.horizontal.divider:after, .play-button.horizontal.divider:after, .download-button.horizontal.divider:after { background-position: left 1em top 50%; } /*-------------- Vertical ---------------*/ .ui.vertical.divider, .play-button.vertical.divider, .download-button.vertical.divider { position: absolute; z-index: 2; top: 50%; left: 50%; margin: 0rem; padding: 0em; width: auto; height: 50%; line-height: 0em; text-align: center; transform: translateX(-50%); } .ui.vertical.divider:before, .ui.vertical.divider:after, .play-button.vertical.divider:before, .play-button.vertical.divider:after, .download-button.vertical.divider:before, .download-button.vertical.divider:after { position: absolute; left: 50%; content: ''; z-index: 3; border-left: 1px solid rgba(34, 36, 38, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.1); width: 0%; height: calc(100% - 1rem ); } .ui.vertical.divider:before, .play-button.vertical.divider:before, .download-button.vertical.divider:before { top: -100%; } .ui.vertical.divider:after, .play-button.vertical.divider:after, .download-button.vertical.divider:after { top: auto; bottom: 0px; } /* Inside grid */ @media only screen and (max-width: 767px) { .ui.stackable.grid .ui.vertical.divider, .ui.grid .stackable.row .ui.vertical.divider, .play-button.stackable.grid .play-button.vertical.divider, .play-button.grid .stackable.row .play-button.vertical.divider, .download-button.stackable.grid .download-button.vertical.divider, .download-button.grid .stackable.row .download-button.vertical.divider { display: table; white-space: nowrap; height: auto; margin: ''; overflow: hidden; line-height: 1; text-align: center; position: static; top: 0; left: 0; transform: none; } .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before, .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after, .play-button.stackable.grid .play-button.vertical.divider:before, .play-button.grid .stackable.row .play-button.vertical.divider:before, .play-button.stackable.grid .play-button.vertical.divider:after, .play-button.grid .stackable.row .play-button.vertical.divider:after, .download-button.stackable.grid .download-button.vertical.divider:before, .download-button.grid .stackable.row .download-button.vertical.divider:before, .download-button.stackable.grid .download-button.vertical.divider:after, .download-button.grid .stackable.row .download-button.vertical.divider:after { position: static; left: 0; border-left: none; border-right: none; content: ''; display: table-cell; position: relative; top: 50%; width: 50%; background-repeat: no-repeat; } .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before, .play-button.stackable.grid .play-button.vertical.divider:before, .play-button.grid .stackable.row .play-button.vertical.divider:before, .download-button.stackable.grid .download-button.vertical.divider:before, .download-button.grid .stackable.row .download-button.vertical.divider:before { background-position: right 1em top 50%; } .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after, .play-button.stackable.grid .play-button.vertical.divider:after, .play-button.grid .stackable.row .play-button.vertical.divider:after, .download-button.stackable.grid .download-button.vertical.divider:after, .download-button.grid .stackable.row .download-button.vertical.divider:after { background-position: left 1em top 50%; } } /*-------------- Icon ---------------*/ .ui.divider > .icon, .play-button.divider > .icon, .download-button.divider > .icon { margin: 0rem; font-size: 1rem; height: 1em; vertical-align: middle; } /******************************* Variations *******************************/ /*-------------- Hidden ---------------*/ .ui.hidden.divider, .play-button.hidden.divider, .download-button.hidden.divider { border-color: transparent !important; } .ui.hidden.divider:before, .ui.hidden.divider:after, .play-button.hidden.divider:before, .play-button.hidden.divider:after, .download-button.hidden.divider:before, .download-button.hidden.divider:after { display: none; } /*-------------- Inverted ---------------*/ .ui.divider.inverted, .ui.vertical.inverted.divider, .ui.horizontal.inverted.divider, .play-button.divider.inverted, .play-button.vertical.inverted.divider, .play-button.horizontal.inverted.divider, .download-button.divider.inverted, .download-button.vertical.inverted.divider, .download-button.horizontal.inverted.divider { color: #FFFFFF; } .ui.divider.inverted, .ui.divider.inverted:after, .ui.divider.inverted:before, .play-button.divider.inverted, .play-button.divider.inverted:after, .play-button.divider.inverted:before, .download-button.divider.inverted, .download-button.divider.inverted:after, .download-button.divider.inverted:before { border-top-color: rgba(34, 36, 38, 0.15) !important; border-left-color: rgba(34, 36, 38, 0.15) !important; border-bottom-color: rgba(255, 255, 255, 0.15) !important; border-right-color: rgba(255, 255, 255, 0.15) !important; } /*-------------- Fitted ---------------*/ .ui.fitted.divider, .play-button.fitted.divider, .download-button.fitted.divider { margin: 0em; } /*-------------- Clearing ---------------*/ .ui.clearing.divider, .play-button.clearing.divider, .download-button.clearing.divider { clear: both; } /*-------------- Section ---------------*/ .ui.section.divider, .play-button.section.divider, .download-button.section.divider { margin-top: 2rem; margin-bottom: 2rem; } /*-------------- Sizes ---------------*/ .ui.divider, .play-button.divider, .download-button.divider { font-size: 1rem; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Flag * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Flag *******************************/ /*------------------- Element --------------------*/ /* Packaged Theme */ /*------------------- Flag Variables --------------------*/ /* Site Theme */ /*------------------- Flag Variables --------------------*/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Flag *******************************/ i.flag:not(.icon) { display: inline-block; width: 16px; height: 11px; line-height: 11px; vertical-align: baseline; margin: 0em 0.5em 0em 0em; text-decoration: inherit; speak: none; font-smoothing: antialiased; backface-visibility: hidden; } /* Sprite */ i.flag:not(.icon):before { display: inline-block; content: ''; background: url("../../themes/default/assets/images/flags.png") no-repeat -108px -1976px; width: 16px; height: 11px; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Header * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Header *******************************/ /*------------------- Element --------------------*/ /* Sub Heading */ /* Sub Header */ /* Icon */ /* Image */ /* Label */ /* Content */ /* Paragraph after Header */ /*------------------- Variations --------------------*/ /* Sizing */ /* Sub Header */ /* Icon Header */ /* No Line Height Offset */ /* Divided */ /* Block */ /* Attached */ /* Inverted */ /* Floated */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Header *******************************/ /* Standard */ .ui.header, .play-button.header, .download-button.header { border: none; margin: calc(2rem - 0.14285714em ) 0em 1rem; padding: 0em 0em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.28571429em; text-transform: none; color: rgba(0, 0, 0, 0.87); } .ui.header:first-child, .play-button.header:first-child, .download-button.header:first-child { margin-top: -0.14285714em; } .ui.header:last-child, .play-button.header:last-child, .download-button.header:last-child { margin-bottom: 0em; } /*-------------- Sub Header ---------------*/ .ui.header .sub.header, .play-button.header .sub.header, .download-button.header .sub.header { display: block; font-weight: normal; padding: 0em; margin: 0em; font-size: 1rem; line-height: 1.2em; color: rgba(0, 0, 0, 0.6); } /*-------------- Icon ---------------*/ .ui.header > .icon, .play-button.header > .icon, .download-button.header > .icon { display: table-cell; opacity: 1; font-size: 1.5em; padding-top: 0em; vertical-align: middle; } /* With Text Node */ .ui.header .icon:only-child, .play-button.header .icon:only-child, .download-button.header .icon:only-child { display: inline-block; padding: 0em; margin-right: 0.75rem; } /*------------------- Image --------------------*/ .ui.header > .image:not(.icon), .ui.header > img, .play-button.header > .image:not(.icon), .play-button.header > img, .download-button.header > .image:not(.icon), .download-button.header > img { display: inline-block; margin-top: 0.14285714em; width: 2.5em; height: auto; vertical-align: middle; } .ui.header > .image:not(.icon):only-child, .ui.header > img:only-child, .play-button.header > .image:not(.icon):only-child, .play-button.header > img:only-child, .download-button.header > .image:not(.icon):only-child, .download-button.header > img:only-child { margin-right: 0.75rem; } /*-------------- Content ---------------*/ .ui.header .content, .play-button.header .content, .download-button.header .content { display: inline-block; vertical-align: top; } /* After Image */ .ui.header > img + .content, .ui.header > .image + .content, .play-button.header > img + .content, .play-button.header > .image + .content, .download-button.header > img + .content, .download-button.header > .image + .content { padding-left: 0.75rem; vertical-align: middle; } /* After Icon */ .ui.header > .icon + .content, .play-button.header > .icon + .content, .download-button.header > .icon + .content { padding-left: 0.75rem; display: table-cell; vertical-align: middle; } /*-------------- Loose Coupling ---------------*/ .ui.header .ui.label, .play-button.header .play-button.label, .download-button.header .download-button.label { font-size: ''; margin-left: 0.5rem; vertical-align: middle; } /* Positioning */ .ui.header + p, .play-button.header + p, .download-button.header + p { margin-top: 0em; } /******************************* Types *******************************/ /*-------------- Page ---------------*/ h1.ui.header, h1.play-button.header, h1.download-button.header { font-size: 2rem; } h2.ui.header, h2.play-button.header, h2.download-button.header { font-size: 1.71428571rem; } h3.ui.header, h3.play-button.header, h3.download-button.header { font-size: 1.28571429rem; } h4.ui.header, h4.play-button.header, h4.download-button.header { font-size: 1.07142857rem; } h5.ui.header, h5.play-button.header, h5.download-button.header { font-size: 1rem; } /* Sub Header */ h1.ui.header .sub.header, h1.play-button.header .sub.header, h1.download-button.header .sub.header { font-size: 1.14285714rem; } h2.ui.header .sub.header, h2.play-button.header .sub.header, h2.download-button.header .sub.header { font-size: 1.14285714rem; } h3.ui.header .sub.header, h3.play-button.header .sub.header, h3.download-button.header .sub.header { font-size: 1rem; } h4.ui.header .sub.header, h4.play-button.header .sub.header, h4.download-button.header .sub.header { font-size: 1rem; } h5.ui.header .sub.header, h5.play-button.header .sub.header, h5.download-button.header .sub.header { font-size: 0.92857143rem; } /*-------------- Content Heading ---------------*/ .ui.huge.header, .play-button.huge.header, .download-button.huge.header { min-height: 1em; font-size: 2em; } .ui.large.header, .play-button.large.header, .download-button.large.header { font-size: 1.71428571em; } .ui.medium.header, .play-button.medium.header, .download-button.medium.header { font-size: 1.28571429em; } .ui.small.header, .play-button.small.header, .download-button.small.header { font-size: 1.07142857em; } .ui.tiny.header, .play-button.tiny.header, .download-button.tiny.header { font-size: 1em; } /* Sub Header */ .ui.huge.header .sub.header, .play-button.huge.header .sub.header, .download-button.huge.header .sub.header { font-size: 1.14285714rem; } .ui.large.header .sub.header, .play-button.large.header .sub.header, .download-button.large.header .sub.header { font-size: 1.14285714rem; } .ui.header .sub.header, .play-button.header .sub.header, .download-button.header .sub.header { font-size: 1rem; } .ui.small.header .sub.header, .play-button.small.header .sub.header, .download-button.small.header .sub.header { font-size: 1rem; } .ui.tiny.header .sub.header, .play-button.tiny.header .sub.header, .download-button.tiny.header .sub.header { font-size: 0.92857143rem; } /*-------------- Sub Heading ---------------*/ .ui.sub.header, .play-button.sub.header, .download-button.sub.header { padding: 0em; margin-bottom: 0.14285714rem; font-weight: bold; font-size: 0.85714286em; text-transform: uppercase; color: ''; } .ui.small.sub.header, .play-button.small.sub.header, .download-button.small.sub.header { font-size: 0.78571429em; } .ui.sub.header, .play-button.sub.header, .download-button.sub.header { font-size: 0.85714286em; } .ui.large.sub.header, .play-button.large.sub.header, .download-button.large.sub.header { font-size: 0.92857143em; } .ui.huge.sub.header, .play-button.huge.sub.header, .download-button.huge.sub.header { font-size: 1em; } /*------------------- Icon --------------------*/ .ui.icon.header, .play-button.icon.header, .download-button.icon.header { display: inline-block; text-align: center; margin: 2rem 0em 1rem; } .ui.icon.header:after, .play-button.icon.header:after, .download-button.icon.header:after { content: ''; display: block; height: 0px; clear: both; visibility: hidden; } .ui.icon.header:first-child, .play-button.icon.header:first-child, .download-button.icon.header:first-child { margin-top: 0em; } .ui.icon.header .icon, .play-button.icon.header .icon, .download-button.icon.header .icon { float: none; display: block; width: auto; height: auto; line-height: 1; padding: 0em; font-size: 3em; margin: 0em auto 0.5rem; opacity: 1; } .ui.icon.header .content, .play-button.icon.header .content, .download-button.icon.header .content { display: block; padding: 0em; } .ui.icon.header .circular.icon, .play-button.icon.header .circular.icon, .download-button.icon.header .circular.icon { font-size: 2em; } .ui.icon.header .square.icon, .play-button.icon.header .square.icon, .download-button.icon.header .square.icon { font-size: 2em; } .ui.block.icon.header .icon, .play-button.block.icon.header .icon, .download-button.block.icon.header .icon { margin-bottom: 0em; } .ui.icon.header.aligned, .play-button.icon.header.aligned, .download-button.icon.header.aligned { margin-left: auto; margin-right: auto; display: block; } /******************************* States *******************************/ .ui.disabled.header, .play-button.disabled.header, .download-button.disabled.header { opacity: 0.45; } /******************************* Variations *******************************/ /*------------------- Inverted --------------------*/ .ui.inverted.header, .play-button.inverted.header, .download-button.inverted.header { color: #FFFFFF; } .ui.inverted.header .sub.header, .play-button.inverted.header .sub.header, .download-button.inverted.header .sub.header { color: rgba(255, 255, 255, 0.8); } .ui.inverted.attached.header, .play-button.inverted.attached.header, .download-button.inverted.attached.header { background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); box-shadow: none; border-color: transparent; } .ui.inverted.block.header, .play-button.inverted.block.header, .download-button.inverted.block.header { background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); box-shadow: none; } .ui.inverted.block.header, .play-button.inverted.block.header, .download-button.inverted.block.header { border-bottom: none; } /*------------------- Colors --------------------*/ /*--- Red ---*/ .ui.red.header, .play-button.red.header, .download-button.red.header { color: #E81123 !important; } a.ui.red.header:hover, a.play-button.red.header:hover, a.download-button.red.header:hover { color: #da0617 !important; } .ui.red.dividing.header, .play-button.red.dividing.header, .download-button.red.dividing.header { border-bottom: 2px solid #E81123; } /* Inverted */ .ui.inverted.red.header, .play-button.inverted.red.header, .download-button.inverted.red.header { color: #FF695E !important; } a.ui.inverted.red.header:hover, a.play-button.inverted.red.header:hover, a.download-button.inverted.red.header:hover { color: #ff5144 !important; } /*--- Orange ---*/ .ui.orange.header, .play-button.orange.header, .download-button.orange.header { color: #DF4600 !important; } a.ui.orange.header:hover, a.play-button.orange.header:hover, a.download-button.orange.header:hover { color: #c63e00 !important; } .ui.orange.dividing.header, .play-button.orange.dividing.header, .download-button.orange.dividing.header { border-bottom: 2px solid #DF4600; } /* Inverted */ .ui.inverted.orange.header, .play-button.inverted.orange.header, .download-button.inverted.orange.header { color: #FF851B !important; } a.ui.inverted.orange.header:hover, a.play-button.inverted.orange.header:hover, a.download-button.inverted.orange.header:hover { color: #ff7701 !important; } /*--- Olive ---*/ .ui.olive.header, .play-button.olive.header, .download-button.olive.header { color: #B5CC18 !important; } a.ui.olive.header:hover, a.play-button.olive.header:hover, a.download-button.olive.header:hover { color: #a7bd0d !important; } .ui.olive.dividing.header, .play-button.olive.dividing.header, .download-button.olive.dividing.header { border-bottom: 2px solid #B5CC18; } /* Inverted */ .ui.inverted.olive.header, .play-button.inverted.olive.header, .download-button.inverted.olive.header { color: #D9E778 !important; } a.ui.inverted.olive.header:hover, a.play-button.inverted.olive.header:hover, a.download-button.inverted.olive.header:hover { color: #d8ea5c !important; } /*--- Yellow ---*/ .ui.yellow.header, .play-button.yellow.header, .download-button.yellow.header, .ui.download-button.header { color: #F4C918 !important; } a.ui.yellow.header:hover, a.play-button.yellow.header:hover, a.download-button.yellow.header:hover, a.ui.download-button.header:hover { color: #f3c300 !important; } .ui.yellow.dividing.header, .play-button.yellow.dividing.header, .download-button.yellow.dividing.header, .ui.download-button.dividing.header { border-bottom: 2px solid #F4C918; } /* Inverted */ .ui.inverted.yellow.header, .play-button.inverted.yellow.header, .download-button.inverted.yellow.header, .ui.inverted.download-button.header { color: #FFE21F !important; } a.ui.inverted.yellow.header:hover, a.play-button.inverted.yellow.header:hover, a.download-button.inverted.yellow.header:hover, a.ui.inverted.download-button.header:hover { color: #ffdf05 !important; } /*--- Green ---*/ .ui.green.header, .ui.ui.button.getting-started-btn.header, .play-button.green.header, .download-button.green.header, .ui.play-button.button.getting-started-btn.header, .ui.ui.play-button.getting-started-btn.header, .ui.download-button.button.getting-started-btn.header, .ui.ui.download-button.getting-started-btn.header { color: #3FC863 !important; } a.ui.green.header:hover, a.ui.ui.button.getting-started-btn.header:hover, a.play-button.green.header:hover, a.download-button.green.header:hover, a.ui.play-button.button.getting-started-btn.header:hover, a.ui.ui.play-button.getting-started-btn.header:hover, a.ui.download-button.button.getting-started-btn.header:hover, a.ui.ui.download-button.getting-started-btn.header:hover { color: #2ebf54 !important; } .ui.green.dividing.header, .ui.ui.button.getting-started-btn.dividing.header, .play-button.green.dividing.header, .download-button.green.dividing.header, .ui.play-button.button.getting-started-btn.dividing.header, .ui.ui.play-button.getting-started-btn.dividing.header, .ui.download-button.button.getting-started-btn.dividing.header, .ui.ui.download-button.getting-started-btn.dividing.header { border-bottom: 2px solid #3FC863; } /* Inverted */ .ui.inverted.green.header, .ui.inverted.ui.button.getting-started-btn.header, .play-button.inverted.green.header, .download-button.inverted.green.header, .ui.inverted.play-button.button.getting-started-btn.header, .ui.inverted.ui.play-button.getting-started-btn.header, .ui.inverted.download-button.button.getting-started-btn.header, .ui.inverted.ui.download-button.getting-started-btn.header { color: #2ECC40 !important; } a.ui.inverted.green.header:hover, a.ui.inverted.ui.button.getting-started-btn.header:hover, a.play-button.inverted.green.header:hover, a.download-button.inverted.green.header:hover, a.ui.inverted.play-button.button.getting-started-btn.header:hover, a.ui.inverted.ui.play-button.getting-started-btn.header:hover, a.ui.inverted.download-button.button.getting-started-btn.header:hover, a.ui.inverted.ui.download-button.getting-started-btn.header:hover { color: #22be34 !important; } /*--- Teal ---*/ .ui.teal.header, .play-button.teal.header, .download-button.teal.header { color: #008272 !important; } a.ui.teal.header:hover, a.play-button.teal.header:hover, a.download-button.teal.header:hover { color: #00695c !important; } .ui.teal.dividing.header, .play-button.teal.dividing.header, .download-button.teal.dividing.header { border-bottom: 2px solid #008272; } /* Inverted */ .ui.inverted.teal.header, .play-button.inverted.teal.header, .download-button.inverted.teal.header { color: #6DFFFF !important; } a.ui.inverted.teal.header:hover, a.play-button.inverted.teal.header:hover, a.download-button.inverted.teal.header:hover { color: #54ffff !important; } /*--- Blue ---*/ .ui.blue.header, .play-button.blue.header, .ui.play-button.header, .download-button.blue.header { color: #54C9C9 !important; } a.ui.blue.header:hover, a.play-button.blue.header:hover, a.ui.play-button.header:hover, a.download-button.blue.header:hover { color: #3ac9c9 !important; } .ui.blue.dividing.header, .play-button.blue.dividing.header, .ui.play-button.dividing.header, .download-button.blue.dividing.header { border-bottom: 2px solid #54C9C9; } /* Inverted */ .ui.inverted.blue.header, .play-button.inverted.blue.header, .ui.inverted.play-button.header, .download-button.inverted.blue.header { color: #54C8FF !important; } a.ui.inverted.blue.header:hover, a.play-button.inverted.blue.header:hover, a.ui.inverted.play-button.header:hover, a.download-button.inverted.blue.header:hover { color: #3ac0ff !important; } /*--- Violet ---*/ .ui.violet.header, .play-button.violet.header, .download-button.violet.header { color: #C90072 !important; } a.ui.violet.header:hover, a.play-button.violet.header:hover, a.download-button.violet.header:hover { color: #b00064 !important; } .ui.violet.dividing.header, .play-button.violet.dividing.header, .download-button.violet.dividing.header { border-bottom: 2px solid #C90072; } /* Inverted */ .ui.inverted.violet.header, .play-button.inverted.violet.header, .download-button.inverted.violet.header { color: #A291FB !important; } a.ui.inverted.violet.header:hover, a.play-button.inverted.violet.header:hover, a.download-button.inverted.violet.header:hover { color: #8a73ff !important; } /*--- Purple ---*/ .ui.purple.header, .play-button.purple.header, .download-button.purple.header { color: #8169E6 !important; } a.ui.purple.header:hover, a.play-button.purple.header:hover, a.download-button.purple.header:hover { color: #6a4cea !important; } .ui.purple.dividing.header, .play-button.purple.dividing.header, .download-button.purple.dividing.header { border-bottom: 2px solid #8169E6; } /* Inverted */ .ui.inverted.purple.header, .play-button.inverted.purple.header, .download-button.inverted.purple.header { color: #DC73FF !important; } a.ui.inverted.purple.header:hover, a.play-button.inverted.purple.header:hover, a.download-button.inverted.purple.header:hover { color: #d65aff !important; } /*--- Pink ---*/ .ui.pink.header, .play-button.pink.header, .download-button.pink.header { color: #E2008C !important; } a.ui.pink.header:hover, a.play-button.pink.header:hover, a.download-button.pink.header:hover { color: #c9007c !important; } .ui.pink.dividing.header, .play-button.pink.dividing.header, .download-button.pink.dividing.header { border-bottom: 2px solid #E2008C; } /* Inverted */ .ui.inverted.pink.header, .play-button.inverted.pink.header, .download-button.inverted.pink.header { color: #FF8EDF !important; } a.ui.inverted.pink.header:hover, a.play-button.inverted.pink.header:hover, a.download-button.inverted.pink.header:hover { color: #ff74d8 !important; } /*--- Brown ---*/ .ui.brown.header, .play-button.brown.header, .download-button.brown.header { color: #6B5B4C !important; } a.ui.brown.header:hover, a.play-button.brown.header:hover, a.download-button.brown.header:hover { color: #5d4e40 !important; } .ui.brown.dividing.header, .play-button.brown.dividing.header, .download-button.brown.dividing.header { border-bottom: 2px solid #6B5B4C; } /* Inverted */ .ui.inverted.brown.header, .play-button.inverted.brown.header, .download-button.inverted.brown.header { color: #D67C1C !important; } a.ui.inverted.brown.header:hover, a.play-button.inverted.brown.header:hover, a.download-button.inverted.brown.header:hover { color: #c86f11 !important; } /*--- Grey ---*/ .ui.grey.header, .ui.ui.button.editortools-btn.header, .play-button.grey.header, .download-button.grey.header, .ui.play-button.button.editortools-btn.header, .ui.ui.play-button.editortools-btn.header, .ui.download-button.button.editortools-btn.header, .ui.ui.download-button.editortools-btn.header { color: #42495F !important; } a.ui.grey.header:hover, a.ui.ui.button.editortools-btn.header:hover, a.play-button.grey.header:hover, a.download-button.grey.header:hover, a.ui.play-button.button.editortools-btn.header:hover, a.ui.ui.play-button.editortools-btn.header:hover, a.ui.download-button.button.editortools-btn.header:hover, a.ui.ui.download-button.editortools-btn.header:hover { color: #4c556e !important; } .ui.grey.dividing.header, .ui.ui.button.editortools-btn.dividing.header, .play-button.grey.dividing.header, .download-button.grey.dividing.header, .ui.play-button.button.editortools-btn.dividing.header, .ui.ui.play-button.editortools-btn.dividing.header, .ui.download-button.button.editortools-btn.dividing.header, .ui.ui.download-button.editortools-btn.dividing.header { border-bottom: 2px solid #42495F; } /* Inverted */ .ui.inverted.grey.header, .ui.inverted.ui.button.editortools-btn.header, .play-button.inverted.grey.header, .download-button.inverted.grey.header, .ui.inverted.play-button.button.editortools-btn.header, .ui.inverted.ui.play-button.editortools-btn.header, .ui.inverted.download-button.button.editortools-btn.header, .ui.inverted.ui.download-button.editortools-btn.header { color: #DCDDDE !important; } a.ui.inverted.grey.header:hover, a.ui.inverted.ui.button.editortools-btn.header:hover, a.play-button.inverted.grey.header:hover, a.download-button.inverted.grey.header:hover, a.ui.inverted.play-button.button.editortools-btn.header:hover, a.ui.inverted.ui.play-button.editortools-btn.header:hover, a.ui.inverted.download-button.button.editortools-btn.header:hover, a.ui.inverted.ui.download-button.editortools-btn.header:hover { color: #cfd0d2 !important; } /*------------------- Aligned --------------------*/ .ui.left.aligned.header, .play-button.left.aligned.header, .download-button.left.aligned.header { text-align: left; } .ui.right.aligned.header, .play-button.right.aligned.header, .download-button.right.aligned.header { text-align: right; } .ui.centered.header, .ui.center.aligned.header, .play-button.centered.header, .play-button.center.aligned.header, .download-button.centered.header, .download-button.center.aligned.header { text-align: center; } .ui.justified.header, .play-button.justified.header, .download-button.justified.header { text-align: justify; } .ui.justified.header:after, .play-button.justified.header:after, .download-button.justified.header:after { display: inline-block; content: ''; width: 100%; } /*------------------- Floated --------------------*/ .ui.floated.header, .ui[class*="left floated"].header, .play-button.floated.header, .play-button[class*="left floated"].header, .download-button.floated.header, .download-button[class*="left floated"].header { float: left; margin-top: 0em; margin-right: 0.5em; } .ui[class*="right floated"].header, .play-button[class*="right floated"].header, .download-button[class*="right floated"].header { float: right; margin-top: 0em; margin-left: 0.5em; } /*------------------- Fitted --------------------*/ .ui.fitted.header, .play-button.fitted.header, .download-button.fitted.header { padding: 0em; } /*------------------- Dividing --------------------*/ .ui.dividing.header, .play-button.dividing.header, .download-button.dividing.header { padding-bottom: 0.21428571rem; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.dividing.header .sub.header, .play-button.dividing.header .sub.header, .download-button.dividing.header .sub.header { padding-bottom: 0.21428571rem; } .ui.dividing.header .icon, .play-button.dividing.header .icon, .download-button.dividing.header .icon { margin-bottom: 0em; } .ui.inverted.dividing.header, .play-button.inverted.dividing.header, .download-button.inverted.dividing.header { border-bottom-color: rgba(255, 255, 255, 0.1); } /*------------------- Block --------------------*/ .ui.block.header, .play-button.block.header, .download-button.block.header { background: #F3F4F5; padding: 0.78571429rem 1rem; box-shadow: none; border: 1px solid #D4D4D5; border-radius: 0.28571429rem; } .ui.tiny.block.header, .play-button.tiny.block.header, .download-button.tiny.block.header { font-size: 0.85714286rem; } .ui.small.block.header, .play-button.small.block.header, .download-button.small.block.header { font-size: 0.92857143rem; } .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .play-button.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .download-button.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1rem; } .ui.large.block.header, .play-button.large.block.header, .download-button.large.block.header { font-size: 1.14285714rem; } .ui.huge.block.header, .play-button.huge.block.header, .download-button.huge.block.header { font-size: 1.42857143rem; } /*------------------- Attached --------------------*/ .ui.attached.header, .play-button.attached.header, .download-button.attached.header { background: #FFFFFF; padding: 0.78571429rem 1rem; margin-left: -1px; margin-right: -1px; box-shadow: none; border: 1px solid #D4D4D5; } .ui.attached.block.header, .play-button.attached.block.header, .download-button.attached.block.header { background: #F3F4F5; } .ui.attached:not(.top):not(.bottom).header, .play-button.attached:not(.top):not(.bottom).header, .download-button.attached:not(.top):not(.bottom).header { margin-top: 0em; margin-bottom: 0em; border-top: none; border-radius: 0em; } .ui.top.attached.header, .play-button.top.attached.header, .download-button.top.attached.header { margin-bottom: 0em; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.bottom.attached.header, .play-button.bottom.attached.header, .download-button.bottom.attached.header { margin-top: 0em; border-top: none; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Attached Sizes */ .ui.tiny.attached.header, .play-button.tiny.attached.header, .download-button.tiny.attached.header { font-size: 0.85714286em; } .ui.small.attached.header, .play-button.small.attached.header, .download-button.small.attached.header { font-size: 0.92857143em; } .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .play-button.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .download-button.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1em; } .ui.large.attached.header, .play-button.large.attached.header, .download-button.large.attached.header { font-size: 1.14285714em; } .ui.huge.attached.header, .play-button.huge.attached.header, .download-button.huge.attached.header { font-size: 1.42857143em; } /*------------------- Sizing --------------------*/ .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .play-button.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .download-button.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1.28571429em; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Icon * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Icon *******************************/ /*------------------- Icon Variables --------------------*/ /* Variations */ /* Packaged Theme */ /******************************* Icon *******************************/ /*------------------- Icon Variables --------------------*/ /* Variations */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Icon *******************************/ @font-face { font-family: 'Icons'; src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } i.icon { display: inline-block; opacity: 1; margin: 0em 0.25rem 0em 0em; width: 1.18em; height: 1em; font-family: 'Icons'; font-style: normal; font-weight: normal; text-decoration: inherit; text-align: center; speak: none; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; backface-visibility: hidden; } i.icon:before { background: none !important; } /******************************* Types *******************************/ /*-------------- Loading ---------------*/ i.icon.loading { height: 1em; line-height: 1; animation: icon-loading 2s linear infinite; } @keyframes icon-loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /******************************* States *******************************/ i.icon.hover { opacity: 1 !important; } i.icon.active { opacity: 1 !important; } i.emphasized.icon { opacity: 1 !important; } i.disabled.icon { opacity: 0.45 !important; } /******************************* Variations *******************************/ /*------------------- Fitted --------------------*/ i.fitted.icon { width: auto; margin: 0em; } /*------------------- Link --------------------*/ i.link.icon, i.link.icons { cursor: pointer; opacity: 0.8; transition: opacity 0.1s ease; } i.link.icon:hover, i.link.icons:hover { opacity: 1 !important; } /*------------------- Circular --------------------*/ i.circular.icon { border-radius: 500em !important; line-height: 1 !important; padding: 0.5em 0.5em !important; box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; width: 2em !important; height: 2em !important; } i.circular.inverted.icon { border: none; box-shadow: none; } /*------------------- Flipped --------------------*/ i.flipped.icon, i.horizontally.flipped.icon { transform: scale(-1, 1); } i.vertically.flipped.icon { transform: scale(1, -1); } /*------------------- Rotated --------------------*/ i.rotated.icon, i.right.rotated.icon, i.clockwise.rotated.icon { transform: rotate(90deg); } i.left.rotated.icon, i.counterclockwise.rotated.icon { transform: rotate(-90deg); } /*------------------- Bordered --------------------*/ i.bordered.icon { line-height: 1; vertical-align: baseline; width: 2em; height: 2em; padding: 0.5em 0.41em !important; box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; } i.bordered.inverted.icon { border: none; box-shadow: none; } /*------------------- Inverted --------------------*/ /* Inverted Shapes */ i.inverted.bordered.icon, i.inverted.circular.icon { background-color: #1B1C1D !important; color: #FFFFFF !important; } i.inverted.icon { color: #FFFFFF; } /*------------------- Colors --------------------*/ /* Red */ i.red.icon { color: #E81123 !important; } i.inverted.red.icon { color: #FF695E !important; } i.inverted.bordered.red.icon, i.inverted.circular.red.icon { background-color: #E81123 !important; color: #FFFFFF !important; } /* Orange */ i.orange.icon { color: #DF4600 !important; } i.inverted.orange.icon { color: #FF851B !important; } i.inverted.bordered.orange.icon, i.inverted.circular.orange.icon { background-color: #DF4600 !important; color: #FFFFFF !important; } /* Yellow */ i.yellow.icon, i.download-button.icon { color: #F4C918 !important; } i.inverted.yellow.icon, i.inverted.download-button.icon { color: #FFE21F !important; } i.inverted.bordered.yellow.icon, i.inverted.circular.yellow.icon, i.inverted.bordered.download-button.icon, i.inverted.circular.download-button.icon { background-color: #F4C918 !important; color: #FFFFFF !important; } /* Olive */ i.olive.icon { color: #B5CC18 !important; } i.inverted.olive.icon { color: #D9E778 !important; } i.inverted.bordered.olive.icon, i.inverted.circular.olive.icon { background-color: #B5CC18 !important; color: #FFFFFF !important; } /* Green */ i.green.icon, i.ui.button.getting-started-btn.icon, i.play-button.button.getting-started-btn.icon, i.ui.play-button.getting-started-btn.icon, i.download-button.button.getting-started-btn.icon, i.ui.download-button.getting-started-btn.icon { color: #3FC863 !important; } i.inverted.green.icon, i.inverted.ui.button.getting-started-btn.icon, i.inverted.play-button.button.getting-started-btn.icon, i.inverted.ui.play-button.getting-started-btn.icon, i.inverted.download-button.button.getting-started-btn.icon, i.inverted.ui.download-button.getting-started-btn.icon { color: #2ECC40 !important; } i.inverted.bordered.green.icon, i.inverted.circular.green.icon, i.inverted.bordered.ui.button.getting-started-btn.icon, i.inverted.circular.ui.button.getting-started-btn.icon, i.inverted.bordered.play-button.button.getting-started-btn.icon, i.inverted.circular.play-button.button.getting-started-btn.icon, i.inverted.bordered.ui.play-button.getting-started-btn.icon, i.inverted.circular.ui.play-button.getting-started-btn.icon, i.inverted.bordered.download-button.button.getting-started-btn.icon, i.inverted.circular.download-button.button.getting-started-btn.icon, i.inverted.bordered.ui.download-button.getting-started-btn.icon, i.inverted.circular.ui.download-button.getting-started-btn.icon { background-color: #3FC863 !important; color: #FFFFFF !important; } /* Teal */ i.teal.icon { color: #008272 !important; } i.inverted.teal.icon { color: #6DFFFF !important; } i.inverted.bordered.teal.icon, i.inverted.circular.teal.icon { background-color: #008272 !important; color: #FFFFFF !important; } /* Blue */ i.blue.icon, i.play-button.icon { color: #54C9C9 !important; } i.inverted.blue.icon, i.inverted.play-button.icon { color: #54C8FF !important; } i.inverted.bordered.blue.icon, i.inverted.circular.blue.icon, i.inverted.bordered.play-button.icon, i.inverted.circular.play-button.icon { background-color: #54C9C9 !important; color: #FFFFFF !important; } /* Violet */ i.violet.icon { color: #C90072 !important; } i.inverted.violet.icon { color: #A291FB !important; } i.inverted.bordered.violet.icon, i.inverted.circular.violet.icon { background-color: #C90072 !important; color: #FFFFFF !important; } /* Purple */ i.purple.icon { color: #8169E6 !important; } i.inverted.purple.icon { color: #DC73FF !important; } i.inverted.bordered.purple.icon, i.inverted.circular.purple.icon { background-color: #8169E6 !important; color: #FFFFFF !important; } /* Pink */ i.pink.icon { color: #E2008C !important; } i.inverted.pink.icon { color: #FF8EDF !important; } i.inverted.bordered.pink.icon, i.inverted.circular.pink.icon { background-color: #E2008C !important; color: #FFFFFF !important; } /* Brown */ i.brown.icon { color: #6B5B4C !important; } i.inverted.brown.icon { color: #D67C1C !important; } i.inverted.bordered.brown.icon, i.inverted.circular.brown.icon { background-color: #6B5B4C !important; color: #FFFFFF !important; } /* Grey */ i.grey.icon, i.ui.button.editortools-btn.icon, i.play-button.button.editortools-btn.icon, i.ui.play-button.editortools-btn.icon, i.download-button.button.editortools-btn.icon, i.ui.download-button.editortools-btn.icon { color: #42495F !important; } i.inverted.grey.icon, i.inverted.ui.button.editortools-btn.icon, i.inverted.play-button.button.editortools-btn.icon, i.inverted.ui.play-button.editortools-btn.icon, i.inverted.download-button.button.editortools-btn.icon, i.inverted.ui.download-button.editortools-btn.icon { color: #DCDDDE !important; } i.inverted.bordered.grey.icon, i.inverted.circular.grey.icon, i.inverted.bordered.ui.button.editortools-btn.icon, i.inverted.circular.ui.button.editortools-btn.icon, i.inverted.bordered.play-button.button.editortools-btn.icon, i.inverted.circular.play-button.button.editortools-btn.icon, i.inverted.bordered.ui.play-button.editortools-btn.icon, i.inverted.circular.ui.play-button.editortools-btn.icon, i.inverted.bordered.download-button.button.editortools-btn.icon, i.inverted.circular.download-button.button.editortools-btn.icon, i.inverted.bordered.ui.download-button.editortools-btn.icon, i.inverted.circular.ui.download-button.editortools-btn.icon { background-color: #42495F !important; color: #FFFFFF !important; } /* Black */ i.black.icon { color: #1B1C1D !important; } i.inverted.black.icon { color: #545454 !important; } i.inverted.bordered.black.icon, i.inverted.circular.black.icon { background-color: #1B1C1D !important; color: #FFFFFF !important; } /*------------------- Sizes --------------------*/ i.mini.icon, i.mini.icons { line-height: 1; font-size: 0.4em; } i.tiny.icon, i.tiny.icons { line-height: 1; font-size: 0.5em; } i.small.icon, i.small.icons { line-height: 1; font-size: 0.75em; } i.icon, i.icons { font-size: 1em; } i.large.icon, i.large.icons { line-height: 1; vertical-align: middle; font-size: 1.5em; } i.big.icon, i.big.icons { line-height: 1; vertical-align: middle; font-size: 2em; } i.huge.icon, i.huge.icons { line-height: 1; vertical-align: middle; font-size: 4em; } i.massive.icon, i.massive.icons { line-height: 1; vertical-align: middle; font-size: 8em; } /******************************* Groups *******************************/ i.icons { display: inline-block; position: relative; line-height: 1; } i.icons .icon { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); margin: 0em; margin: 0; } i.icons .icon:first-child { position: static; width: auto; height: auto; vertical-align: top; transform: none; margin-right: 0.25rem; } /* Corner Icon */ i.icons .corner.icon { top: auto; left: auto; right: 0; bottom: 0; transform: none; font-size: 0.45em; text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF; } i.icons .top.right.corner.icon { top: 0; left: auto; right: 0; bottom: auto; } i.icons .top.left.corner.icon { top: 0; left: 0; right: auto; bottom: auto; } i.icons .bottom.left.corner.icon { top: auto; left: 0; right: auto; bottom: 0; } i.icons .bottom.right.corner.icon { top: auto; left: auto; right: 0; bottom: 0; } i.icons .inverted.corner.icon { text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D; } /* * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /******************************* Semantic-UI integration of font-awesome : ///class names are separated i.icon.circle => i.icon.circle i.icon.circle-o => i.icon.circle.outline //abbreviation are replaced by full letters: i.icon.ellipsis-h => i.icon.ellipsis.horizontal i.icon.ellipsis-v => i.icon.ellipsis.vertical .alpha => .i.icon.alphabet .asc => .i.icon.ascending .desc => .i.icon.descending .alt =>.alternate ASCII order is conserved for easier maintenance. Icons that only have one style 'outline', 'square' etc do not require this class for instance `lemon icon` not `lemon outline icon` since there is only one lemon *******************************/ /******************************* Icons *******************************/ /* Web Content */ i.icon.search:before { content: "\f002"; } i.icon.mail.outline:before { content: "\f003"; } i.icon.signal:before { content: "\f012"; } i.icon.setting:before { content: "\f013"; } i.icon.home:before { content: "\f015"; } i.icon.inbox:before { content: "\f01c"; } i.icon.browser:before { content: "\f022"; } i.icon.tag:before { content: "\f02b"; } i.icon.tags:before { content: "\f02c"; } i.icon.image:before { content: "\f03e"; } i.icon.calendar:before { content: "\f073"; } i.icon.comment:before { content: "\f075"; } i.icon.shop:before { content: "\f07a"; } i.icon.comments:before { content: "\f086"; } i.icon.external:before { content: "\f08e"; } i.icon.privacy:before { content: "\f084"; } i.icon.settings:before { content: "\f085"; } i.icon.comments:before { content: "\f086"; } i.icon.external:before { content: "\f08e"; } i.icon.trophy:before { content: "\f091"; } i.icon.payment:before { content: "\f09d"; } i.icon.feed:before { content: "\f09e"; } i.icon.alarm.outline:before { content: "\f0a2"; } i.icon.tasks:before { content: "\f0ae"; } i.icon.cloud:before { content: "\f0c2"; } i.icon.lab:before { content: "\f0c3"; } i.icon.mail:before { content: "\f0e0"; } i.icon.dashboard:before { content: "\f0e4"; } i.icon.comment.outline:before { content: "\f0e5"; } i.icon.comments.outline:before { content: "\f0e6"; } i.icon.sitemap:before { content: "\f0e8"; } i.icon.idea:before { content: "\f0eb"; } i.icon.alarm:before { content: "\f0f3"; } i.icon.terminal:before { content: "\f120"; } i.icon.code:before { content: "\f121"; } i.icon.protect:before { content: "\f132"; } i.icon.calendar.outline:before { content: "\f133"; } i.icon.ticket:before { content: "\f145"; } i.icon.external.square:before { content: "\f14c"; } i.icon.bug:before { content: "\f188"; } i.icon.mail.square:before { content: "\f199"; } i.icon.history:before { content: "\f1da"; } i.icon.options:before { content: "\f1de"; } i.icon.text.telephone:before { content: "\f1e4"; } i.icon.find:before { content: "\f1e5"; } i.icon.alarm.mute:before { content: "\f1f6"; } i.icon.alarm.mute.outline:before { content: "\f1f7"; } i.icon.copyright:before { content: "\f1f9"; } i.icon.at:before { content: "\f1fa"; } i.icon.eyedropper:before { content: "\f1fb"; } i.icon.paint.brush:before { content: "\f1fc"; } i.icon.heartbeat:before { content: "\f21e"; } i.icon.mouse.pointer:before { content: "\f245"; } i.icon.hourglass.empty:before { content: "\f250"; } i.icon.hourglass.start:before { content: "\f251"; } i.icon.hourglass.half:before { content: "\f252"; } i.icon.hourglass.end:before { content: "\f253"; } i.icon.hourglass.full:before { content: "\f254"; } i.icon.hand.pointer:before { content: "\f25a"; } i.icon.trademark:before { content: "\f25c"; } i.icon.registered:before { content: "\f25d"; } i.icon.creative.commons:before { content: "\f25e"; } i.icon.add.to.calendar:before { content: "\f271"; } i.icon.remove.from.calendar:before { content: "\f272"; } i.icon.delete.calendar:before { content: "\f273"; } i.icon.checked.calendar:before { content: "\f274"; } i.icon.industry:before { content: "\f275"; } i.icon.shopping.bag:before { content: "\f290"; } i.icon.shopping.basket:before { content: "\f291"; } i.icon.hashtag:before { content: "\f292"; } i.icon.percent:before { content: "\f295"; } i.icon.handshake:before { content: "\f2b5"; } i.icon.open.envelope:before { content: "\f2b6"; } i.icon.open.envelope.outline:before { content: "\f2b7"; } i.icon.address.book:before { content: "\f2b9"; } i.icon.address.book.outline:before { content: "\f2ba"; } i.icon.address.card:before { content: "\f2bb"; } i.icon.address.card.outline:before { content: "\f2bc"; } i.icon.id.badge:before { content: "\f2c1"; } i.icon.id.card:before { content: "\f2c2"; } i.icon.id.card.outline:before { content: "\f2c3"; } i.icon.podcast:before { content: "\f2ce"; } i.icon.window.maximize:before { content: "\f2d0"; } i.icon.window.minimize:before { content: "\f2d1"; } i.icon.window.restore:before { content: "\f2d2"; } i.icon.window.close:before { content: "\f2d3"; } i.icon.window.close.outline:before { content: "\f2d4"; } /* User Actions */ i.icon.wait:before { content: "\f017"; } i.icon.download:before { content: "\f019"; } i.icon.repeat:before { content: "\f01e"; } i.icon.refresh:before { content: "\f021"; } i.icon.lock:before { content: "\f023"; } i.icon.bookmark:before { content: "\f02e"; } i.icon.print:before { content: "\f02f"; } i.icon.write:before { content: "\f040"; } i.icon.adjust:before { content: "\f042"; } i.icon.theme:before { content: "\f043"; } i.icon.edit:before { content: "\f044"; } i.icon.external.share:before { content: "\f045"; } i.icon.ban:before { content: "\f05e"; } i.icon.mail.forward:before { content: "\f064"; } i.icon.share:before { content: "\f064"; } i.icon.expand:before { content: "\f065"; } i.icon.compress:before { content: "\f066"; } i.icon.unhide:before { content: "\f06e"; } i.icon.hide:before { content: "\f070"; } i.icon.random:before { content: "\f074"; } i.icon.retweet:before { content: "\f079"; } i.icon.sign.out:before { content: "\f08b"; } i.icon.pin:before { content: "\f08d"; } i.icon.sign.in:before { content: "\f090"; } i.icon.upload:before { content: "\f093"; } i.icon.call:before { content: "\f095"; } i.icon.remove.bookmark:before { content: "\f097"; } i.icon.call.square:before { content: "\f098"; } i.icon.unlock:before { content: "\f09c"; } i.icon.configure:before { content: "\f0ad"; } i.icon.filter:before { content: "\f0b0"; } i.icon.wizard:before { content: "\f0d0"; } i.icon.undo:before { content: "\f0e2"; } i.icon.exchange:before { content: "\f0ec"; } i.icon.cloud.download:before { content: "\f0ed"; } i.icon.cloud.upload:before { content: "\f0ee"; } i.icon.reply:before { content: "\f112"; } i.icon.reply.all:before { content: "\f122"; } i.icon.erase:before { content: "\f12d"; } i.icon.unlock.alternate:before { content: "\f13e"; } i.icon.write.square:before { content: "\f14b"; } i.icon.share.square:before { content: "\f14d"; } i.icon.archive:before { content: "\f187"; } i.icon.translate:before { content: "\f1ab"; } i.icon.recycle:before { content: "\f1b8"; } i.icon.send:before { content: "\f1d8"; } i.icon.send.outline:before { content: "\f1d9"; } i.icon.share.alternate:before { content: "\f1e0"; } i.icon.share.alternate.square:before { content: "\f1e1"; } i.icon.add.to.cart:before { content: "\f217"; } i.icon.in.cart:before { content: "\f218"; } i.icon.add.user:before { content: "\f234"; } i.icon.remove.user:before { content: "\f235"; } i.icon.object.group:before { content: "\f247"; } i.icon.object.ungroup:before { content: "\f248"; } i.icon.clone:before { content: "\f24d"; } i.icon.talk:before { content: "\f27a"; } i.icon.talk.outline:before { content: "\f27b"; } /* Messages */ i.icon.help.circle:before { content: "\f059"; } i.icon.info.circle:before { content: "\f05a"; } i.icon.warning.circle:before { content: "\f06a"; } i.icon.warning.sign:before { content: "\f071"; } i.icon.announcement:before { content: "\f0a1"; } i.icon.help:before { content: "\f128"; } i.icon.info:before { content: "\f129"; } i.icon.warning:before { content: "\f12a"; } i.icon.birthday:before { content: "\f1fd"; } i.icon.help.circle.outline:before { content: "\f29c"; } /* Users */ i.icon.user:before { content: "\f007"; } i.icon.users:before { content: "\f0c0"; } i.icon.doctor:before { content: "\f0f0"; } i.icon.handicap:before { content: "\f193"; } i.icon.student:before { content: "\f19d"; } i.icon.child:before { content: "\f1ae"; } i.icon.spy:before { content: "\f21b"; } i.icon.user.circle:before { content: "\f2bd"; } i.icon.user.circle.outline:before { content: "\f2be"; } i.icon.user.outline:before { content: "\f2c0"; } /* Gender & Sexuality */ i.icon.female:before { content: "\f182"; } i.icon.male:before { content: "\f183"; } i.icon.woman:before { content: "\f221"; } i.icon.man:before { content: "\f222"; } i.icon.non.binary.transgender:before { content: "\f223"; } i.icon.intergender:before { content: "\f224"; } i.icon.transgender:before { content: "\f225"; } i.icon.lesbian:before { content: "\f226"; } i.icon.gay:before { content: "\f227"; } i.icon.heterosexual:before { content: "\f228"; } i.icon.other.gender:before { content: "\f229"; } i.icon.other.gender.vertical:before { content: "\f22a"; } i.icon.other.gender.horizontal:before { content: "\f22b"; } i.icon.neuter:before { content: "\f22c"; } i.icon.genderless:before { content: "\f22d"; } /* Accessibility */ i.icon.universal.access:before { content: "\f29a"; } i.icon.wheelchair:before { content: "\f29b"; } i.icon.blind:before { content: "\f29d"; } i.icon.audio.description:before { content: "\f29e"; } i.icon.volume.control.phone:before { content: "\f2a0"; } i.icon.braille:before { content: "\f2a1"; } i.icon.asl:before { content: "\f2a3"; } i.icon.assistive.listening.systems:before { content: "\f2a2"; } i.icon.deafness:before { content: "\f2a4"; } i.icon.sign.language:before { content: "\f2a7"; } i.icon.low.vision:before { content: "\f2a8"; } /* View Adjustment */ i.icon.block.layout:before { content: "\f009"; } i.icon.grid.layout:before { content: "\f00a"; } i.icon.list.layout:before { content: "\f00b"; } i.icon.zoom:before { content: "\f00e"; } i.icon.zoom.out:before { content: "\f010"; } i.icon.resize.vertical:before { content: "\f07d"; } i.icon.resize.horizontal:before { content: "\f07e"; } i.icon.maximize:before { content: "\f0b2"; } i.icon.crop:before { content: "\f125"; } /* Literal Objects */ i.icon.cocktail:before { content: "\f000"; } i.icon.road:before { content: "\f018"; } i.icon.flag:before { content: "\f024"; } i.icon.book:before { content: "\f02d"; } i.icon.gift:before { content: "\f06b"; } i.icon.leaf:before { content: "\f06c"; } i.icon.fire:before { content: "\f06d"; } i.icon.plane:before { content: "\f072"; } i.icon.magnet:before { content: "\f076"; } i.icon.lemon:before { content: "\f094"; } i.icon.world:before { content: "\f0ac"; } i.icon.travel:before { content: "\f0b1"; } i.icon.shipping:before { content: "\f0d1"; } i.icon.money:before { content: "\f0d6"; } i.icon.legal:before { content: "\f0e3"; } i.icon.lightning:before { content: "\f0e7"; } i.icon.umbrella:before { content: "\f0e9"; } i.icon.treatment:before { content: "\f0f1"; } i.icon.suitcase:before { content: "\f0f2"; } i.icon.bar:before { content: "\f0fc"; } i.icon.flag.outline:before { content: "\f11d"; } i.icon.flag.checkered:before { content: "\f11e"; } i.icon.puzzle:before { content: "\f12e"; } i.icon.fire.extinguisher:before { content: "\f134"; } i.icon.rocket:before { content: "\f135"; } i.icon.anchor:before { content: "\f13d"; } i.icon.bullseye:before { content: "\f140"; } i.icon.sun:before { content: "\f185"; } i.icon.moon:before { content: "\f186"; } i.icon.fax:before { content: "\f1ac"; } i.icon.life.ring:before { content: "\f1cd"; } i.icon.bomb:before { content: "\f1e2"; } i.icon.soccer:before { content: "\f1e3"; } i.icon.calculator:before { content: "\f1ec"; } i.icon.diamond:before { content: "\f219"; } i.icon.sticky.note:before { content: "\f249"; } i.icon.sticky.note.outline:before { content: "\f24a"; } i.icon.law:before { content: "\f24e"; } i.icon.hand.peace:before { content: "\f25b"; } i.icon.hand.rock:before { content: "\f255"; } i.icon.hand.paper:before { content: "\f256"; } i.icon.hand.scissors:before { content: "\f257"; } i.icon.hand.lizard:before { content: "\f258"; } i.icon.hand.spock:before { content: "\f259"; } i.icon.tv:before { content: "\f26c"; } i.icon.thermometer.full:before { content: "\f2c7"; } i.icon.thermometer.three.quarters:before { content: "\f2c8"; } i.icon.thermometer.half:before { content: "\f2c9"; } i.icon.thermometer.quarter:before { content: "\f2ca"; } i.icon.thermometer.empty:before { content: "\f2cb"; } i.icon.shower:before { content: "\f2cc"; } i.icon.bathtub:before { content: "\f2cd"; } i.icon.snowflake:before { content: "\f2dc"; } /* Shapes */ i.icon.crosshairs:before { content: "\f05b"; } i.icon.asterisk:before { content: "\f069"; } i.icon.square.outline:before { content: "\f096"; } i.icon.certificate:before { content: "\f0a3"; } i.icon.square:before { content: "\f0c8"; } i.icon.quote.left:before { content: "\f10d"; } i.icon.quote.right:before { content: "\f10e"; } i.icon.spinner:before { content: "\f110"; } i.icon.circle:before { content: "\f111"; } i.icon.ellipsis.horizontal:before { content: "\f141"; } i.icon.ellipsis.vertical:before { content: "\f142"; } i.icon.cube:before { content: "\f1b2"; } i.icon.cubes:before { content: "\f1b3"; } i.icon.circle.notched:before { content: "\f1ce"; } i.icon.circle.thin:before { content: "\f1db"; } /* Item Selection */ i.icon.checkmark:before { content: "\f00c"; } i.icon.remove:before { content: "\f00d"; } i.icon.checkmark.box:before { content: "\f046"; } i.icon.move:before { content: "\f047"; } i.icon.add.circle:before { content: "\f055"; } i.icon.minus.circle:before { content: "\f056"; } i.icon.remove.circle:before { content: "\f057"; } i.icon.check.circle:before { content: "\f058"; } i.icon.remove.circle.outline:before { content: "\f05c"; } i.icon.check.circle.outline:before { content: "\f05d"; } i.icon.plus:before { content: "\f067"; } i.icon.minus:before { content: "\f068"; } i.icon.add.square:before { content: "\f0fe"; } i.icon.radio:before { content: "\f10c"; } i.icon.minus.square:before { content: "\f146"; } i.icon.minus.square.outline:before { content: "\f147"; } i.icon.check.square:before { content: "\f14a"; } i.icon.selected.radio:before { content: "\f192"; } i.icon.plus.square.outline:before { content: "\f196"; } i.icon.toggle.off:before { content: "\f204"; } i.icon.toggle.on:before { content: "\f205"; } /* Media */ i.icon.film:before { content: "\f008"; } i.icon.sound:before { content: "\f025"; } i.icon.photo:before { content: "\f030"; } i.icon.bar.chart:before { content: "\f080"; } i.icon.camera.retro:before { content: "\f083"; } i.icon.newspaper:before { content: "\f1ea"; } i.icon.area.chart:before { content: "\f1fe"; } i.icon.pie.chart:before { content: "\f200"; } i.icon.line.chart:before { content: "\f201"; } /* Pointers */ i.icon.arrow.circle.outline.down:before { content: "\f01a"; } i.icon.arrow.circle.outline.up:before { content: "\f01b"; } i.icon.chevron.left:before { content: "\f053"; } i.icon.chevron.right:before { content: "\f054"; } i.icon.arrow.left:before { content: "\f060"; } i.icon.arrow.right:before { content: "\f061"; } i.icon.arrow.up:before { content: "\f062"; } i.icon.arrow.down:before { content: "\f063"; } i.icon.chevron.up:before { content: "\f077"; } i.icon.chevron.down:before { content: "\f078"; } i.icon.pointing.right:before { content: "\f0a4"; } i.icon.pointing.left:before { content: "\f0a5"; } i.icon.pointing.up:before { content: "\f0a6"; } i.icon.pointing.down:before { content: "\f0a7"; } i.icon.arrow.circle.left:before { content: "\f0a8"; } i.icon.arrow.circle.right:before { content: "\f0a9"; } i.icon.arrow.circle.up:before { content: "\f0aa"; } i.icon.arrow.circle.down:before { content: "\f0ab"; } i.icon.caret.down:before { content: "\f0d7"; } i.icon.caret.up:before { content: "\f0d8"; } i.icon.caret.left:before { content: "\f0d9"; } i.icon.caret.right:before { content: "\f0da"; } i.icon.angle.double.left:before { content: "\f100"; } i.icon.angle.double.right:before { content: "\f101"; } i.icon.angle.double.up:before { content: "\f102"; } i.icon.angle.double.down:before { content: "\f103"; } i.icon.angle.left:before { content: "\f104"; } i.icon.angle.right:before { content: "\f105"; } i.icon.angle.up:before { content: "\f106"; } i.icon.angle.down:before { content: "\f107"; } i.icon.chevron.circle.left:before { content: "\f137"; } i.icon.chevron.circle.right:before { content: "\f138"; } i.icon.chevron.circle.up:before { content: "\f139"; } i.icon.chevron.circle.down:before { content: "\f13a"; } i.icon.toggle.down:before { content: "\f150"; } i.icon.toggle.up:before { content: "\f151"; } i.icon.toggle.right:before { content: "\f152"; } i.icon.long.arrow.down:before { content: "\f175"; } i.icon.long.arrow.up:before { content: "\f176"; } i.icon.long.arrow.left:before { content: "\f177"; } i.icon.long.arrow.right:before { content: "\f178"; } i.icon.arrow.circle.outline.right:before { content: "\f18e"; } i.icon.arrow.circle.outline.left:before { content: "\f190"; } i.icon.toggle.left:before { content: "\f191"; } /* Mobile */ i.icon.tablet:before { content: "\f10a"; } i.icon.mobile:before { content: "\f10b"; } i.icon.battery.full:before { content: "\f240"; } i.icon.battery.high:before { content: "\f241"; } i.icon.battery.medium:before { content: "\f242"; } i.icon.battery.low:before { content: "\f243"; } i.icon.battery.empty:before { content: "\f244"; } /* Computer */ i.icon.power:before { content: "\f011"; } i.icon.trash.outline:before { content: "\f014"; } i.icon.disk.outline:before { content: "\f0a0"; } i.icon.desktop:before { content: "\f108"; } i.icon.laptop:before { content: "\f109"; } i.icon.game:before { content: "\f11b"; } i.icon.keyboard:before { content: "\f11c"; } i.icon.plug:before { content: "\f1e6"; } /* File System */ i.icon.trash:before { content: "\f1f8"; } i.icon.file.outline:before { content: "\f016"; } i.icon.folder:before { content: "\f07b"; } i.icon.folder.open:before { content: "\f07c"; } i.icon.file.text.outline:before { content: "\f0f6"; } i.icon.folder.outline:before { content: "\f114"; } i.icon.folder.open.outline:before { content: "\f115"; } i.icon.level.up:before { content: "\f148"; } i.icon.level.down:before { content: "\f149"; } i.icon.file:before { content: "\f15b"; } i.icon.file.text:before { content: "\f15c"; } i.icon.file.pdf.outline:before { content: "\f1c1"; } i.icon.file.word.outline:before { content: "\f1c2"; } i.icon.file.excel.outline:before { content: "\f1c3"; } i.icon.file.powerpoint.outline:before { content: "\f1c4"; } i.icon.file.image.outline:before { content: "\f1c5"; } i.icon.file.archive.outline:before { content: "\f1c6"; } i.icon.file.audio.outline:before { content: "\f1c7"; } i.icon.file.video.outline:before { content: "\f1c8"; } i.icon.file.code.outline:before { content: "\f1c9"; } /* Technologies */ i.icon.qrcode:before { content: "\f029"; } i.icon.barcode:before { content: "\f02a"; } i.icon.rss:before { content: "\f09e"; } i.icon.fork:before { content: "\f126"; } i.icon.html5:before { content: "\f13b"; } i.icon.css3:before { content: "\f13c"; } i.icon.rss.square:before { content: "\f143"; } i.icon.openid:before { content: "\f19b"; } i.icon.database:before { content: "\f1c0"; } i.icon.wifi:before { content: "\f1eb"; } i.icon.server:before { content: "\f233"; } i.icon.usb:before { content: "\f287"; } i.icon.bluetooth:before { content: "\f293"; } i.icon.bluetooth.alternative:before { content: "\f294"; } i.icon.microchip:before { content: "\f2db"; } /* Rating */ i.icon.heart:before { content: "\f004"; } i.icon.star:before { content: "\f005"; } i.icon.empty.star:before { content: "\f006"; } i.icon.thumbs.outline.up:before { content: "\f087"; } i.icon.thumbs.outline.down:before { content: "\f088"; } i.icon.star.half:before { content: "\f089"; } i.icon.empty.heart:before { content: "\f08a"; } i.icon.smile:before { content: "\f118"; } i.icon.frown:before { content: "\f119"; } i.icon.meh:before { content: "\f11a"; } i.icon.star.half.empty:before { content: "\f123"; } i.icon.thumbs.up:before { content: "\f164"; } i.icon.thumbs.down:before { content: "\f165"; } /* Audio */ i.icon.music:before { content: "\f001"; } i.icon.video.play.outline:before { content: "\f01d"; } i.icon.volume.off:before { content: "\f026"; } i.icon.volume.down:before { content: "\f027"; } i.icon.volume.up:before { content: "\f028"; } i.icon.record:before { content: "\f03d"; } i.icon.step.backward:before { content: "\f048"; } i.icon.fast.backward:before { content: "\f049"; } i.icon.backward:before { content: "\f04a"; } i.icon.play:before { content: "\f04b"; } i.icon.pause:before { content: "\f04c"; } i.icon.stop:before { content: "\f04d"; } i.icon.forward:before { content: "\f04e"; } i.icon.fast.forward:before { content: "\f050"; } i.icon.step.forward:before { content: "\f051"; } i.icon.eject:before { content: "\f052"; } i.icon.unmute:before { content: "\f130"; } i.icon.mute:before { content: "\f131"; } i.icon.video.play:before { content: "\f144"; } i.icon.closed.captioning:before { content: "\f20a"; } i.icon.pause.circle:before { content: "\f28b"; } i.icon.pause.circle.outline:before { content: "\f28c"; } i.icon.stop.circle:before { content: "\f28d"; } i.icon.stop.circle.outline:before { content: "\f28e"; } /* Map, Locations, & Transportation */ i.icon.marker:before { content: "\f041"; } i.icon.coffee:before { content: "\f0f4"; } i.icon.food:before { content: "\f0f5"; } i.icon.building.outline:before { content: "\f0f7"; } i.icon.hospital:before { content: "\f0f8"; } i.icon.emergency:before { content: "\f0f9"; } i.icon.first.aid:before { content: "\f0fa"; } i.icon.military:before { content: "\f0fb"; } i.icon.h:before { content: "\f0fd"; } i.icon.location.arrow:before { content: "\f124"; } i.icon.compass:before { content: "\f14e"; } i.icon.space.shuttle:before { content: "\f197"; } i.icon.university:before { content: "\f19c"; } i.icon.building:before { content: "\f1ad"; } i.icon.paw:before { content: "\f1b0"; } i.icon.spoon:before { content: "\f1b1"; } i.icon.car:before { content: "\f1b9"; } i.icon.taxi:before { content: "\f1ba"; } i.icon.tree:before { content: "\f1bb"; } i.icon.bicycle:before { content: "\f206"; } i.icon.bus:before { content: "\f207"; } i.icon.ship:before { content: "\f21a"; } i.icon.motorcycle:before { content: "\f21c"; } i.icon.street.view:before { content: "\f21d"; } i.icon.hotel:before { content: "\f236"; } i.icon.train:before { content: "\f238"; } i.icon.subway:before { content: "\f239"; } i.icon.map.pin:before { content: "\f276"; } i.icon.map.signs:before { content: "\f277"; } i.icon.map.outline:before { content: "\f278"; } i.icon.map:before { content: "\f279"; } /* Tables */ i.icon.table:before { content: "\f0ce"; } i.icon.columns:before { content: "\f0db"; } i.icon.sort:before { content: "\f0dc"; } i.icon.sort.descending:before { content: "\f0dd"; } i.icon.sort.ascending:before { content: "\f0de"; } i.icon.sort.alphabet.ascending:before { content: "\f15d"; } i.icon.sort.alphabet.descending:before { content: "\f15e"; } i.icon.sort.content.ascending:before { content: "\f160"; } i.icon.sort.content.descending:before { content: "\f161"; } i.icon.sort.numeric.ascending:before { content: "\f162"; } i.icon.sort.numeric.descending:before { content: "\f163"; } /* Text Editor */ i.icon.font:before { content: "\f031"; } i.icon.bold:before { content: "\f032"; } i.icon.italic:before { content: "\f033"; } i.icon.text.height:before { content: "\f034"; } i.icon.text.width:before { content: "\f035"; } i.icon.align.left:before { content: "\f036"; } i.icon.align.center:before { content: "\f037"; } i.icon.align.right:before { content: "\f038"; } i.icon.align.justify:before { content: "\f039"; } i.icon.list:before { content: "\f03a"; } i.icon.outdent:before { content: "\f03b"; } i.icon.indent:before { content: "\f03c"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.cut:before { content: "\f0c4"; } i.icon.copy:before { content: "\f0c5"; } i.icon.attach:before { content: "\f0c6"; } i.icon.save:before { content: "\f0c7"; } i.icon.content:before { content: "\f0c9"; } i.icon.unordered.list:before { content: "\f0ca"; } i.icon.ordered.list:before { content: "\f0cb"; } i.icon.strikethrough:before { content: "\f0cc"; } i.icon.underline:before { content: "\f0cd"; } i.icon.paste:before { content: "\f0ea"; } i.icon.unlinkify:before { content: "\f127"; } i.icon.superscript:before { content: "\f12b"; } i.icon.subscript:before { content: "\f12c"; } i.icon.header:before { content: "\f1dc"; } i.icon.paragraph:before { content: "\f1dd"; } i.icon.text.cursor:before { content: "\f246"; } /* Currency */ i.icon.euro:before { content: "\f153"; } i.icon.pound:before { content: "\f154"; } i.icon.dollar:before { content: "\f155"; } i.icon.rupee:before { content: "\f156"; } i.icon.yen:before { content: "\f157"; } i.icon.ruble:before { content: "\f158"; } i.icon.won:before { content: "\f159"; } i.icon.bitcoin:before { content: "\f15a"; } i.icon.lira:before { content: "\f195"; } i.icon.shekel:before { content: "\f20b"; } /* Payment Options */ i.icon.paypal:before { content: "\f1ed"; } i.icon.google.wallet:before { content: "\f1ee"; } i.icon.visa:before { content: "\f1f0"; } i.icon.mastercard:before { content: "\f1f1"; } i.icon.discover:before { content: "\f1f2"; } i.icon.american.express:before { content: "\f1f3"; } i.icon.paypal.card:before { content: "\f1f4"; } i.icon.stripe:before { content: "\f1f5"; } i.icon.japan.credit.bureau:before { content: "\f24b"; } i.icon.diners.club:before { content: "\f24c"; } i.icon.credit.card.alternative:before { content: "\f283"; } /* Networks and Websites*/ i.icon.twitter.square:before { content: "\f081"; } i.icon.facebook.square:before { content: "\f082"; } i.icon.linkedin.square:before { content: "\f08c"; } i.icon.github.square:before { content: "\f092"; } i.icon.twitter:before { content: "\f099"; } i.icon.facebook.f:before { content: "\f09a"; } i.icon.github:before { content: "\f09b"; } i.icon.pinterest:before { content: "\f0d2"; } i.icon.pinterest.square:before { content: "\f0d3"; } i.icon.google.plus.square:before { content: "\f0d4"; } i.icon.google.plus:before { content: "\f0d5"; } i.icon.linkedin:before { content: "\f0e1"; } i.icon.github.alternate:before { content: "\f113"; } i.icon.maxcdn:before { content: "\f136"; } i.icon.youtube.square:before { content: "\f166"; } i.icon.youtube:before { content: "\f167"; } i.icon.xing:before { content: "\f168"; } i.icon.xing.square:before { content: "\f169"; } i.icon.youtube.play:before { content: "\f16a"; } i.icon.dropbox:before { content: "\f16b"; } i.icon.stack.overflow:before { content: "\f16c"; } i.icon.instagram:before { content: "\f16d"; } i.icon.flickr:before { content: "\f16e"; } i.icon.adn:before { content: "\f170"; } i.icon.bitbucket:before { content: "\f171"; } i.icon.bitbucket.square:before { content: "\f172"; } i.icon.tumblr:before { content: "\f173"; } i.icon.tumblr.square:before { content: "\f174"; } i.icon.apple:before { content: "\f179"; } i.icon.windows:before { content: "\f17a"; } i.icon.android:before { content: "\f17b"; } i.icon.linux:before { content: "\f17c"; } i.icon.dribble:before { content: "\f17d"; } i.icon.skype:before { content: "\f17e"; } i.icon.foursquare:before { content: "\f180"; } i.icon.trello:before { content: "\f181"; } i.icon.gittip:before { content: "\f184"; } i.icon.vk:before { content: "\f189"; } i.icon.weibo:before { content: "\f18a"; } i.icon.renren:before { content: "\f18b"; } i.icon.pagelines:before { content: "\f18c"; } i.icon.stack.exchange:before { content: "\f18d"; } i.icon.vimeo.square:before { content: "\f194"; } i.icon.slack:before { content: "\f198"; } i.icon.wordpress:before { content: "\f19a"; } i.icon.yahoo:before { content: "\f19e"; } i.icon.google:before { content: "\f1a0"; } i.icon.reddit:before { content: "\f1a1"; } i.icon.reddit.square:before { content: "\f1a2"; } i.icon.stumbleupon.circle:before { content: "\f1a3"; } i.icon.stumbleupon:before { content: "\f1a4"; } i.icon.delicious:before { content: "\f1a5"; } i.icon.digg:before { content: "\f1a6"; } i.icon.pied.piper:before { content: "\f1a7"; } i.icon.pied.piper.alternate:before { content: "\f1a8"; } i.icon.drupal:before { content: "\f1a9"; } i.icon.joomla:before { content: "\f1aa"; } i.icon.behance:before { content: "\f1b4"; } i.icon.behance.square:before { content: "\f1b5"; } i.icon.steam:before { content: "\f1b6"; } i.icon.steam.square:before { content: "\f1b7"; } i.icon.spotify:before { content: "\f1bc"; } i.icon.deviantart:before { content: "\f1bd"; } i.icon.soundcloud:before { content: "\f1be"; } i.icon.vine:before { content: "\f1ca"; } i.icon.codepen:before { content: "\f1cb"; } i.icon.jsfiddle:before { content: "\f1cc"; } i.icon.rebel:before { content: "\f1d0"; } i.icon.empire:before { content: "\f1d1"; } i.icon.git.square:before { content: "\f1d2"; } i.icon.git:before { content: "\f1d3"; } i.icon.hacker.news:before { content: "\f1d4"; } i.icon.tencent.weibo:before { content: "\f1d5"; } i.icon.qq:before { content: "\f1d6"; } i.icon.wechat:before { content: "\f1d7"; } i.icon.slideshare:before { content: "\f1e7"; } i.icon.twitch:before { content: "\f1e8"; } i.icon.yelp:before { content: "\f1e9"; } i.icon.lastfm:before { content: "\f202"; } i.icon.lastfm.square:before { content: "\f203"; } i.icon.ioxhost:before { content: "\f208"; } i.icon.angellist:before { content: "\f209"; } i.icon.meanpath:before { content: "\f20c"; } i.icon.buysellads:before { content: "\f20d"; } i.icon.connectdevelop:before { content: "\f20e"; } i.icon.dashcube:before { content: "\f210"; } i.icon.forumbee:before { content: "\f211"; } i.icon.leanpub:before { content: "\f212"; } i.icon.sellsy:before { content: "\f213"; } i.icon.shirtsinbulk:before { content: "\f214"; } i.icon.simplybuilt:before { content: "\f215"; } i.icon.skyatlas:before { content: "\f216"; } i.icon.facebook:before { content: "\f230"; } i.icon.pinterest:before { content: "\f231"; } i.icon.whatsapp:before { content: "\f232"; } i.icon.viacoin:before { content: "\f237"; } i.icon.medium:before { content: "\f23a"; } i.icon.y.combinator:before { content: "\f23b"; } i.icon.optinmonster:before { content: "\f23c"; } i.icon.opencart:before { content: "\f23d"; } i.icon.expeditedssl:before { content: "\f23e"; } i.icon.gg:before { content: "\f260"; } i.icon.gg.circle:before { content: "\f261"; } i.icon.tripadvisor:before { content: "\f262"; } i.icon.odnoklassniki:before { content: "\f263"; } i.icon.odnoklassniki.square:before { content: "\f264"; } i.icon.pocket:before { content: "\f265"; } i.icon.wikipedia:before { content: "\f266"; } i.icon.safari:before { content: "\f267"; } i.icon.chrome:before { content: "\f268"; } i.icon.firefox:before { content: "\f269"; } i.icon.opera:before { content: "\f26a"; } i.icon.internet.explorer:before { content: "\f26b"; } i.icon.contao:before { content: "\f26d"; } i.icon.\35 00px:before { content: "\f26e"; } i.icon.amazon:before { content: "\f270"; } i.icon.houzz:before { content: "\f27c"; } i.icon.vimeo:before { content: "\f27d"; } i.icon.black.tie:before { content: "\f27e"; } i.icon.fonticons:before { content: "\f280"; } i.icon.reddit.alien:before { content: "\f281"; } i.icon.microsoft.edge:before { content: "\f282"; } i.icon.codiepie:before { content: "\f284"; } i.icon.modx:before { content: "\f285"; } i.icon.fort.awesome:before { content: "\f286"; } i.icon.product.hunt:before { content: "\f288"; } i.icon.mixcloud:before { content: "\f289"; } i.icon.scribd:before { content: "\f28a"; } i.icon.gitlab:before { content: "\f296"; } i.icon.wpbeginner:before { content: "\f297"; } i.icon.wpforms:before { content: "\f298"; } i.icon.envira.gallery:before { content: "\f299"; } i.icon.glide:before { content: "\f2a5"; } i.icon.glide.g:before { content: "\f2a6"; } i.icon.viadeo:before { content: "\f2a9"; } i.icon.viadeo.square:before { content: "\f2aa"; } i.icon.snapchat:before { content: "\f2ab"; } i.icon.snapchat.ghost:before { content: "\f2ac"; } i.icon.snapchat.square:before { content: "\f2ad"; } i.icon.pied.piper.hat:before { content: "\f2ae"; } i.icon.first.order:before { content: "\f2b0"; } i.icon.yoast:before { content: "\f2b1"; } i.icon.themeisle:before { content: "\f2b2"; } i.icon.google.plus.circle:before { content: "\f2b3"; } i.icon.font.awesome:before { content: "\f2b4"; } i.icon.linode:before { content: "\f2b8"; } i.icon.quora:before { content: "\f2c4"; } i.icon.free.code.camp:before { content: "\f2c5"; } i.icon.telegram:before { content: "\f2c6"; } i.icon.bandcamp:before { content: "\f2d5"; } i.icon.grav:before { content: "\f2d6"; } i.icon.etsy:before { content: "\f2d7"; } i.icon.imdb:before { content: "\f2d8"; } i.icon.ravelry:before { content: "\f2d9"; } i.icon.eercast:before { content: "\f2da"; } i.icon.superpowers:before { content: "\f2dd"; } i.icon.wpexplorer:before { content: "\f2de"; } i.icon.meetup:before { content: "\f2e0"; } /******************************* Aliases *******************************/ i.icon.like:before { content: "\f004"; } i.icon.favorite:before { content: "\f005"; } i.icon.video:before { content: "\f008"; } i.icon.check:before { content: "\f00c"; } i.icon.close:before { content: "\f00d"; } i.icon.cancel:before { content: "\f00d"; } i.icon.delete:before { content: "\f00d"; } i.icon.x:before { content: "\f00d"; } i.icon.zoom.in:before { content: "\f00e"; } i.icon.magnify:before { content: "\f00e"; } i.icon.shutdown:before { content: "\f011"; } i.icon.clock:before { content: "\f017"; } i.icon.time:before { content: "\f017"; } i.icon.play.circle.outline:before { content: "\f01d"; } i.icon.headphone:before { content: "\f025"; } i.icon.camera:before { content: "\f030"; } i.icon.video.camera:before { content: "\f03d"; } i.icon.picture:before { content: "\f03e"; } i.icon.pencil:before { content: "\f040"; } i.icon.compose:before { content: "\f040"; } i.icon.point:before { content: "\f041"; } i.icon.tint:before { content: "\f043"; } i.icon.signup:before { content: "\f044"; } i.icon.plus.circle:before { content: "\f055"; } i.icon.question.circle:before { content: "\f059"; } i.icon.dont:before { content: "\f05e"; } i.icon.minimize:before { content: "\f066"; } i.icon.add:before { content: "\f067"; } i.icon.exclamation.circle:before { content: "\f06a"; } i.icon.attention:before { content: "\f06a"; } i.icon.eye:before { content: "\f06e"; } i.icon.exclamation.triangle:before { content: "\f071"; } i.icon.shuffle:before { content: "\f074"; } i.icon.chat:before { content: "\f075"; } i.icon.cart:before { content: "\f07a"; } i.icon.shopping.cart:before { content: "\f07a"; } i.icon.bar.graph:before { content: "\f080"; } i.icon.key:before { content: "\f084"; } i.icon.cogs:before { content: "\f085"; } i.icon.discussions:before { content: "\f086"; } i.icon.like.outline:before { content: "\f087"; } i.icon.dislike.outline:before { content: "\f088"; } i.icon.heart.outline:before { content: "\f08a"; } i.icon.log.out:before { content: "\f08b"; } i.icon.thumb.tack:before { content: "\f08d"; } i.icon.winner:before { content: "\f091"; } i.icon.phone:before { content: "\f095"; } i.icon.bookmark.outline:before { content: "\f097"; } i.icon.phone.square:before { content: "\f098"; } i.icon.credit.card:before { content: "\f09d"; } i.icon.hdd.outline:before { content: "\f0a0"; } i.icon.bullhorn:before { content: "\f0a1"; } i.icon.bell.outline:before { content: "\f0a2"; } i.icon.hand.outline.right:before { content: "\f0a4"; } i.icon.hand.outline.left:before { content: "\f0a5"; } i.icon.hand.outline.up:before { content: "\f0a6"; } i.icon.hand.outline.down:before { content: "\f0a7"; } i.icon.globe:before { content: "\f0ac"; } i.icon.wrench:before { content: "\f0ad"; } i.icon.briefcase:before { content: "\f0b1"; } i.icon.group:before { content: "\f0c0"; } i.icon.linkify:before { content: "\f0c1"; } i.icon.chain:before { content: "\f0c1"; } i.icon.flask:before { content: "\f0c3"; } i.icon.sidebar:before { content: "\f0c9"; } i.icon.bars:before { content: "\f0c9"; } i.icon.list.ul:before { content: "\f0ca"; } i.icon.list.ol:before { content: "\f0cb"; } i.icon.numbered.list:before { content: "\f0cb"; } i.icon.magic:before { content: "\f0d0"; } i.icon.truck:before { content: "\f0d1"; } i.icon.currency:before { content: "\f0d6"; } i.icon.triangle.down:before { content: "\f0d7"; } i.icon.dropdown:before { content: "\f0d7"; } i.icon.triangle.up:before { content: "\f0d8"; } i.icon.triangle.left:before { content: "\f0d9"; } i.icon.triangle.right:before { content: "\f0da"; } i.icon.envelope:before { content: "\f0e0"; } i.icon.conversation:before { content: "\f0e6"; } i.icon.rain:before { content: "\f0e9"; } i.icon.clipboard:before { content: "\f0ea"; } i.icon.lightbulb:before { content: "\f0eb"; } i.icon.bell:before { content: "\f0f3"; } i.icon.ambulance:before { content: "\f0f9"; } i.icon.medkit:before { content: "\f0fa"; } i.icon.fighter.jet:before { content: "\f0fb"; } i.icon.beer:before { content: "\f0fc"; } i.icon.plus.square:before { content: "\f0fe"; } i.icon.computer:before { content: "\f108"; } i.icon.circle.outline:before { content: "\f10c"; } i.icon.gamepad:before { content: "\f11b"; } i.icon.star.half.full:before { content: "\f123"; } i.icon.broken.chain:before { content: "\f127"; } i.icon.question:before { content: "\f128"; } i.icon.exclamation:before { content: "\f12a"; } i.icon.eraser:before { content: "\f12d"; } i.icon.microphone:before { content: "\f130"; } i.icon.microphone.slash:before { content: "\f131"; } i.icon.shield:before { content: "\f132"; } i.icon.target:before { content: "\f140"; } i.icon.play.circle:before { content: "\f144"; } i.icon.pencil.square:before { content: "\f14b"; } i.icon.eur:before { content: "\f153"; } i.icon.gbp:before { content: "\f154"; } i.icon.usd:before { content: "\f155"; } i.icon.inr:before { content: "\f156"; } i.icon.cny:before { content: "\f157"; } i.icon.rmb:before { content: "\f157"; } i.icon.jpy:before { content: "\f157"; } i.icon.rouble:before { content: "\f158"; } i.icon.rub:before { content: "\f158"; } i.icon.krw:before { content: "\f159"; } i.icon.btc:before { content: "\f15a"; } i.icon.gratipay:before { content: "\f184"; } i.icon.zip:before { content: "\f187"; } i.icon.dot.circle.outline:before { content: "\f192"; } i.icon.try:before { content: "\f195"; } i.icon.graduation:before { content: "\f19d"; } i.icon.circle.outline:before { content: "\f1db"; } i.icon.sliders:before { content: "\f1de"; } i.icon.weixin:before { content: "\f1d7"; } i.icon.tty:before { content: "\f1e4"; } i.icon.teletype:before { content: "\f1e4"; } i.icon.binoculars:before { content: "\f1e5"; } i.icon.power.cord:before { content: "\f1e6"; } i.icon.wi-fi:before { content: "\f1eb"; } i.icon.visa.card:before { content: "\f1f0"; } i.icon.mastercard.card:before { content: "\f1f1"; } i.icon.discover.card:before { content: "\f1f2"; } i.icon.amex:before { content: "\f1f3"; } i.icon.american.express.card:before { content: "\f1f3"; } i.icon.stripe.card:before { content: "\f1f5"; } i.icon.bell.slash:before { content: "\f1f6"; } i.icon.bell.slash.outline:before { content: "\f1f7"; } i.icon.area.graph:before { content: "\f1fe"; } i.icon.pie.graph:before { content: "\f200"; } i.icon.line.graph:before { content: "\f201"; } i.icon.cc:before { content: "\f20a"; } i.icon.sheqel:before { content: "\f20b"; } i.icon.ils:before { content: "\f20b"; } i.icon.plus.cart:before { content: "\f217"; } i.icon.arrow.down.cart:before { content: "\f218"; } i.icon.detective:before { content: "\f21b"; } i.icon.venus:before { content: "\f221"; } i.icon.mars:before { content: "\f222"; } i.icon.mercury:before { content: "\f223"; } i.icon.intersex:before { content: "\f224"; } i.icon.venus.double:before { content: "\f226"; } i.icon.female.homosexual:before { content: "\f226"; } i.icon.mars.double:before { content: "\f227"; } i.icon.male.homosexual:before { content: "\f227"; } i.icon.venus.mars:before { content: "\f228"; } i.icon.mars.stroke:before { content: "\f229"; } i.icon.mars.alternate:before { content: "\f229"; } i.icon.mars.vertical:before { content: "\f22a"; } i.icon.mars.stroke.vertical:before { content: "\f22a"; } i.icon.mars.horizontal:before { content: "\f22b"; } i.icon.mars.stroke.horizontal:before { content: "\f22b"; } i.icon.asexual:before { content: "\f22d"; } i.icon.facebook.official:before { content: "\f230"; } i.icon.user.plus:before { content: "\f234"; } i.icon.user.times:before { content: "\f235"; } i.icon.user.close:before { content: "\f235"; } i.icon.user.cancel:before { content: "\f235"; } i.icon.user.delete:before { content: "\f235"; } i.icon.user.x:before { content: "\f235"; } i.icon.bed:before { content: "\f236"; } i.icon.yc:before { content: "\f23b"; } i.icon.ycombinator:before { content: "\f23b"; } i.icon.battery.four:before { content: "\f240"; } i.icon.battery.three:before { content: "\f241"; } i.icon.battery.three.quarters:before { content: "\f241"; } i.icon.battery.two:before { content: "\f242"; } i.icon.battery.half:before { content: "\f242"; } i.icon.battery.one:before { content: "\f243"; } i.icon.battery.quarter:before { content: "\f243"; } i.icon.battery.zero:before { content: "\f244"; } i.icon.i.cursor:before { content: "\f246"; } i.icon.jcb:before { content: "\f24b"; } i.icon.japan.credit.bureau.card:before { content: "\f24b"; } i.icon.diners.club.card:before { content: "\f24c"; } i.icon.balance:before { content: "\f24e"; } i.icon.hourglass.outline:before { content: "\f250"; } i.icon.hourglass.zero:before { content: "\f250"; } i.icon.hourglass.one:before { content: "\f251"; } i.icon.hourglass.two:before { content: "\f252"; } i.icon.hourglass.three:before { content: "\f253"; } i.icon.hourglass.four:before { content: "\f254"; } i.icon.grab:before { content: "\f255"; } i.icon.hand.victory:before { content: "\f25b"; } i.icon.tm:before { content: "\f25c"; } i.icon.r.circle:before { content: "\f25d"; } i.icon.television:before { content: "\f26c"; } i.icon.five.hundred.pixels:before { content: "\f26e"; } i.icon.calendar.plus:before { content: "\f271"; } i.icon.calendar.minus:before { content: "\f272"; } i.icon.calendar.times:before { content: "\f273"; } i.icon.calendar.check:before { content: "\f274"; } i.icon.factory:before { content: "\f275"; } i.icon.commenting:before { content: "\f27a"; } i.icon.commenting.outline:before { content: "\f27b"; } i.icon.edge:before { content: "\f282"; } i.icon.ms.edge:before { content: "\f282"; } i.icon.wordpress.beginner:before { content: "\f297"; } i.icon.wordpress.forms:before { content: "\f298"; } i.icon.envira:before { content: "\f299"; } i.icon.question.circle.outline:before { content: "\f29c"; } i.icon.assistive.listening.devices:before { content: "\f2a2"; } i.icon.als:before { content: "\f2a2"; } i.icon.ald:before { content: "\f2a2"; } i.icon.asl.interpreting:before { content: "\f2a3"; } i.icon.deaf:before { content: "\f2a4"; } i.icon.american.sign.language.interpreting:before { content: "\f2a3"; } i.icon.hard.of.hearing:before { content: "\f2a4"; } i.icon.signing:before { content: "\f2a7"; } i.icon.new.pied.piper:before { content: "\f2ae"; } i.icon.theme.isle:before { content: "\f2b2"; } i.icon.google.plus.official:before { content: "\f2b3"; } i.icon.fa:before { content: "\f2b4"; } i.icon.vcard:before { content: "\f2bb"; } i.icon.vcard.outline:before { content: "\f2bc"; } i.icon.drivers.license:before { content: "\f2c2"; } i.icon.drivers.license.outline:before { content: "\f2c3"; } i.icon.thermometer:before { content: "\f2c7"; } i.icon.s15:before { content: "\f2cd"; } i.icon.bath:before { content: "\f2cd"; } i.icon.times.rectangle:before { content: "\f2d3"; } i.icon.times.rectangle.outline:before { content: "\f2d4"; } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Image * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Image *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Avatar */ /*------------------- Variations --------------------*/ /* Spaced */ /* Floated */ /* Size */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Image *******************************/ .ui.image, .play-button.image, .download-button.image { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; background-color: transparent; } img.ui.image, img.play-button.image, img.download-button.image { display: block; } .ui.image svg, .ui.image img, .play-button.image svg, .play-button.image img, .download-button.image svg, .download-button.image img { display: block; max-width: 100%; height: auto; } /******************************* States *******************************/ .ui.hidden.images, .ui.hidden.image, .play-button.hidden.images, .play-button.hidden.image, .download-button.hidden.images, .download-button.hidden.image { display: none; } .ui.hidden.transition.images, .ui.hidden.transition.image, .play-button.hidden.transition.images, .play-button.hidden.transition.image, .download-button.hidden.transition.images, .download-button.hidden.transition.image { display: block; visibility: hidden; } .ui.disabled.images, .ui.disabled.image, .play-button.disabled.images, .play-button.disabled.image, .download-button.disabled.images, .download-button.disabled.image { cursor: default; opacity: 0.45; } /******************************* Variations *******************************/ /*-------------- Inline ---------------*/ .ui.inline.image, .ui.inline.image svg, .ui.inline.image img, .play-button.inline.image, .play-button.inline.image svg, .play-button.inline.image img, .download-button.inline.image, .download-button.inline.image svg, .download-button.inline.image img { display: inline-block; } /*------------------ Vertical Aligned -------------------*/ .ui.top.aligned.images .image, .ui.top.aligned.image, .ui.top.aligned.image svg, .ui.top.aligned.image img, .play-button.top.aligned.images .image, .play-button.top.aligned.image, .play-button.top.aligned.image svg, .play-button.top.aligned.image img, .download-button.top.aligned.images .image, .download-button.top.aligned.image, .download-button.top.aligned.image svg, .download-button.top.aligned.image img { display: inline-block; vertical-align: top; } .ui.middle.aligned.images .image, .ui.middle.aligned.image, .ui.middle.aligned.image svg, .ui.middle.aligned.image img, .play-button.middle.aligned.images .image, .play-button.middle.aligned.image, .play-button.middle.aligned.image svg, .play-button.middle.aligned.image img, .download-button.middle.aligned.images .image, .download-button.middle.aligned.image, .download-button.middle.aligned.image svg, .download-button.middle.aligned.image img { display: inline-block; vertical-align: middle; } .ui.bottom.aligned.images .image, .ui.bottom.aligned.image, .ui.bottom.aligned.image svg, .ui.bottom.aligned.image img, .play-button.bottom.aligned.images .image, .play-button.bottom.aligned.image, .play-button.bottom.aligned.image svg, .play-button.bottom.aligned.image img, .download-button.bottom.aligned.images .image, .download-button.bottom.aligned.image, .download-button.bottom.aligned.image svg, .download-button.bottom.aligned.image img { display: inline-block; vertical-align: bottom; } /*-------------- Rounded ---------------*/ .ui.rounded.images .image, .ui.rounded.image, .ui.rounded.images .image > *, .ui.rounded.image > *, .play-button.rounded.images .image, .play-button.rounded.image, .play-button.rounded.images .image > *, .play-button.rounded.image > *, .download-button.rounded.images .image, .download-button.rounded.image, .download-button.rounded.images .image > *, .download-button.rounded.image > * { border-radius: 0.3125em; } /*-------------- Bordered ---------------*/ .ui.bordered.images .image, .ui.bordered.images img, .ui.bordered.images svg, .ui.bordered.image img, .ui.bordered.image svg, img.ui.bordered.image, .play-button.bordered.images .image, .play-button.bordered.images img, .play-button.bordered.images svg, .play-button.bordered.image img, .play-button.bordered.image svg, img.play-button.bordered.image, .download-button.bordered.images .image, .download-button.bordered.images img, .download-button.bordered.images svg, .download-button.bordered.image img, .download-button.bordered.image svg, img.download-button.bordered.image { border: 1px solid rgba(0, 0, 0, 0.1); } /*-------------- Circular ---------------*/ .ui.circular.images, .ui.circular.image, .play-button.circular.images, .play-button.circular.image, .download-button.circular.images, .download-button.circular.image { overflow: hidden; } .ui.circular.images .image, .ui.circular.image, .ui.circular.images .image > *, .ui.circular.image > *, .play-button.circular.images .image, .play-button.circular.image, .play-button.circular.images .image > *, .play-button.circular.image > *, .download-button.circular.images .image, .download-button.circular.image, .download-button.circular.images .image > *, .download-button.circular.image > * { -webkit-border-radius: 500rem; -moz-border-radius: 500rem; border-radius: 500rem; } /*-------------- Fluid ---------------*/ .ui.fluid.images, .ui.fluid.image, .ui.fluid.images img, .ui.fluid.images svg, .ui.fluid.image svg, .ui.fluid.image img, .play-button.fluid.images, .play-button.fluid.image, .play-button.fluid.images img, .play-button.fluid.images svg, .play-button.fluid.image svg, .play-button.fluid.image img, .download-button.fluid.images, .download-button.fluid.image, .download-button.fluid.images img, .download-button.fluid.images svg, .download-button.fluid.image svg, .download-button.fluid.image img { display: block; width: 100%; height: auto; } /*-------------- Avatar ---------------*/ .ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.images svg, .ui.avatar.image img, .ui.avatar.image svg, .ui.avatar.image, .play-button.avatar.images .image, .play-button.avatar.images img, .play-button.avatar.images svg, .play-button.avatar.image img, .play-button.avatar.image svg, .play-button.avatar.image, .download-button.avatar.images .image, .download-button.avatar.images img, .download-button.avatar.images svg, .download-button.avatar.image img, .download-button.avatar.image svg, .download-button.avatar.image { margin-right: 0.25em; display: inline-block; width: 2em; height: 2em; -webkit-border-radius: 500rem; -moz-border-radius: 500rem; border-radius: 500rem; } /*------------------- Spaced --------------------*/ .ui.spaced.image, .play-button.spaced.image, .download-button.spaced.image { display: inline-block !important; margin-left: 0.5em; margin-right: 0.5em; } .ui[class*="left spaced"].image, .play-button[class*="left spaced"].image, .download-button[class*="left spaced"].image { margin-left: 0.5em; margin-right: 0em; } .ui[class*="right spaced"].image, .play-button[class*="right spaced"].image, .download-button[class*="right spaced"].image { margin-left: 0em; margin-right: 0.5em; } /*------------------- Floated --------------------*/ .ui.floated.image, .ui.floated.images, .play-button.floated.image, .play-button.floated.images, .download-button.floated.image, .download-button.floated.images { float: left; margin-right: 1em; margin-bottom: 1em; } .ui.right.floated.images, .ui.right.floated.image, .play-button.right.floated.images, .play-button.right.floated.image, .download-button.right.floated.images, .download-button.right.floated.image { float: right; margin-right: 0em; margin-bottom: 1em; margin-left: 1em; } .ui.floated.images:last-child, .ui.floated.image:last-child, .play-button.floated.images:last-child, .play-button.floated.image:last-child, .download-button.floated.images:last-child, .download-button.floated.image:last-child { margin-bottom: 0em; } .ui.centered.images, .ui.centered.image, .play-button.centered.images, .play-button.centered.image, .download-button.centered.images, .download-button.centered.image { margin-left: auto; margin-right: auto; } /*-------------- Sizes ---------------*/ .ui.mini.images .image, .ui.mini.images img, .ui.mini.images svg, .ui.mini.image, .play-button.mini.images .image, .play-button.mini.images img, .play-button.mini.images svg, .play-button.mini.image, .download-button.mini.images .image, .download-button.mini.images img, .download-button.mini.images svg, .download-button.mini.image { width: 35px; height: auto; font-size: 0.78571429rem; } .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg, .ui.tiny.image, .play-button.tiny.images .image, .play-button.tiny.images img, .play-button.tiny.images svg, .play-button.tiny.image, .download-button.tiny.images .image, .download-button.tiny.images img, .download-button.tiny.images svg, .download-button.tiny.image { width: 80px; height: auto; font-size: 0.85714286rem; } .ui.small.images .image, .ui.small.images img, .ui.small.images svg, .ui.small.image, .play-button.small.images .image, .play-button.small.images img, .play-button.small.images svg, .play-button.small.image, .download-button.small.images .image, .download-button.small.images img, .download-button.small.images svg, .download-button.small.image { width: 150px; height: auto; font-size: 0.92857143rem; } .ui.medium.images .image, .ui.medium.images img, .ui.medium.images svg, .ui.medium.image, .play-button.medium.images .image, .play-button.medium.images img, .play-button.medium.images svg, .play-button.medium.image, .download-button.medium.images .image, .download-button.medium.images img, .download-button.medium.images svg, .download-button.medium.image { width: 300px; height: auto; font-size: 1rem; } .ui.large.images .image, .ui.large.images img, .ui.large.images svg, .ui.large.image, .play-button.large.images .image, .play-button.large.images img, .play-button.large.images svg, .play-button.large.image, .download-button.large.images .image, .download-button.large.images img, .download-button.large.images svg, .download-button.large.image { width: 450px; height: auto; font-size: 1.14285714rem; } .ui.big.images .image, .ui.big.images img, .ui.big.images svg, .ui.big.image, .play-button.big.images .image, .play-button.big.images img, .play-button.big.images svg, .play-button.big.image, .download-button.big.images .image, .download-button.big.images img, .download-button.big.images svg, .download-button.big.image { width: 600px; height: auto; font-size: 1.28571429rem; } .ui.huge.images .image, .ui.huge.images img, .ui.huge.images svg, .ui.huge.image, .play-button.huge.images .image, .play-button.huge.images img, .play-button.huge.images svg, .play-button.huge.image, .download-button.huge.images .image, .download-button.huge.images img, .download-button.huge.images svg, .download-button.huge.image { width: 800px; height: auto; font-size: 1.42857143rem; } .ui.massive.images .image, .ui.massive.images img, .ui.massive.images svg, .ui.massive.image, .play-button.massive.images .image, .play-button.massive.images img, .play-button.massive.images svg, .play-button.massive.image, .download-button.massive.images .image, .download-button.massive.images img, .download-button.massive.images svg, .download-button.massive.image { width: 960px; height: auto; font-size: 1.71428571rem; } /******************************* Groups *******************************/ .ui.images, .play-button.images, .download-button.images { font-size: 0em; margin: 0em -0.25rem 0rem; } .ui.images .image, .ui.images img, .ui.images svg, .play-button.images .image, .play-button.images img, .play-button.images svg, .download-button.images .image, .download-button.images img, .download-button.images svg { display: inline-block; margin: 0em 0.25rem 0.5rem; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Input * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Input *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Icon Input */ /* Circular Icon Input */ /* Labeled Input */ /*------------------- States --------------------*/ /* Placeholder */ /* Down */ /* Focus */ /* Error */ /* Loader */ /*------------------- Variations --------------------*/ /* Inverted */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------------- Inputs ---------------------*/ .ui.input, .play-button.input, .download-button.input { position: relative; font-weight: normal; font-style: normal; display: inline-flex; color: rgba(0, 0, 0, 0.87); } .ui.input input, .play-button.input input, .download-button.input input { margin: 0em; max-width: 100%; flex: 1 0 auto; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; line-height: 1.21428571em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; padding: 0.67857143em 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; transition: box-shadow 0.1s ease, border-color 0.1s ease; box-shadow: none; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.input input::-webkit-input-placeholder, .play-button.input input::-webkit-input-placeholder, .download-button.input input::-webkit-input-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.input input::-moz-placeholder, .play-button.input input::-moz-placeholder, .download-button.input input::-moz-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.input input:-ms-input-placeholder, .play-button.input input:-ms-input-placeholder, .download-button.input input:-ms-input-placeholder { color: rgba(191, 191, 191, 0.87); } /******************************* States *******************************/ /*-------------------- Disabled ---------------------*/ .ui.disabled.input, .ui.input:not(.disabled) input[disabled], .play-button.disabled.input, .play-button.input:not(.disabled) input[disabled], .download-button.disabled.input, .download-button.input:not(.disabled) input[disabled] { opacity: 0.45; } .ui.disabled.input input, .ui.input:not(.disabled) input[disabled], .play-button.disabled.input input, .play-button.input:not(.disabled) input[disabled], .download-button.disabled.input input, .download-button.input:not(.disabled) input[disabled] { pointer-events: none; } /*-------------------- Active ---------------------*/ .ui.input input:active, .ui.input.down input, .play-button.input input:active, .play-button.input.down input, .download-button.input input:active, .download-button.input.down input { border-color: rgba(0, 0, 0, 0.3); background: #FAFAFA; color: rgba(0, 0, 0, 0.87); box-shadow: none; } /*-------------------- Loading ---------------------*/ .ui.loading.loading.input > i.icon:before, .play-button.loading.loading.input > i.icon:before, .download-button.loading.loading.input > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.loading.input > i.icon:after, .play-button.loading.loading.input > i.icon:after, .download-button.loading.loading.input > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #42495F transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /*-------------------- Focus ---------------------*/ .ui.input.focus input, .ui.input input:focus, .play-button.input.focus input, .play-button.input input:focus, .download-button.input.focus input, .download-button.input input:focus { border-color: #85B7D9; background: #FFFFFF; color: rgba(0, 0, 0, 0.8); box-shadow: none; } .ui.input.focus input::-webkit-input-placeholder, .ui.input input:focus::-webkit-input-placeholder, .play-button.input.focus input::-webkit-input-placeholder, .play-button.input input:focus::-webkit-input-placeholder, .download-button.input.focus input::-webkit-input-placeholder, .download-button.input input:focus::-webkit-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus input::-moz-placeholder, .ui.input input:focus::-moz-placeholder, .play-button.input.focus input::-moz-placeholder, .play-button.input input:focus::-moz-placeholder, .download-button.input.focus input::-moz-placeholder, .download-button.input input:focus::-moz-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus input:-ms-input-placeholder, .ui.input input:focus:-ms-input-placeholder, .play-button.input.focus input:-ms-input-placeholder, .play-button.input input:focus:-ms-input-placeholder, .download-button.input.focus input:-ms-input-placeholder, .download-button.input input:focus:-ms-input-placeholder { color: rgba(115, 115, 115, 0.87); } /*-------------------- Error ---------------------*/ .ui.input.error input, .play-button.input.error input, .download-button.input.error input { background-color: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; box-shadow: none; } /* Error Placeholder */ .ui.input.error input::-webkit-input-placeholder, .play-button.input.error input::-webkit-input-placeholder, .download-button.input.error input::-webkit-input-placeholder { color: #e7bdbc; } .ui.input.error input::-moz-placeholder, .play-button.input.error input::-moz-placeholder, .download-button.input.error input::-moz-placeholder { color: #e7bdbc; } .ui.input.error input:-ms-input-placeholder, .play-button.input.error input:-ms-input-placeholder, .download-button.input.error input:-ms-input-placeholder { color: #e7bdbc !important; } /* Focused Error Placeholder */ .ui.input.error input:focus::-webkit-input-placeholder, .play-button.input.error input:focus::-webkit-input-placeholder, .download-button.input.error input:focus::-webkit-input-placeholder { color: #da9796; } .ui.input.error input:focus::-moz-placeholder, .play-button.input.error input:focus::-moz-placeholder, .download-button.input.error input:focus::-moz-placeholder { color: #da9796; } .ui.input.error input:focus:-ms-input-placeholder, .play-button.input.error input:focus:-ms-input-placeholder, .download-button.input.error input:focus:-ms-input-placeholder { color: #da9796 !important; } /******************************* Variations *******************************/ /*-------------------- Transparent ---------------------*/ .ui.transparent.input input, .play-button.transparent.input input, .download-button.transparent.input input { border-color: transparent !important; background-color: transparent !important; padding: 0em !important; box-shadow: none !important; border-radius: 0px !important; } /* Transparent Icon */ .ui.transparent.icon.input > i.icon, .play-button.transparent.icon.input > i.icon, .download-button.transparent.icon.input > i.icon { width: 1.1em; } .ui.transparent.icon.input > input, .play-button.transparent.icon.input > input, .download-button.transparent.icon.input > input { padding-left: 0em !important; padding-right: 2em !important; } .ui.transparent[class*="left icon"].input > input, .play-button.transparent[class*="left icon"].input > input, .download-button.transparent[class*="left icon"].input > input { padding-left: 2em !important; padding-right: 0em !important; } /* Transparent Inverted */ .ui.transparent.inverted.input, .play-button.transparent.inverted.input, .download-button.transparent.inverted.input { color: #FFFFFF; } .ui.transparent.inverted.input input, .play-button.transparent.inverted.input input, .download-button.transparent.inverted.input input { color: inherit; } .ui.transparent.inverted.input input::-webkit-input-placeholder, .play-button.transparent.inverted.input input::-webkit-input-placeholder, .download-button.transparent.inverted.input input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } .ui.transparent.inverted.input input::-moz-placeholder, .play-button.transparent.inverted.input input::-moz-placeholder, .download-button.transparent.inverted.input input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .ui.transparent.inverted.input input:-ms-input-placeholder, .play-button.transparent.inverted.input input:-ms-input-placeholder, .download-button.transparent.inverted.input input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); } /*-------------------- Icon ---------------------*/ .ui.icon.input > i.icon, .play-button.icon.input > i.icon, .download-button.icon.input > i.icon { cursor: default; position: absolute; line-height: 1; text-align: center; top: 0px; right: 0px; margin: 0em; height: 100%; width: 2.67142857em; opacity: 0.5; border-radius: 0em 0.28571429rem 0.28571429rem 0em; transition: opacity 0.3s ease; } .ui.icon.input > i.icon:not(.link), .play-button.icon.input > i.icon:not(.link), .download-button.icon.input > i.icon:not(.link) { pointer-events: none; } .ui.icon.input input, .play-button.icon.input input, .download-button.icon.input input { padding-right: 2.67142857em !important; } .ui.icon.input > i.icon:before, .ui.icon.input > i.icon:after, .play-button.icon.input > i.icon:before, .play-button.icon.input > i.icon:after, .download-button.icon.input > i.icon:before, .download-button.icon.input > i.icon:after { left: 0; position: absolute; text-align: center; top: 50%; width: 100%; margin-top: -0.5em; } .ui.icon.input > i.link.icon, .play-button.icon.input > i.link.icon, .download-button.icon.input > i.link.icon { cursor: pointer; } .ui.icon.input > i.circular.icon, .play-button.icon.input > i.circular.icon, .download-button.icon.input > i.circular.icon { top: 0.35em; right: 0.5em; } /* Left Icon Input */ .ui[class*="left icon"].input > i.icon, .play-button[class*="left icon"].input > i.icon, .download-button[class*="left icon"].input > i.icon { right: auto; left: 1px; border-radius: 0.28571429rem 0em 0em 0.28571429rem; } .ui[class*="left icon"].input > i.circular.icon, .play-button[class*="left icon"].input > i.circular.icon, .download-button[class*="left icon"].input > i.circular.icon { right: auto; left: 0.5em; } .ui[class*="left icon"].input > input, .play-button[class*="left icon"].input > input, .download-button[class*="left icon"].input > input { padding-left: 2.67142857em !important; padding-right: 1em !important; } /* Focus */ .ui.icon.input > input:focus ~ i.icon, .play-button.icon.input > input:focus ~ i.icon, .download-button.icon.input > input:focus ~ i.icon { opacity: 1; } /*-------------------- Labeled ---------------------*/ /* Adjacent Label */ .ui.labeled.input > .label, .play-button.labeled.input > .label, .download-button.labeled.input > .label { flex: 0 0 auto; margin: 0; font-size: 1em; } .ui.labeled.input > .label:not(.corner), .play-button.labeled.input > .label:not(.corner), .download-button.labeled.input > .label:not(.corner) { padding-top: 0.78571429em; padding-bottom: 0.78571429em; } /* Regular Label on Left */ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child, .play-button.labeled.input:not([class*="corner labeled"]) .label:first-child, .download-button.labeled.input:not([class*="corner labeled"]) .label:first-child { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input, .play-button.labeled.input:not([class*="corner labeled"]) .label:first-child + input, .download-button.labeled.input:not([class*="corner labeled"]) .label:first-child + input { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left-color: transparent; } .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus, .play-button.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus, .download-button.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { border-left-color: #85B7D9; } /* Regular Label on Right */ .ui[class*="right labeled"].input input, .play-button[class*="right labeled"].input input, .download-button[class*="right labeled"].input input { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-right-color: transparent !important; } .ui[class*="right labeled"].input input + .label, .play-button[class*="right labeled"].input input + .label, .download-button[class*="right labeled"].input input + .label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .ui[class*="right labeled"].input input:focus, .play-button[class*="right labeled"].input input:focus, .download-button[class*="right labeled"].input input:focus { border-right-color: #85B7D9 !important; } /* Corner Label */ .ui.labeled.input .corner.label, .play-button.labeled.input .corner.label, .download-button.labeled.input .corner.label { top: 1px; right: 1px; font-size: 0.64285714em; border-radius: 0em 0.28571429rem 0em 0em; } /* Spacing with corner label */ .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input, .play-button[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input, .download-button[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input { padding-right: 2.5em !important; } .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input, .play-button[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input, .download-button[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { padding-right: 3.25em !important; } .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon, .play-button[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon, .download-button[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { margin-right: 1.25em; } /* Left Labeled */ .ui[class*="left corner labeled"].labeled.input input, .play-button[class*="left corner labeled"].labeled.input input, .download-button[class*="left corner labeled"].labeled.input input { padding-left: 2.5em !important; } .ui[class*="left corner labeled"].icon.input > input, .play-button[class*="left corner labeled"].icon.input > input, .download-button[class*="left corner labeled"].icon.input > input { padding-left: 3.25em !important; } .ui[class*="left corner labeled"].icon.input > .icon, .play-button[class*="left corner labeled"].icon.input > .icon, .download-button[class*="left corner labeled"].icon.input > .icon { margin-left: 1.25em; } /* Corner Label Position */ .ui.input > .ui.corner.label, .play-button.input > .play-button.corner.label, .download-button.input > .download-button.corner.label { top: 1px; right: 1px; } .ui.input > .ui.left.corner.label, .play-button.input > .play-button.left.corner.label, .download-button.input > .download-button.left.corner.label { right: auto; left: 1px; } /*-------------------- Action ---------------------*/ .ui.action.input > .button, .ui.action.input > .buttons, .play-button.action.input > .button, .play-button.action.input > .buttons, .ui.action.input > .play-button, .download-button.action.input > .button, .download-button.action.input > .buttons, .ui.action.input > .download-button { display: flex; align-items: center; flex: 0 0 auto; } .ui.action.input > .button, .ui.action.input > .buttons > .button, .play-button.action.input > .button, .play-button.action.input > .buttons > .button, .ui.action.input > .play-button, .ui.action.input > .buttons > .play-button, .download-button.action.input > .button, .download-button.action.input > .buttons > .button, .ui.action.input > .download-button, .ui.action.input > .buttons > .download-button { padding-top: 0.78571429em; padding-bottom: 0.78571429em; margin: 0; } /* Button on Right */ .ui.action.input:not([class*="left action"]) > input, .play-button.action.input:not([class*="left action"]) > input, .download-button.action.input:not([class*="left action"]) > input { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-right-color: transparent !important; } .ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child), .ui.action.input:not([class*="left action"]) > .button:not(:first-child), .ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button, .play-button.action.input:not([class*="left action"]) > .dropdown:not(:first-child), .play-button.action.input:not([class*="left action"]) > .button:not(:first-child), .play-button.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button, .ui.action.input:not([class*="left action"]) > .play-button:not(:first-child), .ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .play-button, .download-button.action.input:not([class*="left action"]) > .dropdown:not(:first-child), .download-button.action.input:not([class*="left action"]) > .button:not(:first-child), .download-button.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button, .ui.action.input:not([class*="left action"]) > .download-button:not(:first-child), .ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .download-button { border-radius: 0px; } .ui.action.input:not([class*="left action"]) > .dropdown:last-child, .ui.action.input:not([class*="left action"]) > .button:last-child, .ui.action.input:not([class*="left action"]) > .buttons:last-child > .button, .play-button.action.input:not([class*="left action"]) > .dropdown:last-child, .play-button.action.input:not([class*="left action"]) > .button:last-child, .play-button.action.input:not([class*="left action"]) > .buttons:last-child > .button, .ui.action.input:not([class*="left action"]) > .play-button:last-child, .ui.action.input:not([class*="left action"]) > .buttons:last-child > .play-button, .download-button.action.input:not([class*="left action"]) > .dropdown:last-child, .download-button.action.input:not([class*="left action"]) > .button:last-child, .download-button.action.input:not([class*="left action"]) > .buttons:last-child > .button, .ui.action.input:not([class*="left action"]) > .download-button:last-child, .ui.action.input:not([class*="left action"]) > .buttons:last-child > .download-button { border-radius: 0px 0.28571429rem 0.28571429rem 0px; } /* Input Focus */ .ui.action.input:not([class*="left action"]) input:focus, .play-button.action.input:not([class*="left action"]) input:focus, .download-button.action.input:not([class*="left action"]) input:focus { border-right-color: #85B7D9 !important; } /* Button on Left */ .ui[class*="left action"].input > input, .play-button[class*="left action"].input > input, .download-button[class*="left action"].input > input { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; border-left-color: transparent !important; } .ui[class*="left action"].input > .dropdown, .ui[class*="left action"].input > .button, .ui[class*="left action"].input > .buttons > .button, .play-button[class*="left action"].input > .dropdown, .play-button[class*="left action"].input > .button, .play-button[class*="left action"].input > .buttons > .button, .ui[class*="left action"].input > .play-button, .ui[class*="left action"].input > .buttons > .play-button, .download-button[class*="left action"].input > .dropdown, .download-button[class*="left action"].input > .button, .download-button[class*="left action"].input > .buttons > .button, .ui[class*="left action"].input > .download-button, .ui[class*="left action"].input > .buttons > .download-button { border-radius: 0px; } .ui[class*="left action"].input > .dropdown:first-child, .ui[class*="left action"].input > .button:first-child, .ui[class*="left action"].input > .buttons:first-child > .button, .play-button[class*="left action"].input > .dropdown:first-child, .play-button[class*="left action"].input > .button:first-child, .play-button[class*="left action"].input > .buttons:first-child > .button, .ui[class*="left action"].input > .play-button:first-child, .ui[class*="left action"].input > .buttons:first-child > .play-button, .download-button[class*="left action"].input > .dropdown:first-child, .download-button[class*="left action"].input > .button:first-child, .download-button[class*="left action"].input > .buttons:first-child > .button, .ui[class*="left action"].input > .download-button:first-child, .ui[class*="left action"].input > .buttons:first-child > .download-button { border-radius: 0.28571429rem 0px 0px 0.28571429rem; } /* Input Focus */ .ui[class*="left action"].input > input:focus, .play-button[class*="left action"].input > input:focus, .download-button[class*="left action"].input > input:focus { border-left-color: #85B7D9 !important; } /*-------------------- Inverted ---------------------*/ /* Standard */ .ui.inverted.input input, .play-button.inverted.input input, .download-button.inverted.input input { border: none; } /*-------------------- Fluid ---------------------*/ .ui.fluid.input, .play-button.fluid.input, .download-button.fluid.input { display: flex; } .ui.fluid.input > input, .play-button.fluid.input > input, .download-button.fluid.input > input { width: 0px !important; } /*-------------------- Size ---------------------*/ .ui.mini.input, .play-button.mini.input, .download-button.mini.input { font-size: 0.78571429em; } .ui.small.input, .play-button.small.input, .download-button.small.input { font-size: 0.92857143em; } .ui.input, .play-button.input, .download-button.input { font-size: 1em; } .ui.large.input, .play-button.large.input, .download-button.large.input { font-size: 1.14285714em; } .ui.big.input, .play-button.big.input, .download-button.big.input { font-size: 1.28571429em; } .ui.huge.input, .play-button.huge.input, .download-button.huge.input { font-size: 1.42857143em; } .ui.massive.input, .play-button.massive.input, .download-button.massive.input { font-size: 1.71428571em; } /******************************* Site Overrides *******************************/ .ui.inverted.input input, .play-button.inverted.input input, .download-button.inverted.input input { border: #FFFFFF 2px solid !important; color: #FFFFFF; background: transparent; } /******************************* Site Overrides *******************************/ .ui.inverted.input input, .play-button.inverted.input input, .download-button.inverted.input input { background: #424852; border-radius: 20px; border: 0px !important; padding: 0.2em !important; padding-left: 0.6em !important; } .rtl .ui.inverted.input input, .rtl .play-button.inverted.input input, .rtl .download-button.inverted.input input { padding-right: 0.6em !important; } /*! * # Semantic UI - Label * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Label *******************************/ /*------------------- Element --------------------*/ /* medium is not @emSize custom value required */ /* Group */ /*------------------- Parts --------------------*/ /* Link */ /* Icon */ /* Image */ /* Detail */ /* Delete */ /*------------------- Types --------------------*/ /* Image Label */ /*------------------- States --------------------*/ /* Hover */ /* Active */ /* Active Hover */ /*------------------- Variations --------------------*/ /* Basic */ /* Tag */ /* Avoids error with background: inherit; on animation */ /* Ribbon */ /* Rounding Offset on Triangle */ /* Rounding Offset on Triangle */ /* Colors */ /* Attached */ /* Corner */ /* Corner Text */ /* Horizontal */ /* Circular Padding */ /* Pointing */ /* Basic Pointing */ /* Floating */ /*------------------- Group --------------------*/ /* Sizing */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Label *******************************/ .ui.label, .play-button.label, .download-button.label { display: inline-block; line-height: 1; vertical-align: baseline; margin: 0em 0.14285714em; background-color: #E8E8E8; background-image: none; padding: 0.5833em 0.833em; color: rgba(0, 0, 0, 0.6); text-transform: none; font-weight: bold; border: 0px solid transparent; border-radius: 0.28571429rem; transition: background 0.1s ease; } .ui.label:first-child, .play-button.label:first-child, .download-button.label:first-child { margin-left: 0em; } .ui.label:last-child, .play-button.label:last-child, .download-button.label:last-child { margin-right: 0em; } /* Link */ a.ui.label, a.play-button.label, a.download-button.label { cursor: pointer; } /* Inside Link */ .ui.label > a, .play-button.label > a, .download-button.label > a { cursor: pointer; color: inherit; opacity: 0.5; transition: 0.1s opacity ease; } .ui.label > a:hover, .play-button.label > a:hover, .download-button.label > a:hover { opacity: 1; } /* Image */ .ui.label > img, .play-button.label > img, .download-button.label > img { width: auto !important; vertical-align: middle; height: 2.1666em !important; } /* Icon */ .ui.label > .icon, .play-button.label > .icon, .download-button.label > .icon { width: auto; margin: 0em 0.75em 0em 0em; } /* Detail */ .ui.label > .detail, .play-button.label > .detail, .download-button.label > .detail { display: inline-block; vertical-align: top; font-weight: bold; margin-left: 1em; opacity: 0.8; } .ui.label > .detail .icon, .play-button.label > .detail .icon, .download-button.label > .detail .icon { margin: 0em 0.25em 0em 0em; } /* Removable label */ .ui.label > .close.icon, .ui.label > .delete.icon, .play-button.label > .close.icon, .play-button.label > .delete.icon, .download-button.label > .close.icon, .download-button.label > .delete.icon { cursor: pointer; margin-right: 0em; margin-left: 0.5em; font-size: 0.92857143em; opacity: 0.5; transition: background 0.1s ease; } .ui.label > .delete.icon:hover, .play-button.label > .delete.icon:hover, .download-button.label > .delete.icon:hover { opacity: 1; } /*------------------- Group --------------------*/ .ui.labels > .label, .play-button.labels > .label, .download-button.labels > .label { margin: 0em 0.5em 0.5em 0em; } /*------------------- Coupling --------------------*/ .ui.header > .ui.label, .play-button.header > .play-button.label, .download-button.header > .download-button.label { margin-top: -0.29165em; } /* Remove border radius on attached segment */ .ui.attached.segment > .ui.top.left.attached.label, .ui.bottom.attached.segment > .ui.top.left.attached.label, .play-button.attached.segment > .play-button.top.left.attached.label, .play-button.bottom.attached.segment > .play-button.top.left.attached.label, .download-button.attached.segment > .download-button.top.left.attached.label, .download-button.bottom.attached.segment > .download-button.top.left.attached.label { border-top-left-radius: 0; } .ui.attached.segment > .ui.top.right.attached.label, .ui.bottom.attached.segment > .ui.top.right.attached.label, .play-button.attached.segment > .play-button.top.right.attached.label, .play-button.bottom.attached.segment > .play-button.top.right.attached.label, .download-button.attached.segment > .download-button.top.right.attached.label, .download-button.bottom.attached.segment > .download-button.top.right.attached.label { border-top-right-radius: 0; } .ui.top.attached.segment > .ui.bottom.left.attached.label, .play-button.top.attached.segment > .play-button.bottom.left.attached.label, .download-button.top.attached.segment > .download-button.bottom.left.attached.label { border-bottom-left-radius: 0; } .ui.top.attached.segment > .ui.bottom.right.attached.label, .play-button.top.attached.segment > .play-button.bottom.right.attached.label, .download-button.top.attached.segment > .download-button.bottom.right.attached.label { border-bottom-right-radius: 0; } /* Padding on next content after a label */ .ui.top.attached.label:first-child + :not(.attached), .ui.top.attached.label + [class*="right floated"] + *, .play-button.top.attached.label:first-child + :not(.attached), .play-button.top.attached.label + [class*="right floated"] + *, .download-button.top.attached.label:first-child + :not(.attached), .download-button.top.attached.label + [class*="right floated"] + * { margin-top: 2rem !important; } .ui.bottom.attached.label:first-child ~ :last-child:not(.attached), .play-button.bottom.attached.label:first-child ~ :last-child:not(.attached), .download-button.bottom.attached.label:first-child ~ :last-child:not(.attached) { margin-top: 0em; margin-bottom: 2rem !important; } /******************************* Types *******************************/ .ui.image.label, .play-button.image.label, .download-button.image.label { width: auto !important; margin-top: 0em; margin-bottom: 0em; max-width: 9999px; vertical-align: baseline; text-transform: none; background: #E8E8E8; padding: 0.5833em 0.833em 0.5833em 0.5em; border-radius: 0.28571429rem; box-shadow: none; } .ui.image.label img, .play-button.image.label img, .download-button.image.label img { display: inline-block; vertical-align: top; height: 2.1666em; margin: -0.5833em 0.5em -0.5833em -0.5em; border-radius: 0.28571429rem 0em 0em 0.28571429rem; } .ui.image.label .detail, .play-button.image.label .detail, .download-button.image.label .detail { background: rgba(0, 0, 0, 0.1); margin: -0.5833em -0.833em -0.5833em 0.5em; padding: 0.5833em 0.833em; border-radius: 0em 0.28571429rem 0.28571429rem 0em; } /*------------------- Tag --------------------*/ .ui.tag.labels .label, .ui.tag.label, .play-button.tag.labels .label, .play-button.tag.label, .download-button.tag.labels .label, .download-button.tag.label { margin-left: 1em; position: relative; padding-left: 1.5em; padding-right: 1.5em; border-radius: 0em 0.28571429rem 0.28571429rem 0em; transition: none; } .ui.tag.labels .label:before, .ui.tag.label:before, .play-button.tag.labels .label:before, .play-button.tag.label:before, .download-button.tag.labels .label:before, .download-button.tag.label:before { position: absolute; transform: translateY(-50%) translateX(50%) rotate(-45deg); top: 50%; right: 100%; content: ''; background-color: inherit; background-image: none; width: 1.56em; height: 1.56em; transition: none; } .ui.tag.labels .label:after, .ui.tag.label:after, .play-button.tag.labels .label:after, .play-button.tag.label:after, .download-button.tag.labels .label:after, .download-button.tag.label:after { position: absolute; content: ''; top: 50%; left: -0.25em; margin-top: -0.25em; background-color: #FFFFFF !important; width: 0.5em; height: 0.5em; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); border-radius: 500rem; } /*------------------- Corner Label --------------------*/ .ui.corner.label, .play-button.corner.label, .download-button.corner.label { position: absolute; top: 0em; right: 0em; margin: 0em; padding: 0em; text-align: center; border-color: #E8E8E8; width: 4em; height: 4em; z-index: 1; transition: border-color 0.1s ease; } /* Icon Label */ .ui.corner.label, .play-button.corner.label, .download-button.corner.label { background-color: transparent !important; } .ui.corner.label:after, .play-button.corner.label:after, .download-button.corner.label:after { position: absolute; content: ""; right: 0em; top: 0em; z-index: -1; width: 0em; height: 0em; background-color: transparent !important; border-top: 0em solid transparent; border-right: 4em solid transparent; border-bottom: 4em solid transparent; border-left: 0em solid transparent; border-right-color: inherit; transition: border-color 0.1s ease; } .ui.corner.label .icon, .play-button.corner.label .icon, .download-button.corner.label .icon { cursor: default; position: relative; top: 0.64285714em; left: 0.78571429em; font-size: 1.14285714em; margin: 0em; } /* Left Corner */ .ui.left.corner.label, .ui.left.corner.label:after, .play-button.left.corner.label, .play-button.left.corner.label:after, .download-button.left.corner.label, .download-button.left.corner.label:after { right: auto; left: 0em; } .ui.left.corner.label:after, .play-button.left.corner.label:after, .download-button.left.corner.label:after { border-top: 4em solid transparent; border-right: 4em solid transparent; border-bottom: 0em solid transparent; border-left: 0em solid transparent; border-top-color: inherit; } .ui.left.corner.label .icon, .play-button.left.corner.label .icon, .download-button.left.corner.label .icon { left: -0.78571429em; } /* Segment */ .ui.segment > .ui.corner.label, .play-button.segment > .play-button.corner.label, .download-button.segment > .download-button.corner.label { top: -1px; right: -1px; } .ui.segment > .ui.left.corner.label, .play-button.segment > .play-button.left.corner.label, .download-button.segment > .download-button.left.corner.label { right: auto; left: -1px; } /*------------------- Ribbon --------------------*/ .ui.ribbon.label, .play-button.ribbon.label, .download-button.ribbon.label { position: relative; margin: 0em; min-width: max-content; border-radius: 0em 0.28571429rem 0.28571429rem 0em; border-color: rgba(0, 0, 0, 0.15); } .ui.ribbon.label:after, .play-button.ribbon.label:after, .download-button.ribbon.label:after { position: absolute; content: ''; top: 100%; left: 0%; background-color: transparent !important; border-style: solid; border-width: 0em 1.2em 1.2em 0em; border-color: transparent; border-right-color: inherit; width: 0em; height: 0em; } /* Positioning */ .ui.ribbon.label, .play-button.ribbon.label, .download-button.ribbon.label { left: calc( -1rem - 1.2em ); margin-right: -1.2em; padding-left: calc( 1rem + 1.2em ); padding-right: 1.2em; } .ui[class*="right ribbon"].label, .play-button[class*="right ribbon"].label, .download-button[class*="right ribbon"].label { left: calc(100% + 1rem + 1.2em ); padding-left: 1.2em; padding-right: calc( 1rem + 1.2em ); } /* Right Ribbon */ .ui[class*="right ribbon"].label, .play-button[class*="right ribbon"].label, .download-button[class*="right ribbon"].label { text-align: left; transform: translateX(-100%); border-radius: 0.28571429rem 0em 0em 0.28571429rem; } .ui[class*="right ribbon"].label:after, .play-button[class*="right ribbon"].label:after, .download-button[class*="right ribbon"].label:after { left: auto; right: 0%; border-style: solid; border-width: 1.2em 1.2em 0em 0em; border-color: transparent; border-top-color: inherit; } /* Inside Table */ .ui.image > .ribbon.label, .ui.card .image > .ribbon.label, .play-button.image > .ribbon.label, .play-button.card .image > .ribbon.label, .download-button.image > .ribbon.label, .download-button.card .image > .ribbon.label { position: absolute; top: 1rem; } .ui.card .image > .ui.ribbon.label, .ui.image > .ui.ribbon.label, .play-button.card .image > .play-button.ribbon.label, .play-button.image > .play-button.ribbon.label, .download-button.card .image > .download-button.ribbon.label, .download-button.image > .download-button.ribbon.label { left: calc( 0.05rem - 1.2em ); } .ui.card .image > .ui[class*="right ribbon"].label, .ui.image > .ui[class*="right ribbon"].label, .play-button.card .image > .play-button[class*="right ribbon"].label, .play-button.image > .play-button[class*="right ribbon"].label, .download-button.card .image > .download-button[class*="right ribbon"].label, .download-button.image > .download-button[class*="right ribbon"].label { left: calc(100% + -0.05rem + 1.2em ); padding-left: 0.833em; } /* Inside Table */ .ui.table td > .ui.ribbon.label, .play-button.table td > .play-button.ribbon.label, .download-button.table td > .download-button.ribbon.label { left: calc( -0.78571429em - 1.2em ); } .ui.table td > .ui[class*="right ribbon"].label, .play-button.table td > .play-button[class*="right ribbon"].label, .download-button.table td > .download-button[class*="right ribbon"].label { left: calc(100% + 0.78571429em + 1.2em ); padding-left: 0.833em; } /*------------------- Attached --------------------*/ .ui[class*="top attached"].label, .ui.attached.label, .play-button[class*="top attached"].label, .play-button.attached.label, .download-button[class*="top attached"].label, .download-button.attached.label { width: 100%; position: absolute; margin: 0em; top: 0em; left: 0em; padding: 0.75em 1em; border-radius: 0.21428571rem 0.21428571rem 0em 0em; } .ui[class*="bottom attached"].label, .play-button[class*="bottom attached"].label, .download-button[class*="bottom attached"].label { top: auto; bottom: 0em; border-radius: 0em 0em 0.21428571rem 0.21428571rem; } .ui[class*="top left attached"].label, .play-button[class*="top left attached"].label, .download-button[class*="top left attached"].label { width: auto; margin-top: 0em !important; border-radius: 0.21428571rem 0em 0.28571429rem 0em; } .ui[class*="top right attached"].label, .play-button[class*="top right attached"].label, .download-button[class*="top right attached"].label { width: auto; left: auto; right: 0em; border-radius: 0em 0.21428571rem 0em 0.28571429rem; } .ui[class*="bottom left attached"].label, .play-button[class*="bottom left attached"].label, .download-button[class*="bottom left attached"].label { width: auto; top: auto; bottom: 0em; border-radius: 0em 0.28571429rem 0em 0.21428571rem; } .ui[class*="bottom right attached"].label, .play-button[class*="bottom right attached"].label, .download-button[class*="bottom right attached"].label { top: auto; bottom: 0em; left: auto; right: 0em; width: auto; border-radius: 0.28571429rem 0em 0.21428571rem 0em; } /******************************* States *******************************/ /*------------------- Disabled --------------------*/ .ui.label.disabled, .play-button.label.disabled, .download-button.label.disabled { opacity: 0.5; } /*------------------- Hover --------------------*/ a.ui.labels .label:hover, a.ui.label:hover, a.play-button.labels .label:hover, a.play-button.label:hover, a.download-button.labels .label:hover, a.download-button.label:hover { background-color: #E0E0E0; border-color: #E0E0E0; background-image: none; color: rgba(0, 0, 0, 0.8); } .ui.labels a.label:hover:before, a.ui.label:hover:before, .play-button.labels a.label:hover:before, a.play-button.label:hover:before, .download-button.labels a.label:hover:before, a.download-button.label:hover:before { color: rgba(0, 0, 0, 0.8); } /*------------------- Active --------------------*/ .ui.active.label, .play-button.active.label, .download-button.active.label { background-color: #D0D0D0; border-color: #D0D0D0; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.label:before, .play-button.active.label:before, .download-button.active.label:before { background-color: #D0D0D0; background-image: none; color: rgba(0, 0, 0, 0.95); } /*------------------- Active Hover --------------------*/ a.ui.labels .active.label:hover, a.ui.active.label:hover, a.play-button.labels .active.label:hover, a.play-button.active.label:hover, a.download-button.labels .active.label:hover, a.download-button.active.label:hover { background-color: #C8C8C8; border-color: #C8C8C8; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.labels a.active.label:ActiveHover:before, a.ui.active.label:ActiveHover:before, .play-button.labels a.active.label:ActiveHover:before, a.play-button.active.label:ActiveHover:before, .download-button.labels a.active.label:ActiveHover:before, a.download-button.active.label:ActiveHover:before { background-color: #C8C8C8; background-image: none; color: rgba(0, 0, 0, 0.95); } /*------------------- Visible --------------------*/ .ui.labels.visible .label, .ui.label.visible:not(.dropdown), .play-button.labels.visible .label, .play-button.label.visible:not(.dropdown), .download-button.labels.visible .label, .download-button.label.visible:not(.dropdown) { display: inline-block !important; } /*------------------- Hidden --------------------*/ .ui.labels.hidden .label, .ui.label.hidden, .play-button.labels.hidden .label, .play-button.label.hidden, .download-button.labels.hidden .label, .download-button.label.hidden { display: none !important; } /******************************* Variations *******************************/ /*------------------- Colors --------------------*/ /*--- Red ---*/ .ui.red.labels .label, .ui.red.label, .play-button.red.labels .label, .play-button.red.label, .download-button.red.labels .label, .download-button.red.label { background-color: #E81123 !important; border-color: #E81123 !important; color: #FFFFFF !important; } /* Link */ .ui.red.labels .label:hover, a.ui.red.label:hover, .play-button.red.labels .label:hover, a.play-button.red.label:hover, .download-button.red.labels .label:hover, a.download-button.red.label:hover { background-color: #da0617 !important; border-color: #da0617 !important; color: #FFFFFF !important; } /* Corner */ .ui.red.corner.label, .ui.red.corner.label:hover, .play-button.red.corner.label, .play-button.red.corner.label:hover, .download-button.red.corner.label, .download-button.red.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.red.ribbon.label, .play-button.red.ribbon.label, .download-button.red.ribbon.label { border-color: #b80e1c !important; } /* Basic */ .ui.basic.red.label, .play-button.basic.red.label, .download-button.basic.red.label { background-color: #FFFFFF !important; color: #E81123 !important; border-color: #E81123 !important; } .ui.basic.red.labels a.label:hover, a.ui.basic.red.label:hover, .play-button.basic.red.labels a.label:hover, a.play-button.basic.red.label:hover, .download-button.basic.red.labels a.label:hover, a.download-button.basic.red.label:hover { background-color: #FFFFFF !important; color: #da0617 !important; border-color: #da0617 !important; } /*--- Orange ---*/ .ui.orange.labels .label, .ui.orange.label, .play-button.orange.labels .label, .play-button.orange.label, .download-button.orange.labels .label, .download-button.orange.label { background-color: #DF4600 !important; border-color: #DF4600 !important; color: #FFFFFF !important; } /* Link */ .ui.orange.labels .label:hover, a.ui.orange.label:hover, .play-button.orange.labels .label:hover, a.play-button.orange.label:hover, .download-button.orange.labels .label:hover, a.download-button.orange.label:hover { background-color: #c63e00 !important; border-color: #c63e00 !important; color: #FFFFFF !important; } /* Corner */ .ui.orange.corner.label, .ui.orange.corner.label:hover, .play-button.orange.corner.label, .play-button.orange.corner.label:hover, .download-button.orange.corner.label, .download-button.orange.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.orange.ribbon.label, .play-button.orange.ribbon.label, .download-button.orange.ribbon.label { border-color: #ac3600 !important; } /* Basic */ .ui.basic.orange.label, .play-button.basic.orange.label, .download-button.basic.orange.label { background-color: #FFFFFF !important; color: #DF4600 !important; border-color: #DF4600 !important; } .ui.basic.orange.labels a.label:hover, a.ui.basic.orange.label:hover, .play-button.basic.orange.labels a.label:hover, a.play-button.basic.orange.label:hover, .download-button.basic.orange.labels a.label:hover, a.download-button.basic.orange.label:hover { background-color: #FFFFFF !important; color: #c63e00 !important; border-color: #c63e00 !important; } /*--- Yellow ---*/ .ui.yellow.labels .label, .ui.yellow.label, .play-button.yellow.labels .label, .play-button.yellow.label, .download-button.yellow.labels .label, .download-button.yellow.label, .ui.download-button.labels .label, .ui.download-button.label { background-color: #F4C918 !important; border-color: #F4C918 !important; color: #FFFFFF !important; } /* Link */ .ui.yellow.labels .label:hover, a.ui.yellow.label:hover, .play-button.yellow.labels .label:hover, a.play-button.yellow.label:hover, .download-button.yellow.labels .label:hover, a.download-button.yellow.label:hover, .ui.download-button.labels .label:hover, a.ui.download-button.label:hover { background-color: #f3c300 !important; border-color: #f3c300 !important; color: #FFFFFF !important; } /* Corner */ .ui.yellow.corner.label, .ui.yellow.corner.label:hover, .play-button.yellow.corner.label, .play-button.yellow.corner.label:hover, .download-button.yellow.corner.label, .download-button.yellow.corner.label:hover, .ui.download-button.corner.label, .ui.download-button.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.yellow.ribbon.label, .play-button.yellow.ribbon.label, .download-button.yellow.ribbon.label, .ui.download-button.ribbon.label { border-color: #cfa90a !important; } /* Basic */ .ui.basic.yellow.label, .play-button.basic.yellow.label, .download-button.basic.yellow.label, .ui.basic.download-button.label { background-color: #FFFFFF !important; color: #F4C918 !important; border-color: #F4C918 !important; } .ui.basic.yellow.labels a.label:hover, a.ui.basic.yellow.label:hover, .play-button.basic.yellow.labels a.label:hover, a.play-button.basic.yellow.label:hover, .download-button.basic.yellow.labels a.label:hover, a.download-button.basic.yellow.label:hover, .ui.basic.download-button.labels a.label:hover, a.ui.basic.download-button.label:hover { background-color: #FFFFFF !important; color: #f3c300 !important; border-color: #f3c300 !important; } /*--- Olive ---*/ .ui.olive.labels .label, .ui.olive.label, .play-button.olive.labels .label, .play-button.olive.label, .download-button.olive.labels .label, .download-button.olive.label { background-color: #B5CC18 !important; border-color: #B5CC18 !important; color: #FFFFFF !important; } /* Link */ .ui.olive.labels .label:hover, a.ui.olive.label:hover, .play-button.olive.labels .label:hover, a.play-button.olive.label:hover, .download-button.olive.labels .label:hover, a.download-button.olive.label:hover { background-color: #a7bd0d !important; border-color: #a7bd0d !important; color: #FFFFFF !important; } /* Corner */ .ui.olive.corner.label, .ui.olive.corner.label:hover, .play-button.olive.corner.label, .play-button.olive.corner.label:hover, .download-button.olive.corner.label, .download-button.olive.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.olive.ribbon.label, .play-button.olive.ribbon.label, .download-button.olive.ribbon.label { border-color: #2fa54e !important; } /* Basic */ .ui.basic.olive.label, .play-button.basic.olive.label, .download-button.basic.olive.label { background-color: #FFFFFF !important; color: #B5CC18 !important; border-color: #B5CC18 !important; } .ui.basic.olive.labels a.label:hover, a.ui.basic.olive.label:hover, .play-button.basic.olive.labels a.label:hover, a.play-button.basic.olive.label:hover, .download-button.basic.olive.labels a.label:hover, a.download-button.basic.olive.label:hover { background-color: #FFFFFF !important; color: #a7bd0d !important; border-color: #a7bd0d !important; } /*--- Green ---*/ .ui.green.labels .label, .ui.green.label, .ui.ui.button.getting-started-btn.labels .label, .ui.ui.button.getting-started-btn.label, .play-button.green.labels .label, .play-button.green.label, .download-button.green.labels .label, .download-button.green.label, .ui.play-button.button.getting-started-btn.labels .label, .ui.play-button.button.getting-started-btn.label, .ui.ui.play-button.getting-started-btn.labels .label, .ui.ui.play-button.getting-started-btn.label, .ui.download-button.button.getting-started-btn.labels .label, .ui.download-button.button.getting-started-btn.label, .ui.ui.download-button.getting-started-btn.labels .label, .ui.ui.download-button.getting-started-btn.label { background-color: #3FC863 !important; border-color: #3FC863 !important; color: #FFFFFF !important; } /* Link */ .ui.green.labels .label:hover, a.ui.green.label:hover, .ui.ui.button.getting-started-btn.labels .label:hover, a.ui.ui.button.getting-started-btn.label:hover, .play-button.green.labels .label:hover, a.play-button.green.label:hover, .download-button.green.labels .label:hover, a.download-button.green.label:hover, .ui.play-button.button.getting-started-btn.labels .label:hover, a.ui.play-button.button.getting-started-btn.label:hover, .ui.ui.play-button.getting-started-btn.labels .label:hover, a.ui.ui.play-button.getting-started-btn.label:hover, .ui.download-button.button.getting-started-btn.labels .label:hover, a.ui.download-button.button.getting-started-btn.label:hover, .ui.ui.download-button.getting-started-btn.labels .label:hover, a.ui.ui.download-button.getting-started-btn.label:hover { background-color: #2ebf54 !important; border-color: #2ebf54 !important; color: #FFFFFF !important; } /* Corner */ .ui.green.corner.label, .ui.green.corner.label:hover, .ui.ui.button.getting-started-btn.corner.label, .ui.ui.button.getting-started-btn.corner.label:hover, .play-button.green.corner.label, .play-button.green.corner.label:hover, .download-button.green.corner.label, .download-button.green.corner.label:hover, .ui.play-button.button.getting-started-btn.corner.label, .ui.play-button.button.getting-started-btn.corner.label:hover, .ui.ui.play-button.getting-started-btn.corner.label, .ui.ui.play-button.getting-started-btn.corner.label:hover, .ui.download-button.button.getting-started-btn.corner.label, .ui.download-button.button.getting-started-btn.corner.label:hover, .ui.ui.download-button.getting-started-btn.corner.label, .ui.ui.download-button.getting-started-btn.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.green.ribbon.label, .ui.ui.button.getting-started-btn.ribbon.label, .play-button.green.ribbon.label, .download-button.green.ribbon.label, .ui.play-button.button.getting-started-btn.ribbon.label, .ui.ui.play-button.getting-started-btn.ribbon.label, .ui.download-button.button.getting-started-btn.ribbon.label, .ui.ui.download-button.getting-started-btn.ribbon.label { border-color: #2fa54e !important; } /* Basic */ .ui.basic.green.label, .ui.basic.ui.button.getting-started-btn.label, .play-button.basic.green.label, .download-button.basic.green.label, .ui.basic.play-button.button.getting-started-btn.label, .ui.basic.ui.play-button.getting-started-btn.label, .ui.basic.download-button.button.getting-started-btn.label, .ui.basic.ui.download-button.getting-started-btn.label { background-color: #FFFFFF !important; color: #3FC863 !important; border-color: #3FC863 !important; } .ui.basic.green.labels a.label:hover, a.ui.basic.green.label:hover, .ui.basic.ui.button.getting-started-btn.labels a.label:hover, a.ui.basic.ui.button.getting-started-btn.label:hover, .play-button.basic.green.labels a.label:hover, a.play-button.basic.green.label:hover, .download-button.basic.green.labels a.label:hover, a.download-button.basic.green.label:hover, .ui.basic.play-button.button.getting-started-btn.labels a.label:hover, a.ui.basic.play-button.button.getting-started-btn.label:hover, .ui.basic.ui.play-button.getting-started-btn.labels a.label:hover, a.ui.basic.ui.play-button.getting-started-btn.label:hover, .ui.basic.download-button.button.getting-started-btn.labels a.label:hover, a.ui.basic.download-button.button.getting-started-btn.label:hover, .ui.basic.ui.download-button.getting-started-btn.labels a.label:hover, a.ui.basic.ui.download-button.getting-started-btn.label:hover { background-color: #FFFFFF !important; color: #2ebf54 !important; border-color: #2ebf54 !important; } /*--- Teal ---*/ .ui.teal.labels .label, .ui.teal.label, .play-button.teal.labels .label, .play-button.teal.label, .download-button.teal.labels .label, .download-button.teal.label { background-color: #008272 !important; border-color: #008272 !important; color: #FFFFFF !important; } /* Link */ .ui.teal.labels .label:hover, a.ui.teal.label:hover, .play-button.teal.labels .label:hover, a.play-button.teal.label:hover, .download-button.teal.labels .label:hover, a.download-button.teal.label:hover { background-color: #00695c !important; border-color: #00695c !important; color: #FFFFFF !important; } /* Corner */ .ui.teal.corner.label, .ui.teal.corner.label:hover, .play-button.teal.corner.label, .play-button.teal.corner.label:hover, .download-button.teal.corner.label, .download-button.teal.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.teal.ribbon.label, .play-button.teal.ribbon.label, .download-button.teal.ribbon.label { border-color: #004f45 !important; } /* Basic */ .ui.basic.teal.label, .play-button.basic.teal.label, .download-button.basic.teal.label { background-color: #FFFFFF !important; color: #008272 !important; border-color: #008272 !important; } .ui.basic.teal.labels a.label:hover, a.ui.basic.teal.label:hover, .play-button.basic.teal.labels a.label:hover, a.play-button.basic.teal.label:hover, .download-button.basic.teal.labels a.label:hover, a.download-button.basic.teal.label:hover { background-color: #FFFFFF !important; color: #00695c !important; border-color: #00695c !important; } /*--- Blue ---*/ .ui.blue.labels .label, .ui.blue.label, .play-button.blue.labels .label, .play-button.blue.label, .ui.play-button.labels .label, .ui.play-button.label, .download-button.blue.labels .label, .download-button.blue.label { background-color: #54C9C9 !important; border-color: #54C9C9 !important; color: #FFFFFF !important; } /* Link */ .ui.blue.labels .label:hover, a.ui.blue.label:hover, .play-button.blue.labels .label:hover, a.play-button.blue.label:hover, .ui.play-button.labels .label:hover, a.ui.play-button.label:hover, .download-button.blue.labels .label:hover, a.download-button.blue.label:hover { background-color: #3ac9c9 !important; border-color: #3ac9c9 !important; color: #FFFFFF !important; } /* Corner */ .ui.blue.corner.label, .ui.blue.corner.label:hover, .play-button.blue.corner.label, .play-button.blue.corner.label:hover, .ui.play-button.corner.label, .ui.play-button.corner.label:hover, .download-button.blue.corner.label, .download-button.blue.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.blue.ribbon.label, .play-button.blue.ribbon.label, .ui.play-button.ribbon.label, .download-button.blue.ribbon.label { border-color: #38b2b2 !important; } /* Basic */ .ui.basic.blue.label, .play-button.basic.blue.label, .ui.basic.play-button.label, .download-button.basic.blue.label { background-color: #FFFFFF !important; color: #54C9C9 !important; border-color: #54C9C9 !important; } .ui.basic.blue.labels a.label:hover, a.ui.basic.blue.label:hover, .play-button.basic.blue.labels a.label:hover, a.play-button.basic.blue.label:hover, .ui.basic.play-button.labels a.label:hover, a.ui.basic.play-button.label:hover, .download-button.basic.blue.labels a.label:hover, a.download-button.basic.blue.label:hover { background-color: #FFFFFF !important; color: #3ac9c9 !important; border-color: #3ac9c9 !important; } /*--- Violet ---*/ .ui.violet.labels .label, .ui.violet.label, .play-button.violet.labels .label, .play-button.violet.label, .download-button.violet.labels .label, .download-button.violet.label { background-color: #C90072 !important; border-color: #C90072 !important; color: #FFFFFF !important; } /* Link */ .ui.violet.labels .label:hover, a.ui.violet.label:hover, .play-button.violet.labels .label:hover, a.play-button.violet.label:hover, .download-button.violet.labels .label:hover, a.download-button.violet.label:hover { background-color: #b00064 !important; border-color: #b00064 !important; color: #FFFFFF !important; } /* Corner */ .ui.violet.corner.label, .ui.violet.corner.label:hover, .play-button.violet.corner.label, .play-button.violet.corner.label:hover, .download-button.violet.corner.label, .download-button.violet.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.violet.ribbon.label, .play-button.violet.ribbon.label, .download-button.violet.ribbon.label { border-color: #960055 !important; } /* Basic */ .ui.basic.violet.label, .play-button.basic.violet.label, .download-button.basic.violet.label { background-color: #FFFFFF !important; color: #C90072 !important; border-color: #C90072 !important; } .ui.basic.violet.labels a.label:hover, a.ui.basic.violet.label:hover, .play-button.basic.violet.labels a.label:hover, a.play-button.basic.violet.label:hover, .download-button.basic.violet.labels a.label:hover, a.download-button.basic.violet.label:hover { background-color: #FFFFFF !important; color: #b00064 !important; border-color: #b00064 !important; } /*--- Purple ---*/ .ui.purple.labels .label, .ui.purple.label, .play-button.purple.labels .label, .play-button.purple.label, .download-button.purple.labels .label, .download-button.purple.label { background-color: #8169E6 !important; border-color: #8169E6 !important; color: #FFFFFF !important; } /* Link */ .ui.purple.labels .label:hover, a.ui.purple.label:hover, .play-button.purple.labels .label:hover, a.play-button.purple.label:hover, .download-button.purple.labels .label:hover, a.download-button.purple.label:hover { background-color: #6a4cea !important; border-color: #6a4cea !important; color: #FFFFFF !important; } /* Corner */ .ui.purple.corner.label, .ui.purple.corner.label:hover, .play-button.purple.corner.label, .play-button.purple.corner.label:hover, .download-button.purple.corner.label, .download-button.purple.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.purple.ribbon.label, .play-button.purple.ribbon.label, .download-button.purple.ribbon.label { border-color: #5c3ddf !important; } /* Basic */ .ui.basic.purple.label, .play-button.basic.purple.label, .download-button.basic.purple.label { background-color: #FFFFFF !important; color: #8169E6 !important; border-color: #8169E6 !important; } .ui.basic.purple.labels a.label:hover, a.ui.basic.purple.label:hover, .play-button.basic.purple.labels a.label:hover, a.play-button.basic.purple.label:hover, .download-button.basic.purple.labels a.label:hover, a.download-button.basic.purple.label:hover { background-color: #FFFFFF !important; color: #6a4cea !important; border-color: #6a4cea !important; } /*--- Pink ---*/ .ui.pink.labels .label, .ui.pink.label, .play-button.pink.labels .label, .play-button.pink.label, .download-button.pink.labels .label, .download-button.pink.label { background-color: #E2008C !important; border-color: #E2008C !important; color: #FFFFFF !important; } /* Link */ .ui.pink.labels .label:hover, a.ui.pink.label:hover, .play-button.pink.labels .label:hover, a.play-button.pink.label:hover, .download-button.pink.labels .label:hover, a.download-button.pink.label:hover { background-color: #c9007c !important; border-color: #c9007c !important; color: #FFFFFF !important; } /* Corner */ .ui.pink.corner.label, .ui.pink.corner.label:hover, .play-button.pink.corner.label, .play-button.pink.corner.label:hover, .download-button.pink.corner.label, .download-button.pink.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.pink.ribbon.label, .play-button.pink.ribbon.label, .download-button.pink.ribbon.label { border-color: #af006c !important; } /* Basic */ .ui.basic.pink.label, .play-button.basic.pink.label, .download-button.basic.pink.label { background-color: #FFFFFF !important; color: #E2008C !important; border-color: #E2008C !important; } .ui.basic.pink.labels a.label:hover, a.ui.basic.pink.label:hover, .play-button.basic.pink.labels a.label:hover, a.play-button.basic.pink.label:hover, .download-button.basic.pink.labels a.label:hover, a.download-button.basic.pink.label:hover { background-color: #FFFFFF !important; color: #c9007c !important; border-color: #c9007c !important; } /*--- Brown ---*/ .ui.brown.labels .label, .ui.brown.label, .play-button.brown.labels .label, .play-button.brown.label, .download-button.brown.labels .label, .download-button.brown.label { background-color: #6B5B4C !important; border-color: #6B5B4C !important; color: #FFFFFF !important; } /* Link */ .ui.brown.labels .label:hover, a.ui.brown.label:hover, .play-button.brown.labels .label:hover, a.play-button.brown.label:hover, .download-button.brown.labels .label:hover, a.download-button.brown.label:hover { background-color: #5d4e40 !important; border-color: #5d4e40 !important; color: #FFFFFF !important; } /* Corner */ .ui.brown.corner.label, .ui.brown.corner.label:hover, .play-button.brown.corner.label, .play-button.brown.corner.label:hover, .download-button.brown.corner.label, .download-button.brown.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.brown.ribbon.label, .play-button.brown.ribbon.label, .download-button.brown.ribbon.label { border-color: #4d4237 !important; } /* Basic */ .ui.basic.brown.label, .play-button.basic.brown.label, .download-button.basic.brown.label { background-color: #FFFFFF !important; color: #6B5B4C !important; border-color: #6B5B4C !important; } .ui.basic.brown.labels a.label:hover, a.ui.basic.brown.label:hover, .play-button.basic.brown.labels a.label:hover, a.play-button.basic.brown.label:hover, .download-button.basic.brown.labels a.label:hover, a.download-button.basic.brown.label:hover { background-color: #FFFFFF !important; color: #5d4e40 !important; border-color: #5d4e40 !important; } /*--- Grey ---*/ .ui.grey.labels .label, .ui.grey.label, .ui.ui.button.editortools-btn.labels .label, .ui.ui.button.editortools-btn.label, .play-button.grey.labels .label, .play-button.grey.label, .download-button.grey.labels .label, .download-button.grey.label, .ui.play-button.button.editortools-btn.labels .label, .ui.play-button.button.editortools-btn.label, .ui.ui.play-button.editortools-btn.labels .label, .ui.ui.play-button.editortools-btn.label, .ui.download-button.button.editortools-btn.labels .label, .ui.download-button.button.editortools-btn.label, .ui.ui.download-button.editortools-btn.labels .label, .ui.ui.download-button.editortools-btn.label { background-color: #42495F !important; border-color: #42495F !important; color: #FFFFFF !important; } /* Link */ .ui.grey.labels .label:hover, a.ui.grey.label:hover, .ui.ui.button.editortools-btn.labels .label:hover, a.ui.ui.button.editortools-btn.label:hover, .play-button.grey.labels .label:hover, a.play-button.grey.label:hover, .download-button.grey.labels .label:hover, a.download-button.grey.label:hover, .ui.play-button.button.editortools-btn.labels .label:hover, a.ui.play-button.button.editortools-btn.label:hover, .ui.ui.play-button.editortools-btn.labels .label:hover, a.ui.ui.play-button.editortools-btn.label:hover, .ui.download-button.button.editortools-btn.labels .label:hover, a.ui.download-button.button.editortools-btn.label:hover, .ui.ui.download-button.editortools-btn.labels .label:hover, a.ui.ui.download-button.editortools-btn.label:hover { background-color: #4c556e !important; border-color: #4c556e !important; color: #FFFFFF !important; } /* Corner */ .ui.grey.corner.label, .ui.grey.corner.label:hover, .ui.ui.button.editortools-btn.corner.label, .ui.ui.button.editortools-btn.corner.label:hover, .play-button.grey.corner.label, .play-button.grey.corner.label:hover, .download-button.grey.corner.label, .download-button.grey.corner.label:hover, .ui.play-button.button.editortools-btn.corner.label, .ui.play-button.button.editortools-btn.corner.label:hover, .ui.ui.play-button.editortools-btn.corner.label, .ui.ui.play-button.editortools-btn.corner.label:hover, .ui.download-button.button.editortools-btn.corner.label, .ui.download-button.button.editortools-btn.corner.label:hover, .ui.ui.download-button.editortools-btn.corner.label, .ui.ui.download-button.editortools-btn.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.grey.ribbon.label, .ui.ui.button.editortools-btn.ribbon.label, .play-button.grey.ribbon.label, .download-button.grey.ribbon.label, .ui.play-button.button.editortools-btn.ribbon.label, .ui.ui.play-button.editortools-btn.ribbon.label, .ui.download-button.button.editortools-btn.ribbon.label, .ui.ui.download-button.editortools-btn.ribbon.label { border-color: #4d4237 !important; } /* Basic */ .ui.basic.grey.label, .ui.basic.ui.button.editortools-btn.label, .play-button.basic.grey.label, .download-button.basic.grey.label, .ui.basic.play-button.button.editortools-btn.label, .ui.basic.ui.play-button.editortools-btn.label, .ui.basic.download-button.button.editortools-btn.label, .ui.basic.ui.download-button.editortools-btn.label { background-color: #FFFFFF !important; color: #42495F !important; border-color: #42495F !important; } .ui.basic.grey.labels a.label:hover, a.ui.basic.grey.label:hover, .ui.basic.ui.button.editortools-btn.labels a.label:hover, a.ui.basic.ui.button.editortools-btn.label:hover, .play-button.basic.grey.labels a.label:hover, a.play-button.basic.grey.label:hover, .download-button.basic.grey.labels a.label:hover, a.download-button.basic.grey.label:hover, .ui.basic.play-button.button.editortools-btn.labels a.label:hover, a.ui.basic.play-button.button.editortools-btn.label:hover, .ui.basic.ui.play-button.editortools-btn.labels a.label:hover, a.ui.basic.ui.play-button.editortools-btn.label:hover, .ui.basic.download-button.button.editortools-btn.labels a.label:hover, a.ui.basic.download-button.button.editortools-btn.label:hover, .ui.basic.ui.download-button.editortools-btn.labels a.label:hover, a.ui.basic.ui.download-button.editortools-btn.label:hover { background-color: #FFFFFF !important; color: #4c556e !important; border-color: #4c556e !important; } /*--- Black ---*/ .ui.black.labels .label, .ui.black.label, .play-button.black.labels .label, .play-button.black.label, .download-button.black.labels .label, .download-button.black.label { background-color: #1B1C1D !important; border-color: #1B1C1D !important; color: #FFFFFF !important; } /* Link */ .ui.black.labels .label:hover, a.ui.black.label:hover, .play-button.black.labels .label:hover, a.play-button.black.label:hover, .download-button.black.labels .label:hover, a.download-button.black.label:hover { background-color: #27292a !important; border-color: #27292a !important; color: #FFFFFF !important; } /* Corner */ .ui.black.corner.label, .ui.black.corner.label:hover, .play-button.black.corner.label, .play-button.black.corner.label:hover, .download-button.black.corner.label, .download-button.black.corner.label:hover { background-color: transparent !important; } /* Ribbon */ .ui.black.ribbon.label, .play-button.black.ribbon.label, .download-button.black.ribbon.label { border-color: #4d4237 !important; } /* Basic */ .ui.basic.black.label, .play-button.basic.black.label, .download-button.basic.black.label { background-color: #FFFFFF !important; color: #1B1C1D !important; border-color: #1B1C1D !important; } .ui.basic.black.labels a.label:hover, a.ui.basic.black.label:hover, .play-button.basic.black.labels a.label:hover, a.play-button.basic.black.label:hover, .download-button.basic.black.labels a.label:hover, a.download-button.basic.black.label:hover { background-color: #FFFFFF !important; color: #27292a !important; border-color: #27292a !important; } /*------------------- Basic --------------------*/ .ui.basic.label, .play-button.basic.label, .download-button.basic.label { background: none #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); box-shadow: none; } /* Link */ a.ui.basic.label:hover, a.play-button.basic.label:hover, a.download-button.basic.label:hover { text-decoration: none; background: none #FFFFFF; color: #1e70bf; box-shadow: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } /* Pointing */ .ui.basic.pointing.label:before, .play-button.basic.pointing.label:before, .download-button.basic.pointing.label:before { border-color: inherit; } /*------------------- Fluid --------------------*/ .ui.label.fluid, .ui.fluid.labels > .label, .play-button.label.fluid, .play-button.fluid.labels > .label, .download-button.label.fluid, .download-button.fluid.labels > .label { width: 100%; box-sizing: border-box; } /*------------------- Inverted --------------------*/ .ui.inverted.labels .label, .ui.inverted.label, .play-button.inverted.labels .label, .play-button.inverted.label, .download-button.inverted.labels .label, .download-button.inverted.label { color: rgba(255, 255, 255, 0.9) !important; } /*------------------- Horizontal --------------------*/ .ui.horizontal.labels .label, .ui.horizontal.label, .play-button.horizontal.labels .label, .play-button.horizontal.label, .download-button.horizontal.labels .label, .download-button.horizontal.label { margin: 0em 0.5em 0em 0em; padding: 0.4em 0.833em; min-width: 3em; text-align: center; } /*------------------- Circular --------------------*/ .ui.circular.labels .label, .ui.circular.label, .play-button.circular.labels .label, .play-button.circular.label, .download-button.circular.labels .label, .download-button.circular.label { min-width: 2em; min-height: 2em; padding: 0.5em !important; line-height: 1em; text-align: center; border-radius: 500rem; } .ui.empty.circular.labels .label, .ui.empty.circular.label, .play-button.empty.circular.labels .label, .play-button.empty.circular.label, .download-button.empty.circular.labels .label, .download-button.empty.circular.label { min-width: 0em; min-height: 0em; overflow: hidden; width: 0.5em; height: 0.5em; vertical-align: baseline; } /*------------------- Pointing --------------------*/ .ui.pointing.label, .play-button.pointing.label, .download-button.pointing.label { position: relative; } .ui.attached.pointing.label, .play-button.attached.pointing.label, .download-button.attached.pointing.label { position: absolute; } .ui.pointing.label:before, .play-button.pointing.label:before, .download-button.pointing.label:before { background-color: inherit; background-image: inherit; border-width: none; border-style: solid; border-color: inherit; } /* Arrow */ .ui.pointing.label:before, .play-button.pointing.label:before, .download-button.pointing.label:before { position: absolute; content: ''; transform: rotate(45deg); background-image: none; z-index: 2; width: 0.6666em; height: 0.6666em; transition: background 0.1s ease; } /*--- Above ---*/ .ui.pointing.label, .ui[class*="pointing above"].label, .play-button.pointing.label, .play-button[class*="pointing above"].label, .download-button.pointing.label, .download-button[class*="pointing above"].label { margin-top: 1em; } .ui.pointing.label:before, .ui[class*="pointing above"].label:before, .play-button.pointing.label:before, .play-button[class*="pointing above"].label:before, .download-button.pointing.label:before, .download-button[class*="pointing above"].label:before { border-width: 1px 0px 0px 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 0%; left: 50%; } /*--- Below ---*/ .ui[class*="bottom pointing"].label, .ui[class*="pointing below"].label, .play-button[class*="bottom pointing"].label, .play-button[class*="pointing below"].label, .download-button[class*="bottom pointing"].label, .download-button[class*="pointing below"].label { margin-top: 0em; margin-bottom: 1em; } .ui[class*="bottom pointing"].label:before, .ui[class*="pointing below"].label:before, .play-button[class*="bottom pointing"].label:before, .play-button[class*="pointing below"].label:before, .download-button[class*="bottom pointing"].label:before, .download-button[class*="pointing below"].label:before { border-width: 0px 1px 1px 0px; top: auto; right: auto; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 100%; left: 50%; } /*--- Left ---*/ .ui[class*="left pointing"].label, .play-button[class*="left pointing"].label, .download-button[class*="left pointing"].label { margin-top: 0em; margin-left: 0.6666em; } .ui[class*="left pointing"].label:before, .play-button[class*="left pointing"].label:before, .download-button[class*="left pointing"].label:before { border-width: 0px 0px 1px 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); bottom: auto; right: auto; top: 50%; left: 0em; } /*--- Right ---*/ .ui[class*="right pointing"].label, .play-button[class*="right pointing"].label, .download-button[class*="right pointing"].label { margin-top: 0em; margin-right: 0.6666em; } .ui[class*="right pointing"].label:before, .play-button[class*="right pointing"].label:before, .download-button[class*="right pointing"].label:before { border-width: 1px 1px 0px 0px; transform: translateX(50%) translateY(-50%) rotate(45deg); top: 50%; right: 0%; bottom: auto; left: auto; } /* Basic Pointing */ /*--- Above ---*/ .ui.basic.pointing.label:before, .ui.basic[class*="pointing above"].label:before, .play-button.basic.pointing.label:before, .play-button.basic[class*="pointing above"].label:before, .download-button.basic.pointing.label:before, .download-button.basic[class*="pointing above"].label:before { margin-top: -1px; } /*--- Below ---*/ .ui.basic[class*="bottom pointing"].label:before, .ui.basic[class*="pointing below"].label:before, .play-button.basic[class*="bottom pointing"].label:before, .play-button.basic[class*="pointing below"].label:before, .download-button.basic[class*="bottom pointing"].label:before, .download-button.basic[class*="pointing below"].label:before { bottom: auto; top: 100%; margin-top: 1px; } /*--- Left ---*/ .ui.basic[class*="left pointing"].label:before, .play-button.basic[class*="left pointing"].label:before, .download-button.basic[class*="left pointing"].label:before { top: 50%; left: -1px; } /*--- Right ---*/ .ui.basic[class*="right pointing"].label:before, .play-button.basic[class*="right pointing"].label:before, .download-button.basic[class*="right pointing"].label:before { top: 50%; right: -1px; } /*------------------ Floating Label -------------------*/ .ui.floating.label, .play-button.floating.label, .download-button.floating.label { position: absolute; z-index: 100; top: -1em; left: 100%; margin: 0em 0em 0em -1.5em !important; } /*------------------- Sizes --------------------*/ .ui.mini.labels .label, .ui.mini.label, .play-button.mini.labels .label, .play-button.mini.label, .download-button.mini.labels .label, .download-button.mini.label { font-size: 0.64285714rem; } .ui.tiny.labels .label, .ui.tiny.label, .play-button.tiny.labels .label, .play-button.tiny.label, .download-button.tiny.labels .label, .download-button.tiny.label { font-size: 0.71428571rem; } .ui.small.labels .label, .ui.small.label, .play-button.small.labels .label, .play-button.small.label, .download-button.small.labels .label, .download-button.small.label { font-size: 0.78571429rem; } .ui.labels .label, .ui.label, .play-button.labels .label, .play-button.label, .download-button.labels .label, .download-button.label { font-size: 0.85714286rem; } .ui.large.labels .label, .ui.large.label, .play-button.large.labels .label, .play-button.large.label, .download-button.large.labels .label, .download-button.large.label { font-size: 1rem; } .ui.big.labels .label, .ui.big.label, .play-button.big.labels .label, .play-button.big.label, .download-button.big.labels .label, .download-button.big.label { font-size: 1.28571429rem; } .ui.huge.labels .label, .ui.huge.label, .play-button.huge.labels .label, .play-button.huge.label, .download-button.huge.labels .label, .download-button.huge.label { font-size: 1.42857143rem; } .ui.massive.labels .label, .ui.massive.label, .play-button.massive.labels .label, .play-button.massive.label, .download-button.massive.labels .label, .download-button.massive.label { font-size: 1.71428571rem; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - List * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* List *******************************/ /*------------------- View --------------------*/ /* List */ /* List Item */ /* Sub List */ /* Sub List Item */ /*------------------- Elements --------------------*/ /* Icon */ /* Image */ /* Content */ /* Header */ /* Description */ /* Link */ /* Header Link */ /* Linked Icon */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Float */ /* Horizontal */ /* Inverted */ /* Link List */ /* Inverted Link List */ /* Selection List */ /* Selection List States */ /* Inverted Selection List */ /* Animated List */ /* Bulleted */ /* Horizontal Bullets */ /* Ordered List */ /* Horizontal Ordered */ /* Divided */ /* Divided Horizontal */ /* Divided */ /* Divided Horizontal */ /* Relaxed */ /* Very Relaxed */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* List *******************************/ ul.ui.list, ol.ui.list, .ui.list, ul.play-button.list, ol.play-button.list, .play-button.list, ul.download-button.list, ol.download-button.list, .download-button.list { list-style-type: none; margin: 1em 0em; padding: 0em 0em; } ul.ui.list:first-child, ol.ui.list:first-child, .ui.list:first-child, ul.play-button.list:first-child, ol.play-button.list:first-child, .play-button.list:first-child, ul.download-button.list:first-child, ol.download-button.list:first-child, .download-button.list:first-child { margin-top: 0em; padding-top: 0em; } ul.ui.list:last-child, ol.ui.list:last-child, .ui.list:last-child, ul.play-button.list:last-child, ol.play-button.list:last-child, .play-button.list:last-child, ul.download-button.list:last-child, ol.download-button.list:last-child, .download-button.list:last-child { margin-bottom: 0em; padding-bottom: 0em; } /******************************* Content *******************************/ /* List Item */ ul.ui.list li, ol.ui.list li, .ui.list > .item, .ui.list .list > .item, ul.play-button.list li, ol.play-button.list li, .play-button.list > .item, .play-button.list .list > .item, ul.download-button.list li, ol.download-button.list li, .download-button.list > .item, .download-button.list .list > .item { display: list-item; table-layout: fixed; list-style-type: none; list-style-position: outside; padding: 0.21428571em 0em; line-height: 1.14285714em; } ul.ui.list > li:first-child:after, ol.ui.list > li:first-child:after, .ui.list > .list > .item, .ui.list > .item:after, ul.play-button.list > li:first-child:after, ol.play-button.list > li:first-child:after, .play-button.list > .list > .item, .play-button.list > .item:after, ul.download-button.list > li:first-child:after, ol.download-button.list > li:first-child:after, .download-button.list > .list > .item, .download-button.list > .item:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } ul.ui.list li:first-child, ol.ui.list li:first-child, .ui.list .list > .item:first-child, .ui.list > .item:first-child, ul.play-button.list li:first-child, ol.play-button.list li:first-child, .play-button.list .list > .item:first-child, .play-button.list > .item:first-child, ul.download-button.list li:first-child, ol.download-button.list li:first-child, .download-button.list .list > .item:first-child, .download-button.list > .item:first-child { padding-top: 0em; } ul.ui.list li:last-child, ol.ui.list li:last-child, .ui.list .list > .item:last-child, .ui.list > .item:last-child, ul.play-button.list li:last-child, ol.play-button.list li:last-child, .play-button.list .list > .item:last-child, .play-button.list > .item:last-child, ul.download-button.list li:last-child, ol.download-button.list li:last-child, .download-button.list .list > .item:last-child, .download-button.list > .item:last-child { padding-bottom: 0em; } /* Child List */ ul.ui.list ul, ol.ui.list ol, .ui.list .list, ul.play-button.list ul, ol.play-button.list ol, .play-button.list .list, ul.download-button.list ul, ol.download-button.list ol, .download-button.list .list { clear: both; margin: 0em; padding: 0.75em 0em 0.25em 0.5em; } /* Child Item */ ul.ui.list ul li, ol.ui.list ol li, .ui.list .list > .item, ul.play-button.list ul li, ol.play-button.list ol li, .play-button.list .list > .item, ul.download-button.list ul li, ol.download-button.list ol li, .download-button.list .list > .item { padding: 0.14285714em 0em; line-height: inherit; } /* Icon */ .ui.list .list > .item > i.icon, .ui.list > .item > i.icon, .play-button.list .list > .item > i.icon, .play-button.list > .item > i.icon, .download-button.list .list > .item > i.icon, .download-button.list > .item > i.icon { display: table-cell; margin: 0em; padding-top: 0em; padding-right: 0.28571429em; vertical-align: top; transition: color 0.1s ease; } .ui.list .list > .item > i.icon:only-child, .ui.list > .item > i.icon:only-child, .play-button.list .list > .item > i.icon:only-child, .play-button.list > .item > i.icon:only-child, .download-button.list .list > .item > i.icon:only-child, .download-button.list > .item > i.icon:only-child { display: inline-block; vertical-align: top; } /* Image */ .ui.list .list > .item > .image, .ui.list > .item > .image, .play-button.list .list > .item > .image, .play-button.list > .item > .image, .download-button.list .list > .item > .image, .download-button.list > .item > .image { display: table-cell; background-color: transparent; margin: 0em; vertical-align: top; } .ui.list .list > .item > .image:not(:only-child):not(img), .ui.list > .item > .image:not(:only-child):not(img), .play-button.list .list > .item > .image:not(:only-child):not(img), .play-button.list > .item > .image:not(:only-child):not(img), .download-button.list .list > .item > .image:not(:only-child):not(img), .download-button.list > .item > .image:not(:only-child):not(img) { padding-right: 0.5em; } .ui.list .list > .item > .image img, .ui.list > .item > .image img, .play-button.list .list > .item > .image img, .play-button.list > .item > .image img, .download-button.list .list > .item > .image img, .download-button.list > .item > .image img { vertical-align: top; } .ui.list .list > .item > img.image, .ui.list .list > .item > .image:only-child, .ui.list > .item > img.image, .ui.list > .item > .image:only-child, .play-button.list .list > .item > img.image, .play-button.list .list > .item > .image:only-child, .play-button.list > .item > img.image, .play-button.list > .item > .image:only-child, .download-button.list .list > .item > img.image, .download-button.list .list > .item > .image:only-child, .download-button.list > .item > img.image, .download-button.list > .item > .image:only-child { display: inline-block; } /* Content */ .ui.list .list > .item > .content, .ui.list > .item > .content, .play-button.list .list > .item > .content, .play-button.list > .item > .content, .download-button.list .list > .item > .content, .download-button.list > .item > .content { line-height: 1.14285714em; } .ui.list .list > .item > .image + .content, .ui.list .list > .item > .icon + .content, .ui.list > .item > .image + .content, .ui.list > .item > .icon + .content, .play-button.list .list > .item > .image + .content, .play-button.list .list > .item > .icon + .content, .play-button.list > .item > .image + .content, .play-button.list > .item > .icon + .content, .download-button.list .list > .item > .image + .content, .download-button.list .list > .item > .icon + .content, .download-button.list > .item > .image + .content, .download-button.list > .item > .icon + .content { display: table-cell; padding: 0em 0em 0em 0.5em; vertical-align: top; } .ui.list .list > .item > img.image + .content, .ui.list > .item > img.image + .content, .play-button.list .list > .item > img.image + .content, .play-button.list > .item > img.image + .content, .download-button.list .list > .item > img.image + .content, .download-button.list > .item > img.image + .content { display: inline-block; } .ui.list .list > .item > .content > .list, .ui.list > .item > .content > .list, .play-button.list .list > .item > .content > .list, .play-button.list > .item > .content > .list, .download-button.list .list > .item > .content > .list, .download-button.list > .item > .content > .list { margin-left: 0em; padding-left: 0em; } /* Header */ .ui.list .list > .item .header, .ui.list > .item .header, .play-button.list .list > .item .header, .play-button.list > .item .header, .download-button.list .list > .item .header, .download-button.list > .item .header { display: block; margin: 0em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; color: rgba(0, 0, 0, 0.87); } /* Description */ .ui.list .list > .item .description, .ui.list > .item .description, .play-button.list .list > .item .description, .play-button.list > .item .description, .download-button.list .list > .item .description, .download-button.list > .item .description { display: block; color: rgba(0, 0, 0, 0.7); } /* Child Link */ .ui.list > .item a, .ui.list .list > .item a, .play-button.list > .item a, .play-button.list .list > .item a, .download-button.list > .item a, .download-button.list .list > .item a { cursor: pointer; } /* Linking Item */ .ui.list .list > a.item, .ui.list > a.item, .play-button.list .list > a.item, .play-button.list > a.item, .download-button.list .list > a.item, .download-button.list > a.item { cursor: pointer; color: #4183C4; } .ui.list .list > a.item:hover, .ui.list > a.item:hover, .play-button.list .list > a.item:hover, .play-button.list > a.item:hover, .download-button.list .list > a.item:hover, .download-button.list > a.item:hover { color: #1e70bf; } /* Linked Item Icons */ .ui.list .list > a.item i.icon, .ui.list > a.item i.icon, .play-button.list .list > a.item i.icon, .play-button.list > a.item i.icon, .download-button.list .list > a.item i.icon, .download-button.list > a.item i.icon { color: rgba(0, 0, 0, 0.4); } /* Header Link */ .ui.list .list > .item a.header, .ui.list > .item a.header, .play-button.list .list > .item a.header, .play-button.list > .item a.header, .download-button.list .list > .item a.header, .download-button.list > .item a.header { cursor: pointer; color: #4183C4 !important; } .ui.list .list > .item a.header:hover, .ui.list > .item a.header:hover, .play-button.list .list > .item a.header:hover, .play-button.list > .item a.header:hover, .download-button.list .list > .item a.header:hover, .download-button.list > .item a.header:hover { color: #1e70bf !important; } /* Floated Content */ .ui[class*="left floated"].list, .play-button[class*="left floated"].list, .download-button[class*="left floated"].list { float: left; } .ui[class*="right floated"].list, .play-button[class*="right floated"].list, .download-button[class*="right floated"].list { float: right; } .ui.list .list > .item [class*="left floated"], .ui.list > .item [class*="left floated"], .play-button.list .list > .item [class*="left floated"], .play-button.list > .item [class*="left floated"], .download-button.list .list > .item [class*="left floated"], .download-button.list > .item [class*="left floated"] { float: left; margin: 0em 1em 0em 0em; } .ui.list .list > .item [class*="right floated"], .ui.list > .item [class*="right floated"], .play-button.list .list > .item [class*="right floated"], .play-button.list > .item [class*="right floated"], .download-button.list .list > .item [class*="right floated"], .download-button.list > .item [class*="right floated"] { float: right; margin: 0em 0em 0em 1em; } /******************************* Coupling *******************************/ .ui.menu .ui.list > .item, .ui.menu .ui.list .list > .item, .play-button.menu .play-button.list > .item, .play-button.menu .play-button.list .list > .item, .download-button.menu .download-button.list > .item, .download-button.menu .download-button.list .list > .item { display: list-item; table-layout: fixed; background-color: transparent; list-style-type: none; list-style-position: outside; padding: 0.21428571em 0em; line-height: 1.14285714em; } .ui.menu .ui.list .list > .item:before, .ui.menu .ui.list > .item:before, .play-button.menu .play-button.list .list > .item:before, .play-button.menu .play-button.list > .item:before, .download-button.menu .download-button.list .list > .item:before, .download-button.menu .download-button.list > .item:before { border: none; background: none; } .ui.menu .ui.list .list > .item:first-child, .ui.menu .ui.list > .item:first-child, .play-button.menu .play-button.list .list > .item:first-child, .play-button.menu .play-button.list > .item:first-child, .download-button.menu .download-button.list .list > .item:first-child, .download-button.menu .download-button.list > .item:first-child { padding-top: 0em; } .ui.menu .ui.list .list > .item:last-child, .ui.menu .ui.list > .item:last-child, .play-button.menu .play-button.list .list > .item:last-child, .play-button.menu .play-button.list > .item:last-child, .download-button.menu .download-button.list .list > .item:last-child, .download-button.menu .download-button.list > .item:last-child { padding-bottom: 0em; } /******************************* Types *******************************/ /*------------------- Horizontal --------------------*/ .ui.horizontal.list, .play-button.horizontal.list, .download-button.horizontal.list { display: inline-block; font-size: 0em; } .ui.horizontal.list > .item, .play-button.horizontal.list > .item, .download-button.horizontal.list > .item { display: inline-block; margin-left: 1em; font-size: 1rem; } .ui.horizontal.list:not(.celled) > .item:first-child, .play-button.horizontal.list:not(.celled) > .item:first-child, .download-button.horizontal.list:not(.celled) > .item:first-child { margin-left: 0em !important; padding-left: 0em !important; } .ui.horizontal.list .list, .play-button.horizontal.list .list, .download-button.horizontal.list .list { padding-left: 0em; padding-bottom: 0em; } .ui.horizontal.list > .item > .image, .ui.horizontal.list .list > .item > .image, .ui.horizontal.list > .item > .icon, .ui.horizontal.list .list > .item > .icon, .ui.horizontal.list > .item > .content, .ui.horizontal.list .list > .item > .content, .play-button.horizontal.list > .item > .image, .play-button.horizontal.list .list > .item > .image, .play-button.horizontal.list > .item > .icon, .play-button.horizontal.list .list > .item > .icon, .play-button.horizontal.list > .item > .content, .play-button.horizontal.list .list > .item > .content, .download-button.horizontal.list > .item > .image, .download-button.horizontal.list .list > .item > .image, .download-button.horizontal.list > .item > .icon, .download-button.horizontal.list .list > .item > .icon, .download-button.horizontal.list > .item > .content, .download-button.horizontal.list .list > .item > .content { vertical-align: middle; } /* Padding on all elements */ .ui.horizontal.list > .item:first-child, .ui.horizontal.list > .item:last-child, .play-button.horizontal.list > .item:first-child, .play-button.horizontal.list > .item:last-child, .download-button.horizontal.list > .item:first-child, .download-button.horizontal.list > .item:last-child { padding-top: 0.21428571em; padding-bottom: 0.21428571em; } /* Horizontal List */ .ui.horizontal.list > .item > i.icon, .play-button.horizontal.list > .item > i.icon, .download-button.horizontal.list > .item > i.icon { margin: 0em; padding: 0em 0.25em 0em 0em; } .ui.horizontal.list > .item > .icon, .ui.horizontal.list > .item > .icon + .content, .play-button.horizontal.list > .item > .icon, .play-button.horizontal.list > .item > .icon + .content, .download-button.horizontal.list > .item > .icon, .download-button.horizontal.list > .item > .icon + .content { float: none; display: inline-block; } /******************************* States *******************************/ /*------------------- Disabled --------------------*/ .ui.list .list > .disabled.item, .ui.list > .disabled.item, .play-button.list .list > .disabled.item, .play-button.list > .disabled.item, .download-button.list .list > .disabled.item, .download-button.list > .disabled.item { pointer-events: none; color: rgba(40, 40, 40, 0.3) !important; } .ui.inverted.list .list > .disabled.item, .ui.inverted.list > .disabled.item, .play-button.inverted.list .list > .disabled.item, .play-button.inverted.list > .disabled.item, .download-button.inverted.list .list > .disabled.item, .download-button.inverted.list > .disabled.item { color: rgba(225, 225, 225, 0.3) !important; } /*------------------- Hover --------------------*/ .ui.list .list > a.item:hover .icon, .ui.list > a.item:hover .icon, .play-button.list .list > a.item:hover .icon, .play-button.list > a.item:hover .icon, .download-button.list .list > a.item:hover .icon, .download-button.list > a.item:hover .icon { color: rgba(0, 0, 0, 0.87); } /******************************* Variations *******************************/ /*------------------- Inverted --------------------*/ .ui.inverted.list .list > a.item > .icon, .ui.inverted.list > a.item > .icon, .play-button.inverted.list .list > a.item > .icon, .play-button.inverted.list > a.item > .icon, .download-button.inverted.list .list > a.item > .icon, .download-button.inverted.list > a.item > .icon { color: rgba(255, 255, 255, 0.7); } .ui.inverted.list .list > .item .header, .ui.inverted.list > .item .header, .play-button.inverted.list .list > .item .header, .play-button.inverted.list > .item .header, .download-button.inverted.list .list > .item .header, .download-button.inverted.list > .item .header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.list .list > .item .description, .ui.inverted.list > .item .description, .play-button.inverted.list .list > .item .description, .play-button.inverted.list > .item .description, .download-button.inverted.list .list > .item .description, .download-button.inverted.list > .item .description { color: rgba(255, 255, 255, 0.7); } /* Item Link */ .ui.inverted.list .list > a.item, .ui.inverted.list > a.item, .play-button.inverted.list .list > a.item, .play-button.inverted.list > a.item, .download-button.inverted.list .list > a.item, .download-button.inverted.list > a.item { cursor: pointer; color: rgba(255, 255, 255, 0.9); } .ui.inverted.list .list > a.item:hover, .ui.inverted.list > a.item:hover, .play-button.inverted.list .list > a.item:hover, .play-button.inverted.list > a.item:hover, .download-button.inverted.list .list > a.item:hover, .download-button.inverted.list > a.item:hover { color: #1e70bf; } /* Linking Content */ .ui.inverted.list .item a:not(.ui), .play-button.inverted.list .item a:not(.ui), .download-button.inverted.list .item a:not(.ui) { color: rgba(255, 255, 255, 0.9) !important; } .ui.inverted.list .item a:not(.ui):hover, .play-button.inverted.list .item a:not(.ui):hover, .download-button.inverted.list .item a:not(.ui):hover { color: #1e70bf !important; } /*------------------- Aligned --------------------*/ .ui.list[class*="top aligned"] .image, .ui.list[class*="top aligned"] .content, .ui.list [class*="top aligned"], .play-button.list[class*="top aligned"] .image, .play-button.list[class*="top aligned"] .content, .play-button.list [class*="top aligned"], .download-button.list[class*="top aligned"] .image, .download-button.list[class*="top aligned"] .content, .download-button.list [class*="top aligned"] { vertical-align: top !important; } .ui.list[class*="middle aligned"] .image, .ui.list[class*="middle aligned"] .content, .ui.list [class*="middle aligned"], .play-button.list[class*="middle aligned"] .image, .play-button.list[class*="middle aligned"] .content, .play-button.list [class*="middle aligned"], .download-button.list[class*="middle aligned"] .image, .download-button.list[class*="middle aligned"] .content, .download-button.list [class*="middle aligned"] { vertical-align: middle !important; } .ui.list[class*="bottom aligned"] .image, .ui.list[class*="bottom aligned"] .content, .ui.list [class*="bottom aligned"], .play-button.list[class*="bottom aligned"] .image, .play-button.list[class*="bottom aligned"] .content, .play-button.list [class*="bottom aligned"], .download-button.list[class*="bottom aligned"] .image, .download-button.list[class*="bottom aligned"] .content, .download-button.list [class*="bottom aligned"] { vertical-align: bottom !important; } /*------------------- Link --------------------*/ .ui.link.list .item, .ui.link.list a.item, .ui.link.list .item a:not(.ui), .play-button.link.list .item, .play-button.link.list a.item, .play-button.link.list .item a:not(.ui), .download-button.link.list .item, .download-button.link.list a.item, .download-button.link.list .item a:not(.ui) { color: rgba(0, 0, 0, 0.4); transition: 0.1s color ease; } .ui.link.list a.item:hover, .ui.link.list .item a:not(.ui):hover, .play-button.link.list a.item:hover, .play-button.link.list .item a:not(.ui):hover, .download-button.link.list a.item:hover, .download-button.link.list .item a:not(.ui):hover { color: rgba(0, 0, 0, 0.8); } .ui.link.list a.item:active, .ui.link.list .item a:not(.ui):active, .play-button.link.list a.item:active, .play-button.link.list .item a:not(.ui):active, .download-button.link.list a.item:active, .download-button.link.list .item a:not(.ui):active { color: rgba(0, 0, 0, 0.9); } .ui.link.list .active.item, .ui.link.list .active.item a:not(.ui), .play-button.link.list .active.item, .play-button.link.list .active.item a:not(.ui), .download-button.link.list .active.item, .download-button.link.list .active.item a:not(.ui) { color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.inverted.link.list .item, .ui.inverted.link.list a.item, .ui.inverted.link.list .item a:not(.ui), .play-button.inverted.link.list .item, .play-button.inverted.link.list a.item, .play-button.inverted.link.list .item a:not(.ui), .download-button.inverted.link.list .item, .download-button.inverted.link.list a.item, .download-button.inverted.link.list .item a:not(.ui) { color: rgba(255, 255, 255, 0.5); } .ui.inverted.link.list a.item:hover, .ui.inverted.link.list .item a:not(.ui):hover, .play-button.inverted.link.list a.item:hover, .play-button.inverted.link.list .item a:not(.ui):hover, .download-button.inverted.link.list a.item:hover, .download-button.inverted.link.list .item a:not(.ui):hover { color: #ffffff; } .ui.inverted.link.list a.item:active, .ui.inverted.link.list .item a:not(.ui):active, .play-button.inverted.link.list a.item:active, .play-button.inverted.link.list .item a:not(.ui):active, .download-button.inverted.link.list a.item:active, .download-button.inverted.link.list .item a:not(.ui):active { color: #ffffff; } .ui.inverted.link.list a.active.item, .ui.inverted.link.list .active.item a:not(.ui), .play-button.inverted.link.list a.active.item, .play-button.inverted.link.list .active.item a:not(.ui), .download-button.inverted.link.list a.active.item, .download-button.inverted.link.list .active.item a:not(.ui) { color: #ffffff; } /*------------------- Selection --------------------*/ .ui.selection.list .list > .item, .ui.selection.list > .item, .play-button.selection.list .list > .item, .play-button.selection.list > .item, .download-button.selection.list .list > .item, .download-button.selection.list > .item { cursor: pointer; background: transparent; padding: 0.5em 0.5em; margin: 0em; color: rgba(0, 0, 0, 0.4); border-radius: 0.5em; transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease; } .ui.selection.list .list > .item:last-child, .ui.selection.list > .item:last-child, .play-button.selection.list .list > .item:last-child, .play-button.selection.list > .item:last-child, .download-button.selection.list .list > .item:last-child, .download-button.selection.list > .item:last-child { margin-bottom: 0em; } .ui.selection.list.list > .item:hover, .ui.selection.list > .item:hover, .play-button.selection.list.list > .item:hover, .play-button.selection.list > .item:hover, .download-button.selection.list.list > .item:hover, .download-button.selection.list > .item:hover { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.8); } .ui.selection.list .list > .item:active, .ui.selection.list > .item:active, .play-button.selection.list .list > .item:active, .play-button.selection.list > .item:active, .download-button.selection.list .list > .item:active, .download-button.selection.list > .item:active { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.9); } .ui.selection.list .list > .item.active, .ui.selection.list > .item.active, .play-button.selection.list .list > .item.active, .play-button.selection.list > .item.active, .download-button.selection.list .list > .item.active, .download-button.selection.list > .item.active { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.inverted.selection.list > .item, .ui.inverted.selection.list > .item, .play-button.inverted.selection.list > .item, .play-button.inverted.selection.list > .item, .download-button.inverted.selection.list > .item, .download-button.inverted.selection.list > .item { background: transparent; color: rgba(255, 255, 255, 0.5); } .ui.inverted.selection.list > .item:hover, .ui.inverted.selection.list > .item:hover, .play-button.inverted.selection.list > .item:hover, .play-button.inverted.selection.list > .item:hover, .download-button.inverted.selection.list > .item:hover, .download-button.inverted.selection.list > .item:hover { background: rgba(255, 255, 255, 0.02); color: #ffffff; } .ui.inverted.selection.list > .item:active, .ui.inverted.selection.list > .item:active, .play-button.inverted.selection.list > .item:active, .play-button.inverted.selection.list > .item:active, .download-button.inverted.selection.list > .item:active, .download-button.inverted.selection.list > .item:active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .ui.inverted.selection.list > .item.active, .ui.inverted.selection.list > .item.active, .play-button.inverted.selection.list > .item.active, .play-button.inverted.selection.list > .item.active, .download-button.inverted.selection.list > .item.active, .download-button.inverted.selection.list > .item.active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* Celled / Divided Selection List */ .ui.celled.selection.list .list > .item, .ui.divided.selection.list .list > .item, .ui.celled.selection.list > .item, .ui.divided.selection.list > .item, .play-button.celled.selection.list .list > .item, .play-button.divided.selection.list .list > .item, .play-button.celled.selection.list > .item, .play-button.divided.selection.list > .item, .download-button.celled.selection.list .list > .item, .download-button.divided.selection.list .list > .item, .download-button.celled.selection.list > .item, .download-button.divided.selection.list > .item { border-radius: 0em; } /*------------------- Animated --------------------*/ .ui.animated.list > .item, .play-button.animated.list > .item, .download-button.animated.list > .item { transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s; } .ui.animated.list:not(.horizontal) > .item:hover, .play-button.animated.list:not(.horizontal) > .item:hover, .download-button.animated.list:not(.horizontal) > .item:hover { padding-left: 1em; } /*------------------- Fitted --------------------*/ .ui.fitted.list:not(.selection) .list > .item, .ui.fitted.list:not(.selection) > .item, .play-button.fitted.list:not(.selection) .list > .item, .play-button.fitted.list:not(.selection) > .item, .download-button.fitted.list:not(.selection) .list > .item, .download-button.fitted.list:not(.selection) > .item { padding-left: 0em; padding-right: 0em; } .ui.fitted.selection.list .list > .item, .ui.fitted.selection.list > .item, .play-button.fitted.selection.list .list > .item, .play-button.fitted.selection.list > .item, .download-button.fitted.selection.list .list > .item, .download-button.fitted.selection.list > .item { margin-left: -0.5em; margin-right: -0.5em; } /*------------------- Bulleted --------------------*/ ul.ui.list, .ui.bulleted.list, ul.play-button.list, .play-button.bulleted.list, ul.download-button.list, .download-button.bulleted.list { margin-left: 1.25rem; } ul.ui.list li, .ui.bulleted.list .list > .item, .ui.bulleted.list > .item, ul.play-button.list li, .play-button.bulleted.list .list > .item, .play-button.bulleted.list > .item, ul.download-button.list li, .download-button.bulleted.list .list > .item, .download-button.bulleted.list > .item { position: relative; } ul.ui.list li:before, .ui.bulleted.list .list > .item:before, .ui.bulleted.list > .item:before, ul.play-button.list li:before, .play-button.bulleted.list .list > .item:before, .play-button.bulleted.list > .item:before, ul.download-button.list li:before, .download-button.bulleted.list .list > .item:before, .download-button.bulleted.list > .item:before { user-select: none; pointer-events: none; position: absolute; top: auto; left: auto; font-weight: normal; margin-left: -1.25rem; content: '•'; opacity: 1; color: inherit; vertical-align: top; } ul.ui.list li:before, .ui.bulleted.list .list > a.item:before, .ui.bulleted.list > a.item:before, ul.play-button.list li:before, .play-button.bulleted.list .list > a.item:before, .play-button.bulleted.list > a.item:before, ul.download-button.list li:before, .download-button.bulleted.list .list > a.item:before, .download-button.bulleted.list > a.item:before { color: rgba(0, 0, 0, 0.87); } ul.ui.list ul, .ui.bulleted.list .list, ul.play-button.list ul, .play-button.bulleted.list .list, ul.download-button.list ul, .download-button.bulleted.list .list { padding-left: 1.25rem; } /* Horizontal Bulleted */ ul.ui.horizontal.bulleted.list, .ui.horizontal.bulleted.list, ul.play-button.horizontal.bulleted.list, .play-button.horizontal.bulleted.list, ul.download-button.horizontal.bulleted.list, .download-button.horizontal.bulleted.list { margin-left: 0em; } ul.ui.horizontal.bulleted.list li, .ui.horizontal.bulleted.list > .item, ul.play-button.horizontal.bulleted.list li, .play-button.horizontal.bulleted.list > .item, ul.download-button.horizontal.bulleted.list li, .download-button.horizontal.bulleted.list > .item { margin-left: 1.75rem; } ul.ui.horizontal.bulleted.list li:first-child, .ui.horizontal.bulleted.list > .item:first-child, ul.play-button.horizontal.bulleted.list li:first-child, .play-button.horizontal.bulleted.list > .item:first-child, ul.download-button.horizontal.bulleted.list li:first-child, .download-button.horizontal.bulleted.list > .item:first-child { margin-left: 0em; } ul.ui.horizontal.bulleted.list li::before, .ui.horizontal.bulleted.list > .item::before, ul.play-button.horizontal.bulleted.list li::before, .play-button.horizontal.bulleted.list > .item::before, ul.download-button.horizontal.bulleted.list li::before, .download-button.horizontal.bulleted.list > .item::before { color: rgba(0, 0, 0, 0.87); } ul.ui.horizontal.bulleted.list li:first-child::before, .ui.horizontal.bulleted.list > .item:first-child::before, ul.play-button.horizontal.bulleted.list li:first-child::before, .play-button.horizontal.bulleted.list > .item:first-child::before, ul.download-button.horizontal.bulleted.list li:first-child::before, .download-button.horizontal.bulleted.list > .item:first-child::before { display: none; } /*------------------- Ordered --------------------*/ ol.ui.list, .ui.ordered.list, .ui.ordered.list .list, ol.ui.list ol, ol.play-button.list, .play-button.ordered.list, .play-button.ordered.list .list, ol.play-button.list ol, ol.download-button.list, .download-button.ordered.list, .download-button.ordered.list .list, ol.download-button.list ol { counter-reset: ordered; margin-left: 1.25rem; list-style-type: none; } ol.ui.list li, .ui.ordered.list .list > .item, .ui.ordered.list > .item, ol.play-button.list li, .play-button.ordered.list .list > .item, .play-button.ordered.list > .item, ol.download-button.list li, .download-button.ordered.list .list > .item, .download-button.ordered.list > .item { list-style-type: none; position: relative; } ol.ui.list li:before, .ui.ordered.list .list > .item:before, .ui.ordered.list > .item:before, ol.play-button.list li:before, .play-button.ordered.list .list > .item:before, .play-button.ordered.list > .item:before, ol.download-button.list li:before, .download-button.ordered.list .list > .item:before, .download-button.ordered.list > .item:before { position: absolute; top: auto; left: auto; user-select: none; pointer-events: none; margin-left: -1.25rem; counter-increment: ordered; content: counters(ordered, ".") " "; text-align: right; color: rgba(0, 0, 0, 0.87); vertical-align: middle; opacity: 0.8; } ol.ui.inverted.list li:before, .ui.ordered.inverted.list .list > .item:before, .ui.ordered.inverted.list > .item:before, ol.play-button.inverted.list li:before, .play-button.ordered.inverted.list .list > .item:before, .play-button.ordered.inverted.list > .item:before, ol.download-button.inverted.list li:before, .download-button.ordered.inverted.list .list > .item:before, .download-button.ordered.inverted.list > .item:before { color: rgba(255, 255, 255, 0.7); } /* Value */ .ui.ordered.list > .list > .item[data-value], .ui.ordered.list > .item[data-value], .play-button.ordered.list > .list > .item[data-value], .play-button.ordered.list > .item[data-value], .download-button.ordered.list > .list > .item[data-value], .download-button.ordered.list > .item[data-value] { content: attr(data-value); } ol.ui.list li[value]:before, ol.play-button.list li[value]:before, ol.download-button.list li[value]:before { content: attr(value); } /* Child Lists */ ol.ui.list ol, .ui.ordered.list .list, ol.play-button.list ol, .play-button.ordered.list .list, ol.download-button.list ol, .download-button.ordered.list .list { margin-left: 1em; } ol.ui.list ol li:before, .ui.ordered.list .list > .item:before, ol.play-button.list ol li:before, .play-button.ordered.list .list > .item:before, ol.download-button.list ol li:before, .download-button.ordered.list .list > .item:before { margin-left: -2em; } /* Horizontal Ordered */ ol.ui.horizontal.list, .ui.ordered.horizontal.list, ol.play-button.horizontal.list, .play-button.ordered.horizontal.list, ol.download-button.horizontal.list, .download-button.ordered.horizontal.list { margin-left: 0em; } ol.ui.horizontal.list li:before, .ui.ordered.horizontal.list .list > .item:before, .ui.ordered.horizontal.list > .item:before, ol.play-button.horizontal.list li:before, .play-button.ordered.horizontal.list .list > .item:before, .play-button.ordered.horizontal.list > .item:before, ol.download-button.horizontal.list li:before, .download-button.ordered.horizontal.list .list > .item:before, .download-button.ordered.horizontal.list > .item:before { position: static; margin: 0em 0.5em 0em 0em; } /*------------------- Divided --------------------*/ .ui.divided.list > .item, .play-button.divided.list > .item, .download-button.divided.list > .item { border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.divided.list .list > .item, .play-button.divided.list .list > .item, .download-button.divided.list .list > .item { border-top: none; } .ui.divided.list .item .list > .item, .play-button.divided.list .item .list > .item, .download-button.divided.list .item .list > .item { border-top: none; } .ui.divided.list .list > .item:first-child, .ui.divided.list > .item:first-child, .play-button.divided.list .list > .item:first-child, .play-button.divided.list > .item:first-child, .download-button.divided.list .list > .item:first-child, .download-button.divided.list > .item:first-child { border-top: none; } /* Sub Menu */ .ui.divided.list:not(.horizontal) .list > .item:first-child, .play-button.divided.list:not(.horizontal) .list > .item:first-child, .download-button.divided.list:not(.horizontal) .list > .item:first-child { border-top-width: 1px; } /* Divided bulleted */ .ui.divided.bulleted.list:not(.horizontal), .ui.divided.bulleted.list .list, .play-button.divided.bulleted.list:not(.horizontal), .play-button.divided.bulleted.list .list, .download-button.divided.bulleted.list:not(.horizontal), .download-button.divided.bulleted.list .list { margin-left: 0em; padding-left: 0em; } .ui.divided.bulleted.list > .item:not(.horizontal), .play-button.divided.bulleted.list > .item:not(.horizontal), .download-button.divided.bulleted.list > .item:not(.horizontal) { padding-left: 1.25rem; } /* Divided Ordered */ .ui.divided.ordered.list, .play-button.divided.ordered.list, .download-button.divided.ordered.list { margin-left: 0em; } .ui.divided.ordered.list .list > .item, .ui.divided.ordered.list > .item, .play-button.divided.ordered.list .list > .item, .play-button.divided.ordered.list > .item, .download-button.divided.ordered.list .list > .item, .download-button.divided.ordered.list > .item { padding-left: 1.25rem; } .ui.divided.ordered.list .item .list, .play-button.divided.ordered.list .item .list, .download-button.divided.ordered.list .item .list { margin-left: 0em; margin-right: 0em; padding-bottom: 0.21428571em; } .ui.divided.ordered.list .item .list > .item, .play-button.divided.ordered.list .item .list > .item, .download-button.divided.ordered.list .item .list > .item { padding-left: 1em; } /* Divided Selection */ .ui.divided.selection.list .list > .item, .ui.divided.selection.list > .item, .play-button.divided.selection.list .list > .item, .play-button.divided.selection.list > .item, .download-button.divided.selection.list .list > .item, .download-button.divided.selection.list > .item { margin: 0em; border-radius: 0em; } /* Divided horizontal */ .ui.divided.horizontal.list, .play-button.divided.horizontal.list, .download-button.divided.horizontal.list { margin-left: 0em; } .ui.divided.horizontal.list > .item:not(:first-child), .play-button.divided.horizontal.list > .item:not(:first-child), .download-button.divided.horizontal.list > .item:not(:first-child) { padding-left: 0.5em; } .ui.divided.horizontal.list > .item:not(:last-child), .play-button.divided.horizontal.list > .item:not(:last-child), .download-button.divided.horizontal.list > .item:not(:last-child) { padding-right: 0.5em; } .ui.divided.horizontal.list > .item, .play-button.divided.horizontal.list > .item, .download-button.divided.horizontal.list > .item { border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.15); margin: 0em; line-height: 0.6; } .ui.horizontal.divided.list > .item:first-child, .play-button.horizontal.divided.list > .item:first-child, .download-button.horizontal.divided.list > .item:first-child { border-left: none; } /* Inverted */ .ui.divided.inverted.list > .item, .ui.divided.inverted.list > .list, .ui.divided.inverted.horizontal.list > .item, .play-button.divided.inverted.list > .item, .play-button.divided.inverted.list > .list, .play-button.divided.inverted.horizontal.list > .item, .download-button.divided.inverted.list > .item, .download-button.divided.inverted.list > .list, .download-button.divided.inverted.horizontal.list > .item { border-color: rgba(255, 255, 255, 0.1); } /*------------------- Celled --------------------*/ .ui.celled.list > .item, .ui.celled.list > .list, .play-button.celled.list > .item, .play-button.celled.list > .list, .download-button.celled.list > .item, .download-button.celled.list > .list { border-top: 1px solid rgba(34, 36, 38, 0.15); padding-left: 0.5em; padding-right: 0.5em; } .ui.celled.list > .item:last-child, .play-button.celled.list > .item:last-child, .download-button.celled.list > .item:last-child { border-bottom: 1px solid rgba(34, 36, 38, 0.15); } /* Padding on all elements */ .ui.celled.list > .item:first-child, .ui.celled.list > .item:last-child, .play-button.celled.list > .item:first-child, .play-button.celled.list > .item:last-child, .download-button.celled.list > .item:first-child, .download-button.celled.list > .item:last-child { padding-top: 0.21428571em; padding-bottom: 0.21428571em; } /* Sub Menu */ .ui.celled.list .item .list > .item, .play-button.celled.list .item .list > .item, .download-button.celled.list .item .list > .item { border-width: 0px; } .ui.celled.list .list > .item:first-child, .play-button.celled.list .list > .item:first-child, .download-button.celled.list .list > .item:first-child { border-top-width: 0px; } /* Celled Bulleted */ .ui.celled.bulleted.list, .play-button.celled.bulleted.list, .download-button.celled.bulleted.list { margin-left: 0em; } .ui.celled.bulleted.list .list > .item, .ui.celled.bulleted.list > .item, .play-button.celled.bulleted.list .list > .item, .play-button.celled.bulleted.list > .item, .download-button.celled.bulleted.list .list > .item, .download-button.celled.bulleted.list > .item { padding-left: 1.25rem; } .ui.celled.bulleted.list .item .list, .play-button.celled.bulleted.list .item .list, .download-button.celled.bulleted.list .item .list { margin-left: -1.25rem; margin-right: -1.25rem; padding-bottom: 0.21428571em; } /* Celled Ordered */ .ui.celled.ordered.list, .play-button.celled.ordered.list, .download-button.celled.ordered.list { margin-left: 0em; } .ui.celled.ordered.list .list > .item, .ui.celled.ordered.list > .item, .play-button.celled.ordered.list .list > .item, .play-button.celled.ordered.list > .item, .download-button.celled.ordered.list .list > .item, .download-button.celled.ordered.list > .item { padding-left: 1.25rem; } .ui.celled.ordered.list .item .list, .play-button.celled.ordered.list .item .list, .download-button.celled.ordered.list .item .list { margin-left: 0em; margin-right: 0em; padding-bottom: 0.21428571em; } .ui.celled.ordered.list .list > .item, .play-button.celled.ordered.list .list > .item, .download-button.celled.ordered.list .list > .item { padding-left: 1em; } /* Celled Horizontal */ .ui.horizontal.celled.list, .play-button.horizontal.celled.list, .download-button.horizontal.celled.list { margin-left: 0em; } .ui.horizontal.celled.list .list > .item, .ui.horizontal.celled.list > .item, .play-button.horizontal.celled.list .list > .item, .play-button.horizontal.celled.list > .item, .download-button.horizontal.celled.list .list > .item, .download-button.horizontal.celled.list > .item { border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.15); margin: 0em; padding-left: 0.5em; padding-right: 0.5em; line-height: 0.6; } .ui.horizontal.celled.list .list > .item:last-child, .ui.horizontal.celled.list > .item:last-child, .play-button.horizontal.celled.list .list > .item:last-child, .play-button.horizontal.celled.list > .item:last-child, .download-button.horizontal.celled.list .list > .item:last-child, .download-button.horizontal.celled.list > .item:last-child { border-bottom: none; border-right: 1px solid rgba(34, 36, 38, 0.15); } /* Inverted */ .ui.celled.inverted.list > .item, .ui.celled.inverted.list > .list, .play-button.celled.inverted.list > .item, .play-button.celled.inverted.list > .list, .download-button.celled.inverted.list > .item, .download-button.celled.inverted.list > .list { border-color: 1px solid rgba(255, 255, 255, 0.1); } .ui.celled.inverted.horizontal.list .list > .item, .ui.celled.inverted.horizontal.list > .item, .play-button.celled.inverted.horizontal.list .list > .item, .play-button.celled.inverted.horizontal.list > .item, .download-button.celled.inverted.horizontal.list .list > .item, .download-button.celled.inverted.horizontal.list > .item { border-color: 1px solid rgba(255, 255, 255, 0.1); } /*------------------- Relaxed --------------------*/ .ui.relaxed.list:not(.horizontal) > .item:not(:first-child), .play-button.relaxed.list:not(.horizontal) > .item:not(:first-child), .download-button.relaxed.list:not(.horizontal) > .item:not(:first-child) { padding-top: 0.42857143em; } .ui.relaxed.list:not(.horizontal) > .item:not(:last-child), .play-button.relaxed.list:not(.horizontal) > .item:not(:last-child), .download-button.relaxed.list:not(.horizontal) > .item:not(:last-child) { padding-bottom: 0.42857143em; } .ui.horizontal.relaxed.list .list > .item:not(:first-child), .ui.horizontal.relaxed.list > .item:not(:first-child), .play-button.horizontal.relaxed.list .list > .item:not(:first-child), .play-button.horizontal.relaxed.list > .item:not(:first-child), .download-button.horizontal.relaxed.list .list > .item:not(:first-child), .download-button.horizontal.relaxed.list > .item:not(:first-child) { padding-left: 1rem; } .ui.horizontal.relaxed.list .list > .item:not(:last-child), .ui.horizontal.relaxed.list > .item:not(:last-child), .play-button.horizontal.relaxed.list .list > .item:not(:last-child), .play-button.horizontal.relaxed.list > .item:not(:last-child), .download-button.horizontal.relaxed.list .list > .item:not(:last-child), .download-button.horizontal.relaxed.list > .item:not(:last-child) { padding-right: 1rem; } /* Very Relaxed */ .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child), .play-button[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child), .download-button[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { padding-top: 0.85714286em; } .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child), .play-button[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child), .download-button[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { padding-bottom: 0.85714286em; } .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child), .play-button.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), .play-button.horizontal[class*="very relaxed"].list > .item:not(:first-child), .download-button.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), .download-button.horizontal[class*="very relaxed"].list > .item:not(:first-child) { padding-left: 1.5rem; } .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child), .play-button.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), .play-button.horizontal[class*="very relaxed"].list > .item:not(:last-child), .download-button.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), .download-button.horizontal[class*="very relaxed"].list > .item:not(:last-child) { padding-right: 1.5rem; } /*------------------- Sizes --------------------*/ .ui.mini.list, .play-button.mini.list, .download-button.mini.list { font-size: 0.78571429em; } .ui.tiny.list, .play-button.tiny.list, .download-button.tiny.list { font-size: 0.85714286em; } .ui.small.list, .play-button.small.list, .download-button.small.list { font-size: 0.92857143em; } .ui.list, .play-button.list, .download-button.list { font-size: 1em; } .ui.large.list, .play-button.large.list, .download-button.large.list { font-size: 1.14285714em; } .ui.big.list, .play-button.big.list, .download-button.big.list { font-size: 1.28571429em; } .ui.huge.list, .play-button.huge.list, .download-button.huge.list { font-size: 1.42857143em; } .ui.massive.list, .play-button.massive.list, .download-button.massive.list { font-size: 1.71428571em; } .ui.mini.horizontal.list .list > .item, .ui.mini.horizontal.list > .item, .play-button.mini.horizontal.list .list > .item, .play-button.mini.horizontal.list > .item, .download-button.mini.horizontal.list .list > .item, .download-button.mini.horizontal.list > .item { font-size: 0.78571429rem; } .ui.tiny.horizontal.list .list > .item, .ui.tiny.horizontal.list > .item, .play-button.tiny.horizontal.list .list > .item, .play-button.tiny.horizontal.list > .item, .download-button.tiny.horizontal.list .list > .item, .download-button.tiny.horizontal.list > .item { font-size: 0.85714286rem; } .ui.small.horizontal.list .list > .item, .ui.small.horizontal.list > .item, .play-button.small.horizontal.list .list > .item, .play-button.small.horizontal.list > .item, .download-button.small.horizontal.list .list > .item, .download-button.small.horizontal.list > .item { font-size: 0.92857143rem; } .ui.horizontal.list .list > .item, .ui.horizontal.list > .item, .play-button.horizontal.list .list > .item, .play-button.horizontal.list > .item, .download-button.horizontal.list .list > .item, .download-button.horizontal.list > .item { font-size: 1rem; } .ui.large.horizontal.list .list > .item, .ui.large.horizontal.list > .item, .play-button.large.horizontal.list .list > .item, .play-button.large.horizontal.list > .item, .download-button.large.horizontal.list .list > .item, .download-button.large.horizontal.list > .item { font-size: 1.14285714rem; } .ui.big.horizontal.list .list > .item, .ui.big.horizontal.list > .item, .play-button.big.horizontal.list .list > .item, .play-button.big.horizontal.list > .item, .download-button.big.horizontal.list .list > .item, .download-button.big.horizontal.list > .item { font-size: 1.28571429rem; } .ui.huge.horizontal.list .list > .item, .ui.huge.horizontal.list > .item, .play-button.huge.horizontal.list .list > .item, .play-button.huge.horizontal.list > .item, .download-button.huge.horizontal.list .list > .item, .download-button.huge.horizontal.list > .item { font-size: 1.42857143rem; } .ui.massive.horizontal.list .list > .item, .ui.massive.horizontal.list > .item, .play-button.massive.horizontal.list .list > .item, .play-button.massive.horizontal.list > .item, .download-button.massive.horizontal.list .list > .item, .download-button.massive.horizontal.list > .item { font-size: 1.71428571rem; } /******************************* User Variable Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Loader * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Loader *******************************/ /* Some global loader styles defined in site.variables */ /*------------------- Standard --------------------*/ /*------------------- Types --------------------*/ /* Text */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Exact Sizes (Avoids Rounding Errors) */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Loader *******************************/ /* Standard Size */ .ui.loader, .play-button.loader, .download-button.loader { display: none; position: absolute; top: 50%; left: 50%; margin: 0px; text-align: center; z-index: 1000; transform: translateX(-50%) translateY(-50%); } /* Static Shape */ .ui.loader:before, .play-button.loader:before, .download-button.loader:before { position: absolute; content: ''; top: 0%; left: 50%; width: 100%; height: 100%; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } /* Active Shape */ .ui.loader:after, .play-button.loader:after, .download-button.loader:after { position: absolute; content: ''; top: 0%; left: 50%; width: 100%; height: 100%; animation: loader 2s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #42495F transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /* Active Animation */ @keyframes loader { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Sizes */ .ui.mini.loader:before, .ui.mini.loader:after, .play-button.mini.loader:before, .play-button.mini.loader:after, .download-button.mini.loader:before, .download-button.mini.loader:after { width: 1rem; height: 1rem; margin: 0em 0em 0em -0.5rem; } .ui.tiny.loader:before, .ui.tiny.loader:after, .play-button.tiny.loader:before, .play-button.tiny.loader:after, .download-button.tiny.loader:before, .download-button.tiny.loader:after { width: 1.14285714rem; height: 1.14285714rem; margin: 0em 0em 0em -0.57142857rem; } .ui.small.loader:before, .ui.small.loader:after, .play-button.small.loader:before, .play-button.small.loader:after, .download-button.small.loader:before, .download-button.small.loader:after { width: 1.71428571rem; height: 1.71428571rem; margin: 0em 0em 0em -0.85714286rem; } .ui.loader:before, .ui.loader:after, .play-button.loader:before, .play-button.loader:after, .download-button.loader:before, .download-button.loader:after { width: 2.28571429rem; height: 2.28571429rem; margin: 0em 0em 0em -1.14285714rem; } .ui.large.loader:before, .ui.large.loader:after, .play-button.large.loader:before, .play-button.large.loader:after, .download-button.large.loader:before, .download-button.large.loader:after { width: 200px; height: 200px; margin: 0em 0em 0em -100px; } .ui.big.loader:before, .ui.big.loader:after, .play-button.big.loader:before, .play-button.big.loader:after, .download-button.big.loader:before, .download-button.big.loader:after { width: 3.71428571rem; height: 3.71428571rem; margin: 0em 0em 0em -1.85714286rem; } .ui.huge.loader:before, .ui.huge.loader:after, .play-button.huge.loader:before, .play-button.huge.loader:after, .download-button.huge.loader:before, .download-button.huge.loader:after { width: 4.14285714rem; height: 4.14285714rem; margin: 0em 0em 0em -2.07142857rem; } .ui.massive.loader:before, .ui.massive.loader:after, .play-button.massive.loader:before, .play-button.massive.loader:after, .download-button.massive.loader:before, .download-button.massive.loader:after { width: 4.57142857rem; height: 4.57142857rem; margin: 0em 0em 0em -2.28571429rem; } /*------------------- Coupling --------------------*/ /* Show inside active dimmer */ .ui.dimmer .loader, .play-button.dimmer .loader, .download-button.dimmer .loader { display: block; } /* Black Dimmer */ .ui.dimmer .ui.loader, .play-button.dimmer .play-button.loader, .download-button.dimmer .download-button.loader { color: rgba(255, 255, 255, 0.9); } .ui.dimmer .ui.loader:before, .play-button.dimmer .play-button.loader:before, .download-button.dimmer .download-button.loader:before { border-color: rgba(255, 255, 255, 0.15); } .ui.dimmer .ui.loader:after, .play-button.dimmer .play-button.loader:after, .download-button.dimmer .download-button.loader:after { border-color: #FFFFFF transparent transparent; } /* White Dimmer (Inverted) */ .ui.inverted.dimmer .ui.loader, .play-button.inverted.dimmer .play-button.loader, .download-button.inverted.dimmer .download-button.loader { color: rgba(0, 0, 0, 0.87); } .ui.inverted.dimmer .ui.loader:before, .play-button.inverted.dimmer .play-button.loader:before, .download-button.inverted.dimmer .download-button.loader:before { border-color: rgba(0, 0, 0, 0.1); } .ui.inverted.dimmer .ui.loader:after, .play-button.inverted.dimmer .play-button.loader:after, .download-button.inverted.dimmer .download-button.loader:after { border-color: #42495F transparent transparent; } /******************************* Types *******************************/ /*------------------- Text --------------------*/ .ui.text.loader, .play-button.text.loader, .download-button.text.loader { width: auto !important; height: auto !important; text-align: center; font-style: normal; } /******************************* States *******************************/ .ui.indeterminate.loader:after, .play-button.indeterminate.loader:after, .download-button.indeterminate.loader:after { animation-direction: reverse; animation-duration: 4s; } .ui.loader.active, .ui.loader.visible, .play-button.loader.active, .play-button.loader.visible, .download-button.loader.active, .download-button.loader.visible { display: block; } .ui.loader.disabled, .ui.loader.hidden, .play-button.loader.disabled, .play-button.loader.hidden, .download-button.loader.disabled, .download-button.loader.hidden { display: none; } /******************************* Variations *******************************/ /*------------------- Sizes --------------------*/ /* Loader */ .ui.inverted.dimmer .ui.mini.loader, .ui.mini.loader, .play-button.inverted.dimmer .play-button.mini.loader, .play-button.mini.loader, .download-button.inverted.dimmer .download-button.mini.loader, .download-button.mini.loader { width: 1rem; height: 1rem; font-size: 0.78571429em; } .ui.inverted.dimmer .ui.tiny.loader, .ui.tiny.loader, .play-button.inverted.dimmer .play-button.tiny.loader, .play-button.tiny.loader, .download-button.inverted.dimmer .download-button.tiny.loader, .download-button.tiny.loader { width: 1.14285714rem; height: 1.14285714rem; font-size: 0.85714286em; } .ui.inverted.dimmer .ui.small.loader, .ui.small.loader, .play-button.inverted.dimmer .play-button.small.loader, .play-button.small.loader, .download-button.inverted.dimmer .download-button.small.loader, .download-button.small.loader { width: 1.71428571rem; height: 1.71428571rem; font-size: 0.92857143em; } .ui.inverted.dimmer .ui.loader, .ui.loader, .play-button.inverted.dimmer .play-button.loader, .play-button.loader, .download-button.inverted.dimmer .download-button.loader, .download-button.loader { width: 2.28571429rem; height: 2.28571429rem; font-size: 1em; } .ui.inverted.dimmer .ui.large.loader, .ui.large.loader, .play-button.inverted.dimmer .play-button.large.loader, .play-button.large.loader, .download-button.inverted.dimmer .download-button.large.loader, .download-button.large.loader { width: 200px; height: 200px; font-size: 1.14285714em; } .ui.inverted.dimmer .ui.big.loader, .ui.big.loader, .play-button.inverted.dimmer .play-button.big.loader, .play-button.big.loader, .download-button.inverted.dimmer .download-button.big.loader, .download-button.big.loader { width: 3.71428571rem; height: 3.71428571rem; font-size: 1.28571429em; } .ui.inverted.dimmer .ui.huge.loader, .ui.huge.loader, .play-button.inverted.dimmer .play-button.huge.loader, .play-button.huge.loader, .download-button.inverted.dimmer .download-button.huge.loader, .download-button.huge.loader { width: 4.14285714rem; height: 4.14285714rem; font-size: 1.42857143em; } .ui.inverted.dimmer .ui.massive.loader, .ui.massive.loader, .play-button.inverted.dimmer .play-button.massive.loader, .play-button.massive.loader, .download-button.inverted.dimmer .download-button.massive.loader, .download-button.massive.loader { width: 4.57142857rem; height: 4.57142857rem; font-size: 1.71428571em; } /* Text Loader */ .ui.mini.text.loader, .play-button.mini.text.loader, .download-button.mini.text.loader { min-width: 1rem; padding-top: 1.78571429rem; } .ui.tiny.text.loader, .play-button.tiny.text.loader, .download-button.tiny.text.loader { min-width: 1.14285714rem; padding-top: 1.92857143rem; } .ui.small.text.loader, .play-button.small.text.loader, .download-button.small.text.loader { min-width: 1.71428571rem; padding-top: 2.5rem; } .ui.text.loader, .play-button.text.loader, .download-button.text.loader { min-width: 2.28571429rem; padding-top: 3.07142857rem; } .ui.large.text.loader, .play-button.large.text.loader, .download-button.large.text.loader { min-width: 200px; padding-top: 200.78571429px; } .ui.big.text.loader, .play-button.big.text.loader, .download-button.big.text.loader { min-width: 3.71428571rem; padding-top: 4.5rem; } .ui.huge.text.loader, .play-button.huge.text.loader, .download-button.huge.text.loader { min-width: 4.14285714rem; padding-top: 4.92857143rem; } .ui.massive.text.loader, .play-button.massive.text.loader, .download-button.massive.text.loader { min-width: 4.57142857rem; padding-top: 5.35714286rem; } /*------------------- Inverted --------------------*/ .ui.inverted.loader, .play-button.inverted.loader, .download-button.inverted.loader { color: rgba(255, 255, 255, 0.9); } .ui.inverted.loader:before, .play-button.inverted.loader:before, .download-button.inverted.loader:before { border-color: rgba(255, 255, 255, 0.15); } .ui.inverted.loader:after, .play-button.inverted.loader:after, .download-button.inverted.loader:after { border-top-color: #FFFFFF; } /*------------------- Inline --------------------*/ .ui.inline.loader, .play-button.inline.loader, .download-button.inline.loader { position: relative; vertical-align: middle; margin: 0em; left: 0em; top: 0em; transform: none; } .ui.inline.loader.active, .ui.inline.loader.visible, .play-button.inline.loader.active, .play-button.inline.loader.visible, .download-button.inline.loader.active, .download-button.inline.loader.visible { display: inline-block; } /* Centered Inline */ .ui.centered.inline.loader.active, .ui.centered.inline.loader.visible, .play-button.centered.inline.loader.active, .play-button.centered.inline.loader.visible, .download-button.centered.inline.loader.active, .download-button.centered.inline.loader.visible { display: block; margin-left: auto; margin-right: auto; } /******************************* Site Overrides *******************************/ .ui.loader:before, .play-button.loader:before, .download-button.loader:before { border: none; border-radius: 0px; box-shadow: none; } .ui.loader:after, .play-button.loader:after, .download-button.loader:after { border: none; box-shadow: none; border-radius: 0px; margin: 40px auto; background: transparent url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2018.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%0A%0A%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%0A%20%20%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%20%20%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%0A%20%20%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22Ebene_1%22%0A%20%20%20x%3D%220px%22%0A%20%20%20y%3D%220px%22%0A%20%20%20viewBox%3D%220%200%20175.49999%20172.4%22%0A%20%20%20enable-background%3D%22new%200%200%20841.9%20595.3%22%0A%20%20%20xml%3Aspace%3D%22preserve%22%0A%20%20%20inkscape%3Aversion%3D%220.91%20r13725%22%0A%20%20%20sodipodi%3Adocname%3D%22Logo_Calliope_Woman.svg%22%0A%20%20%20width%3D%22175.5%22%0A%20%20%20height%3D%22172.39999%22%3E%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata5011%22%3E%3Crdf%3ARDF%3E%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%20%2F%3E%3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E%3C%2Fcc%3AWork%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%0A%20%20%20%20%20id%3D%22defs5009%22%20%2F%3E%3Csodipodi%3Anamedview%0A%20%20%20%20%20pagecolor%3D%22%23ffffff%22%0A%20%20%20%20%20bordercolor%3D%22%23666666%22%0A%20%20%20%20%20borderopacity%3D%221%22%0A%20%20%20%20%20objecttolerance%3D%2210%22%0A%20%20%20%20%20gridtolerance%3D%2210%22%0A%20%20%20%20%20guidetolerance%3D%2210%22%0A%20%20%20%20%20inkscape%3Apageopacity%3D%220%22%0A%20%20%20%20%20inkscape%3Apageshadow%3D%222%22%0A%20%20%20%20%20inkscape%3Awindow-width%3D%221920%22%0A%20%20%20%20%20inkscape%3Awindow-height%3D%221137%22%0A%20%20%20%20%20id%3D%22namedview5007%22%0A%20%20%20%20%20showgrid%3D%22false%22%0A%20%20%20%20%20inkscape%3Azoom%3D%220.34208337%22%0A%20%20%20%20%20inkscape%3Acx%3D%22420.95001%22%0A%20%20%20%20%20inkscape%3Acy%3D%22297.64999%22%0A%20%20%20%20%20inkscape%3Awindow-x%3D%22-8%22%0A%20%20%20%20%20inkscape%3Awindow-y%3D%22156%22%0A%20%20%20%20%20inkscape%3Awindow-maximized%3D%221%22%0A%20%20%20%20%20inkscape%3Acurrent-layer%3D%22Ebene_1%22%20%2F%3E%3Cg%0A%20%20%20%20%20id%3D%22g4955%22%0A%20%20%20%20%20transform%3D%22translate(-260.90025%2C-204.1)%22%3E%3Cg%0A%20%20%20%20%20%20%20id%3D%22g4957%22%3E%3Cdefs%0A%20%20%20%20%20%20%20%20%20id%3D%22defs4959%22%3E%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22SVGID_7_%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%22193.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%22204.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22318.29999%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22256.29999%22%20%2F%3E%3C%2Fdefs%3E%3CclipPath%0A%20%20%20%20%20%20%20%20%20id%3D%22SVGID_1_%22%3E%3Cuse%0A%20%20%20%20%20%20%20%20%20%20%20xlink%3Ahref%3D%22%23SVGID_7_%22%0A%20%20%20%20%20%20%20%20%20%20%20overflow%3D%22visible%22%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22use4963%22%0A%20%20%20%20%20%20%20%20%20%20%20style%3D%22overflow%3Avisible%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22100%25%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22100%25%22%20%2F%3E%3C%2FclipPath%3E%3C%2Fg%3E%3Cg%0A%20%20%20%20%20%20%20id%3D%22g4965%22%3E%3Cdefs%0A%20%20%20%20%20%20%20%20%20id%3D%22defs4967%22%3E%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22SVGID_9_%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%22193.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%22204.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22318.29999%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22256.29999%22%20%2F%3E%3C%2Fdefs%3E%3CclipPath%0A%20%20%20%20%20%20%20%20%20id%3D%22SVGID_2_%22%3E%3Cuse%0A%20%20%20%20%20%20%20%20%20%20%20xlink%3Ahref%3D%22%23SVGID_9_%22%0A%20%20%20%20%20%20%20%20%20%20%20overflow%3D%22visible%22%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22use4971%22%0A%20%20%20%20%20%20%20%20%20%20%20style%3D%22overflow%3Avisible%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22100%25%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22100%25%22%20%2F%3E%3C%2FclipPath%3E%3C%2Fg%3E%3Cg%0A%20%20%20%20%20%20%20id%3D%22g4973%22%3E%3Cdefs%0A%20%20%20%20%20%20%20%20%20id%3D%22defs4975%22%3E%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22SVGID_11_%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%22193.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%22204.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22318.29999%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22256.29999%22%20%2F%3E%3C%2Fdefs%3E%3CclipPath%0A%20%20%20%20%20%20%20%20%20id%3D%22SVGID_3_%22%3E%3Cuse%0A%20%20%20%20%20%20%20%20%20%20%20xlink%3Ahref%3D%22%23SVGID_11_%22%0A%20%20%20%20%20%20%20%20%20%20%20overflow%3D%22visible%22%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22use4979%22%0A%20%20%20%20%20%20%20%20%20%20%20style%3D%22overflow%3Avisible%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22100%25%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22100%25%22%20%2F%3E%3C%2FclipPath%3E%3Cpath%0A%20%20%20%20%20%20%20%20%20clip-path%3D%22url(%23SVGID_3_)%22%0A%20%20%20%20%20%20%20%20%20d%3D%22m%20436.4%2C262%20-47.9%2C0%200%2C-46%20c%200%2C-4.7%203.8%2C-8.4%208.4%2C-8.4%20l%2031%2C0%20c%204.7%2C0%208.4%2C3.8%208.4%2C8.4%20l%200%2C46%20z%22%0A%20%20%20%20%20%20%20%20%20id%3D%22path4981%22%0A%20%20%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20%20%20style%3D%22fill%3A%234a5261%22%20%2F%3E%3C%2Fg%3E%3Crect%0A%20%20%20%20%20%20%20x%3D%22394.79999%22%0A%20%20%20%20%20%20%20y%3D%22218.7%22%0A%20%20%20%20%20%20%20width%3D%2235.099998%22%0A%20%20%20%20%20%20%20height%3D%2243.200001%22%0A%20%20%20%20%20%20%20id%3D%22rect4983%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%238096a1%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20317.6%2C239.5%200%2C61%2071%2C0.2%20c%200%2C0%200%2C-57.3%200%2C-61%200%2C-19.5%20-16.1%2C-35.6%20-35.6%2C-35.6%20-19.6%2C0%20-35.4%2C15.8%20-35.4%2C35.4%22%0A%20%20%20%20%20%20%20id%3D%22path4985%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23855c33%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20412.4%2C376.5%20-114.2%2C0%20c%20-35.6%2C0%20-50.9%2C-45.2%20-22.6%2C-66.8%20l%2063.8%2C-47.8%2096.9%2C0%200%2C90.7%20c%200.1%2C13.2%20-10.6%2C23.9%20-23.9%2C23.9%22%0A%20%20%20%20%20%20%20id%3D%22path4987%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%2326a6ab%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22345.7%2C257.3%20334.8%2C298.8%20285.1%2C302.5%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4989%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%2342c9c9%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22354%2C283.8%20332.5%2C283.8%20345.7%2C257.3%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4991%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23f7f5e8%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22375.4%2C283.8%20354%2C283.8%20362.2%2C257.3%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4993%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23f7f5e8%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22373.1%2C298.8%20334.8%2C298.8%20332.5%2C283.8%20375.4%2C283.8%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4995%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23bdd1cf%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20400.6%2C376.5%20c%20-3.5%2C-26.2%20-10.6%2C-58%20-27.3%2C-77.7%20l%20-0.2%2C0%20-19%2C0%20-19%2C0%20-0.2%2C0%20c%20-16.7%2C19.8%20-23.8%2C51.5%20-27.3%2C77.7%20l%2093%2C0%20z%22%0A%20%20%20%20%20%20%20id%3D%22path4997%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23f7f5e8%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20357%2C258%20-6.1%2C0%20c%20-6.4%2C0%20-11.5%2C-5.2%20-11.5%2C-11.5%20l%200%2C-19.7%2029.2%2C0%200%2C19.7%20c%20-0.1%2C6.3%20-5.3%2C11.5%20-11.6%2C11.5%22%0A%20%20%20%20%20%20%20id%3D%22path4999%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffcc99%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20335.8%2C376.5%200%2C-77.7%20c%2012.4%2C29.1%2027.7%2C64.3%2046.5%2C77.7%20l%20-46.5%2C0%20z%22%0A%20%20%20%20%20%20%20id%3D%22path5001%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23bdd1cf%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22362.2%2C257.3%20345.7%2C257.3%20354%2C283.8%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon5003%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffcc99%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22436.4%2C315.3%20394.8%2C262%20436.4%2C262%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon5005%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%2342c9c9%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center center; background-size: 100%; -webkit-animation: loader-pxt 2s infinite linear; animation: loader-pxt 2s infinite linear; } @-webkit-keyframes loader-pxt { 0% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); transform: perspective(160px) rotateX(0deg) rotateY(0deg); } 15% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(-5deg); transform: perspective(160px) rotateX(0deg) rotateY(-5deg); } 50% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(5deg); transform: perspective(160px) rotateX(0deg) rotateY(5deg); } 100% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); transform: perspective(160px) rotateX(0deg) rotateY(0deg); } } @keyframes loader-pxt { 0% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); transform: perspective(160px) rotateX(0deg) rotateY(0deg); } 15% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(-5deg); transform: perspective(160px) rotateX(0deg) rotateY(-5deg); } 50% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(5deg); transform: perspective(160px) rotateX(0deg) rotateY(5deg); } 100% { -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); transform: perspective(160px) rotateX(0deg) rotateY(0deg); } } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Rail * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Rail *******************************/ /*------------------- Element --------------------*/ /*------------------- Variations --------------------*/ /* Close */ /* Dividing */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Rails *******************************/ .ui.rail, .play-button.rail, .download-button.rail { position: absolute; top: 0%; width: 300px; height: 100%; } .ui.left.rail, .play-button.left.rail, .download-button.left.rail { left: auto; right: 100%; padding: 0em 2rem 0em 0em; margin: 0em 2rem 0em 0em; } .ui.right.rail, .play-button.right.rail, .download-button.right.rail { left: 100%; right: auto; padding: 0em 0em 0em 2rem; margin: 0em 0em 0em 2rem; } /******************************* Variations *******************************/ /*-------------- Internal ---------------*/ .ui.left.internal.rail, .play-button.left.internal.rail, .download-button.left.internal.rail { left: 0%; right: auto; padding: 0em 0em 0em 2rem; margin: 0em 0em 0em 2rem; } .ui.right.internal.rail, .play-button.right.internal.rail, .download-button.right.internal.rail { left: auto; right: 0%; padding: 0em 2rem 0em 0em; margin: 0em 2rem 0em 0em; } /*-------------- Dividing ---------------*/ .ui.dividing.rail, .play-button.dividing.rail, .download-button.dividing.rail { width: 302.5px; } .ui.left.dividing.rail, .play-button.left.dividing.rail, .download-button.left.dividing.rail { padding: 0em 2.5rem 0em 0em; margin: 0em 2.5rem 0em 0em; border-right: 1px solid rgba(34, 36, 38, 0.15); } .ui.right.dividing.rail, .play-button.right.dividing.rail, .download-button.right.dividing.rail { border-left: 1px solid rgba(34, 36, 38, 0.15); padding: 0em 0em 0em 2.5rem; margin: 0em 0em 0em 2.5rem; } /*-------------- Distance ---------------*/ .ui.close.rail, .play-button.close.rail, .download-button.close.rail { width: calc( 300px + 1em ); } .ui.close.left.rail, .play-button.close.left.rail, .download-button.close.left.rail { padding: 0em 1em 0em 0em; margin: 0em 1em 0em 0em; } .ui.close.right.rail, .play-button.close.right.rail, .download-button.close.right.rail { padding: 0em 0em 0em 1em; margin: 0em 0em 0em 1em; } .ui.very.close.rail, .play-button.very.close.rail, .download-button.very.close.rail { width: calc( 300px + 0.5em ); } .ui.very.close.left.rail, .play-button.very.close.left.rail, .download-button.very.close.left.rail { padding: 0em 0.5em 0em 0em; margin: 0em 0.5em 0em 0em; } .ui.very.close.right.rail, .play-button.very.close.right.rail, .download-button.very.close.right.rail { padding: 0em 0em 0em 0.5em; margin: 0em 0em 0em 0.5em; } /*-------------- Attached ---------------*/ .ui.attached.left.rail, .ui.attached.right.rail, .play-button.attached.left.rail, .play-button.attached.right.rail, .download-button.attached.left.rail, .download-button.attached.right.rail { padding: 0em; margin: 0em; } /*-------------- Sizing ---------------*/ .ui.mini.rail, .play-button.mini.rail, .download-button.mini.rail { font-size: 0.78571429rem; } .ui.tiny.rail, .play-button.tiny.rail, .download-button.tiny.rail { font-size: 0.85714286rem; } .ui.small.rail, .play-button.small.rail, .download-button.small.rail { font-size: 0.92857143rem; } .ui.rail, .play-button.rail, .download-button.rail { font-size: 1rem; } .ui.large.rail, .play-button.large.rail, .download-button.large.rail { font-size: 1.14285714rem; } .ui.big.rail, .play-button.big.rail, .download-button.big.rail { font-size: 1.28571429rem; } .ui.huge.rail, .play-button.huge.rail, .download-button.huge.rail { font-size: 1.42857143rem; } .ui.massive.rail, .play-button.massive.rail, .download-button.massive.rail { font-size: 1.71428571rem; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Reveal * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Reveal *******************************/ /* Types */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Reveal *******************************/ .ui.reveal, .play-button.reveal, .download-button.reveal { display: inherit; position: relative !important; font-size: 0em !important; } .ui.reveal > .visible.content, .play-button.reveal > .visible.content, .download-button.reveal > .visible.content { position: absolute !important; top: 0em !important; left: 0em !important; z-index: 3 !important; transition: all 0.5s ease 0.1s; } .ui.reveal > .hidden.content, .play-button.reveal > .hidden.content, .download-button.reveal > .hidden.content { position: relative !important; z-index: 2 !important; } /* Make sure hovered element is on top of other reveal */ .ui.active.reveal .visible.content, .ui.reveal:hover .visible.content, .play-button.active.reveal .visible.content, .play-button.reveal:hover .visible.content, .download-button.active.reveal .visible.content, .download-button.reveal:hover .visible.content { z-index: 4 !important; } /******************************* Types *******************************/ /*-------------- Slide ---------------*/ .ui.slide.reveal, .play-button.slide.reveal, .download-button.slide.reveal { position: relative !important; overflow: hidden !important; white-space: nowrap; } .ui.slide.reveal > .content, .play-button.slide.reveal > .content, .download-button.slide.reveal > .content { display: block; width: 100%; float: left; margin: 0em; transition: transform 0.5s ease 0.1s; } .ui.slide.reveal > .visible.content, .play-button.slide.reveal > .visible.content, .download-button.slide.reveal > .visible.content { position: relative !important; } .ui.slide.reveal > .hidden.content, .play-button.slide.reveal > .hidden.content, .download-button.slide.reveal > .hidden.content { position: absolute !important; left: 0% !important; width: 100% !important; transform: translateX(100%) !important; } .ui.slide.active.reveal > .visible.content, .ui.slide.reveal:hover > .visible.content, .play-button.slide.active.reveal > .visible.content, .play-button.slide.reveal:hover > .visible.content, .download-button.slide.active.reveal > .visible.content, .download-button.slide.reveal:hover > .visible.content { transform: translateX(-100%) !important; } .ui.slide.active.reveal > .hidden.content, .ui.slide.reveal:hover > .hidden.content, .play-button.slide.active.reveal > .hidden.content, .play-button.slide.reveal:hover > .hidden.content, .download-button.slide.active.reveal > .hidden.content, .download-button.slide.reveal:hover > .hidden.content { transform: translateX(0%) !important; } .ui.slide.right.reveal > .visible.content, .play-button.slide.right.reveal > .visible.content, .download-button.slide.right.reveal > .visible.content { transform: translateX(0%) !important; } .ui.slide.right.reveal > .hidden.content, .play-button.slide.right.reveal > .hidden.content, .download-button.slide.right.reveal > .hidden.content { transform: translateX(-100%) !important; } .ui.slide.right.active.reveal > .visible.content, .ui.slide.right.reveal:hover > .visible.content, .play-button.slide.right.active.reveal > .visible.content, .play-button.slide.right.reveal:hover > .visible.content, .download-button.slide.right.active.reveal > .visible.content, .download-button.slide.right.reveal:hover > .visible.content { transform: translateX(100%) !important; } .ui.slide.right.active.reveal > .hidden.content, .ui.slide.right.reveal:hover > .hidden.content, .play-button.slide.right.active.reveal > .hidden.content, .play-button.slide.right.reveal:hover > .hidden.content, .download-button.slide.right.active.reveal > .hidden.content, .download-button.slide.right.reveal:hover > .hidden.content { transform: translateX(0%) !important; } .ui.slide.up.reveal > .hidden.content, .play-button.slide.up.reveal > .hidden.content, .download-button.slide.up.reveal > .hidden.content { transform: translateY(100%) !important; } .ui.slide.up.active.reveal > .visible.content, .ui.slide.up.reveal:hover > .visible.content, .play-button.slide.up.active.reveal > .visible.content, .play-button.slide.up.reveal:hover > .visible.content, .download-button.slide.up.active.reveal > .visible.content, .download-button.slide.up.reveal:hover > .visible.content { transform: translateY(-100%) !important; } .ui.slide.up.active.reveal > .hidden.content, .ui.slide.up.reveal:hover > .hidden.content, .play-button.slide.up.active.reveal > .hidden.content, .play-button.slide.up.reveal:hover > .hidden.content, .download-button.slide.up.active.reveal > .hidden.content, .download-button.slide.up.reveal:hover > .hidden.content { transform: translateY(0%) !important; } .ui.slide.down.reveal > .hidden.content, .play-button.slide.down.reveal > .hidden.content, .download-button.slide.down.reveal > .hidden.content { transform: translateY(-100%) !important; } .ui.slide.down.active.reveal > .visible.content, .ui.slide.down.reveal:hover > .visible.content, .play-button.slide.down.active.reveal > .visible.content, .play-button.slide.down.reveal:hover > .visible.content, .download-button.slide.down.active.reveal > .visible.content, .download-button.slide.down.reveal:hover > .visible.content { transform: translateY(100%) !important; } .ui.slide.down.active.reveal > .hidden.content, .ui.slide.down.reveal:hover > .hidden.content, .play-button.slide.down.active.reveal > .hidden.content, .play-button.slide.down.reveal:hover > .hidden.content, .download-button.slide.down.active.reveal > .hidden.content, .download-button.slide.down.reveal:hover > .hidden.content { transform: translateY(0%) !important; } /*-------------- Fade ---------------*/ .ui.fade.reveal > .visible.content, .play-button.fade.reveal > .visible.content, .download-button.fade.reveal > .visible.content { opacity: 1; } .ui.fade.active.reveal > .visible.content, .ui.fade.reveal:hover > .visible.content, .play-button.fade.active.reveal > .visible.content, .play-button.fade.reveal:hover > .visible.content, .download-button.fade.active.reveal > .visible.content, .download-button.fade.reveal:hover > .visible.content { opacity: 0; } /*-------------- Move ---------------*/ .ui.move.reveal, .play-button.move.reveal, .download-button.move.reveal { position: relative !important; overflow: hidden !important; white-space: nowrap; } .ui.move.reveal > .content, .play-button.move.reveal > .content, .download-button.move.reveal > .content { display: block; float: left; margin: 0em; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; } .ui.move.reveal > .visible.content, .play-button.move.reveal > .visible.content, .download-button.move.reveal > .visible.content { position: relative !important; } .ui.move.reveal > .hidden.content, .play-button.move.reveal > .hidden.content, .download-button.move.reveal > .hidden.content { position: absolute !important; left: 0% !important; width: 100% !important; } .ui.move.active.reveal > .visible.content, .ui.move.reveal:hover > .visible.content, .play-button.move.active.reveal > .visible.content, .play-button.move.reveal:hover > .visible.content, .download-button.move.active.reveal > .visible.content, .download-button.move.reveal:hover > .visible.content { transform: translateX(-100%) !important; } .ui.move.right.active.reveal > .visible.content, .ui.move.right.reveal:hover > .visible.content, .play-button.move.right.active.reveal > .visible.content, .play-button.move.right.reveal:hover > .visible.content, .download-button.move.right.active.reveal > .visible.content, .download-button.move.right.reveal:hover > .visible.content { transform: translateX(100%) !important; } .ui.move.up.active.reveal > .visible.content, .ui.move.up.reveal:hover > .visible.content, .play-button.move.up.active.reveal > .visible.content, .play-button.move.up.reveal:hover > .visible.content, .download-button.move.up.active.reveal > .visible.content, .download-button.move.up.reveal:hover > .visible.content { transform: translateY(-100%) !important; } .ui.move.down.active.reveal > .visible.content, .ui.move.down.reveal:hover > .visible.content, .play-button.move.down.active.reveal > .visible.content, .play-button.move.down.reveal:hover > .visible.content, .download-button.move.down.active.reveal > .visible.content, .download-button.move.down.reveal:hover > .visible.content { transform: translateY(100%) !important; } /*-------------- Rotate ---------------*/ .ui.rotate.reveal > .visible.content, .play-button.rotate.reveal > .visible.content, .download-button.rotate.reveal > .visible.content { transition-duration: 0.5s; transform: rotate(0deg); } .ui.rotate.reveal > .visible.content, .ui.rotate.right.reveal > .visible.content, .play-button.rotate.reveal > .visible.content, .play-button.rotate.right.reveal > .visible.content, .download-button.rotate.reveal > .visible.content, .download-button.rotate.right.reveal > .visible.content { transform-origin: bottom right; } .ui.rotate.active.reveal > .visible.content, .ui.rotate.reveal:hover > .visible.content, .ui.rotate.right.active.reveal > .visible.content, .ui.rotate.right.reveal:hover > .visible.content, .play-button.rotate.active.reveal > .visible.content, .play-button.rotate.reveal:hover > .visible.content, .play-button.rotate.right.active.reveal > .visible.content, .play-button.rotate.right.reveal:hover > .visible.content, .download-button.rotate.active.reveal > .visible.content, .download-button.rotate.reveal:hover > .visible.content, .download-button.rotate.right.active.reveal > .visible.content, .download-button.rotate.right.reveal:hover > .visible.content { transform: rotate(110deg); } .ui.rotate.left.reveal > .visible.content, .play-button.rotate.left.reveal > .visible.content, .download-button.rotate.left.reveal > .visible.content { transform-origin: bottom left; } .ui.rotate.left.active.reveal > .visible.content, .ui.rotate.left.reveal:hover > .visible.content, .play-button.rotate.left.active.reveal > .visible.content, .play-button.rotate.left.reveal:hover > .visible.content, .download-button.rotate.left.active.reveal > .visible.content, .download-button.rotate.left.reveal:hover > .visible.content { transform: rotate(-110deg); } /******************************* States *******************************/ .ui.disabled.reveal:hover > .visible.visible.content, .play-button.disabled.reveal:hover > .visible.visible.content, .download-button.disabled.reveal:hover > .visible.visible.content { position: static !important; display: block !important; opacity: 1 !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; } .ui.disabled.reveal:hover > .hidden.hidden.content, .play-button.disabled.reveal:hover > .hidden.hidden.content, .download-button.disabled.reveal:hover > .hidden.hidden.content { display: none !important; } /******************************* Variations *******************************/ /*-------------- Visible ---------------*/ .ui.visible.reveal, .play-button.visible.reveal, .download-button.visible.reveal { overflow: visible; } /*-------------- Instant ---------------*/ .ui.instant.reveal > .content, .play-button.instant.reveal > .content, .download-button.instant.reveal > .content { transition-delay: 0s !important; } /*-------------- Sizing ---------------*/ .ui.reveal > .content, .play-button.reveal > .content, .download-button.reveal > .content { font-size: 1rem !important; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Segment * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Segment *******************************/ /*------------------- Element --------------------*/ /*------------------- Group --------------------*/ /*------------------- Coupling --------------------*/ /* Page Grid Segment */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Piled */ /* Circular */ /* Stacked */ /* Raised */ /* Padded */ /* Attached */ /* Inverted */ /* Floated */ /* Basic */ /* Colors */ /* Ordinality */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Segment *******************************/ .ui.segment, .play-button.segment, .download-button.segment { position: relative; background: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0em; padding: 1em 1em; border-radius: 0.28571429rem; border: 1px solid rgba(34, 36, 38, 0.15); } .ui.segment:first-child, .play-button.segment:first-child, .download-button.segment:first-child { margin-top: 0em; } .ui.segment:last-child, .play-button.segment:last-child, .download-button.segment:last-child { margin-bottom: 0em; } /* Vertical */ .ui.vertical.segment, .play-button.vertical.segment, .download-button.vertical.segment { margin: 0em; padding-left: 0em; padding-right: 0em; background: none transparent; border-radius: 0px; box-shadow: none; border: none; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.vertical.segment:last-child, .play-button.vertical.segment:last-child, .download-button.vertical.segment:last-child { border-bottom: none; } /*------------------- Loose Coupling --------------------*/ /* Header */ .ui.inverted.segment > .ui.header, .play-button.inverted.segment > .play-button.header, .download-button.inverted.segment > .download-button.header { color: #FFFFFF; } /* Label */ .ui[class*="bottom attached"].segment > [class*="top attached"].label, .play-button[class*="bottom attached"].segment > [class*="top attached"].label, .download-button[class*="bottom attached"].segment > [class*="top attached"].label { border-top-left-radius: 0em; border-top-right-radius: 0em; } .ui[class*="top attached"].segment > [class*="bottom attached"].label, .play-button[class*="top attached"].segment > [class*="bottom attached"].label, .download-button[class*="top attached"].segment > [class*="bottom attached"].label { border-bottom-left-radius: 0em; border-bottom-right-radius: 0em; } .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label, .play-button.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label, .download-button.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { border-top-left-radius: 0em; border-top-right-radius: 0em; } .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label, .play-button.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label, .download-button.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { border-bottom-left-radius: 0em; border-bottom-right-radius: 0em; } /* Grid */ .ui.page.grid.segment, .ui.grid > .row > .ui.segment.column, .ui.grid > .ui.segment.column, .play-button.page.grid.segment, .play-button.grid > .row > .play-button.segment.column, .play-button.grid > .play-button.segment.column, .download-button.page.grid.segment, .download-button.grid > .row > .download-button.segment.column, .download-button.grid > .download-button.segment.column { padding-top: 2em; padding-bottom: 2em; } .ui.grid.segment, .play-button.grid.segment, .download-button.grid.segment { margin: 1rem 0em; border-radius: 0.28571429rem; } /* Table */ .ui.basic.table.segment, .play-button.basic.table.segment, .download-button.basic.table.segment { background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); } .ui[class*="very basic"].table.segment, .play-button[class*="very basic"].table.segment, .download-button[class*="very basic"].table.segment { padding: 1em 1em; } /******************************* Types *******************************/ /*------------------- Piled --------------------*/ .ui.piled.segments, .ui.piled.segment, .play-button.piled.segments, .play-button.piled.segment, .download-button.piled.segments, .download-button.piled.segment { margin: 3em 0em; box-shadow: ''; z-index: auto; } .ui.piled.segment:first-child, .play-button.piled.segment:first-child, .download-button.piled.segment:first-child { margin-top: 0em; } .ui.piled.segment:last-child, .play-button.piled.segment:last-child, .download-button.piled.segment:last-child { margin-bottom: 0em; } .ui.piled.segments:after, .ui.piled.segments:before, .ui.piled.segment:after, .ui.piled.segment:before, .play-button.piled.segments:after, .play-button.piled.segments:before, .play-button.piled.segment:after, .play-button.piled.segment:before, .download-button.piled.segments:after, .download-button.piled.segments:before, .download-button.piled.segment:after, .download-button.piled.segment:before { background-color: #FFFFFF; visibility: visible; content: ''; display: block; height: 100%; left: 0px; position: absolute; width: 100%; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: ''; } .ui.piled.segments:before, .ui.piled.segment:before, .play-button.piled.segments:before, .play-button.piled.segment:before, .download-button.piled.segments:before, .download-button.piled.segment:before { transform: rotate(-1.2deg); top: 0; z-index: -2; } .ui.piled.segments:after, .ui.piled.segment:after, .play-button.piled.segments:after, .play-button.piled.segment:after, .download-button.piled.segments:after, .download-button.piled.segment:after { transform: rotate(1.2deg); top: 0; z-index: -1; } /* Piled Attached */ .ui[class*="top attached"].piled.segment, .play-button[class*="top attached"].piled.segment, .download-button[class*="top attached"].piled.segment { margin-top: 3em; margin-bottom: 0em; } .ui.piled.segment[class*="top attached"]:first-child, .play-button.piled.segment[class*="top attached"]:first-child, .download-button.piled.segment[class*="top attached"]:first-child { margin-top: 0em; } .ui.piled.segment[class*="bottom attached"], .play-button.piled.segment[class*="bottom attached"], .download-button.piled.segment[class*="bottom attached"] { margin-top: 0em; margin-bottom: 3em; } .ui.piled.segment[class*="bottom attached"]:last-child, .play-button.piled.segment[class*="bottom attached"]:last-child, .download-button.piled.segment[class*="bottom attached"]:last-child { margin-bottom: 0em; } /*------------------- Stacked --------------------*/ .ui.stacked.segment, .play-button.stacked.segment, .download-button.stacked.segment { padding-bottom: 1.4em; } .ui.stacked.segments:before, .ui.stacked.segments:after, .ui.stacked.segment:before, .ui.stacked.segment:after, .play-button.stacked.segments:before, .play-button.stacked.segments:after, .play-button.stacked.segment:before, .play-button.stacked.segment:after, .download-button.stacked.segments:before, .download-button.stacked.segments:after, .download-button.stacked.segment:before, .download-button.stacked.segment:after { content: ''; position: absolute; bottom: -3px; left: 0%; border-top: 1px solid rgba(34, 36, 38, 0.15); background: rgba(0, 0, 0, 0.03); width: 100%; height: 6px; visibility: visible; } .ui.stacked.segments:before, .ui.stacked.segment:before, .play-button.stacked.segments:before, .play-button.stacked.segment:before, .download-button.stacked.segments:before, .download-button.stacked.segment:before { display: none; } /* Add additional page */ .ui.tall.stacked.segments:before, .ui.tall.stacked.segment:before, .play-button.tall.stacked.segments:before, .play-button.tall.stacked.segment:before, .download-button.tall.stacked.segments:before, .download-button.tall.stacked.segment:before { display: block; bottom: 0px; } /* Inverted */ .ui.stacked.inverted.segments:before, .ui.stacked.inverted.segments:after, .ui.stacked.inverted.segment:before, .ui.stacked.inverted.segment:after, .play-button.stacked.inverted.segments:before, .play-button.stacked.inverted.segments:after, .play-button.stacked.inverted.segment:before, .play-button.stacked.inverted.segment:after, .download-button.stacked.inverted.segments:before, .download-button.stacked.inverted.segments:after, .download-button.stacked.inverted.segment:before, .download-button.stacked.inverted.segment:after { background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(34, 36, 38, 0.35); } /*------------------- Padded --------------------*/ .ui.padded.segment, .play-button.padded.segment, .download-button.padded.segment { padding: 1.5em; } .ui[class*="very padded"].segment, .play-button[class*="very padded"].segment, .download-button[class*="very padded"].segment { padding: 3em; } /* Padded vertical */ .ui.padded.segment.vertical.segment, .ui[class*="very padded"].vertical.segment, .play-button.padded.segment.vertical.segment, .play-button[class*="very padded"].vertical.segment, .download-button.padded.segment.vertical.segment, .download-button[class*="very padded"].vertical.segment { padding-left: 0px; padding-right: 0px; } /*------------------- Compact --------------------*/ .ui.compact.segment, .play-button.compact.segment, .download-button.compact.segment { display: table; } /* Compact Group */ .ui.compact.segments, .play-button.compact.segments, .download-button.compact.segments { display: inline-flex; } .ui.compact.segments .segment, .ui.segments .compact.segment, .play-button.compact.segments .segment, .play-button.segments .compact.segment, .download-button.compact.segments .segment, .download-button.segments .compact.segment { display: block; flex: 0 1 auto; } /*------------------- Circular --------------------*/ .ui.circular.segment, .play-button.circular.segment, .download-button.circular.segment { display: table-cell; padding: 2em; text-align: center; vertical-align: middle; border-radius: 500em; } /*------------------- Raised --------------------*/ .ui.raised.segments, .ui.raised.segment, .play-button.raised.segments, .play-button.raised.segment, .download-button.raised.segments, .download-button.raised.segment { box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } /******************************* Groups *******************************/ /* Group */ .ui.segments, .play-button.segments, .download-button.segments { flex-direction: column; position: relative; margin: 1rem 0em; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; } .ui.segments:first-child, .play-button.segments:first-child, .download-button.segments:first-child { margin-top: 0em; } .ui.segments:last-child, .play-button.segments:last-child, .download-button.segments:last-child { margin-bottom: 0em; } /* Nested Segment */ .ui.segments > .segment, .play-button.segments > .segment, .download-button.segments > .segment { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em; width: auto; box-shadow: none; border: none; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.segments:not(.horizontal) > .segment:first-child, .play-button.segments:not(.horizontal) > .segment:first-child, .download-button.segments:not(.horizontal) > .segment:first-child { border-top: none; margin-top: 0em; bottom: 0px; margin-bottom: 0em; top: 0px; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Bottom */ .ui.segments:not(.horizontal) > .segment:last-child, .play-button.segments:not(.horizontal) > .segment:last-child, .download-button.segments:not(.horizontal) > .segment:last-child { top: 0px; bottom: 0px; margin-top: 0em; margin-bottom: 0em; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Only */ .ui.segments:not(.horizontal) > .segment:only-child, .play-button.segments:not(.horizontal) > .segment:only-child, .download-button.segments:not(.horizontal) > .segment:only-child { border-radius: 0.28571429rem; } /* Nested Group */ .ui.segments > .ui.segments, .play-button.segments > .play-button.segments, .download-button.segments > .download-button.segments { border-top: 1px solid rgba(34, 36, 38, 0.15); margin: 1rem 1rem; } .ui.segments > .segments:first-child, .play-button.segments > .segments:first-child, .download-button.segments > .segments:first-child { border-top: none; } .ui.segments > .segment + .segments:not(.horizontal), .play-button.segments > .segment + .segments:not(.horizontal), .download-button.segments > .segment + .segments:not(.horizontal) { margin-top: 0em; } /* Horizontal Group */ .ui.horizontal.segments, .play-button.horizontal.segments, .download-button.horizontal.segments { display: flex; flex-direction: row; background-color: transparent; border-radius: 0px; padding: 0em; background-color: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0em; border-radius: 0.28571429rem; border: 1px solid rgba(34, 36, 38, 0.15); } /* Nested Horizontal Group */ .ui.segments > .horizontal.segments, .play-button.segments > .horizontal.segments, .download-button.segments > .horizontal.segments { margin: 0em; background-color: transparent; border-radius: 0px; border: none; box-shadow: none; border-top: 1px solid rgba(34, 36, 38, 0.15); } /* Horizontal Segment */ .ui.horizontal.segments > .segment, .play-button.horizontal.segments > .segment, .download-button.horizontal.segments > .segment { flex: 1 1 auto; -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */ margin: 0em; min-width: 0px; background-color: transparent; border-radius: 0px; border: none; box-shadow: none; border-left: 1px solid rgba(34, 36, 38, 0.15); } /* Border Fixes */ .ui.segments > .horizontal.segments:first-child, .play-button.segments > .horizontal.segments:first-child, .download-button.segments > .horizontal.segments:first-child { border-top: none; } .ui.horizontal.segments > .segment:first-child, .play-button.horizontal.segments > .segment:first-child, .download-button.horizontal.segments > .segment:first-child { border-left: none; } /******************************* States *******************************/ /*-------------- Disabled ---------------*/ .ui.disabled.segment, .play-button.disabled.segment, .download-button.disabled.segment { opacity: 0.45; color: rgba(40, 40, 40, 0.3); } /*-------------- Loading ---------------*/ .ui.loading.segment, .play-button.loading.segment, .download-button.loading.segment { position: relative; cursor: default; pointer-events: none; text-shadow: none !important; color: transparent !important; transition: all 0s linear; } .ui.loading.segment:before, .play-button.loading.segment:before, .download-button.loading.segment:before { position: absolute; content: ''; top: 0%; left: 0%; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; border-radius: 0.28571429rem; z-index: 100; } .ui.loading.segment:after, .play-button.loading.segment:after, .download-button.loading.segment:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -1.5em 0em 0em -1.5em; width: 3em; height: 3em; animation: segment-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #42495F rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; visibility: visible; z-index: 101; } @keyframes segment-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /******************************* Variations *******************************/ /*------------------- Basic --------------------*/ .ui.basic.segment, .play-button.basic.segment, .download-button.basic.segment { background: none transparent; box-shadow: none; border: none; border-radius: 0px; } /*------------------- Clearing --------------------*/ .ui.clearing.segment:after, .play-button.clearing.segment:after, .download-button.clearing.segment:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*------------------- Colors --------------------*/ /* Red */ .ui.red.segment:not(.inverted), .play-button.red.segment:not(.inverted), .download-button.red.segment:not(.inverted) { border-top: 2px solid #E81123 !important; } .ui.inverted.red.segment, .play-button.inverted.red.segment, .download-button.inverted.red.segment { background-color: #E81123 !important; color: #FFFFFF !important; } /* Orange */ .ui.orange.segment:not(.inverted), .play-button.orange.segment:not(.inverted), .download-button.orange.segment:not(.inverted) { border-top: 2px solid #DF4600 !important; } .ui.inverted.orange.segment, .play-button.inverted.orange.segment, .download-button.inverted.orange.segment { background-color: #DF4600 !important; color: #FFFFFF !important; } /* Yellow */ .ui.yellow.segment:not(.inverted), .play-button.yellow.segment:not(.inverted), .download-button.yellow.segment:not(.inverted), .ui.download-button.segment:not(.inverted) { border-top: 2px solid #F4C918 !important; } .ui.inverted.yellow.segment, .play-button.inverted.yellow.segment, .download-button.inverted.yellow.segment, .ui.inverted.download-button.segment { background-color: #F4C918 !important; color: #FFFFFF !important; } /* Olive */ .ui.olive.segment:not(.inverted), .play-button.olive.segment:not(.inverted), .download-button.olive.segment:not(.inverted) { border-top: 2px solid #B5CC18 !important; } .ui.inverted.olive.segment, .play-button.inverted.olive.segment, .download-button.inverted.olive.segment { background-color: #B5CC18 !important; color: #FFFFFF !important; } /* Green */ .ui.green.segment:not(.inverted), .ui.ui.button.getting-started-btn.segment:not(.inverted), .play-button.green.segment:not(.inverted), .download-button.green.segment:not(.inverted), .ui.play-button.button.getting-started-btn.segment:not(.inverted), .ui.ui.play-button.getting-started-btn.segment:not(.inverted), .ui.download-button.button.getting-started-btn.segment:not(.inverted), .ui.ui.download-button.getting-started-btn.segment:not(.inverted) { border-top: 2px solid #3FC863 !important; } .ui.inverted.green.segment, .ui.inverted.ui.button.getting-started-btn.segment, .play-button.inverted.green.segment, .download-button.inverted.green.segment, .ui.inverted.play-button.button.getting-started-btn.segment, .ui.inverted.ui.play-button.getting-started-btn.segment, .ui.inverted.download-button.button.getting-started-btn.segment, .ui.inverted.ui.download-button.getting-started-btn.segment { background-color: #3FC863 !important; color: #FFFFFF !important; } /* Teal */ .ui.teal.segment:not(.inverted), .play-button.teal.segment:not(.inverted), .download-button.teal.segment:not(.inverted) { border-top: 2px solid #008272 !important; } .ui.inverted.teal.segment, .play-button.inverted.teal.segment, .download-button.inverted.teal.segment { background-color: #008272 !important; color: #FFFFFF !important; } /* Blue */ .ui.blue.segment:not(.inverted), .play-button.blue.segment:not(.inverted), .ui.play-button.segment:not(.inverted), .download-button.blue.segment:not(.inverted) { border-top: 2px solid #54C9C9 !important; } .ui.inverted.blue.segment, .play-button.inverted.blue.segment, .ui.inverted.play-button.segment, .download-button.inverted.blue.segment { background-color: #54C9C9 !important; color: #FFFFFF !important; } /* Violet */ .ui.violet.segment:not(.inverted), .play-button.violet.segment:not(.inverted), .download-button.violet.segment:not(.inverted) { border-top: 2px solid #C90072 !important; } .ui.inverted.violet.segment, .play-button.inverted.violet.segment, .download-button.inverted.violet.segment { background-color: #C90072 !important; color: #FFFFFF !important; } /* Purple */ .ui.purple.segment:not(.inverted), .play-button.purple.segment:not(.inverted), .download-button.purple.segment:not(.inverted) { border-top: 2px solid #8169E6 !important; } .ui.inverted.purple.segment, .play-button.inverted.purple.segment, .download-button.inverted.purple.segment { background-color: #8169E6 !important; color: #FFFFFF !important; } /* Pink */ .ui.pink.segment:not(.inverted), .play-button.pink.segment:not(.inverted), .download-button.pink.segment:not(.inverted) { border-top: 2px solid #E2008C !important; } .ui.inverted.pink.segment, .play-button.inverted.pink.segment, .download-button.inverted.pink.segment { background-color: #E2008C !important; color: #FFFFFF !important; } /* Brown */ .ui.brown.segment:not(.inverted), .play-button.brown.segment:not(.inverted), .download-button.brown.segment:not(.inverted) { border-top: 2px solid #6B5B4C !important; } .ui.inverted.brown.segment, .play-button.inverted.brown.segment, .download-button.inverted.brown.segment { background-color: #6B5B4C !important; color: #FFFFFF !important; } /* Grey */ .ui.grey.segment:not(.inverted), .ui.ui.button.editortools-btn.segment:not(.inverted), .play-button.grey.segment:not(.inverted), .download-button.grey.segment:not(.inverted), .ui.play-button.button.editortools-btn.segment:not(.inverted), .ui.ui.play-button.editortools-btn.segment:not(.inverted), .ui.download-button.button.editortools-btn.segment:not(.inverted), .ui.ui.download-button.editortools-btn.segment:not(.inverted) { border-top: 2px solid #42495F !important; } .ui.inverted.grey.segment, .ui.inverted.ui.button.editortools-btn.segment, .play-button.inverted.grey.segment, .download-button.inverted.grey.segment, .ui.inverted.play-button.button.editortools-btn.segment, .ui.inverted.ui.play-button.editortools-btn.segment, .ui.inverted.download-button.button.editortools-btn.segment, .ui.inverted.ui.download-button.editortools-btn.segment { background-color: #42495F !important; color: #FFFFFF !important; } /* Black */ .ui.black.segment:not(.inverted), .play-button.black.segment:not(.inverted), .download-button.black.segment:not(.inverted) { border-top: 2px solid #1B1C1D !important; } .ui.inverted.black.segment, .play-button.inverted.black.segment, .download-button.inverted.black.segment { background-color: #1B1C1D !important; color: #FFFFFF !important; } /*------------------- Aligned --------------------*/ .ui[class*="left aligned"].segment, .play-button[class*="left aligned"].segment, .download-button[class*="left aligned"].segment { text-align: left; } .ui[class*="right aligned"].segment, .play-button[class*="right aligned"].segment, .download-button[class*="right aligned"].segment { text-align: right; } .ui[class*="center aligned"].segment, .play-button[class*="center aligned"].segment, .download-button[class*="center aligned"].segment { text-align: center; } /*------------------- Floated --------------------*/ .ui.floated.segment, .ui[class*="left floated"].segment, .play-button.floated.segment, .play-button[class*="left floated"].segment, .download-button.floated.segment, .download-button[class*="left floated"].segment { float: left; margin-right: 1em; } .ui[class*="right floated"].segment, .play-button[class*="right floated"].segment, .download-button[class*="right floated"].segment { float: right; margin-left: 1em; } /*------------------- Inverted --------------------*/ .ui.inverted.segment, .play-button.inverted.segment, .download-button.inverted.segment { border: none; box-shadow: none; } .ui.inverted.segment, .ui.primary.inverted.segment, .play-button.inverted.segment, .play-button.primary.inverted.segment, .download-button.inverted.segment, .download-button.primary.inverted.segment { background: #1B1C1D; color: rgba(255, 255, 255, 0.9); } /* Nested */ .ui.inverted.segment .segment, .play-button.inverted.segment .segment, .download-button.inverted.segment .segment { color: rgba(0, 0, 0, 0.87); } .ui.inverted.segment .inverted.segment, .play-button.inverted.segment .inverted.segment, .download-button.inverted.segment .inverted.segment { color: rgba(255, 255, 255, 0.9); } /* Attached */ .ui.inverted.attached.segment, .play-button.inverted.attached.segment, .download-button.inverted.attached.segment { border-color: #555555; } /*------------------- Emphasis --------------------*/ /* Secondary */ .ui.secondary.segment, .play-button.secondary.segment, .download-button.secondary.segment { background: #F3F4F5; color: rgba(0, 0, 0, 0.6); } .ui.secondary.inverted.segment, .play-button.secondary.inverted.segment, .download-button.secondary.inverted.segment { background: #4c4f52 linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); color: rgba(255, 255, 255, 0.8); } /* Tertiary */ .ui.tertiary.segment, .play-button.tertiary.segment, .download-button.tertiary.segment { background: #DCDDDE; color: rgba(0, 0, 0, 0.6); } .ui.tertiary.inverted.segment, .play-button.tertiary.inverted.segment, .download-button.tertiary.inverted.segment { background: #717579 linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%); color: rgba(255, 255, 255, 0.8); } /*------------------- Attached --------------------*/ /* Middle */ .ui.attached.segment, .play-button.attached.segment, .download-button.attached.segment { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em -1px; width: calc(100% + 2px ); max-width: calc(100% + 2px ); box-shadow: none; border: 1px solid #D4D4D5; } .ui.attached:not(.message) + .ui.attached.segment:not(.top), .play-button.attached:not(.message) + .play-button.attached.segment:not(.top), .download-button.attached:not(.message) + .download-button.attached.segment:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].segment, .play-button[class*="top attached"].segment, .download-button[class*="top attached"].segment { bottom: 0px; margin-bottom: 0em; top: 0px; margin-top: 1rem; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.segment[class*="top attached"]:first-child, .play-button.segment[class*="top attached"]:first-child, .download-button.segment[class*="top attached"]:first-child { margin-top: 0em; } /* Bottom */ .ui.segment[class*="bottom attached"], .play-button.segment[class*="bottom attached"], .download-button.segment[class*="bottom attached"] { bottom: 0px; margin-top: 0em; top: 0px; margin-bottom: 1rem; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui.segment[class*="bottom attached"]:last-child, .play-button.segment[class*="bottom attached"]:last-child, .download-button.segment[class*="bottom attached"]:last-child { margin-bottom: 0em; } /*------------------- Size --------------------*/ .ui.mini.segments .segment, .ui.mini.segment, .play-button.mini.segments .segment, .play-button.mini.segment, .download-button.mini.segments .segment, .download-button.mini.segment { font-size: 0.78571429rem; } .ui.tiny.segments .segment, .ui.tiny.segment, .play-button.tiny.segments .segment, .play-button.tiny.segment, .download-button.tiny.segments .segment, .download-button.tiny.segment { font-size: 0.85714286rem; } .ui.small.segments .segment, .ui.small.segment, .play-button.small.segments .segment, .play-button.small.segment, .download-button.small.segments .segment, .download-button.small.segment { font-size: 0.92857143rem; } .ui.segments .segment, .ui.segment, .play-button.segments .segment, .play-button.segment, .download-button.segments .segment, .download-button.segment { font-size: 1rem; } .ui.large.segments .segment, .ui.large.segment, .play-button.large.segments .segment, .play-button.large.segment, .download-button.large.segments .segment, .download-button.large.segment { font-size: 1.14285714rem; } .ui.big.segments .segment, .ui.big.segment, .play-button.big.segments .segment, .play-button.big.segment, .download-button.big.segments .segment, .download-button.big.segment { font-size: 1.28571429rem; } .ui.huge.segments .segment, .ui.huge.segment, .play-button.huge.segments .segment, .play-button.huge.segment, .download-button.huge.segments .segment, .download-button.huge.segment { font-size: 1.42857143rem; } .ui.massive.segments .segment, .ui.massive.segment, .play-button.massive.segments .segment, .play-button.massive.segment, .download-button.massive.segments .segment, .download-button.massive.segment { font-size: 1.71428571rem; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Step * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Step *******************************/ /*-------------- Load Theme ---------------*/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Step *******************************/ /*------------------- Group --------------------*/ /*------------------- Element --------------------*/ /* Icon */ /* Title */ /* Description */ /* Arrow */ /* Mobile */ /*------------------- Types --------------------*/ /* Vertical */ /*------------------- Variations --------------------*/ /*------------------- States --------------------*/ /* Completed */ /* Hover */ /* Down */ /* Active */ /* Active + Hover */ /* Disabled */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Plural *******************************/ .ui.steps, .play-button.steps, .download-button.steps { display: inline-flex; flex-direction: row; align-items: stretch; margin: 1em 0em; background: ''; box-shadow: none; line-height: 1.14285714em; border-radius: 0.28571429rem; border: 1px solid rgba(34, 36, 38, 0.15); } /* First Steps */ .ui.steps:first-child, .play-button.steps:first-child, .download-button.steps:first-child { margin-top: 0em; } /* Last Steps */ .ui.steps:last-child, .play-button.steps:last-child, .download-button.steps:last-child { margin-bottom: 0em; } /******************************* Singular *******************************/ .ui.steps .step, .play-button.steps .step, .download-button.steps .step { position: relative; display: flex; flex: 1 0 auto; flex-wrap: wrap; flex-direction: row; vertical-align: middle; align-items: center; justify-content: center; margin: 0em 0em; padding: 1.14285714em 2em; background: #FFFFFF; color: rgba(0, 0, 0, 0.87); box-shadow: none; border-radius: 0em; border: none; border-right: 1px solid rgba(34, 36, 38, 0.15); transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; } /* Arrow */ .ui.steps .step:after, .play-button.steps .step:after, .download-button.steps .step:after { display: none; position: absolute; z-index: 2; content: ''; top: 50%; right: 0%; border: medium none; background-color: #FFFFFF; width: 1.14285714em; height: 1.14285714em; border-style: solid; border-color: rgba(34, 36, 38, 0.15); border-width: 0px 1px 1px 0px; transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; transform: translateY(-50%) translateX(50%) rotate(-45deg); } /* First Step */ .ui.steps .step:first-child, .play-button.steps .step:first-child, .download-button.steps .step:first-child { padding-left: 2em; border-radius: 0.28571429rem 0em 0em 0.28571429rem; } /* Last Step */ .ui.steps .step:last-child, .play-button.steps .step:last-child, .download-button.steps .step:last-child { border-radius: 0em 0.28571429rem 0.28571429rem 0em; } .ui.steps .step:last-child, .play-button.steps .step:last-child, .download-button.steps .step:last-child { border-right: none; margin-right: 0em; } /* Only Step */ .ui.steps .step:only-child, .play-button.steps .step:only-child, .download-button.steps .step:only-child { border-radius: 0.28571429rem; } /******************************* Content *******************************/ /* Title */ .ui.steps .step .title, .play-button.steps .step .title, .download-button.steps .step .title { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.14285714em; font-weight: bold; } .ui.steps .step > .title, .play-button.steps .step > .title, .download-button.steps .step > .title { width: 100%; } /* Description */ .ui.steps .step .description, .play-button.steps .step .description, .download-button.steps .step .description { font-weight: normal; font-size: 0.92857143em; color: rgba(0, 0, 0, 0.87); } .ui.steps .step > .description, .play-button.steps .step > .description, .download-button.steps .step > .description { width: 100%; } .ui.steps .step .title ~ .description, .play-button.steps .step .title ~ .description, .download-button.steps .step .title ~ .description { margin-top: 0.25em; } /* Icon */ .ui.steps .step > .icon, .play-button.steps .step > .icon, .download-button.steps .step > .icon { line-height: 1; font-size: 2.5em; margin: 0em 1rem 0em 0em; } .ui.steps .step > .icon, .ui.steps .step > .icon ~ .content, .play-button.steps .step > .icon, .play-button.steps .step > .icon ~ .content, .download-button.steps .step > .icon, .download-button.steps .step > .icon ~ .content { display: block; flex: 0 1 auto; align-self: middle; } .ui.steps .step > .icon ~ .content, .play-button.steps .step > .icon ~ .content, .download-button.steps .step > .icon ~ .content { flex-grow: 1 0 auto; } /* Horizontal Icon */ .ui.steps:not(.vertical) .step > .icon, .play-button.steps:not(.vertical) .step > .icon, .download-button.steps:not(.vertical) .step > .icon { width: auto; } /* Link */ .ui.steps .link.step, .ui.steps a.step, .play-button.steps .link.step, .play-button.steps a.step, .download-button.steps .link.step, .download-button.steps a.step { cursor: pointer; } /******************************* Types *******************************/ /*-------------- Ordered ---------------*/ .ui.ordered.steps, .play-button.ordered.steps, .download-button.ordered.steps { counter-reset: ordered; } .ui.ordered.steps .step:before, .play-button.ordered.steps .step:before, .download-button.ordered.steps .step:before { display: block; position: static; text-align: center; content: counters(ordered, "."); align-self: middle; margin-right: 1rem; font-size: 2.5em; counter-increment: ordered; font-family: inherit; font-weight: bold; } .ui.ordered.steps .step > *, .play-button.ordered.steps .step > *, .download-button.ordered.steps .step > * { display: block; align-self: middle; } /*-------------- Vertical ---------------*/ .ui.vertical.steps, .play-button.vertical.steps, .download-button.vertical.steps { display: inline-flex; flex-direction: column; overflow: visible; } .ui.vertical.steps .step, .play-button.vertical.steps .step, .download-button.vertical.steps .step { justify-content: flex-start; border-radius: 0em; padding: 1.14285714em 2em; border-right: none; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.vertical.steps .step:first-child, .play-button.vertical.steps .step:first-child, .download-button.vertical.steps .step:first-child { padding: 1.14285714em 2em; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.vertical.steps .step:last-child, .play-button.vertical.steps .step:last-child, .download-button.vertical.steps .step:last-child { border-bottom: none; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui.vertical.steps .step:only-child, .play-button.vertical.steps .step:only-child, .download-button.vertical.steps .step:only-child { border-radius: 0.28571429rem; } /* Arrow */ .ui.vertical.steps .step:after, .play-button.vertical.steps .step:after, .download-button.vertical.steps .step:after { display: none; } .ui.vertical.steps .step:after, .play-button.vertical.steps .step:after, .download-button.vertical.steps .step:after { top: 50%; right: 0%; border-width: 0px 1px 1px 0px; } .ui.vertical.steps .step:after, .play-button.vertical.steps .step:after, .download-button.vertical.steps .step:after { display: none; } .ui.vertical.steps .active.step:after, .play-button.vertical.steps .active.step:after, .download-button.vertical.steps .active.step:after { display: block; } .ui.vertical.steps .step:last-child:after, .play-button.vertical.steps .step:last-child:after, .download-button.vertical.steps .step:last-child:after { display: none; } .ui.vertical.steps .active.step:last-child:after, .play-button.vertical.steps .active.step:last-child:after, .download-button.vertical.steps .active.step:last-child:after { display: block; } /*--------------- Responsive ----------------*/ /* Mobile (Default) */ @media only screen and (max-width: 767px) { .ui.steps:not(.unstackable), .play-button.steps:not(.unstackable), .download-button.steps:not(.unstackable) { display: inline-flex; overflow: visible; flex-direction: column; } .ui.steps:not(.unstackable) .step, .play-button.steps:not(.unstackable) .step, .download-button.steps:not(.unstackable) .step { width: 100% !important; flex-direction: column; border-radius: 0em; padding: 1.14285714em 2em; } .ui.steps:not(.unstackable) .step:first-child, .play-button.steps:not(.unstackable) .step:first-child, .download-button.steps:not(.unstackable) .step:first-child { padding: 1.14285714em 2em; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.steps:not(.unstackable) .step:last-child, .play-button.steps:not(.unstackable) .step:last-child, .download-button.steps:not(.unstackable) .step:last-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Arrow */ .ui.steps:not(.unstackable) .step:after, .play-button.steps:not(.unstackable) .step:after, .download-button.steps:not(.unstackable) .step:after { display: none !important; } /* Content */ .ui.steps:not(.unstackable) .step .content, .play-button.steps:not(.unstackable) .step .content, .download-button.steps:not(.unstackable) .step .content { text-align: center; } /* Icon */ .ui.steps:not(.unstackable) .step > .icon, .ui.ordered.steps:not(.unstackable) .step:before, .play-button.steps:not(.unstackable) .step > .icon, .play-button.ordered.steps:not(.unstackable) .step:before, .download-button.steps:not(.unstackable) .step > .icon, .download-button.ordered.steps:not(.unstackable) .step:before { margin: 0em 0em 1rem 0em; } } /******************************* States *******************************/ /* Link Hover */ .ui.steps .link.step:hover::after, .ui.steps .link.step:hover, .ui.steps a.step:hover::after, .ui.steps a.step:hover, .play-button.steps .link.step:hover::after, .play-button.steps .link.step:hover, .play-button.steps a.step:hover::after, .play-button.steps a.step:hover, .download-button.steps .link.step:hover::after, .download-button.steps .link.step:hover, .download-button.steps a.step:hover::after, .download-button.steps a.step:hover { background: #F9FAFB; color: rgba(0, 0, 0, 0.8); } /* Link Down */ .ui.steps .link.step:active::after, .ui.steps .link.step:active, .ui.steps a.step:active::after, .ui.steps a.step:active, .play-button.steps .link.step:active::after, .play-button.steps .link.step:active, .play-button.steps a.step:active::after, .play-button.steps a.step:active, .download-button.steps .link.step:active::after, .download-button.steps .link.step:active, .download-button.steps a.step:active::after, .download-button.steps a.step:active { background: #F3F4F5; color: rgba(0, 0, 0, 0.9); } /* Active */ .ui.steps .step.active, .play-button.steps .step.active, .download-button.steps .step.active { cursor: auto; background: #F3F4F5; } .ui.steps .step.active:after, .play-button.steps .step.active:after, .download-button.steps .step.active:after { background: #F3F4F5; } .ui.steps .step.active .title, .play-button.steps .step.active .title, .download-button.steps .step.active .title { color: #4183C4; } .ui.ordered.steps .step.active:before, .ui.steps .active.step .icon, .play-button.ordered.steps .step.active:before, .play-button.steps .active.step .icon, .download-button.ordered.steps .step.active:before, .download-button.steps .active.step .icon { color: rgba(0, 0, 0, 0.85); } /* Active Arrow */ .ui.steps .step:after, .play-button.steps .step:after, .download-button.steps .step:after { display: block; } .ui.steps .active.step:after, .play-button.steps .active.step:after, .download-button.steps .active.step:after { display: block; } .ui.steps .step:last-child:after, .play-button.steps .step:last-child:after, .download-button.steps .step:last-child:after { display: none; } .ui.steps .active.step:last-child:after, .play-button.steps .active.step:last-child:after, .download-button.steps .active.step:last-child:after { display: none; } /* Active Hover */ .ui.steps .link.active.step:hover::after, .ui.steps .link.active.step:hover, .ui.steps a.active.step:hover::after, .ui.steps a.active.step:hover, .play-button.steps .link.active.step:hover::after, .play-button.steps .link.active.step:hover, .play-button.steps a.active.step:hover::after, .play-button.steps a.active.step:hover, .download-button.steps .link.active.step:hover::after, .download-button.steps .link.active.step:hover, .download-button.steps a.active.step:hover::after, .download-button.steps a.active.step:hover { cursor: pointer; background: #DCDDDE; color: rgba(0, 0, 0, 0.87); } /* Completed */ .ui.steps .step.completed > .icon:before, .ui.ordered.steps .step.completed:before, .play-button.steps .step.completed > .icon:before, .play-button.ordered.steps .step.completed:before, .download-button.steps .step.completed > .icon:before, .download-button.ordered.steps .step.completed:before { color: #3FC863; } /* Disabled */ .ui.steps .disabled.step, .play-button.steps .disabled.step, .download-button.steps .disabled.step { cursor: auto; background: #FFFFFF; pointer-events: none; } .ui.steps .disabled.step, .ui.steps .disabled.step .title, .ui.steps .disabled.step .description, .play-button.steps .disabled.step, .play-button.steps .disabled.step .title, .play-button.steps .disabled.step .description, .download-button.steps .disabled.step, .download-button.steps .disabled.step .title, .download-button.steps .disabled.step .description { color: rgba(40, 40, 40, 0.3); } .ui.steps .disabled.step:after, .play-button.steps .disabled.step:after, .download-button.steps .disabled.step:after { background: #FFFFFF; } /******************************* Variations *******************************/ /*-------------- Stackable ---------------*/ /* Tablet Or Below */ @media only screen and (max-width: 991px) { .ui[class*="tablet stackable"].steps, .play-button[class*="tablet stackable"].steps, .download-button[class*="tablet stackable"].steps { display: inline-flex; overflow: visible; flex-direction: column; } /* Steps */ .ui[class*="tablet stackable"].steps .step, .play-button[class*="tablet stackable"].steps .step, .download-button[class*="tablet stackable"].steps .step { flex-direction: column; border-radius: 0em; padding: 1.14285714em 2em; } .ui[class*="tablet stackable"].steps .step:first-child, .play-button[class*="tablet stackable"].steps .step:first-child, .download-button[class*="tablet stackable"].steps .step:first-child { padding: 1.14285714em 2em; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui[class*="tablet stackable"].steps .step:last-child, .play-button[class*="tablet stackable"].steps .step:last-child, .download-button[class*="tablet stackable"].steps .step:last-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Arrow */ .ui[class*="tablet stackable"].steps .step:after, .play-button[class*="tablet stackable"].steps .step:after, .download-button[class*="tablet stackable"].steps .step:after { display: none !important; } /* Content */ .ui[class*="tablet stackable"].steps .step .content, .play-button[class*="tablet stackable"].steps .step .content, .download-button[class*="tablet stackable"].steps .step .content { text-align: center; } /* Icon */ .ui[class*="tablet stackable"].steps .step > .icon, .ui[class*="tablet stackable"].ordered.steps .step:before, .play-button[class*="tablet stackable"].steps .step > .icon, .play-button[class*="tablet stackable"].ordered.steps .step:before, .download-button[class*="tablet stackable"].steps .step > .icon, .download-button[class*="tablet stackable"].ordered.steps .step:before { margin: 0em 0em 1rem 0em; } } /*-------------- Fluid ---------------*/ /* Fluid */ .ui.fluid.steps, .play-button.fluid.steps, .download-button.fluid.steps { display: flex; width: 100%; } /*-------------- Attached ---------------*/ /* Top */ .ui.attached.steps, .play-button.attached.steps, .download-button.attached.steps { width: calc(100% + 2px ) !important; margin: 0em -1px 0; max-width: calc(100% + 2px ); border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.attached.steps .step:first-child, .play-button.attached.steps .step:first-child, .download-button.attached.steps .step:first-child { border-radius: 0.28571429rem 0em 0em 0em; } .ui.attached.steps .step:last-child, .play-button.attached.steps .step:last-child, .download-button.attached.steps .step:last-child { border-radius: 0em 0.28571429rem 0em 0em; } /* Bottom */ .ui.bottom.attached.steps, .play-button.bottom.attached.steps, .download-button.bottom.attached.steps { margin: 0 -1px 0em; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui.bottom.attached.steps .step:first-child, .play-button.bottom.attached.steps .step:first-child, .download-button.bottom.attached.steps .step:first-child { border-radius: 0em 0em 0em 0.28571429rem; } .ui.bottom.attached.steps .step:last-child, .play-button.bottom.attached.steps .step:last-child, .download-button.bottom.attached.steps .step:last-child { border-radius: 0em 0em 0.28571429rem 0em; } /*------------------- Evenly Divided --------------------*/ .ui.one.steps, .ui.two.steps, .ui.three.steps, .ui.four.steps, .ui.five.steps, .ui.six.steps, .ui.seven.steps, .ui.eight.steps, .play-button.one.steps, .play-button.two.steps, .play-button.three.steps, .play-button.four.steps, .play-button.five.steps, .play-button.six.steps, .play-button.seven.steps, .play-button.eight.steps, .download-button.one.steps, .download-button.two.steps, .download-button.three.steps, .download-button.four.steps, .download-button.five.steps, .download-button.six.steps, .download-button.seven.steps, .download-button.eight.steps { width: 100%; } .ui.one.steps > .step, .ui.two.steps > .step, .ui.three.steps > .step, .ui.four.steps > .step, .ui.five.steps > .step, .ui.six.steps > .step, .ui.seven.steps > .step, .ui.eight.steps > .step, .play-button.one.steps > .step, .play-button.two.steps > .step, .play-button.three.steps > .step, .play-button.four.steps > .step, .play-button.five.steps > .step, .play-button.six.steps > .step, .play-button.seven.steps > .step, .play-button.eight.steps > .step, .download-button.one.steps > .step, .download-button.two.steps > .step, .download-button.three.steps > .step, .download-button.four.steps > .step, .download-button.five.steps > .step, .download-button.six.steps > .step, .download-button.seven.steps > .step, .download-button.eight.steps > .step { flex-wrap: nowrap; } .ui.one.steps > .step, .play-button.one.steps > .step, .download-button.one.steps > .step { width: 100%; } .ui.two.steps > .step, .play-button.two.steps > .step, .download-button.two.steps > .step { width: 50%; } .ui.three.steps > .step, .play-button.three.steps > .step, .download-button.three.steps > .step { width: 33.333%; } .ui.four.steps > .step, .play-button.four.steps > .step, .download-button.four.steps > .step { width: 25%; } .ui.five.steps > .step, .play-button.five.steps > .step, .download-button.five.steps > .step { width: 20%; } .ui.six.steps > .step, .play-button.six.steps > .step, .download-button.six.steps > .step { width: 16.666%; } .ui.seven.steps > .step, .play-button.seven.steps > .step, .download-button.seven.steps > .step { width: 14.285%; } .ui.eight.steps > .step, .play-button.eight.steps > .step, .download-button.eight.steps > .step { width: 12.500%; } /*------------------- Sizes --------------------*/ .ui.mini.steps .step, .ui.mini.step, .play-button.mini.steps .step, .play-button.mini.step, .download-button.mini.steps .step, .download-button.mini.step { font-size: 0.78571429rem; } .ui.tiny.steps .step, .ui.tiny.step, .play-button.tiny.steps .step, .play-button.tiny.step, .download-button.tiny.steps .step, .download-button.tiny.step { font-size: 0.85714286rem; } .ui.small.steps .step, .ui.small.step, .play-button.small.steps .step, .play-button.small.step, .download-button.small.steps .step, .download-button.small.step { font-size: 0.92857143rem; } .ui.steps .step, .ui.step, .play-button.steps .step, .play-button.step, .download-button.steps .step, .download-button.step { font-size: 1rem; } .ui.large.steps .step, .ui.large.step, .play-button.large.steps .step, .play-button.large.step, .download-button.large.steps .step, .download-button.large.step { font-size: 1.14285714rem; } .ui.big.steps .step, .ui.big.step, .play-button.big.steps .step, .play-button.big.step, .download-button.big.steps .step, .download-button.big.step { font-size: 1.28571429rem; } .ui.huge.steps .step, .ui.huge.step, .play-button.huge.steps .step, .play-button.huge.step, .download-button.huge.steps .step, .download-button.huge.step { font-size: 1.42857143rem; } .ui.massive.steps .step, .ui.massive.step, .play-button.massive.steps .step, .play-button.massive.step, .download-button.massive.steps .step, .download-button.massive.step { font-size: 1.71428571rem; } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /* Collections */ /*! * # Semantic UI - Breadcrumb * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Breadcrumb *******************************/ /*------------------- Breadcrumb --------------------*/ /* Coupling */ /*------------------- States --------------------*/ /* Packaged Theme */ /******************************* Breadcrumb *******************************/ /*------------------- Breadcrumb --------------------*/ /* Coupling */ /*------------------- States --------------------*/ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Breadcrumb *******************************/ .ui.breadcrumb, .play-button.breadcrumb, .download-button.breadcrumb { line-height: 1; display: inline-block; margin: 0em 0em; vertical-align: middle; } .ui.breadcrumb:first-child, .play-button.breadcrumb:first-child, .download-button.breadcrumb:first-child { margin-top: 0em; } .ui.breadcrumb:last-child, .play-button.breadcrumb:last-child, .download-button.breadcrumb:last-child { margin-bottom: 0em; } /******************************* Content *******************************/ /* Divider */ .ui.breadcrumb .divider, .play-button.breadcrumb .divider, .download-button.breadcrumb .divider { display: inline-block; opacity: 0.7; margin: 0em 0.21428571rem 0em; font-size: 0.92857143em; color: rgba(0, 0, 0, 0.4); vertical-align: baseline; } /* Link */ .ui.breadcrumb a, .play-button.breadcrumb a, .download-button.breadcrumb a { color: #4183C4; } .ui.breadcrumb a:hover, .play-button.breadcrumb a:hover, .download-button.breadcrumb a:hover { color: #1e70bf; } /* Icon Divider */ .ui.breadcrumb .icon.divider, .play-button.breadcrumb .icon.divider, .download-button.breadcrumb .icon.divider { font-size: 0.85714286em; vertical-align: baseline; } /* Section */ .ui.breadcrumb a.section, .play-button.breadcrumb a.section, .download-button.breadcrumb a.section { cursor: pointer; } .ui.breadcrumb .section, .play-button.breadcrumb .section, .download-button.breadcrumb .section { display: inline-block; margin: 0em; padding: 0em; } /* Loose Coupling */ .ui.breadcrumb.segment, .play-button.breadcrumb.segment, .download-button.breadcrumb.segment { display: inline-block; padding: 0.78571429em 1em; } /******************************* States *******************************/ .ui.breadcrumb .active.section, .play-button.breadcrumb .active.section, .download-button.breadcrumb .active.section { font-weight: bold; } /******************************* Variations *******************************/ .ui.mini.breadcrumb, .play-button.mini.breadcrumb, .download-button.mini.breadcrumb { font-size: 0.78571429rem; } .ui.tiny.breadcrumb, .play-button.tiny.breadcrumb, .download-button.tiny.breadcrumb { font-size: 0.85714286rem; } .ui.small.breadcrumb, .play-button.small.breadcrumb, .download-button.small.breadcrumb { font-size: 0.92857143rem; } .ui.breadcrumb, .play-button.breadcrumb, .download-button.breadcrumb { font-size: 1rem; } .ui.large.breadcrumb, .play-button.large.breadcrumb, .download-button.large.breadcrumb { font-size: 1.14285714rem; } .ui.big.breadcrumb, .play-button.big.breadcrumb, .download-button.big.breadcrumb { font-size: 1.28571429rem; } .ui.huge.breadcrumb, .play-button.huge.breadcrumb, .download-button.huge.breadcrumb { font-size: 1.42857143rem; } .ui.massive.breadcrumb, .play-button.massive.breadcrumb, .download-button.massive.breadcrumb { font-size: 1.71428571rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Form * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Form *******************************/ /*------------------- Elements --------------------*/ /* Form */ /* Text */ /* Field */ /* Fields */ /* Form Label */ /* Input */ /* Select */ /* Text Area */ /* Checkbox */ /* Inline Validation Prompt */ /*------------------- States --------------------*/ /* Focus */ /* Input Focus */ /* Text Area Focus */ /* Disabled */ /* Errored Input */ /* AutoFill */ /* Input Error */ /* Dropdown Error */ /* Focused Error */ /* Placeholder Error */ /* Loading Dimmer */ /* Loading Spinner */ /*------------------- Types --------------------*/ /* Required */ /* Inverted */ /*------------------- Variations --------------------*/ /* Grouped Fields */ /* Inline */ /*------------------- Groups --------------------*/ /* Packaged Theme */ /******************************* Form *******************************/ /*------------------- Elements --------------------*/ /* Form */ /* Text */ /* Field */ /* Fields */ /* Form Label */ /* Input */ /* Select */ /* Text Area */ /* Checkbox */ /* Inline Validation Prompt */ /*------------------- States --------------------*/ /* Focus */ /* Input Focus */ /* Text Area Focus */ /* Disabled */ /* Errored Input */ /* AutoFill */ /* Input Error */ /* Dropdown Error */ /* Focused Error */ /* Placeholder Error */ /* Loading Dimmer */ /* Loading Spinner */ /*------------------- Types --------------------*/ /* Required */ /* Inverted */ /*------------------- Variations --------------------*/ /* Grouped Fields */ /* Inline */ /*------------------- Groups --------------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Elements *******************************/ /*-------------------- Form ---------------------*/ .ui.form, .play-button.form, .download-button.form { position: relative; max-width: 100%; } /*-------------------- Content ---------------------*/ .ui.form > p, .play-button.form > p, .download-button.form > p { margin: 1em 0em; } /*-------------------- Field ---------------------*/ .ui.form .field, .play-button.form .field, .download-button.form .field { clear: both; margin: 0em 0em 1em; } .ui.form .field:last-child, .ui.form .fields:last-child .field, .play-button.form .field:last-child, .play-button.form .fields:last-child .field, .download-button.form .field:last-child, .download-button.form .fields:last-child .field { margin-bottom: 0em; } .ui.form .fields .field, .play-button.form .fields .field, .download-button.form .fields .field { clear: both; margin: 0em; } /*-------------------- Labels ---------------------*/ .ui.form .field > label, .play-button.form .field > label, .download-button.form .field > label { display: block; margin: 0em 0em 0.28571429rem 0em; color: rgba(0, 0, 0, 0.87); font-size: 0.92857143em; font-weight: bold; text-transform: none; } /*-------------------- Standard Inputs ---------------------*/ .ui.form textarea, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"], .play-button.form textarea, .play-button.form input:not([type]), .play-button.form input[type="date"], .play-button.form input[type="datetime-local"], .play-button.form input[type="email"], .play-button.form input[type="number"], .play-button.form input[type="password"], .play-button.form input[type="search"], .play-button.form input[type="tel"], .play-button.form input[type="time"], .play-button.form input[type="text"], .play-button.form input[type="file"], .play-button.form input[type="url"], .download-button.form textarea, .download-button.form input:not([type]), .download-button.form input[type="date"], .download-button.form input[type="datetime-local"], .download-button.form input[type="email"], .download-button.form input[type="number"], .download-button.form input[type="password"], .download-button.form input[type="search"], .download-button.form input[type="tel"], .download-button.form input[type="time"], .download-button.form input[type="text"], .download-button.form input[type="file"], .download-button.form input[type="url"] { width: 100%; vertical-align: top; } /* Set max height on unusual input */ .ui.form ::-webkit-datetime-edit, .ui.form ::-webkit-inner-spin-button, .play-button.form ::-webkit-datetime-edit, .play-button.form ::-webkit-inner-spin-button, .download-button.form ::-webkit-datetime-edit, .download-button.form ::-webkit-inner-spin-button { height: 1.21428571em; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"], .play-button.form input:not([type]), .play-button.form input[type="date"], .play-button.form input[type="datetime-local"], .play-button.form input[type="email"], .play-button.form input[type="number"], .play-button.form input[type="password"], .play-button.form input[type="search"], .play-button.form input[type="tel"], .play-button.form input[type="time"], .play-button.form input[type="text"], .play-button.form input[type="file"], .play-button.form input[type="url"], .download-button.form input:not([type]), .download-button.form input[type="date"], .download-button.form input[type="datetime-local"], .download-button.form input[type="email"], .download-button.form input[type="number"], .download-button.form input[type="password"], .download-button.form input[type="search"], .download-button.form input[type="tel"], .download-button.form input[type="time"], .download-button.form input[type="text"], .download-button.form input[type="file"], .download-button.form input[type="url"] { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; margin: 0em; outline: none; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; box-shadow: 0em 0em 0em 0em transparent inset; transition: color 0.1s ease, border-color 0.1s ease; } /* Text Area */ .ui.form textarea, .play-button.form textarea, .download-button.form textarea { margin: 0em; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.78571429em 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); outline: none; color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; box-shadow: 0em 0em 0em 0em transparent inset; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; line-height: 1.2857; resize: vertical; } .ui.form textarea:not([rows]), .play-button.form textarea:not([rows]), .download-button.form textarea:not([rows]) { height: 12em; min-height: 8em; max-height: 24em; } .ui.form textarea, .ui.form input[type="checkbox"], .play-button.form textarea, .play-button.form input[type="checkbox"], .download-button.form textarea, .download-button.form input[type="checkbox"] { vertical-align: top; } /*-------------------------- Input w/ attached Button ---------------------------*/ .ui.form input.attached, .play-button.form input.attached, .download-button.form input.attached { width: auto; } /*-------------------- Basic Select ---------------------*/ .ui.form select, .play-button.form select, .download-button.form select { display: block; height: auto; width: 100%; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; box-shadow: 0em 0em 0em 0em transparent inset; padding: 0.62em 1em; color: rgba(0, 0, 0, 0.87); transition: color 0.1s ease, border-color 0.1s ease; } /*-------------------- Dropdown ---------------------*/ /* Block */ .ui.form .field > .selection.dropdown, .play-button.form .field > .selection.dropdown, .download-button.form .field > .selection.dropdown { width: 100%; } .ui.form .field > .selection.dropdown > .dropdown.icon, .play-button.form .field > .selection.dropdown > .dropdown.icon, .download-button.form .field > .selection.dropdown > .dropdown.icon { float: right; } /* Inline */ .ui.form .inline.fields .field > .selection.dropdown, .ui.form .inline.field > .selection.dropdown, .play-button.form .inline.fields .field > .selection.dropdown, .play-button.form .inline.field > .selection.dropdown, .download-button.form .inline.fields .field > .selection.dropdown, .download-button.form .inline.field > .selection.dropdown { width: auto; } .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, .ui.form .inline.field > .selection.dropdown > .dropdown.icon, .play-button.form .inline.fields .field > .selection.dropdown > .dropdown.icon, .play-button.form .inline.field > .selection.dropdown > .dropdown.icon, .download-button.form .inline.fields .field > .selection.dropdown > .dropdown.icon, .download-button.form .inline.field > .selection.dropdown > .dropdown.icon { float: none; } /*-------------------- UI Input ---------------------*/ /* Block */ .ui.form .field .ui.input, .ui.form .fields .field .ui.input, .ui.form .wide.field .ui.input, .play-button.form .field .play-button.input, .play-button.form .fields .field .play-button.input, .play-button.form .wide.field .play-button.input, .download-button.form .field .download-button.input, .download-button.form .fields .field .download-button.input, .download-button.form .wide.field .download-button.input { width: 100%; } /* Inline */ .ui.form .inline.fields .field:not(.wide) .ui.input, .ui.form .inline.field:not(.wide) .ui.input, .play-button.form .inline.fields .field:not(.wide) .play-button.input, .play-button.form .inline.field:not(.wide) .play-button.input, .download-button.form .inline.fields .field:not(.wide) .download-button.input, .download-button.form .inline.field:not(.wide) .download-button.input { width: auto; vertical-align: middle; } /* Auto Input */ .ui.form .fields .field .ui.input input, .ui.form .field .ui.input input, .play-button.form .fields .field .play-button.input input, .play-button.form .field .play-button.input input, .download-button.form .fields .field .download-button.input input, .download-button.form .field .download-button.input input { width: auto; } /* Full Width Input */ .ui.form .ten.fields .ui.input input, .ui.form .nine.fields .ui.input input, .ui.form .eight.fields .ui.input input, .ui.form .seven.fields .ui.input input, .ui.form .six.fields .ui.input input, .ui.form .five.fields .ui.input input, .ui.form .four.fields .ui.input input, .ui.form .three.fields .ui.input input, .ui.form .two.fields .ui.input input, .ui.form .wide.field .ui.input input, .play-button.form .ten.fields .play-button.input input, .play-button.form .nine.fields .play-button.input input, .play-button.form .eight.fields .play-button.input input, .play-button.form .seven.fields .play-button.input input, .play-button.form .six.fields .play-button.input input, .play-button.form .five.fields .play-button.input input, .play-button.form .four.fields .play-button.input input, .play-button.form .three.fields .play-button.input input, .play-button.form .two.fields .play-button.input input, .play-button.form .wide.field .play-button.input input, .download-button.form .ten.fields .download-button.input input, .download-button.form .nine.fields .download-button.input input, .download-button.form .eight.fields .download-button.input input, .download-button.form .seven.fields .download-button.input input, .download-button.form .six.fields .download-button.input input, .download-button.form .five.fields .download-button.input input, .download-button.form .four.fields .download-button.input input, .download-button.form .three.fields .download-button.input input, .download-button.form .two.fields .download-button.input input, .download-button.form .wide.field .download-button.input input { flex: 1 0 auto; width: 0px; } /*-------------------- Types of Messages ---------------------*/ .ui.form .success.message, .ui.form .warning.message, .ui.form .error.message, .play-button.form .success.message, .play-button.form .warning.message, .play-button.form .error.message, .download-button.form .success.message, .download-button.form .warning.message, .download-button.form .error.message { display: none; } /* Assumptions */ .ui.form .message:first-child, .play-button.form .message:first-child, .download-button.form .message:first-child { margin-top: 0px; } /*-------------------- Validation Prompt ---------------------*/ .ui.form .field .prompt.label, .play-button.form .field .prompt.label, .download-button.form .field .prompt.label { white-space: normal; background: #FFFFFF !important; border: 1px solid #E0B4B4 !important; color: #9F3A38 !important; } .ui.form .inline.fields .field .prompt, .ui.form .inline.field .prompt, .play-button.form .inline.fields .field .prompt, .play-button.form .inline.field .prompt, .download-button.form .inline.fields .field .prompt, .download-button.form .inline.field .prompt { vertical-align: top; margin: -0.25em 0em -0.5em 0.5em; } .ui.form .inline.fields .field .prompt:before, .ui.form .inline.field .prompt:before, .play-button.form .inline.fields .field .prompt:before, .play-button.form .inline.field .prompt:before, .download-button.form .inline.fields .field .prompt:before, .download-button.form .inline.field .prompt:before { border-width: 0px 0px 1px 1px; bottom: auto; right: auto; top: 50%; left: 0em; } /******************************* States *******************************/ /*-------------------- Autofilled ---------------------*/ .ui.form .field.field input:-webkit-autofill, .play-button.form .field.field input:-webkit-autofill, .download-button.form .field.field input:-webkit-autofill { box-shadow: 0px 0px 0px 100px #FFFFF0 inset !important; border-color: #E5DFA1 !important; } /* Focus */ .ui.form .field.field input:-webkit-autofill:focus, .play-button.form .field.field input:-webkit-autofill:focus, .download-button.form .field.field input:-webkit-autofill:focus { box-shadow: 0px 0px 0px 100px #FFFFF0 inset !important; border-color: #D5C315 !important; } /* Error */ .ui.form .error.error input:-webkit-autofill, .play-button.form .error.error input:-webkit-autofill, .download-button.form .error.error input:-webkit-autofill { box-shadow: 0px 0px 0px 100px #FFFAF0 inset !important; border-color: #E0B4B4 !important; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.form ::-webkit-input-placeholder, .play-button.form ::-webkit-input-placeholder, .download-button.form ::-webkit-input-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.form :-ms-input-placeholder, .play-button.form :-ms-input-placeholder, .download-button.form :-ms-input-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.form ::-moz-placeholder, .play-button.form ::-moz-placeholder, .download-button.form ::-moz-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.form :focus::-webkit-input-placeholder, .play-button.form :focus::-webkit-input-placeholder, .download-button.form :focus::-webkit-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.form :focus:-ms-input-placeholder, .play-button.form :focus:-ms-input-placeholder, .download-button.form :focus:-ms-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.form :focus::-moz-placeholder, .play-button.form :focus::-moz-placeholder, .download-button.form :focus::-moz-placeholder { color: rgba(115, 115, 115, 0.87); } /* Error Placeholder */ .ui.form .error ::-webkit-input-placeholder, .play-button.form .error ::-webkit-input-placeholder, .download-button.form .error ::-webkit-input-placeholder { color: #e7bdbc; } .ui.form .error :-ms-input-placeholder, .play-button.form .error :-ms-input-placeholder, .download-button.form .error :-ms-input-placeholder { color: #e7bdbc !important; } .ui.form .error ::-moz-placeholder, .play-button.form .error ::-moz-placeholder, .download-button.form .error ::-moz-placeholder { color: #e7bdbc; } .ui.form .error :focus::-webkit-input-placeholder, .play-button.form .error :focus::-webkit-input-placeholder, .download-button.form .error :focus::-webkit-input-placeholder { color: #da9796; } .ui.form .error :focus:-ms-input-placeholder, .play-button.form .error :focus:-ms-input-placeholder, .download-button.form .error :focus:-ms-input-placeholder { color: #da9796 !important; } .ui.form .error :focus::-moz-placeholder, .play-button.form .error :focus::-moz-placeholder, .download-button.form .error :focus::-moz-placeholder { color: #da9796; } /*-------------------- Focus ---------------------*/ .ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus, .play-button.form input:not([type]):focus, .play-button.form input[type="date"]:focus, .play-button.form input[type="datetime-local"]:focus, .play-button.form input[type="email"]:focus, .play-button.form input[type="number"]:focus, .play-button.form input[type="password"]:focus, .play-button.form input[type="search"]:focus, .play-button.form input[type="tel"]:focus, .play-button.form input[type="time"]:focus, .play-button.form input[type="text"]:focus, .play-button.form input[type="file"]:focus, .play-button.form input[type="url"]:focus, .download-button.form input:not([type]):focus, .download-button.form input[type="date"]:focus, .download-button.form input[type="datetime-local"]:focus, .download-button.form input[type="email"]:focus, .download-button.form input[type="number"]:focus, .download-button.form input[type="password"]:focus, .download-button.form input[type="search"]:focus, .download-button.form input[type="tel"]:focus, .download-button.form input[type="time"]:focus, .download-button.form input[type="text"]:focus, .download-button.form input[type="file"]:focus, .download-button.form input[type="url"]:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.28571429rem; background: #FFFFFF; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; } .ui.form textarea:focus, .play-button.form textarea:focus, .download-button.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #85B7D9; border-radius: 0.28571429rem; background: #FFFFFF; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; -webkit-appearance: none; } /*-------------------- Success ---------------------*/ /* On Form */ .ui.form.success .success.message:not(:empty), .play-button.form.success .success.message:not(:empty), .download-button.form.success .success.message:not(:empty) { display: block; } .ui.form.success .compact.success.message:not(:empty), .play-button.form.success .compact.success.message:not(:empty), .download-button.form.success .compact.success.message:not(:empty) { display: inline-block; } .ui.form.success .icon.success.message:not(:empty), .play-button.form.success .icon.success.message:not(:empty), .download-button.form.success .icon.success.message:not(:empty) { display: flex; } /*-------------------- Warning ---------------------*/ /* On Form */ .ui.form.warning .warning.message:not(:empty), .play-button.form.warning .warning.message:not(:empty), .download-button.form.warning .warning.message:not(:empty) { display: block; } .ui.form.warning .compact.warning.message:not(:empty), .play-button.form.warning .compact.warning.message:not(:empty), .download-button.form.warning .compact.warning.message:not(:empty) { display: inline-block; } .ui.form.warning .icon.warning.message:not(:empty), .play-button.form.warning .icon.warning.message:not(:empty), .download-button.form.warning .icon.warning.message:not(:empty) { display: flex; } /*-------------------- Error ---------------------*/ /* On Form */ .ui.form.error .error.message:not(:empty), .play-button.form.error .error.message:not(:empty), .download-button.form.error .error.message:not(:empty) { display: block; } .ui.form.error .compact.error.message:not(:empty), .play-button.form.error .compact.error.message:not(:empty), .download-button.form.error .compact.error.message:not(:empty) { display: inline-block; } .ui.form.error .icon.error.message:not(:empty), .play-button.form.error .icon.error.message:not(:empty), .download-button.form.error .icon.error.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.error .field label, .ui.form .field.error label, .ui.form .fields.error .field .input, .ui.form .field.error .input, .play-button.form .fields.error .field label, .play-button.form .field.error label, .play-button.form .fields.error .field .input, .play-button.form .field.error .input, .download-button.form .fields.error .field label, .download-button.form .field.error label, .download-button.form .fields.error .field .input, .download-button.form .field.error .input { color: #9F3A38; } .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label, .play-button.form .fields.error .field .corner.label, .play-button.form .field.error .corner.label, .download-button.form .fields.error .field .corner.label, .download-button.form .field.error .corner.label { border-color: #9F3A38; color: #FFFFFF; } .ui.form .fields.error .field textarea, .ui.form .fields.error .field select, .ui.form .fields.error .field input:not([type]), .ui.form .fields.error .field input[type="date"], .ui.form .fields.error .field input[type="datetime-local"], .ui.form .fields.error .field input[type="email"], .ui.form .fields.error .field input[type="number"], .ui.form .fields.error .field input[type="password"], .ui.form .fields.error .field input[type="search"], .ui.form .fields.error .field input[type="tel"], .ui.form .fields.error .field input[type="time"], .ui.form .fields.error .field input[type="text"], .ui.form .fields.error .field input[type="file"], .ui.form .fields.error .field input[type="url"], .ui.form .field.error textarea, .ui.form .field.error select, .ui.form .field.error input:not([type]), .ui.form .field.error input[type="date"], .ui.form .field.error input[type="datetime-local"], .ui.form .field.error input[type="email"], .ui.form .field.error input[type="number"], .ui.form .field.error input[type="password"], .ui.form .field.error input[type="search"], .ui.form .field.error input[type="tel"], .ui.form .field.error input[type="time"], .ui.form .field.error input[type="text"], .ui.form .field.error input[type="file"], .ui.form .field.error input[type="url"], .play-button.form .fields.error .field textarea, .play-button.form .fields.error .field select, .play-button.form .fields.error .field input:not([type]), .play-button.form .fields.error .field input[type="date"], .play-button.form .fields.error .field input[type="datetime-local"], .play-button.form .fields.error .field input[type="email"], .play-button.form .fields.error .field input[type="number"], .play-button.form .fields.error .field input[type="password"], .play-button.form .fields.error .field input[type="search"], .play-button.form .fields.error .field input[type="tel"], .play-button.form .fields.error .field input[type="time"], .play-button.form .fields.error .field input[type="text"], .play-button.form .fields.error .field input[type="file"], .play-button.form .fields.error .field input[type="url"], .play-button.form .field.error textarea, .play-button.form .field.error select, .play-button.form .field.error input:not([type]), .play-button.form .field.error input[type="date"], .play-button.form .field.error input[type="datetime-local"], .play-button.form .field.error input[type="email"], .play-button.form .field.error input[type="number"], .play-button.form .field.error input[type="password"], .play-button.form .field.error input[type="search"], .play-button.form .field.error input[type="tel"], .play-button.form .field.error input[type="time"], .play-button.form .field.error input[type="text"], .play-button.form .field.error input[type="file"], .play-button.form .field.error input[type="url"], .download-button.form .fields.error .field textarea, .download-button.form .fields.error .field select, .download-button.form .fields.error .field input:not([type]), .download-button.form .fields.error .field input[type="date"], .download-button.form .fields.error .field input[type="datetime-local"], .download-button.form .fields.error .field input[type="email"], .download-button.form .fields.error .field input[type="number"], .download-button.form .fields.error .field input[type="password"], .download-button.form .fields.error .field input[type="search"], .download-button.form .fields.error .field input[type="tel"], .download-button.form .fields.error .field input[type="time"], .download-button.form .fields.error .field input[type="text"], .download-button.form .fields.error .field input[type="file"], .download-button.form .fields.error .field input[type="url"], .download-button.form .field.error textarea, .download-button.form .field.error select, .download-button.form .field.error input:not([type]), .download-button.form .field.error input[type="date"], .download-button.form .field.error input[type="datetime-local"], .download-button.form .field.error input[type="email"], .download-button.form .field.error input[type="number"], .download-button.form .field.error input[type="password"], .download-button.form .field.error input[type="search"], .download-button.form .field.error input[type="tel"], .download-button.form .field.error input[type="time"], .download-button.form .field.error input[type="text"], .download-button.form .field.error input[type="file"], .download-button.form .field.error input[type="url"] { background: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; border-radius: ''; box-shadow: none; } .ui.form .field.error textarea:focus, .ui.form .field.error select:focus, .ui.form .field.error input:not([type]):focus, .ui.form .field.error input[type="date"]:focus, .ui.form .field.error input[type="datetime-local"]:focus, .ui.form .field.error input[type="email"]:focus, .ui.form .field.error input[type="number"]:focus, .ui.form .field.error input[type="password"]:focus, .ui.form .field.error input[type="search"]:focus, .ui.form .field.error input[type="tel"]:focus, .ui.form .field.error input[type="time"]:focus, .ui.form .field.error input[type="text"]:focus, .ui.form .field.error input[type="file"]:focus, .ui.form .field.error input[type="url"]:focus, .play-button.form .field.error textarea:focus, .play-button.form .field.error select:focus, .play-button.form .field.error input:not([type]):focus, .play-button.form .field.error input[type="date"]:focus, .play-button.form .field.error input[type="datetime-local"]:focus, .play-button.form .field.error input[type="email"]:focus, .play-button.form .field.error input[type="number"]:focus, .play-button.form .field.error input[type="password"]:focus, .play-button.form .field.error input[type="search"]:focus, .play-button.form .field.error input[type="tel"]:focus, .play-button.form .field.error input[type="time"]:focus, .play-button.form .field.error input[type="text"]:focus, .play-button.form .field.error input[type="file"]:focus, .play-button.form .field.error input[type="url"]:focus, .download-button.form .field.error textarea:focus, .download-button.form .field.error select:focus, .download-button.form .field.error input:not([type]):focus, .download-button.form .field.error input[type="date"]:focus, .download-button.form .field.error input[type="datetime-local"]:focus, .download-button.form .field.error input[type="email"]:focus, .download-button.form .field.error input[type="number"]:focus, .download-button.form .field.error input[type="password"]:focus, .download-button.form .field.error input[type="search"]:focus, .download-button.form .field.error input[type="tel"]:focus, .download-button.form .field.error input[type="time"]:focus, .download-button.form .field.error input[type="text"]:focus, .download-button.form .field.error input[type="file"]:focus, .download-button.form .field.error input[type="url"]:focus { background: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; -webkit-appearance: none; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.error select, .play-button.form .field.error select, .download-button.form .field.error select { -webkit-appearance: menulist-button; } /*------------------ Dropdown Error --------------------*/ .ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown .item, .ui.form .field.error .ui.dropdown, .ui.form .field.error .ui.dropdown .text, .ui.form .field.error .ui.dropdown .item, .play-button.form .fields.error .field .play-button.dropdown, .play-button.form .fields.error .field .play-button.dropdown .item, .play-button.form .field.error .play-button.dropdown, .play-button.form .field.error .play-button.dropdown .text, .play-button.form .field.error .play-button.dropdown .item, .download-button.form .fields.error .field .download-button.dropdown, .download-button.form .fields.error .field .download-button.dropdown .item, .download-button.form .field.error .download-button.dropdown, .download-button.form .field.error .download-button.dropdown .text, .download-button.form .field.error .download-button.dropdown .item { background: #FFF6F6; color: #9F3A38; } .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown, .play-button.form .fields.error .field .play-button.dropdown, .play-button.form .field.error .play-button.dropdown, .download-button.form .fields.error .field .download-button.dropdown, .download-button.form .field.error .download-button.dropdown { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover, .play-button.form .fields.error .field .play-button.dropdown:hover, .play-button.form .field.error .play-button.dropdown:hover, .download-button.form .fields.error .field .download-button.dropdown:hover, .download-button.form .field.error .download-button.dropdown:hover { border-color: #E0B4B4 !important; } .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.dropdown:hover .menu, .play-button.form .fields.error .field .play-button.dropdown:hover .menu, .play-button.form .field.error .play-button.dropdown:hover .menu, .download-button.form .fields.error .field .download-button.dropdown:hover .menu, .download-button.form .field.error .download-button.dropdown:hover .menu { border-color: #E0B4B4; } .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, .ui.form .field.error .ui.multiple.selection.dropdown > .label, .play-button.form .fields.error .field .play-button.multiple.selection.dropdown > .label, .play-button.form .field.error .play-button.multiple.selection.dropdown > .label, .download-button.form .fields.error .field .download-button.multiple.selection.dropdown > .label, .download-button.form .field.error .download-button.multiple.selection.dropdown > .label { background-color: #EACBCB; color: #9F3A38; } /* Hover */ .ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .field.error .ui.dropdown .menu .item:hover, .play-button.form .fields.error .field .play-button.dropdown .menu .item:hover, .play-button.form .field.error .play-button.dropdown .menu .item:hover, .download-button.form .fields.error .field .download-button.dropdown .menu .item:hover, .download-button.form .field.error .download-button.dropdown .menu .item:hover { background-color: #FBE7E7; } /* Selected */ .ui.form .fields.error .field .ui.dropdown .menu .selected.item, .ui.form .field.error .ui.dropdown .menu .selected.item, .play-button.form .fields.error .field .play-button.dropdown .menu .selected.item, .play-button.form .field.error .play-button.dropdown .menu .selected.item, .download-button.form .fields.error .field .download-button.dropdown .menu .selected.item, .download-button.form .field.error .download-button.dropdown .menu .selected.item { background-color: #FBE7E7; } /* Active */ .ui.form .fields.error .field .ui.dropdown .menu .active.item, .ui.form .field.error .ui.dropdown .menu .active.item, .play-button.form .fields.error .field .play-button.dropdown .menu .active.item, .play-button.form .field.error .play-button.dropdown .menu .active.item, .download-button.form .fields.error .field .download-button.dropdown .menu .active.item, .download-button.form .field.error .download-button.dropdown .menu .active.item { background-color: #FDCFCF !important; } /*-------------------- Checkbox Error ---------------------*/ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box, .play-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, .play-button.form .field.error .checkbox:not(.toggle):not(.slider) label, .play-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, .play-button.form .field.error .checkbox:not(.toggle):not(.slider) .box, .download-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, .download-button.form .field.error .checkbox:not(.toggle):not(.slider) label, .download-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, .download-button.form .field.error .checkbox:not(.toggle):not(.slider) .box { color: #9F3A38; } .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before, .play-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, .play-button.form .field.error .checkbox:not(.toggle):not(.slider) label:before, .play-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, .play-button.form .field.error .checkbox:not(.toggle):not(.slider) .box:before, .download-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, .download-button.form .field.error .checkbox:not(.toggle):not(.slider) label:before, .download-button.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, .download-button.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { background: #FFF6F6; border-color: #E0B4B4; } .ui.form .fields.error .field .checkbox label:after, .ui.form .field.error .checkbox label:after, .ui.form .fields.error .field .checkbox .box:after, .ui.form .field.error .checkbox .box:after, .play-button.form .fields.error .field .checkbox label:after, .play-button.form .field.error .checkbox label:after, .play-button.form .fields.error .field .checkbox .box:after, .play-button.form .field.error .checkbox .box:after, .download-button.form .fields.error .field .checkbox label:after, .download-button.form .field.error .checkbox label:after, .download-button.form .fields.error .field .checkbox .box:after, .download-button.form .field.error .checkbox .box:after { color: #9F3A38; } /*-------------------- Disabled ---------------------*/ .ui.form .disabled.fields .field, .ui.form .disabled.field, .ui.form .field :disabled, .play-button.form .disabled.fields .field, .play-button.form .disabled.field, .play-button.form .field :disabled, .download-button.form .disabled.fields .field, .download-button.form .disabled.field, .download-button.form .field :disabled { pointer-events: none; opacity: 0.45; } .ui.form .field.disabled > label, .ui.form .fields.disabled > label, .play-button.form .field.disabled > label, .play-button.form .fields.disabled > label, .download-button.form .field.disabled > label, .download-button.form .fields.disabled > label { opacity: 0.45; } .ui.form .field.disabled :disabled, .play-button.form .field.disabled :disabled, .download-button.form .field.disabled :disabled { opacity: 1; } /*-------------- Loading ---------------*/ .ui.loading.form, .play-button.loading.form, .download-button.loading.form { position: relative; cursor: default; pointer-events: none; } .ui.loading.form:before, .play-button.loading.form:before, .download-button.loading.form:before { position: absolute; content: ''; top: 0%; left: 0%; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; z-index: 100; } .ui.loading.form:after, .play-button.loading.form:after, .download-button.loading.form:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -1.5em 0em 0em -1.5em; width: 3em; height: 3em; animation: form-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #42495F rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; visibility: visible; z-index: 101; } @keyframes form-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /******************************* Element Types *******************************/ /*-------------------- Required Field ---------------------*/ .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after, .play-button.form .required.fields:not(.grouped) > .field > label:after, .play-button.form .required.fields.grouped > label:after, .play-button.form .required.field > label:after, .play-button.form .required.fields:not(.grouped) > .field > .checkbox:after, .play-button.form .required.field > .checkbox:after, .download-button.form .required.fields:not(.grouped) > .field > label:after, .download-button.form .required.fields.grouped > label:after, .download-button.form .required.field > label:after, .download-button.form .required.fields:not(.grouped) > .field > .checkbox:after, .download-button.form .required.field > .checkbox:after { margin: -0.2em 0em 0em 0.2em; content: '*'; color: #E81123; } .ui.form .required.fields:not(.grouped) > .field > label:after, .ui.form .required.fields.grouped > label:after, .ui.form .required.field > label:after, .play-button.form .required.fields:not(.grouped) > .field > label:after, .play-button.form .required.fields.grouped > label:after, .play-button.form .required.field > label:after, .download-button.form .required.fields:not(.grouped) > .field > label:after, .download-button.form .required.fields.grouped > label:after, .download-button.form .required.field > label:after { display: inline-block; vertical-align: top; } .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, .ui.form .required.field > .checkbox:after, .play-button.form .required.fields:not(.grouped) > .field > .checkbox:after, .play-button.form .required.field > .checkbox:after, .download-button.form .required.fields:not(.grouped) > .field > .checkbox:after, .download-button.form .required.field > .checkbox:after { position: absolute; top: 0%; left: 100%; } /******************************* Variations *******************************/ /*-------------------- Inverted Colors ---------------------*/ .ui.inverted.form label, .ui.form .inverted.segment label, .ui.form .inverted.segment .ui.checkbox label, .ui.form .inverted.segment .ui.checkbox .box, .ui.inverted.form .ui.checkbox label, .ui.inverted.form .ui.checkbox .box, .ui.inverted.form .inline.fields > label, .ui.inverted.form .inline.fields .field > label, .ui.inverted.form .inline.fields .field > p, .ui.inverted.form .inline.field > label, .ui.inverted.form .inline.field > p, .play-button.inverted.form label, .play-button.form .inverted.segment label, .play-button.form .inverted.segment .play-button.checkbox label, .play-button.form .inverted.segment .play-button.checkbox .box, .play-button.inverted.form .play-button.checkbox label, .play-button.inverted.form .play-button.checkbox .box, .play-button.inverted.form .inline.fields > label, .play-button.inverted.form .inline.fields .field > label, .play-button.inverted.form .inline.fields .field > p, .play-button.inverted.form .inline.field > label, .play-button.inverted.form .inline.field > p, .download-button.inverted.form label, .download-button.form .inverted.segment label, .download-button.form .inverted.segment .download-button.checkbox label, .download-button.form .inverted.segment .download-button.checkbox .box, .download-button.inverted.form .download-button.checkbox label, .download-button.inverted.form .download-button.checkbox .box, .download-button.inverted.form .inline.fields > label, .download-button.inverted.form .inline.fields .field > label, .download-button.inverted.form .inline.fields .field > p, .download-button.inverted.form .inline.field > label, .download-button.inverted.form .inline.field > p { color: rgba(255, 255, 255, 0.9); } /* Inverted Field */ .ui.inverted.form input:not([type]), .ui.inverted.form input[type="date"], .ui.inverted.form input[type="datetime-local"], .ui.inverted.form input[type="email"], .ui.inverted.form input[type="number"], .ui.inverted.form input[type="password"], .ui.inverted.form input[type="search"], .ui.inverted.form input[type="tel"], .ui.inverted.form input[type="time"], .ui.inverted.form input[type="text"], .ui.inverted.form input[type="file"], .ui.inverted.form input[type="url"], .play-button.inverted.form input:not([type]), .play-button.inverted.form input[type="date"], .play-button.inverted.form input[type="datetime-local"], .play-button.inverted.form input[type="email"], .play-button.inverted.form input[type="number"], .play-button.inverted.form input[type="password"], .play-button.inverted.form input[type="search"], .play-button.inverted.form input[type="tel"], .play-button.inverted.form input[type="time"], .play-button.inverted.form input[type="text"], .play-button.inverted.form input[type="file"], .play-button.inverted.form input[type="url"], .download-button.inverted.form input:not([type]), .download-button.inverted.form input[type="date"], .download-button.inverted.form input[type="datetime-local"], .download-button.inverted.form input[type="email"], .download-button.inverted.form input[type="number"], .download-button.inverted.form input[type="password"], .download-button.inverted.form input[type="search"], .download-button.inverted.form input[type="tel"], .download-button.inverted.form input[type="time"], .download-button.inverted.form input[type="text"], .download-button.inverted.form input[type="file"], .download-button.inverted.form input[type="url"] { background: #FFFFFF; border-color: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.87); box-shadow: none; } /*-------------------- Field Groups ---------------------*/ /* Grouped Vertically */ .ui.form .grouped.fields, .play-button.form .grouped.fields, .download-button.form .grouped.fields { display: block; margin: 0em 0em 1em; } .ui.form .grouped.fields:last-child, .play-button.form .grouped.fields:last-child, .download-button.form .grouped.fields:last-child { margin-bottom: 0em; } .ui.form .grouped.fields > label, .play-button.form .grouped.fields > label, .download-button.form .grouped.fields > label { margin: 0em 0em 0.28571429rem 0em; color: rgba(0, 0, 0, 0.87); font-size: 0.92857143em; font-weight: bold; text-transform: none; } .ui.form .grouped.fields .field, .ui.form .grouped.inline.fields .field, .play-button.form .grouped.fields .field, .play-button.form .grouped.inline.fields .field, .download-button.form .grouped.fields .field, .download-button.form .grouped.inline.fields .field { display: block; margin: 0.5em 0em; padding: 0em; } /*-------------------- Fields ---------------------*/ /* Split fields */ .ui.form .fields, .play-button.form .fields, .download-button.form .fields { display: flex; flex-direction: row; margin: 0em -0.5em 1em; } .ui.form .fields > .field, .play-button.form .fields > .field, .download-button.form .fields > .field { flex: 0 1 auto; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .fields > .field:first-child, .play-button.form .fields > .field:first-child, .download-button.form .fields > .field:first-child { border-left: none; box-shadow: none; } /* Other Combinations */ .ui.form .two.fields > .fields, .ui.form .two.fields > .field, .play-button.form .two.fields > .fields, .play-button.form .two.fields > .field, .download-button.form .two.fields > .fields, .download-button.form .two.fields > .field { width: 50%; } .ui.form .three.fields > .fields, .ui.form .three.fields > .field, .play-button.form .three.fields > .fields, .play-button.form .three.fields > .field, .download-button.form .three.fields > .fields, .download-button.form .three.fields > .field { width: 33.33333333%; } .ui.form .four.fields > .fields, .ui.form .four.fields > .field, .play-button.form .four.fields > .fields, .play-button.form .four.fields > .field, .download-button.form .four.fields > .fields, .download-button.form .four.fields > .field { width: 25%; } .ui.form .five.fields > .fields, .ui.form .five.fields > .field, .play-button.form .five.fields > .fields, .play-button.form .five.fields > .field, .download-button.form .five.fields > .fields, .download-button.form .five.fields > .field { width: 20%; } .ui.form .six.fields > .fields, .ui.form .six.fields > .field, .play-button.form .six.fields > .fields, .play-button.form .six.fields > .field, .download-button.form .six.fields > .fields, .download-button.form .six.fields > .field { width: 16.66666667%; } .ui.form .seven.fields > .fields, .ui.form .seven.fields > .field, .play-button.form .seven.fields > .fields, .play-button.form .seven.fields > .field, .download-button.form .seven.fields > .fields, .download-button.form .seven.fields > .field { width: 14.28571429%; } .ui.form .eight.fields > .fields, .ui.form .eight.fields > .field, .play-button.form .eight.fields > .fields, .play-button.form .eight.fields > .field, .download-button.form .eight.fields > .fields, .download-button.form .eight.fields > .field { width: 12.5%; } .ui.form .nine.fields > .fields, .ui.form .nine.fields > .field, .play-button.form .nine.fields > .fields, .play-button.form .nine.fields > .field, .download-button.form .nine.fields > .fields, .download-button.form .nine.fields > .field { width: 11.11111111%; } .ui.form .ten.fields > .fields, .ui.form .ten.fields > .field, .play-button.form .ten.fields > .fields, .play-button.form .ten.fields > .field, .download-button.form .ten.fields > .fields, .download-button.form .ten.fields > .field { width: 10%; } /* Swap to full width on mobile */ @media only screen and (max-width: 767px) { .ui.form .fields, .play-button.form .fields, .download-button.form .fields { flex-wrap: wrap; } .ui[class*="equal width"].form:not(.unstackable) .fields > .field, .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field, .play-button[class*="equal width"].form:not(.unstackable) .fields > .field, .play-button.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .six.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .ten.fields:not(.unstackable) > .field, .download-button[class*="equal width"].form:not(.unstackable) .fields > .field, .download-button.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .six.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .ten.fields:not(.unstackable) > .field { width: 100% !important; margin: 0em 0em 1em; } } /* Sizing Combinations */ .ui.form .fields .wide.field, .play-button.form .fields .wide.field, .download-button.form .fields .wide.field { width: 6.25%; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .one.wide.field, .play-button.form .one.wide.field, .download-button.form .one.wide.field { width: 6.25% !important; } .ui.form .two.wide.field, .play-button.form .two.wide.field, .download-button.form .two.wide.field { width: 12.5% !important; } .ui.form .three.wide.field, .play-button.form .three.wide.field, .download-button.form .three.wide.field { width: 18.75% !important; } .ui.form .four.wide.field, .play-button.form .four.wide.field, .download-button.form .four.wide.field { width: 25% !important; } .ui.form .five.wide.field, .play-button.form .five.wide.field, .download-button.form .five.wide.field { width: 31.25% !important; } .ui.form .six.wide.field, .play-button.form .six.wide.field, .download-button.form .six.wide.field { width: 37.5% !important; } .ui.form .seven.wide.field, .play-button.form .seven.wide.field, .download-button.form .seven.wide.field { width: 43.75% !important; } .ui.form .eight.wide.field, .play-button.form .eight.wide.field, .download-button.form .eight.wide.field { width: 50% !important; } .ui.form .nine.wide.field, .play-button.form .nine.wide.field, .download-button.form .nine.wide.field { width: 56.25% !important; } .ui.form .ten.wide.field, .play-button.form .ten.wide.field, .download-button.form .ten.wide.field { width: 62.5% !important; } .ui.form .eleven.wide.field, .play-button.form .eleven.wide.field, .download-button.form .eleven.wide.field { width: 68.75% !important; } .ui.form .twelve.wide.field, .play-button.form .twelve.wide.field, .download-button.form .twelve.wide.field { width: 75% !important; } .ui.form .thirteen.wide.field, .play-button.form .thirteen.wide.field, .download-button.form .thirteen.wide.field { width: 81.25% !important; } .ui.form .fourteen.wide.field, .play-button.form .fourteen.wide.field, .download-button.form .fourteen.wide.field { width: 87.5% !important; } .ui.form .fifteen.wide.field, .play-button.form .fifteen.wide.field, .download-button.form .fifteen.wide.field { width: 93.75% !important; } .ui.form .sixteen.wide.field, .play-button.form .sixteen.wide.field, .download-button.form .sixteen.wide.field { width: 100% !important; } /* Swap to full width on mobile */ @media only screen and (max-width: 767px) { .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field, .play-button.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .play-button.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, .play-button.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field, .download-button.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .two.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .three.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .four.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, .download-button.form:not(.unstackable) .five.fields:not(.unstackable) > .field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, .download-button.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field { width: 100% !important; } .ui.form .fields, .play-button.form .fields, .download-button.form .fields { margin-bottom: 0em; } } /*-------------------- Equal Width ---------------------*/ .ui[class*="equal width"].form .fields > .field, .ui.form [class*="equal width"].fields > .field, .play-button[class*="equal width"].form .fields > .field, .play-button.form [class*="equal width"].fields > .field, .download-button[class*="equal width"].form .fields > .field, .download-button.form [class*="equal width"].fields > .field { width: 100%; flex: 1 1 auto; } /*-------------------- Inline Fields ---------------------*/ .ui.form .inline.fields, .play-button.form .inline.fields, .download-button.form .inline.fields { margin: 0em 0em 1em; align-items: center; } .ui.form .inline.fields .field, .play-button.form .inline.fields .field, .download-button.form .inline.fields .field { margin: 0em; padding: 0em 1em 0em 0em; } /* Inline Label */ .ui.form .inline.fields > label, .ui.form .inline.fields .field > label, .ui.form .inline.fields .field > p, .ui.form .inline.field > label, .ui.form .inline.field > p, .play-button.form .inline.fields > label, .play-button.form .inline.fields .field > label, .play-button.form .inline.fields .field > p, .play-button.form .inline.field > label, .play-button.form .inline.field > p, .download-button.form .inline.fields > label, .download-button.form .inline.fields .field > label, .download-button.form .inline.fields .field > p, .download-button.form .inline.field > label, .download-button.form .inline.field > p { display: inline-block; width: auto; margin-top: 0em; margin-bottom: 0em; vertical-align: baseline; font-size: 0.92857143em; font-weight: bold; color: rgba(0, 0, 0, 0.87); text-transform: none; } /* Grouped Inline Label */ .ui.form .inline.fields > label, .play-button.form .inline.fields > label, .download-button.form .inline.fields > label { margin: 0.035714em 1em 0em 0em; } /* Inline Input */ .ui.form .inline.fields .field > input, .ui.form .inline.fields .field > select, .ui.form .inline.field > input, .ui.form .inline.field > select, .play-button.form .inline.fields .field > input, .play-button.form .inline.fields .field > select, .play-button.form .inline.field > input, .play-button.form .inline.field > select, .download-button.form .inline.fields .field > input, .download-button.form .inline.fields .field > select, .download-button.form .inline.field > input, .download-button.form .inline.field > select { display: inline-block; width: auto; margin-top: 0em; margin-bottom: 0em; vertical-align: middle; font-size: 1em; } /* Label */ .ui.form .inline.fields .field > :first-child, .ui.form .inline.field > :first-child, .play-button.form .inline.fields .field > :first-child, .play-button.form .inline.field > :first-child, .download-button.form .inline.fields .field > :first-child, .download-button.form .inline.field > :first-child { margin: 0em 0.85714286em 0em 0em; } .ui.form .inline.fields .field > :only-child, .ui.form .inline.field > :only-child, .play-button.form .inline.fields .field > :only-child, .play-button.form .inline.field > :only-child, .download-button.form .inline.fields .field > :only-child, .download-button.form .inline.field > :only-child { margin: 0em; } /* Wide */ .ui.form .inline.fields .wide.field, .play-button.form .inline.fields .wide.field, .download-button.form .inline.fields .wide.field { display: flex; align-items: center; } .ui.form .inline.fields .wide.field > input, .ui.form .inline.fields .wide.field > select, .play-button.form .inline.fields .wide.field > input, .play-button.form .inline.fields .wide.field > select, .download-button.form .inline.fields .wide.field > input, .download-button.form .inline.fields .wide.field > select { width: 100%; } /*-------------------- Sizes ---------------------*/ .ui.mini.form, .play-button.mini.form, .download-button.mini.form { font-size: 0.78571429rem; } .ui.tiny.form, .play-button.tiny.form, .download-button.tiny.form { font-size: 0.85714286rem; } .ui.small.form, .play-button.small.form, .download-button.small.form { font-size: 0.92857143rem; } .ui.form, .play-button.form, .download-button.form { font-size: 1rem; } .ui.large.form, .play-button.large.form, .download-button.large.form { font-size: 1.14285714rem; } .ui.big.form, .play-button.big.form, .download-button.big.form { font-size: 1.28571429rem; } .ui.huge.form, .play-button.huge.form, .download-button.huge.form { font-size: 1.42857143rem; } .ui.massive.form, .play-button.massive.form, .download-button.massive.form { font-size: 1.71428571rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Grid * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Grid *******************************/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /*-------------- Relaxed ---------------*/ /*-------------- Divided ---------------*/ /*-------------- Celled ---------------*/ /*-------------- Stackable ---------------*/ /******************************* Legacy *******************************/ /*-------------- Page ---------------*/ /* Legacy (DO NOT USE) */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ .ui.grid, .play-button.grid, .download-button.grid { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0em; } /*---------------------- Remove Gutters -----------------------*/ .ui.grid, .play-button.grid, .download-button.grid { margin-top: -1rem; margin-bottom: -1rem; margin-left: -1rem; margin-right: -1rem; } .ui.relaxed.grid, .play-button.relaxed.grid, .download-button.relaxed.grid { margin-left: -1.5rem; margin-right: -1.5rem; } .ui[class*="very relaxed"].grid, .play-button[class*="very relaxed"].grid, .download-button[class*="very relaxed"].grid { margin-left: -2.5rem; margin-right: -2.5rem; } /* Preserve Rows Spacing on Consecutive Grids */ .ui.grid + .grid, .play-button.grid + .grid, .download-button.grid + .grid { margin-top: 1rem; } /*------------------- Columns --------------------*/ /* Standard 16 column */ .ui.grid > .column:not(.row), .ui.grid > .row > .column, .play-button.grid > .column:not(.row), .play-button.grid > .row > .column, .download-button.grid > .column:not(.row), .download-button.grid > .row > .column { position: relative; display: inline-block; width: 6.25%; padding-left: 1rem; padding-right: 1rem; vertical-align: top; } .ui.grid > *, .play-button.grid > *, .download-button.grid > * { padding-left: 1rem; padding-right: 1rem; } /*------------------- Rows --------------------*/ .ui.grid > .row, .play-button.grid > .row, .download-button.grid > .row { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: inherit; align-items: stretch; width: 100% !important; padding: 0rem; padding-top: 1rem; padding-bottom: 1rem; } /*------------------- Columns --------------------*/ /* Vertical padding when no rows */ .ui.grid > .column:not(.row), .play-button.grid > .column:not(.row), .download-button.grid > .column:not(.row) { padding-top: 1rem; padding-bottom: 1rem; } .ui.grid > .row > .column, .play-button.grid > .row > .column, .download-button.grid > .row > .column { margin-top: 0em; margin-bottom: 0em; } /*------------------- Content --------------------*/ .ui.grid > .row > img, .ui.grid > .row > .column > img, .play-button.grid > .row > img, .play-button.grid > .row > .column > img, .download-button.grid > .row > img, .download-button.grid > .row > .column > img { max-width: 100%; } /*------------------- Loose Coupling --------------------*/ /* Collapse Margin on Consecutive Grid */ .ui.grid > .ui.grid:first-child, .play-button.grid > .play-button.grid:first-child, .download-button.grid > .download-button.grid:first-child { margin-top: 0em; } .ui.grid > .ui.grid:last-child, .play-button.grid > .play-button.grid:last-child, .download-button.grid > .download-button.grid:last-child { margin-bottom: 0em; } /* Segment inside Aligned Grid */ .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), .ui.aligned.grid .column > .segment:not(.compact):not(.attached), .play-button.grid .aligned.row > .column > .segment:not(.compact):not(.attached), .play-button.aligned.grid .column > .segment:not(.compact):not(.attached), .download-button.grid .aligned.row > .column > .segment:not(.compact):not(.attached), .download-button.aligned.grid .column > .segment:not(.compact):not(.attached) { width: 100%; } /* Align Dividers with Gutter */ .ui.grid .row + .ui.divider, .play-button.grid .row + .play-button.divider, .download-button.grid .row + .download-button.divider { flex-grow: 1; margin: 1rem 1rem; } .ui.grid .column + .ui.vertical.divider, .play-button.grid .column + .play-button.vertical.divider, .download-button.grid .column + .download-button.vertical.divider { height: calc(50% - 1rem ); } /* Remove Border on Last Horizontal Segment */ .ui.grid > .row > .column:last-child > .horizontal.segment, .ui.grid > .column:last-child > .horizontal.segment, .play-button.grid > .row > .column:last-child > .horizontal.segment, .play-button.grid > .column:last-child > .horizontal.segment, .download-button.grid > .row > .column:last-child > .horizontal.segment, .download-button.grid > .column:last-child > .horizontal.segment { box-shadow: none; } /******************************* Variations *******************************/ /*----------------------- Page Grid -------------------------*/ @media only screen and (max-width: 767px) { .ui.page.grid, .play-button.page.grid, .download-button.page.grid { width: auto; padding-left: 0em; padding-right: 0em; margin-left: 0em; margin-right: 0em; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.page.grid, .play-button.page.grid, .download-button.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 2em; padding-right: 2em; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ui.page.grid, .play-button.page.grid, .download-button.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 3%; padding-right: 3%; } } @media only screen and (min-width: 1200px) and (max-width: 1919px) { .ui.page.grid, .play-button.page.grid, .download-button.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 15%; padding-right: 15%; } } @media only screen and (min-width: 1920px) { .ui.page.grid, .play-button.page.grid, .download-button.page.grid { width: auto; margin-left: 0em; margin-right: 0em; padding-left: 23%; padding-right: 23%; } } /*------------------- Column Count --------------------*/ /* Assume full width with one column */ .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child, .play-button.grid > .column:only-child, .play-button.grid > .row > .column:only-child, .download-button.grid > .column:only-child, .download-button.grid > .row > .column:only-child { width: 100%; } /* Grid Based */ .ui[class*="one column"].grid > .row > .column, .ui[class*="one column"].grid > .column:not(.row), .play-button[class*="one column"].grid > .row > .column, .play-button[class*="one column"].grid > .column:not(.row), .download-button[class*="one column"].grid > .row > .column, .download-button[class*="one column"].grid > .column:not(.row) { width: 100%; } .ui[class*="two column"].grid > .row > .column, .ui[class*="two column"].grid > .column:not(.row), .play-button[class*="two column"].grid > .row > .column, .play-button[class*="two column"].grid > .column:not(.row), .download-button[class*="two column"].grid > .row > .column, .download-button[class*="two column"].grid > .column:not(.row) { width: 50%; } .ui[class*="three column"].grid > .row > .column, .ui[class*="three column"].grid > .column:not(.row), .play-button[class*="three column"].grid > .row > .column, .play-button[class*="three column"].grid > .column:not(.row), .download-button[class*="three column"].grid > .row > .column, .download-button[class*="three column"].grid > .column:not(.row) { width: 33.33333333%; } .ui[class*="four column"].grid > .row > .column, .ui[class*="four column"].grid > .column:not(.row), .play-button[class*="four column"].grid > .row > .column, .play-button[class*="four column"].grid > .column:not(.row), .download-button[class*="four column"].grid > .row > .column, .download-button[class*="four column"].grid > .column:not(.row) { width: 25%; } .ui[class*="five column"].grid > .row > .column, .ui[class*="five column"].grid > .column:not(.row), .play-button[class*="five column"].grid > .row > .column, .play-button[class*="five column"].grid > .column:not(.row), .download-button[class*="five column"].grid > .row > .column, .download-button[class*="five column"].grid > .column:not(.row) { width: 20%; } .ui[class*="six column"].grid > .row > .column, .ui[class*="six column"].grid > .column:not(.row), .play-button[class*="six column"].grid > .row > .column, .play-button[class*="six column"].grid > .column:not(.row), .download-button[class*="six column"].grid > .row > .column, .download-button[class*="six column"].grid > .column:not(.row) { width: 16.66666667%; } .ui[class*="seven column"].grid > .row > .column, .ui[class*="seven column"].grid > .column:not(.row), .play-button[class*="seven column"].grid > .row > .column, .play-button[class*="seven column"].grid > .column:not(.row), .download-button[class*="seven column"].grid > .row > .column, .download-button[class*="seven column"].grid > .column:not(.row) { width: 14.28571429%; } .ui[class*="eight column"].grid > .row > .column, .ui[class*="eight column"].grid > .column:not(.row), .play-button[class*="eight column"].grid > .row > .column, .play-button[class*="eight column"].grid > .column:not(.row), .download-button[class*="eight column"].grid > .row > .column, .download-button[class*="eight column"].grid > .column:not(.row) { width: 12.5%; } .ui[class*="nine column"].grid > .row > .column, .ui[class*="nine column"].grid > .column:not(.row), .play-button[class*="nine column"].grid > .row > .column, .play-button[class*="nine column"].grid > .column:not(.row), .download-button[class*="nine column"].grid > .row > .column, .download-button[class*="nine column"].grid > .column:not(.row) { width: 11.11111111%; } .ui[class*="ten column"].grid > .row > .column, .ui[class*="ten column"].grid > .column:not(.row), .play-button[class*="ten column"].grid > .row > .column, .play-button[class*="ten column"].grid > .column:not(.row), .download-button[class*="ten column"].grid > .row > .column, .download-button[class*="ten column"].grid > .column:not(.row) { width: 10%; } .ui[class*="eleven column"].grid > .row > .column, .ui[class*="eleven column"].grid > .column:not(.row), .play-button[class*="eleven column"].grid > .row > .column, .play-button[class*="eleven column"].grid > .column:not(.row), .download-button[class*="eleven column"].grid > .row > .column, .download-button[class*="eleven column"].grid > .column:not(.row) { width: 9.09090909%; } .ui[class*="twelve column"].grid > .row > .column, .ui[class*="twelve column"].grid > .column:not(.row), .play-button[class*="twelve column"].grid > .row > .column, .play-button[class*="twelve column"].grid > .column:not(.row), .download-button[class*="twelve column"].grid > .row > .column, .download-button[class*="twelve column"].grid > .column:not(.row) { width: 8.33333333%; } .ui[class*="thirteen column"].grid > .row > .column, .ui[class*="thirteen column"].grid > .column:not(.row), .play-button[class*="thirteen column"].grid > .row > .column, .play-button[class*="thirteen column"].grid > .column:not(.row), .download-button[class*="thirteen column"].grid > .row > .column, .download-button[class*="thirteen column"].grid > .column:not(.row) { width: 7.69230769%; } .ui[class*="fourteen column"].grid > .row > .column, .ui[class*="fourteen column"].grid > .column:not(.row), .play-button[class*="fourteen column"].grid > .row > .column, .play-button[class*="fourteen column"].grid > .column:not(.row), .download-button[class*="fourteen column"].grid > .row > .column, .download-button[class*="fourteen column"].grid > .column:not(.row) { width: 7.14285714%; } .ui[class*="fifteen column"].grid > .row > .column, .ui[class*="fifteen column"].grid > .column:not(.row), .play-button[class*="fifteen column"].grid > .row > .column, .play-button[class*="fifteen column"].grid > .column:not(.row), .download-button[class*="fifteen column"].grid > .row > .column, .download-button[class*="fifteen column"].grid > .column:not(.row) { width: 6.66666667%; } .ui[class*="sixteen column"].grid > .row > .column, .ui[class*="sixteen column"].grid > .column:not(.row), .play-button[class*="sixteen column"].grid > .row > .column, .play-button[class*="sixteen column"].grid > .column:not(.row), .download-button[class*="sixteen column"].grid > .row > .column, .download-button[class*="sixteen column"].grid > .column:not(.row) { width: 6.25%; } /* Row Based Overrides */ .ui.grid > [class*="one column"].row > .column, .play-button.grid > [class*="one column"].row > .column, .download-button.grid > [class*="one column"].row > .column { width: 100% !important; } .ui.grid > [class*="two column"].row > .column, .play-button.grid > [class*="two column"].row > .column, .download-button.grid > [class*="two column"].row > .column { width: 50% !important; } .ui.grid > [class*="three column"].row > .column, .play-button.grid > [class*="three column"].row > .column, .download-button.grid > [class*="three column"].row > .column { width: 33.33333333% !important; } .ui.grid > [class*="four column"].row > .column, .play-button.grid > [class*="four column"].row > .column, .download-button.grid > [class*="four column"].row > .column { width: 25% !important; } .ui.grid > [class*="five column"].row > .column, .play-button.grid > [class*="five column"].row > .column, .download-button.grid > [class*="five column"].row > .column { width: 20% !important; } .ui.grid > [class*="six column"].row > .column, .play-button.grid > [class*="six column"].row > .column, .download-button.grid > [class*="six column"].row > .column { width: 16.66666667% !important; } .ui.grid > [class*="seven column"].row > .column, .play-button.grid > [class*="seven column"].row > .column, .download-button.grid > [class*="seven column"].row > .column { width: 14.28571429% !important; } .ui.grid > [class*="eight column"].row > .column, .play-button.grid > [class*="eight column"].row > .column, .download-button.grid > [class*="eight column"].row > .column { width: 12.5% !important; } .ui.grid > [class*="nine column"].row > .column, .play-button.grid > [class*="nine column"].row > .column, .download-button.grid > [class*="nine column"].row > .column { width: 11.11111111% !important; } .ui.grid > [class*="ten column"].row > .column, .play-button.grid > [class*="ten column"].row > .column, .download-button.grid > [class*="ten column"].row > .column { width: 10% !important; } .ui.grid > [class*="eleven column"].row > .column, .play-button.grid > [class*="eleven column"].row > .column, .download-button.grid > [class*="eleven column"].row > .column { width: 9.09090909% !important; } .ui.grid > [class*="twelve column"].row > .column, .play-button.grid > [class*="twelve column"].row > .column, .download-button.grid > [class*="twelve column"].row > .column { width: 8.33333333% !important; } .ui.grid > [class*="thirteen column"].row > .column, .play-button.grid > [class*="thirteen column"].row > .column, .download-button.grid > [class*="thirteen column"].row > .column { width: 7.69230769% !important; } .ui.grid > [class*="fourteen column"].row > .column, .play-button.grid > [class*="fourteen column"].row > .column, .download-button.grid > [class*="fourteen column"].row > .column { width: 7.14285714% !important; } .ui.grid > [class*="fifteen column"].row > .column, .play-button.grid > [class*="fifteen column"].row > .column, .download-button.grid > [class*="fifteen column"].row > .column { width: 6.66666667% !important; } .ui.grid > [class*="sixteen column"].row > .column, .play-button.grid > [class*="sixteen column"].row > .column, .download-button.grid > [class*="sixteen column"].row > .column { width: 6.25% !important; } /* Celled Page */ .ui.celled.page.grid, .play-button.celled.page.grid, .download-button.celled.page.grid { box-shadow: none; } /*------------------- Column Width --------------------*/ /* Sizing Combinations */ .ui.grid > .row > [class*="one wide"].column, .ui.grid > .column.row > [class*="one wide"].column, .ui.grid > [class*="one wide"].column, .ui.column.grid > [class*="one wide"].column, .play-button.grid > .row > [class*="one wide"].column, .play-button.grid > .column.row > [class*="one wide"].column, .play-button.grid > [class*="one wide"].column, .play-button.column.grid > [class*="one wide"].column, .download-button.grid > .row > [class*="one wide"].column, .download-button.grid > .column.row > [class*="one wide"].column, .download-button.grid > [class*="one wide"].column, .download-button.column.grid > [class*="one wide"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide"].column, .ui.grid > .column.row > [class*="two wide"].column, .ui.grid > [class*="two wide"].column, .ui.column.grid > [class*="two wide"].column, .play-button.grid > .row > [class*="two wide"].column, .play-button.grid > .column.row > [class*="two wide"].column, .play-button.grid > [class*="two wide"].column, .play-button.column.grid > [class*="two wide"].column, .download-button.grid > .row > [class*="two wide"].column, .download-button.grid > .column.row > [class*="two wide"].column, .download-button.grid > [class*="two wide"].column, .download-button.column.grid > [class*="two wide"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide"].column, .ui.grid > .column.row > [class*="three wide"].column, .ui.grid > [class*="three wide"].column, .ui.column.grid > [class*="three wide"].column, .play-button.grid > .row > [class*="three wide"].column, .play-button.grid > .column.row > [class*="three wide"].column, .play-button.grid > [class*="three wide"].column, .play-button.column.grid > [class*="three wide"].column, .download-button.grid > .row > [class*="three wide"].column, .download-button.grid > .column.row > [class*="three wide"].column, .download-button.grid > [class*="three wide"].column, .download-button.column.grid > [class*="three wide"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide"].column, .ui.grid > .column.row > [class*="four wide"].column, .ui.grid > [class*="four wide"].column, .ui.column.grid > [class*="four wide"].column, .play-button.grid > .row > [class*="four wide"].column, .play-button.grid > .column.row > [class*="four wide"].column, .play-button.grid > [class*="four wide"].column, .play-button.column.grid > [class*="four wide"].column, .download-button.grid > .row > [class*="four wide"].column, .download-button.grid > .column.row > [class*="four wide"].column, .download-button.grid > [class*="four wide"].column, .download-button.column.grid > [class*="four wide"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide"].column, .ui.grid > .column.row > [class*="five wide"].column, .ui.grid > [class*="five wide"].column, .ui.column.grid > [class*="five wide"].column, .play-button.grid > .row > [class*="five wide"].column, .play-button.grid > .column.row > [class*="five wide"].column, .play-button.grid > [class*="five wide"].column, .play-button.column.grid > [class*="five wide"].column, .download-button.grid > .row > [class*="five wide"].column, .download-button.grid > .column.row > [class*="five wide"].column, .download-button.grid > [class*="five wide"].column, .download-button.column.grid > [class*="five wide"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide"].column, .ui.grid > .column.row > [class*="six wide"].column, .ui.grid > [class*="six wide"].column, .ui.column.grid > [class*="six wide"].column, .play-button.grid > .row > [class*="six wide"].column, .play-button.grid > .column.row > [class*="six wide"].column, .play-button.grid > [class*="six wide"].column, .play-button.column.grid > [class*="six wide"].column, .download-button.grid > .row > [class*="six wide"].column, .download-button.grid > .column.row > [class*="six wide"].column, .download-button.grid > [class*="six wide"].column, .download-button.column.grid > [class*="six wide"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide"].column, .ui.grid > .column.row > [class*="seven wide"].column, .ui.grid > [class*="seven wide"].column, .ui.column.grid > [class*="seven wide"].column, .play-button.grid > .row > [class*="seven wide"].column, .play-button.grid > .column.row > [class*="seven wide"].column, .play-button.grid > [class*="seven wide"].column, .play-button.column.grid > [class*="seven wide"].column, .download-button.grid > .row > [class*="seven wide"].column, .download-button.grid > .column.row > [class*="seven wide"].column, .download-button.grid > [class*="seven wide"].column, .download-button.column.grid > [class*="seven wide"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide"].column, .ui.grid > .column.row > [class*="eight wide"].column, .ui.grid > [class*="eight wide"].column, .ui.column.grid > [class*="eight wide"].column, .play-button.grid > .row > [class*="eight wide"].column, .play-button.grid > .column.row > [class*="eight wide"].column, .play-button.grid > [class*="eight wide"].column, .play-button.column.grid > [class*="eight wide"].column, .download-button.grid > .row > [class*="eight wide"].column, .download-button.grid > .column.row > [class*="eight wide"].column, .download-button.grid > [class*="eight wide"].column, .download-button.column.grid > [class*="eight wide"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide"].column, .ui.grid > .column.row > [class*="nine wide"].column, .ui.grid > [class*="nine wide"].column, .ui.column.grid > [class*="nine wide"].column, .play-button.grid > .row > [class*="nine wide"].column, .play-button.grid > .column.row > [class*="nine wide"].column, .play-button.grid > [class*="nine wide"].column, .play-button.column.grid > [class*="nine wide"].column, .download-button.grid > .row > [class*="nine wide"].column, .download-button.grid > .column.row > [class*="nine wide"].column, .download-button.grid > [class*="nine wide"].column, .download-button.column.grid > [class*="nine wide"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide"].column, .ui.grid > .column.row > [class*="ten wide"].column, .ui.grid > [class*="ten wide"].column, .ui.column.grid > [class*="ten wide"].column, .play-button.grid > .row > [class*="ten wide"].column, .play-button.grid > .column.row > [class*="ten wide"].column, .play-button.grid > [class*="ten wide"].column, .play-button.column.grid > [class*="ten wide"].column, .download-button.grid > .row > [class*="ten wide"].column, .download-button.grid > .column.row > [class*="ten wide"].column, .download-button.grid > [class*="ten wide"].column, .download-button.column.grid > [class*="ten wide"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide"].column, .ui.grid > .column.row > [class*="eleven wide"].column, .ui.grid > [class*="eleven wide"].column, .ui.column.grid > [class*="eleven wide"].column, .play-button.grid > .row > [class*="eleven wide"].column, .play-button.grid > .column.row > [class*="eleven wide"].column, .play-button.grid > [class*="eleven wide"].column, .play-button.column.grid > [class*="eleven wide"].column, .download-button.grid > .row > [class*="eleven wide"].column, .download-button.grid > .column.row > [class*="eleven wide"].column, .download-button.grid > [class*="eleven wide"].column, .download-button.column.grid > [class*="eleven wide"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide"].column, .ui.grid > .column.row > [class*="twelve wide"].column, .ui.grid > [class*="twelve wide"].column, .ui.column.grid > [class*="twelve wide"].column, .play-button.grid > .row > [class*="twelve wide"].column, .play-button.grid > .column.row > [class*="twelve wide"].column, .play-button.grid > [class*="twelve wide"].column, .play-button.column.grid > [class*="twelve wide"].column, .download-button.grid > .row > [class*="twelve wide"].column, .download-button.grid > .column.row > [class*="twelve wide"].column, .download-button.grid > [class*="twelve wide"].column, .download-button.column.grid > [class*="twelve wide"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide"].column, .ui.grid > .column.row > [class*="thirteen wide"].column, .ui.grid > [class*="thirteen wide"].column, .ui.column.grid > [class*="thirteen wide"].column, .play-button.grid > .row > [class*="thirteen wide"].column, .play-button.grid > .column.row > [class*="thirteen wide"].column, .play-button.grid > [class*="thirteen wide"].column, .play-button.column.grid > [class*="thirteen wide"].column, .download-button.grid > .row > [class*="thirteen wide"].column, .download-button.grid > .column.row > [class*="thirteen wide"].column, .download-button.grid > [class*="thirteen wide"].column, .download-button.column.grid > [class*="thirteen wide"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide"].column, .ui.grid > .column.row > [class*="fourteen wide"].column, .ui.grid > [class*="fourteen wide"].column, .ui.column.grid > [class*="fourteen wide"].column, .play-button.grid > .row > [class*="fourteen wide"].column, .play-button.grid > .column.row > [class*="fourteen wide"].column, .play-button.grid > [class*="fourteen wide"].column, .play-button.column.grid > [class*="fourteen wide"].column, .download-button.grid > .row > [class*="fourteen wide"].column, .download-button.grid > .column.row > [class*="fourteen wide"].column, .download-button.grid > [class*="fourteen wide"].column, .download-button.column.grid > [class*="fourteen wide"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide"].column, .ui.grid > .column.row > [class*="fifteen wide"].column, .ui.grid > [class*="fifteen wide"].column, .ui.column.grid > [class*="fifteen wide"].column, .play-button.grid > .row > [class*="fifteen wide"].column, .play-button.grid > .column.row > [class*="fifteen wide"].column, .play-button.grid > [class*="fifteen wide"].column, .play-button.column.grid > [class*="fifteen wide"].column, .download-button.grid > .row > [class*="fifteen wide"].column, .download-button.grid > .column.row > [class*="fifteen wide"].column, .download-button.grid > [class*="fifteen wide"].column, .download-button.column.grid > [class*="fifteen wide"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide"].column, .ui.grid > .column.row > [class*="sixteen wide"].column, .ui.grid > [class*="sixteen wide"].column, .ui.column.grid > [class*="sixteen wide"].column, .play-button.grid > .row > [class*="sixteen wide"].column, .play-button.grid > .column.row > [class*="sixteen wide"].column, .play-button.grid > [class*="sixteen wide"].column, .play-button.column.grid > [class*="sixteen wide"].column, .download-button.grid > .row > [class*="sixteen wide"].column, .download-button.grid > .column.row > [class*="sixteen wide"].column, .download-button.grid > [class*="sixteen wide"].column, .download-button.column.grid > [class*="sixteen wide"].column { width: 100% !important; } /*---------------------- Width per Device -----------------------*/ /* Mobile Sizing Combinations */ @media only screen and (min-width: 320px) and (max-width: 767px) { .ui.grid > .row > [class*="one wide mobile"].column, .ui.grid > .column.row > [class*="one wide mobile"].column, .ui.grid > [class*="one wide mobile"].column, .ui.column.grid > [class*="one wide mobile"].column, .play-button.grid > .row > [class*="one wide mobile"].column, .play-button.grid > .column.row > [class*="one wide mobile"].column, .play-button.grid > [class*="one wide mobile"].column, .play-button.column.grid > [class*="one wide mobile"].column, .download-button.grid > .row > [class*="one wide mobile"].column, .download-button.grid > .column.row > [class*="one wide mobile"].column, .download-button.grid > [class*="one wide mobile"].column, .download-button.column.grid > [class*="one wide mobile"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide mobile"].column, .ui.grid > .column.row > [class*="two wide mobile"].column, .ui.grid > [class*="two wide mobile"].column, .ui.column.grid > [class*="two wide mobile"].column, .play-button.grid > .row > [class*="two wide mobile"].column, .play-button.grid > .column.row > [class*="two wide mobile"].column, .play-button.grid > [class*="two wide mobile"].column, .play-button.column.grid > [class*="two wide mobile"].column, .download-button.grid > .row > [class*="two wide mobile"].column, .download-button.grid > .column.row > [class*="two wide mobile"].column, .download-button.grid > [class*="two wide mobile"].column, .download-button.column.grid > [class*="two wide mobile"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide mobile"].column, .ui.grid > .column.row > [class*="three wide mobile"].column, .ui.grid > [class*="three wide mobile"].column, .ui.column.grid > [class*="three wide mobile"].column, .play-button.grid > .row > [class*="three wide mobile"].column, .play-button.grid > .column.row > [class*="three wide mobile"].column, .play-button.grid > [class*="three wide mobile"].column, .play-button.column.grid > [class*="three wide mobile"].column, .download-button.grid > .row > [class*="three wide mobile"].column, .download-button.grid > .column.row > [class*="three wide mobile"].column, .download-button.grid > [class*="three wide mobile"].column, .download-button.column.grid > [class*="three wide mobile"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide mobile"].column, .ui.grid > .column.row > [class*="four wide mobile"].column, .ui.grid > [class*="four wide mobile"].column, .ui.column.grid > [class*="four wide mobile"].column, .play-button.grid > .row > [class*="four wide mobile"].column, .play-button.grid > .column.row > [class*="four wide mobile"].column, .play-button.grid > [class*="four wide mobile"].column, .play-button.column.grid > [class*="four wide mobile"].column, .download-button.grid > .row > [class*="four wide mobile"].column, .download-button.grid > .column.row > [class*="four wide mobile"].column, .download-button.grid > [class*="four wide mobile"].column, .download-button.column.grid > [class*="four wide mobile"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide mobile"].column, .ui.grid > .column.row > [class*="five wide mobile"].column, .ui.grid > [class*="five wide mobile"].column, .ui.column.grid > [class*="five wide mobile"].column, .play-button.grid > .row > [class*="five wide mobile"].column, .play-button.grid > .column.row > [class*="five wide mobile"].column, .play-button.grid > [class*="five wide mobile"].column, .play-button.column.grid > [class*="five wide mobile"].column, .download-button.grid > .row > [class*="five wide mobile"].column, .download-button.grid > .column.row > [class*="five wide mobile"].column, .download-button.grid > [class*="five wide mobile"].column, .download-button.column.grid > [class*="five wide mobile"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide mobile"].column, .ui.grid > .column.row > [class*="six wide mobile"].column, .ui.grid > [class*="six wide mobile"].column, .ui.column.grid > [class*="six wide mobile"].column, .play-button.grid > .row > [class*="six wide mobile"].column, .play-button.grid > .column.row > [class*="six wide mobile"].column, .play-button.grid > [class*="six wide mobile"].column, .play-button.column.grid > [class*="six wide mobile"].column, .download-button.grid > .row > [class*="six wide mobile"].column, .download-button.grid > .column.row > [class*="six wide mobile"].column, .download-button.grid > [class*="six wide mobile"].column, .download-button.column.grid > [class*="six wide mobile"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide mobile"].column, .ui.grid > .column.row > [class*="seven wide mobile"].column, .ui.grid > [class*="seven wide mobile"].column, .ui.column.grid > [class*="seven wide mobile"].column, .play-button.grid > .row > [class*="seven wide mobile"].column, .play-button.grid > .column.row > [class*="seven wide mobile"].column, .play-button.grid > [class*="seven wide mobile"].column, .play-button.column.grid > [class*="seven wide mobile"].column, .download-button.grid > .row > [class*="seven wide mobile"].column, .download-button.grid > .column.row > [class*="seven wide mobile"].column, .download-button.grid > [class*="seven wide mobile"].column, .download-button.column.grid > [class*="seven wide mobile"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide mobile"].column, .ui.grid > .column.row > [class*="eight wide mobile"].column, .ui.grid > [class*="eight wide mobile"].column, .ui.column.grid > [class*="eight wide mobile"].column, .play-button.grid > .row > [class*="eight wide mobile"].column, .play-button.grid > .column.row > [class*="eight wide mobile"].column, .play-button.grid > [class*="eight wide mobile"].column, .play-button.column.grid > [class*="eight wide mobile"].column, .download-button.grid > .row > [class*="eight wide mobile"].column, .download-button.grid > .column.row > [class*="eight wide mobile"].column, .download-button.grid > [class*="eight wide mobile"].column, .download-button.column.grid > [class*="eight wide mobile"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide mobile"].column, .ui.grid > .column.row > [class*="nine wide mobile"].column, .ui.grid > [class*="nine wide mobile"].column, .ui.column.grid > [class*="nine wide mobile"].column, .play-button.grid > .row > [class*="nine wide mobile"].column, .play-button.grid > .column.row > [class*="nine wide mobile"].column, .play-button.grid > [class*="nine wide mobile"].column, .play-button.column.grid > [class*="nine wide mobile"].column, .download-button.grid > .row > [class*="nine wide mobile"].column, .download-button.grid > .column.row > [class*="nine wide mobile"].column, .download-button.grid > [class*="nine wide mobile"].column, .download-button.column.grid > [class*="nine wide mobile"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide mobile"].column, .ui.grid > .column.row > [class*="ten wide mobile"].column, .ui.grid > [class*="ten wide mobile"].column, .ui.column.grid > [class*="ten wide mobile"].column, .play-button.grid > .row > [class*="ten wide mobile"].column, .play-button.grid > .column.row > [class*="ten wide mobile"].column, .play-button.grid > [class*="ten wide mobile"].column, .play-button.column.grid > [class*="ten wide mobile"].column, .download-button.grid > .row > [class*="ten wide mobile"].column, .download-button.grid > .column.row > [class*="ten wide mobile"].column, .download-button.grid > [class*="ten wide mobile"].column, .download-button.column.grid > [class*="ten wide mobile"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide mobile"].column, .ui.grid > .column.row > [class*="eleven wide mobile"].column, .ui.grid > [class*="eleven wide mobile"].column, .ui.column.grid > [class*="eleven wide mobile"].column, .play-button.grid > .row > [class*="eleven wide mobile"].column, .play-button.grid > .column.row > [class*="eleven wide mobile"].column, .play-button.grid > [class*="eleven wide mobile"].column, .play-button.column.grid > [class*="eleven wide mobile"].column, .download-button.grid > .row > [class*="eleven wide mobile"].column, .download-button.grid > .column.row > [class*="eleven wide mobile"].column, .download-button.grid > [class*="eleven wide mobile"].column, .download-button.column.grid > [class*="eleven wide mobile"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide mobile"].column, .ui.grid > .column.row > [class*="twelve wide mobile"].column, .ui.grid > [class*="twelve wide mobile"].column, .ui.column.grid > [class*="twelve wide mobile"].column, .play-button.grid > .row > [class*="twelve wide mobile"].column, .play-button.grid > .column.row > [class*="twelve wide mobile"].column, .play-button.grid > [class*="twelve wide mobile"].column, .play-button.column.grid > [class*="twelve wide mobile"].column, .download-button.grid > .row > [class*="twelve wide mobile"].column, .download-button.grid > .column.row > [class*="twelve wide mobile"].column, .download-button.grid > [class*="twelve wide mobile"].column, .download-button.column.grid > [class*="twelve wide mobile"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide mobile"].column, .ui.grid > .column.row > [class*="thirteen wide mobile"].column, .ui.grid > [class*="thirteen wide mobile"].column, .ui.column.grid > [class*="thirteen wide mobile"].column, .play-button.grid > .row > [class*="thirteen wide mobile"].column, .play-button.grid > .column.row > [class*="thirteen wide mobile"].column, .play-button.grid > [class*="thirteen wide mobile"].column, .play-button.column.grid > [class*="thirteen wide mobile"].column, .download-button.grid > .row > [class*="thirteen wide mobile"].column, .download-button.grid > .column.row > [class*="thirteen wide mobile"].column, .download-button.grid > [class*="thirteen wide mobile"].column, .download-button.column.grid > [class*="thirteen wide mobile"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide mobile"].column, .ui.grid > .column.row > [class*="fourteen wide mobile"].column, .ui.grid > [class*="fourteen wide mobile"].column, .ui.column.grid > [class*="fourteen wide mobile"].column, .play-button.grid > .row > [class*="fourteen wide mobile"].column, .play-button.grid > .column.row > [class*="fourteen wide mobile"].column, .play-button.grid > [class*="fourteen wide mobile"].column, .play-button.column.grid > [class*="fourteen wide mobile"].column, .download-button.grid > .row > [class*="fourteen wide mobile"].column, .download-button.grid > .column.row > [class*="fourteen wide mobile"].column, .download-button.grid > [class*="fourteen wide mobile"].column, .download-button.column.grid > [class*="fourteen wide mobile"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide mobile"].column, .ui.grid > .column.row > [class*="fifteen wide mobile"].column, .ui.grid > [class*="fifteen wide mobile"].column, .ui.column.grid > [class*="fifteen wide mobile"].column, .play-button.grid > .row > [class*="fifteen wide mobile"].column, .play-button.grid > .column.row > [class*="fifteen wide mobile"].column, .play-button.grid > [class*="fifteen wide mobile"].column, .play-button.column.grid > [class*="fifteen wide mobile"].column, .download-button.grid > .row > [class*="fifteen wide mobile"].column, .download-button.grid > .column.row > [class*="fifteen wide mobile"].column, .download-button.grid > [class*="fifteen wide mobile"].column, .download-button.column.grid > [class*="fifteen wide mobile"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide mobile"].column, .ui.grid > .column.row > [class*="sixteen wide mobile"].column, .ui.grid > [class*="sixteen wide mobile"].column, .ui.column.grid > [class*="sixteen wide mobile"].column, .play-button.grid > .row > [class*="sixteen wide mobile"].column, .play-button.grid > .column.row > [class*="sixteen wide mobile"].column, .play-button.grid > [class*="sixteen wide mobile"].column, .play-button.column.grid > [class*="sixteen wide mobile"].column, .download-button.grid > .row > [class*="sixteen wide mobile"].column, .download-button.grid > .column.row > [class*="sixteen wide mobile"].column, .download-button.grid > [class*="sixteen wide mobile"].column, .download-button.column.grid > [class*="sixteen wide mobile"].column { width: 100% !important; } } /* Tablet Sizing Combinations */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.grid > .row > [class*="one wide tablet"].column, .ui.grid > .column.row > [class*="one wide tablet"].column, .ui.grid > [class*="one wide tablet"].column, .ui.column.grid > [class*="one wide tablet"].column, .play-button.grid > .row > [class*="one wide tablet"].column, .play-button.grid > .column.row > [class*="one wide tablet"].column, .play-button.grid > [class*="one wide tablet"].column, .play-button.column.grid > [class*="one wide tablet"].column, .download-button.grid > .row > [class*="one wide tablet"].column, .download-button.grid > .column.row > [class*="one wide tablet"].column, .download-button.grid > [class*="one wide tablet"].column, .download-button.column.grid > [class*="one wide tablet"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide tablet"].column, .ui.grid > .column.row > [class*="two wide tablet"].column, .ui.grid > [class*="two wide tablet"].column, .ui.column.grid > [class*="two wide tablet"].column, .play-button.grid > .row > [class*="two wide tablet"].column, .play-button.grid > .column.row > [class*="two wide tablet"].column, .play-button.grid > [class*="two wide tablet"].column, .play-button.column.grid > [class*="two wide tablet"].column, .download-button.grid > .row > [class*="two wide tablet"].column, .download-button.grid > .column.row > [class*="two wide tablet"].column, .download-button.grid > [class*="two wide tablet"].column, .download-button.column.grid > [class*="two wide tablet"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide tablet"].column, .ui.grid > .column.row > [class*="three wide tablet"].column, .ui.grid > [class*="three wide tablet"].column, .ui.column.grid > [class*="three wide tablet"].column, .play-button.grid > .row > [class*="three wide tablet"].column, .play-button.grid > .column.row > [class*="three wide tablet"].column, .play-button.grid > [class*="three wide tablet"].column, .play-button.column.grid > [class*="three wide tablet"].column, .download-button.grid > .row > [class*="three wide tablet"].column, .download-button.grid > .column.row > [class*="three wide tablet"].column, .download-button.grid > [class*="three wide tablet"].column, .download-button.column.grid > [class*="three wide tablet"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide tablet"].column, .ui.grid > .column.row > [class*="four wide tablet"].column, .ui.grid > [class*="four wide tablet"].column, .ui.column.grid > [class*="four wide tablet"].column, .play-button.grid > .row > [class*="four wide tablet"].column, .play-button.grid > .column.row > [class*="four wide tablet"].column, .play-button.grid > [class*="four wide tablet"].column, .play-button.column.grid > [class*="four wide tablet"].column, .download-button.grid > .row > [class*="four wide tablet"].column, .download-button.grid > .column.row > [class*="four wide tablet"].column, .download-button.grid > [class*="four wide tablet"].column, .download-button.column.grid > [class*="four wide tablet"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide tablet"].column, .ui.grid > .column.row > [class*="five wide tablet"].column, .ui.grid > [class*="five wide tablet"].column, .ui.column.grid > [class*="five wide tablet"].column, .play-button.grid > .row > [class*="five wide tablet"].column, .play-button.grid > .column.row > [class*="five wide tablet"].column, .play-button.grid > [class*="five wide tablet"].column, .play-button.column.grid > [class*="five wide tablet"].column, .download-button.grid > .row > [class*="five wide tablet"].column, .download-button.grid > .column.row > [class*="five wide tablet"].column, .download-button.grid > [class*="five wide tablet"].column, .download-button.column.grid > [class*="five wide tablet"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide tablet"].column, .ui.grid > .column.row > [class*="six wide tablet"].column, .ui.grid > [class*="six wide tablet"].column, .ui.column.grid > [class*="six wide tablet"].column, .play-button.grid > .row > [class*="six wide tablet"].column, .play-button.grid > .column.row > [class*="six wide tablet"].column, .play-button.grid > [class*="six wide tablet"].column, .play-button.column.grid > [class*="six wide tablet"].column, .download-button.grid > .row > [class*="six wide tablet"].column, .download-button.grid > .column.row > [class*="six wide tablet"].column, .download-button.grid > [class*="six wide tablet"].column, .download-button.column.grid > [class*="six wide tablet"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide tablet"].column, .ui.grid > .column.row > [class*="seven wide tablet"].column, .ui.grid > [class*="seven wide tablet"].column, .ui.column.grid > [class*="seven wide tablet"].column, .play-button.grid > .row > [class*="seven wide tablet"].column, .play-button.grid > .column.row > [class*="seven wide tablet"].column, .play-button.grid > [class*="seven wide tablet"].column, .play-button.column.grid > [class*="seven wide tablet"].column, .download-button.grid > .row > [class*="seven wide tablet"].column, .download-button.grid > .column.row > [class*="seven wide tablet"].column, .download-button.grid > [class*="seven wide tablet"].column, .download-button.column.grid > [class*="seven wide tablet"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide tablet"].column, .ui.grid > .column.row > [class*="eight wide tablet"].column, .ui.grid > [class*="eight wide tablet"].column, .ui.column.grid > [class*="eight wide tablet"].column, .play-button.grid > .row > [class*="eight wide tablet"].column, .play-button.grid > .column.row > [class*="eight wide tablet"].column, .play-button.grid > [class*="eight wide tablet"].column, .play-button.column.grid > [class*="eight wide tablet"].column, .download-button.grid > .row > [class*="eight wide tablet"].column, .download-button.grid > .column.row > [class*="eight wide tablet"].column, .download-button.grid > [class*="eight wide tablet"].column, .download-button.column.grid > [class*="eight wide tablet"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide tablet"].column, .ui.grid > .column.row > [class*="nine wide tablet"].column, .ui.grid > [class*="nine wide tablet"].column, .ui.column.grid > [class*="nine wide tablet"].column, .play-button.grid > .row > [class*="nine wide tablet"].column, .play-button.grid > .column.row > [class*="nine wide tablet"].column, .play-button.grid > [class*="nine wide tablet"].column, .play-button.column.grid > [class*="nine wide tablet"].column, .download-button.grid > .row > [class*="nine wide tablet"].column, .download-button.grid > .column.row > [class*="nine wide tablet"].column, .download-button.grid > [class*="nine wide tablet"].column, .download-button.column.grid > [class*="nine wide tablet"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide tablet"].column, .ui.grid > .column.row > [class*="ten wide tablet"].column, .ui.grid > [class*="ten wide tablet"].column, .ui.column.grid > [class*="ten wide tablet"].column, .play-button.grid > .row > [class*="ten wide tablet"].column, .play-button.grid > .column.row > [class*="ten wide tablet"].column, .play-button.grid > [class*="ten wide tablet"].column, .play-button.column.grid > [class*="ten wide tablet"].column, .download-button.grid > .row > [class*="ten wide tablet"].column, .download-button.grid > .column.row > [class*="ten wide tablet"].column, .download-button.grid > [class*="ten wide tablet"].column, .download-button.column.grid > [class*="ten wide tablet"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide tablet"].column, .ui.grid > .column.row > [class*="eleven wide tablet"].column, .ui.grid > [class*="eleven wide tablet"].column, .ui.column.grid > [class*="eleven wide tablet"].column, .play-button.grid > .row > [class*="eleven wide tablet"].column, .play-button.grid > .column.row > [class*="eleven wide tablet"].column, .play-button.grid > [class*="eleven wide tablet"].column, .play-button.column.grid > [class*="eleven wide tablet"].column, .download-button.grid > .row > [class*="eleven wide tablet"].column, .download-button.grid > .column.row > [class*="eleven wide tablet"].column, .download-button.grid > [class*="eleven wide tablet"].column, .download-button.column.grid > [class*="eleven wide tablet"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide tablet"].column, .ui.grid > .column.row > [class*="twelve wide tablet"].column, .ui.grid > [class*="twelve wide tablet"].column, .ui.column.grid > [class*="twelve wide tablet"].column, .play-button.grid > .row > [class*="twelve wide tablet"].column, .play-button.grid > .column.row > [class*="twelve wide tablet"].column, .play-button.grid > [class*="twelve wide tablet"].column, .play-button.column.grid > [class*="twelve wide tablet"].column, .download-button.grid > .row > [class*="twelve wide tablet"].column, .download-button.grid > .column.row > [class*="twelve wide tablet"].column, .download-button.grid > [class*="twelve wide tablet"].column, .download-button.column.grid > [class*="twelve wide tablet"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide tablet"].column, .ui.grid > .column.row > [class*="thirteen wide tablet"].column, .ui.grid > [class*="thirteen wide tablet"].column, .ui.column.grid > [class*="thirteen wide tablet"].column, .play-button.grid > .row > [class*="thirteen wide tablet"].column, .play-button.grid > .column.row > [class*="thirteen wide tablet"].column, .play-button.grid > [class*="thirteen wide tablet"].column, .play-button.column.grid > [class*="thirteen wide tablet"].column, .download-button.grid > .row > [class*="thirteen wide tablet"].column, .download-button.grid > .column.row > [class*="thirteen wide tablet"].column, .download-button.grid > [class*="thirteen wide tablet"].column, .download-button.column.grid > [class*="thirteen wide tablet"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide tablet"].column, .ui.grid > .column.row > [class*="fourteen wide tablet"].column, .ui.grid > [class*="fourteen wide tablet"].column, .ui.column.grid > [class*="fourteen wide tablet"].column, .play-button.grid > .row > [class*="fourteen wide tablet"].column, .play-button.grid > .column.row > [class*="fourteen wide tablet"].column, .play-button.grid > [class*="fourteen wide tablet"].column, .play-button.column.grid > [class*="fourteen wide tablet"].column, .download-button.grid > .row > [class*="fourteen wide tablet"].column, .download-button.grid > .column.row > [class*="fourteen wide tablet"].column, .download-button.grid > [class*="fourteen wide tablet"].column, .download-button.column.grid > [class*="fourteen wide tablet"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide tablet"].column, .ui.grid > .column.row > [class*="fifteen wide tablet"].column, .ui.grid > [class*="fifteen wide tablet"].column, .ui.column.grid > [class*="fifteen wide tablet"].column, .play-button.grid > .row > [class*="fifteen wide tablet"].column, .play-button.grid > .column.row > [class*="fifteen wide tablet"].column, .play-button.grid > [class*="fifteen wide tablet"].column, .play-button.column.grid > [class*="fifteen wide tablet"].column, .download-button.grid > .row > [class*="fifteen wide tablet"].column, .download-button.grid > .column.row > [class*="fifteen wide tablet"].column, .download-button.grid > [class*="fifteen wide tablet"].column, .download-button.column.grid > [class*="fifteen wide tablet"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide tablet"].column, .ui.grid > .column.row > [class*="sixteen wide tablet"].column, .ui.grid > [class*="sixteen wide tablet"].column, .ui.column.grid > [class*="sixteen wide tablet"].column, .play-button.grid > .row > [class*="sixteen wide tablet"].column, .play-button.grid > .column.row > [class*="sixteen wide tablet"].column, .play-button.grid > [class*="sixteen wide tablet"].column, .play-button.column.grid > [class*="sixteen wide tablet"].column, .download-button.grid > .row > [class*="sixteen wide tablet"].column, .download-button.grid > .column.row > [class*="sixteen wide tablet"].column, .download-button.grid > [class*="sixteen wide tablet"].column, .download-button.column.grid > [class*="sixteen wide tablet"].column { width: 100% !important; } } /* Computer/Desktop Sizing Combinations */ @media only screen and (min-width: 992px) { .ui.grid > .row > [class*="one wide computer"].column, .ui.grid > .column.row > [class*="one wide computer"].column, .ui.grid > [class*="one wide computer"].column, .ui.column.grid > [class*="one wide computer"].column, .play-button.grid > .row > [class*="one wide computer"].column, .play-button.grid > .column.row > [class*="one wide computer"].column, .play-button.grid > [class*="one wide computer"].column, .play-button.column.grid > [class*="one wide computer"].column, .download-button.grid > .row > [class*="one wide computer"].column, .download-button.grid > .column.row > [class*="one wide computer"].column, .download-button.grid > [class*="one wide computer"].column, .download-button.column.grid > [class*="one wide computer"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide computer"].column, .ui.grid > .column.row > [class*="two wide computer"].column, .ui.grid > [class*="two wide computer"].column, .ui.column.grid > [class*="two wide computer"].column, .play-button.grid > .row > [class*="two wide computer"].column, .play-button.grid > .column.row > [class*="two wide computer"].column, .play-button.grid > [class*="two wide computer"].column, .play-button.column.grid > [class*="two wide computer"].column, .download-button.grid > .row > [class*="two wide computer"].column, .download-button.grid > .column.row > [class*="two wide computer"].column, .download-button.grid > [class*="two wide computer"].column, .download-button.column.grid > [class*="two wide computer"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide computer"].column, .ui.grid > .column.row > [class*="three wide computer"].column, .ui.grid > [class*="three wide computer"].column, .ui.column.grid > [class*="three wide computer"].column, .play-button.grid > .row > [class*="three wide computer"].column, .play-button.grid > .column.row > [class*="three wide computer"].column, .play-button.grid > [class*="three wide computer"].column, .play-button.column.grid > [class*="three wide computer"].column, .download-button.grid > .row > [class*="three wide computer"].column, .download-button.grid > .column.row > [class*="three wide computer"].column, .download-button.grid > [class*="three wide computer"].column, .download-button.column.grid > [class*="three wide computer"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide computer"].column, .ui.grid > .column.row > [class*="four wide computer"].column, .ui.grid > [class*="four wide computer"].column, .ui.column.grid > [class*="four wide computer"].column, .play-button.grid > .row > [class*="four wide computer"].column, .play-button.grid > .column.row > [class*="four wide computer"].column, .play-button.grid > [class*="four wide computer"].column, .play-button.column.grid > [class*="four wide computer"].column, .download-button.grid > .row > [class*="four wide computer"].column, .download-button.grid > .column.row > [class*="four wide computer"].column, .download-button.grid > [class*="four wide computer"].column, .download-button.column.grid > [class*="four wide computer"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide computer"].column, .ui.grid > .column.row > [class*="five wide computer"].column, .ui.grid > [class*="five wide computer"].column, .ui.column.grid > [class*="five wide computer"].column, .play-button.grid > .row > [class*="five wide computer"].column, .play-button.grid > .column.row > [class*="five wide computer"].column, .play-button.grid > [class*="five wide computer"].column, .play-button.column.grid > [class*="five wide computer"].column, .download-button.grid > .row > [class*="five wide computer"].column, .download-button.grid > .column.row > [class*="five wide computer"].column, .download-button.grid > [class*="five wide computer"].column, .download-button.column.grid > [class*="five wide computer"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide computer"].column, .ui.grid > .column.row > [class*="six wide computer"].column, .ui.grid > [class*="six wide computer"].column, .ui.column.grid > [class*="six wide computer"].column, .play-button.grid > .row > [class*="six wide computer"].column, .play-button.grid > .column.row > [class*="six wide computer"].column, .play-button.grid > [class*="six wide computer"].column, .play-button.column.grid > [class*="six wide computer"].column, .download-button.grid > .row > [class*="six wide computer"].column, .download-button.grid > .column.row > [class*="six wide computer"].column, .download-button.grid > [class*="six wide computer"].column, .download-button.column.grid > [class*="six wide computer"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide computer"].column, .ui.grid > .column.row > [class*="seven wide computer"].column, .ui.grid > [class*="seven wide computer"].column, .ui.column.grid > [class*="seven wide computer"].column, .play-button.grid > .row > [class*="seven wide computer"].column, .play-button.grid > .column.row > [class*="seven wide computer"].column, .play-button.grid > [class*="seven wide computer"].column, .play-button.column.grid > [class*="seven wide computer"].column, .download-button.grid > .row > [class*="seven wide computer"].column, .download-button.grid > .column.row > [class*="seven wide computer"].column, .download-button.grid > [class*="seven wide computer"].column, .download-button.column.grid > [class*="seven wide computer"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide computer"].column, .ui.grid > .column.row > [class*="eight wide computer"].column, .ui.grid > [class*="eight wide computer"].column, .ui.column.grid > [class*="eight wide computer"].column, .play-button.grid > .row > [class*="eight wide computer"].column, .play-button.grid > .column.row > [class*="eight wide computer"].column, .play-button.grid > [class*="eight wide computer"].column, .play-button.column.grid > [class*="eight wide computer"].column, .download-button.grid > .row > [class*="eight wide computer"].column, .download-button.grid > .column.row > [class*="eight wide computer"].column, .download-button.grid > [class*="eight wide computer"].column, .download-button.column.grid > [class*="eight wide computer"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide computer"].column, .ui.grid > .column.row > [class*="nine wide computer"].column, .ui.grid > [class*="nine wide computer"].column, .ui.column.grid > [class*="nine wide computer"].column, .play-button.grid > .row > [class*="nine wide computer"].column, .play-button.grid > .column.row > [class*="nine wide computer"].column, .play-button.grid > [class*="nine wide computer"].column, .play-button.column.grid > [class*="nine wide computer"].column, .download-button.grid > .row > [class*="nine wide computer"].column, .download-button.grid > .column.row > [class*="nine wide computer"].column, .download-button.grid > [class*="nine wide computer"].column, .download-button.column.grid > [class*="nine wide computer"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide computer"].column, .ui.grid > .column.row > [class*="ten wide computer"].column, .ui.grid > [class*="ten wide computer"].column, .ui.column.grid > [class*="ten wide computer"].column, .play-button.grid > .row > [class*="ten wide computer"].column, .play-button.grid > .column.row > [class*="ten wide computer"].column, .play-button.grid > [class*="ten wide computer"].column, .play-button.column.grid > [class*="ten wide computer"].column, .download-button.grid > .row > [class*="ten wide computer"].column, .download-button.grid > .column.row > [class*="ten wide computer"].column, .download-button.grid > [class*="ten wide computer"].column, .download-button.column.grid > [class*="ten wide computer"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide computer"].column, .ui.grid > .column.row > [class*="eleven wide computer"].column, .ui.grid > [class*="eleven wide computer"].column, .ui.column.grid > [class*="eleven wide computer"].column, .play-button.grid > .row > [class*="eleven wide computer"].column, .play-button.grid > .column.row > [class*="eleven wide computer"].column, .play-button.grid > [class*="eleven wide computer"].column, .play-button.column.grid > [class*="eleven wide computer"].column, .download-button.grid > .row > [class*="eleven wide computer"].column, .download-button.grid > .column.row > [class*="eleven wide computer"].column, .download-button.grid > [class*="eleven wide computer"].column, .download-button.column.grid > [class*="eleven wide computer"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide computer"].column, .ui.grid > .column.row > [class*="twelve wide computer"].column, .ui.grid > [class*="twelve wide computer"].column, .ui.column.grid > [class*="twelve wide computer"].column, .play-button.grid > .row > [class*="twelve wide computer"].column, .play-button.grid > .column.row > [class*="twelve wide computer"].column, .play-button.grid > [class*="twelve wide computer"].column, .play-button.column.grid > [class*="twelve wide computer"].column, .download-button.grid > .row > [class*="twelve wide computer"].column, .download-button.grid > .column.row > [class*="twelve wide computer"].column, .download-button.grid > [class*="twelve wide computer"].column, .download-button.column.grid > [class*="twelve wide computer"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide computer"].column, .ui.grid > .column.row > [class*="thirteen wide computer"].column, .ui.grid > [class*="thirteen wide computer"].column, .ui.column.grid > [class*="thirteen wide computer"].column, .play-button.grid > .row > [class*="thirteen wide computer"].column, .play-button.grid > .column.row > [class*="thirteen wide computer"].column, .play-button.grid > [class*="thirteen wide computer"].column, .play-button.column.grid > [class*="thirteen wide computer"].column, .download-button.grid > .row > [class*="thirteen wide computer"].column, .download-button.grid > .column.row > [class*="thirteen wide computer"].column, .download-button.grid > [class*="thirteen wide computer"].column, .download-button.column.grid > [class*="thirteen wide computer"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide computer"].column, .ui.grid > .column.row > [class*="fourteen wide computer"].column, .ui.grid > [class*="fourteen wide computer"].column, .ui.column.grid > [class*="fourteen wide computer"].column, .play-button.grid > .row > [class*="fourteen wide computer"].column, .play-button.grid > .column.row > [class*="fourteen wide computer"].column, .play-button.grid > [class*="fourteen wide computer"].column, .play-button.column.grid > [class*="fourteen wide computer"].column, .download-button.grid > .row > [class*="fourteen wide computer"].column, .download-button.grid > .column.row > [class*="fourteen wide computer"].column, .download-button.grid > [class*="fourteen wide computer"].column, .download-button.column.grid > [class*="fourteen wide computer"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide computer"].column, .ui.grid > .column.row > [class*="fifteen wide computer"].column, .ui.grid > [class*="fifteen wide computer"].column, .ui.column.grid > [class*="fifteen wide computer"].column, .play-button.grid > .row > [class*="fifteen wide computer"].column, .play-button.grid > .column.row > [class*="fifteen wide computer"].column, .play-button.grid > [class*="fifteen wide computer"].column, .play-button.column.grid > [class*="fifteen wide computer"].column, .download-button.grid > .row > [class*="fifteen wide computer"].column, .download-button.grid > .column.row > [class*="fifteen wide computer"].column, .download-button.grid > [class*="fifteen wide computer"].column, .download-button.column.grid > [class*="fifteen wide computer"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide computer"].column, .ui.grid > .column.row > [class*="sixteen wide computer"].column, .ui.grid > [class*="sixteen wide computer"].column, .ui.column.grid > [class*="sixteen wide computer"].column, .play-button.grid > .row > [class*="sixteen wide computer"].column, .play-button.grid > .column.row > [class*="sixteen wide computer"].column, .play-button.grid > [class*="sixteen wide computer"].column, .play-button.column.grid > [class*="sixteen wide computer"].column, .download-button.grid > .row > [class*="sixteen wide computer"].column, .download-button.grid > .column.row > [class*="sixteen wide computer"].column, .download-button.grid > [class*="sixteen wide computer"].column, .download-button.column.grid > [class*="sixteen wide computer"].column { width: 100% !important; } } /* Large Monitor Sizing Combinations */ @media only screen and (min-width: 1200px) and (max-width: 1919px) { .ui.grid > .row > [class*="one wide large screen"].column, .ui.grid > .column.row > [class*="one wide large screen"].column, .ui.grid > [class*="one wide large screen"].column, .ui.column.grid > [class*="one wide large screen"].column, .play-button.grid > .row > [class*="one wide large screen"].column, .play-button.grid > .column.row > [class*="one wide large screen"].column, .play-button.grid > [class*="one wide large screen"].column, .play-button.column.grid > [class*="one wide large screen"].column, .download-button.grid > .row > [class*="one wide large screen"].column, .download-button.grid > .column.row > [class*="one wide large screen"].column, .download-button.grid > [class*="one wide large screen"].column, .download-button.column.grid > [class*="one wide large screen"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide large screen"].column, .ui.grid > .column.row > [class*="two wide large screen"].column, .ui.grid > [class*="two wide large screen"].column, .ui.column.grid > [class*="two wide large screen"].column, .play-button.grid > .row > [class*="two wide large screen"].column, .play-button.grid > .column.row > [class*="two wide large screen"].column, .play-button.grid > [class*="two wide large screen"].column, .play-button.column.grid > [class*="two wide large screen"].column, .download-button.grid > .row > [class*="two wide large screen"].column, .download-button.grid > .column.row > [class*="two wide large screen"].column, .download-button.grid > [class*="two wide large screen"].column, .download-button.column.grid > [class*="two wide large screen"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide large screen"].column, .ui.grid > .column.row > [class*="three wide large screen"].column, .ui.grid > [class*="three wide large screen"].column, .ui.column.grid > [class*="three wide large screen"].column, .play-button.grid > .row > [class*="three wide large screen"].column, .play-button.grid > .column.row > [class*="three wide large screen"].column, .play-button.grid > [class*="three wide large screen"].column, .play-button.column.grid > [class*="three wide large screen"].column, .download-button.grid > .row > [class*="three wide large screen"].column, .download-button.grid > .column.row > [class*="three wide large screen"].column, .download-button.grid > [class*="three wide large screen"].column, .download-button.column.grid > [class*="three wide large screen"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide large screen"].column, .ui.grid > .column.row > [class*="four wide large screen"].column, .ui.grid > [class*="four wide large screen"].column, .ui.column.grid > [class*="four wide large screen"].column, .play-button.grid > .row > [class*="four wide large screen"].column, .play-button.grid > .column.row > [class*="four wide large screen"].column, .play-button.grid > [class*="four wide large screen"].column, .play-button.column.grid > [class*="four wide large screen"].column, .download-button.grid > .row > [class*="four wide large screen"].column, .download-button.grid > .column.row > [class*="four wide large screen"].column, .download-button.grid > [class*="four wide large screen"].column, .download-button.column.grid > [class*="four wide large screen"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide large screen"].column, .ui.grid > .column.row > [class*="five wide large screen"].column, .ui.grid > [class*="five wide large screen"].column, .ui.column.grid > [class*="five wide large screen"].column, .play-button.grid > .row > [class*="five wide large screen"].column, .play-button.grid > .column.row > [class*="five wide large screen"].column, .play-button.grid > [class*="five wide large screen"].column, .play-button.column.grid > [class*="five wide large screen"].column, .download-button.grid > .row > [class*="five wide large screen"].column, .download-button.grid > .column.row > [class*="five wide large screen"].column, .download-button.grid > [class*="five wide large screen"].column, .download-button.column.grid > [class*="five wide large screen"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide large screen"].column, .ui.grid > .column.row > [class*="six wide large screen"].column, .ui.grid > [class*="six wide large screen"].column, .ui.column.grid > [class*="six wide large screen"].column, .play-button.grid > .row > [class*="six wide large screen"].column, .play-button.grid > .column.row > [class*="six wide large screen"].column, .play-button.grid > [class*="six wide large screen"].column, .play-button.column.grid > [class*="six wide large screen"].column, .download-button.grid > .row > [class*="six wide large screen"].column, .download-button.grid > .column.row > [class*="six wide large screen"].column, .download-button.grid > [class*="six wide large screen"].column, .download-button.column.grid > [class*="six wide large screen"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide large screen"].column, .ui.grid > .column.row > [class*="seven wide large screen"].column, .ui.grid > [class*="seven wide large screen"].column, .ui.column.grid > [class*="seven wide large screen"].column, .play-button.grid > .row > [class*="seven wide large screen"].column, .play-button.grid > .column.row > [class*="seven wide large screen"].column, .play-button.grid > [class*="seven wide large screen"].column, .play-button.column.grid > [class*="seven wide large screen"].column, .download-button.grid > .row > [class*="seven wide large screen"].column, .download-button.grid > .column.row > [class*="seven wide large screen"].column, .download-button.grid > [class*="seven wide large screen"].column, .download-button.column.grid > [class*="seven wide large screen"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide large screen"].column, .ui.grid > .column.row > [class*="eight wide large screen"].column, .ui.grid > [class*="eight wide large screen"].column, .ui.column.grid > [class*="eight wide large screen"].column, .play-button.grid > .row > [class*="eight wide large screen"].column, .play-button.grid > .column.row > [class*="eight wide large screen"].column, .play-button.grid > [class*="eight wide large screen"].column, .play-button.column.grid > [class*="eight wide large screen"].column, .download-button.grid > .row > [class*="eight wide large screen"].column, .download-button.grid > .column.row > [class*="eight wide large screen"].column, .download-button.grid > [class*="eight wide large screen"].column, .download-button.column.grid > [class*="eight wide large screen"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide large screen"].column, .ui.grid > .column.row > [class*="nine wide large screen"].column, .ui.grid > [class*="nine wide large screen"].column, .ui.column.grid > [class*="nine wide large screen"].column, .play-button.grid > .row > [class*="nine wide large screen"].column, .play-button.grid > .column.row > [class*="nine wide large screen"].column, .play-button.grid > [class*="nine wide large screen"].column, .play-button.column.grid > [class*="nine wide large screen"].column, .download-button.grid > .row > [class*="nine wide large screen"].column, .download-button.grid > .column.row > [class*="nine wide large screen"].column, .download-button.grid > [class*="nine wide large screen"].column, .download-button.column.grid > [class*="nine wide large screen"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide large screen"].column, .ui.grid > .column.row > [class*="ten wide large screen"].column, .ui.grid > [class*="ten wide large screen"].column, .ui.column.grid > [class*="ten wide large screen"].column, .play-button.grid > .row > [class*="ten wide large screen"].column, .play-button.grid > .column.row > [class*="ten wide large screen"].column, .play-button.grid > [class*="ten wide large screen"].column, .play-button.column.grid > [class*="ten wide large screen"].column, .download-button.grid > .row > [class*="ten wide large screen"].column, .download-button.grid > .column.row > [class*="ten wide large screen"].column, .download-button.grid > [class*="ten wide large screen"].column, .download-button.column.grid > [class*="ten wide large screen"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide large screen"].column, .ui.grid > .column.row > [class*="eleven wide large screen"].column, .ui.grid > [class*="eleven wide large screen"].column, .ui.column.grid > [class*="eleven wide large screen"].column, .play-button.grid > .row > [class*="eleven wide large screen"].column, .play-button.grid > .column.row > [class*="eleven wide large screen"].column, .play-button.grid > [class*="eleven wide large screen"].column, .play-button.column.grid > [class*="eleven wide large screen"].column, .download-button.grid > .row > [class*="eleven wide large screen"].column, .download-button.grid > .column.row > [class*="eleven wide large screen"].column, .download-button.grid > [class*="eleven wide large screen"].column, .download-button.column.grid > [class*="eleven wide large screen"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide large screen"].column, .ui.grid > .column.row > [class*="twelve wide large screen"].column, .ui.grid > [class*="twelve wide large screen"].column, .ui.column.grid > [class*="twelve wide large screen"].column, .play-button.grid > .row > [class*="twelve wide large screen"].column, .play-button.grid > .column.row > [class*="twelve wide large screen"].column, .play-button.grid > [class*="twelve wide large screen"].column, .play-button.column.grid > [class*="twelve wide large screen"].column, .download-button.grid > .row > [class*="twelve wide large screen"].column, .download-button.grid > .column.row > [class*="twelve wide large screen"].column, .download-button.grid > [class*="twelve wide large screen"].column, .download-button.column.grid > [class*="twelve wide large screen"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide large screen"].column, .ui.grid > .column.row > [class*="thirteen wide large screen"].column, .ui.grid > [class*="thirteen wide large screen"].column, .ui.column.grid > [class*="thirteen wide large screen"].column, .play-button.grid > .row > [class*="thirteen wide large screen"].column, .play-button.grid > .column.row > [class*="thirteen wide large screen"].column, .play-button.grid > [class*="thirteen wide large screen"].column, .play-button.column.grid > [class*="thirteen wide large screen"].column, .download-button.grid > .row > [class*="thirteen wide large screen"].column, .download-button.grid > .column.row > [class*="thirteen wide large screen"].column, .download-button.grid > [class*="thirteen wide large screen"].column, .download-button.column.grid > [class*="thirteen wide large screen"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide large screen"].column, .ui.grid > .column.row > [class*="fourteen wide large screen"].column, .ui.grid > [class*="fourteen wide large screen"].column, .ui.column.grid > [class*="fourteen wide large screen"].column, .play-button.grid > .row > [class*="fourteen wide large screen"].column, .play-button.grid > .column.row > [class*="fourteen wide large screen"].column, .play-button.grid > [class*="fourteen wide large screen"].column, .play-button.column.grid > [class*="fourteen wide large screen"].column, .download-button.grid > .row > [class*="fourteen wide large screen"].column, .download-button.grid > .column.row > [class*="fourteen wide large screen"].column, .download-button.grid > [class*="fourteen wide large screen"].column, .download-button.column.grid > [class*="fourteen wide large screen"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide large screen"].column, .ui.grid > .column.row > [class*="fifteen wide large screen"].column, .ui.grid > [class*="fifteen wide large screen"].column, .ui.column.grid > [class*="fifteen wide large screen"].column, .play-button.grid > .row > [class*="fifteen wide large screen"].column, .play-button.grid > .column.row > [class*="fifteen wide large screen"].column, .play-button.grid > [class*="fifteen wide large screen"].column, .play-button.column.grid > [class*="fifteen wide large screen"].column, .download-button.grid > .row > [class*="fifteen wide large screen"].column, .download-button.grid > .column.row > [class*="fifteen wide large screen"].column, .download-button.grid > [class*="fifteen wide large screen"].column, .download-button.column.grid > [class*="fifteen wide large screen"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide large screen"].column, .ui.grid > .column.row > [class*="sixteen wide large screen"].column, .ui.grid > [class*="sixteen wide large screen"].column, .ui.column.grid > [class*="sixteen wide large screen"].column, .play-button.grid > .row > [class*="sixteen wide large screen"].column, .play-button.grid > .column.row > [class*="sixteen wide large screen"].column, .play-button.grid > [class*="sixteen wide large screen"].column, .play-button.column.grid > [class*="sixteen wide large screen"].column, .download-button.grid > .row > [class*="sixteen wide large screen"].column, .download-button.grid > .column.row > [class*="sixteen wide large screen"].column, .download-button.grid > [class*="sixteen wide large screen"].column, .download-button.column.grid > [class*="sixteen wide large screen"].column { width: 100% !important; } } /* Widescreen Sizing Combinations */ @media only screen and (min-width: 1920px) { .ui.grid > .row > [class*="one wide widescreen"].column, .ui.grid > .column.row > [class*="one wide widescreen"].column, .ui.grid > [class*="one wide widescreen"].column, .ui.column.grid > [class*="one wide widescreen"].column, .play-button.grid > .row > [class*="one wide widescreen"].column, .play-button.grid > .column.row > [class*="one wide widescreen"].column, .play-button.grid > [class*="one wide widescreen"].column, .play-button.column.grid > [class*="one wide widescreen"].column, .download-button.grid > .row > [class*="one wide widescreen"].column, .download-button.grid > .column.row > [class*="one wide widescreen"].column, .download-button.grid > [class*="one wide widescreen"].column, .download-button.column.grid > [class*="one wide widescreen"].column { width: 6.25% !important; } .ui.grid > .row > [class*="two wide widescreen"].column, .ui.grid > .column.row > [class*="two wide widescreen"].column, .ui.grid > [class*="two wide widescreen"].column, .ui.column.grid > [class*="two wide widescreen"].column, .play-button.grid > .row > [class*="two wide widescreen"].column, .play-button.grid > .column.row > [class*="two wide widescreen"].column, .play-button.grid > [class*="two wide widescreen"].column, .play-button.column.grid > [class*="two wide widescreen"].column, .download-button.grid > .row > [class*="two wide widescreen"].column, .download-button.grid > .column.row > [class*="two wide widescreen"].column, .download-button.grid > [class*="two wide widescreen"].column, .download-button.column.grid > [class*="two wide widescreen"].column { width: 12.5% !important; } .ui.grid > .row > [class*="three wide widescreen"].column, .ui.grid > .column.row > [class*="three wide widescreen"].column, .ui.grid > [class*="three wide widescreen"].column, .ui.column.grid > [class*="three wide widescreen"].column, .play-button.grid > .row > [class*="three wide widescreen"].column, .play-button.grid > .column.row > [class*="three wide widescreen"].column, .play-button.grid > [class*="three wide widescreen"].column, .play-button.column.grid > [class*="three wide widescreen"].column, .download-button.grid > .row > [class*="three wide widescreen"].column, .download-button.grid > .column.row > [class*="three wide widescreen"].column, .download-button.grid > [class*="three wide widescreen"].column, .download-button.column.grid > [class*="three wide widescreen"].column { width: 18.75% !important; } .ui.grid > .row > [class*="four wide widescreen"].column, .ui.grid > .column.row > [class*="four wide widescreen"].column, .ui.grid > [class*="four wide widescreen"].column, .ui.column.grid > [class*="four wide widescreen"].column, .play-button.grid > .row > [class*="four wide widescreen"].column, .play-button.grid > .column.row > [class*="four wide widescreen"].column, .play-button.grid > [class*="four wide widescreen"].column, .play-button.column.grid > [class*="four wide widescreen"].column, .download-button.grid > .row > [class*="four wide widescreen"].column, .download-button.grid > .column.row > [class*="four wide widescreen"].column, .download-button.grid > [class*="four wide widescreen"].column, .download-button.column.grid > [class*="four wide widescreen"].column { width: 25% !important; } .ui.grid > .row > [class*="five wide widescreen"].column, .ui.grid > .column.row > [class*="five wide widescreen"].column, .ui.grid > [class*="five wide widescreen"].column, .ui.column.grid > [class*="five wide widescreen"].column, .play-button.grid > .row > [class*="five wide widescreen"].column, .play-button.grid > .column.row > [class*="five wide widescreen"].column, .play-button.grid > [class*="five wide widescreen"].column, .play-button.column.grid > [class*="five wide widescreen"].column, .download-button.grid > .row > [class*="five wide widescreen"].column, .download-button.grid > .column.row > [class*="five wide widescreen"].column, .download-button.grid > [class*="five wide widescreen"].column, .download-button.column.grid > [class*="five wide widescreen"].column { width: 31.25% !important; } .ui.grid > .row > [class*="six wide widescreen"].column, .ui.grid > .column.row > [class*="six wide widescreen"].column, .ui.grid > [class*="six wide widescreen"].column, .ui.column.grid > [class*="six wide widescreen"].column, .play-button.grid > .row > [class*="six wide widescreen"].column, .play-button.grid > .column.row > [class*="six wide widescreen"].column, .play-button.grid > [class*="six wide widescreen"].column, .play-button.column.grid > [class*="six wide widescreen"].column, .download-button.grid > .row > [class*="six wide widescreen"].column, .download-button.grid > .column.row > [class*="six wide widescreen"].column, .download-button.grid > [class*="six wide widescreen"].column, .download-button.column.grid > [class*="six wide widescreen"].column { width: 37.5% !important; } .ui.grid > .row > [class*="seven wide widescreen"].column, .ui.grid > .column.row > [class*="seven wide widescreen"].column, .ui.grid > [class*="seven wide widescreen"].column, .ui.column.grid > [class*="seven wide widescreen"].column, .play-button.grid > .row > [class*="seven wide widescreen"].column, .play-button.grid > .column.row > [class*="seven wide widescreen"].column, .play-button.grid > [class*="seven wide widescreen"].column, .play-button.column.grid > [class*="seven wide widescreen"].column, .download-button.grid > .row > [class*="seven wide widescreen"].column, .download-button.grid > .column.row > [class*="seven wide widescreen"].column, .download-button.grid > [class*="seven wide widescreen"].column, .download-button.column.grid > [class*="seven wide widescreen"].column { width: 43.75% !important; } .ui.grid > .row > [class*="eight wide widescreen"].column, .ui.grid > .column.row > [class*="eight wide widescreen"].column, .ui.grid > [class*="eight wide widescreen"].column, .ui.column.grid > [class*="eight wide widescreen"].column, .play-button.grid > .row > [class*="eight wide widescreen"].column, .play-button.grid > .column.row > [class*="eight wide widescreen"].column, .play-button.grid > [class*="eight wide widescreen"].column, .play-button.column.grid > [class*="eight wide widescreen"].column, .download-button.grid > .row > [class*="eight wide widescreen"].column, .download-button.grid > .column.row > [class*="eight wide widescreen"].column, .download-button.grid > [class*="eight wide widescreen"].column, .download-button.column.grid > [class*="eight wide widescreen"].column { width: 50% !important; } .ui.grid > .row > [class*="nine wide widescreen"].column, .ui.grid > .column.row > [class*="nine wide widescreen"].column, .ui.grid > [class*="nine wide widescreen"].column, .ui.column.grid > [class*="nine wide widescreen"].column, .play-button.grid > .row > [class*="nine wide widescreen"].column, .play-button.grid > .column.row > [class*="nine wide widescreen"].column, .play-button.grid > [class*="nine wide widescreen"].column, .play-button.column.grid > [class*="nine wide widescreen"].column, .download-button.grid > .row > [class*="nine wide widescreen"].column, .download-button.grid > .column.row > [class*="nine wide widescreen"].column, .download-button.grid > [class*="nine wide widescreen"].column, .download-button.column.grid > [class*="nine wide widescreen"].column { width: 56.25% !important; } .ui.grid > .row > [class*="ten wide widescreen"].column, .ui.grid > .column.row > [class*="ten wide widescreen"].column, .ui.grid > [class*="ten wide widescreen"].column, .ui.column.grid > [class*="ten wide widescreen"].column, .play-button.grid > .row > [class*="ten wide widescreen"].column, .play-button.grid > .column.row > [class*="ten wide widescreen"].column, .play-button.grid > [class*="ten wide widescreen"].column, .play-button.column.grid > [class*="ten wide widescreen"].column, .download-button.grid > .row > [class*="ten wide widescreen"].column, .download-button.grid > .column.row > [class*="ten wide widescreen"].column, .download-button.grid > [class*="ten wide widescreen"].column, .download-button.column.grid > [class*="ten wide widescreen"].column { width: 62.5% !important; } .ui.grid > .row > [class*="eleven wide widescreen"].column, .ui.grid > .column.row > [class*="eleven wide widescreen"].column, .ui.grid > [class*="eleven wide widescreen"].column, .ui.column.grid > [class*="eleven wide widescreen"].column, .play-button.grid > .row > [class*="eleven wide widescreen"].column, .play-button.grid > .column.row > [class*="eleven wide widescreen"].column, .play-button.grid > [class*="eleven wide widescreen"].column, .play-button.column.grid > [class*="eleven wide widescreen"].column, .download-button.grid > .row > [class*="eleven wide widescreen"].column, .download-button.grid > .column.row > [class*="eleven wide widescreen"].column, .download-button.grid > [class*="eleven wide widescreen"].column, .download-button.column.grid > [class*="eleven wide widescreen"].column { width: 68.75% !important; } .ui.grid > .row > [class*="twelve wide widescreen"].column, .ui.grid > .column.row > [class*="twelve wide widescreen"].column, .ui.grid > [class*="twelve wide widescreen"].column, .ui.column.grid > [class*="twelve wide widescreen"].column, .play-button.grid > .row > [class*="twelve wide widescreen"].column, .play-button.grid > .column.row > [class*="twelve wide widescreen"].column, .play-button.grid > [class*="twelve wide widescreen"].column, .play-button.column.grid > [class*="twelve wide widescreen"].column, .download-button.grid > .row > [class*="twelve wide widescreen"].column, .download-button.grid > .column.row > [class*="twelve wide widescreen"].column, .download-button.grid > [class*="twelve wide widescreen"].column, .download-button.column.grid > [class*="twelve wide widescreen"].column { width: 75% !important; } .ui.grid > .row > [class*="thirteen wide widescreen"].column, .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, .ui.grid > [class*="thirteen wide widescreen"].column, .ui.column.grid > [class*="thirteen wide widescreen"].column, .play-button.grid > .row > [class*="thirteen wide widescreen"].column, .play-button.grid > .column.row > [class*="thirteen wide widescreen"].column, .play-button.grid > [class*="thirteen wide widescreen"].column, .play-button.column.grid > [class*="thirteen wide widescreen"].column, .download-button.grid > .row > [class*="thirteen wide widescreen"].column, .download-button.grid > .column.row > [class*="thirteen wide widescreen"].column, .download-button.grid > [class*="thirteen wide widescreen"].column, .download-button.column.grid > [class*="thirteen wide widescreen"].column { width: 81.25% !important; } .ui.grid > .row > [class*="fourteen wide widescreen"].column, .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, .ui.grid > [class*="fourteen wide widescreen"].column, .ui.column.grid > [class*="fourteen wide widescreen"].column, .play-button.grid > .row > [class*="fourteen wide widescreen"].column, .play-button.grid > .column.row > [class*="fourteen wide widescreen"].column, .play-button.grid > [class*="fourteen wide widescreen"].column, .play-button.column.grid > [class*="fourteen wide widescreen"].column, .download-button.grid > .row > [class*="fourteen wide widescreen"].column, .download-button.grid > .column.row > [class*="fourteen wide widescreen"].column, .download-button.grid > [class*="fourteen wide widescreen"].column, .download-button.column.grid > [class*="fourteen wide widescreen"].column { width: 87.5% !important; } .ui.grid > .row > [class*="fifteen wide widescreen"].column, .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, .ui.grid > [class*="fifteen wide widescreen"].column, .ui.column.grid > [class*="fifteen wide widescreen"].column, .play-button.grid > .row > [class*="fifteen wide widescreen"].column, .play-button.grid > .column.row > [class*="fifteen wide widescreen"].column, .play-button.grid > [class*="fifteen wide widescreen"].column, .play-button.column.grid > [class*="fifteen wide widescreen"].column, .download-button.grid > .row > [class*="fifteen wide widescreen"].column, .download-button.grid > .column.row > [class*="fifteen wide widescreen"].column, .download-button.grid > [class*="fifteen wide widescreen"].column, .download-button.column.grid > [class*="fifteen wide widescreen"].column { width: 93.75% !important; } .ui.grid > .row > [class*="sixteen wide widescreen"].column, .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, .ui.grid > [class*="sixteen wide widescreen"].column, .ui.column.grid > [class*="sixteen wide widescreen"].column, .play-button.grid > .row > [class*="sixteen wide widescreen"].column, .play-button.grid > .column.row > [class*="sixteen wide widescreen"].column, .play-button.grid > [class*="sixteen wide widescreen"].column, .play-button.column.grid > [class*="sixteen wide widescreen"].column, .download-button.grid > .row > [class*="sixteen wide widescreen"].column, .download-button.grid > .column.row > [class*="sixteen wide widescreen"].column, .download-button.grid > [class*="sixteen wide widescreen"].column, .download-button.column.grid > [class*="sixteen wide widescreen"].column { width: 100% !important; } } /*---------------------- Centered -----------------------*/ .ui.centered.grid, .ui.centered.grid > .row, .ui.grid > .centered.row, .play-button.centered.grid, .play-button.centered.grid > .row, .play-button.grid > .centered.row, .download-button.centered.grid, .download-button.centered.grid > .row, .download-button.grid > .centered.row { text-align: center; justify-content: center; } .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), .ui.centered.grid > .row > .column:not(.aligned):not(.justified), .ui.grid .centered.row > .column:not(.aligned):not(.justified), .play-button.centered.grid > .column:not(.aligned):not(.justified):not(.row), .play-button.centered.grid > .row > .column:not(.aligned):not(.justified), .play-button.grid .centered.row > .column:not(.aligned):not(.justified), .download-button.centered.grid > .column:not(.aligned):not(.justified):not(.row), .download-button.centered.grid > .row > .column:not(.aligned):not(.justified), .download-button.grid .centered.row > .column:not(.aligned):not(.justified) { text-align: left; } .ui.grid > .centered.column, .ui.grid > .row > .centered.column, .play-button.grid > .centered.column, .play-button.grid > .row > .centered.column, .download-button.grid > .centered.column, .download-button.grid > .row > .centered.column { display: block; margin-left: auto; margin-right: auto; } /*---------------------- Relaxed -----------------------*/ .ui.relaxed.grid > .column:not(.row), .ui.relaxed.grid > .row > .column, .ui.grid > .relaxed.row > .column, .play-button.relaxed.grid > .column:not(.row), .play-button.relaxed.grid > .row > .column, .play-button.grid > .relaxed.row > .column, .download-button.relaxed.grid > .column:not(.row), .download-button.relaxed.grid > .row > .column, .download-button.grid > .relaxed.row > .column { padding-left: 1.5rem; padding-right: 1.5rem; } .ui[class*="very relaxed"].grid > .column:not(.row), .ui[class*="very relaxed"].grid > .row > .column, .ui.grid > [class*="very relaxed"].row > .column, .play-button[class*="very relaxed"].grid > .column:not(.row), .play-button[class*="very relaxed"].grid > .row > .column, .play-button.grid > [class*="very relaxed"].row > .column, .download-button[class*="very relaxed"].grid > .column:not(.row), .download-button[class*="very relaxed"].grid > .row > .column, .download-button.grid > [class*="very relaxed"].row > .column { padding-left: 2.5rem; padding-right: 2.5rem; } /* Coupling with UI Divider */ .ui.relaxed.grid .row + .ui.divider, .ui.grid .relaxed.row + .ui.divider, .play-button.relaxed.grid .row + .play-button.divider, .play-button.grid .relaxed.row + .play-button.divider, .download-button.relaxed.grid .row + .download-button.divider, .download-button.grid .relaxed.row + .download-button.divider { margin-left: 1.5rem; margin-right: 1.5rem; } .ui[class*="very relaxed"].grid .row + .ui.divider, .ui.grid [class*="very relaxed"].row + .ui.divider, .play-button[class*="very relaxed"].grid .row + .play-button.divider, .play-button.grid [class*="very relaxed"].row + .play-button.divider, .download-button[class*="very relaxed"].grid .row + .download-button.divider, .download-button.grid [class*="very relaxed"].row + .download-button.divider { margin-left: 2.5rem; margin-right: 2.5rem; } /*---------------------- Padded -----------------------*/ .ui.padded.grid:not(.vertically):not(.horizontally), .play-button.padded.grid:not(.vertically):not(.horizontally), .download-button.padded.grid:not(.vertically):not(.horizontally) { margin: 0em !important; } [class*="horizontally padded"].ui.grid, [class*="horizontally padded"].play-button.grid, [class*="horizontally padded"].download-button.grid { margin-left: 0em !important; margin-right: 0em !important; } [class*="vertically padded"].ui.grid, [class*="vertically padded"].play-button.grid, [class*="vertically padded"].download-button.grid { margin-top: 0em !important; margin-bottom: 0em !important; } /*---------------------- "Floated" -----------------------*/ .ui.grid [class*="left floated"].column, .play-button.grid [class*="left floated"].column, .download-button.grid [class*="left floated"].column { margin-right: auto; } .ui.grid [class*="right floated"].column, .play-button.grid [class*="right floated"].column, .download-button.grid [class*="right floated"].column { margin-left: auto; } /*---------------------- Divided -----------------------*/ .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .ui.divided.grid:not([class*="vertically divided"]) > .row > .column, .play-button.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .play-button.divided.grid:not([class*="vertically divided"]) > .row > .column, .download-button.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .download-button.divided.grid:not([class*="vertically divided"]) > .row > .column { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } /* Swap from padding to margin on columns to have dividers align */ .ui[class*="vertically divided"].grid > .column:not(.row), .ui[class*="vertically divided"].grid > .row > .column, .play-button[class*="vertically divided"].grid > .column:not(.row), .play-button[class*="vertically divided"].grid > .row > .column, .download-button[class*="vertically divided"].grid > .column:not(.row), .download-button[class*="vertically divided"].grid > .row > .column { margin-top: 1rem; margin-bottom: 1rem; padding-top: 0rem; padding-bottom: 0rem; } .ui[class*="vertically divided"].grid > .row, .play-button[class*="vertically divided"].grid > .row, .download-button[class*="vertically divided"].grid > .row { margin-top: 0em; margin-bottom: 0em; } /* No divider on first column on row */ .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .play-button.divided.grid:not([class*="vertically divided"]) > .column:first-child, .play-button.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .download-button.divided.grid:not([class*="vertically divided"]) > .column:first-child, .download-button.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: none; } /* No space on top of first row */ .ui[class*="vertically divided"].grid > .row:first-child > .column, .play-button[class*="vertically divided"].grid > .row:first-child > .column, .download-button[class*="vertically divided"].grid > .row:first-child > .column { margin-top: 0em; } /* Divided Row */ .ui.grid > .divided.row > .column, .play-button.grid > .divided.row > .column, .download-button.grid > .divided.row > .column { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid > .divided.row > .column:first-child, .play-button.grid > .divided.row > .column:first-child, .download-button.grid > .divided.row > .column:first-child { box-shadow: none; } /* Vertically Divided */ .ui[class*="vertically divided"].grid > .row, .play-button[class*="vertically divided"].grid > .row, .download-button[class*="vertically divided"].grid > .row { position: relative; } .ui[class*="vertically divided"].grid > .row:before, .play-button[class*="vertically divided"].grid > .row:before, .download-button[class*="vertically divided"].grid > .row:before { position: absolute; content: ""; top: 0em; left: 0px; width: calc(100% - 2rem ); height: 1px; margin: 0% 1rem; box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } /* Padded Horizontally Divided */ [class*="horizontally padded"].ui.divided.grid, .ui.padded.divided.grid:not(.vertically):not(.horizontally), [class*="horizontally padded"].play-button.divided.grid, .play-button.padded.divided.grid:not(.vertically):not(.horizontally), [class*="horizontally padded"].download-button.divided.grid, .download-button.padded.divided.grid:not(.vertically):not(.horizontally) { width: 100%; } /* First Row Vertically Divided */ .ui[class*="vertically divided"].grid > .row:first-child:before, .play-button[class*="vertically divided"].grid > .row:first-child:before, .download-button[class*="vertically divided"].grid > .row:first-child:before { box-shadow: none; } /* Inverted Divided */ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column, .play-button.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .play-button.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column, .download-button.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), .download-button.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1); } .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .play-button.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, .play-button.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .download-button.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, .download-button.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: none; } .ui.inverted[class*="vertically divided"].grid > .row:before, .play-button.inverted[class*="vertically divided"].grid > .row:before, .download-button.inverted[class*="vertically divided"].grid > .row:before { box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1); } /* Relaxed */ .ui.relaxed[class*="vertically divided"].grid > .row:before, .play-button.relaxed[class*="vertically divided"].grid > .row:before, .download-button.relaxed[class*="vertically divided"].grid > .row:before { margin-left: 1.5rem; margin-right: 1.5rem; width: calc(100% - 3rem ); } .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before, .play-button[class*="very relaxed"][class*="vertically divided"].grid > .row:before, .download-button[class*="very relaxed"][class*="vertically divided"].grid > .row:before { margin-left: 5rem; margin-right: 5rem; width: calc(100% - 5rem ); } /*---------------------- Celled -----------------------*/ .ui.celled.grid, .play-button.celled.grid, .download-button.celled.grid { width: 100%; margin: 1em 0em; box-shadow: 0px 0px 0px 1px #D4D4D5; } .ui.celled.grid > .row, .play-button.celled.grid > .row, .download-button.celled.grid > .row { width: 100% !important; margin: 0em; padding: 0em; box-shadow: 0px -1px 0px 0px #D4D4D5; } .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column, .play-button.celled.grid > .column:not(.row), .play-button.celled.grid > .row > .column, .download-button.celled.grid > .column:not(.row), .download-button.celled.grid > .row > .column { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui.celled.grid > .column:first-child, .ui.celled.grid > .row > .column:first-child, .play-button.celled.grid > .column:first-child, .play-button.celled.grid > .row > .column:first-child, .download-button.celled.grid > .column:first-child, .download-button.celled.grid > .row > .column:first-child { box-shadow: none; } .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column, .play-button.celled.grid > .column:not(.row), .play-button.celled.grid > .row > .column, .download-button.celled.grid > .column:not(.row), .download-button.celled.grid > .row > .column { padding: 1em; } .ui.relaxed.celled.grid > .column:not(.row), .ui.relaxed.celled.grid > .row > .column, .play-button.relaxed.celled.grid > .column:not(.row), .play-button.relaxed.celled.grid > .row > .column, .download-button.relaxed.celled.grid > .column:not(.row), .download-button.relaxed.celled.grid > .row > .column { padding: 1.5em; } .ui[class*="very relaxed"].celled.grid > .column:not(.row), .ui[class*="very relaxed"].celled.grid > .row > .column, .play-button[class*="very relaxed"].celled.grid > .column:not(.row), .play-button[class*="very relaxed"].celled.grid > .row > .column, .download-button[class*="very relaxed"].celled.grid > .column:not(.row), .download-button[class*="very relaxed"].celled.grid > .row > .column { padding: 2em; } /* Internally Celled */ .ui[class*="internally celled"].grid, .play-button[class*="internally celled"].grid, .download-button[class*="internally celled"].grid { box-shadow: none; margin: 0em; } .ui[class*="internally celled"].grid > .row:first-child, .play-button[class*="internally celled"].grid > .row:first-child, .download-button[class*="internally celled"].grid > .row:first-child { box-shadow: none; } .ui[class*="internally celled"].grid > .row > .column:first-child, .play-button[class*="internally celled"].grid > .row > .column:first-child, .download-button[class*="internally celled"].grid > .row > .column:first-child { box-shadow: none; } /*---------------------- Vertically Aligned -----------------------*/ /* Top Aligned */ .ui[class*="top aligned"].grid > .column:not(.row), .ui[class*="top aligned"].grid > .row > .column, .ui.grid > [class*="top aligned"].row > .column, .ui.grid > [class*="top aligned"].column:not(.row), .ui.grid > .row > [class*="top aligned"].column, .play-button[class*="top aligned"].grid > .column:not(.row), .play-button[class*="top aligned"].grid > .row > .column, .play-button.grid > [class*="top aligned"].row > .column, .play-button.grid > [class*="top aligned"].column:not(.row), .play-button.grid > .row > [class*="top aligned"].column, .download-button[class*="top aligned"].grid > .column:not(.row), .download-button[class*="top aligned"].grid > .row > .column, .download-button.grid > [class*="top aligned"].row > .column, .download-button.grid > [class*="top aligned"].column:not(.row), .download-button.grid > .row > [class*="top aligned"].column { flex-direction: column; vertical-align: top; align-self: flex-start !important; } /* Middle Aligned */ .ui[class*="middle aligned"].grid > .column:not(.row), .ui[class*="middle aligned"].grid > .row > .column, .ui.grid > [class*="middle aligned"].row > .column, .ui.grid > [class*="middle aligned"].column:not(.row), .ui.grid > .row > [class*="middle aligned"].column, .play-button[class*="middle aligned"].grid > .column:not(.row), .play-button[class*="middle aligned"].grid > .row > .column, .play-button.grid > [class*="middle aligned"].row > .column, .play-button.grid > [class*="middle aligned"].column:not(.row), .play-button.grid > .row > [class*="middle aligned"].column, .download-button[class*="middle aligned"].grid > .column:not(.row), .download-button[class*="middle aligned"].grid > .row > .column, .download-button.grid > [class*="middle aligned"].row > .column, .download-button.grid > [class*="middle aligned"].column:not(.row), .download-button.grid > .row > [class*="middle aligned"].column { flex-direction: column; vertical-align: middle; align-self: center !important; } /* Bottom Aligned */ .ui[class*="bottom aligned"].grid > .column:not(.row), .ui[class*="bottom aligned"].grid > .row > .column, .ui.grid > [class*="bottom aligned"].row > .column, .ui.grid > [class*="bottom aligned"].column:not(.row), .ui.grid > .row > [class*="bottom aligned"].column, .play-button[class*="bottom aligned"].grid > .column:not(.row), .play-button[class*="bottom aligned"].grid > .row > .column, .play-button.grid > [class*="bottom aligned"].row > .column, .play-button.grid > [class*="bottom aligned"].column:not(.row), .play-button.grid > .row > [class*="bottom aligned"].column, .download-button[class*="bottom aligned"].grid > .column:not(.row), .download-button[class*="bottom aligned"].grid > .row > .column, .download-button.grid > [class*="bottom aligned"].row > .column, .download-button.grid > [class*="bottom aligned"].column:not(.row), .download-button.grid > .row > [class*="bottom aligned"].column { flex-direction: column; vertical-align: bottom; align-self: flex-end !important; } /* Stretched */ .ui.stretched.grid > .row > .column, .ui.stretched.grid > .column, .ui.grid > .stretched.row > .column, .ui.grid > .stretched.column:not(.row), .ui.grid > .row > .stretched.column, .play-button.stretched.grid > .row > .column, .play-button.stretched.grid > .column, .play-button.grid > .stretched.row > .column, .play-button.grid > .stretched.column:not(.row), .play-button.grid > .row > .stretched.column, .download-button.stretched.grid > .row > .column, .download-button.stretched.grid > .column, .download-button.grid > .stretched.row > .column, .download-button.grid > .stretched.column:not(.row), .download-button.grid > .row > .stretched.column { display: inline-flex !important; align-self: stretch; flex-direction: column; } .ui.stretched.grid > .row > .column > *, .ui.stretched.grid > .column > *, .ui.grid > .stretched.row > .column > *, .ui.grid > .stretched.column:not(.row) > *, .ui.grid > .row > .stretched.column > *, .play-button.stretched.grid > .row > .column > *, .play-button.stretched.grid > .column > *, .play-button.grid > .stretched.row > .column > *, .play-button.grid > .stretched.column:not(.row) > *, .play-button.grid > .row > .stretched.column > *, .download-button.stretched.grid > .row > .column > *, .download-button.stretched.grid > .column > *, .download-button.grid > .stretched.row > .column > *, .download-button.grid > .stretched.column:not(.row) > *, .download-button.grid > .row > .stretched.column > * { flex-grow: 1; } /*---------------------- Horizontally Centered -----------------------*/ /* Left Aligned */ .ui[class*="left aligned"].grid > .column, .ui[class*="left aligned"].grid > .row > .column, .ui.grid > [class*="left aligned"].row > .column, .ui.grid > [class*="left aligned"].column.column, .ui.grid > .row > [class*="left aligned"].column.column, .play-button[class*="left aligned"].grid > .column, .play-button[class*="left aligned"].grid > .row > .column, .play-button.grid > [class*="left aligned"].row > .column, .play-button.grid > [class*="left aligned"].column.column, .play-button.grid > .row > [class*="left aligned"].column.column, .download-button[class*="left aligned"].grid > .column, .download-button[class*="left aligned"].grid > .row > .column, .download-button.grid > [class*="left aligned"].row > .column, .download-button.grid > [class*="left aligned"].column.column, .download-button.grid > .row > [class*="left aligned"].column.column { text-align: left; align-self: inherit; } /* Center Aligned */ .ui[class*="center aligned"].grid > .column, .ui[class*="center aligned"].grid > .row > .column, .ui.grid > [class*="center aligned"].row > .column, .ui.grid > [class*="center aligned"].column.column, .ui.grid > .row > [class*="center aligned"].column.column, .play-button[class*="center aligned"].grid > .column, .play-button[class*="center aligned"].grid > .row > .column, .play-button.grid > [class*="center aligned"].row > .column, .play-button.grid > [class*="center aligned"].column.column, .play-button.grid > .row > [class*="center aligned"].column.column, .download-button[class*="center aligned"].grid > .column, .download-button[class*="center aligned"].grid > .row > .column, .download-button.grid > [class*="center aligned"].row > .column, .download-button.grid > [class*="center aligned"].column.column, .download-button.grid > .row > [class*="center aligned"].column.column { text-align: center; align-self: inherit; } .ui[class*="center aligned"].grid, .play-button[class*="center aligned"].grid, .download-button[class*="center aligned"].grid { justify-content: center; } /* Right Aligned */ .ui[class*="right aligned"].grid > .column, .ui[class*="right aligned"].grid > .row > .column, .ui.grid > [class*="right aligned"].row > .column, .ui.grid > [class*="right aligned"].column.column, .ui.grid > .row > [class*="right aligned"].column.column, .play-button[class*="right aligned"].grid > .column, .play-button[class*="right aligned"].grid > .row > .column, .play-button.grid > [class*="right aligned"].row > .column, .play-button.grid > [class*="right aligned"].column.column, .play-button.grid > .row > [class*="right aligned"].column.column, .download-button[class*="right aligned"].grid > .column, .download-button[class*="right aligned"].grid > .row > .column, .download-button.grid > [class*="right aligned"].row > .column, .download-button.grid > [class*="right aligned"].column.column, .download-button.grid > .row > [class*="right aligned"].column.column { text-align: right; align-self: inherit; } /* Justified */ .ui.justified.grid > .column, .ui.justified.grid > .row > .column, .ui.grid > .justified.row > .column, .ui.grid > .justified.column.column, .ui.grid > .row > .justified.column.column, .play-button.justified.grid > .column, .play-button.justified.grid > .row > .column, .play-button.grid > .justified.row > .column, .play-button.grid > .justified.column.column, .play-button.grid > .row > .justified.column.column, .download-button.justified.grid > .column, .download-button.justified.grid > .row > .column, .download-button.grid > .justified.row > .column, .download-button.grid > .justified.column.column, .download-button.grid > .row > .justified.column.column { text-align: justify; hyphens: auto; } /*---------------------- Colored -----------------------*/ .ui.grid > .row > .red.column, .ui.grid > .row > .orange.column, .ui.grid > .row > .yellow.column, .ui.grid > .row > .olive.column, .ui.grid > .row > .green.column, .ui.grid > .row > .teal.column, .ui.grid > .row > .blue.column, .ui.grid > .row > .violet.column, .ui.grid > .row > .purple.column, .ui.grid > .row > .pink.column, .ui.grid > .row > .brown.column, .ui.grid > .row > .grey.column, .ui.grid > .row > .black.column, .ui.grid > .row > .ui.button.editortools-btn.column, .ui.grid > .row > .ui.button.getting-started-btn.column, .play-button.grid > .row > .red.column, .play-button.grid > .row > .orange.column, .play-button.grid > .row > .yellow.column, .play-button.grid > .row > .olive.column, .play-button.grid > .row > .green.column, .play-button.grid > .row > .teal.column, .play-button.grid > .row > .blue.column, .play-button.grid > .row > .violet.column, .play-button.grid > .row > .purple.column, .play-button.grid > .row > .pink.column, .play-button.grid > .row > .brown.column, .play-button.grid > .row > .grey.column, .play-button.grid > .row > .black.column, .ui.grid > .row > .play-button.column, .download-button.grid > .row > .red.column, .download-button.grid > .row > .orange.column, .download-button.grid > .row > .yellow.column, .download-button.grid > .row > .olive.column, .download-button.grid > .row > .green.column, .download-button.grid > .row > .teal.column, .download-button.grid > .row > .blue.column, .download-button.grid > .row > .violet.column, .download-button.grid > .row > .purple.column, .download-button.grid > .row > .pink.column, .download-button.grid > .row > .brown.column, .download-button.grid > .row > .grey.column, .download-button.grid > .row > .black.column, .ui.grid > .row > .download-button.column, .ui.grid > .row > .play-button.button.editortools-btn.column, .ui.grid > .row > .play-button.button.getting-started-btn.column, .ui.grid > .row > .ui.play-button.editortools-btn.column, .ui.grid > .row > .ui.play-button.getting-started-btn.column, .ui.grid > .row > .download-button.button.editortools-btn.column, .ui.grid > .row > .download-button.button.getting-started-btn.column, .ui.grid > .row > .ui.download-button.editortools-btn.column, .ui.grid > .row > .ui.download-button.getting-started-btn.column { margin-top: -1rem; margin-bottom: -1rem; padding-top: 1rem; padding-bottom: 1rem; } /* Red */ .ui.grid > .red.row, .ui.grid > .red.column, .ui.grid > .row > .red.column, .play-button.grid > .red.row, .play-button.grid > .red.column, .play-button.grid > .row > .red.column, .download-button.grid > .red.row, .download-button.grid > .red.column, .download-button.grid > .row > .red.column { background-color: #E81123 !important; color: #FFFFFF; } /* Orange */ .ui.grid > .orange.row, .ui.grid > .orange.column, .ui.grid > .row > .orange.column, .play-button.grid > .orange.row, .play-button.grid > .orange.column, .play-button.grid > .row > .orange.column, .download-button.grid > .orange.row, .download-button.grid > .orange.column, .download-button.grid > .row > .orange.column { background-color: #DF4600 !important; color: #FFFFFF; } /* Yellow */ .ui.grid > .yellow.row, .ui.grid > .yellow.column, .ui.grid > .row > .yellow.column, .play-button.grid > .yellow.row, .play-button.grid > .yellow.column, .play-button.grid > .row > .yellow.column, .download-button.grid > .yellow.row, .download-button.grid > .yellow.column, .download-button.grid > .row > .yellow.column, .ui.grid > .download-button.row, .ui.grid > .download-button.column, .ui.grid > .row > .download-button.column { background-color: #F4C918 !important; color: #FFFFFF; } /* Olive */ .ui.grid > .olive.row, .ui.grid > .olive.column, .ui.grid > .row > .olive.column, .play-button.grid > .olive.row, .play-button.grid > .olive.column, .play-button.grid > .row > .olive.column, .download-button.grid > .olive.row, .download-button.grid > .olive.column, .download-button.grid > .row > .olive.column { background-color: #B5CC18 !important; color: #FFFFFF; } /* Green */ .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column, .ui.grid > .ui.button.getting-started-btn.row, .ui.grid > .ui.button.getting-started-btn.column, .ui.grid > .row > .ui.button.getting-started-btn.column, .play-button.grid > .green.row, .play-button.grid > .green.column, .play-button.grid > .row > .green.column, .download-button.grid > .green.row, .download-button.grid > .green.column, .download-button.grid > .row > .green.column, .ui.grid > .play-button.button.getting-started-btn.row, .ui.grid > .play-button.button.getting-started-btn.column, .ui.grid > .row > .play-button.button.getting-started-btn.column, .ui.grid > .ui.play-button.getting-started-btn.row, .ui.grid > .ui.play-button.getting-started-btn.column, .ui.grid > .row > .ui.play-button.getting-started-btn.column, .ui.grid > .download-button.button.getting-started-btn.row, .ui.grid > .download-button.button.getting-started-btn.column, .ui.grid > .row > .download-button.button.getting-started-btn.column, .ui.grid > .ui.download-button.getting-started-btn.row, .ui.grid > .ui.download-button.getting-started-btn.column, .ui.grid > .row > .ui.download-button.getting-started-btn.column { background-color: #3FC863 !important; color: #FFFFFF; } /* Teal */ .ui.grid > .teal.row, .ui.grid > .teal.column, .ui.grid > .row > .teal.column, .play-button.grid > .teal.row, .play-button.grid > .teal.column, .play-button.grid > .row > .teal.column, .download-button.grid > .teal.row, .download-button.grid > .teal.column, .download-button.grid > .row > .teal.column { background-color: #008272 !important; color: #FFFFFF; } /* Blue */ .ui.grid > .blue.row, .ui.grid > .blue.column, .ui.grid > .row > .blue.column, .play-button.grid > .blue.row, .play-button.grid > .blue.column, .play-button.grid > .row > .blue.column, .ui.grid > .play-button.row, .ui.grid > .play-button.column, .ui.grid > .row > .play-button.column, .download-button.grid > .blue.row, .download-button.grid > .blue.column, .download-button.grid > .row > .blue.column { background-color: #54C9C9 !important; color: #FFFFFF; } /* Violet */ .ui.grid > .violet.row, .ui.grid > .violet.column, .ui.grid > .row > .violet.column, .play-button.grid > .violet.row, .play-button.grid > .violet.column, .play-button.grid > .row > .violet.column, .download-button.grid > .violet.row, .download-button.grid > .violet.column, .download-button.grid > .row > .violet.column { background-color: #C90072 !important; color: #FFFFFF; } /* Purple */ .ui.grid > .purple.row, .ui.grid > .purple.column, .ui.grid > .row > .purple.column, .play-button.grid > .purple.row, .play-button.grid > .purple.column, .play-button.grid > .row > .purple.column, .download-button.grid > .purple.row, .download-button.grid > .purple.column, .download-button.grid > .row > .purple.column { background-color: #8169E6 !important; color: #FFFFFF; } /* Pink */ .ui.grid > .pink.row, .ui.grid > .pink.column, .ui.grid > .row > .pink.column, .play-button.grid > .pink.row, .play-button.grid > .pink.column, .play-button.grid > .row > .pink.column, .download-button.grid > .pink.row, .download-button.grid > .pink.column, .download-button.grid > .row > .pink.column { background-color: #E2008C !important; color: #FFFFFF; } /* Brown */ .ui.grid > .brown.row, .ui.grid > .brown.column, .ui.grid > .row > .brown.column, .play-button.grid > .brown.row, .play-button.grid > .brown.column, .play-button.grid > .row > .brown.column, .download-button.grid > .brown.row, .download-button.grid > .brown.column, .download-button.grid > .row > .brown.column { background-color: #6B5B4C !important; color: #FFFFFF; } /* Grey */ .ui.grid > .grey.row, .ui.grid > .grey.column, .ui.grid > .row > .grey.column, .ui.grid > .ui.button.editortools-btn.row, .ui.grid > .ui.button.editortools-btn.column, .ui.grid > .row > .ui.button.editortools-btn.column, .play-button.grid > .grey.row, .play-button.grid > .grey.column, .play-button.grid > .row > .grey.column, .download-button.grid > .grey.row, .download-button.grid > .grey.column, .download-button.grid > .row > .grey.column, .ui.grid > .play-button.button.editortools-btn.row, .ui.grid > .play-button.button.editortools-btn.column, .ui.grid > .row > .play-button.button.editortools-btn.column, .ui.grid > .ui.play-button.editortools-btn.row, .ui.grid > .ui.play-button.editortools-btn.column, .ui.grid > .row > .ui.play-button.editortools-btn.column, .ui.grid > .download-button.button.editortools-btn.row, .ui.grid > .download-button.button.editortools-btn.column, .ui.grid > .row > .download-button.button.editortools-btn.column, .ui.grid > .ui.download-button.editortools-btn.row, .ui.grid > .ui.download-button.editortools-btn.column, .ui.grid > .row > .ui.download-button.editortools-btn.column { background-color: #42495F !important; color: #FFFFFF; } /* Black */ .ui.grid > .black.row, .ui.grid > .black.column, .ui.grid > .row > .black.column, .play-button.grid > .black.row, .play-button.grid > .black.column, .play-button.grid > .row > .black.column, .download-button.grid > .black.row, .download-button.grid > .black.column, .download-button.grid > .row > .black.column { background-color: #1B1C1D !important; color: #FFFFFF; } /*---------------------- Equal Width -----------------------*/ .ui[class*="equal width"].grid > .column:not(.row), .ui[class*="equal width"].grid > .row > .column, .ui.grid > [class*="equal width"].row > .column, .play-button[class*="equal width"].grid > .column:not(.row), .play-button[class*="equal width"].grid > .row > .column, .play-button.grid > [class*="equal width"].row > .column, .download-button[class*="equal width"].grid > .column:not(.row), .download-button[class*="equal width"].grid > .row > .column, .download-button.grid > [class*="equal width"].row > .column { display: inline-block; flex-grow: 1; } .ui[class*="equal width"].grid > .wide.column, .ui[class*="equal width"].grid > .row > .wide.column, .ui.grid > [class*="equal width"].row > .wide.column, .play-button[class*="equal width"].grid > .wide.column, .play-button[class*="equal width"].grid > .row > .wide.column, .play-button.grid > [class*="equal width"].row > .wide.column, .download-button[class*="equal width"].grid > .wide.column, .download-button[class*="equal width"].grid > .row > .wide.column, .download-button.grid > [class*="equal width"].row > .wide.column { flex-grow: 0; } /*---------------------- Reverse -----------------------*/ /* Mobile */ @media only screen and (max-width: 767px) { .ui[class*="mobile reversed"].grid, .ui[class*="mobile reversed"].grid > .row, .ui.grid > [class*="mobile reversed"].row, .play-button[class*="mobile reversed"].grid, .play-button[class*="mobile reversed"].grid > .row, .play-button.grid > [class*="mobile reversed"].row, .download-button[class*="mobile reversed"].grid, .download-button[class*="mobile reversed"].grid > .row, .download-button.grid > [class*="mobile reversed"].row { flex-direction: row-reverse; } .ui[class*="mobile vertically reversed"].grid, .ui.stackable[class*="mobile reversed"], .play-button[class*="mobile vertically reversed"].grid, .play-button.stackable[class*="mobile reversed"], .download-button[class*="mobile vertically reversed"].grid, .download-button.stackable[class*="mobile reversed"] { flex-direction: column-reverse; } /* Divided Reversed */ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .play-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .play-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .download-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .download-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child, .play-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .play-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child, .download-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .download-button[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before, .play-button.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before, .download-button.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before, .play-button.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before, .download-button.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { box-shadow: none; } /* Celled Reversed */ .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child, .play-button[class*="mobile reversed"].celled.grid > .row > .column:first-child, .download-button[class*="mobile reversed"].celled.grid > .row > .column:first-child { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child, .play-button[class*="mobile reversed"].celled.grid > .row > .column:last-child, .download-button[class*="mobile reversed"].celled.grid > .row > .column:last-child { box-shadow: none; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui[class*="tablet reversed"].grid, .ui[class*="tablet reversed"].grid > .row, .ui.grid > [class*="tablet reversed"].row, .play-button[class*="tablet reversed"].grid, .play-button[class*="tablet reversed"].grid > .row, .play-button.grid > [class*="tablet reversed"].row, .download-button[class*="tablet reversed"].grid, .download-button[class*="tablet reversed"].grid > .row, .download-button.grid > [class*="tablet reversed"].row { flex-direction: row-reverse; } .ui[class*="tablet vertically reversed"].grid, .play-button[class*="tablet vertically reversed"].grid, .download-button[class*="tablet vertically reversed"].grid { flex-direction: column-reverse; } /* Divided Reversed */ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .play-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .play-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .download-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .download-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child, .play-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .play-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child, .download-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .download-button[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before, .play-button.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before, .download-button.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before, .play-button.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before, .download-button.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { box-shadow: none; } /* Celled Reversed */ .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child, .play-button[class*="tablet reversed"].celled.grid > .row > .column:first-child, .download-button[class*="tablet reversed"].celled.grid > .row > .column:first-child { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child, .play-button[class*="tablet reversed"].celled.grid > .row > .column:last-child, .download-button[class*="tablet reversed"].celled.grid > .row > .column:last-child { box-shadow: none; } } /* Computer */ @media only screen and (min-width: 992px) { .ui[class*="computer reversed"].grid, .ui[class*="computer reversed"].grid > .row, .ui.grid > [class*="computer reversed"].row, .play-button[class*="computer reversed"].grid, .play-button[class*="computer reversed"].grid > .row, .play-button.grid > [class*="computer reversed"].row, .download-button[class*="computer reversed"].grid, .download-button[class*="computer reversed"].grid > .row, .download-button.grid > [class*="computer reversed"].row { flex-direction: row-reverse; } .ui[class*="computer vertically reversed"].grid, .play-button[class*="computer vertically reversed"].grid, .download-button[class*="computer vertically reversed"].grid { flex-direction: column-reverse; } /* Divided Reversed */ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .play-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .play-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child, .download-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, .download-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); } .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child, .play-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .play-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child, .download-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, .download-button[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before, .play-button.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before, .download-button.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before, .play-button.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before, .download-button.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { box-shadow: none; } /* Celled Reversed */ .ui[class*="computer reversed"].celled.grid > .row > .column:first-child, .play-button[class*="computer reversed"].celled.grid > .row > .column:first-child, .download-button[class*="computer reversed"].celled.grid > .row > .column:first-child { box-shadow: -1px 0px 0px 0px #D4D4D5; } .ui[class*="computer reversed"].celled.grid > .row > .column:last-child, .play-button[class*="computer reversed"].celled.grid > .row > .column:last-child, .download-button[class*="computer reversed"].celled.grid > .row > .column:last-child { box-shadow: none; } } /*------------------- Doubling --------------------*/ /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.doubling.grid, .play-button.doubling.grid, .download-button.doubling.grid { width: auto; } .ui.grid > .doubling.row, .ui.doubling.grid > .row, .play-button.grid > .doubling.row, .play-button.doubling.grid > .row, .download-button.grid > .doubling.row, .download-button.doubling.grid > .row { margin: 0em !important; padding: 0em !important; } .ui.grid > .doubling.row > .column, .ui.doubling.grid > .row > .column, .play-button.grid > .doubling.row > .column, .play-button.doubling.grid > .row > .column, .download-button.grid > .doubling.row > .column, .download-button.doubling.grid > .row > .column { display: inline-block !important; padding-top: 1rem !important; padding-bottom: 1rem !important; box-shadow: none !important; margin: 0em; } .ui[class*="two column"].doubling.grid > .row > .column, .ui[class*="two column"].doubling.grid > .column:not(.row), .ui.grid > [class*="two column"].doubling.row.row > .column, .play-button[class*="two column"].doubling.grid > .row > .column, .play-button[class*="two column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="two column"].doubling.row.row > .column, .download-button[class*="two column"].doubling.grid > .row > .column, .download-button[class*="two column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="two column"].doubling.row.row > .column { width: 100% !important; } .ui[class*="three column"].doubling.grid > .row > .column, .ui[class*="three column"].doubling.grid > .column:not(.row), .ui.grid > [class*="three column"].doubling.row.row > .column, .play-button[class*="three column"].doubling.grid > .row > .column, .play-button[class*="three column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="three column"].doubling.row.row > .column, .download-button[class*="three column"].doubling.grid > .row > .column, .download-button[class*="three column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="three column"].doubling.row.row > .column { width: 50% !important; } .ui[class*="four column"].doubling.grid > .row > .column, .ui[class*="four column"].doubling.grid > .column:not(.row), .ui.grid > [class*="four column"].doubling.row.row > .column, .play-button[class*="four column"].doubling.grid > .row > .column, .play-button[class*="four column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="four column"].doubling.row.row > .column, .download-button[class*="four column"].doubling.grid > .row > .column, .download-button[class*="four column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="four column"].doubling.row.row > .column { width: 50% !important; } .ui[class*="five column"].doubling.grid > .row > .column, .ui[class*="five column"].doubling.grid > .column:not(.row), .ui.grid > [class*="five column"].doubling.row.row > .column, .play-button[class*="five column"].doubling.grid > .row > .column, .play-button[class*="five column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="five column"].doubling.row.row > .column, .download-button[class*="five column"].doubling.grid > .row > .column, .download-button[class*="five column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="five column"].doubling.row.row > .column { width: 33.33333333% !important; } .ui[class*="six column"].doubling.grid > .row > .column, .ui[class*="six column"].doubling.grid > .column:not(.row), .ui.grid > [class*="six column"].doubling.row.row > .column, .play-button[class*="six column"].doubling.grid > .row > .column, .play-button[class*="six column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="six column"].doubling.row.row > .column, .download-button[class*="six column"].doubling.grid > .row > .column, .download-button[class*="six column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="six column"].doubling.row.row > .column { width: 33.33333333% !important; } .ui[class*="seven column"].doubling.grid > .row > .column, .ui[class*="seven column"].doubling.grid > .column:not(.row), .ui.grid > [class*="seven column"].doubling.row.row > .column, .play-button[class*="seven column"].doubling.grid > .row > .column, .play-button[class*="seven column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="seven column"].doubling.row.row > .column, .download-button[class*="seven column"].doubling.grid > .row > .column, .download-button[class*="seven column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="seven column"].doubling.row.row > .column { width: 33.33333333% !important; } .ui[class*="eight column"].doubling.grid > .row > .column, .ui[class*="eight column"].doubling.grid > .column:not(.row), .ui.grid > [class*="eight column"].doubling.row.row > .column, .play-button[class*="eight column"].doubling.grid > .row > .column, .play-button[class*="eight column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="eight column"].doubling.row.row > .column, .download-button[class*="eight column"].doubling.grid > .row > .column, .download-button[class*="eight column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="eight column"].doubling.row.row > .column { width: 25% !important; } .ui[class*="nine column"].doubling.grid > .row > .column, .ui[class*="nine column"].doubling.grid > .column:not(.row), .ui.grid > [class*="nine column"].doubling.row.row > .column, .play-button[class*="nine column"].doubling.grid > .row > .column, .play-button[class*="nine column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="nine column"].doubling.row.row > .column, .download-button[class*="nine column"].doubling.grid > .row > .column, .download-button[class*="nine column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="nine column"].doubling.row.row > .column { width: 25% !important; } .ui[class*="ten column"].doubling.grid > .row > .column, .ui[class*="ten column"].doubling.grid > .column:not(.row), .ui.grid > [class*="ten column"].doubling.row.row > .column, .play-button[class*="ten column"].doubling.grid > .row > .column, .play-button[class*="ten column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="ten column"].doubling.row.row > .column, .download-button[class*="ten column"].doubling.grid > .row > .column, .download-button[class*="ten column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="ten column"].doubling.row.row > .column { width: 20% !important; } .ui[class*="eleven column"].doubling.grid > .row > .column, .ui[class*="eleven column"].doubling.grid > .column:not(.row), .ui.grid > [class*="eleven column"].doubling.row.row > .column, .play-button[class*="eleven column"].doubling.grid > .row > .column, .play-button[class*="eleven column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="eleven column"].doubling.row.row > .column, .download-button[class*="eleven column"].doubling.grid > .row > .column, .download-button[class*="eleven column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="eleven column"].doubling.row.row > .column { width: 20% !important; } .ui[class*="twelve column"].doubling.grid > .row > .column, .ui[class*="twelve column"].doubling.grid > .column:not(.row), .ui.grid > [class*="twelve column"].doubling.row.row > .column, .play-button[class*="twelve column"].doubling.grid > .row > .column, .play-button[class*="twelve column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="twelve column"].doubling.row.row > .column, .download-button[class*="twelve column"].doubling.grid > .row > .column, .download-button[class*="twelve column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="twelve column"].doubling.row.row > .column { width: 16.66666667% !important; } .ui[class*="thirteen column"].doubling.grid > .row > .column, .ui[class*="thirteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="thirteen column"].doubling.row.row > .column, .play-button[class*="thirteen column"].doubling.grid > .row > .column, .play-button[class*="thirteen column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="thirteen column"].doubling.row.row > .column, .download-button[class*="thirteen column"].doubling.grid > .row > .column, .download-button[class*="thirteen column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="thirteen column"].doubling.row.row > .column { width: 16.66666667% !important; } .ui[class*="fourteen column"].doubling.grid > .row > .column, .ui[class*="fourteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="fourteen column"].doubling.row.row > .column, .play-button[class*="fourteen column"].doubling.grid > .row > .column, .play-button[class*="fourteen column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="fourteen column"].doubling.row.row > .column, .download-button[class*="fourteen column"].doubling.grid > .row > .column, .download-button[class*="fourteen column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="fourteen column"].doubling.row.row > .column { width: 14.28571429% !important; } .ui[class*="fifteen column"].doubling.grid > .row > .column, .ui[class*="fifteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="fifteen column"].doubling.row.row > .column, .play-button[class*="fifteen column"].doubling.grid > .row > .column, .play-button[class*="fifteen column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="fifteen column"].doubling.row.row > .column, .download-button[class*="fifteen column"].doubling.grid > .row > .column, .download-button[class*="fifteen column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="fifteen column"].doubling.row.row > .column { width: 14.28571429% !important; } .ui[class*="sixteen column"].doubling.grid > .row > .column, .ui[class*="sixteen column"].doubling.grid > .column:not(.row), .ui.grid > [class*="sixteen column"].doubling.row.row > .column, .play-button[class*="sixteen column"].doubling.grid > .row > .column, .play-button[class*="sixteen column"].doubling.grid > .column:not(.row), .play-button.grid > [class*="sixteen column"].doubling.row.row > .column, .download-button[class*="sixteen column"].doubling.grid > .row > .column, .download-button[class*="sixteen column"].doubling.grid > .column:not(.row), .download-button.grid > [class*="sixteen column"].doubling.row.row > .column { width: 12.5% !important; } } /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.grid > .doubling.row, .ui.doubling.grid > .row, .play-button.grid > .doubling.row, .play-button.doubling.grid > .row, .download-button.grid > .doubling.row, .download-button.doubling.grid > .row { margin: 0em !important; padding: 0em !important; } .ui.grid > .doubling.row > .column, .ui.doubling.grid > .row > .column, .play-button.grid > .doubling.row > .column, .play-button.doubling.grid > .row > .column, .download-button.grid > .doubling.row > .column, .download-button.doubling.grid > .row > .column { padding-top: 1rem !important; padding-bottom: 1rem !important; margin: 0em !important; box-shadow: none !important; } .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column, .play-button[class*="two column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="two column"].doubling:not(.stackable).row.row > .column, .download-button[class*="two column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { width: 100% !important; } .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column, .play-button[class*="three column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="three column"].doubling:not(.stackable).row.row > .column, .download-button[class*="three column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column, .play-button[class*="four column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="four column"].doubling:not(.stackable).row.row > .column, .download-button[class*="four column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column, .play-button[class*="five column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="five column"].doubling:not(.stackable).row.row > .column, .download-button[class*="five column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column, .play-button[class*="six column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="six column"].doubling:not(.stackable).row.row > .column, .download-button[class*="six column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column, .play-button[class*="seven column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column, .download-button[class*="seven column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column, .play-button[class*="eight column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column, .download-button[class*="eight column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { width: 50% !important; } .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column, .play-button[class*="nine column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column, .download-button[class*="nine column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column, .play-button[class*="ten column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column, .download-button[class*="ten column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column, .play-button[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column, .download-button[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column, .play-button[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column, .download-button[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column, .play-button[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column, .download-button[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { width: 33.33333333% !important; } .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column, .play-button[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column, .download-button[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { width: 25% !important; } .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column, .play-button[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column, .download-button[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { width: 25% !important; } .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column, .play-button[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, .play-button[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), .play-button.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column, .download-button[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, .download-button[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), .download-button.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { width: 25% !important; } } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767px) { .ui.stackable.grid, .play-button.stackable.grid, .download-button.stackable.grid { width: auto; margin-left: 0em !important; margin-right: 0em !important; } .ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .wide.column, .ui.stackable.grid > .column.grid > .column, .ui.stackable.grid > .column.row > .column, .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column:not(.row), .ui.grid > .stackable.stackable.row > .column, .play-button.stackable.grid > .row > .wide.column, .play-button.stackable.grid > .wide.column, .play-button.stackable.grid > .column.grid > .column, .play-button.stackable.grid > .column.row > .column, .play-button.stackable.grid > .row > .column, .play-button.stackable.grid > .column:not(.row), .play-button.grid > .stackable.stackable.row > .column, .download-button.stackable.grid > .row > .wide.column, .download-button.stackable.grid > .wide.column, .download-button.stackable.grid > .column.grid > .column, .download-button.stackable.grid > .column.row > .column, .download-button.stackable.grid > .row > .column, .download-button.stackable.grid > .column:not(.row), .download-button.grid > .stackable.stackable.row > .column { width: 100% !important; margin: 0em 0em !important; box-shadow: none !important; padding: 1rem 1rem !important; } .ui.stackable.grid:not(.vertically) > .row, .play-button.stackable.grid:not(.vertically) > .row, .download-button.stackable.grid:not(.vertically) > .row { margin: 0em; padding: 0em; } /* Coupling */ .ui.container > .ui.stackable.grid > .column, .ui.container > .ui.stackable.grid > .row > .column, .play-button.container > .play-button.stackable.grid > .column, .play-button.container > .play-button.stackable.grid > .row > .column, .download-button.container > .download-button.stackable.grid > .column, .download-button.container > .download-button.stackable.grid > .row > .column { padding-left: 0em !important; padding-right: 0em !important; } /* Don't pad inside segment or nested grid */ .ui.grid .ui.stackable.grid, .ui.segment:not(.vertical) .ui.stackable.page.grid, .play-button.grid .play-button.stackable.grid, .play-button.segment:not(.vertical) .play-button.stackable.page.grid, .download-button.grid .download-button.stackable.grid, .download-button.segment:not(.vertical) .download-button.stackable.page.grid { margin-left: -1rem !important; margin-right: -1rem !important; } /* Divided Stackable */ .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.celled.grid > .row:first-child > .column:first-child, .ui.stackable.divided.grid > .column:not(.row):first-child, .ui.stackable.celled.grid > .column:not(.row):first-child, .play-button.stackable.divided.grid > .row:first-child > .column:first-child, .play-button.stackable.celled.grid > .row:first-child > .column:first-child, .play-button.stackable.divided.grid > .column:not(.row):first-child, .play-button.stackable.celled.grid > .column:not(.row):first-child, .download-button.stackable.divided.grid > .row:first-child > .column:first-child, .download-button.stackable.celled.grid > .row:first-child > .column:first-child, .download-button.stackable.divided.grid > .column:not(.row):first-child, .download-button.stackable.celled.grid > .column:not(.row):first-child { border-top: none !important; } .ui.inverted.stackable.celled.grid > .column:not(.row), .ui.inverted.stackable.divided.grid > .column:not(.row), .ui.inverted.stackable.celled.grid > .row > .column, .ui.inverted.stackable.divided.grid > .row > .column, .play-button.inverted.stackable.celled.grid > .column:not(.row), .play-button.inverted.stackable.divided.grid > .column:not(.row), .play-button.inverted.stackable.celled.grid > .row > .column, .play-button.inverted.stackable.divided.grid > .row > .column, .download-button.inverted.stackable.celled.grid > .column:not(.row), .download-button.inverted.stackable.divided.grid > .column:not(.row), .download-button.inverted.stackable.celled.grid > .row > .column, .download-button.inverted.stackable.divided.grid > .row > .column { border-top: 1px solid rgba(255, 255, 255, 0.1); } .ui.stackable.celled.grid > .column:not(.row), .ui.stackable.divided:not(.vertically).grid > .column:not(.row), .ui.stackable.celled.grid > .row > .column, .ui.stackable.divided:not(.vertically).grid > .row > .column, .play-button.stackable.celled.grid > .column:not(.row), .play-button.stackable.divided:not(.vertically).grid > .column:not(.row), .play-button.stackable.celled.grid > .row > .column, .play-button.stackable.divided:not(.vertically).grid > .row > .column, .download-button.stackable.celled.grid > .column:not(.row), .download-button.stackable.divided:not(.vertically).grid > .column:not(.row), .download-button.stackable.celled.grid > .row > .column, .download-button.stackable.divided:not(.vertically).grid > .row > .column { border-top: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } .ui.stackable.celled.grid > .row, .play-button.stackable.celled.grid > .row, .download-button.stackable.celled.grid > .row { box-shadow: none !important; } .ui.stackable.divided:not(.vertically).grid > .column:not(.row), .ui.stackable.divided:not(.vertically).grid > .row > .column, .play-button.stackable.divided:not(.vertically).grid > .column:not(.row), .play-button.stackable.divided:not(.vertically).grid > .row > .column, .download-button.stackable.divided:not(.vertically).grid > .column:not(.row), .download-button.stackable.divided:not(.vertically).grid > .row > .column { padding-left: 0em !important; padding-right: 0em !important; } } /*---------------------- Only (Device) -----------------------*/ /* These include arbitrary class repetitions for forced specificity */ /* Mobile Only Hide */ @media only screen and (max-width: 767px) { .ui[class*="tablet only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile), .play-button[class*="tablet only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="tablet only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="tablet only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile), .download-button[class*="tablet only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="tablet only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="tablet only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { display: none !important; } .ui[class*="computer only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile), .play-button[class*="computer only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="computer only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="computer only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile), .download-button[class*="computer only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="computer only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="computer only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile), .play-button[class*="large screen only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile), .download-button[class*="large screen only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .play-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .download-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Tablet Only Hide */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui[class*="mobile only"].grid.grid.grid:not(.tablet), .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet), .play-button[class*="mobile only"].grid.grid.grid:not(.tablet), .play-button.grid.grid.grid > [class*="mobile only"].row:not(.tablet), .play-button.grid.grid.grid > [class*="mobile only"].column:not(.tablet), .play-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet), .download-button[class*="mobile only"].grid.grid.grid:not(.tablet), .download-button.grid.grid.grid > [class*="mobile only"].row:not(.tablet), .download-button.grid.grid.grid > [class*="mobile only"].column:not(.tablet), .download-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { display: none !important; } .ui[class*="computer only"].grid.grid.grid:not(.tablet), .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet), .play-button[class*="computer only"].grid.grid.grid:not(.tablet), .play-button.grid.grid.grid > [class*="computer only"].row:not(.tablet), .play-button.grid.grid.grid > [class*="computer only"].column:not(.tablet), .play-button.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet), .download-button[class*="computer only"].grid.grid.grid:not(.tablet), .download-button.grid.grid.grid > [class*="computer only"].row:not(.tablet), .download-button.grid.grid.grid > [class*="computer only"].column:not(.tablet), .download-button.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile), .play-button[class*="large screen only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile), .download-button[class*="large screen only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .play-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .download-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Computer Only Hide */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer), .play-button[class*="mobile only"].grid.grid.grid:not(.computer), .play-button.grid.grid.grid > [class*="mobile only"].row:not(.computer), .play-button.grid.grid.grid > [class*="mobile only"].column:not(.computer), .play-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer), .download-button[class*="mobile only"].grid.grid.grid:not(.computer), .download-button.grid.grid.grid > [class*="mobile only"].row:not(.computer), .download-button.grid.grid.grid > [class*="mobile only"].column:not(.computer), .download-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer), .play-button[class*="tablet only"].grid.grid.grid:not(.computer), .play-button.grid.grid.grid > [class*="tablet only"].row:not(.computer), .play-button.grid.grid.grid > [class*="tablet only"].column:not(.computer), .play-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer), .download-button[class*="tablet only"].grid.grid.grid:not(.computer), .download-button.grid.grid.grid > [class*="tablet only"].row:not(.computer), .download-button.grid.grid.grid > [class*="tablet only"].column:not(.computer), .download-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui[class*="large screen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile), .play-button[class*="large screen only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile), .download-button[class*="large screen only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="large screen only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="large screen only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .play-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .download-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Large Screen Only Hide */ @media only screen and (min-width: 1200px) and (max-width: 1919px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer), .play-button[class*="mobile only"].grid.grid.grid:not(.computer), .play-button.grid.grid.grid > [class*="mobile only"].row:not(.computer), .play-button.grid.grid.grid > [class*="mobile only"].column:not(.computer), .play-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer), .download-button[class*="mobile only"].grid.grid.grid:not(.computer), .download-button.grid.grid.grid > [class*="mobile only"].row:not(.computer), .download-button.grid.grid.grid > [class*="mobile only"].column:not(.computer), .download-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer), .play-button[class*="tablet only"].grid.grid.grid:not(.computer), .play-button.grid.grid.grid > [class*="tablet only"].row:not(.computer), .play-button.grid.grid.grid > [class*="tablet only"].column:not(.computer), .play-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer), .download-button[class*="tablet only"].grid.grid.grid:not(.computer), .download-button.grid.grid.grid > [class*="tablet only"].row:not(.computer), .download-button.grid.grid.grid > [class*="tablet only"].column:not(.computer), .download-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .play-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .play-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .play-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile), .download-button[class*="widescreen only"].grid.grid.grid:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), .download-button.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), .download-button.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Widescreen Only Hide */ @media only screen and (min-width: 1920px) { .ui[class*="mobile only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer), .play-button[class*="mobile only"].grid.grid.grid:not(.computer), .play-button.grid.grid.grid > [class*="mobile only"].row:not(.computer), .play-button.grid.grid.grid > [class*="mobile only"].column:not(.computer), .play-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer), .download-button[class*="mobile only"].grid.grid.grid:not(.computer), .download-button.grid.grid.grid > [class*="mobile only"].row:not(.computer), .download-button.grid.grid.grid > [class*="mobile only"].column:not(.computer), .download-button.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui[class*="tablet only"].grid.grid.grid:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer), .play-button[class*="tablet only"].grid.grid.grid:not(.computer), .play-button.grid.grid.grid > [class*="tablet only"].row:not(.computer), .play-button.grid.grid.grid > [class*="tablet only"].column:not(.computer), .play-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer), .download-button[class*="tablet only"].grid.grid.grid:not(.computer), .download-button.grid.grid.grid > [class*="tablet only"].row:not(.computer), .download-button.grid.grid.grid > [class*="tablet only"].column:not(.computer), .download-button.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } } /******************************* Site Overrides *******************************/ /******************************* Site Overrides *******************************/ /* * # Semantic - Menu * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Menu *******************************/ /*------------------- Collection --------------------*/ /* Menu */ /* Menu Item */ /* Divider */ /* Sub Menu */ /* Text Item */ /*-------------- Elements ---------------*/ /* Icon */ /* Dropdown Icon */ /* Header */ /* Vertical Icon */ /* Vertical Header */ /* Pointing Arrow */ /*-------------- Couplings ---------------*/ /* Button */ /* Input */ /* Image */ /* Label */ /* Dropdown in Menu */ /* Dropdown Variations */ /*-------------- States ---------------*/ /* Hovered Item */ /* Pressed Item */ /* Active Item */ /* Active Hovered Item */ /* Selected Dropdown */ /* Active Dropdown */ /* Active Sub Menu */ /*-------------- Types ---------------*/ /* Vertical */ /* Secondary */ /* Pointing */ /* Inverted Secondary */ /* Inverted Pointing */ /* Tiered */ /* Icon */ /* Tabular */ /* Pagination */ /* Labeled Icon */ /* Text */ /*-------------- Variations ---------------*/ /* Inverted */ /* Inverted Sub Menu */ /* Inverted Hover */ /* Pressed */ /* Inverted Active */ /* Inverted Active Hover */ /* Inverted Menu Divider */ /* Inverted Colored */ /* Fixed */ /* Floated */ /* Attached */ /* Resize large sizes */ /* Sizes */ /* Packaged Theme */ /******************************* User Variable Overrides *******************************/ /* PXT Variables */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* PXT Theme Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Menu ---------------*/ .ui.menu, .play-button.menu, .download-button.menu { display: flex; margin: 1rem 0em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; background: #FFFFFF; font-weight: normal; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; min-height: 2.85714286em; } .ui.menu:after, .play-button.menu:after, .download-button.menu:after { content: ''; display: block; height: 0px; clear: both; visibility: hidden; } .ui.menu:first-child, .play-button.menu:first-child, .download-button.menu:first-child { margin-top: 0rem; } .ui.menu:last-child, .play-button.menu:last-child, .download-button.menu:last-child { margin-bottom: 0rem; } /*-------------- Sub-Menu ---------------*/ .ui.menu .menu, .play-button.menu .menu, .download-button.menu .menu { margin: 0em; } .ui.menu:not(.vertical) > .menu, .play-button.menu:not(.vertical) > .menu, .download-button.menu:not(.vertical) > .menu { display: flex; } /*-------------- Item ---------------*/ .ui.menu:not(.vertical) .item, .play-button.menu:not(.vertical) .item, .download-button.menu:not(.vertical) .item { display: flex; align-items: center; } .ui.menu .item, .play-button.menu .item, .download-button.menu .item { position: relative; vertical-align: middle; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; user-select: none; background: none; padding: 0.92857143em 1.14285714em; text-transform: none; color: rgba(0, 0, 0, 0.87); font-weight: normal; transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; } .ui.menu > .item:first-child, .play-button.menu > .item:first-child, .download-button.menu > .item:first-child { border-radius: 0.28571429rem 0px 0px 0.28571429rem; } /* Border */ .ui.menu .item:before, .play-button.menu .item:before, .download-button.menu .item:before { position: absolute; content: ''; top: 0%; right: 0px; height: 100%; width: 1px; background: rgba(34, 36, 38, 0.1); } /*-------------- Text Content ---------------*/ .ui.menu .text.item > *, .ui.menu .item > a:not(.ui), .ui.menu .item > p:only-child, .play-button.menu .text.item > *, .play-button.menu .item > a:not(.ui), .play-button.menu .item > p:only-child, .download-button.menu .text.item > *, .download-button.menu .item > a:not(.ui), .download-button.menu .item > p:only-child { user-select: text; line-height: 1.3; } .ui.menu .item > p:first-child, .play-button.menu .item > p:first-child, .download-button.menu .item > p:first-child { margin-top: 0; } .ui.menu .item > p:last-child, .play-button.menu .item > p:last-child, .download-button.menu .item > p:last-child { margin-bottom: 0; } /*-------------- Icons ---------------*/ .ui.menu .item > i.icon, .play-button.menu .item > i.icon, .download-button.menu .item > i.icon { opacity: 0.9; float: none; margin: 0em 0.35714286em 0em 0em; } /*-------------- Button ---------------*/ .ui.menu:not(.vertical) .item > .button, .play-button.menu:not(.vertical) .item > .button, .ui.menu:not(.vertical) .item > .play-button, .download-button.menu:not(.vertical) .item > .button, .ui.menu:not(.vertical) .item > .download-button { position: relative; top: 0em; margin: -0.5em 0em; padding-bottom: 0.78571429em; padding-top: 0.78571429em; font-size: 1em; } /*---------------- Grid / Container -----------------*/ .ui.menu > .grid, .ui.menu > .container, .play-button.menu > .grid, .play-button.menu > .container, .download-button.menu > .grid, .download-button.menu > .container { display: flex; align-items: inherit; flex-direction: inherit; } /*-------------- Inputs ---------------*/ .ui.menu .item > .input, .play-button.menu .item > .input, .download-button.menu .item > .input { width: 100%; } .ui.menu:not(.vertical) .item > .input, .play-button.menu:not(.vertical) .item > .input, .download-button.menu:not(.vertical) .item > .input { position: relative; top: 0em; margin: -0.5em 0em; } .ui.menu .item > .input input, .play-button.menu .item > .input input, .download-button.menu .item > .input input { font-size: 1em; padding-top: 0.57142857em; padding-bottom: 0.57142857em; } /*-------------- Header ---------------*/ .ui.menu .header.item, .ui.vertical.menu .header.item, .play-button.menu .header.item, .play-button.vertical.menu .header.item, .download-button.menu .header.item, .download-button.vertical.menu .header.item { margin: 0em; background: ''; text-transform: normal; font-weight: bold; } .ui.vertical.menu .item > .header:not(.ui), .play-button.vertical.menu .item > .header:not(.ui), .download-button.vertical.menu .item > .header:not(.ui) { margin: 0em 0em 0.5em; font-size: 1em; font-weight: bold; } /*-------------- Dropdowns ---------------*/ /* Dropdown Icon */ .ui.menu .item > i.dropdown.icon, .play-button.menu .item > i.dropdown.icon, .download-button.menu .item > i.dropdown.icon { padding: 0em; float: right; margin: 0em 0em 0em 1em; } /* Menu */ .ui.menu .dropdown.item .menu, .play-button.menu .dropdown.item .menu, .download-button.menu .dropdown.item .menu { min-width: calc(100% - 1px); border-radius: 0em 0em 0.28571429rem 0.28571429rem; background: #FFFFFF; margin: 0px 0px 0px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); flex-direction: column !important; } /* Menu Items */ .ui.menu .ui.dropdown .menu > .item, .play-button.menu .play-button.dropdown .menu > .item, .download-button.menu .download-button.dropdown .menu > .item { margin: 0; text-align: left; font-size: 1em !important; padding: 0.78571429em 1.14285714em !important; background: transparent !important; color: rgba(0, 0, 0, 0.87) !important; text-transform: none !important; font-weight: normal !important; box-shadow: none !important; transition: none !important; } .ui.menu .ui.dropdown .menu > .item:hover, .play-button.menu .play-button.dropdown .menu > .item:hover, .download-button.menu .download-button.dropdown .menu > .item:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown .menu > .selected.item, .play-button.menu .play-button.dropdown .menu > .selected.item, .download-button.menu .download-button.dropdown .menu > .selected.item { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown .menu > .active.item, .play-button.menu .play-button.dropdown .menu > .active.item, .download-button.menu .download-button.dropdown .menu > .active.item { background: rgba(0, 0, 0, 0.03) !important; font-weight: bold !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.dropdown.item .menu .item:not(.filtered), .play-button.menu .play-button.dropdown.item .menu .item:not(.filtered), .download-button.menu .download-button.dropdown.item .menu .item:not(.filtered) { display: block; } .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown), .play-button.menu .play-button.dropdown .menu > .item .icon:not(.dropdown), .download-button.menu .download-button.dropdown .menu > .item .icon:not(.dropdown) { display: inline-block; font-size: 1em !important; float: none; margin: 0em 0.75em 0em 0em; } /* Secondary */ .ui.secondary.menu .dropdown.item > .menu, .ui.text.menu .dropdown.item > .menu, .play-button.secondary.menu .dropdown.item > .menu, .play-button.text.menu .dropdown.item > .menu, .download-button.secondary.menu .dropdown.item > .menu, .download-button.text.menu .dropdown.item > .menu { border-radius: 0.28571429rem; margin-top: 0.35714286em; } /* Pointing */ .ui.menu .pointing.dropdown.item .menu, .play-button.menu .pointing.dropdown.item .menu, .download-button.menu .pointing.dropdown.item .menu { margin-top: 0.75em; } /* Inverted */ .ui.inverted.menu .search.dropdown.item > .search, .ui.inverted.menu .search.dropdown.item > .text, .play-button.inverted.menu .search.dropdown.item > .search, .play-button.inverted.menu .search.dropdown.item > .text, .download-button.inverted.menu .search.dropdown.item > .search, .download-button.inverted.menu .search.dropdown.item > .text { color: rgba(255, 255, 255, 0.9); } /* Vertical */ .ui.vertical.menu .dropdown.item > .icon, .play-button.vertical.menu .dropdown.item > .icon, .download-button.vertical.menu .dropdown.item > .icon { float: right; content: "\f0da"; margin-left: 1em; } .ui.vertical.menu .dropdown.item .menu, .play-button.vertical.menu .dropdown.item .menu, .download-button.vertical.menu .dropdown.item .menu { left: 100%; min-width: 0; margin: 0em 0em 0em 0px; box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem; } .ui.vertical.menu .dropdown.item.upward .menu, .play-button.vertical.menu .dropdown.item.upward .menu, .download-button.vertical.menu .dropdown.item.upward .menu { bottom: 0; } .ui.vertical.menu .dropdown.item:not(.upward) .menu, .play-button.vertical.menu .dropdown.item:not(.upward) .menu, .download-button.vertical.menu .dropdown.item:not(.upward) .menu { top: 0; } .ui.vertical.menu .active.dropdown.item, .play-button.vertical.menu .active.dropdown.item, .download-button.vertical.menu .active.dropdown.item { border-top-right-radius: 0em; border-bottom-right-radius: 0em; } .ui.vertical.menu .dropdown.active.item, .play-button.vertical.menu .dropdown.active.item, .download-button.vertical.menu .dropdown.active.item { box-shadow: none; } /* Evenly Divided */ .ui.item.menu .dropdown .menu .item, .play-button.item.menu .dropdown .menu .item, .download-button.item.menu .dropdown .menu .item { width: 100%; } /*-------------- Labels ---------------*/ .ui.menu .item > .label, .play-button.menu .item > .label, .download-button.menu .item > .label { background: #999999; color: #FFFFFF; margin-left: 1em; padding: 0.3em 0.78571429em; } .ui.vertical.menu .item > .label, .play-button.vertical.menu .item > .label, .download-button.vertical.menu .item > .label { background: #999999; color: #FFFFFF; margin-top: -0.15em; margin-bottom: -0.15em; padding: 0.3em 0.78571429em; } .ui.menu .item > .floating.label, .play-button.menu .item > .floating.label, .download-button.menu .item > .floating.label { padding: 0.3em 0.78571429em; } /*-------------- Images ---------------*/ .ui.menu .item > img:not(.ui), .play-button.menu .item > img:not(.ui), .download-button.menu .item > img:not(.ui) { display: inline-block; vertical-align: middle; margin: -0.3em 0em; width: 2.5em; } .ui.vertical.menu .item > img:not(.ui):only-child, .play-button.vertical.menu .item > img:not(.ui):only-child, .download-button.vertical.menu .item > img:not(.ui):only-child { display: block; max-width: 100%; width: auto; } /******************************* Coupling *******************************/ /*-------------- Sidebar ---------------*/ /* Show vertical dividers below last */ .ui.vertical.sidebar.menu > .item:first-child:before, .play-button.vertical.sidebar.menu > .item:first-child:before, .download-button.vertical.sidebar.menu > .item:first-child:before { display: block !important; } .ui.vertical.sidebar.menu > .item::before, .play-button.vertical.sidebar.menu > .item::before, .download-button.vertical.sidebar.menu > .item::before { top: auto; bottom: 0px; } /*-------------- Container ---------------*/ @media only screen and (max-width: 767px) { .ui.menu > .ui.container, .play-button.menu > .play-button.container, .download-button.menu > .download-button.container { width: 100% !important; margin-left: 0em !important; margin-right: 0em !important; } } @media only screen and (min-width: 768px) { .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child, .play-button.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child, .download-button.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { border-left: 1px solid rgba(34, 36, 38, 0.1); } } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, .play-button.link.menu .item:hover, .play-button.menu .dropdown.item:hover, .play-button.menu .link.item:hover, .play-button.menu a.item:hover, .download-button.link.menu .item:hover, .download-button.menu .dropdown.item:hover, .download-button.menu .link.item:hover, .download-button.menu a.item:hover { cursor: pointer; background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------- Pressed ---------------*/ .ui.link.menu .item:active, .ui.menu .link.item:active, .ui.menu a.item:active, .play-button.link.menu .item:active, .play-button.menu .link.item:active, .play-button.menu a.item:active, .download-button.link.menu .item:active, .download-button.menu .link.item:active, .download-button.menu a.item:active { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------- Active ---------------*/ .ui.menu .active.item, .play-button.menu .active.item, .download-button.menu .active.item { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); font-weight: normal; box-shadow: none; } .ui.menu .active.item > i.icon, .play-button.menu .active.item > i.icon, .download-button.menu .active.item > i.icon { opacity: 1; } /*-------------- Active Hover ---------------*/ .ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover, .play-button.menu .active.item:hover, .play-button.vertical.menu .active.item:hover, .download-button.menu .active.item:hover, .download-button.vertical.menu .active.item:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /*-------------- Disabled ---------------*/ .ui.menu .item.disabled, .ui.menu .item.disabled:hover, .play-button.menu .item.disabled, .play-button.menu .item.disabled:hover, .download-button.menu .item.disabled, .download-button.menu .item.disabled:hover { cursor: default; background-color: transparent !important; color: rgba(40, 40, 40, 0.3); } /******************************* Types *******************************/ /*------------------ Floated Menu / Item -------------------*/ /* Left Floated */ .ui.menu:not(.vertical) .left.item, .ui.menu:not(.vertical) .left.menu, .play-button.menu:not(.vertical) .left.item, .play-button.menu:not(.vertical) .left.menu, .download-button.menu:not(.vertical) .left.item, .download-button.menu:not(.vertical) .left.menu { display: flex; margin-right: auto !important; } /* Right Floated */ .ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu, .play-button.menu:not(.vertical) .right.item, .play-button.menu:not(.vertical) .right.menu, .download-button.menu:not(.vertical) .right.item, .download-button.menu:not(.vertical) .right.menu { display: flex; margin-left: auto !important; } /* Swapped Borders */ .ui.menu .right.item::before, .ui.menu .right.menu > .item::before, .play-button.menu .right.item::before, .play-button.menu .right.menu > .item::before, .download-button.menu .right.item::before, .download-button.menu .right.menu > .item::before { right: auto; left: 0; } /*-------------- Vertical ---------------*/ .ui.vertical.menu, .play-button.vertical.menu, .download-button.vertical.menu { display: block; flex-direction: column; background: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); } /*--- Item ---*/ .ui.vertical.menu .item, .play-button.vertical.menu .item, .download-button.vertical.menu .item { display: block; background: none; border-top: none; border-right: none; } .ui.vertical.menu > .item:first-child, .play-button.vertical.menu > .item:first-child, .download-button.vertical.menu > .item:first-child { border-radius: 0.28571429rem 0.28571429rem 0px 0px; } .ui.vertical.menu > .item:last-child, .play-button.vertical.menu > .item:last-child, .download-button.vertical.menu > .item:last-child { border-radius: 0px 0px 0.28571429rem 0.28571429rem; } /*--- Label ---*/ .ui.vertical.menu .item > .label, .play-button.vertical.menu .item > .label, .download-button.vertical.menu .item > .label { float: right; text-align: center; } /*--- Icon ---*/ .ui.vertical.menu .item > i.icon, .play-button.vertical.menu .item > i.icon, .download-button.vertical.menu .item > i.icon { width: 1.18em; float: right; margin: 0em 0em 0em 0.5em; } .ui.vertical.menu .item > .label + i.icon, .play-button.vertical.menu .item > .label + i.icon, .download-button.vertical.menu .item > .label + i.icon { float: none; margin: 0em 0.5em 0em 0em; } /*--- Border ---*/ .ui.vertical.menu .item:before, .play-button.vertical.menu .item:before, .download-button.vertical.menu .item:before { position: absolute; content: ''; top: 0%; left: 0px; width: 100%; height: 1px; background: rgba(34, 36, 38, 0.1); } .ui.vertical.menu .item:first-child:before, .play-button.vertical.menu .item:first-child:before, .download-button.vertical.menu .item:first-child:before { display: none !important; } /*--- Sub Menu ---*/ .ui.vertical.menu .item > .menu, .play-button.vertical.menu .item > .menu, .download-button.vertical.menu .item > .menu { margin: 0.5em -1.14285714em 0em; } .ui.vertical.menu .menu .item, .play-button.vertical.menu .menu .item, .download-button.vertical.menu .menu .item { background: none; padding: 0.5em 1.33333333em; font-size: 0.85714286em; color: rgba(0, 0, 0, 0.5); } .ui.vertical.menu .item .menu a.item:hover, .ui.vertical.menu .item .menu .link.item:hover, .play-button.vertical.menu .item .menu a.item:hover, .play-button.vertical.menu .item .menu .link.item:hover, .download-button.vertical.menu .item .menu a.item:hover, .download-button.vertical.menu .item .menu .link.item:hover { color: rgba(0, 0, 0, 0.85); } .ui.vertical.menu .menu .item:before, .play-button.vertical.menu .menu .item:before, .download-button.vertical.menu .menu .item:before { display: none; } /* Vertical Active */ .ui.vertical.menu .active.item, .play-button.vertical.menu .active.item, .download-button.vertical.menu .active.item { background: rgba(0, 0, 0, 0.05); border-radius: 0em; box-shadow: none; } .ui.vertical.menu > .active.item:first-child, .play-button.vertical.menu > .active.item:first-child, .download-button.vertical.menu > .active.item:first-child { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.vertical.menu > .active.item:last-child, .play-button.vertical.menu > .active.item:last-child, .download-button.vertical.menu > .active.item:last-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui.vertical.menu > .active.item:only-child, .play-button.vertical.menu > .active.item:only-child, .download-button.vertical.menu > .active.item:only-child { border-radius: 0.28571429rem; } .ui.vertical.menu .active.item .menu .active.item, .play-button.vertical.menu .active.item .menu .active.item, .download-button.vertical.menu .active.item .menu .active.item { border-left: none; } .ui.vertical.menu .item .menu .active.item, .play-button.vertical.menu .item .menu .active.item, .download-button.vertical.menu .item .menu .active.item { background-color: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); } /*-------------- Tabular ---------------*/ .ui.tabular.menu, .play-button.tabular.menu, .download-button.tabular.menu { border-radius: 0em; box-shadow: none !important; border: none; background: none transparent; border-bottom: 1px solid #D4D4D5; } .ui.tabular.fluid.menu, .play-button.tabular.fluid.menu, .download-button.tabular.fluid.menu { width: calc(100% + 2px ) !important; } .ui.tabular.menu .item, .play-button.tabular.menu .item, .download-button.tabular.menu .item { background: transparent; border-bottom: none; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; padding: 0.92857143em 1.42857143em; color: rgba(0, 0, 0, 0.87); } .ui.tabular.menu .item:before, .play-button.tabular.menu .item:before, .download-button.tabular.menu .item:before { display: none; } /* Hover */ .ui.tabular.menu .item:hover, .play-button.tabular.menu .item:hover, .download-button.tabular.menu .item:hover { background-color: transparent; color: rgba(0, 0, 0, 0.8); } /* Active */ .ui.tabular.menu .active.item, .play-button.tabular.menu .active.item, .download-button.tabular.menu .active.item { background: none #FFFFFF; color: rgba(0, 0, 0, 0.95); border-top-width: 1px; border-color: #D4D4D5; font-weight: bold; margin-bottom: -1px; box-shadow: none; border-radius: 0.28571429rem 0.28571429rem 0px 0px !important; } /* Coupling with segment for attachment */ .ui.tabular.menu + .attached:not(.top).segment, .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment, .play-button.tabular.menu + .attached:not(.top).segment, .play-button.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment, .download-button.tabular.menu + .attached:not(.top).segment, .download-button.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { border-top: none; margin-left: 0px; margin-top: 0px; margin-right: 0px; width: 100%; } .top.attached.segment + .ui.bottom.tabular.menu, .top.attached.segment + .play-button.bottom.tabular.menu, .top.attached.segment + .download-button.bottom.tabular.menu { position: relative; width: calc(100% + 2px ); left: -1px; } /* Bottom Vertical Tabular */ .ui.bottom.tabular.menu, .play-button.bottom.tabular.menu, .download-button.bottom.tabular.menu { background: none transparent; border-radius: 0em; box-shadow: none !important; border-bottom: none; border-top: 1px solid #D4D4D5; } .ui.bottom.tabular.menu .item, .play-button.bottom.tabular.menu .item, .download-button.bottom.tabular.menu .item { background: none; border-left: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-top: none; } .ui.bottom.tabular.menu .active.item, .play-button.bottom.tabular.menu .active.item, .download-button.bottom.tabular.menu .active.item { background: none #FFFFFF; color: rgba(0, 0, 0, 0.95); border-color: #D4D4D5; margin: -1px 0px 0px 0px; border-radius: 0px 0px 0.28571429rem 0.28571429rem !important; } /* Vertical Tabular (Left) */ .ui.vertical.tabular.menu, .play-button.vertical.tabular.menu, .download-button.vertical.tabular.menu { background: none transparent; border-radius: 0em; box-shadow: none !important; border-bottom: none; border-right: 1px solid #D4D4D5; } .ui.vertical.tabular.menu .item, .play-button.vertical.tabular.menu .item, .download-button.vertical.tabular.menu .item { background: none; border-left: 1px solid transparent; border-bottom: 1px solid transparent; border-top: 1px solid transparent; border-right: none; } .ui.vertical.tabular.menu .active.item, .play-button.vertical.tabular.menu .active.item, .download-button.vertical.tabular.menu .active.item { background: none #FFFFFF; color: rgba(0, 0, 0, 0.95); border-color: #D4D4D5; margin: 0px -1px 0px 0px; border-radius: 0.28571429rem 0px 0px 0.28571429rem !important; } /* Vertical Right Tabular */ .ui.vertical.right.tabular.menu, .play-button.vertical.right.tabular.menu, .download-button.vertical.right.tabular.menu { background: none transparent; border-radius: 0em; box-shadow: none !important; border-bottom: none; border-right: none; border-left: 1px solid #D4D4D5; } .ui.vertical.right.tabular.menu .item, .play-button.vertical.right.tabular.menu .item, .download-button.vertical.right.tabular.menu .item { background: none; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-top: 1px solid transparent; border-left: none; } .ui.vertical.right.tabular.menu .active.item, .play-button.vertical.right.tabular.menu .active.item, .download-button.vertical.right.tabular.menu .active.item { background: none #FFFFFF; color: rgba(0, 0, 0, 0.95); border-color: #D4D4D5; margin: 0px 0px 0px -1px; border-radius: 0px 0.28571429rem 0.28571429rem 0px !important; } /* Dropdown */ .ui.tabular.menu .active.dropdown.item, .play-button.tabular.menu .active.dropdown.item, .download-button.tabular.menu .active.dropdown.item { margin-bottom: 0px; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; border-bottom: none; } /*-------------- Pagination ---------------*/ .ui.pagination.menu, .play-button.pagination.menu, .download-button.pagination.menu { margin: 0em; display: inline-flex; vertical-align: middle; } .ui.pagination.menu .item:last-child, .play-button.pagination.menu .item:last-child, .download-button.pagination.menu .item:last-child { border-radius: 0em 0.28571429rem 0.28571429rem 0em; } .ui.compact.menu .item:last-child, .play-button.compact.menu .item:last-child, .download-button.compact.menu .item:last-child { border-radius: 0em 0.28571429rem 0.28571429rem 0em; } .ui.pagination.menu .item:last-child:before, .play-button.pagination.menu .item:last-child:before, .download-button.pagination.menu .item:last-child:before { display: none; } .ui.pagination.menu .item, .play-button.pagination.menu .item, .download-button.pagination.menu .item { min-width: 3em; text-align: center; } .ui.pagination.menu .icon.item i.icon, .play-button.pagination.menu .icon.item i.icon, .download-button.pagination.menu .icon.item i.icon { vertical-align: top; } /* Active */ .ui.pagination.menu .active.item, .play-button.pagination.menu .active.item, .download-button.pagination.menu .active.item { border-top: none; padding-top: 0.92857143em; background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); box-shadow: none; } /*-------------- Secondary ---------------*/ .ui.secondary.menu, .play-button.secondary.menu, .download-button.secondary.menu { background: none; margin-left: -0.35714286em; margin-right: -0.35714286em; border-radius: 0em; border: none; box-shadow: none; } /* Item */ .ui.secondary.menu .item, .play-button.secondary.menu .item, .download-button.secondary.menu .item { align-self: center; box-shadow: none; border: none; padding: 0.78571429em 0.92857143em; margin: 0em 0.35714286em; background: none; transition: color 0.1s ease; border-radius: 0.28571429rem; } /* No Divider */ .ui.secondary.menu .item:before, .play-button.secondary.menu .item:before, .download-button.secondary.menu .item:before { display: none !important; } /* Header */ .ui.secondary.menu .header.item, .play-button.secondary.menu .header.item, .download-button.secondary.menu .header.item { border-radius: 0em; border-right: none; background: none transparent; } /* Image */ .ui.secondary.menu .item > img:not(.ui), .play-button.secondary.menu .item > img:not(.ui), .download-button.secondary.menu .item > img:not(.ui) { margin: 0em; } /* Hover */ .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover, .play-button.secondary.menu .dropdown.item:hover, .play-button.secondary.menu .link.item:hover, .play-button.secondary.menu a.item:hover, .download-button.secondary.menu .dropdown.item:hover, .download-button.secondary.menu .link.item:hover, .download-button.secondary.menu a.item:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Active */ .ui.secondary.menu .active.item, .play-button.secondary.menu .active.item, .download-button.secondary.menu .active.item { box-shadow: none; background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); border-radius: 0.28571429rem; } /* Active Hover */ .ui.secondary.menu .active.item:hover, .play-button.secondary.menu .active.item:hover, .download-button.secondary.menu .active.item:hover { box-shadow: none; background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.secondary.inverted.menu .link.item, .ui.secondary.inverted.menu a.item, .play-button.secondary.inverted.menu .link.item, .play-button.secondary.inverted.menu a.item, .download-button.secondary.inverted.menu .link.item, .download-button.secondary.inverted.menu a.item { color: rgba(255, 255, 255, 0.7) !important; } .ui.secondary.inverted.menu .dropdown.item:hover, .ui.secondary.inverted.menu .link.item:hover, .ui.secondary.inverted.menu a.item:hover, .play-button.secondary.inverted.menu .dropdown.item:hover, .play-button.secondary.inverted.menu .link.item:hover, .play-button.secondary.inverted.menu a.item:hover, .download-button.secondary.inverted.menu .dropdown.item:hover, .download-button.secondary.inverted.menu .link.item:hover, .download-button.secondary.inverted.menu a.item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff !important; } .ui.secondary.inverted.menu .active.item, .play-button.secondary.inverted.menu .active.item, .download-button.secondary.inverted.menu .active.item { background: rgba(255, 255, 255, 0.15); color: #ffffff !important; } /* Fix item margins */ .ui.secondary.item.menu, .play-button.secondary.item.menu, .download-button.secondary.item.menu { margin-left: 0em; margin-right: 0em; } .ui.secondary.item.menu .item:last-child, .play-button.secondary.item.menu .item:last-child, .download-button.secondary.item.menu .item:last-child { margin-right: 0em; } .ui.secondary.attached.menu, .play-button.secondary.attached.menu, .download-button.secondary.attached.menu { box-shadow: none; } /* Sub Menu */ .ui.vertical.secondary.menu .item:not(.dropdown) > .menu, .play-button.vertical.secondary.menu .item:not(.dropdown) > .menu, .download-button.vertical.secondary.menu .item:not(.dropdown) > .menu { margin: 0em -0.92857143em; } .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item, .play-button.vertical.secondary.menu .item:not(.dropdown) > .menu > .item, .download-button.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { margin: 0em; padding: 0.5em 1.33333333em; } /*--------------------- Secondary Vertical -----------------------*/ .ui.secondary.vertical.menu > .item, .play-button.secondary.vertical.menu > .item, .download-button.secondary.vertical.menu > .item { border: none; margin: 0em 0em 0.35714286em; border-radius: 0.28571429rem !important; } .ui.secondary.vertical.menu > .header.item, .play-button.secondary.vertical.menu > .header.item, .download-button.secondary.vertical.menu > .header.item { border-radius: 0em; } /* Sub Menu */ .ui.vertical.secondary.menu .item > .menu .item, .play-button.vertical.secondary.menu .item > .menu .item, .download-button.vertical.secondary.menu .item > .menu .item { background-color: transparent; } /* Inverted */ .ui.secondary.inverted.menu, .play-button.secondary.inverted.menu, .download-button.secondary.inverted.menu { background-color: transparent; } /*--------------------- Secondary Pointing -----------------------*/ .ui.secondary.pointing.menu, .play-button.secondary.pointing.menu, .download-button.secondary.pointing.menu { margin-left: 0em; margin-right: 0em; border-bottom: 2px solid rgba(34, 36, 38, 0.15); } .ui.secondary.pointing.menu .item, .play-button.secondary.pointing.menu .item, .download-button.secondary.pointing.menu .item { border-bottom-color: transparent; border-bottom-style: solid; border-radius: 0em; align-self: flex-end; margin: 0em 0em -2px; padding: 0.85714286em 1.14285714em; border-bottom-width: 2px; transition: color 0.1s ease; } /* Item Types */ .ui.secondary.pointing.menu .header.item, .play-button.secondary.pointing.menu .header.item, .download-button.secondary.pointing.menu .header.item { color: rgba(0, 0, 0, 0.85) !important; } .ui.secondary.pointing.menu .text.item, .play-button.secondary.pointing.menu .text.item, .download-button.secondary.pointing.menu .text.item { box-shadow: none !important; } .ui.secondary.pointing.menu .item:after, .play-button.secondary.pointing.menu .item:after, .download-button.secondary.pointing.menu .item:after { display: none; } /* Hover */ .ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .link.item:hover, .ui.secondary.pointing.menu a.item:hover, .play-button.secondary.pointing.menu .dropdown.item:hover, .play-button.secondary.pointing.menu .link.item:hover, .play-button.secondary.pointing.menu a.item:hover, .download-button.secondary.pointing.menu .dropdown.item:hover, .download-button.secondary.pointing.menu .link.item:hover, .download-button.secondary.pointing.menu a.item:hover { background-color: transparent; color: rgba(0, 0, 0, 0.87); } /* Pressed */ .ui.secondary.pointing.menu .dropdown.item:active, .ui.secondary.pointing.menu .link.item:active, .ui.secondary.pointing.menu a.item:active, .play-button.secondary.pointing.menu .dropdown.item:active, .play-button.secondary.pointing.menu .link.item:active, .play-button.secondary.pointing.menu a.item:active, .download-button.secondary.pointing.menu .dropdown.item:active, .download-button.secondary.pointing.menu .link.item:active, .download-button.secondary.pointing.menu a.item:active { background-color: transparent; border-color: rgba(34, 36, 38, 0.15); } /* Active */ .ui.secondary.pointing.menu .active.item, .play-button.secondary.pointing.menu .active.item, .download-button.secondary.pointing.menu .active.item { background-color: transparent; box-shadow: none; border-color: #1B1C1D; font-weight: bold; color: rgba(0, 0, 0, 0.95); } /* Active Hover */ .ui.secondary.pointing.menu .active.item:hover, .play-button.secondary.pointing.menu .active.item:hover, .download-button.secondary.pointing.menu .active.item:hover { border-color: #1B1C1D; color: rgba(0, 0, 0, 0.95); } /* Active Dropdown */ .ui.secondary.pointing.menu .active.dropdown.item, .play-button.secondary.pointing.menu .active.dropdown.item, .download-button.secondary.pointing.menu .active.dropdown.item { border-color: transparent; } /* Vertical Pointing */ .ui.secondary.vertical.pointing.menu, .play-button.secondary.vertical.pointing.menu, .download-button.secondary.vertical.pointing.menu { border-bottom-width: 0px; border-right-width: 2px; border-right-style: solid; border-right-color: rgba(34, 36, 38, 0.15); } .ui.secondary.vertical.pointing.menu .item, .play-button.secondary.vertical.pointing.menu .item, .download-button.secondary.vertical.pointing.menu .item { border-bottom: none; border-right-style: solid; border-right-color: transparent; border-radius: 0em !important; margin: 0em -2px 0em 0em; border-right-width: 2px; } /* Vertical Active */ .ui.secondary.vertical.pointing.menu .active.item, .play-button.secondary.vertical.pointing.menu .active.item, .download-button.secondary.vertical.pointing.menu .active.item { border-color: #1B1C1D; } /* Inverted */ .ui.secondary.inverted.pointing.menu, .play-button.secondary.inverted.pointing.menu, .download-button.secondary.inverted.pointing.menu { border-color: rgba(255, 255, 255, 0.1); } .ui.secondary.inverted.pointing.menu, .play-button.secondary.inverted.pointing.menu, .download-button.secondary.inverted.pointing.menu { border-width: 2px; border-color: rgba(34, 36, 38, 0.15); } .ui.secondary.inverted.pointing.menu .item, .play-button.secondary.inverted.pointing.menu .item, .download-button.secondary.inverted.pointing.menu .item { color: rgba(255, 255, 255, 0.9); } .ui.secondary.inverted.pointing.menu .header.item, .play-button.secondary.inverted.pointing.menu .header.item, .download-button.secondary.inverted.pointing.menu .header.item { color: #FFFFFF !important; } /* Hover */ .ui.secondary.inverted.pointing.menu .link.item:hover, .ui.secondary.inverted.pointing.menu a.item:hover, .play-button.secondary.inverted.pointing.menu .link.item:hover, .play-button.secondary.inverted.pointing.menu a.item:hover, .download-button.secondary.inverted.pointing.menu .link.item:hover, .download-button.secondary.inverted.pointing.menu a.item:hover { color: rgba(0, 0, 0, 0.95); } /* Active */ .ui.secondary.inverted.pointing.menu .active.item, .play-button.secondary.inverted.pointing.menu .active.item, .download-button.secondary.inverted.pointing.menu .active.item { border-color: #FFFFFF; color: #ffffff; } /*-------------- Text Menu ---------------*/ .ui.text.menu, .play-button.text.menu, .download-button.text.menu { background: none transparent; border-radius: 0px; box-shadow: none; border: none; margin: 1em -0.5em; } .ui.text.menu .item, .play-button.text.menu .item, .download-button.text.menu .item { border-radius: 0px; box-shadow: none; align-self: center; margin: 0em 0em; padding: 0.35714286em 0.5em; font-weight: normal; color: rgba(0, 0, 0, 0.6); transition: opacity 0.1s ease; } /* Border */ .ui.text.menu .item:before, .ui.text.menu .menu .item:before, .play-button.text.menu .item:before, .play-button.text.menu .menu .item:before, .download-button.text.menu .item:before, .download-button.text.menu .menu .item:before { display: none !important; } /* Header */ .ui.text.menu .header.item, .play-button.text.menu .header.item, .download-button.text.menu .header.item { background-color: transparent; opacity: 1; color: rgba(0, 0, 0, 0.85); font-size: 0.92857143em; text-transform: uppercase; font-weight: bold; } /* Image */ .ui.text.menu .item > img:not(.ui), .play-button.text.menu .item > img:not(.ui), .download-button.text.menu .item > img:not(.ui) { margin: 0em; } /*--- fluid text ---*/ .ui.text.item.menu .item, .play-button.text.item.menu .item, .download-button.text.item.menu .item { margin: 0em; } /*--- vertical text ---*/ .ui.vertical.text.menu, .play-button.vertical.text.menu, .download-button.vertical.text.menu { margin: 1em 0em; } .ui.vertical.text.menu:first-child, .play-button.vertical.text.menu:first-child, .download-button.vertical.text.menu:first-child { margin-top: 0rem; } .ui.vertical.text.menu:last-child, .play-button.vertical.text.menu:last-child, .download-button.vertical.text.menu:last-child { margin-bottom: 0rem; } .ui.vertical.text.menu .item, .play-button.vertical.text.menu .item, .download-button.vertical.text.menu .item { margin: 0.57142857em 0em; padding-left: 0em; padding-right: 0em; } .ui.vertical.text.menu .item > i.icon, .play-button.vertical.text.menu .item > i.icon, .download-button.vertical.text.menu .item > i.icon { float: none; margin: 0em 0.35714286em 0em 0em; } .ui.vertical.text.menu .header.item, .play-button.vertical.text.menu .header.item, .download-button.vertical.text.menu .header.item { margin: 0.57142857em 0em 0.71428571em; } /* Vertical Sub Menu */ .ui.vertical.text.menu .item:not(.dropdown) > .menu, .play-button.vertical.text.menu .item:not(.dropdown) > .menu, .download-button.vertical.text.menu .item:not(.dropdown) > .menu { margin: 0em; } .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item, .play-button.vertical.text.menu .item:not(.dropdown) > .menu > .item, .download-button.vertical.text.menu .item:not(.dropdown) > .menu > .item { margin: 0em; padding: 0.5em 0em; } /*--- hover ---*/ .ui.text.menu .item:hover, .play-button.text.menu .item:hover, .download-button.text.menu .item:hover { opacity: 1; background-color: transparent; } /*--- active ---*/ .ui.text.menu .active.item, .play-button.text.menu .active.item, .download-button.text.menu .active.item { background-color: transparent; border: none; box-shadow: none; font-weight: normal; color: rgba(0, 0, 0, 0.95); } /*--- active hover ---*/ .ui.text.menu .active.item:hover, .play-button.text.menu .active.item:hover, .download-button.text.menu .active.item:hover { background-color: transparent; } /* Disable Bariations */ .ui.text.pointing.menu .active.item:after, .play-button.text.pointing.menu .active.item:after, .download-button.text.pointing.menu .active.item:after { box-shadow: none; } .ui.text.attached.menu, .play-button.text.attached.menu, .download-button.text.attached.menu { box-shadow: none; } /* Inverted */ .ui.inverted.text.menu, .ui.inverted.text.menu .item, .ui.inverted.text.menu .item:hover, .ui.inverted.text.menu .active.item, .play-button.inverted.text.menu, .play-button.inverted.text.menu .item, .play-button.inverted.text.menu .item:hover, .play-button.inverted.text.menu .active.item, .download-button.inverted.text.menu, .download-button.inverted.text.menu .item, .download-button.inverted.text.menu .item:hover, .download-button.inverted.text.menu .active.item { background-color: transparent !important; } /* Fluid */ .ui.fluid.text.menu, .play-button.fluid.text.menu, .download-button.fluid.text.menu { margin-left: 0em; margin-right: 0em; } /*-------------- Icon Only ---------------*/ /* Vertical Menu */ .ui.vertical.icon.menu, .play-button.vertical.icon.menu, .download-button.vertical.icon.menu { display: inline-block; width: auto; } /* Item */ .ui.icon.menu .item, .play-button.icon.menu .item, .download-button.icon.menu .item { height: auto; text-align: center; color: #1B1C1D; } /* Icon */ .ui.icon.menu .item > .icon:not(.dropdown), .play-button.icon.menu .item > .icon:not(.dropdown), .download-button.icon.menu .item > .icon:not(.dropdown) { margin: 0; opacity: 1; } /* Icon Gylph */ .ui.icon.menu .icon:before, .play-button.icon.menu .icon:before, .download-button.icon.menu .icon:before { opacity: 1; } /* (x) Item Icon */ .ui.menu .icon.item > .icon, .play-button.menu .icon.item > .icon, .download-button.menu .icon.item > .icon { width: auto; margin: 0em auto; } /* Vertical Icon */ .ui.vertical.icon.menu .item > .icon:not(.dropdown), .play-button.vertical.icon.menu .item > .icon:not(.dropdown), .download-button.vertical.icon.menu .item > .icon:not(.dropdown) { display: block; opacity: 1; margin: 0em auto; float: none; } /* Inverted */ .ui.inverted.icon.menu .item, .play-button.inverted.icon.menu .item, .download-button.inverted.icon.menu .item { color: #FFFFFF; } /*-------------- Labeled Icon ---------------*/ /* Menu */ .ui.labeled.icon.menu, .play-button.labeled.icon.menu, .download-button.labeled.icon.menu { text-align: center; } /* Item */ .ui.labeled.icon.menu .item, .play-button.labeled.icon.menu .item, .download-button.labeled.icon.menu .item { min-width: 6em; flex-direction: column; } /* Icon */ .ui.labeled.icon.menu .item > .icon:not(.dropdown), .play-button.labeled.icon.menu .item > .icon:not(.dropdown), .download-button.labeled.icon.menu .item > .icon:not(.dropdown) { height: 1em; display: block; font-size: 1.71428571em !important; margin: 0em auto 0.5rem !important; } /* Fluid */ .ui.fluid.labeled.icon.menu > .item, .play-button.fluid.labeled.icon.menu > .item, .download-button.fluid.labeled.icon.menu > .item { min-width: 0em; } /******************************* Variations *******************************/ /*-------------- Stackable ---------------*/ @media only screen and (max-width: 767px) { .ui.stackable.menu, .play-button.stackable.menu, .download-button.stackable.menu { flex-direction: column; } .ui.stackable.menu .item, .play-button.stackable.menu .item, .download-button.stackable.menu .item { width: 100% !important; } .ui.stackable.menu .item:before, .play-button.stackable.menu .item:before, .download-button.stackable.menu .item:before { position: absolute; content: ''; top: auto; bottom: 0px; left: 0px; width: 100%; height: 1px; background: rgba(34, 36, 38, 0.1); } .ui.stackable.menu .left.menu, .ui.stackable.menu .left.item, .play-button.stackable.menu .left.menu, .play-button.stackable.menu .left.item, .download-button.stackable.menu .left.menu, .download-button.stackable.menu .left.item { margin-right: 0 !important; } .ui.stackable.menu .right.menu, .ui.stackable.menu .right.item, .play-button.stackable.menu .right.menu, .play-button.stackable.menu .right.item, .download-button.stackable.menu .right.menu, .download-button.stackable.menu .right.item { margin-left: 0 !important; } .ui.stackable.menu .right.menu, .ui.stackable.menu .left.menu, .play-button.stackable.menu .right.menu, .play-button.stackable.menu .left.menu, .download-button.stackable.menu .right.menu, .download-button.stackable.menu .left.menu { flex-direction: column; } } /*-------------- Colors ---------------*/ /*--- Standard Colors ---*/ .ui.menu .red.active.item, .ui.red.menu .active.item, .play-button.menu .red.active.item, .play-button.red.menu .active.item, .download-button.menu .red.active.item, .download-button.red.menu .active.item { border-color: #E81123 !important; color: #E81123 !important; } .ui.menu .orange.active.item, .ui.orange.menu .active.item, .play-button.menu .orange.active.item, .play-button.orange.menu .active.item, .download-button.menu .orange.active.item, .download-button.orange.menu .active.item { border-color: #DF4600 !important; color: #DF4600 !important; } .ui.menu .yellow.active.item, .ui.yellow.menu .active.item, .play-button.menu .yellow.active.item, .play-button.yellow.menu .active.item, .download-button.menu .yellow.active.item, .download-button.yellow.menu .active.item, .ui.menu .download-button.active.item, .ui.download-button.menu .active.item { border-color: #F4C918 !important; color: #F4C918 !important; } .ui.menu .olive.active.item, .ui.olive.menu .active.item, .play-button.menu .olive.active.item, .play-button.olive.menu .active.item, .download-button.menu .olive.active.item, .download-button.olive.menu .active.item { border-color: #B5CC18 !important; color: #B5CC18 !important; } .ui.menu .green.active.item, .ui.green.menu .active.item, .ui.menu .ui.button.getting-started-btn.active.item, .ui.ui.button.getting-started-btn.menu .active.item, .play-button.menu .green.active.item, .play-button.green.menu .active.item, .download-button.menu .green.active.item, .download-button.green.menu .active.item, .ui.menu .play-button.button.getting-started-btn.active.item, .ui.play-button.button.getting-started-btn.menu .active.item, .ui.menu .ui.play-button.getting-started-btn.active.item, .ui.ui.play-button.getting-started-btn.menu .active.item, .ui.menu .download-button.button.getting-started-btn.active.item, .ui.download-button.button.getting-started-btn.menu .active.item, .ui.menu .ui.download-button.getting-started-btn.active.item, .ui.ui.download-button.getting-started-btn.menu .active.item { border-color: #3FC863 !important; color: #3FC863 !important; } .ui.menu .teal.active.item, .ui.teal.menu .active.item, .play-button.menu .teal.active.item, .play-button.teal.menu .active.item, .download-button.menu .teal.active.item, .download-button.teal.menu .active.item { border-color: #008272 !important; color: #008272 !important; } .ui.menu .blue.active.item, .ui.blue.menu .active.item, .play-button.menu .blue.active.item, .play-button.blue.menu .active.item, .ui.menu .play-button.active.item, .ui.play-button.menu .active.item, .download-button.menu .blue.active.item, .download-button.blue.menu .active.item { border-color: #54C9C9 !important; color: #54C9C9 !important; } .ui.menu .violet.active.item, .ui.violet.menu .active.item, .play-button.menu .violet.active.item, .play-button.violet.menu .active.item, .download-button.menu .violet.active.item, .download-button.violet.menu .active.item { border-color: #C90072 !important; color: #C90072 !important; } .ui.menu .purple.active.item, .ui.purple.menu .active.item, .play-button.menu .purple.active.item, .play-button.purple.menu .active.item, .download-button.menu .purple.active.item, .download-button.purple.menu .active.item { border-color: #8169E6 !important; color: #8169E6 !important; } .ui.menu .pink.active.item, .ui.pink.menu .active.item, .play-button.menu .pink.active.item, .play-button.pink.menu .active.item, .download-button.menu .pink.active.item, .download-button.pink.menu .active.item { border-color: #E2008C !important; color: #E2008C !important; } .ui.menu .brown.active.item, .ui.brown.menu .active.item, .play-button.menu .brown.active.item, .play-button.brown.menu .active.item, .download-button.menu .brown.active.item, .download-button.brown.menu .active.item { border-color: #6B5B4C !important; color: #6B5B4C !important; } .ui.menu .grey.active.item, .ui.grey.menu .active.item, .ui.menu .ui.button.editortools-btn.active.item, .ui.ui.button.editortools-btn.menu .active.item, .play-button.menu .grey.active.item, .play-button.grey.menu .active.item, .download-button.menu .grey.active.item, .download-button.grey.menu .active.item, .ui.menu .play-button.button.editortools-btn.active.item, .ui.play-button.button.editortools-btn.menu .active.item, .ui.menu .ui.play-button.editortools-btn.active.item, .ui.ui.play-button.editortools-btn.menu .active.item, .ui.menu .download-button.button.editortools-btn.active.item, .ui.download-button.button.editortools-btn.menu .active.item, .ui.menu .ui.download-button.editortools-btn.active.item, .ui.ui.download-button.editortools-btn.menu .active.item { border-color: #42495F !important; color: #42495F !important; } /*-------------- Inverted ---------------*/ .ui.inverted.menu, .play-button.inverted.menu, .download-button.inverted.menu { border: 0px solid transparent; background: #525A67; box-shadow: none; } /* Menu Item */ .ui.inverted.menu .item, .ui.inverted.menu .item > a:not(.ui), .play-button.inverted.menu .item, .play-button.inverted.menu .item > a:not(.ui), .download-button.inverted.menu .item, .download-button.inverted.menu .item > a:not(.ui) { background: transparent; color: rgba(255, 255, 255, 0.9); } .ui.inverted.menu .item.menu, .play-button.inverted.menu .item.menu, .download-button.inverted.menu .item.menu { background: transparent; } /*--- Border ---*/ .ui.inverted.menu .item:before, .play-button.inverted.menu .item:before, .download-button.inverted.menu .item:before { background: rgba(255, 255, 255, 0.08); } .ui.vertical.inverted.menu .item:before, .play-button.vertical.inverted.menu .item:before, .download-button.vertical.inverted.menu .item:before { background: rgba(255, 255, 255, 0.08); } /* Sub Menu */ .ui.vertical.inverted.menu .menu .item, .ui.vertical.inverted.menu .menu .item a:not(.ui), .play-button.vertical.inverted.menu .menu .item, .play-button.vertical.inverted.menu .menu .item a:not(.ui), .download-button.vertical.inverted.menu .menu .item, .download-button.vertical.inverted.menu .menu .item a:not(.ui) { color: rgba(255, 255, 255, 0.5); } /* Header */ .ui.inverted.menu .header.item, .play-button.inverted.menu .header.item, .download-button.inverted.menu .header.item { margin: 0em; background: transparent; box-shadow: none; } /* Disabled */ .ui.inverted.menu .item.disabled, .ui.inverted.menu .item.disabled:hover, .play-button.inverted.menu .item.disabled, .play-button.inverted.menu .item.disabled:hover, .download-button.inverted.menu .item.disabled, .download-button.inverted.menu .item.disabled:hover { color: rgba(225, 225, 225, 0.3); } /*--- Hover ---*/ .ui.link.inverted.menu .item:hover, .ui.inverted.menu .dropdown.item:hover, .ui.inverted.menu .link.item:hover, .ui.inverted.menu a.item:hover, .play-button.link.inverted.menu .item:hover, .play-button.inverted.menu .dropdown.item:hover, .play-button.inverted.menu .link.item:hover, .play-button.inverted.menu a.item:hover, .download-button.link.inverted.menu .item:hover, .download-button.inverted.menu .dropdown.item:hover, .download-button.inverted.menu .link.item:hover, .download-button.inverted.menu a.item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .ui.vertical.inverted.menu .item .menu a.item:hover, .ui.vertical.inverted.menu .item .menu .link.item:hover, .play-button.vertical.inverted.menu .item .menu a.item:hover, .play-button.vertical.inverted.menu .item .menu .link.item:hover, .download-button.vertical.inverted.menu .item .menu a.item:hover, .download-button.vertical.inverted.menu .item .menu .link.item:hover { background: transparent; color: #ffffff; } /*--- Pressed ---*/ .ui.inverted.menu a.item:active, .ui.inverted.menu .link.item:active, .play-button.inverted.menu a.item:active, .play-button.inverted.menu .link.item:active, .download-button.inverted.menu a.item:active, .download-button.inverted.menu .link.item:active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /*--- Active ---*/ .ui.inverted.menu .active.item, .play-button.inverted.menu .active.item, .download-button.inverted.menu .active.item { background: rgba(255, 255, 255, 0.15); color: #ffffff !important; } .ui.inverted.vertical.menu .item .menu .active.item, .play-button.inverted.vertical.menu .item .menu .active.item, .download-button.inverted.vertical.menu .item .menu .active.item { background: transparent; color: #FFFFFF; } .ui.inverted.pointing.menu .active.item:after, .play-button.inverted.pointing.menu .active.item:after, .download-button.inverted.pointing.menu .active.item:after { background: #3D3E3F !important; margin: 0em !important; box-shadow: none !important; border: none !important; } /*--- Active Hover ---*/ .ui.inverted.menu .active.item:hover, .play-button.inverted.menu .active.item:hover, .download-button.inverted.menu .active.item:hover { background: rgba(255, 255, 255, 0.15); color: #FFFFFF !important; } .ui.inverted.pointing.menu .active.item:hover:after, .play-button.inverted.pointing.menu .active.item:hover:after, .download-button.inverted.pointing.menu .active.item:hover:after { background: #3D3E3F !important; } /*-------------- Floated ---------------*/ .ui.floated.menu, .play-button.floated.menu, .download-button.floated.menu { float: left; margin: 0rem 0.5rem 0rem 0rem; } .ui.floated.menu .item:last-child:before, .play-button.floated.menu .item:last-child:before, .download-button.floated.menu .item:last-child:before { display: none; } .ui.right.floated.menu, .play-button.right.floated.menu, .download-button.right.floated.menu { float: right; margin: 0rem 0rem 0rem 0.5rem; } /*-------------- Inverted ---------------*/ /* Red */ .ui.inverted.menu .red.active.item, .ui.inverted.red.menu, .play-button.inverted.menu .red.active.item, .play-button.inverted.red.menu, .download-button.inverted.menu .red.active.item, .download-button.inverted.red.menu { background-color: #E81123; } .ui.inverted.red.menu .item:before, .play-button.inverted.red.menu .item:before, .download-button.inverted.red.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.red.menu .active.item, .play-button.inverted.red.menu .active.item, .download-button.inverted.red.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Orange */ .ui.inverted.menu .orange.active.item, .ui.inverted.orange.menu, .play-button.inverted.menu .orange.active.item, .play-button.inverted.orange.menu, .download-button.inverted.menu .orange.active.item, .download-button.inverted.orange.menu { background-color: #DF4600; } .ui.inverted.orange.menu .item:before, .play-button.inverted.orange.menu .item:before, .download-button.inverted.orange.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.orange.menu .active.item, .play-button.inverted.orange.menu .active.item, .download-button.inverted.orange.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Yellow */ .ui.inverted.menu .yellow.active.item, .ui.inverted.yellow.menu, .play-button.inverted.menu .yellow.active.item, .play-button.inverted.yellow.menu, .download-button.inverted.menu .yellow.active.item, .download-button.inverted.yellow.menu, .ui.inverted.menu .download-button.active.item, .ui.inverted.download-button.menu { background-color: #F4C918; } .ui.inverted.yellow.menu .item:before, .play-button.inverted.yellow.menu .item:before, .download-button.inverted.yellow.menu .item:before, .ui.inverted.download-button.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.yellow.menu .active.item, .play-button.inverted.yellow.menu .active.item, .download-button.inverted.yellow.menu .active.item, .ui.inverted.download-button.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Olive */ .ui.inverted.menu .olive.active.item, .ui.inverted.olive.menu, .play-button.inverted.menu .olive.active.item, .play-button.inverted.olive.menu, .download-button.inverted.menu .olive.active.item, .download-button.inverted.olive.menu { background-color: #B5CC18; } .ui.inverted.olive.menu .item:before, .play-button.inverted.olive.menu .item:before, .download-button.inverted.olive.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.olive.menu .active.item, .play-button.inverted.olive.menu .active.item, .download-button.inverted.olive.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Green */ .ui.inverted.menu .green.active.item, .ui.inverted.green.menu, .ui.inverted.menu .ui.button.getting-started-btn.active.item, .ui.inverted.ui.button.getting-started-btn.menu, .play-button.inverted.menu .green.active.item, .play-button.inverted.green.menu, .download-button.inverted.menu .green.active.item, .download-button.inverted.green.menu, .ui.inverted.menu .play-button.button.getting-started-btn.active.item, .ui.inverted.play-button.button.getting-started-btn.menu, .ui.inverted.menu .ui.play-button.getting-started-btn.active.item, .ui.inverted.ui.play-button.getting-started-btn.menu, .ui.inverted.menu .download-button.button.getting-started-btn.active.item, .ui.inverted.download-button.button.getting-started-btn.menu, .ui.inverted.menu .ui.download-button.getting-started-btn.active.item, .ui.inverted.ui.download-button.getting-started-btn.menu { background-color: #3FC863; } .ui.inverted.green.menu .item:before, .ui.inverted.ui.button.getting-started-btn.menu .item:before, .play-button.inverted.green.menu .item:before, .download-button.inverted.green.menu .item:before, .ui.inverted.play-button.button.getting-started-btn.menu .item:before, .ui.inverted.ui.play-button.getting-started-btn.menu .item:before, .ui.inverted.download-button.button.getting-started-btn.menu .item:before, .ui.inverted.ui.download-button.getting-started-btn.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.green.menu .active.item, .ui.inverted.ui.button.getting-started-btn.menu .active.item, .play-button.inverted.green.menu .active.item, .download-button.inverted.green.menu .active.item, .ui.inverted.play-button.button.getting-started-btn.menu .active.item, .ui.inverted.ui.play-button.getting-started-btn.menu .active.item, .ui.inverted.download-button.button.getting-started-btn.menu .active.item, .ui.inverted.ui.download-button.getting-started-btn.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Teal */ .ui.inverted.menu .teal.active.item, .ui.inverted.teal.menu, .play-button.inverted.menu .teal.active.item, .play-button.inverted.teal.menu, .download-button.inverted.menu .teal.active.item, .download-button.inverted.teal.menu { background-color: #008272; } .ui.inverted.teal.menu .item:before, .play-button.inverted.teal.menu .item:before, .download-button.inverted.teal.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.teal.menu .active.item, .play-button.inverted.teal.menu .active.item, .download-button.inverted.teal.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Blue */ .ui.inverted.menu .blue.active.item, .ui.inverted.blue.menu, .play-button.inverted.menu .blue.active.item, .play-button.inverted.blue.menu, .ui.inverted.menu .play-button.active.item, .ui.inverted.play-button.menu, .download-button.inverted.menu .blue.active.item, .download-button.inverted.blue.menu { background-color: #54C9C9; } .ui.inverted.blue.menu .item:before, .play-button.inverted.blue.menu .item:before, .ui.inverted.play-button.menu .item:before, .download-button.inverted.blue.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.blue.menu .active.item, .play-button.inverted.blue.menu .active.item, .ui.inverted.play-button.menu .active.item, .download-button.inverted.blue.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Violet */ .ui.inverted.menu .violet.active.item, .ui.inverted.violet.menu, .play-button.inverted.menu .violet.active.item, .play-button.inverted.violet.menu, .download-button.inverted.menu .violet.active.item, .download-button.inverted.violet.menu { background-color: #C90072; } .ui.inverted.violet.menu .item:before, .play-button.inverted.violet.menu .item:before, .download-button.inverted.violet.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.violet.menu .active.item, .play-button.inverted.violet.menu .active.item, .download-button.inverted.violet.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Purple */ .ui.inverted.menu .purple.active.item, .ui.inverted.purple.menu, .play-button.inverted.menu .purple.active.item, .play-button.inverted.purple.menu, .download-button.inverted.menu .purple.active.item, .download-button.inverted.purple.menu { background-color: #8169E6; } .ui.inverted.purple.menu .item:before, .play-button.inverted.purple.menu .item:before, .download-button.inverted.purple.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.purple.menu .active.item, .play-button.inverted.purple.menu .active.item, .download-button.inverted.purple.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Pink */ .ui.inverted.menu .pink.active.item, .ui.inverted.pink.menu, .play-button.inverted.menu .pink.active.item, .play-button.inverted.pink.menu, .download-button.inverted.menu .pink.active.item, .download-button.inverted.pink.menu { background-color: #E2008C; } .ui.inverted.pink.menu .item:before, .play-button.inverted.pink.menu .item:before, .download-button.inverted.pink.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.pink.menu .active.item, .play-button.inverted.pink.menu .active.item, .download-button.inverted.pink.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Brown */ .ui.inverted.menu .brown.active.item, .ui.inverted.brown.menu, .play-button.inverted.menu .brown.active.item, .play-button.inverted.brown.menu, .download-button.inverted.menu .brown.active.item, .download-button.inverted.brown.menu { background-color: #6B5B4C; } .ui.inverted.brown.menu .item:before, .play-button.inverted.brown.menu .item:before, .download-button.inverted.brown.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.brown.menu .active.item, .play-button.inverted.brown.menu .active.item, .download-button.inverted.brown.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /* Grey */ .ui.inverted.menu .grey.active.item, .ui.inverted.grey.menu, .ui.inverted.menu .ui.button.editortools-btn.active.item, .ui.inverted.ui.button.editortools-btn.menu, .play-button.inverted.menu .grey.active.item, .play-button.inverted.grey.menu, .download-button.inverted.menu .grey.active.item, .download-button.inverted.grey.menu, .ui.inverted.menu .play-button.button.editortools-btn.active.item, .ui.inverted.play-button.button.editortools-btn.menu, .ui.inverted.menu .ui.play-button.editortools-btn.active.item, .ui.inverted.ui.play-button.editortools-btn.menu, .ui.inverted.menu .download-button.button.editortools-btn.active.item, .ui.inverted.download-button.button.editortools-btn.menu, .ui.inverted.menu .ui.download-button.editortools-btn.active.item, .ui.inverted.ui.download-button.editortools-btn.menu { background-color: #42495F; } .ui.inverted.grey.menu .item:before, .ui.inverted.ui.button.editortools-btn.menu .item:before, .play-button.inverted.grey.menu .item:before, .download-button.inverted.grey.menu .item:before, .ui.inverted.play-button.button.editortools-btn.menu .item:before, .ui.inverted.ui.play-button.editortools-btn.menu .item:before, .ui.inverted.download-button.button.editortools-btn.menu .item:before, .ui.inverted.ui.download-button.editortools-btn.menu .item:before { background-color: rgba(34, 36, 38, 0.1); } .ui.inverted.grey.menu .active.item, .ui.inverted.ui.button.editortools-btn.menu .active.item, .play-button.inverted.grey.menu .active.item, .download-button.inverted.grey.menu .active.item, .ui.inverted.play-button.button.editortools-btn.menu .active.item, .ui.inverted.ui.play-button.editortools-btn.menu .active.item, .ui.inverted.download-button.button.editortools-btn.menu .active.item, .ui.inverted.ui.download-button.editortools-btn.menu .active.item { background-color: rgba(0, 0, 0, 0.1) !important; } /*-------------- Fitted ---------------*/ .ui.fitted.menu .item, .ui.fitted.menu .item .menu .item, .ui.menu .fitted.item, .play-button.fitted.menu .item, .play-button.fitted.menu .item .menu .item, .play-button.menu .fitted.item, .download-button.fitted.menu .item, .download-button.fitted.menu .item .menu .item, .download-button.menu .fitted.item { padding: 0em; } .ui.horizontally.fitted.menu .item, .ui.horizontally.fitted.menu .item .menu .item, .ui.menu .horizontally.fitted.item, .play-button.horizontally.fitted.menu .item, .play-button.horizontally.fitted.menu .item .menu .item, .play-button.menu .horizontally.fitted.item, .download-button.horizontally.fitted.menu .item, .download-button.horizontally.fitted.menu .item .menu .item, .download-button.menu .horizontally.fitted.item { padding-top: 0.92857143em; padding-bottom: 0.92857143em; } .ui.vertically.fitted.menu .item, .ui.vertically.fitted.menu .item .menu .item, .ui.menu .vertically.fitted.item, .play-button.vertically.fitted.menu .item, .play-button.vertically.fitted.menu .item .menu .item, .play-button.menu .vertically.fitted.item, .download-button.vertically.fitted.menu .item, .download-button.vertically.fitted.menu .item .menu .item, .download-button.menu .vertically.fitted.item { padding-left: 1.14285714em; padding-right: 1.14285714em; } /*-------------- Borderless ---------------*/ .ui.borderless.menu .item:before, .ui.borderless.menu .item .menu .item:before, .ui.menu .borderless.item:before, .play-button.borderless.menu .item:before, .play-button.borderless.menu .item .menu .item:before, .play-button.menu .borderless.item:before, .download-button.borderless.menu .item:before, .download-button.borderless.menu .item .menu .item:before, .download-button.menu .borderless.item:before { background: none !important; } /*------------------- Compact --------------------*/ .ui.compact.menu, .play-button.compact.menu, .download-button.compact.menu { display: inline-flex; margin: 0em; vertical-align: middle; } .ui.compact.vertical.menu, .play-button.compact.vertical.menu, .download-button.compact.vertical.menu { display: inline-block; } .ui.compact.menu .item:last-child, .play-button.compact.menu .item:last-child, .download-button.compact.menu .item:last-child { border-radius: 0em 0.28571429rem 0.28571429rem 0em; } .ui.compact.menu .item:last-child:before, .play-button.compact.menu .item:last-child:before, .download-button.compact.menu .item:last-child:before { display: none; } .ui.compact.vertical.menu, .play-button.compact.vertical.menu, .download-button.compact.vertical.menu { width: auto !important; } .ui.compact.vertical.menu .item:last-child::before, .play-button.compact.vertical.menu .item:last-child::before, .download-button.compact.vertical.menu .item:last-child::before { display: block; } /*------------------- Fluid --------------------*/ .ui.menu.fluid, .ui.vertical.menu.fluid, .play-button.menu.fluid, .play-button.vertical.menu.fluid, .download-button.menu.fluid, .download-button.vertical.menu.fluid { width: 100% !important; } /*------------------- Evenly Sized --------------------*/ .ui.item.menu, .ui.item.menu .item, .play-button.item.menu, .play-button.item.menu .item, .download-button.item.menu, .download-button.item.menu .item { width: 100%; padding-left: 0em !important; padding-right: 0em !important; margin-left: 0em !important; margin-right: 0em !important; text-align: center; justify-content: center; } .ui.attached.item.menu, .play-button.attached.item.menu, .download-button.attached.item.menu { margin: 0em -1px !important; } .ui.item.menu .item:last-child:before, .play-button.item.menu .item:last-child:before, .download-button.item.menu .item:last-child:before { display: none; } .ui.menu.two.item .item, .play-button.menu.two.item .item, .download-button.menu.two.item .item { width: 50%; } .ui.menu.three.item .item, .play-button.menu.three.item .item, .download-button.menu.three.item .item { width: 33.333%; } .ui.menu.four.item .item, .play-button.menu.four.item .item, .download-button.menu.four.item .item { width: 25%; } .ui.menu.five.item .item, .play-button.menu.five.item .item, .download-button.menu.five.item .item { width: 20%; } .ui.menu.six.item .item, .play-button.menu.six.item .item, .download-button.menu.six.item .item { width: 16.666%; } .ui.menu.seven.item .item, .play-button.menu.seven.item .item, .download-button.menu.seven.item .item { width: 14.285%; } .ui.menu.eight.item .item, .play-button.menu.eight.item .item, .download-button.menu.eight.item .item { width: 12.500%; } .ui.menu.nine.item .item, .play-button.menu.nine.item .item, .download-button.menu.nine.item .item { width: 11.11%; } .ui.menu.ten.item .item, .play-button.menu.ten.item .item, .download-button.menu.ten.item .item { width: 10.0%; } .ui.menu.eleven.item .item, .play-button.menu.eleven.item .item, .download-button.menu.eleven.item .item { width: 9.09%; } .ui.menu.twelve.item .item, .play-button.menu.twelve.item .item, .download-button.menu.twelve.item .item { width: 8.333%; } /*-------------- Fixed ---------------*/ .ui.menu.fixed, .play-button.menu.fixed, .download-button.menu.fixed { position: fixed; z-index: 101; margin: 0em; width: 100%; } .ui.menu.fixed, .ui.menu.fixed .item:first-child, .ui.menu.fixed .item:last-child, .play-button.menu.fixed, .play-button.menu.fixed .item:first-child, .play-button.menu.fixed .item:last-child, .download-button.menu.fixed, .download-button.menu.fixed .item:first-child, .download-button.menu.fixed .item:last-child { border-radius: 0px !important; } .ui.fixed.menu, .ui[class*="top fixed"].menu, .play-button.fixed.menu, .play-button[class*="top fixed"].menu, .download-button.fixed.menu, .download-button[class*="top fixed"].menu { top: 0px; left: 0px; right: auto; bottom: auto; } .ui[class*="top fixed"].menu, .play-button[class*="top fixed"].menu, .download-button[class*="top fixed"].menu { border-top: none; border-left: none; border-right: none; } .ui[class*="right fixed"].menu, .play-button[class*="right fixed"].menu, .download-button[class*="right fixed"].menu { border-top: none; border-bottom: none; border-right: none; top: 0px; right: 0px; left: auto; bottom: auto; width: auto; height: 100%; } .ui[class*="bottom fixed"].menu, .play-button[class*="bottom fixed"].menu, .download-button[class*="bottom fixed"].menu { border-bottom: none; border-left: none; border-right: none; bottom: 0px; left: 0px; top: auto; right: auto; } .ui[class*="left fixed"].menu, .play-button[class*="left fixed"].menu, .download-button[class*="left fixed"].menu { border-top: none; border-bottom: none; border-left: none; top: 0px; left: 0px; right: auto; bottom: auto; width: auto; height: 100%; } /* Coupling with Grid */ .ui.fixed.menu + .ui.grid, .play-button.fixed.menu + .play-button.grid, .download-button.fixed.menu + .download-button.grid { padding-top: 2.75rem; } /*------------------- Pointing --------------------*/ .ui.pointing.menu .item:after, .play-button.pointing.menu .item:after, .download-button.pointing.menu .item:after { visibility: hidden; position: absolute; content: ''; top: 100%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); background: none; margin: 0.5px 0em 0em; width: 0.57142857em; height: 0.57142857em; border: none; border-bottom: 1px solid #D4D4D5; border-right: 1px solid #D4D4D5; z-index: 2; transition: background 0.1s ease; } .ui.vertical.pointing.menu .item:after, .play-button.vertical.pointing.menu .item:after, .download-button.vertical.pointing.menu .item:after { position: absolute; top: 50%; right: 0%; bottom: auto; left: auto; transform: translateX(50%) translateY(-50%) rotate(45deg); margin: 0em -0.5px 0em 0em; border: none; border-top: 1px solid #D4D4D5; border-right: 1px solid #D4D4D5; } /* Active */ .ui.pointing.menu .active.item:after, .play-button.pointing.menu .active.item:after, .download-button.pointing.menu .active.item:after { visibility: visible; } .ui.pointing.menu .active.dropdown.item:after, .play-button.pointing.menu .active.dropdown.item:after, .download-button.pointing.menu .active.dropdown.item:after { visibility: hidden; } /* Don't double up pointers */ .ui.pointing.menu .dropdown.active.item:after, .ui.pointing.menu .active.item .menu .active.item:after, .play-button.pointing.menu .dropdown.active.item:after, .play-button.pointing.menu .active.item .menu .active.item:after, .download-button.pointing.menu .dropdown.active.item:after, .download-button.pointing.menu .active.item .menu .active.item:after { display: none; } /* Colors */ .ui.pointing.menu .active.item:hover:after, .play-button.pointing.menu .active.item:hover:after, .download-button.pointing.menu .active.item:hover:after { background-color: #F2F2F2; } .ui.pointing.menu .active.item:after, .play-button.pointing.menu .active.item:after, .download-button.pointing.menu .active.item:after { background-color: #F2F2F2; } .ui.pointing.menu .active.item:hover:after, .play-button.pointing.menu .active.item:hover:after, .download-button.pointing.menu .active.item:hover:after { background-color: #F2F2F2; } .ui.vertical.pointing.menu .active.item:hover:after, .play-button.vertical.pointing.menu .active.item:hover:after, .download-button.vertical.pointing.menu .active.item:hover:after { background-color: #F2F2F2; } .ui.vertical.pointing.menu .active.item:after, .play-button.vertical.pointing.menu .active.item:after, .download-button.vertical.pointing.menu .active.item:after { background-color: #F2F2F2; } .ui.vertical.pointing.menu .menu .active.item:after, .play-button.vertical.pointing.menu .menu .active.item:after, .download-button.vertical.pointing.menu .menu .active.item:after { background-color: #FFFFFF; } /*-------------- Attached ---------------*/ /* Middle */ .ui.attached.menu, .play-button.attached.menu, .download-button.attached.menu { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em -1px; width: calc(100% + 2px ); max-width: calc(100% + 2px ); box-shadow: none; } .ui.attached + .ui.attached.menu:not(.top), .play-button.attached + .play-button.attached.menu:not(.top), .download-button.attached + .download-button.attached.menu:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].menu, .play-button[class*="top attached"].menu, .download-button[class*="top attached"].menu { bottom: 0px; margin-bottom: 0em; top: 0px; margin-top: 1rem; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.menu[class*="top attached"]:first-child, .play-button.menu[class*="top attached"]:first-child, .download-button.menu[class*="top attached"]:first-child { margin-top: 0em; } /* Bottom */ .ui[class*="bottom attached"].menu, .play-button[class*="bottom attached"].menu, .download-button[class*="bottom attached"].menu { bottom: 0px; margin-top: 0em; top: 0px; margin-bottom: 1rem; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui[class*="bottom attached"].menu:last-child, .play-button[class*="bottom attached"].menu:last-child, .download-button[class*="bottom attached"].menu:last-child { margin-bottom: 0em; } /* Attached Menu Item */ .ui.top.attached.menu > .item:first-child, .play-button.top.attached.menu > .item:first-child, .download-button.top.attached.menu > .item:first-child { border-radius: 0.28571429rem 0em 0em 0em; } .ui.bottom.attached.menu > .item:first-child, .play-button.bottom.attached.menu > .item:first-child, .download-button.bottom.attached.menu > .item:first-child { border-radius: 0em 0em 0em 0.28571429rem; } /* Tabular Attached */ .ui.attached.menu:not(.tabular), .play-button.attached.menu:not(.tabular), .download-button.attached.menu:not(.tabular) { border: 1px solid #D4D4D5; } .ui.attached.inverted.menu, .play-button.attached.inverted.menu, .download-button.attached.inverted.menu { border: none; } .ui.attached.tabular.menu, .play-button.attached.tabular.menu, .download-button.attached.tabular.menu { margin-left: 0; margin-right: 0; width: 100%; } /*-------------- Sizes ---------------*/ /* Mini */ .ui.mini.menu, .play-button.mini.menu, .download-button.mini.menu { font-size: 0.78571429rem; } .ui.mini.vertical.menu, .play-button.mini.vertical.menu, .download-button.mini.vertical.menu { width: 9rem; } /* Tiny */ .ui.tiny.menu, .play-button.tiny.menu, .download-button.tiny.menu { font-size: 0.85714286rem; } .ui.tiny.vertical.menu, .play-button.tiny.vertical.menu, .download-button.tiny.vertical.menu { width: 11rem; } /* Small */ .ui.small.menu, .play-button.small.menu, .download-button.small.menu { font-size: 0.92857143rem; } .ui.small.vertical.menu, .play-button.small.vertical.menu, .download-button.small.vertical.menu { width: 13rem; } /* Medium */ .ui.menu, .play-button.menu, .download-button.menu { font-size: 1rem; } .ui.vertical.menu, .play-button.vertical.menu, .download-button.vertical.menu { width: 15rem; } /* Large */ .ui.large.menu, .play-button.large.menu, .download-button.large.menu { font-size: 1.07142857rem; } .ui.large.vertical.menu, .play-button.large.vertical.menu, .download-button.large.vertical.menu { width: 18rem; } /* Huge */ .ui.huge.menu, .play-button.huge.menu, .download-button.huge.menu { font-size: 1.14285714rem; } .ui.huge.vertical.menu, .play-button.huge.vertical.menu, .download-button.huge.vertical.menu { width: 20rem; } /* Big */ .ui.big.menu, .play-button.big.menu, .download-button.big.menu { font-size: 1.21428571rem; } .ui.big.vertical.menu, .play-button.big.vertical.menu, .download-button.big.vertical.menu { width: 22rem; } /* Massive */ .ui.massive.menu, .play-button.massive.menu, .download-button.massive.menu { font-size: 1.28571429rem; } .ui.massive.vertical.menu, .play-button.massive.vertical.menu, .download-button.massive.vertical.menu { width: 25rem; } /******************************* Site Overrides *******************************/ #menubar { position: absolute; left: 0; top: 0; right: 0; } #menubar .ui.menu, #menubar .play-button.menu, #menubar .download-button.menu { height: 5rem; min-height: 3.85714286em !important; } #menubar .item > .button, #menubar .item > .play-button, #menubar .item > .download-button { margin-right: 0.25rem; } @media only screen and (max-width: 991px) { #menubar .ui.menu, #menubar .play-button.menu, #menubar .download-button.menu { height: 5rem !important; min-height: 5rem !important; } } .ui.inverted.menu .active.item, .play-button.inverted.menu .active.item, .download-button.inverted.menu .active.item { background: rgba(255, 255, 255, 0.3); } /* Tutorial mode */ .tutorial .ui.inverted.menu, .tutorial .play-button.inverted.menu, .tutorial .download-button.inverted.menu { background: #DF4600 !important; } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Message * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /* Colors */ /* Warning / Positive / Negative / Info */ /* Packaged Theme */ /******************************* Message *******************************/ /*------------------- Elements --------------------*/ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /*------------------- Types --------------------*/ /* Icon Message */ /* Attached */ /* Floating */ /* Colors */ /* Warning / Positive / Negative / Info */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Message *******************************/ .ui.message, .play-button.message, .download-button.message { position: relative; min-height: 1em; margin: 1em 0em; background: #F8F8F9; padding: 1em 1.5em; line-height: 1.4285em; color: rgba(0, 0, 0, 0.87); transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; border-radius: 0.28571429rem; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.message:first-child, .play-button.message:first-child, .download-button.message:first-child { margin-top: 0em; } .ui.message:last-child, .play-button.message:last-child, .download-button.message:last-child { margin-bottom: 0em; } /*-------------- Content ---------------*/ /* Header */ .ui.message .header, .play-button.message .header, .download-button.message .header { display: block; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; margin: -0.14285714em 0em 0rem 0em; } /* Default font size */ .ui.message .header:not(.ui), .play-button.message .header:not(.ui), .download-button.message .header:not(.ui) { font-size: 1.14285714em; } /* Paragraph */ .ui.message p, .play-button.message p, .download-button.message p { opacity: 0.85; margin: 0.75em 0em; } .ui.message p:first-child, .play-button.message p:first-child, .download-button.message p:first-child { margin-top: 0em; } .ui.message p:last-child, .play-button.message p:last-child, .download-button.message p:last-child { margin-bottom: 0em; } .ui.message .header + p, .play-button.message .header + p, .download-button.message .header + p { margin-top: 0.25em; } /* List */ .ui.message .list:not(.ui), .play-button.message .list:not(.ui), .download-button.message .list:not(.ui) { text-align: left; padding: 0em; opacity: 0.85; list-style-position: inside; margin: 0.5em 0em 0em; } .ui.message .list:not(.ui):first-child, .play-button.message .list:not(.ui):first-child, .download-button.message .list:not(.ui):first-child { margin-top: 0em; } .ui.message .list:not(.ui):last-child, .play-button.message .list:not(.ui):last-child, .download-button.message .list:not(.ui):last-child { margin-bottom: 0em; } .ui.message .list:not(.ui) li, .play-button.message .list:not(.ui) li, .download-button.message .list:not(.ui) li { position: relative; list-style-type: none; margin: 0em 0em 0.3em 1em; padding: 0em; } .ui.message .list:not(.ui) li:before, .play-button.message .list:not(.ui) li:before, .download-button.message .list:not(.ui) li:before { position: absolute; content: '•'; left: -1em; height: 100%; vertical-align: baseline; } .ui.message .list:not(.ui) li:last-child, .play-button.message .list:not(.ui) li:last-child, .download-button.message .list:not(.ui) li:last-child { margin-bottom: 0em; } /* Icon */ .ui.message > .icon, .play-button.message > .icon, .download-button.message > .icon { margin-right: 0.6em; } /* Close Icon */ .ui.message > .close.icon, .play-button.message > .close.icon, .download-button.message > .close.icon { cursor: pointer; position: absolute; margin: 0em; top: 0.78575em; right: 0.5em; opacity: 0.7; transition: opacity 0.1s ease; } .ui.message > .close.icon:hover, .play-button.message > .close.icon:hover, .download-button.message > .close.icon:hover { opacity: 1; } /* First / Last Element */ .ui.message > :first-child, .play-button.message > :first-child, .download-button.message > :first-child { margin-top: 0em; } .ui.message > :last-child, .play-button.message > :last-child, .download-button.message > :last-child { margin-bottom: 0em; } /******************************* Coupling *******************************/ .ui.dropdown .menu > .message, .play-button.dropdown .menu > .message, .download-button.dropdown .menu > .message { margin: 0px -1px; } /******************************* States *******************************/ /*-------------- Visible ---------------*/ .ui.visible.visible.visible.visible.message, .play-button.visible.visible.visible.visible.message, .download-button.visible.visible.visible.visible.message { display: block; } .ui.icon.visible.visible.visible.visible.message, .play-button.icon.visible.visible.visible.visible.message, .download-button.icon.visible.visible.visible.visible.message { display: flex; } /*-------------- Hidden ---------------*/ .ui.hidden.hidden.hidden.hidden.message, .play-button.hidden.hidden.hidden.hidden.message, .download-button.hidden.hidden.hidden.hidden.message { display: none; } /******************************* Variations *******************************/ /*-------------- Compact ---------------*/ .ui.compact.message, .play-button.compact.message, .download-button.compact.message { display: inline-block; } .ui.compact.icon.message, .play-button.compact.icon.message, .download-button.compact.icon.message { display: inline-flex; } /*-------------- Attached ---------------*/ .ui.attached.message, .play-button.attached.message, .download-button.attached.message { margin-bottom: -1px; border-radius: 0.28571429rem 0.28571429rem 0em 0em; box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset; margin-left: -1px; margin-right: -1px; } .ui.attached + .ui.attached.message:not(.top):not(.bottom), .play-button.attached + .play-button.attached.message:not(.top):not(.bottom), .download-button.attached + .download-button.attached.message:not(.top):not(.bottom) { margin-top: -1px; border-radius: 0em; } .ui.bottom.attached.message, .play-button.bottom.attached.message, .download-button.bottom.attached.message { margin-top: -1px; border-radius: 0em 0em 0.28571429rem 0.28571429rem; box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15); } .ui.bottom.attached.message:not(:last-child), .play-button.bottom.attached.message:not(:last-child), .download-button.bottom.attached.message:not(:last-child) { margin-bottom: 1em; } .ui.attached.icon.message, .play-button.attached.icon.message, .download-button.attached.icon.message { width: auto; } /*-------------- Icon ---------------*/ .ui.icon.message, .play-button.icon.message, .download-button.icon.message { display: flex; width: 100%; align-items: center; } .ui.icon.message > .icon:not(.close), .play-button.icon.message > .icon:not(.close), .download-button.icon.message > .icon:not(.close) { display: block; flex: 0 0 auto; width: auto; line-height: 1; vertical-align: middle; font-size: 3em; opacity: 0.8; } .ui.icon.message > .content, .play-button.icon.message > .content, .download-button.icon.message > .content { display: block; flex: 1 1 auto; vertical-align: middle; } .ui.icon.message .icon:not(.close) + .content, .play-button.icon.message .icon:not(.close) + .content, .download-button.icon.message .icon:not(.close) + .content { padding-left: 0rem; } .ui.icon.message .circular.icon, .play-button.icon.message .circular.icon, .download-button.icon.message .circular.icon { width: 1em; } /*-------------- Floating ---------------*/ .ui.floating.message, .play-button.floating.message, .download-button.floating.message { box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } /*-------------- Colors ---------------*/ .ui.black.message, .play-button.black.message, .download-button.black.message { background-color: #1B1C1D; color: rgba(255, 255, 255, 0.9); } /*-------------- Types ---------------*/ /* Positive */ .ui.positive.message, .play-button.positive.message, .download-button.positive.message { background-color: #FCFFF5; color: #2C662D; } .ui.positive.message, .ui.attached.positive.message, .play-button.positive.message, .play-button.attached.positive.message, .download-button.positive.message, .download-button.attached.positive.message { box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.positive.message .header, .play-button.positive.message .header, .download-button.positive.message .header { color: #1A531B; } /* Negative */ .ui.negative.message, .play-button.negative.message, .download-button.negative.message { background-color: #FFF6F6; color: #9F3A38; } .ui.negative.message, .ui.attached.negative.message, .play-button.negative.message, .play-button.attached.negative.message, .download-button.negative.message, .download-button.attached.negative.message { box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.negative.message .header, .play-button.negative.message .header, .download-button.negative.message .header { color: #912D2B; } /* Info */ .ui.info.message, .play-button.info.message, .download-button.info.message { background-color: #F8FFFF; color: #276F86; } .ui.info.message, .ui.attached.info.message, .play-button.info.message, .play-button.attached.info.message, .download-button.info.message, .download-button.attached.info.message { box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.info.message .header, .play-button.info.message .header, .download-button.info.message .header { color: #0E566C; } /* Warning */ .ui.warning.message, .play-button.warning.message, .download-button.warning.message { background-color: #FFFAF3; color: #573A08; } .ui.warning.message, .ui.attached.warning.message, .play-button.warning.message, .play-button.attached.warning.message, .download-button.warning.message, .download-button.attached.warning.message { box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.warning.message .header, .play-button.warning.message .header, .download-button.warning.message .header { color: #794B02; } /* Error */ .ui.error.message, .play-button.error.message, .download-button.error.message { background-color: #FFF6F6; color: #9F3A38; } .ui.error.message, .ui.attached.error.message, .play-button.error.message, .play-button.attached.error.message, .download-button.error.message, .download-button.attached.error.message { box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.error.message .header, .play-button.error.message .header, .download-button.error.message .header { color: #912D2B; } /* Success */ .ui.success.message, .play-button.success.message, .download-button.success.message { background-color: #FCFFF5; color: #2C662D; } .ui.success.message, .ui.attached.success.message, .play-button.success.message, .play-button.attached.success.message, .download-button.success.message, .download-button.attached.success.message { box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.success.message .header, .play-button.success.message .header, .download-button.success.message .header { color: #1A531B; } /* Colors */ .ui.inverted.message, .ui.black.message, .play-button.inverted.message, .play-button.black.message, .download-button.inverted.message, .download-button.black.message { background-color: #1B1C1D; color: rgba(255, 255, 255, 0.9); } .ui.red.message, .play-button.red.message, .download-button.red.message { background-color: #FFE8E6; color: #E81123; box-shadow: 0px 0px 0px 1px #E81123 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.red.message .header, .play-button.red.message .header, .download-button.red.message .header { color: #d00f1f; } .ui.orange.message, .play-button.orange.message, .download-button.orange.message { background-color: #FFEDDE; color: #DF4600; box-shadow: 0px 0px 0px 1px #DF4600 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.orange.message .header, .play-button.orange.message .header, .download-button.orange.message .header { color: #c63e00; } .ui.yellow.message, .play-button.yellow.message, .download-button.yellow.message, .ui.download-button.message { background-color: #FFF8DB; color: #B58105; box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.yellow.message .header, .play-button.yellow.message .header, .download-button.yellow.message .header, .ui.download-button.message .header { color: #9c6f04; } .ui.olive.message, .play-button.olive.message, .download-button.olive.message { background-color: #FBFDEF; color: #8ABC1E; box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.olive.message .header, .play-button.olive.message .header, .download-button.olive.message .header { color: #7aa61a; } .ui.green.message, .ui.ui.button.getting-started-btn.message, .play-button.green.message, .download-button.green.message, .ui.play-button.button.getting-started-btn.message, .ui.ui.play-button.getting-started-btn.message, .ui.download-button.button.getting-started-btn.message, .ui.ui.download-button.getting-started-btn.message { background-color: #E5F9E7; color: #1EBC30; box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.green.message .header, .ui.ui.button.getting-started-btn.message .header, .play-button.green.message .header, .download-button.green.message .header, .ui.play-button.button.getting-started-btn.message .header, .ui.ui.play-button.getting-started-btn.message .header, .ui.download-button.button.getting-started-btn.message .header, .ui.ui.download-button.getting-started-btn.message .header { color: #1aa62a; } .ui.teal.message, .play-button.teal.message, .download-button.teal.message { background-color: #E1F7F7; color: #10A3A3; box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.teal.message .header, .play-button.teal.message .header, .download-button.teal.message .header { color: #0e8c8c; } .ui.blue.message, .play-button.blue.message, .ui.play-button.message, .download-button.blue.message { background-color: #DFF0FF; color: #54C9C9; box-shadow: 0px 0px 0px 1px #54C9C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.blue.message .header, .play-button.blue.message .header, .ui.play-button.message .header, .download-button.blue.message .header { color: #41c3c3; } .ui.violet.message, .play-button.violet.message, .download-button.violet.message { background-color: #EAE7FF; color: #C90072; box-shadow: 0px 0px 0px 1px #C90072 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.violet.message .header, .play-button.violet.message .header, .download-button.violet.message .header { color: #b00064; } .ui.purple.message, .play-button.purple.message, .download-button.purple.message { background-color: #F6E7FF; color: #8169E6; box-shadow: 0px 0px 0px 1px #8169E6 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.purple.message .header, .play-button.purple.message .header, .download-button.purple.message .header { color: #6f53e2; } .ui.pink.message, .play-button.pink.message, .download-button.pink.message { background-color: #FFE3FB; color: #E2008C; box-shadow: 0px 0px 0px 1px #E2008C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.pink.message .header, .play-button.pink.message .header, .download-button.pink.message .header { color: #c9007c; } .ui.brown.message, .play-button.brown.message, .download-button.brown.message { background-color: #F1E2D3; color: #6B5B4C; box-shadow: 0px 0px 0px 1px #6B5B4C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); } .ui.brown.message .header, .play-button.brown.message .header, .download-button.brown.message .header { color: #5c4e41; } /*-------------- Sizes ---------------*/ .ui.mini.message, .play-button.mini.message, .download-button.mini.message { font-size: 0.78571429em; } .ui.tiny.message, .play-button.tiny.message, .download-button.tiny.message { font-size: 0.85714286em; } .ui.small.message, .play-button.small.message, .download-button.small.message { font-size: 0.92857143em; } .ui.message, .play-button.message, .download-button.message { font-size: 1em; } .ui.large.message, .play-button.large.message, .download-button.large.message { font-size: 1.14285714em; } .ui.big.message, .play-button.big.message, .download-button.big.message { font-size: 1.28571429em; } .ui.huge.message, .play-button.huge.message, .download-button.huge.message { font-size: 1.42857143em; } .ui.massive.message, .play-button.massive.message, .download-button.massive.message { font-size: 1.71428571em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Table * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Table *******************************/ /*------------------- Element --------------------*/ /*-------------- Parts ---------------*/ /* Table Row */ /* Table Cell */ /* Table Header */ /* Table Footer */ /* Responsive Size */ /*------------------- Types --------------------*/ /* Definition */ /*-------------- Couplings ---------------*/ /*-------------- States ---------------*/ /* Positive */ /* Negative */ /* Error */ /* Warning */ /* Active */ /*-------------- Types ---------------*/ /* Attached */ /* Striped */ /* Selectable */ /* Sortable */ /* Colors */ /* Inverted */ /* Basic */ /* Padded */ /* Compact */ /* Sizes */ /* Packaged Theme */ /******************************* Table *******************************/ /*------------------- Element --------------------*/ /*-------------- Parts ---------------*/ /* Table Row */ /* Table Cell */ /* Table Header */ /* Table Footer */ /* Responsive Size */ /*------------------- Types --------------------*/ /* Definition */ /*-------------- Couplings ---------------*/ /*-------------- States ---------------*/ /* Positive */ /* Negative */ /* Error */ /* Warning */ /* Active */ /*-------------- Types ---------------*/ /* Attached */ /* Striped */ /* Selectable */ /* Sortable */ /* Colors */ /* Inverted */ /* Basic */ /* Padded */ /* Compact */ /* Sizes */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Table *******************************/ /* Prototype */ .ui.table, .play-button.table, .download-button.table { width: 100%; background: #FFFFFF; margin: 1em 0em; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; border-radius: 0.28571429rem; text-align: left; color: rgba(0, 0, 0, 0.87); border-collapse: separate; border-spacing: 0px; } .ui.table:first-child, .play-button.table:first-child, .download-button.table:first-child { margin-top: 0em; } .ui.table:last-child, .play-button.table:last-child, .download-button.table:last-child { margin-bottom: 0em; } /******************************* Parts *******************************/ /* Table Content */ .ui.table th, .ui.table td, .play-button.table th, .play-button.table td, .download-button.table th, .download-button.table td { transition: background 0.1s ease, color 0.1s ease; } /* Headers */ .ui.table thead, .play-button.table thead, .download-button.table thead { box-shadow: none; } .ui.table thead th, .play-button.table thead th, .download-button.table thead th { cursor: auto; background: #F9FAFB; text-align: inherit; color: rgba(0, 0, 0, 0.87); padding: 0.92857143em 0.78571429em; vertical-align: inherit; font-style: none; font-weight: bold; text-transform: none; border-bottom: 1px solid rgba(34, 36, 38, 0.1); border-left: none; } .ui.table thead tr > th:first-child, .play-button.table thead tr > th:first-child, .download-button.table thead tr > th:first-child { border-left: none; } .ui.table thead tr:first-child > th:first-child, .play-button.table thead tr:first-child > th:first-child, .download-button.table thead tr:first-child > th:first-child { border-radius: 0.28571429rem 0em 0em 0em; } .ui.table thead tr:first-child > th:last-child, .play-button.table thead tr:first-child > th:last-child, .download-button.table thead tr:first-child > th:last-child { border-radius: 0em 0.28571429rem 0em 0em; } .ui.table thead tr:first-child > th:only-child, .play-button.table thead tr:first-child > th:only-child, .download-button.table thead tr:first-child > th:only-child { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Footer */ .ui.table tfoot, .play-button.table tfoot, .download-button.table tfoot { box-shadow: none; } .ui.table tfoot th, .play-button.table tfoot th, .download-button.table tfoot th { cursor: auto; border-top: 1px solid rgba(34, 36, 38, 0.15); background: #F9FAFB; text-align: inherit; color: rgba(0, 0, 0, 0.87); padding: 0.78571429em 0.78571429em; vertical-align: middle; font-style: normal; font-weight: normal; text-transform: none; } .ui.table tfoot tr > th:first-child, .play-button.table tfoot tr > th:first-child, .download-button.table tfoot tr > th:first-child { border-left: none; } .ui.table tfoot tr:first-child > th:first-child, .play-button.table tfoot tr:first-child > th:first-child, .download-button.table tfoot tr:first-child > th:first-child { border-radius: 0em 0em 0em 0.28571429rem; } .ui.table tfoot tr:first-child > th:last-child, .play-button.table tfoot tr:first-child > th:last-child, .download-button.table tfoot tr:first-child > th:last-child { border-radius: 0em 0em 0.28571429rem 0em; } .ui.table tfoot tr:first-child > th:only-child, .play-button.table tfoot tr:first-child > th:only-child, .download-button.table tfoot tr:first-child > th:only-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /* Table Row */ .ui.table tr td, .play-button.table tr td, .download-button.table tr td { border-top: 1px solid rgba(34, 36, 38, 0.1); } .ui.table tr:first-child td, .play-button.table tr:first-child td, .download-button.table tr:first-child td { border-top: none; } /* Table Cells */ .ui.table td, .play-button.table td, .download-button.table td { padding: 0.78571429em 0.78571429em; text-align: inherit; } /* Icons */ .ui.table > .icon, .play-button.table > .icon, .download-button.table > .icon { vertical-align: baseline; } .ui.table > .icon:only-child, .play-button.table > .icon:only-child, .download-button.table > .icon:only-child { margin: 0em; } /* Table Segment */ .ui.table.segment, .play-button.table.segment, .download-button.table.segment { padding: 0em; } .ui.table.segment:after, .play-button.table.segment:after, .download-button.table.segment:after { display: none; } .ui.table.segment.stacked:after, .play-button.table.segment.stacked:after, .download-button.table.segment.stacked:after { display: block; } /* Responsive */ @media only screen and (max-width: 767px) { .ui.table:not(.unstackable), .play-button.table:not(.unstackable), .download-button.table:not(.unstackable) { width: 100%; } .ui.table:not(.unstackable) tbody, .ui.table:not(.unstackable) tr, .ui.table:not(.unstackable) tr > th, .ui.table:not(.unstackable) tr > td, .play-button.table:not(.unstackable) tbody, .play-button.table:not(.unstackable) tr, .play-button.table:not(.unstackable) tr > th, .play-button.table:not(.unstackable) tr > td, .download-button.table:not(.unstackable) tbody, .download-button.table:not(.unstackable) tr, .download-button.table:not(.unstackable) tr > th, .download-button.table:not(.unstackable) tr > td { width: auto !important; display: block !important; } .ui.table:not(.unstackable), .play-button.table:not(.unstackable), .download-button.table:not(.unstackable) { padding: 0em; } .ui.table:not(.unstackable) thead, .play-button.table:not(.unstackable) thead, .download-button.table:not(.unstackable) thead { display: block; } .ui.table:not(.unstackable) tfoot, .play-button.table:not(.unstackable) tfoot, .download-button.table:not(.unstackable) tfoot { display: block; } .ui.table:not(.unstackable) tr, .play-button.table:not(.unstackable) tr, .download-button.table:not(.unstackable) tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; } .ui.table:not(.unstackable) tr > th, .ui.table:not(.unstackable) tr > td, .play-button.table:not(.unstackable) tr > th, .play-button.table:not(.unstackable) tr > td, .download-button.table:not(.unstackable) tr > th, .download-button.table:not(.unstackable) tr > td { background: none; border: none !important; padding: 0.25em 0.75em !important; box-shadow: none !important; } .ui.table:not(.unstackable) th:first-child, .ui.table:not(.unstackable) td:first-child, .play-button.table:not(.unstackable) th:first-child, .play-button.table:not(.unstackable) td:first-child, .download-button.table:not(.unstackable) th:first-child, .download-button.table:not(.unstackable) td:first-child { font-weight: bold; } /* Definition Table */ .ui.definition.table:not(.unstackable) thead th:first-child, .play-button.definition.table:not(.unstackable) thead th:first-child, .download-button.definition.table:not(.unstackable) thead th:first-child { box-shadow: none !important; } } /******************************* Coupling *******************************/ /* UI Image */ .ui.table th .image, .ui.table th .image img, .ui.table td .image, .ui.table td .image img, .play-button.table th .image, .play-button.table th .image img, .play-button.table td .image, .play-button.table td .image img, .download-button.table th .image, .download-button.table th .image img, .download-button.table td .image, .download-button.table td .image img { max-width: none; } /******************************* Types *******************************/ /*-------------- Complex ---------------*/ .ui.structured.table, .play-button.structured.table, .download-button.structured.table { border-collapse: collapse; } .ui.structured.table thead th, .play-button.structured.table thead th, .download-button.structured.table thead th { border-left: none; border-right: none; } .ui.structured.sortable.table thead th, .play-button.structured.sortable.table thead th, .download-button.structured.sortable.table thead th { border-left: 1px solid rgba(34, 36, 38, 0.15); border-right: 1px solid rgba(34, 36, 38, 0.15); } .ui.structured.basic.table th, .play-button.structured.basic.table th, .download-button.structured.basic.table th { border-left: none; border-right: none; } .ui.structured.celled.table tr th, .ui.structured.celled.table tr td, .play-button.structured.celled.table tr th, .play-button.structured.celled.table tr td, .download-button.structured.celled.table tr th, .download-button.structured.celled.table tr td { border-left: 1px solid rgba(34, 36, 38, 0.1); border-right: 1px solid rgba(34, 36, 38, 0.1); } /*-------------- Definition ---------------*/ .ui.definition.table thead:not(.full-width) th:first-child, .play-button.definition.table thead:not(.full-width) th:first-child, .download-button.definition.table thead:not(.full-width) th:first-child { pointer-events: none; background: transparent; font-weight: normal; color: rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 0px 1px #FFFFFF; } .ui.definition.table tfoot:not(.full-width) th:first-child, .play-button.definition.table tfoot:not(.full-width) th:first-child, .download-button.definition.table tfoot:not(.full-width) th:first-child { pointer-events: none; background: transparent; font-weight: rgba(0, 0, 0, 0.4); color: normal; box-shadow: 1px 1px 0px 1px #FFFFFF; } /* Remove Border */ .ui.celled.definition.table thead:not(.full-width) th:first-child, .play-button.celled.definition.table thead:not(.full-width) th:first-child, .download-button.celled.definition.table thead:not(.full-width) th:first-child { box-shadow: 0px -1px 0px 1px #FFFFFF; } .ui.celled.definition.table tfoot:not(.full-width) th:first-child, .play-button.celled.definition.table tfoot:not(.full-width) th:first-child, .download-button.celled.definition.table tfoot:not(.full-width) th:first-child { box-shadow: 0px 1px 0px 1px #FFFFFF; } /* Highlight Defining Column */ .ui.definition.table tr td:first-child:not(.ignored), .ui.definition.table tr td.definition, .play-button.definition.table tr td:first-child:not(.ignored), .play-button.definition.table tr td.definition, .download-button.definition.table tr td:first-child:not(.ignored), .download-button.definition.table tr td.definition { background: rgba(0, 0, 0, 0.03); font-weight: bold; color: rgba(0, 0, 0, 0.95); text-transform: ''; box-shadow: ''; text-align: ''; font-size: 1em; padding-left: ''; padding-right: ''; } /* Fix 2nd Column */ .ui.definition.table thead:not(.full-width) th:nth-child(2), .play-button.definition.table thead:not(.full-width) th:nth-child(2), .download-button.definition.table thead:not(.full-width) th:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.definition.table tfoot:not(.full-width) th:nth-child(2), .play-button.definition.table tfoot:not(.full-width) th:nth-child(2), .download-button.definition.table tfoot:not(.full-width) th:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.definition.table td:nth-child(2), .play-button.definition.table td:nth-child(2), .download-button.definition.table td:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } /******************************* States *******************************/ /*-------------- Positive ---------------*/ .ui.table tr.positive, .ui.table td.positive, .play-button.table tr.positive, .play-button.table td.positive, .download-button.table tr.positive, .download-button.table td.positive { box-shadow: 0px 0px 0px #A3C293 inset; } .ui.table tr.positive, .ui.table td.positive, .play-button.table tr.positive, .play-button.table td.positive, .download-button.table tr.positive, .download-button.table td.positive { background: #FCFFF5 !important; color: #2C662D !important; } /*-------------- Negative ---------------*/ .ui.table tr.negative, .ui.table td.negative, .play-button.table tr.negative, .play-button.table td.negative, .download-button.table tr.negative, .download-button.table td.negative { box-shadow: 0px 0px 0px #E0B4B4 inset; } .ui.table tr.negative, .ui.table td.negative, .play-button.table tr.negative, .play-button.table td.negative, .download-button.table tr.negative, .download-button.table td.negative { background: #FFF6F6 !important; color: #9F3A38 !important; } /*-------------- Error ---------------*/ .ui.table tr.error, .ui.table td.error, .play-button.table tr.error, .play-button.table td.error, .download-button.table tr.error, .download-button.table td.error { box-shadow: 0px 0px 0px #E0B4B4 inset; } .ui.table tr.error, .ui.table td.error, .play-button.table tr.error, .play-button.table td.error, .download-button.table tr.error, .download-button.table td.error { background: #FFF6F6 !important; color: #9F3A38 !important; } /*-------------- Warning ---------------*/ .ui.table tr.warning, .ui.table td.warning, .play-button.table tr.warning, .play-button.table td.warning, .download-button.table tr.warning, .download-button.table td.warning { box-shadow: 0px 0px 0px #C9BA9B inset; } .ui.table tr.warning, .ui.table td.warning, .play-button.table tr.warning, .play-button.table td.warning, .download-button.table tr.warning, .download-button.table td.warning { background: #FFFAF3 !important; color: #573A08 !important; } /*-------------- Active ---------------*/ .ui.table tr.active, .ui.table td.active, .play-button.table tr.active, .play-button.table td.active, .download-button.table tr.active, .download-button.table td.active { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset; } .ui.table tr.active, .ui.table td.active, .play-button.table tr.active, .play-button.table td.active, .download-button.table tr.active, .download-button.table td.active { background: #E0E0E0 !important; color: rgba(0, 0, 0, 0.87) !important; } /*-------------- Disabled ---------------*/ .ui.table tr.disabled td, .ui.table tr td.disabled, .ui.table tr.disabled:hover, .ui.table tr:hover td.disabled, .play-button.table tr.disabled td, .play-button.table tr td.disabled, .play-button.table tr.disabled:hover, .play-button.table tr:hover td.disabled, .download-button.table tr.disabled td, .download-button.table tr td.disabled, .download-button.table tr.disabled:hover, .download-button.table tr:hover td.disabled { pointer-events: none; color: rgba(40, 40, 40, 0.3); } /******************************* Variations *******************************/ /*-------------- Stackable ---------------*/ @media only screen and (max-width: 991px) { .ui[class*="tablet stackable"].table, .ui[class*="tablet stackable"].table tbody, .ui[class*="tablet stackable"].table tr, .ui[class*="tablet stackable"].table tr > th, .ui[class*="tablet stackable"].table tr > td, .play-button[class*="tablet stackable"].table, .play-button[class*="tablet stackable"].table tbody, .play-button[class*="tablet stackable"].table tr, .play-button[class*="tablet stackable"].table tr > th, .play-button[class*="tablet stackable"].table tr > td, .download-button[class*="tablet stackable"].table, .download-button[class*="tablet stackable"].table tbody, .download-button[class*="tablet stackable"].table tr, .download-button[class*="tablet stackable"].table tr > th, .download-button[class*="tablet stackable"].table tr > td { width: 100% !important; display: block !important; } .ui[class*="tablet stackable"].table, .play-button[class*="tablet stackable"].table, .download-button[class*="tablet stackable"].table { padding: 0em; } .ui[class*="tablet stackable"].table thead, .play-button[class*="tablet stackable"].table thead, .download-button[class*="tablet stackable"].table thead { display: block; } .ui[class*="tablet stackable"].table tfoot, .play-button[class*="tablet stackable"].table tfoot, .download-button[class*="tablet stackable"].table tfoot { display: block; } .ui[class*="tablet stackable"].table tr, .play-button[class*="tablet stackable"].table tr, .download-button[class*="tablet stackable"].table tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; } .ui[class*="tablet stackable"].table tr > th, .ui[class*="tablet stackable"].table tr > td, .play-button[class*="tablet stackable"].table tr > th, .play-button[class*="tablet stackable"].table tr > td, .download-button[class*="tablet stackable"].table tr > th, .download-button[class*="tablet stackable"].table tr > td { background: none; border: none !important; padding: 0.25em 0.75em; box-shadow: none !important; } /* Definition Table */ .ui.definition[class*="tablet stackable"].table thead th:first-child, .play-button.definition[class*="tablet stackable"].table thead th:first-child, .download-button.definition[class*="tablet stackable"].table thead th:first-child { box-shadow: none !important; } } /*-------------- Text Alignment ---------------*/ .ui.table[class*="left aligned"], .ui.table [class*="left aligned"], .play-button.table[class*="left aligned"], .play-button.table [class*="left aligned"], .download-button.table[class*="left aligned"], .download-button.table [class*="left aligned"] { text-align: left; } .ui.table[class*="center aligned"], .ui.table [class*="center aligned"], .play-button.table[class*="center aligned"], .play-button.table [class*="center aligned"], .download-button.table[class*="center aligned"], .download-button.table [class*="center aligned"] { text-align: center; } .ui.table[class*="right aligned"], .ui.table [class*="right aligned"], .play-button.table[class*="right aligned"], .play-button.table [class*="right aligned"], .download-button.table[class*="right aligned"], .download-button.table [class*="right aligned"] { text-align: right; } /*------------------ Vertical Alignment ------------------*/ .ui.table[class*="top aligned"], .ui.table [class*="top aligned"], .play-button.table[class*="top aligned"], .play-button.table [class*="top aligned"], .download-button.table[class*="top aligned"], .download-button.table [class*="top aligned"] { vertical-align: top; } .ui.table[class*="middle aligned"], .ui.table [class*="middle aligned"], .play-button.table[class*="middle aligned"], .play-button.table [class*="middle aligned"], .download-button.table[class*="middle aligned"], .download-button.table [class*="middle aligned"] { vertical-align: middle; } .ui.table[class*="bottom aligned"], .ui.table [class*="bottom aligned"], .play-button.table[class*="bottom aligned"], .play-button.table [class*="bottom aligned"], .download-button.table[class*="bottom aligned"], .download-button.table [class*="bottom aligned"] { vertical-align: bottom; } /*-------------- Collapsing ---------------*/ .ui.table th.collapsing, .ui.table td.collapsing, .play-button.table th.collapsing, .play-button.table td.collapsing, .download-button.table th.collapsing, .download-button.table td.collapsing { width: 1px; white-space: nowrap; } /*-------------- Fixed ---------------*/ .ui.fixed.table, .play-button.fixed.table, .download-button.fixed.table { table-layout: fixed; } .ui.fixed.table th, .ui.fixed.table td, .play-button.fixed.table th, .play-button.fixed.table td, .download-button.fixed.table th, .download-button.fixed.table td { overflow: hidden; text-overflow: ellipsis; } /*-------------- Selectable ---------------*/ .ui.selectable.table tbody tr:hover, .ui.table tbody tr td.selectable:hover, .play-button.selectable.table tbody tr:hover, .play-button.table tbody tr td.selectable:hover, .download-button.selectable.table tbody tr:hover, .download-button.table tbody tr td.selectable:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.selectable.inverted.table tbody tr:hover, .ui.inverted.table tbody tr td.selectable:hover, .play-button.selectable.inverted.table tbody tr:hover, .play-button.inverted.table tbody tr td.selectable:hover, .download-button.selectable.inverted.table tbody tr:hover, .download-button.inverted.table tbody tr td.selectable:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } /* Selectable Cell Link */ .ui.table tbody tr td.selectable, .play-button.table tbody tr td.selectable, .download-button.table tbody tr td.selectable { padding: 0em; } .ui.table tbody tr td.selectable > a:not(.ui), .play-button.table tbody tr td.selectable > a:not(.ui), .download-button.table tbody tr td.selectable > a:not(.ui) { display: block; color: inherit; padding: 0.78571429em 0.78571429em; } /* Other States */ .ui.selectable.table tr.error:hover, .ui.table tr td.selectable.error:hover, .ui.selectable.table tr:hover td.error, .play-button.selectable.table tr.error:hover, .play-button.table tr td.selectable.error:hover, .play-button.selectable.table tr:hover td.error, .download-button.selectable.table tr.error:hover, .download-button.table tr td.selectable.error:hover, .download-button.selectable.table tr:hover td.error { background: #ffe7e7 !important; color: #943634 !important; } .ui.selectable.table tr.warning:hover, .ui.table tr td.selectable.warning:hover, .ui.selectable.table tr:hover td.warning, .play-button.selectable.table tr.warning:hover, .play-button.table tr td.selectable.warning:hover, .play-button.selectable.table tr:hover td.warning, .download-button.selectable.table tr.warning:hover, .download-button.table tr td.selectable.warning:hover, .download-button.selectable.table tr:hover td.warning { background: #fff4e4 !important; color: #493107 !important; } .ui.selectable.table tr.active:hover, .ui.table tr td.selectable.active:hover, .ui.selectable.table tr:hover td.active, .play-button.selectable.table tr.active:hover, .play-button.table tr td.selectable.active:hover, .play-button.selectable.table tr:hover td.active, .download-button.selectable.table tr.active:hover, .download-button.table tr td.selectable.active:hover, .download-button.selectable.table tr:hover td.active { background: #E0E0E0 !important; color: rgba(0, 0, 0, 0.87) !important; } .ui.selectable.table tr.positive:hover, .ui.table tr td.selectable.positive:hover, .ui.selectable.table tr:hover td.positive, .play-button.selectable.table tr.positive:hover, .play-button.table tr td.selectable.positive:hover, .play-button.selectable.table tr:hover td.positive, .download-button.selectable.table tr.positive:hover, .download-button.table tr td.selectable.positive:hover, .download-button.selectable.table tr:hover td.positive { background: #f7ffe6 !important; color: #275b28 !important; } .ui.selectable.table tr.negative:hover, .ui.table tr td.selectable.negative:hover, .ui.selectable.table tr:hover td.negative, .play-button.selectable.table tr.negative:hover, .play-button.table tr td.selectable.negative:hover, .play-button.selectable.table tr:hover td.negative, .download-button.selectable.table tr.negative:hover, .download-button.table tr td.selectable.negative:hover, .download-button.selectable.table tr:hover td.negative { background: #ffe7e7 !important; color: #943634 !important; } /*------------------- Attached --------------------*/ /* Middle */ .ui.attached.table, .play-button.attached.table, .download-button.attached.table { top: 0px; bottom: 0px; border-radius: 0px; margin: 0em -1px; width: calc(100% + 2px ); max-width: calc(100% + 2px ); box-shadow: none; border: 1px solid #D4D4D5; } .ui.attached + .ui.attached.table:not(.top), .play-button.attached + .play-button.attached.table:not(.top), .download-button.attached + .download-button.attached.table:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].table, .play-button[class*="top attached"].table, .download-button[class*="top attached"].table { bottom: 0px; margin-bottom: 0em; top: 0px; margin-top: 1em; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.table[class*="top attached"]:first-child, .play-button.table[class*="top attached"]:first-child, .download-button.table[class*="top attached"]:first-child { margin-top: 0em; } /* Bottom */ .ui[class*="bottom attached"].table, .play-button[class*="bottom attached"].table, .download-button[class*="bottom attached"].table { bottom: 0px; margin-top: 0em; top: 0px; margin-bottom: 1em; box-shadow: none, none; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui[class*="bottom attached"].table:last-child, .play-button[class*="bottom attached"].table:last-child, .download-button[class*="bottom attached"].table:last-child { margin-bottom: 0em; } /*-------------- Striped ---------------*/ /* Table Striping */ .ui.striped.table > tr:nth-child(2n), .ui.striped.table tbody tr:nth-child(2n), .play-button.striped.table > tr:nth-child(2n), .play-button.striped.table tbody tr:nth-child(2n), .download-button.striped.table > tr:nth-child(2n), .download-button.striped.table tbody tr:nth-child(2n) { background-color: rgba(0, 0, 50, 0.02); } /* Stripes */ .ui.inverted.striped.table > tr:nth-child(2n), .ui.inverted.striped.table tbody tr:nth-child(2n), .play-button.inverted.striped.table > tr:nth-child(2n), .play-button.inverted.striped.table tbody tr:nth-child(2n), .download-button.inverted.striped.table > tr:nth-child(2n), .download-button.inverted.striped.table tbody tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.05); } /* Allow striped active hover */ .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover, .play-button.striped.selectable.selectable.selectable.table tbody tr.active:hover, .download-button.striped.selectable.selectable.selectable.table tbody tr.active:hover { background: #EFEFEF !important; color: rgba(0, 0, 0, 0.95) !important; } /*-------------- Single Line ---------------*/ .ui.table[class*="single line"], .ui.table [class*="single line"], .play-button.table[class*="single line"], .play-button.table [class*="single line"], .download-button.table[class*="single line"], .download-button.table [class*="single line"] { white-space: nowrap; } .ui.table[class*="single line"], .ui.table [class*="single line"], .play-button.table[class*="single line"], .play-button.table [class*="single line"], .download-button.table[class*="single line"], .download-button.table [class*="single line"] { white-space: nowrap; } /*------------------- Colors --------------------*/ /* Red */ .ui.red.table, .play-button.red.table, .download-button.red.table { border-top: 0.2em solid #E81123; } .ui.inverted.red.table, .play-button.inverted.red.table, .download-button.inverted.red.table { background-color: #E81123 !important; color: #FFFFFF !important; } /* Orange */ .ui.orange.table, .play-button.orange.table, .download-button.orange.table { border-top: 0.2em solid #DF4600; } .ui.inverted.orange.table, .play-button.inverted.orange.table, .download-button.inverted.orange.table { background-color: #DF4600 !important; color: #FFFFFF !important; } /* Yellow */ .ui.yellow.table, .play-button.yellow.table, .download-button.yellow.table, .ui.download-button.table { border-top: 0.2em solid #F4C918; } .ui.inverted.yellow.table, .play-button.inverted.yellow.table, .download-button.inverted.yellow.table, .ui.inverted.download-button.table { background-color: #F4C918 !important; color: #FFFFFF !important; } /* Olive */ .ui.olive.table, .play-button.olive.table, .download-button.olive.table { border-top: 0.2em solid #B5CC18; } .ui.inverted.olive.table, .play-button.inverted.olive.table, .download-button.inverted.olive.table { background-color: #B5CC18 !important; color: #FFFFFF !important; } /* Green */ .ui.green.table, .ui.ui.button.getting-started-btn.table, .play-button.green.table, .download-button.green.table, .ui.play-button.button.getting-started-btn.table, .ui.ui.play-button.getting-started-btn.table, .ui.download-button.button.getting-started-btn.table, .ui.ui.download-button.getting-started-btn.table { border-top: 0.2em solid #3FC863; } .ui.inverted.green.table, .ui.inverted.ui.button.getting-started-btn.table, .play-button.inverted.green.table, .download-button.inverted.green.table, .ui.inverted.play-button.button.getting-started-btn.table, .ui.inverted.ui.play-button.getting-started-btn.table, .ui.inverted.download-button.button.getting-started-btn.table, .ui.inverted.ui.download-button.getting-started-btn.table { background-color: #3FC863 !important; color: #FFFFFF !important; } /* Teal */ .ui.teal.table, .play-button.teal.table, .download-button.teal.table { border-top: 0.2em solid #008272; } .ui.inverted.teal.table, .play-button.inverted.teal.table, .download-button.inverted.teal.table { background-color: #008272 !important; color: #FFFFFF !important; } /* Blue */ .ui.blue.table, .play-button.blue.table, .ui.play-button.table, .download-button.blue.table { border-top: 0.2em solid #54C9C9; } .ui.inverted.blue.table, .play-button.inverted.blue.table, .ui.inverted.play-button.table, .download-button.inverted.blue.table { background-color: #54C9C9 !important; color: #FFFFFF !important; } /* Violet */ .ui.violet.table, .play-button.violet.table, .download-button.violet.table { border-top: 0.2em solid #C90072; } .ui.inverted.violet.table, .play-button.inverted.violet.table, .download-button.inverted.violet.table { background-color: #C90072 !important; color: #FFFFFF !important; } /* Purple */ .ui.purple.table, .play-button.purple.table, .download-button.purple.table { border-top: 0.2em solid #8169E6; } .ui.inverted.purple.table, .play-button.inverted.purple.table, .download-button.inverted.purple.table { background-color: #8169E6 !important; color: #FFFFFF !important; } /* Pink */ .ui.pink.table, .play-button.pink.table, .download-button.pink.table { border-top: 0.2em solid #E2008C; } .ui.inverted.pink.table, .play-button.inverted.pink.table, .download-button.inverted.pink.table { background-color: #E2008C !important; color: #FFFFFF !important; } /* Brown */ .ui.brown.table, .play-button.brown.table, .download-button.brown.table { border-top: 0.2em solid #6B5B4C; } .ui.inverted.brown.table, .play-button.inverted.brown.table, .download-button.inverted.brown.table { background-color: #6B5B4C !important; color: #FFFFFF !important; } /* Grey */ .ui.grey.table, .ui.ui.button.editortools-btn.table, .play-button.grey.table, .download-button.grey.table, .ui.play-button.button.editortools-btn.table, .ui.ui.play-button.editortools-btn.table, .ui.download-button.button.editortools-btn.table, .ui.ui.download-button.editortools-btn.table { border-top: 0.2em solid #42495F; } .ui.inverted.grey.table, .ui.inverted.ui.button.editortools-btn.table, .play-button.inverted.grey.table, .download-button.inverted.grey.table, .ui.inverted.play-button.button.editortools-btn.table, .ui.inverted.ui.play-button.editortools-btn.table, .ui.inverted.download-button.button.editortools-btn.table, .ui.inverted.ui.download-button.editortools-btn.table { background-color: #42495F !important; color: #FFFFFF !important; } /* Black */ .ui.black.table, .play-button.black.table, .download-button.black.table { border-top: 0.2em solid #1B1C1D; } .ui.inverted.black.table, .play-button.inverted.black.table, .download-button.inverted.black.table { background-color: #1B1C1D !important; color: #FFFFFF !important; } /*-------------- Column Count ---------------*/ /* Grid Based */ .ui.one.column.table td, .play-button.one.column.table td, .download-button.one.column.table td { width: 100%; } .ui.two.column.table td, .play-button.two.column.table td, .download-button.two.column.table td { width: 50%; } .ui.three.column.table td, .play-button.three.column.table td, .download-button.three.column.table td { width: 33.33333333%; } .ui.four.column.table td, .play-button.four.column.table td, .download-button.four.column.table td { width: 25%; } .ui.five.column.table td, .play-button.five.column.table td, .download-button.five.column.table td { width: 20%; } .ui.six.column.table td, .play-button.six.column.table td, .download-button.six.column.table td { width: 16.66666667%; } .ui.seven.column.table td, .play-button.seven.column.table td, .download-button.seven.column.table td { width: 14.28571429%; } .ui.eight.column.table td, .play-button.eight.column.table td, .download-button.eight.column.table td { width: 12.5%; } .ui.nine.column.table td, .play-button.nine.column.table td, .download-button.nine.column.table td { width: 11.11111111%; } .ui.ten.column.table td, .play-button.ten.column.table td, .download-button.ten.column.table td { width: 10%; } .ui.eleven.column.table td, .play-button.eleven.column.table td, .download-button.eleven.column.table td { width: 9.09090909%; } .ui.twelve.column.table td, .play-button.twelve.column.table td, .download-button.twelve.column.table td { width: 8.33333333%; } .ui.thirteen.column.table td, .play-button.thirteen.column.table td, .download-button.thirteen.column.table td { width: 7.69230769%; } .ui.fourteen.column.table td, .play-button.fourteen.column.table td, .download-button.fourteen.column.table td { width: 7.14285714%; } .ui.fifteen.column.table td, .play-button.fifteen.column.table td, .download-button.fifteen.column.table td { width: 6.66666667%; } .ui.sixteen.column.table td, .play-button.sixteen.column.table td, .download-button.sixteen.column.table td { width: 6.25%; } /* Column Width */ .ui.table th.one.wide, .ui.table td.one.wide, .play-button.table th.one.wide, .play-button.table td.one.wide, .download-button.table th.one.wide, .download-button.table td.one.wide { width: 6.25%; } .ui.table th.two.wide, .ui.table td.two.wide, .play-button.table th.two.wide, .play-button.table td.two.wide, .download-button.table th.two.wide, .download-button.table td.two.wide { width: 12.5%; } .ui.table th.three.wide, .ui.table td.three.wide, .play-button.table th.three.wide, .play-button.table td.three.wide, .download-button.table th.three.wide, .download-button.table td.three.wide { width: 18.75%; } .ui.table th.four.wide, .ui.table td.four.wide, .play-button.table th.four.wide, .play-button.table td.four.wide, .download-button.table th.four.wide, .download-button.table td.four.wide { width: 25%; } .ui.table th.five.wide, .ui.table td.five.wide, .play-button.table th.five.wide, .play-button.table td.five.wide, .download-button.table th.five.wide, .download-button.table td.five.wide { width: 31.25%; } .ui.table th.six.wide, .ui.table td.six.wide, .play-button.table th.six.wide, .play-button.table td.six.wide, .download-button.table th.six.wide, .download-button.table td.six.wide { width: 37.5%; } .ui.table th.seven.wide, .ui.table td.seven.wide, .play-button.table th.seven.wide, .play-button.table td.seven.wide, .download-button.table th.seven.wide, .download-button.table td.seven.wide { width: 43.75%; } .ui.table th.eight.wide, .ui.table td.eight.wide, .play-button.table th.eight.wide, .play-button.table td.eight.wide, .download-button.table th.eight.wide, .download-button.table td.eight.wide { width: 50%; } .ui.table th.nine.wide, .ui.table td.nine.wide, .play-button.table th.nine.wide, .play-button.table td.nine.wide, .download-button.table th.nine.wide, .download-button.table td.nine.wide { width: 56.25%; } .ui.table th.ten.wide, .ui.table td.ten.wide, .play-button.table th.ten.wide, .play-button.table td.ten.wide, .download-button.table th.ten.wide, .download-button.table td.ten.wide { width: 62.5%; } .ui.table th.eleven.wide, .ui.table td.eleven.wide, .play-button.table th.eleven.wide, .play-button.table td.eleven.wide, .download-button.table th.eleven.wide, .download-button.table td.eleven.wide { width: 68.75%; } .ui.table th.twelve.wide, .ui.table td.twelve.wide, .play-button.table th.twelve.wide, .play-button.table td.twelve.wide, .download-button.table th.twelve.wide, .download-button.table td.twelve.wide { width: 75%; } .ui.table th.thirteen.wide, .ui.table td.thirteen.wide, .play-button.table th.thirteen.wide, .play-button.table td.thirteen.wide, .download-button.table th.thirteen.wide, .download-button.table td.thirteen.wide { width: 81.25%; } .ui.table th.fourteen.wide, .ui.table td.fourteen.wide, .play-button.table th.fourteen.wide, .play-button.table td.fourteen.wide, .download-button.table th.fourteen.wide, .download-button.table td.fourteen.wide { width: 87.5%; } .ui.table th.fifteen.wide, .ui.table td.fifteen.wide, .play-button.table th.fifteen.wide, .play-button.table td.fifteen.wide, .download-button.table th.fifteen.wide, .download-button.table td.fifteen.wide { width: 93.75%; } .ui.table th.sixteen.wide, .ui.table td.sixteen.wide, .play-button.table th.sixteen.wide, .play-button.table td.sixteen.wide, .download-button.table th.sixteen.wide, .download-button.table td.sixteen.wide { width: 100%; } /*-------------- Sortable ---------------*/ .ui.sortable.table thead th, .play-button.sortable.table thead th, .download-button.sortable.table thead th { cursor: pointer; white-space: nowrap; border-left: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); } .ui.sortable.table thead th:first-child, .play-button.sortable.table thead th:first-child, .download-button.sortable.table thead th:first-child { border-left: none; } .ui.sortable.table thead th.sorted, .ui.sortable.table thead th.sorted:hover, .play-button.sortable.table thead th.sorted, .play-button.sortable.table thead th.sorted:hover, .download-button.sortable.table thead th.sorted, .download-button.sortable.table thead th.sorted:hover { user-select: none; } .ui.sortable.table thead th:after, .play-button.sortable.table thead th:after, .download-button.sortable.table thead th:after { display: none; font-style: normal; font-weight: normal; text-decoration: inherit; content: ''; height: 1em; width: auto; opacity: 0.8; margin: 0em 0em 0em 0.5em; font-family: 'Icons'; } .ui.sortable.table thead th.ascending:after, .play-button.sortable.table thead th.ascending:after, .download-button.sortable.table thead th.ascending:after { content: '\f0d8'; } .ui.sortable.table thead th.descending:after, .play-button.sortable.table thead th.descending:after, .download-button.sortable.table thead th.descending:after { content: '\f0d7'; } /* Hover */ .ui.sortable.table th.disabled:hover, .play-button.sortable.table th.disabled:hover, .download-button.sortable.table th.disabled:hover { cursor: auto; color: rgba(40, 40, 40, 0.3); } .ui.sortable.table thead th:hover, .play-button.sortable.table thead th:hover, .download-button.sortable.table thead th:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.8); } /* Sorted */ .ui.sortable.table thead th.sorted, .play-button.sortable.table thead th.sorted, .download-button.sortable.table thead th.sorted { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } .ui.sortable.table thead th.sorted:after, .play-button.sortable.table thead th.sorted:after, .download-button.sortable.table thead th.sorted:after { display: inline-block; } /* Sorted Hover */ .ui.sortable.table thead th.sorted:hover, .play-button.sortable.table thead th.sorted:hover, .download-button.sortable.table thead th.sorted:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.inverted.sortable.table thead th.sorted, .play-button.inverted.sortable.table thead th.sorted, .download-button.inverted.sortable.table thead th.sorted { background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); color: #ffffff; } .ui.inverted.sortable.table thead th:hover, .play-button.inverted.sortable.table thead th:hover, .download-button.inverted.sortable.table thead th:hover { background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); color: #ffffff; } .ui.inverted.sortable.table thead th, .play-button.inverted.sortable.table thead th, .download-button.inverted.sortable.table thead th { border-left-color: transparent; border-right-color: transparent; } /*-------------- Inverted ---------------*/ /* Text Color */ .ui.inverted.table, .play-button.inverted.table, .download-button.inverted.table { background: #333333; color: rgba(255, 255, 255, 0.9); border: none; } .ui.inverted.table th, .play-button.inverted.table th, .download-button.inverted.table th { background-color: rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.9) !important; } .ui.inverted.table tr td, .play-button.inverted.table tr td, .download-button.inverted.table tr td { border-color: rgba(255, 255, 255, 0.1) !important; } .ui.inverted.table tr.disabled td, .ui.inverted.table tr td.disabled, .ui.inverted.table tr.disabled:hover td, .ui.inverted.table tr:hover td.disabled, .play-button.inverted.table tr.disabled td, .play-button.inverted.table tr td.disabled, .play-button.inverted.table tr.disabled:hover td, .play-button.inverted.table tr:hover td.disabled, .download-button.inverted.table tr.disabled td, .download-button.inverted.table tr td.disabled, .download-button.inverted.table tr.disabled:hover td, .download-button.inverted.table tr:hover td.disabled { pointer-events: none; color: rgba(225, 225, 225, 0.3); } /* Definition */ .ui.inverted.definition.table tfoot:not(.full-width) th:first-child, .ui.inverted.definition.table thead:not(.full-width) th:first-child, .play-button.inverted.definition.table tfoot:not(.full-width) th:first-child, .play-button.inverted.definition.table thead:not(.full-width) th:first-child, .download-button.inverted.definition.table tfoot:not(.full-width) th:first-child, .download-button.inverted.definition.table thead:not(.full-width) th:first-child { background: #FFFFFF; } .ui.inverted.definition.table tr td:first-child, .play-button.inverted.definition.table tr td:first-child, .download-button.inverted.definition.table tr td:first-child { background: rgba(255, 255, 255, 0.02); color: #ffffff; } /*-------------- Collapsing ---------------*/ .ui.collapsing.table, .play-button.collapsing.table, .download-button.collapsing.table { width: auto; } /*-------------- Basic ---------------*/ .ui.basic.table, .play-button.basic.table, .download-button.basic.table { background: transparent; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.table thead, .ui.basic.table tfoot, .play-button.basic.table thead, .play-button.basic.table tfoot, .download-button.basic.table thead, .download-button.basic.table tfoot { box-shadow: none; } .ui.basic.table th, .play-button.basic.table th, .download-button.basic.table th { background: transparent; border-left: none; } .ui.basic.table tbody tr, .play-button.basic.table tbody tr, .download-button.basic.table tbody tr { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .ui.basic.table td, .play-button.basic.table td, .download-button.basic.table td { background: transparent; } .ui.basic.striped.table tbody tr:nth-child(2n), .play-button.basic.striped.table tbody tr:nth-child(2n), .download-button.basic.striped.table tbody tr:nth-child(2n) { background-color: rgba(0, 0, 0, 0.05) !important; } /* Very Basic */ .ui[class*="very basic"].table, .play-button[class*="very basic"].table, .download-button[class*="very basic"].table { border: none; } .ui[class*="very basic"].table:not(.sortable):not(.striped) th, .ui[class*="very basic"].table:not(.sortable):not(.striped) td, .play-button[class*="very basic"].table:not(.sortable):not(.striped) th, .play-button[class*="very basic"].table:not(.sortable):not(.striped) td, .download-button[class*="very basic"].table:not(.sortable):not(.striped) th, .download-button[class*="very basic"].table:not(.sortable):not(.striped) td { padding: ''; } .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child, .play-button[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, .play-button[class*="very basic"].table:not(.sortable):not(.striped) td:first-child, .download-button[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, .download-button[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { padding-left: 0em; } .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child, .play-button[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, .play-button[class*="very basic"].table:not(.sortable):not(.striped) td:last-child, .download-button[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, .download-button[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { padding-right: 0em; } .ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th, .play-button[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th, .download-button[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { padding-top: 0em; } /*-------------- Celled ---------------*/ .ui.celled.table tr th, .ui.celled.table tr td, .play-button.celled.table tr th, .play-button.celled.table tr td, .download-button.celled.table tr th, .download-button.celled.table tr td { border-left: 1px solid rgba(34, 36, 38, 0.1); } .ui.celled.table tr th:first-child, .ui.celled.table tr td:first-child, .play-button.celled.table tr th:first-child, .play-button.celled.table tr td:first-child, .download-button.celled.table tr th:first-child, .download-button.celled.table tr td:first-child { border-left: none; } /*-------------- Padded ---------------*/ .ui.padded.table th, .play-button.padded.table th, .download-button.padded.table th { padding-left: 1em; padding-right: 1em; } .ui.padded.table th, .ui.padded.table td, .play-button.padded.table th, .play-button.padded.table td, .download-button.padded.table th, .download-button.padded.table td { padding: 1em 1em; } /* Very */ .ui[class*="very padded"].table th, .play-button[class*="very padded"].table th, .download-button[class*="very padded"].table th { padding-left: 1.5em; padding-right: 1.5em; } .ui[class*="very padded"].table td, .play-button[class*="very padded"].table td, .download-button[class*="very padded"].table td { padding: 1.5em 1.5em; } /*-------------- Compact ---------------*/ .ui.compact.table th, .play-button.compact.table th, .download-button.compact.table th { padding-left: 0.7em; padding-right: 0.7em; } .ui.compact.table td, .play-button.compact.table td, .download-button.compact.table td { padding: 0.5em 0.7em; } /* Very */ .ui[class*="very compact"].table th, .play-button[class*="very compact"].table th, .download-button[class*="very compact"].table th { padding-left: 0.6em; padding-right: 0.6em; } .ui[class*="very compact"].table td, .play-button[class*="very compact"].table td, .download-button[class*="very compact"].table td { padding: 0.4em 0.6em; } /*-------------- Sizes ---------------*/ /* Small */ .ui.small.table, .play-button.small.table, .download-button.small.table { font-size: 0.9em; } /* Standard */ .ui.table, .play-button.table, .download-button.table { font-size: 1em; } /* Large */ .ui.large.table, .play-button.large.table, .download-button.large.table { font-size: 1.1em; } /******************************* Site Overrides *******************************/ /* Views */ /*! * # Semantic UI - Ad * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Advertisement *******************************/ /* Packaged Theme */ /******************************* Advertisement *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Advertisement *******************************/ .ui.ad, .play-button.ad, .download-button.ad { display: block; overflow: hidden; margin: 1em 0em; } .ui.ad:first-child, .play-button.ad:first-child, .download-button.ad:first-child { margin: 0em; } .ui.ad:last-child, .play-button.ad:last-child, .download-button.ad:last-child { margin: 0em; } .ui.ad iframe, .play-button.ad iframe, .download-button.ad iframe { margin: 0em; padding: 0em; border: none; overflow: hidden; } /*-------------- Common ---------------*/ /* Leaderboard */ .ui.leaderboard.ad, .play-button.leaderboard.ad, .download-button.leaderboard.ad { width: 728px; height: 90px; } /* Medium Rectangle */ .ui[class*="medium rectangle"].ad, .play-button[class*="medium rectangle"].ad, .download-button[class*="medium rectangle"].ad { width: 300px; height: 250px; } /* Large Rectangle */ .ui[class*="large rectangle"].ad, .play-button[class*="large rectangle"].ad, .download-button[class*="large rectangle"].ad { width: 336px; height: 280px; } /* Half Page */ .ui[class*="half page"].ad, .play-button[class*="half page"].ad, .download-button[class*="half page"].ad { width: 300px; height: 600px; } /*-------------- Square ---------------*/ /* Square */ .ui.square.ad, .play-button.square.ad, .download-button.square.ad { width: 250px; height: 250px; } /* Small Square */ .ui[class*="small square"].ad, .play-button[class*="small square"].ad, .download-button[class*="small square"].ad { width: 200px; height: 200px; } /*-------------- Rectangle ---------------*/ /* Small Rectangle */ .ui[class*="small rectangle"].ad, .play-button[class*="small rectangle"].ad, .download-button[class*="small rectangle"].ad { width: 180px; height: 150px; } /* Vertical Rectangle */ .ui[class*="vertical rectangle"].ad, .play-button[class*="vertical rectangle"].ad, .download-button[class*="vertical rectangle"].ad { width: 240px; height: 400px; } /*-------------- Button ---------------*/ .ui.button.ad, .play-button.button.ad, .ui.play-button.ad, .download-button.button.ad, .ui.download-button.ad { width: 120px; height: 90px; } .ui[class*="square button"].ad, .play-button[class*="square button"].ad, .download-button[class*="square button"].ad { width: 125px; height: 125px; } .ui[class*="small button"].ad, .play-button[class*="small button"].ad, .download-button[class*="small button"].ad { width: 120px; height: 60px; } /*-------------- Skyscrapers ---------------*/ /* Skyscraper */ .ui.skyscraper.ad, .play-button.skyscraper.ad, .download-button.skyscraper.ad { width: 120px; height: 600px; } /* Wide Skyscraper */ .ui[class*="wide skyscraper"].ad, .play-button[class*="wide skyscraper"].ad, .download-button[class*="wide skyscraper"].ad { width: 160px; } /*-------------- Banners ---------------*/ /* Banner */ .ui.banner.ad, .play-button.banner.ad, .download-button.banner.ad { width: 468px; height: 60px; } /* Vertical Banner */ .ui[class*="vertical banner"].ad, .play-button[class*="vertical banner"].ad, .download-button[class*="vertical banner"].ad { width: 120px; height: 240px; } /* Top Banner */ .ui[class*="top banner"].ad, .play-button[class*="top banner"].ad, .download-button[class*="top banner"].ad { width: 930px; height: 180px; } /* Half Banner */ .ui[class*="half banner"].ad, .play-button[class*="half banner"].ad, .download-button[class*="half banner"].ad { width: 234px; height: 60px; } /*-------------- Boards ---------------*/ /* Leaderboard */ .ui[class*="large leaderboard"].ad, .play-button[class*="large leaderboard"].ad, .download-button[class*="large leaderboard"].ad { width: 970px; height: 90px; } /* Billboard */ .ui.billboard.ad, .play-button.billboard.ad, .download-button.billboard.ad { width: 970px; height: 250px; } /*-------------- Panorama ---------------*/ /* Panorama */ .ui.panorama.ad, .play-button.panorama.ad, .download-button.panorama.ad { width: 980px; height: 120px; } /*-------------- Netboard ---------------*/ /* Netboard */ .ui.netboard.ad, .play-button.netboard.ad, .download-button.netboard.ad { width: 580px; height: 400px; } /*-------------- Mobile ---------------*/ /* Large Mobile Banner */ .ui[class*="large mobile banner"].ad, .play-button[class*="large mobile banner"].ad, .download-button[class*="large mobile banner"].ad { width: 320px; height: 100px; } /* Mobile Leaderboard */ .ui[class*="mobile leaderboard"].ad, .play-button[class*="mobile leaderboard"].ad, .download-button[class*="mobile leaderboard"].ad { width: 320px; height: 50px; } /******************************* Types *******************************/ /* Mobile Sizes */ .ui.mobile.ad, .play-button.mobile.ad, .download-button.mobile.ad { display: none; } @media only screen and (max-width: 767px) { .ui.mobile.ad, .play-button.mobile.ad, .download-button.mobile.ad { display: block; } } /******************************* Variations *******************************/ .ui.centered.ad, .play-button.centered.ad, .download-button.centered.ad { margin-left: auto; margin-right: auto; } .ui.test.ad, .play-button.test.ad, .download-button.test.ad { position: relative; background: #545454; } .ui.test.ad:after, .play-button.test.ad:after, .download-button.test.ad:after { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translateX(-50%) translateY(-50%); content: 'Ad'; color: #FFFFFF; font-size: 1em; font-weight: bold; } .ui.mobile.test.ad:after, .play-button.mobile.test.ad:after, .download-button.mobile.test.ad:after { font-size: 0.85714286em; } .ui.test.ad[data-text]:after, .play-button.test.ad[data-text]:after, .download-button.test.ad[data-text]:after { content: attr(data-text); } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Item * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Card *******************************/ /*------------------- View --------------------*/ /* Shadow */ /* Card */ /* Card Group */ /* Consecutive Cards */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Dimmer */ /* Additional Content */ /* Extra Links */ /* Buttons */ /*------------------- Variations --------------------*/ /* Link */ /* Raised */ /* Card Count */ /* Stackable */ /* Sizes */ /* Colored */ /* Packaged Theme */ /******************************* Card *******************************/ /*------------------- View --------------------*/ /* Shadow */ /* Card */ /* Card Group */ /* Consecutive Cards */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Dimmer */ /* Additional Content */ /* Extra Links */ /* Buttons */ /*------------------- Variations --------------------*/ /* Link */ /* Raised */ /* Card Count */ /* Stackable */ /* Sizes */ /* Colored */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Card ---------------*/ .ui.cards > .card, .ui.card, .play-button.cards > .card, .play-button.card, .download-button.cards > .card, .download-button.card { max-width: 100%; position: relative; display: flex; flex-direction: column; width: 290px; min-height: 0px; background: #FFFFFF; padding: 0em; border: none; border-radius: 0.28571429rem; box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; transition: box-shadow 0.1s ease, transform 0.1s ease; z-index: ''; } .ui.card, .play-button.card, .download-button.card { margin: 1em 0em; } .ui.cards > .card a, .ui.card a, .play-button.cards > .card a, .play-button.card a, .download-button.cards > .card a, .download-button.card a { cursor: pointer; } .ui.card:first-child, .play-button.card:first-child, .download-button.card:first-child { margin-top: 0em; } .ui.card:last-child, .play-button.card:last-child, .download-button.card:last-child { margin-bottom: 0em; } /*-------------- Cards ---------------*/ .ui.cards, .play-button.cards, .download-button.cards { display: flex; margin: -0.875em -0.5em; flex-wrap: wrap; } .ui.cards > .card, .play-button.cards > .card, .download-button.cards > .card { display: flex; margin: 0.875em 0.5em; float: none; } /* Clearing */ .ui.cards:after, .ui.card:after, .play-button.cards:after, .play-button.card:after, .download-button.cards:after, .download-button.card:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } /* Consecutive Card Groups Preserve Row Spacing */ .ui.cards ~ .ui.cards, .play-button.cards ~ .play-button.cards, .download-button.cards ~ .download-button.cards { margin-top: 0.875em; } /*-------------- Rounded Edges ---------------*/ .ui.cards > .card > :first-child, .ui.card > :first-child, .play-button.cards > .card > :first-child, .play-button.card > :first-child, .download-button.cards > .card > :first-child, .download-button.card > :first-child { border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; border-top: none !important; } .ui.cards > .card > :last-child, .ui.card > :last-child, .play-button.cards > .card > :last-child, .play-button.card > :last-child, .download-button.cards > .card > :last-child, .download-button.card > :last-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; } .ui.cards > .card > :only-child, .ui.card > :only-child, .play-button.cards > .card > :only-child, .play-button.card > :only-child, .download-button.cards > .card > :only-child, .download-button.card > :only-child { border-radius: 0.28571429rem !important; } /*-------------- Images ---------------*/ .ui.cards > .card > .image, .ui.card > .image, .play-button.cards > .card > .image, .play-button.card > .image, .download-button.cards > .card > .image, .download-button.card > .image { position: relative; display: block; flex: 0 0 auto; padding: 0em; background: rgba(0, 0, 0, 0.05); } .ui.cards > .card > .image > img, .ui.card > .image > img, .play-button.cards > .card > .image > img, .play-button.card > .image > img, .download-button.cards > .card > .image > img, .download-button.card > .image > img { display: block; width: 100%; height: auto; border-radius: inherit; } .ui.cards > .card > .image:not(.ui) > img, .ui.card > .image:not(.ui) > img, .play-button.cards > .card > .image:not(.ui) > img, .play-button.card > .image:not(.ui) > img, .download-button.cards > .card > .image:not(.ui) > img, .download-button.card > .image:not(.ui) > img { border: none; } /*-------------- Content ---------------*/ .ui.cards > .card > .content, .ui.card > .content, .play-button.cards > .card > .content, .play-button.card > .content, .download-button.cards > .card > .content, .download-button.card > .content { flex-grow: 1; border: none; border-top: 1px solid rgba(34, 36, 38, 0.1); background: none; margin: 0em; padding: 1em 1em; box-shadow: none; font-size: 1em; border-radius: 0em; } .ui.cards > .card > .content:after, .ui.card > .content:after, .play-button.cards > .card > .content:after, .play-button.card > .content:after, .download-button.cards > .card > .content:after, .download-button.card > .content:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.cards > .card > .content > .header, .ui.card > .content > .header, .play-button.cards > .card > .content > .header, .play-button.card > .content > .header, .download-button.cards > .card > .content > .header, .download-button.card > .content > .header { display: block; margin: ''; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; color: rgba(0, 0, 0, 0.85); } /* Default Header Size */ .ui.cards > .card > .content > .header:not(.ui), .ui.card > .content > .header:not(.ui), .play-button.cards > .card > .content > .header:not(.ui), .play-button.card > .content > .header:not(.ui), .download-button.cards > .card > .content > .header:not(.ui), .download-button.card > .content > .header:not(.ui) { font-weight: bold; font-size: 1.28571429em; margin-top: -0.21425em; line-height: 1.28571429em; } .ui.cards > .card > .content > .meta + .description, .ui.cards > .card > .content > .header + .description, .ui.card > .content > .meta + .description, .ui.card > .content > .header + .description, .play-button.cards > .card > .content > .meta + .description, .play-button.cards > .card > .content > .header + .description, .play-button.card > .content > .meta + .description, .play-button.card > .content > .header + .description, .download-button.cards > .card > .content > .meta + .description, .download-button.cards > .card > .content > .header + .description, .download-button.card > .content > .meta + .description, .download-button.card > .content > .header + .description { margin-top: 0.5em; } /*---------------- Floated Content -----------------*/ .ui.cards > .card [class*="left floated"], .ui.card [class*="left floated"], .play-button.cards > .card [class*="left floated"], .play-button.card [class*="left floated"], .download-button.cards > .card [class*="left floated"], .download-button.card [class*="left floated"] { float: left; } .ui.cards > .card [class*="right floated"], .ui.card [class*="right floated"], .play-button.cards > .card [class*="right floated"], .play-button.card [class*="right floated"], .download-button.cards > .card [class*="right floated"], .download-button.card [class*="right floated"] { float: right; } /*-------------- Aligned ---------------*/ .ui.cards > .card [class*="left aligned"], .ui.card [class*="left aligned"], .play-button.cards > .card [class*="left aligned"], .play-button.card [class*="left aligned"], .download-button.cards > .card [class*="left aligned"], .download-button.card [class*="left aligned"] { text-align: left; } .ui.cards > .card [class*="center aligned"], .ui.card [class*="center aligned"], .play-button.cards > .card [class*="center aligned"], .play-button.card [class*="center aligned"], .download-button.cards > .card [class*="center aligned"], .download-button.card [class*="center aligned"] { text-align: center; } .ui.cards > .card [class*="right aligned"], .ui.card [class*="right aligned"], .play-button.cards > .card [class*="right aligned"], .play-button.card [class*="right aligned"], .download-button.cards > .card [class*="right aligned"], .download-button.card [class*="right aligned"] { text-align: right; } /*-------------- Content Image ---------------*/ .ui.cards > .card .content img, .ui.card .content img, .play-button.cards > .card .content img, .play-button.card .content img, .download-button.cards > .card .content img, .download-button.card .content img { display: inline-block; vertical-align: middle; width: ''; } .ui.cards > .card img.avatar, .ui.cards > .card .avatar img, .ui.card img.avatar, .ui.card .avatar img, .play-button.cards > .card img.avatar, .play-button.cards > .card .avatar img, .play-button.card img.avatar, .play-button.card .avatar img, .download-button.cards > .card img.avatar, .download-button.cards > .card .avatar img, .download-button.card img.avatar, .download-button.card .avatar img { width: 2em; height: 2em; border-radius: 500rem; } /*-------------- Description ---------------*/ .ui.cards > .card > .content > .description, .ui.card > .content > .description, .play-button.cards > .card > .content > .description, .play-button.card > .content > .description, .download-button.cards > .card > .content > .description, .download-button.card > .content > .description { clear: both; color: rgba(0, 0, 0, 0.68); } /*-------------- Paragraph ---------------*/ .ui.cards > .card > .content p, .ui.card > .content p, .play-button.cards > .card > .content p, .play-button.card > .content p, .download-button.cards > .card > .content p, .download-button.card > .content p { margin: 0em 0em 0.5em; } .ui.cards > .card > .content p:last-child, .ui.card > .content p:last-child, .play-button.cards > .card > .content p:last-child, .play-button.card > .content p:last-child, .download-button.cards > .card > .content p:last-child, .download-button.card > .content p:last-child { margin-bottom: 0em; } /*-------------- Meta ---------------*/ .ui.cards > .card .meta, .ui.card .meta, .play-button.cards > .card .meta, .play-button.card .meta, .download-button.cards > .card .meta, .download-button.card .meta { font-size: 1em; color: rgba(0, 0, 0, 0.4); } .ui.cards > .card .meta *, .ui.card .meta *, .play-button.cards > .card .meta *, .play-button.card .meta *, .download-button.cards > .card .meta *, .download-button.card .meta * { margin-right: 0.3em; } .ui.cards > .card .meta :last-child, .ui.card .meta :last-child, .play-button.cards > .card .meta :last-child, .play-button.card .meta :last-child, .download-button.cards > .card .meta :last-child, .download-button.card .meta :last-child { margin-right: 0em; } .ui.cards > .card .meta [class*="right floated"], .ui.card .meta [class*="right floated"], .play-button.cards > .card .meta [class*="right floated"], .play-button.card .meta [class*="right floated"], .download-button.cards > .card .meta [class*="right floated"], .download-button.card .meta [class*="right floated"] { margin-right: 0em; margin-left: 0.3em; } /*-------------- Links ---------------*/ /* Generic */ .ui.cards > .card > .content a:not(.ui), .ui.card > .content a:not(.ui), .play-button.cards > .card > .content a:not(.ui), .play-button.card > .content a:not(.ui), .download-button.cards > .card > .content a:not(.ui), .download-button.card > .content a:not(.ui) { color: ''; transition: color 0.1s ease; } .ui.cards > .card > .content a:not(.ui):hover, .ui.card > .content a:not(.ui):hover, .play-button.cards > .card > .content a:not(.ui):hover, .play-button.card > .content a:not(.ui):hover, .download-button.cards > .card > .content a:not(.ui):hover, .download-button.card > .content a:not(.ui):hover { color: ''; } /* Header */ .ui.cards > .card > .content > a.header, .ui.card > .content > a.header, .play-button.cards > .card > .content > a.header, .play-button.card > .content > a.header, .download-button.cards > .card > .content > a.header, .download-button.card > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.cards > .card > .content > a.header:hover, .ui.card > .content > a.header:hover, .play-button.cards > .card > .content > a.header:hover, .play-button.card > .content > a.header:hover, .download-button.cards > .card > .content > a.header:hover, .download-button.card > .content > a.header:hover { color: #1e70bf; } /* Meta */ .ui.cards > .card .meta > a:not(.ui), .ui.card .meta > a:not(.ui), .play-button.cards > .card .meta > a:not(.ui), .play-button.card .meta > a:not(.ui), .download-button.cards > .card .meta > a:not(.ui), .download-button.card .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.cards > .card .meta > a:not(.ui):hover, .ui.card .meta > a:not(.ui):hover, .play-button.cards > .card .meta > a:not(.ui):hover, .play-button.card .meta > a:not(.ui):hover, .download-button.cards > .card .meta > a:not(.ui):hover, .download-button.card .meta > a:not(.ui):hover { color: rgba(0, 0, 0, 0.87); } /*-------------- Buttons ---------------*/ .ui.cards > .card > .buttons, .ui.card > .buttons, .ui.cards > .card > .button, .ui.card > .button, .play-button.cards > .card > .buttons, .play-button.card > .buttons, .play-button.cards > .card > .button, .play-button.card > .button, .ui.cards > .card > .play-button, .ui.card > .play-button, .download-button.cards > .card > .buttons, .download-button.card > .buttons, .download-button.cards > .card > .button, .download-button.card > .button, .ui.cards > .card > .download-button, .ui.card > .download-button { margin: 0px -1px; width: calc(100% + 2px ); } /*-------------- Dimmer ---------------*/ .ui.cards > .card .dimmer, .ui.card .dimmer, .play-button.cards > .card .dimmer, .play-button.card .dimmer, .download-button.cards > .card .dimmer, .download-button.card .dimmer { background-color: ''; z-index: 10; } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.cards > .card > .content .star.icon, .ui.card > .content .star.icon, .play-button.cards > .card > .content .star.icon, .play-button.card > .content .star.icon, .download-button.cards > .card > .content .star.icon, .download-button.card > .content .star.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.cards > .card > .content .star.icon:hover, .ui.card > .content .star.icon:hover, .play-button.cards > .card > .content .star.icon:hover, .play-button.card > .content .star.icon:hover, .download-button.cards > .card > .content .star.icon:hover, .download-button.card > .content .star.icon:hover { opacity: 1; color: #FFB70A; } .ui.cards > .card > .content .active.star.icon, .ui.card > .content .active.star.icon, .play-button.cards > .card > .content .active.star.icon, .play-button.card > .content .active.star.icon, .download-button.cards > .card > .content .active.star.icon, .download-button.card > .content .active.star.icon { color: #FFE623; } /*-----Like----- */ /* Icon */ .ui.cards > .card > .content .like.icon, .ui.card > .content .like.icon, .play-button.cards > .card > .content .like.icon, .play-button.card > .content .like.icon, .download-button.cards > .card > .content .like.icon, .download-button.card > .content .like.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.cards > .card > .content .like.icon:hover, .ui.card > .content .like.icon:hover, .play-button.cards > .card > .content .like.icon:hover, .play-button.card > .content .like.icon:hover, .download-button.cards > .card > .content .like.icon:hover, .download-button.card > .content .like.icon:hover { opacity: 1; color: #FF2733; } .ui.cards > .card > .content .active.like.icon, .ui.card > .content .active.like.icon, .play-button.cards > .card > .content .active.like.icon, .play-button.card > .content .active.like.icon, .download-button.cards > .card > .content .active.like.icon, .download-button.card > .content .active.like.icon { color: #FF2733; } /*---------------- Extra Content -----------------*/ .ui.cards > .card > .extra, .ui.card > .extra, .play-button.cards > .card > .extra, .play-button.card > .extra, .download-button.cards > .card > .extra, .download-button.card > .extra { max-width: 100%; min-height: 0em !important; flex-grow: 0; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; position: static; background: none; width: auto; margin: 0em 0em; padding: 0.75em 1em; top: 0em; left: 0em; color: rgba(0, 0, 0, 0.4); box-shadow: none; transition: color 0.1s ease; } .ui.cards > .card > .extra a:not(.ui), .ui.card > .extra a:not(.ui), .play-button.cards > .card > .extra a:not(.ui), .play-button.card > .extra a:not(.ui), .download-button.cards > .card > .extra a:not(.ui), .download-button.card > .extra a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.cards > .card > .extra a:not(.ui):hover, .ui.card > .extra a:not(.ui):hover, .play-button.cards > .card > .extra a:not(.ui):hover, .play-button.card > .extra a:not(.ui):hover, .download-button.cards > .card > .extra a:not(.ui):hover, .download-button.card > .extra a:not(.ui):hover { color: #1e70bf; } /******************************* Variations *******************************/ /*------------------- Raised --------------------*/ .ui.raised.cards > .card, .ui.raised.card, .play-button.raised.cards > .card, .play-button.raised.card, .download-button.raised.cards > .card, .download-button.raised.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } .ui.raised.cards a.card:hover, .ui.link.cards .raised.card:hover, a.ui.raised.card:hover, .ui.link.raised.card:hover, .play-button.raised.cards a.card:hover, .play-button.link.cards .raised.card:hover, a.play-button.raised.card:hover, .play-button.link.raised.card:hover, .download-button.raised.cards a.card:hover, .download-button.link.cards .raised.card:hover, a.download-button.raised.card:hover, .download-button.link.raised.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); } .ui.raised.cards > .card, .ui.raised.card, .play-button.raised.cards > .card, .play-button.raised.card, .download-button.raised.cards > .card, .download-button.raised.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } /*------------------- Centered --------------------*/ .ui.centered.cards, .play-button.centered.cards, .download-button.centered.cards { justify-content: center; } .ui.centered.card, .play-button.centered.card, .download-button.centered.card { margin-left: auto; margin-right: auto; } /*------------------- Fluid --------------------*/ .ui.fluid.card, .play-button.fluid.card, .download-button.fluid.card { width: 100%; max-width: 9999px; } /*------------------- Link --------------------*/ .ui.cards a.card, .ui.link.cards .card, a.ui.card, .ui.link.card, .play-button.cards a.card, .play-button.link.cards .card, a.play-button.card, .play-button.link.card, .download-button.cards a.card, .download-button.link.cards .card, a.download-button.card, .download-button.link.card { transform: none; } .ui.cards a.card:hover, .ui.link.cards .card:hover, a.ui.card:hover, .ui.link.card:hover, .play-button.cards a.card:hover, .play-button.link.cards .card:hover, a.play-button.card:hover, .play-button.link.card:hover, .download-button.cards a.card:hover, .download-button.link.cards .card:hover, a.download-button.card:hover, .download-button.link.card:hover { cursor: pointer; z-index: 5; background: #FFFFFF; border: none; box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; transform: translateY(-3px); } /*------------------- Colors --------------------*/ /* Red */ .ui.red.cards > .card, .ui.cards > .red.card, .ui.red.card, .play-button.red.cards > .card, .play-button.cards > .red.card, .play-button.red.card, .download-button.red.cards > .card, .download-button.cards > .red.card, .download-button.red.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E81123, 0px 1px 3px 0px #D4D4D5; } .ui.red.cards > .card:hover, .ui.cards > .red.card:hover, .ui.red.card:hover, .play-button.red.cards > .card:hover, .play-button.cards > .red.card:hover, .play-button.red.card:hover, .download-button.red.cards > .card:hover, .download-button.cards > .red.card:hover, .download-button.red.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #da0617, 0px 1px 3px 0px #BCBDBD; } /* Orange */ .ui.orange.cards > .card, .ui.cards > .orange.card, .ui.orange.card, .play-button.orange.cards > .card, .play-button.cards > .orange.card, .play-button.orange.card, .download-button.orange.cards > .card, .download-button.cards > .orange.card, .download-button.orange.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DF4600, 0px 1px 3px 0px #D4D4D5; } .ui.orange.cards > .card:hover, .ui.cards > .orange.card:hover, .ui.orange.card:hover, .play-button.orange.cards > .card:hover, .play-button.cards > .orange.card:hover, .play-button.orange.card:hover, .download-button.orange.cards > .card:hover, .download-button.cards > .orange.card:hover, .download-button.orange.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #c63e00, 0px 1px 3px 0px #BCBDBD; } /* Yellow */ .ui.yellow.cards > .card, .ui.cards > .yellow.card, .ui.yellow.card, .play-button.yellow.cards > .card, .play-button.cards > .yellow.card, .play-button.yellow.card, .download-button.yellow.cards > .card, .download-button.cards > .yellow.card, .download-button.yellow.card, .ui.download-button.cards > .card, .ui.cards > .download-button.card, .ui.download-button.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F4C918, 0px 1px 3px 0px #D4D4D5; } .ui.yellow.cards > .card:hover, .ui.cards > .yellow.card:hover, .ui.yellow.card:hover, .play-button.yellow.cards > .card:hover, .play-button.cards > .yellow.card:hover, .play-button.yellow.card:hover, .download-button.yellow.cards > .card:hover, .download-button.cards > .yellow.card:hover, .download-button.yellow.card:hover, .ui.download-button.cards > .card:hover, .ui.cards > .download-button.card:hover, .ui.download-button.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f3c300, 0px 1px 3px 0px #BCBDBD; } /* Olive */ .ui.olive.cards > .card, .ui.cards > .olive.card, .ui.olive.card, .play-button.olive.cards > .card, .play-button.cards > .olive.card, .play-button.olive.card, .download-button.olive.cards > .card, .download-button.cards > .olive.card, .download-button.olive.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; } .ui.olive.cards > .card:hover, .ui.cards > .olive.card:hover, .ui.olive.card:hover, .play-button.olive.cards > .card:hover, .play-button.cards > .olive.card:hover, .play-button.olive.card:hover, .download-button.olive.cards > .card:hover, .download-button.cards > .olive.card:hover, .download-button.olive.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; } /* Green */ .ui.green.cards > .card, .ui.cards > .green.card, .ui.green.card, .ui.ui.button.getting-started-btn.cards > .card, .ui.cards > .ui.button.getting-started-btn.card, .ui.ui.button.getting-started-btn.card, .play-button.green.cards > .card, .play-button.cards > .green.card, .play-button.green.card, .download-button.green.cards > .card, .download-button.cards > .green.card, .download-button.green.card, .ui.play-button.button.getting-started-btn.cards > .card, .ui.cards > .play-button.button.getting-started-btn.card, .ui.play-button.button.getting-started-btn.card, .ui.ui.play-button.getting-started-btn.cards > .card, .ui.cards > .ui.play-button.getting-started-btn.card, .ui.ui.play-button.getting-started-btn.card, .ui.download-button.button.getting-started-btn.cards > .card, .ui.cards > .download-button.button.getting-started-btn.card, .ui.download-button.button.getting-started-btn.card, .ui.ui.download-button.getting-started-btn.cards > .card, .ui.cards > .ui.download-button.getting-started-btn.card, .ui.ui.download-button.getting-started-btn.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #3FC863, 0px 1px 3px 0px #D4D4D5; } .ui.green.cards > .card:hover, .ui.cards > .green.card:hover, .ui.green.card:hover, .ui.ui.button.getting-started-btn.cards > .card:hover, .ui.cards > .ui.button.getting-started-btn.card:hover, .ui.ui.button.getting-started-btn.card:hover, .play-button.green.cards > .card:hover, .play-button.cards > .green.card:hover, .play-button.green.card:hover, .download-button.green.cards > .card:hover, .download-button.cards > .green.card:hover, .download-button.green.card:hover, .ui.play-button.button.getting-started-btn.cards > .card:hover, .ui.cards > .play-button.button.getting-started-btn.card:hover, .ui.play-button.button.getting-started-btn.card:hover, .ui.ui.play-button.getting-started-btn.cards > .card:hover, .ui.cards > .ui.play-button.getting-started-btn.card:hover, .ui.ui.play-button.getting-started-btn.card:hover, .ui.download-button.button.getting-started-btn.cards > .card:hover, .ui.cards > .download-button.button.getting-started-btn.card:hover, .ui.download-button.button.getting-started-btn.card:hover, .ui.ui.download-button.getting-started-btn.cards > .card:hover, .ui.cards > .ui.download-button.getting-started-btn.card:hover, .ui.ui.download-button.getting-started-btn.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2ebf54, 0px 1px 3px 0px #BCBDBD; } /* Teal */ .ui.teal.cards > .card, .ui.cards > .teal.card, .ui.teal.card, .play-button.teal.cards > .card, .play-button.cards > .teal.card, .play-button.teal.card, .download-button.teal.cards > .card, .download-button.cards > .teal.card, .download-button.teal.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #008272, 0px 1px 3px 0px #D4D4D5; } .ui.teal.cards > .card:hover, .ui.cards > .teal.card:hover, .ui.teal.card:hover, .play-button.teal.cards > .card:hover, .play-button.cards > .teal.card:hover, .play-button.teal.card:hover, .download-button.teal.cards > .card:hover, .download-button.cards > .teal.card:hover, .download-button.teal.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00695c, 0px 1px 3px 0px #BCBDBD; } /* Blue */ .ui.blue.cards > .card, .ui.cards > .blue.card, .ui.blue.card, .play-button.blue.cards > .card, .play-button.cards > .blue.card, .play-button.blue.card, .ui.play-button.cards > .card, .ui.cards > .play-button.card, .ui.play-button.card, .download-button.blue.cards > .card, .download-button.cards > .blue.card, .download-button.blue.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #54C9C9, 0px 1px 3px 0px #D4D4D5; } .ui.blue.cards > .card:hover, .ui.cards > .blue.card:hover, .ui.blue.card:hover, .play-button.blue.cards > .card:hover, .play-button.cards > .blue.card:hover, .play-button.blue.card:hover, .ui.play-button.cards > .card:hover, .ui.cards > .play-button.card:hover, .ui.play-button.card:hover, .download-button.blue.cards > .card:hover, .download-button.cards > .blue.card:hover, .download-button.blue.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #3ac9c9, 0px 1px 3px 0px #BCBDBD; } /* Violet */ .ui.violet.cards > .card, .ui.cards > .violet.card, .ui.violet.card, .play-button.violet.cards > .card, .play-button.cards > .violet.card, .play-button.violet.card, .download-button.violet.cards > .card, .download-button.cards > .violet.card, .download-button.violet.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #C90072, 0px 1px 3px 0px #D4D4D5; } .ui.violet.cards > .card:hover, .ui.cards > .violet.card:hover, .ui.violet.card:hover, .play-button.violet.cards > .card:hover, .play-button.cards > .violet.card:hover, .play-button.violet.card:hover, .download-button.violet.cards > .card:hover, .download-button.cards > .violet.card:hover, .download-button.violet.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #b00064, 0px 1px 3px 0px #BCBDBD; } /* Purple */ .ui.purple.cards > .card, .ui.cards > .purple.card, .ui.purple.card, .play-button.purple.cards > .card, .play-button.cards > .purple.card, .play-button.purple.card, .download-button.purple.cards > .card, .download-button.cards > .purple.card, .download-button.purple.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #8169E6, 0px 1px 3px 0px #D4D4D5; } .ui.purple.cards > .card:hover, .ui.cards > .purple.card:hover, .ui.purple.card:hover, .play-button.purple.cards > .card:hover, .play-button.cards > .purple.card:hover, .play-button.purple.card:hover, .download-button.purple.cards > .card:hover, .download-button.cards > .purple.card:hover, .download-button.purple.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6a4cea, 0px 1px 3px 0px #BCBDBD; } /* Pink */ .ui.pink.cards > .card, .ui.cards > .pink.card, .ui.pink.card, .play-button.pink.cards > .card, .play-button.cards > .pink.card, .play-button.pink.card, .download-button.pink.cards > .card, .download-button.cards > .pink.card, .download-button.pink.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E2008C, 0px 1px 3px 0px #D4D4D5; } .ui.pink.cards > .card:hover, .ui.cards > .pink.card:hover, .ui.pink.card:hover, .play-button.pink.cards > .card:hover, .play-button.cards > .pink.card:hover, .play-button.pink.card:hover, .download-button.pink.cards > .card:hover, .download-button.cards > .pink.card:hover, .download-button.pink.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #c9007c, 0px 1px 3px 0px #BCBDBD; } /* Brown */ .ui.brown.cards > .card, .ui.cards > .brown.card, .ui.brown.card, .play-button.brown.cards > .card, .play-button.cards > .brown.card, .play-button.brown.card, .download-button.brown.cards > .card, .download-button.cards > .brown.card, .download-button.brown.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6B5B4C, 0px 1px 3px 0px #D4D4D5; } .ui.brown.cards > .card:hover, .ui.cards > .brown.card:hover, .ui.brown.card:hover, .play-button.brown.cards > .card:hover, .play-button.cards > .brown.card:hover, .play-button.brown.card:hover, .download-button.brown.cards > .card:hover, .download-button.cards > .brown.card:hover, .download-button.brown.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5d4e40, 0px 1px 3px 0px #BCBDBD; } /* Grey */ .ui.grey.cards > .card, .ui.cards > .grey.card, .ui.grey.card, .ui.ui.button.editortools-btn.cards > .card, .ui.cards > .ui.button.editortools-btn.card, .ui.ui.button.editortools-btn.card, .play-button.grey.cards > .card, .play-button.cards > .grey.card, .play-button.grey.card, .download-button.grey.cards > .card, .download-button.cards > .grey.card, .download-button.grey.card, .ui.play-button.button.editortools-btn.cards > .card, .ui.cards > .play-button.button.editortools-btn.card, .ui.play-button.button.editortools-btn.card, .ui.ui.play-button.editortools-btn.cards > .card, .ui.cards > .ui.play-button.editortools-btn.card, .ui.ui.play-button.editortools-btn.card, .ui.download-button.button.editortools-btn.cards > .card, .ui.cards > .download-button.button.editortools-btn.card, .ui.download-button.button.editortools-btn.card, .ui.ui.download-button.editortools-btn.cards > .card, .ui.cards > .ui.download-button.editortools-btn.card, .ui.ui.download-button.editortools-btn.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #42495F, 0px 1px 3px 0px #D4D4D5; } .ui.grey.cards > .card:hover, .ui.cards > .grey.card:hover, .ui.grey.card:hover, .ui.ui.button.editortools-btn.cards > .card:hover, .ui.cards > .ui.button.editortools-btn.card:hover, .ui.ui.button.editortools-btn.card:hover, .play-button.grey.cards > .card:hover, .play-button.cards > .grey.card:hover, .play-button.grey.card:hover, .download-button.grey.cards > .card:hover, .download-button.cards > .grey.card:hover, .download-button.grey.card:hover, .ui.play-button.button.editortools-btn.cards > .card:hover, .ui.cards > .play-button.button.editortools-btn.card:hover, .ui.play-button.button.editortools-btn.card:hover, .ui.ui.play-button.editortools-btn.cards > .card:hover, .ui.cards > .ui.play-button.editortools-btn.card:hover, .ui.ui.play-button.editortools-btn.card:hover, .ui.download-button.button.editortools-btn.cards > .card:hover, .ui.cards > .download-button.button.editortools-btn.card:hover, .ui.download-button.button.editortools-btn.card:hover, .ui.ui.download-button.editortools-btn.cards > .card:hover, .ui.cards > .ui.download-button.editortools-btn.card:hover, .ui.ui.download-button.editortools-btn.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #4c556e, 0px 1px 3px 0px #BCBDBD; } /* Black */ .ui.black.cards > .card, .ui.cards > .black.card, .ui.black.card, .play-button.black.cards > .card, .play-button.cards > .black.card, .play-button.black.card, .download-button.black.cards > .card, .download-button.cards > .black.card, .download-button.black.card { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5; } .ui.black.cards > .card:hover, .ui.cards > .black.card:hover, .ui.black.card:hover, .play-button.black.cards > .card:hover, .play-button.cards > .black.card:hover, .play-button.black.card:hover, .download-button.black.cards > .card:hover, .download-button.cards > .black.card:hover, .download-button.black.card:hover { box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD; } /*-------------- Card Count ---------------*/ .ui.one.cards, .play-button.one.cards, .download-button.one.cards { margin-left: 0em; margin-right: 0em; } .ui.one.cards > .card, .play-button.one.cards > .card, .download-button.one.cards > .card { width: 100%; } .ui.two.cards, .play-button.two.cards, .download-button.two.cards { margin-left: -1em; margin-right: -1em; } .ui.two.cards > .card, .play-button.two.cards > .card, .download-button.two.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.three.cards, .play-button.three.cards, .download-button.three.cards { margin-left: -1em; margin-right: -1em; } .ui.three.cards > .card, .play-button.three.cards > .card, .download-button.three.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.four.cards, .play-button.four.cards, .download-button.four.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.four.cards > .card, .play-button.four.cards > .card, .download-button.four.cards > .card { width: calc( 25% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.five.cards, .play-button.five.cards, .download-button.five.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.five.cards > .card, .play-button.five.cards > .card, .download-button.five.cards > .card { width: calc( 20% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.six.cards, .play-button.six.cards, .download-button.six.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.six.cards > .card, .play-button.six.cards > .card, .download-button.six.cards > .card { width: calc( 16.66666667% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.seven.cards, .play-button.seven.cards, .download-button.seven.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.seven.cards > .card, .play-button.seven.cards > .card, .download-button.seven.cards > .card { width: calc( 14.28571429% - 1em ); margin-left: 0.5em; margin-right: 0.5em; } .ui.eight.cards, .play-button.eight.cards, .download-button.eight.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.eight.cards > .card, .play-button.eight.cards > .card, .download-button.eight.cards > .card { width: calc( 12.5% - 1em ); margin-left: 0.5em; margin-right: 0.5em; font-size: 11px; } .ui.nine.cards, .play-button.nine.cards, .download-button.nine.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.nine.cards > .card, .play-button.nine.cards > .card, .download-button.nine.cards > .card { width: calc( 11.11111111% - 1em ); margin-left: 0.5em; margin-right: 0.5em; font-size: 10px; } .ui.ten.cards, .play-button.ten.cards, .download-button.ten.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.ten.cards > .card, .play-button.ten.cards > .card, .download-button.ten.cards > .card { width: calc( 10% - 1em ); margin-left: 0.5em; margin-right: 0.5em; } /*------------------- Doubling --------------------*/ /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.two.doubling.cards, .play-button.two.doubling.cards, .download-button.two.doubling.cards { margin-left: 0em; margin-right: 0em; } .ui.two.doubling.cards > .card, .play-button.two.doubling.cards > .card, .download-button.two.doubling.cards > .card { width: 100%; margin-left: 0em; margin-right: 0em; } .ui.three.doubling.cards, .play-button.three.doubling.cards, .download-button.three.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.three.doubling.cards > .card, .play-button.three.doubling.cards > .card, .download-button.three.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.four.doubling.cards, .play-button.four.doubling.cards, .download-button.four.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.four.doubling.cards > .card, .play-button.four.doubling.cards > .card, .download-button.four.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.five.doubling.cards, .play-button.five.doubling.cards, .download-button.five.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.five.doubling.cards > .card, .play-button.five.doubling.cards > .card, .download-button.five.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.six.doubling.cards, .play-button.six.doubling.cards, .download-button.six.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.six.doubling.cards > .card, .play-button.six.doubling.cards > .card, .download-button.six.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.seven.doubling.cards, .play-button.seven.doubling.cards, .download-button.seven.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.seven.doubling.cards > .card, .play-button.seven.doubling.cards > .card, .download-button.seven.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.eight.doubling.cards, .play-button.eight.doubling.cards, .download-button.eight.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.eight.doubling.cards > .card, .play-button.eight.doubling.cards > .card, .download-button.eight.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.nine.doubling.cards, .play-button.nine.doubling.cards, .download-button.nine.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.nine.doubling.cards > .card, .play-button.nine.doubling.cards > .card, .download-button.nine.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.ten.doubling.cards, .play-button.ten.doubling.cards, .download-button.ten.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.ten.doubling.cards > .card, .play-button.ten.doubling.cards > .card, .download-button.ten.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.two.doubling.cards, .play-button.two.doubling.cards, .download-button.two.doubling.cards { margin-left: 0em; margin-right: 0em; } .ui.two.doubling.cards > .card, .play-button.two.doubling.cards > .card, .download-button.two.doubling.cards > .card { width: 100%; margin-left: 0em; margin-right: 0em; } .ui.three.doubling.cards, .play-button.three.doubling.cards, .download-button.three.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.three.doubling.cards > .card, .play-button.three.doubling.cards > .card, .download-button.three.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.four.doubling.cards, .play-button.four.doubling.cards, .download-button.four.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.four.doubling.cards > .card, .play-button.four.doubling.cards > .card, .download-button.four.doubling.cards > .card { width: calc( 50% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.five.doubling.cards, .play-button.five.doubling.cards, .download-button.five.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.five.doubling.cards > .card, .play-button.five.doubling.cards > .card, .download-button.five.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.six.doubling.cards, .play-button.six.doubling.cards, .download-button.six.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.six.doubling.cards > .card, .play-button.six.doubling.cards > .card, .download-button.six.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.eight.doubling.cards, .play-button.eight.doubling.cards, .download-button.eight.doubling.cards { margin-left: -1em; margin-right: -1em; } .ui.eight.doubling.cards > .card, .play-button.eight.doubling.cards > .card, .download-button.eight.doubling.cards > .card { width: calc( 33.33333333% - 2em ); margin-left: 1em; margin-right: 1em; } .ui.eight.doubling.cards, .play-button.eight.doubling.cards, .download-button.eight.doubling.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.eight.doubling.cards > .card, .play-button.eight.doubling.cards > .card, .download-button.eight.doubling.cards > .card { width: calc( 25% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.nine.doubling.cards, .play-button.nine.doubling.cards, .download-button.nine.doubling.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.nine.doubling.cards > .card, .play-button.nine.doubling.cards > .card, .download-button.nine.doubling.cards > .card { width: calc( 25% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } .ui.ten.doubling.cards, .play-button.ten.doubling.cards, .download-button.ten.doubling.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.ten.doubling.cards > .card, .play-button.ten.doubling.cards > .card, .download-button.ten.doubling.cards > .card { width: calc( 20% - 1.5em ); margin-left: 0.75em; margin-right: 0.75em; } } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767px) { .ui.stackable.cards, .play-button.stackable.cards, .download-button.stackable.cards { display: block !important; } .ui.stackable.cards .card:first-child, .play-button.stackable.cards .card:first-child, .download-button.stackable.cards .card:first-child { margin-top: 0em !important; } .ui.stackable.cards > .card, .play-button.stackable.cards > .card, .download-button.stackable.cards > .card { display: block !important; height: auto !important; margin: 1em 1em; padding: 0 !important; width: calc( 100% - 2em ) !important; } } /*-------------- Size ---------------*/ .ui.cards > .card, .play-button.cards > .card, .download-button.cards > .card { font-size: 1em; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Comment * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Comments *******************************/ /*------------------- View --------------------*/ /*------------------- Elements --------------------*/ /* Comment */ /* Nested Comment */ /* Avatar */ /* Content */ /* Author */ /* Metadata */ /* Text */ /* Actions */ /* Reply */ /*------------------- Variations --------------------*/ /* Threaded */ /* Minimal */ /* Packaged Theme */ /******************************* Comments *******************************/ /*------------------- View --------------------*/ /*------------------- Elements --------------------*/ /* Comment */ /* Nested Comment */ /* Avatar */ /* Content */ /* Author */ /* Metadata */ /* Text */ /* Actions */ /* Reply */ /*------------------- Variations --------------------*/ /* Threaded */ /* Minimal */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Comments ---------------*/ .ui.comments, .play-button.comments, .download-button.comments { margin: 1.5em 0em; max-width: 650px; } .ui.comments:first-child, .play-button.comments:first-child, .download-button.comments:first-child { margin-top: 0em; } .ui.comments:last-child, .play-button.comments:last-child, .download-button.comments:last-child { margin-bottom: 0em; } /*-------------- Comment ---------------*/ .ui.comments .comment, .play-button.comments .comment, .download-button.comments .comment { position: relative; background: none; margin: 0.5em 0em 0em; padding: 0.5em 0em 0em; border: none; border-top: none; line-height: 1.2; } .ui.comments .comment:first-child, .play-button.comments .comment:first-child, .download-button.comments .comment:first-child { margin-top: 0em; padding-top: 0em; } /*-------------------- Nested Comments ---------------------*/ .ui.comments .comment .comments, .play-button.comments .comment .comments, .download-button.comments .comment .comments { margin: 0em 0em 0.5em 0.5em; padding: 1em 0em 1em 1em; } .ui.comments .comment .comments:before, .play-button.comments .comment .comments:before, .download-button.comments .comment .comments:before { position: absolute; top: 0px; left: 0px; } .ui.comments .comment .comments .comment, .play-button.comments .comment .comments .comment, .download-button.comments .comment .comments .comment { border: none; border-top: none; background: none; } /*-------------- Avatar ---------------*/ .ui.comments .comment .avatar, .play-button.comments .comment .avatar, .download-button.comments .comment .avatar { display: block; width: 2.5em; height: auto; float: left; margin: 0.2em 0em 0em; } .ui.comments .comment img.avatar, .ui.comments .comment .avatar img, .play-button.comments .comment img.avatar, .play-button.comments .comment .avatar img, .download-button.comments .comment img.avatar, .download-button.comments .comment .avatar img { display: block; margin: 0em auto; width: 100%; height: 100%; border-radius: 0.25rem; } /*-------------- Content ---------------*/ .ui.comments .comment > .content, .play-button.comments .comment > .content, .download-button.comments .comment > .content { display: block; } /* If there is an avatar move content over */ .ui.comments .comment > .avatar ~ .content, .play-button.comments .comment > .avatar ~ .content, .download-button.comments .comment > .avatar ~ .content { margin-left: 3.5em; } /*-------------- Author ---------------*/ .ui.comments .comment .author, .play-button.comments .comment .author, .download-button.comments .comment .author { font-size: 1em; color: rgba(0, 0, 0, 0.87); font-weight: bold; } .ui.comments .comment a.author, .play-button.comments .comment a.author, .download-button.comments .comment a.author { cursor: pointer; } .ui.comments .comment a.author:hover, .play-button.comments .comment a.author:hover, .download-button.comments .comment a.author:hover { color: #1e70bf; } /*-------------- Metadata ---------------*/ .ui.comments .comment .metadata, .play-button.comments .comment .metadata, .download-button.comments .comment .metadata { display: inline-block; margin-left: 0.5em; color: rgba(0, 0, 0, 0.4); font-size: 0.875em; } .ui.comments .comment .metadata > *, .play-button.comments .comment .metadata > *, .download-button.comments .comment .metadata > * { display: inline-block; margin: 0em 0.5em 0em 0em; } .ui.comments .comment .metadata > :last-child, .play-button.comments .comment .metadata > :last-child, .download-button.comments .comment .metadata > :last-child { margin-right: 0em; } /*-------------------- Comment Text ---------------------*/ .ui.comments .comment .text, .play-button.comments .comment .text, .download-button.comments .comment .text { margin: 0.25em 0em 0.5em; font-size: 1em; word-wrap: break-word; color: rgba(0, 0, 0, 0.87); line-height: 1.3; } /*-------------------- User Actions ---------------------*/ .ui.comments .comment .actions, .play-button.comments .comment .actions, .download-button.comments .comment .actions { font-size: 0.875em; } .ui.comments .comment .actions a, .play-button.comments .comment .actions a, .download-button.comments .comment .actions a { cursor: pointer; display: inline-block; margin: 0em 0.75em 0em 0em; color: rgba(0, 0, 0, 0.4); } .ui.comments .comment .actions a:last-child, .play-button.comments .comment .actions a:last-child, .download-button.comments .comment .actions a:last-child { margin-right: 0em; } .ui.comments .comment .actions a.active, .ui.comments .comment .actions a:hover, .play-button.comments .comment .actions a.active, .play-button.comments .comment .actions a:hover, .download-button.comments .comment .actions a.active, .download-button.comments .comment .actions a:hover { color: rgba(0, 0, 0, 0.8); } /*-------------------- Reply Form ---------------------*/ .ui.comments > .reply.form, .play-button.comments > .reply.form, .download-button.comments > .reply.form { margin-top: 1em; } .ui.comments .comment .reply.form, .play-button.comments .comment .reply.form, .download-button.comments .comment .reply.form { width: 100%; margin-top: 1em; } .ui.comments .reply.form textarea, .play-button.comments .reply.form textarea, .download-button.comments .reply.form textarea { font-size: 1em; height: 12em; } /******************************* State *******************************/ .ui.collapsed.comments, .ui.comments .collapsed.comments, .ui.comments .collapsed.comment, .play-button.collapsed.comments, .play-button.comments .collapsed.comments, .play-button.comments .collapsed.comment, .download-button.collapsed.comments, .download-button.comments .collapsed.comments, .download-button.comments .collapsed.comment { display: none; } /******************************* Variations *******************************/ /*-------------------- Threaded ---------------------*/ .ui.threaded.comments .comment .comments, .play-button.threaded.comments .comment .comments, .download-button.threaded.comments .comment .comments { margin: -1.5em 0 -1em 1.25em; padding: 3em 0em 2em 2.25em; box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15); } /*-------------------- Minimal ---------------------*/ .ui.minimal.comments .comment .actions, .play-button.minimal.comments .comment .actions, .download-button.minimal.comments .comment .actions { opacity: 0; position: absolute; top: 0px; right: 0px; left: auto; transition: opacity 0.2s ease; transition-delay: 0.1s; } .ui.minimal.comments .comment > .content:hover > .actions, .play-button.minimal.comments .comment > .content:hover > .actions, .download-button.minimal.comments .comment > .content:hover > .actions { opacity: 1; } /*------------------- Sizes --------------------*/ .ui.mini.comments, .play-button.mini.comments, .download-button.mini.comments { font-size: 0.78571429rem; } .ui.tiny.comments, .play-button.tiny.comments, .download-button.tiny.comments { font-size: 0.85714286rem; } .ui.small.comments, .play-button.small.comments, .download-button.small.comments { font-size: 0.92857143rem; } .ui.comments, .play-button.comments, .download-button.comments { font-size: 1rem; } .ui.large.comments, .play-button.large.comments, .download-button.large.comments { font-size: 1.14285714rem; } .ui.big.comments, .play-button.big.comments, .download-button.big.comments { font-size: 1.28571429rem; } .ui.huge.comments, .play-button.huge.comments, .download-button.huge.comments { font-size: 1.42857143rem; } .ui.massive.comments, .play-button.massive.comments, .download-button.massive.comments { font-size: 1.71428571rem; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Feed * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Feed *******************************/ /*------------------- Feed --------------------*/ /*------------------- Elements --------------------*/ /* Event */ /* Event Label */ /* Icon Label */ /* Image Label */ /* Content w/ Label */ /* Content */ /* Date */ /* Summary */ /* Summary Image */ /* Summary Date */ /* User */ /* Extra Summary Data */ /* Extra Images */ /* Extra Text */ /* Metadata Group */ /* Like */ /* Metadata Divider */ /*------------------- Variations --------------------*/ /* Packaged Theme */ /******************************* Feed *******************************/ /*------------------- Feed --------------------*/ /*------------------- Elements --------------------*/ /* Event */ /* Event Label */ /* Icon Label */ /* Image Label */ /* Content w/ Label */ /* Content */ /* Date */ /* Summary */ /* Summary Image */ /* Summary Date */ /* User */ /* Extra Summary Data */ /* Extra Images */ /* Extra Text */ /* Metadata Group */ /* Like */ /* Metadata Divider */ /*------------------- Variations --------------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Activity Feed *******************************/ .ui.feed, .play-button.feed, .download-button.feed { margin: 1em 0em; } .ui.feed:first-child, .play-button.feed:first-child, .download-button.feed:first-child { margin-top: 0em; } .ui.feed:last-child, .play-button.feed:last-child, .download-button.feed:last-child { margin-bottom: 0em; } /******************************* Content *******************************/ /* Event */ .ui.feed > .event, .play-button.feed > .event, .download-button.feed > .event { display: flex; flex-direction: row; width: 100%; padding: 0.21428571rem 0em; margin: 0em; background: none; border-top: none; } .ui.feed > .event:first-child, .play-button.feed > .event:first-child, .download-button.feed > .event:first-child { border-top: 0px; padding-top: 0em; } .ui.feed > .event:last-child, .play-button.feed > .event:last-child, .download-button.feed > .event:last-child { padding-bottom: 0em; } /* Event Label */ .ui.feed > .event > .label, .play-button.feed > .event > .label, .download-button.feed > .event > .label { display: block; flex: 0 0 auto; width: 2.5em; height: auto; align-self: stretch; text-align: left; } .ui.feed > .event > .label .icon, .play-button.feed > .event > .label .icon, .download-button.feed > .event > .label .icon { opacity: 1; font-size: 1.5em; width: 100%; padding: 0.25em; background: none; border: none; border-radius: none; color: rgba(0, 0, 0, 0.6); } .ui.feed > .event > .label img, .play-button.feed > .event > .label img, .download-button.feed > .event > .label img { width: 100%; height: auto; border-radius: 500rem; } .ui.feed > .event > .label + .content, .play-button.feed > .event > .label + .content, .download-button.feed > .event > .label + .content { margin: 0.5em 0em 0.35714286em 1.14285714em; } /*-------------- Content ---------------*/ /* Content */ .ui.feed > .event > .content, .play-button.feed > .event > .content, .download-button.feed > .event > .content { display: block; flex: 1 1 auto; align-self: stretch; text-align: left; word-wrap: break-word; } .ui.feed > .event:last-child > .content, .play-button.feed > .event:last-child > .content, .download-button.feed > .event:last-child > .content { padding-bottom: 0em; } /* Link */ .ui.feed > .event > .content a, .play-button.feed > .event > .content a, .download-button.feed > .event > .content a { cursor: pointer; } /*-------------- Date ---------------*/ .ui.feed > .event > .content .date, .play-button.feed > .event > .content .date, .download-button.feed > .event > .content .date { margin: -0.5rem 0em 0em; padding: 0em; font-weight: normal; font-size: 1em; font-style: normal; color: rgba(0, 0, 0, 0.4); } /*-------------- Summary ---------------*/ .ui.feed > .event > .content .summary, .play-button.feed > .event > .content .summary, .download-button.feed > .event > .content .summary { margin: 0em; font-size: 1em; font-weight: bold; color: rgba(0, 0, 0, 0.87); } /* Summary Image */ .ui.feed > .event > .content .summary img, .play-button.feed > .event > .content .summary img, .download-button.feed > .event > .content .summary img { display: inline-block; width: auto; height: 10em; margin: -0.25em 0.25em 0em 0em; border-radius: 0.25em; vertical-align: middle; } /*-------------- User ---------------*/ .ui.feed > .event > .content .user, .play-button.feed > .event > .content .user, .download-button.feed > .event > .content .user { display: inline-block; font-weight: bold; margin-right: 0em; vertical-align: baseline; } .ui.feed > .event > .content .user img, .play-button.feed > .event > .content .user img, .download-button.feed > .event > .content .user img { margin: -0.25em 0.25em 0em 0em; width: auto; height: 10em; vertical-align: middle; } /*-------------- Inline Date ---------------*/ /* Date inside Summary */ .ui.feed > .event > .content .summary > .date, .play-button.feed > .event > .content .summary > .date, .download-button.feed > .event > .content .summary > .date { display: inline-block; float: none; font-weight: normal; font-size: 0.85714286em; font-style: normal; margin: 0em 0em 0em 0.5em; padding: 0em; color: rgba(0, 0, 0, 0.4); } /*-------------- Extra Summary ---------------*/ .ui.feed > .event > .content .extra, .play-button.feed > .event > .content .extra, .download-button.feed > .event > .content .extra { margin: 0.5em 0em 0em; background: none; padding: 0em; color: rgba(0, 0, 0, 0.87); } /* Images */ .ui.feed > .event > .content .extra.images img, .play-button.feed > .event > .content .extra.images img, .download-button.feed > .event > .content .extra.images img { display: inline-block; margin: 0em 0.25em 0em 0em; width: 6em; } /* Text */ .ui.feed > .event > .content .extra.text, .play-button.feed > .event > .content .extra.text, .download-button.feed > .event > .content .extra.text { padding: 0em; border-left: none; font-size: 1em; max-width: 500px; line-height: 1.4285em; } /*-------------- Meta ---------------*/ .ui.feed > .event > .content .meta, .play-button.feed > .event > .content .meta, .download-button.feed > .event > .content .meta { display: inline-block; font-size: 0.85714286em; margin: 0.5em 0em 0em; background: none; border: none; border-radius: 0; box-shadow: none; padding: 0em; color: rgba(0, 0, 0, 0.6); } .ui.feed > .event > .content .meta > *, .play-button.feed > .event > .content .meta > *, .download-button.feed > .event > .content .meta > * { position: relative; margin-left: 0.75em; } .ui.feed > .event > .content .meta > *:after, .play-button.feed > .event > .content .meta > *:after, .download-button.feed > .event > .content .meta > *:after { content: ''; color: rgba(0, 0, 0, 0.2); top: 0em; left: -1em; opacity: 1; position: absolute; vertical-align: top; } .ui.feed > .event > .content .meta .like, .play-button.feed > .event > .content .meta .like, .download-button.feed > .event > .content .meta .like { color: ''; transition: 0.2s color ease; } .ui.feed > .event > .content .meta .like:hover .icon, .play-button.feed > .event > .content .meta .like:hover .icon, .download-button.feed > .event > .content .meta .like:hover .icon { color: #FF2733; } .ui.feed > .event > .content .meta .active.like .icon, .play-button.feed > .event > .content .meta .active.like .icon, .download-button.feed > .event > .content .meta .active.like .icon { color: #EF404A; } /* First element */ .ui.feed > .event > .content .meta > :first-child, .play-button.feed > .event > .content .meta > :first-child, .download-button.feed > .event > .content .meta > :first-child { margin-left: 0em; } .ui.feed > .event > .content .meta > :first-child::after, .play-button.feed > .event > .content .meta > :first-child::after, .download-button.feed > .event > .content .meta > :first-child::after { display: none; } /* Action */ .ui.feed > .event > .content .meta a, .ui.feed > .event > .content .meta > .icon, .play-button.feed > .event > .content .meta a, .play-button.feed > .event > .content .meta > .icon, .download-button.feed > .event > .content .meta a, .download-button.feed > .event > .content .meta > .icon { cursor: pointer; opacity: 1; color: rgba(0, 0, 0, 0.5); transition: color 0.1s ease; } .ui.feed > .event > .content .meta a:hover, .ui.feed > .event > .content .meta a:hover .icon, .ui.feed > .event > .content .meta > .icon:hover, .play-button.feed > .event > .content .meta a:hover, .play-button.feed > .event > .content .meta a:hover .icon, .play-button.feed > .event > .content .meta > .icon:hover, .download-button.feed > .event > .content .meta a:hover, .download-button.feed > .event > .content .meta a:hover .icon, .download-button.feed > .event > .content .meta > .icon:hover { color: rgba(0, 0, 0, 0.95); } /******************************* Variations *******************************/ .ui.small.feed, .play-button.small.feed, .download-button.small.feed { font-size: 0.92857143rem; } .ui.feed, .play-button.feed, .download-button.feed { font-size: 1rem; } .ui.large.feed, .play-button.large.feed, .download-button.large.feed { font-size: 1.14285714rem; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Item * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Item *******************************/ /*------------------- View --------------------*/ /* Group */ /* Item */ /* Responsive */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Actions */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Additional Content */ /*------------------- Variations --------------------*/ /* Relaxed */ /* Divided */ /* Unstackable */ /* Packaged Theme */ /******************************* Item *******************************/ /*------------------- View --------------------*/ /* Group */ /* Item */ /* Responsive */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Actions */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Additional Content */ /*------------------- Variations --------------------*/ /* Relaxed */ /* Divided */ /* Unstackable */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Standard *******************************/ /*-------------- Item ---------------*/ .ui.items > .item, .play-button.items > .item, .download-button.items > .item { display: flex; margin: 1em 0em; width: 100%; min-height: 0px; background: transparent; padding: 0em; border: none; border-radius: 0rem; box-shadow: none; transition: box-shadow 0.1s ease; z-index: ''; } .ui.items > .item a, .play-button.items > .item a, .download-button.items > .item a { cursor: pointer; } /*-------------- Items ---------------*/ .ui.items, .play-button.items, .download-button.items { margin: 1.5em 0em; } .ui.items:first-child, .play-button.items:first-child, .download-button.items:first-child { margin-top: 0em !important; } .ui.items:last-child, .play-button.items:last-child, .download-button.items:last-child { margin-bottom: 0em !important; } /*-------------- Item ---------------*/ .ui.items > .item:after, .play-button.items > .item:after, .download-button.items > .item:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item:first-child, .play-button.items > .item:first-child, .download-button.items > .item:first-child { margin-top: 0em; } .ui.items > .item:last-child, .play-button.items > .item:last-child, .download-button.items > .item:last-child { margin-bottom: 0em; } /*-------------- Images ---------------*/ .ui.items > .item > .image, .play-button.items > .item > .image, .download-button.items > .item > .image { position: relative; flex: 0 0 auto; display: block; float: none; margin: 0em; padding: 0em; max-height: ''; align-self: top; } .ui.items > .item > .image > img, .play-button.items > .item > .image > img, .download-button.items > .item > .image > img { display: block; width: 100%; height: auto; border-radius: 0.125rem; border: none; } .ui.items > .item > .image:only-child > img, .play-button.items > .item > .image:only-child > img, .download-button.items > .item > .image:only-child > img { border-radius: 0rem; } /*-------------- Content ---------------*/ .ui.items > .item > .content, .play-button.items > .item > .content, .download-button.items > .item > .content { display: block; flex: 1 1 auto; background: none; margin: 0em; padding: 0em; box-shadow: none; font-size: 1em; border: none; border-radius: 0em; } .ui.items > .item > .content:after, .play-button.items > .item > .content:after, .download-button.items > .item > .content:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item > .image + .content, .play-button.items > .item > .image + .content, .download-button.items > .item > .image + .content { min-width: 0; width: auto; display: block; margin-left: 0em; align-self: top; padding-left: 1.5em; } .ui.items > .item > .content > .header, .play-button.items > .item > .content > .header, .download-button.items > .item > .content > .header { display: inline-block; margin: -0.21425em 0em 0em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; color: rgba(0, 0, 0, 0.85); } /* Default Header Size */ .ui.items > .item > .content > .header:not(.ui), .play-button.items > .item > .content > .header:not(.ui), .download-button.items > .item > .content > .header:not(.ui) { font-size: 1.28571429em; } /*-------------- Floated ---------------*/ .ui.items > .item [class*="left floated"], .play-button.items > .item [class*="left floated"], .download-button.items > .item [class*="left floated"] { float: left; } .ui.items > .item [class*="right floated"], .play-button.items > .item [class*="right floated"], .download-button.items > .item [class*="right floated"] { float: right; } /*-------------- Content Image ---------------*/ .ui.items > .item .content img, .play-button.items > .item .content img, .download-button.items > .item .content img { align-self: middle; width: ''; } .ui.items > .item img.avatar, .ui.items > .item .avatar img, .play-button.items > .item img.avatar, .play-button.items > .item .avatar img, .download-button.items > .item img.avatar, .download-button.items > .item .avatar img { width: ''; height: ''; border-radius: 500rem; } /*-------------- Description ---------------*/ .ui.items > .item > .content > .description, .play-button.items > .item > .content > .description, .download-button.items > .item > .content > .description { margin-top: 0.6em; max-width: auto; font-size: 1em; line-height: 1.4285em; color: rgba(0, 0, 0, 0.87); } /*-------------- Paragraph ---------------*/ .ui.items > .item > .content p, .play-button.items > .item > .content p, .download-button.items > .item > .content p { margin: 0em 0em 0.5em; } .ui.items > .item > .content p:last-child, .play-button.items > .item > .content p:last-child, .download-button.items > .item > .content p:last-child { margin-bottom: 0em; } /*-------------- Meta ---------------*/ .ui.items > .item .meta, .play-button.items > .item .meta, .download-button.items > .item .meta { margin: 0.5em 0em 0.5em; font-size: 1em; line-height: 1em; color: rgba(0, 0, 0, 0.6); } .ui.items > .item .meta *, .play-button.items > .item .meta *, .download-button.items > .item .meta * { margin-right: 0.3em; } .ui.items > .item .meta :last-child, .play-button.items > .item .meta :last-child, .download-button.items > .item .meta :last-child { margin-right: 0em; } .ui.items > .item .meta [class*="right floated"], .play-button.items > .item .meta [class*="right floated"], .download-button.items > .item .meta [class*="right floated"] { margin-right: 0em; margin-left: 0.3em; } /*-------------- Links ---------------*/ /* Generic */ .ui.items > .item > .content a:not(.ui), .play-button.items > .item > .content a:not(.ui), .download-button.items > .item > .content a:not(.ui) { color: ''; transition: color 0.1s ease; } .ui.items > .item > .content a:not(.ui):hover, .play-button.items > .item > .content a:not(.ui):hover, .download-button.items > .item > .content a:not(.ui):hover { color: ''; } /* Header */ .ui.items > .item > .content > a.header, .play-button.items > .item > .content > a.header, .download-button.items > .item > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.items > .item > .content > a.header:hover, .play-button.items > .item > .content > a.header:hover, .download-button.items > .item > .content > a.header:hover { color: #1e70bf; } /* Meta */ .ui.items > .item .meta > a:not(.ui), .play-button.items > .item .meta > a:not(.ui), .download-button.items > .item .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.items > .item .meta > a:not(.ui):hover, .play-button.items > .item .meta > a:not(.ui):hover, .download-button.items > .item .meta > a:not(.ui):hover { color: rgba(0, 0, 0, 0.87); } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.items > .item > .content .favorite.icon, .play-button.items > .item > .content .favorite.icon, .download-button.items > .item > .content .favorite.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .favorite.icon:hover, .play-button.items > .item > .content .favorite.icon:hover, .download-button.items > .item > .content .favorite.icon:hover { opacity: 1; color: #FFB70A; } .ui.items > .item > .content .active.favorite.icon, .play-button.items > .item > .content .active.favorite.icon, .download-button.items > .item > .content .active.favorite.icon { color: #FFE623; } /*-----Like----- */ /* Icon */ .ui.items > .item > .content .like.icon, .play-button.items > .item > .content .like.icon, .download-button.items > .item > .content .like.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .like.icon:hover, .play-button.items > .item > .content .like.icon:hover, .download-button.items > .item > .content .like.icon:hover { opacity: 1; color: #FF2733; } .ui.items > .item > .content .active.like.icon, .play-button.items > .item > .content .active.like.icon, .download-button.items > .item > .content .active.like.icon { color: #FF2733; } /*---------------- Extra Content -----------------*/ .ui.items > .item .extra, .play-button.items > .item .extra, .download-button.items > .item .extra { display: block; position: relative; background: none; margin: 0.5rem 0em 0em; width: 100%; padding: 0em 0em 0em; top: 0em; left: 0em; color: rgba(0, 0, 0, 0.4); box-shadow: none; transition: color 0.1s ease; border-top: none; } .ui.items > .item .extra > *, .play-button.items > .item .extra > *, .download-button.items > .item .extra > * { margin: 0.25rem 0.5rem 0.25rem 0em; } .ui.items > .item .extra > [class*="right floated"], .play-button.items > .item .extra > [class*="right floated"], .download-button.items > .item .extra > [class*="right floated"] { margin: 0.25rem 0em 0.25rem 0.5rem; } .ui.items > .item .extra:after, .play-button.items > .item .extra:after, .download-button.items > .item .extra:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } /******************************* Responsive *******************************/ /* Default Image Width */ .ui.items > .item > .image:not(.ui), .play-button.items > .item > .image:not(.ui), .download-button.items > .item > .image:not(.ui) { width: 175px; } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.items > .item, .play-button.items > .item, .download-button.items > .item { margin: 1em 0em; } .ui.items > .item > .image:not(.ui), .play-button.items > .item > .image:not(.ui), .download-button.items > .item > .image:not(.ui) { width: 150px; } .ui.items > .item > .image + .content, .play-button.items > .item > .image + .content, .download-button.items > .item > .image + .content { display: block; padding: 0em 0em 0em 1em; } } /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.items:not(.unstackable) > .item, .play-button.items:not(.unstackable) > .item, .download-button.items:not(.unstackable) > .item { flex-direction: column; margin: 2em 0em; } .ui.items:not(.unstackable) > .item > .image, .play-button.items:not(.unstackable) > .item > .image, .download-button.items:not(.unstackable) > .item > .image { display: block; margin-left: auto; margin-right: auto; } .ui.items:not(.unstackable) > .item > .image, .ui.items:not(.unstackable) > .item > .image > img, .play-button.items:not(.unstackable) > .item > .image, .play-button.items:not(.unstackable) > .item > .image > img, .download-button.items:not(.unstackable) > .item > .image, .download-button.items:not(.unstackable) > .item > .image > img { max-width: 100% !important; width: auto !important; max-height: 250px !important; } .ui.items:not(.unstackable) > .item > .image + .content, .play-button.items:not(.unstackable) > .item > .image + .content, .download-button.items:not(.unstackable) > .item > .image + .content { display: block; padding: 1.5em 0em 0em; } } /******************************* Variations *******************************/ /*------------------- Aligned --------------------*/ .ui.items > .item > .image + [class*="top aligned"].content, .play-button.items > .item > .image + [class*="top aligned"].content, .download-button.items > .item > .image + [class*="top aligned"].content { align-self: flex-start; } .ui.items > .item > .image + [class*="middle aligned"].content, .play-button.items > .item > .image + [class*="middle aligned"].content, .download-button.items > .item > .image + [class*="middle aligned"].content { align-self: center; } .ui.items > .item > .image + [class*="bottom aligned"].content, .play-button.items > .item > .image + [class*="bottom aligned"].content, .download-button.items > .item > .image + [class*="bottom aligned"].content { align-self: flex-end; } /*-------------- Relaxed ---------------*/ .ui.relaxed.items > .item, .play-button.relaxed.items > .item, .download-button.relaxed.items > .item { margin: 1.5em 0em; } .ui[class*="very relaxed"].items > .item, .play-button[class*="very relaxed"].items > .item, .download-button[class*="very relaxed"].items > .item { margin: 2em 0em; } /*------------------- Divided --------------------*/ .ui.divided.items > .item, .play-button.divided.items > .item, .download-button.divided.items > .item { border-top: 1px solid rgba(34, 36, 38, 0.15); margin: 0em; padding: 1em 0em; } .ui.divided.items > .item:first-child, .play-button.divided.items > .item:first-child, .download-button.divided.items > .item:first-child { border-top: none; margin-top: 0em !important; padding-top: 0em !important; } .ui.divided.items > .item:last-child, .play-button.divided.items > .item:last-child, .download-button.divided.items > .item:last-child { margin-bottom: 0em !important; padding-bottom: 0em !important; } /* Relaxed Divided */ .ui.relaxed.divided.items > .item, .play-button.relaxed.divided.items > .item, .download-button.relaxed.divided.items > .item { margin: 0em; padding: 1.5em 0em; } .ui[class*="very relaxed"].divided.items > .item, .play-button[class*="very relaxed"].divided.items > .item, .download-button[class*="very relaxed"].divided.items > .item { margin: 0em; padding: 2em 0em; } /*------------------- Link --------------------*/ .ui.items a.item:hover, .ui.link.items > .item:hover, .play-button.items a.item:hover, .play-button.link.items > .item:hover, .download-button.items a.item:hover, .download-button.link.items > .item:hover { cursor: pointer; } .ui.items a.item:hover .content .header, .ui.link.items > .item:hover .content .header, .play-button.items a.item:hover .content .header, .play-button.link.items > .item:hover .content .header, .download-button.items a.item:hover .content .header, .download-button.link.items > .item:hover .content .header { color: #1e70bf; } /*-------------- Size ---------------*/ .ui.items > .item, .play-button.items > .item, .download-button.items > .item { font-size: 1em; } /*--------------- Unstackable ----------------*/ @media only screen and (max-width: 767px) { .ui.unstackable.items > .item > .image, .ui.unstackable.items > .item > .image > img, .play-button.unstackable.items > .item > .image, .play-button.unstackable.items > .item > .image > img, .download-button.unstackable.items > .item > .image, .download-button.unstackable.items > .item > .image > img { width: 125px !important; } } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Semantic UI - Statistic * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Statistic *******************************/ /*------------------- View --------------------*/ /* Group */ /* Group Element */ /*------------------- Content --------------------*/ /* Value */ /* Label */ /* Text */ /* Label Image */ /*------------------- Types --------------------*/ /*------------------- Variations --------------------*/ /* Floated */ /* Inverted */ /* Item Width */ /* Size */ /* Packaged Theme */ /******************************* Statistic *******************************/ /*------------------- View --------------------*/ /* Group */ /* Group Element */ /*------------------- Content --------------------*/ /* Value */ /* Label */ /* Text */ /* Label Image */ /*------------------- Types --------------------*/ /*------------------- Variations --------------------*/ /* Floated */ /* Inverted */ /* Item Width */ /* Size */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Statistic *******************************/ /* Standalone */ .ui.statistic, .play-button.statistic, .download-button.statistic { display: inline-flex; flex-direction: column; margin: 1em 0em; max-width: auto; } .ui.statistic + .ui.statistic, .play-button.statistic + .play-button.statistic, .download-button.statistic + .download-button.statistic { margin: 0em 0em 0em 1.5em; } .ui.statistic:first-child, .play-button.statistic:first-child, .download-button.statistic:first-child { margin-top: 0em; } .ui.statistic:last-child, .play-button.statistic:last-child, .download-button.statistic:last-child { margin-bottom: 0em; } /******************************* Group *******************************/ /* Grouped */ .ui.statistics, .play-button.statistics, .download-button.statistics { display: flex; align-items: flex-start; flex-wrap: wrap; } .ui.statistics > .statistic, .play-button.statistics > .statistic, .download-button.statistics > .statistic { display: inline-flex; flex: 0 1 auto; flex-direction: column; margin: 0em 1.5em 2em; max-width: auto; } .ui.statistics, .play-button.statistics, .download-button.statistics { display: flex; margin: 1em -1.5em -2em; } /* Clearing */ .ui.statistics:after, .play-button.statistics:after, .download-button.statistics:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.statistics:first-child, .play-button.statistics:first-child, .download-button.statistics:first-child { margin-top: 0em; } .ui.statistics:last-child, .play-button.statistics:last-child, .download-button.statistics:last-child { margin-bottom: 0em; } /******************************* Content *******************************/ /*-------------- Value ---------------*/ .ui.statistics .statistic > .value, .ui.statistic > .value, .play-button.statistics .statistic > .value, .play-button.statistic > .value, .download-button.statistics .statistic > .value, .download-button.statistic > .value { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 4rem; font-weight: normal; line-height: 1em; color: #1B1C1D; text-transform: uppercase; text-align: center; } /*-------------- Label ---------------*/ .ui.statistics .statistic > .label, .ui.statistic > .label, .play-button.statistics .statistic > .label, .play-button.statistic > .label, .download-button.statistics .statistic > .label, .download-button.statistic > .label { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bold; color: rgba(0, 0, 0, 0.87); text-transform: uppercase; text-align: center; } /* Top Label */ .ui.statistics .statistic > .label ~ .value, .ui.statistic > .label ~ .value, .play-button.statistics .statistic > .label ~ .value, .play-button.statistic > .label ~ .value, .download-button.statistics .statistic > .label ~ .value, .download-button.statistic > .label ~ .value { margin-top: 0rem; } /* Bottom Label */ .ui.statistics .statistic > .value ~ .label, .ui.statistic > .value ~ .label, .play-button.statistics .statistic > .value ~ .label, .play-button.statistic > .value ~ .label, .download-button.statistics .statistic > .value ~ .label, .download-button.statistic > .value ~ .label { margin-top: 0rem; } /******************************* Types *******************************/ /*-------------- Icon Value ---------------*/ .ui.statistics .statistic > .value .icon, .ui.statistic > .value .icon, .play-button.statistics .statistic > .value .icon, .play-button.statistic > .value .icon, .download-button.statistics .statistic > .value .icon, .download-button.statistic > .value .icon { opacity: 1; width: auto; margin: 0em; } /*-------------- Text Value ---------------*/ .ui.statistics .statistic > .text.value, .ui.statistic > .text.value, .play-button.statistics .statistic > .text.value, .play-button.statistic > .text.value, .download-button.statistics .statistic > .text.value, .download-button.statistic > .text.value { line-height: 1em; min-height: 2em; font-weight: bold; text-align: center; } .ui.statistics .statistic > .text.value + .label, .ui.statistic > .text.value + .label, .play-button.statistics .statistic > .text.value + .label, .play-button.statistic > .text.value + .label, .download-button.statistics .statistic > .text.value + .label, .download-button.statistic > .text.value + .label { text-align: center; } /*-------------- Image Value ---------------*/ .ui.statistics .statistic > .value img, .ui.statistic > .value img, .play-button.statistics .statistic > .value img, .play-button.statistic > .value img, .download-button.statistics .statistic > .value img, .download-button.statistic > .value img { max-height: 3rem; vertical-align: baseline; } /******************************* Variations *******************************/ /*-------------- Count ---------------*/ .ui.ten.statistics, .play-button.ten.statistics, .download-button.ten.statistics { margin: 0em 0em -2em; } .ui.ten.statistics .statistic, .play-button.ten.statistics .statistic, .download-button.ten.statistics .statistic { min-width: 10%; margin: 0em 0em 2em; } .ui.nine.statistics, .play-button.nine.statistics, .download-button.nine.statistics { margin: 0em 0em -2em; } .ui.nine.statistics .statistic, .play-button.nine.statistics .statistic, .download-button.nine.statistics .statistic { min-width: 11.11111111%; margin: 0em 0em 2em; } .ui.eight.statistics, .play-button.eight.statistics, .download-button.eight.statistics { margin: 0em 0em -2em; } .ui.eight.statistics .statistic, .play-button.eight.statistics .statistic, .download-button.eight.statistics .statistic { min-width: 12.5%; margin: 0em 0em 2em; } .ui.seven.statistics, .play-button.seven.statistics, .download-button.seven.statistics { margin: 0em 0em -2em; } .ui.seven.statistics .statistic, .play-button.seven.statistics .statistic, .download-button.seven.statistics .statistic { min-width: 14.28571429%; margin: 0em 0em 2em; } .ui.six.statistics, .play-button.six.statistics, .download-button.six.statistics { margin: 0em 0em -2em; } .ui.six.statistics .statistic, .play-button.six.statistics .statistic, .download-button.six.statistics .statistic { min-width: 16.66666667%; margin: 0em 0em 2em; } .ui.five.statistics, .play-button.five.statistics, .download-button.five.statistics { margin: 0em 0em -2em; } .ui.five.statistics .statistic, .play-button.five.statistics .statistic, .download-button.five.statistics .statistic { min-width: 20%; margin: 0em 0em 2em; } .ui.four.statistics, .play-button.four.statistics, .download-button.four.statistics { margin: 0em 0em -2em; } .ui.four.statistics .statistic, .play-button.four.statistics .statistic, .download-button.four.statistics .statistic { min-width: 25%; margin: 0em 0em 2em; } .ui.three.statistics, .play-button.three.statistics, .download-button.three.statistics { margin: 0em 0em -2em; } .ui.three.statistics .statistic, .play-button.three.statistics .statistic, .download-button.three.statistics .statistic { min-width: 33.33333333%; margin: 0em 0em 2em; } .ui.two.statistics, .play-button.two.statistics, .download-button.two.statistics { margin: 0em 0em -2em; } .ui.two.statistics .statistic, .play-button.two.statistics .statistic, .download-button.two.statistics .statistic { min-width: 50%; margin: 0em 0em 2em; } .ui.one.statistics, .play-button.one.statistics, .download-button.one.statistics { margin: 0em 0em -2em; } .ui.one.statistics .statistic, .play-button.one.statistics .statistic, .download-button.one.statistics .statistic { min-width: 100%; margin: 0em 0em 2em; } /*-------------- Horizontal ---------------*/ .ui.horizontal.statistic, .play-button.horizontal.statistic, .download-button.horizontal.statistic { flex-direction: row; align-items: center; } .ui.horizontal.statistics, .play-button.horizontal.statistics, .download-button.horizontal.statistics { flex-direction: column; margin: 0em; max-width: none; } .ui.horizontal.statistics .statistic, .play-button.horizontal.statistics .statistic, .download-button.horizontal.statistics .statistic { flex-direction: row; align-items: center; max-width: none; margin: 1em 0em; } .ui.horizontal.statistic > .text.value, .ui.horizontal.statistics > .statistic > .text.value, .play-button.horizontal.statistic > .text.value, .play-button.horizontal.statistics > .statistic > .text.value, .download-button.horizontal.statistic > .text.value, .download-button.horizontal.statistics > .statistic > .text.value { min-height: 0em !important; } .ui.horizontal.statistics .statistic > .value .icon, .ui.horizontal.statistic > .value .icon, .play-button.horizontal.statistics .statistic > .value .icon, .play-button.horizontal.statistic > .value .icon, .download-button.horizontal.statistics .statistic > .value .icon, .download-button.horizontal.statistic > .value .icon { width: 1.18em; } .ui.horizontal.statistics .statistic > .value, .ui.horizontal.statistic > .value, .play-button.horizontal.statistics .statistic > .value, .play-button.horizontal.statistic > .value, .download-button.horizontal.statistics .statistic > .value, .download-button.horizontal.statistic > .value { display: inline-block; vertical-align: middle; } .ui.horizontal.statistics .statistic > .label, .ui.horizontal.statistic > .label, .play-button.horizontal.statistics .statistic > .label, .play-button.horizontal.statistic > .label, .download-button.horizontal.statistics .statistic > .label, .download-button.horizontal.statistic > .label { display: inline-block; vertical-align: middle; margin: 0em 0em 0em 0.75em; } /*-------------- Colors ---------------*/ .ui.red.statistics .statistic > .value, .ui.statistics .red.statistic > .value, .ui.red.statistic > .value, .play-button.red.statistics .statistic > .value, .play-button.statistics .red.statistic > .value, .play-button.red.statistic > .value, .download-button.red.statistics .statistic > .value, .download-button.statistics .red.statistic > .value, .download-button.red.statistic > .value { color: #E81123; } .ui.orange.statistics .statistic > .value, .ui.statistics .orange.statistic > .value, .ui.orange.statistic > .value, .play-button.orange.statistics .statistic > .value, .play-button.statistics .orange.statistic > .value, .play-button.orange.statistic > .value, .download-button.orange.statistics .statistic > .value, .download-button.statistics .orange.statistic > .value, .download-button.orange.statistic > .value { color: #DF4600; } .ui.yellow.statistics .statistic > .value, .ui.statistics .yellow.statistic > .value, .ui.yellow.statistic > .value, .play-button.yellow.statistics .statistic > .value, .play-button.statistics .yellow.statistic > .value, .play-button.yellow.statistic > .value, .download-button.yellow.statistics .statistic > .value, .download-button.statistics .yellow.statistic > .value, .download-button.yellow.statistic > .value, .ui.download-button.statistics .statistic > .value, .ui.statistics .download-button.statistic > .value, .ui.download-button.statistic > .value { color: #F4C918; } .ui.olive.statistics .statistic > .value, .ui.statistics .olive.statistic > .value, .ui.olive.statistic > .value, .play-button.olive.statistics .statistic > .value, .play-button.statistics .olive.statistic > .value, .play-button.olive.statistic > .value, .download-button.olive.statistics .statistic > .value, .download-button.statistics .olive.statistic > .value, .download-button.olive.statistic > .value { color: #B5CC18; } .ui.green.statistics .statistic > .value, .ui.statistics .green.statistic > .value, .ui.green.statistic > .value, .ui.ui.button.getting-started-btn.statistics .statistic > .value, .ui.statistics .ui.button.getting-started-btn.statistic > .value, .ui.ui.button.getting-started-btn.statistic > .value, .play-button.green.statistics .statistic > .value, .play-button.statistics .green.statistic > .value, .play-button.green.statistic > .value, .download-button.green.statistics .statistic > .value, .download-button.statistics .green.statistic > .value, .download-button.green.statistic > .value, .ui.play-button.button.getting-started-btn.statistics .statistic > .value, .ui.statistics .play-button.button.getting-started-btn.statistic > .value, .ui.play-button.button.getting-started-btn.statistic > .value, .ui.ui.play-button.getting-started-btn.statistics .statistic > .value, .ui.statistics .ui.play-button.getting-started-btn.statistic > .value, .ui.ui.play-button.getting-started-btn.statistic > .value, .ui.download-button.button.getting-started-btn.statistics .statistic > .value, .ui.statistics .download-button.button.getting-started-btn.statistic > .value, .ui.download-button.button.getting-started-btn.statistic > .value, .ui.ui.download-button.getting-started-btn.statistics .statistic > .value, .ui.statistics .ui.download-button.getting-started-btn.statistic > .value, .ui.ui.download-button.getting-started-btn.statistic > .value { color: #3FC863; } .ui.teal.statistics .statistic > .value, .ui.statistics .teal.statistic > .value, .ui.teal.statistic > .value, .play-button.teal.statistics .statistic > .value, .play-button.statistics .teal.statistic > .value, .play-button.teal.statistic > .value, .download-button.teal.statistics .statistic > .value, .download-button.statistics .teal.statistic > .value, .download-button.teal.statistic > .value { color: #008272; } .ui.blue.statistics .statistic > .value, .ui.statistics .blue.statistic > .value, .ui.blue.statistic > .value, .play-button.blue.statistics .statistic > .value, .play-button.statistics .blue.statistic > .value, .play-button.blue.statistic > .value, .ui.play-button.statistics .statistic > .value, .ui.statistics .play-button.statistic > .value, .ui.play-button.statistic > .value, .download-button.blue.statistics .statistic > .value, .download-button.statistics .blue.statistic > .value, .download-button.blue.statistic > .value { color: #54C9C9; } .ui.violet.statistics .statistic > .value, .ui.statistics .violet.statistic > .value, .ui.violet.statistic > .value, .play-button.violet.statistics .statistic > .value, .play-button.statistics .violet.statistic > .value, .play-button.violet.statistic > .value, .download-button.violet.statistics .statistic > .value, .download-button.statistics .violet.statistic > .value, .download-button.violet.statistic > .value { color: #C90072; } .ui.purple.statistics .statistic > .value, .ui.statistics .purple.statistic > .value, .ui.purple.statistic > .value, .play-button.purple.statistics .statistic > .value, .play-button.statistics .purple.statistic > .value, .play-button.purple.statistic > .value, .download-button.purple.statistics .statistic > .value, .download-button.statistics .purple.statistic > .value, .download-button.purple.statistic > .value { color: #8169E6; } .ui.pink.statistics .statistic > .value, .ui.statistics .pink.statistic > .value, .ui.pink.statistic > .value, .play-button.pink.statistics .statistic > .value, .play-button.statistics .pink.statistic > .value, .play-button.pink.statistic > .value, .download-button.pink.statistics .statistic > .value, .download-button.statistics .pink.statistic > .value, .download-button.pink.statistic > .value { color: #E2008C; } .ui.brown.statistics .statistic > .value, .ui.statistics .brown.statistic > .value, .ui.brown.statistic > .value, .play-button.brown.statistics .statistic > .value, .play-button.statistics .brown.statistic > .value, .play-button.brown.statistic > .value, .download-button.brown.statistics .statistic > .value, .download-button.statistics .brown.statistic > .value, .download-button.brown.statistic > .value { color: #6B5B4C; } .ui.grey.statistics .statistic > .value, .ui.statistics .grey.statistic > .value, .ui.grey.statistic > .value, .ui.ui.button.editortools-btn.statistics .statistic > .value, .ui.statistics .ui.button.editortools-btn.statistic > .value, .ui.ui.button.editortools-btn.statistic > .value, .play-button.grey.statistics .statistic > .value, .play-button.statistics .grey.statistic > .value, .play-button.grey.statistic > .value, .download-button.grey.statistics .statistic > .value, .download-button.statistics .grey.statistic > .value, .download-button.grey.statistic > .value, .ui.play-button.button.editortools-btn.statistics .statistic > .value, .ui.statistics .play-button.button.editortools-btn.statistic > .value, .ui.play-button.button.editortools-btn.statistic > .value, .ui.ui.play-button.editortools-btn.statistics .statistic > .value, .ui.statistics .ui.play-button.editortools-btn.statistic > .value, .ui.ui.play-button.editortools-btn.statistic > .value, .ui.download-button.button.editortools-btn.statistics .statistic > .value, .ui.statistics .download-button.button.editortools-btn.statistic > .value, .ui.download-button.button.editortools-btn.statistic > .value, .ui.ui.download-button.editortools-btn.statistics .statistic > .value, .ui.statistics .ui.download-button.editortools-btn.statistic > .value, .ui.ui.download-button.editortools-btn.statistic > .value { color: #42495F; } /*-------------- Inverted ---------------*/ .ui.inverted.statistics .statistic > .value, .ui.inverted.statistic .value, .play-button.inverted.statistics .statistic > .value, .play-button.inverted.statistic .value, .download-button.inverted.statistics .statistic > .value, .download-button.inverted.statistic .value { color: #FFFFFF; } .ui.inverted.statistics .statistic > .label, .ui.inverted.statistic .label, .play-button.inverted.statistics .statistic > .label, .play-button.inverted.statistic .label, .download-button.inverted.statistics .statistic > .label, .download-button.inverted.statistic .label { color: rgba(255, 255, 255, 0.9); } .ui.inverted.red.statistics .statistic > .value, .ui.statistics .inverted.red.statistic > .value, .ui.inverted.red.statistic > .value, .play-button.inverted.red.statistics .statistic > .value, .play-button.statistics .inverted.red.statistic > .value, .play-button.inverted.red.statistic > .value, .download-button.inverted.red.statistics .statistic > .value, .download-button.statistics .inverted.red.statistic > .value, .download-button.inverted.red.statistic > .value { color: #FF695E; } .ui.inverted.orange.statistics .statistic > .value, .ui.statistics .inverted.orange.statistic > .value, .ui.inverted.orange.statistic > .value, .play-button.inverted.orange.statistics .statistic > .value, .play-button.statistics .inverted.orange.statistic > .value, .play-button.inverted.orange.statistic > .value, .download-button.inverted.orange.statistics .statistic > .value, .download-button.statistics .inverted.orange.statistic > .value, .download-button.inverted.orange.statistic > .value { color: #FF851B; } .ui.inverted.yellow.statistics .statistic > .value, .ui.statistics .inverted.yellow.statistic > .value, .ui.inverted.yellow.statistic > .value, .play-button.inverted.yellow.statistics .statistic > .value, .play-button.statistics .inverted.yellow.statistic > .value, .play-button.inverted.yellow.statistic > .value, .download-button.inverted.yellow.statistics .statistic > .value, .download-button.statistics .inverted.yellow.statistic > .value, .download-button.inverted.yellow.statistic > .value, .ui.inverted.download-button.statistics .statistic > .value, .ui.statistics .inverted.download-button.statistic > .value, .ui.inverted.download-button.statistic > .value { color: #FFE21F; } .ui.inverted.olive.statistics .statistic > .value, .ui.statistics .inverted.olive.statistic > .value, .ui.inverted.olive.statistic > .value, .play-button.inverted.olive.statistics .statistic > .value, .play-button.statistics .inverted.olive.statistic > .value, .play-button.inverted.olive.statistic > .value, .download-button.inverted.olive.statistics .statistic > .value, .download-button.statistics .inverted.olive.statistic > .value, .download-button.inverted.olive.statistic > .value { color: #D9E778; } .ui.inverted.green.statistics .statistic > .value, .ui.statistics .inverted.green.statistic > .value, .ui.inverted.green.statistic > .value, .ui.inverted.ui.button.getting-started-btn.statistics .statistic > .value, .ui.statistics .inverted.ui.button.getting-started-btn.statistic > .value, .ui.inverted.ui.button.getting-started-btn.statistic > .value, .play-button.inverted.green.statistics .statistic > .value, .play-button.statistics .inverted.green.statistic > .value, .play-button.inverted.green.statistic > .value, .download-button.inverted.green.statistics .statistic > .value, .download-button.statistics .inverted.green.statistic > .value, .download-button.inverted.green.statistic > .value, .ui.inverted.play-button.button.getting-started-btn.statistics .statistic > .value, .ui.statistics .inverted.play-button.button.getting-started-btn.statistic > .value, .ui.inverted.play-button.button.getting-started-btn.statistic > .value, .ui.inverted.ui.play-button.getting-started-btn.statistics .statistic > .value, .ui.statistics .inverted.ui.play-button.getting-started-btn.statistic > .value, .ui.inverted.ui.play-button.getting-started-btn.statistic > .value, .ui.inverted.download-button.button.getting-started-btn.statistics .statistic > .value, .ui.statistics .inverted.download-button.button.getting-started-btn.statistic > .value, .ui.inverted.download-button.button.getting-started-btn.statistic > .value, .ui.inverted.ui.download-button.getting-started-btn.statistics .statistic > .value, .ui.statistics .inverted.ui.download-button.getting-started-btn.statistic > .value, .ui.inverted.ui.download-button.getting-started-btn.statistic > .value { color: #2ECC40; } .ui.inverted.teal.statistics .statistic > .value, .ui.statistics .inverted.teal.statistic > .value, .ui.inverted.teal.statistic > .value, .play-button.inverted.teal.statistics .statistic > .value, .play-button.statistics .inverted.teal.statistic > .value, .play-button.inverted.teal.statistic > .value, .download-button.inverted.teal.statistics .statistic > .value, .download-button.statistics .inverted.teal.statistic > .value, .download-button.inverted.teal.statistic > .value { color: #6DFFFF; } .ui.inverted.blue.statistics .statistic > .value, .ui.statistics .inverted.blue.statistic > .value, .ui.inverted.blue.statistic > .value, .play-button.inverted.blue.statistics .statistic > .value, .play-button.statistics .inverted.blue.statistic > .value, .play-button.inverted.blue.statistic > .value, .ui.inverted.play-button.statistics .statistic > .value, .ui.statistics .inverted.play-button.statistic > .value, .ui.inverted.play-button.statistic > .value, .download-button.inverted.blue.statistics .statistic > .value, .download-button.statistics .inverted.blue.statistic > .value, .download-button.inverted.blue.statistic > .value { color: #54C8FF; } .ui.inverted.violet.statistics .statistic > .value, .ui.statistics .inverted.violet.statistic > .value, .ui.inverted.violet.statistic > .value, .play-button.inverted.violet.statistics .statistic > .value, .play-button.statistics .inverted.violet.statistic > .value, .play-button.inverted.violet.statistic > .value, .download-button.inverted.violet.statistics .statistic > .value, .download-button.statistics .inverted.violet.statistic > .value, .download-button.inverted.violet.statistic > .value { color: #A291FB; } .ui.inverted.purple.statistics .statistic > .value, .ui.statistics .inverted.purple.statistic > .value, .ui.inverted.purple.statistic > .value, .play-button.inverted.purple.statistics .statistic > .value, .play-button.statistics .inverted.purple.statistic > .value, .play-button.inverted.purple.statistic > .value, .download-button.inverted.purple.statistics .statistic > .value, .download-button.statistics .inverted.purple.statistic > .value, .download-button.inverted.purple.statistic > .value { color: #DC73FF; } .ui.inverted.pink.statistics .statistic > .value, .ui.statistics .inverted.pink.statistic > .value, .ui.inverted.pink.statistic > .value, .play-button.inverted.pink.statistics .statistic > .value, .play-button.statistics .inverted.pink.statistic > .value, .play-button.inverted.pink.statistic > .value, .download-button.inverted.pink.statistics .statistic > .value, .download-button.statistics .inverted.pink.statistic > .value, .download-button.inverted.pink.statistic > .value { color: #FF8EDF; } .ui.inverted.brown.statistics .statistic > .value, .ui.statistics .inverted.brown.statistic > .value, .ui.inverted.brown.statistic > .value, .play-button.inverted.brown.statistics .statistic > .value, .play-button.statistics .inverted.brown.statistic > .value, .play-button.inverted.brown.statistic > .value, .download-button.inverted.brown.statistics .statistic > .value, .download-button.statistics .inverted.brown.statistic > .value, .download-button.inverted.brown.statistic > .value { color: #D67C1C; } .ui.inverted.grey.statistics .statistic > .value, .ui.statistics .inverted.grey.statistic > .value, .ui.inverted.grey.statistic > .value, .ui.inverted.ui.button.editortools-btn.statistics .statistic > .value, .ui.statistics .inverted.ui.button.editortools-btn.statistic > .value, .ui.inverted.ui.button.editortools-btn.statistic > .value, .play-button.inverted.grey.statistics .statistic > .value, .play-button.statistics .inverted.grey.statistic > .value, .play-button.inverted.grey.statistic > .value, .download-button.inverted.grey.statistics .statistic > .value, .download-button.statistics .inverted.grey.statistic > .value, .download-button.inverted.grey.statistic > .value, .ui.inverted.play-button.button.editortools-btn.statistics .statistic > .value, .ui.statistics .inverted.play-button.button.editortools-btn.statistic > .value, .ui.inverted.play-button.button.editortools-btn.statistic > .value, .ui.inverted.ui.play-button.editortools-btn.statistics .statistic > .value, .ui.statistics .inverted.ui.play-button.editortools-btn.statistic > .value, .ui.inverted.ui.play-button.editortools-btn.statistic > .value, .ui.inverted.download-button.button.editortools-btn.statistics .statistic > .value, .ui.statistics .inverted.download-button.button.editortools-btn.statistic > .value, .ui.inverted.download-button.button.editortools-btn.statistic > .value, .ui.inverted.ui.download-button.editortools-btn.statistics .statistic > .value, .ui.statistics .inverted.ui.download-button.editortools-btn.statistic > .value, .ui.inverted.ui.download-button.editortools-btn.statistic > .value { color: #DCDDDE; } /*-------------- Floated ---------------*/ .ui[class*="left floated"].statistic, .play-button[class*="left floated"].statistic, .download-button[class*="left floated"].statistic { float: left; margin: 0em 2em 1em 0em; } .ui[class*="right floated"].statistic, .play-button[class*="right floated"].statistic, .download-button[class*="right floated"].statistic { float: right; margin: 0em 0em 1em 2em; } .ui.floated.statistic:last-child, .play-button.floated.statistic:last-child, .download-button.floated.statistic:last-child { margin-bottom: 0em; } /*-------------- Sizes ---------------*/ /* Mini */ .ui.mini.statistics .statistic > .value, .ui.mini.statistic > .value, .play-button.mini.statistics .statistic > .value, .play-button.mini.statistic > .value, .download-button.mini.statistics .statistic > .value, .download-button.mini.statistic > .value { font-size: 1.5rem !important; } .ui.mini.horizontal.statistics .statistic > .value, .ui.mini.horizontal.statistic > .value, .play-button.mini.horizontal.statistics .statistic > .value, .play-button.mini.horizontal.statistic > .value, .download-button.mini.horizontal.statistics .statistic > .value, .download-button.mini.horizontal.statistic > .value { font-size: 1.5rem !important; } .ui.mini.statistics .statistic > .text.value, .ui.mini.statistic > .text.value, .play-button.mini.statistics .statistic > .text.value, .play-button.mini.statistic > .text.value, .download-button.mini.statistics .statistic > .text.value, .download-button.mini.statistic > .text.value { font-size: 1rem !important; } /* Tiny */ .ui.tiny.statistics .statistic > .value, .ui.tiny.statistic > .value, .play-button.tiny.statistics .statistic > .value, .play-button.tiny.statistic > .value, .download-button.tiny.statistics .statistic > .value, .download-button.tiny.statistic > .value { font-size: 2rem !important; } .ui.tiny.horizontal.statistics .statistic > .value, .ui.tiny.horizontal.statistic > .value, .play-button.tiny.horizontal.statistics .statistic > .value, .play-button.tiny.horizontal.statistic > .value, .download-button.tiny.horizontal.statistics .statistic > .value, .download-button.tiny.horizontal.statistic > .value { font-size: 2rem !important; } .ui.tiny.statistics .statistic > .text.value, .ui.tiny.statistic > .text.value, .play-button.tiny.statistics .statistic > .text.value, .play-button.tiny.statistic > .text.value, .download-button.tiny.statistics .statistic > .text.value, .download-button.tiny.statistic > .text.value { font-size: 1rem !important; } /* Small */ .ui.small.statistics .statistic > .value, .ui.small.statistic > .value, .play-button.small.statistics .statistic > .value, .play-button.small.statistic > .value, .download-button.small.statistics .statistic > .value, .download-button.small.statistic > .value { font-size: 3rem !important; } .ui.small.horizontal.statistics .statistic > .value, .ui.small.horizontal.statistic > .value, .play-button.small.horizontal.statistics .statistic > .value, .play-button.small.horizontal.statistic > .value, .download-button.small.horizontal.statistics .statistic > .value, .download-button.small.horizontal.statistic > .value { font-size: 2rem !important; } .ui.small.statistics .statistic > .text.value, .ui.small.statistic > .text.value, .play-button.small.statistics .statistic > .text.value, .play-button.small.statistic > .text.value, .download-button.small.statistics .statistic > .text.value, .download-button.small.statistic > .text.value { font-size: 1rem !important; } /* Medium */ .ui.statistics .statistic > .value, .ui.statistic > .value, .play-button.statistics .statistic > .value, .play-button.statistic > .value, .download-button.statistics .statistic > .value, .download-button.statistic > .value { font-size: 4rem !important; } .ui.horizontal.statistics .statistic > .value, .ui.horizontal.statistic > .value, .play-button.horizontal.statistics .statistic > .value, .play-button.horizontal.statistic > .value, .download-button.horizontal.statistics .statistic > .value, .download-button.horizontal.statistic > .value { font-size: 3rem !important; } .ui.statistics .statistic > .text.value, .ui.statistic > .text.value, .play-button.statistics .statistic > .text.value, .play-button.statistic > .text.value, .download-button.statistics .statistic > .text.value, .download-button.statistic > .text.value { font-size: 2rem !important; } /* Large */ .ui.large.statistics .statistic > .value, .ui.large.statistic > .value, .play-button.large.statistics .statistic > .value, .play-button.large.statistic > .value, .download-button.large.statistics .statistic > .value, .download-button.large.statistic > .value { font-size: 5rem !important; } .ui.large.horizontal.statistics .statistic > .value, .ui.large.horizontal.statistic > .value, .play-button.large.horizontal.statistics .statistic > .value, .play-button.large.horizontal.statistic > .value, .download-button.large.horizontal.statistics .statistic > .value, .download-button.large.horizontal.statistic > .value { font-size: 4rem !important; } .ui.large.statistics .statistic > .text.value, .ui.large.statistic > .text.value, .play-button.large.statistics .statistic > .text.value, .play-button.large.statistic > .text.value, .download-button.large.statistics .statistic > .text.value, .download-button.large.statistic > .text.value { font-size: 2.5rem !important; } /* Huge */ .ui.huge.statistics .statistic > .value, .ui.huge.statistic > .value, .play-button.huge.statistics .statistic > .value, .play-button.huge.statistic > .value, .download-button.huge.statistics .statistic > .value, .download-button.huge.statistic > .value { font-size: 6rem !important; } .ui.huge.horizontal.statistics .statistic > .value, .ui.huge.horizontal.statistic > .value, .play-button.huge.horizontal.statistics .statistic > .value, .play-button.huge.horizontal.statistic > .value, .download-button.huge.horizontal.statistics .statistic > .value, .download-button.huge.horizontal.statistic > .value { font-size: 5rem !important; } .ui.huge.statistics .statistic > .text.value, .ui.huge.statistic > .text.value, .play-button.huge.statistics .statistic > .text.value, .play-button.huge.statistic > .text.value, .download-button.huge.statistics .statistic > .text.value, .download-button.huge.statistic > .text.value { font-size: 2.5rem !important; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /* Modules */ /*! * # Semantic UI - Accordion * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Accordion *******************************/ /* Title */ /* Icon */ /* Child Accordion */ /* Content */ /*------------------- Coupling --------------------*/ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Styled */ /* Content */ /* Child Content */ /* Styled Title */ /* Styled Title States */ /* Styled Child Title States */ /* Inverted */ /* Packaged Theme */ /******************************* Accordion *******************************/ /* Title */ /* Icon */ /* Child Accordion */ /* Content */ /*------------------- Coupling --------------------*/ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Styled */ /* Content */ /* Child Content */ /* Styled Title */ /* Styled Title States */ /* Styled Child Title States */ /* Inverted */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Accordion *******************************/ .ui.accordion, .ui.accordion .accordion, .play-button.accordion, .play-button.accordion .accordion, .download-button.accordion, .download-button.accordion .accordion { max-width: 100%; } .ui.accordion .accordion, .play-button.accordion .accordion, .download-button.accordion .accordion { margin: 1em 0em 0em; padding: 0em; } /* Title */ .ui.accordion .title, .ui.accordion .accordion .title, .play-button.accordion .title, .play-button.accordion .accordion .title, .download-button.accordion .title, .download-button.accordion .accordion .title { cursor: pointer; } /* Default Styling */ .ui.accordion .title:not(.ui), .play-button.accordion .title:not(.ui), .download-button.accordion .title:not(.ui) { padding: 0.5em 0em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1em; color: rgba(0, 0, 0, 0.87); } /* Content */ .ui.accordion .title ~ .content, .ui.accordion .accordion .title ~ .content, .play-button.accordion .title ~ .content, .play-button.accordion .accordion .title ~ .content, .download-button.accordion .title ~ .content, .download-button.accordion .accordion .title ~ .content { display: none; } /* Default Styling */ .ui.accordion:not(.styled) .title ~ .content:not(.ui), .ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui), .play-button.accordion:not(.styled) .title ~ .content:not(.ui), .play-button.accordion:not(.styled) .accordion .title ~ .content:not(.ui), .download-button.accordion:not(.styled) .title ~ .content:not(.ui), .download-button.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { margin: ''; padding: 0.5em 0em 1em; } .ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child, .play-button.accordion:not(.styled) .title ~ .content:not(.ui):last-child, .download-button.accordion:not(.styled) .title ~ .content:not(.ui):last-child { padding-bottom: 0em; } /* Arrow */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon, .play-button.accordion .title .dropdown.icon, .play-button.accordion .accordion .title .dropdown.icon, .download-button.accordion .title .dropdown.icon, .download-button.accordion .accordion .title .dropdown.icon { display: inline-block; float: none; opacity: 1; width: 1.25em; height: 1em; margin: 0em 0.25rem 0em 0rem; padding: 0em; font-size: 1em; transition: transform 0.1s ease, opacity 0.1s ease; vertical-align: baseline; transform: none; } /*-------------- Coupling ---------------*/ /* Menu */ .ui.accordion.menu .item .title, .play-button.accordion.menu .item .title, .download-button.accordion.menu .item .title { display: block; padding: 0em; } .ui.accordion.menu .item .title > .dropdown.icon, .play-button.accordion.menu .item .title > .dropdown.icon, .download-button.accordion.menu .item .title > .dropdown.icon { float: right; margin: 0.21425em 0em 0em 1em; transform: rotate(180deg); } /* Header */ .ui.accordion .ui.header .dropdown.icon, .play-button.accordion .play-button.header .dropdown.icon, .download-button.accordion .download-button.header .dropdown.icon { font-size: 1em; margin: 0em 0.25rem 0em 0rem; } /******************************* States *******************************/ .ui.accordion .active.title .dropdown.icon, .ui.accordion .accordion .active.title .dropdown.icon, .play-button.accordion .active.title .dropdown.icon, .play-button.accordion .accordion .active.title .dropdown.icon, .download-button.accordion .active.title .dropdown.icon, .download-button.accordion .accordion .active.title .dropdown.icon { transform: rotate(90deg); } .ui.accordion.menu .item .active.title > .dropdown.icon, .play-button.accordion.menu .item .active.title > .dropdown.icon, .download-button.accordion.menu .item .active.title > .dropdown.icon { transform: rotate(90deg); } /******************************* Types *******************************/ /*-------------- Styled ---------------*/ .ui.styled.accordion, .play-button.styled.accordion, .download-button.styled.accordion { width: 600px; } .ui.styled.accordion, .ui.styled.accordion .accordion, .play-button.styled.accordion, .play-button.styled.accordion .accordion, .download-button.styled.accordion, .download-button.styled.accordion .accordion { border-radius: 0.28571429rem; background: #FFFFFF; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15); } .ui.styled.accordion .title, .ui.styled.accordion .accordion .title, .play-button.styled.accordion .title, .play-button.styled.accordion .accordion .title, .download-button.styled.accordion .title, .download-button.styled.accordion .accordion .title { margin: 0em; padding: 0.75em 1em; color: rgba(0, 0, 0, 0.4); font-weight: bold; border-top: 1px solid rgba(34, 36, 38, 0.15); transition: background 0.1s ease, color 0.1s ease; } .ui.styled.accordion > .title:first-child, .ui.styled.accordion .accordion .title:first-child, .play-button.styled.accordion > .title:first-child, .play-button.styled.accordion .accordion .title:first-child, .download-button.styled.accordion > .title:first-child, .download-button.styled.accordion .accordion .title:first-child { border-top: none; } /* Content */ .ui.styled.accordion .content, .ui.styled.accordion .accordion .content, .play-button.styled.accordion .content, .play-button.styled.accordion .accordion .content, .download-button.styled.accordion .content, .download-button.styled.accordion .accordion .content { margin: 0em; padding: 0.5em 1em 1.5em; } .ui.styled.accordion .accordion .content, .play-button.styled.accordion .accordion .content, .download-button.styled.accordion .accordion .content { padding: 0em; padding: 0.5em 1em 1.5em; } /* Hover */ .ui.styled.accordion .title:hover, .ui.styled.accordion .active.title, .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .accordion .active.title, .play-button.styled.accordion .title:hover, .play-button.styled.accordion .active.title, .play-button.styled.accordion .accordion .title:hover, .play-button.styled.accordion .accordion .active.title, .download-button.styled.accordion .title:hover, .download-button.styled.accordion .active.title, .download-button.styled.accordion .accordion .title:hover, .download-button.styled.accordion .accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.87); } .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .accordion .active.title, .play-button.styled.accordion .accordion .title:hover, .play-button.styled.accordion .accordion .active.title, .download-button.styled.accordion .accordion .title:hover, .download-button.styled.accordion .accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.87); } /* Active */ .ui.styled.accordion .active.title, .play-button.styled.accordion .active.title, .download-button.styled.accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.95); } .ui.styled.accordion .accordion .active.title, .play-button.styled.accordion .accordion .active.title, .download-button.styled.accordion .accordion .active.title { background: transparent; color: rgba(0, 0, 0, 0.95); } /******************************* States *******************************/ /*-------------- Active ---------------*/ .ui.accordion .active.content, .ui.accordion .accordion .active.content, .play-button.accordion .active.content, .play-button.accordion .accordion .active.content, .download-button.accordion .active.content, .download-button.accordion .accordion .active.content { display: block; } /******************************* Variations *******************************/ /*-------------- Fluid ---------------*/ .ui.fluid.accordion, .ui.fluid.accordion .accordion, .play-button.fluid.accordion, .play-button.fluid.accordion .accordion, .download-button.fluid.accordion, .download-button.fluid.accordion .accordion { width: 100%; } /*-------------- Inverted ---------------*/ .ui.inverted.accordion .title:not(.ui), .play-button.inverted.accordion .title:not(.ui), .download-button.inverted.accordion .title:not(.ui) { color: rgba(255, 255, 255, 0.9); } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Accordion'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } /* Dropdown Icon */ .ui.accordion .title .dropdown.icon, .ui.accordion .accordion .title .dropdown.icon, .play-button.accordion .title .dropdown.icon, .play-button.accordion .accordion .title .dropdown.icon, .download-button.accordion .title .dropdown.icon, .download-button.accordion .accordion .title .dropdown.icon { font-family: Accordion; line-height: 1; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.accordion .title .dropdown.icon:before, .ui.accordion .accordion .title .dropdown.icon:before, .play-button.accordion .title .dropdown.icon:before, .play-button.accordion .accordion .title .dropdown.icon:before, .download-button.accordion .title .dropdown.icon:before, .download-button.accordion .accordion .title .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } /******************************* User Overrides *******************************/ /*! * # Semantic UI - Checkbox * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Checkbox *******************************/ /* Label */ /* 26px @ 14/em */ /* Checkbox */ /* Checkmark */ /* Label */ /*------------------- States --------------------*/ /* Hover */ /* Pressed */ /* Focus */ /* Active */ /* Active Focus */ /* Indeterminate */ /* Disabled */ /*------------------- Types --------------------*/ /* Radio */ /* Uses px to avoid rounding issues with circles */ /* 7px as unitless value from radio size */ /* Slider & Toggle Handle */ /* Slider */ /* Slider States */ /* Toggle */ /*------------------- Variations --------------------*/ /* Packaged Theme */ /******************************* Checkbox *******************************/ /* Label */ /* 26px @ 14/em */ /* Checkbox */ /* Checkmark */ /* Label */ /*------------------- States --------------------*/ /* Hover */ /* Pressed */ /* Focus */ /* Active */ /* Active Focus */ /* Indeterminate */ /* Disabled */ /*------------------- Types --------------------*/ /* Radio */ /* Uses px to avoid rounding issues with circles */ /* 7px as unitless value from radio size */ /* Slider & Toggle Handle */ /* Slider */ /* Slider States */ /* Toggle */ /*------------------- Variations --------------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Checkbox *******************************/ /*-------------- Content ---------------*/ .ui.checkbox, .play-button.checkbox, .download-button.checkbox { position: relative; display: inline-block; backface-visibility: hidden; outline: none; vertical-align: baseline; font-style: normal; min-height: 17px; font-size: 1rem; line-height: 17px; min-width: 17px; } /* HTML Checkbox */ .ui.checkbox input[type="checkbox"], .ui.checkbox input[type="radio"], .play-button.checkbox input[type="checkbox"], .play-button.checkbox input[type="radio"], .download-button.checkbox input[type="checkbox"], .download-button.checkbox input[type="radio"] { cursor: pointer; position: absolute; top: 0px; left: 0px; opacity: 0 !important; outline: none; z-index: 3; width: 17px; height: 17px; } /*-------------- Box ---------------*/ .ui.checkbox .box, .ui.checkbox label, .play-button.checkbox .box, .play-button.checkbox label, .download-button.checkbox .box, .download-button.checkbox label { cursor: auto; position: relative; display: block; padding-left: 1.85714em; outline: none; font-size: 1em; } .ui.checkbox .box:before, .ui.checkbox label:before, .play-button.checkbox .box:before, .play-button.checkbox label:before, .download-button.checkbox .box:before, .download-button.checkbox label:before { position: absolute; top: 0px; left: 0px; width: 17px; height: 17px; content: ''; background: #FFFFFF; border-radius: 0.21428571rem; transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; border: 1px solid #D4D4D5; } /*-------------- Checkmark ---------------*/ .ui.checkbox .box:after, .ui.checkbox label:after, .play-button.checkbox .box:after, .play-button.checkbox label:after, .download-button.checkbox .box:after, .download-button.checkbox label:after { position: absolute; font-size: 14px; top: 0px; left: 0px; width: 17px; height: 17px; text-align: center; opacity: 0; color: rgba(0, 0, 0, 0.87); transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; } /*-------------- Label ---------------*/ /* Inside */ .ui.checkbox label, .ui.checkbox + label, .play-button.checkbox label, .play-button.checkbox + label, .download-button.checkbox label, .download-button.checkbox + label { color: rgba(0, 0, 0, 0.87); transition: color 0.1s ease; } /* Outside */ .ui.checkbox + label, .play-button.checkbox + label, .download-button.checkbox + label { vertical-align: middle; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before, .play-button.checkbox .box:hover::before, .play-button.checkbox label:hover::before, .download-button.checkbox .box:hover::before, .download-button.checkbox label:hover::before { background: #FFFFFF; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox label:hover, .ui.checkbox + label:hover, .play-button.checkbox label:hover, .play-button.checkbox + label:hover, .download-button.checkbox label:hover, .download-button.checkbox + label:hover { color: rgba(0, 0, 0, 0.8); } /*-------------- Down ---------------*/ .ui.checkbox .box:active::before, .ui.checkbox label:active::before, .play-button.checkbox .box:active::before, .play-button.checkbox label:active::before, .download-button.checkbox .box:active::before, .download-button.checkbox label:active::before { background: #F9FAFB; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox .box:active::after, .ui.checkbox label:active::after, .play-button.checkbox .box:active::after, .play-button.checkbox label:active::after, .download-button.checkbox .box:active::after, .download-button.checkbox label:active::after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox input:active ~ label, .play-button.checkbox input:active ~ label, .download-button.checkbox input:active ~ label { color: rgba(0, 0, 0, 0.95); } /*-------------- Focus ---------------*/ .ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before, .play-button.checkbox input:focus ~ .box:before, .play-button.checkbox input:focus ~ label:before, .download-button.checkbox input:focus ~ .box:before, .download-button.checkbox input:focus ~ label:before { background: #FFFFFF; border-color: #96C8DA; } .ui.checkbox input:focus ~ .box:after, .ui.checkbox input:focus ~ label:after, .play-button.checkbox input:focus ~ .box:after, .play-button.checkbox input:focus ~ label:after, .download-button.checkbox input:focus ~ .box:after, .download-button.checkbox input:focus ~ label:after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox input:focus ~ label, .play-button.checkbox input:focus ~ label, .download-button.checkbox input:focus ~ label { color: rgba(0, 0, 0, 0.95); } /*-------------- Active ---------------*/ .ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before, .play-button.checkbox input:checked ~ .box:before, .play-button.checkbox input:checked ~ label:before, .download-button.checkbox input:checked ~ .box:before, .download-button.checkbox input:checked ~ label:before { background: #FFFFFF; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after, .play-button.checkbox input:checked ~ .box:after, .play-button.checkbox input:checked ~ label:after, .download-button.checkbox input:checked ~ .box:after, .download-button.checkbox input:checked ~ label:after { opacity: 1; color: rgba(0, 0, 0, 0.95); } /*-------------- Indeterminate ---------------*/ .ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, .ui.checkbox input:not([type=radio]):indeterminate ~ label:before, .play-button.checkbox input:not([type=radio]):indeterminate ~ .box:before, .play-button.checkbox input:not([type=radio]):indeterminate ~ label:before, .download-button.checkbox input:not([type=radio]):indeterminate ~ .box:before, .download-button.checkbox input:not([type=radio]):indeterminate ~ label:before { background: #FFFFFF; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, .ui.checkbox input:not([type=radio]):indeterminate ~ label:after, .play-button.checkbox input:not([type=radio]):indeterminate ~ .box:after, .play-button.checkbox input:not([type=radio]):indeterminate ~ label:after, .download-button.checkbox input:not([type=radio]):indeterminate ~ .box:after, .download-button.checkbox input:not([type=radio]):indeterminate ~ label:after { opacity: 1; color: rgba(0, 0, 0, 0.95); } /*-------------- Active Focus ---------------*/ .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, .ui.checkbox input:checked:focus ~ .box:before, .ui.checkbox input:checked:focus ~ label:before, .play-button.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, .play-button.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, .play-button.checkbox input:checked:focus ~ .box:before, .play-button.checkbox input:checked:focus ~ label:before, .download-button.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, .download-button.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, .download-button.checkbox input:checked:focus ~ .box:before, .download-button.checkbox input:checked:focus ~ label:before { background: #FFFFFF; border-color: #96C8DA; } .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, .ui.checkbox input:checked:focus ~ .box:after, .ui.checkbox input:checked:focus ~ label:after, .play-button.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, .play-button.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, .play-button.checkbox input:checked:focus ~ .box:after, .play-button.checkbox input:checked:focus ~ label:after, .download-button.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, .download-button.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, .download-button.checkbox input:checked:focus ~ .box:after, .download-button.checkbox input:checked:focus ~ label:after { color: rgba(0, 0, 0, 0.95); } /*-------------- Read-Only ---------------*/ .ui.read-only.checkbox, .ui.read-only.checkbox label, .play-button.read-only.checkbox, .play-button.read-only.checkbox label, .download-button.read-only.checkbox, .download-button.read-only.checkbox label { cursor: default; } /*-------------- Disabled ---------------*/ .ui.disabled.checkbox .box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled] ~ .box:after, .ui.checkbox input[disabled] ~ label, .play-button.disabled.checkbox .box:after, .play-button.disabled.checkbox label, .play-button.checkbox input[disabled] ~ .box:after, .play-button.checkbox input[disabled] ~ label, .download-button.disabled.checkbox .box:after, .download-button.disabled.checkbox label, .download-button.checkbox input[disabled] ~ .box:after, .download-button.checkbox input[disabled] ~ label { cursor: default !important; opacity: 0.5; color: #000000; } /*-------------- Hidden ---------------*/ /* Initialized checkbox moves input below element to prevent manually triggering */ .ui.checkbox input.hidden, .play-button.checkbox input.hidden, .download-button.checkbox input.hidden { z-index: -1; } /* Selectable Label */ .ui.checkbox input.hidden + label, .play-button.checkbox input.hidden + label, .download-button.checkbox input.hidden + label { cursor: pointer; user-select: none; } /******************************* Types *******************************/ /*-------------- Radio ---------------*/ .ui.radio.checkbox, .play-button.radio.checkbox, .download-button.radio.checkbox { min-height: 15px; } .ui.radio.checkbox .box, .ui.radio.checkbox label, .play-button.radio.checkbox .box, .play-button.radio.checkbox label, .download-button.radio.checkbox .box, .download-button.radio.checkbox label { padding-left: 1.85714em; } /* Box */ .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before, .play-button.radio.checkbox .box:before, .play-button.radio.checkbox label:before, .download-button.radio.checkbox .box:before, .download-button.radio.checkbox label:before { content: ''; transform: none; width: 15px; height: 15px; border-radius: 500rem; top: 1px; left: 0px; } /* Bullet */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after, .play-button.radio.checkbox .box:after, .play-button.radio.checkbox label:after, .download-button.radio.checkbox .box:after, .download-button.radio.checkbox label:after { border: none; content: '' !important; width: 15px; height: 15px; line-height: 15px; } /* Radio Checkbox */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after, .play-button.radio.checkbox .box:after, .play-button.radio.checkbox label:after, .download-button.radio.checkbox .box:after, .download-button.radio.checkbox label:after { top: 1px; left: 0px; width: 15px; height: 15px; border-radius: 500rem; transform: scale(0.46666667); background-color: rgba(0, 0, 0, 0.87); } /* Focus */ .ui.radio.checkbox input:focus ~ .box:before, .ui.radio.checkbox input:focus ~ label:before, .play-button.radio.checkbox input:focus ~ .box:before, .play-button.radio.checkbox input:focus ~ label:before, .download-button.radio.checkbox input:focus ~ .box:before, .download-button.radio.checkbox input:focus ~ label:before { background-color: #FFFFFF; } .ui.radio.checkbox input:focus ~ .box:after, .ui.radio.checkbox input:focus ~ label:after, .play-button.radio.checkbox input:focus ~ .box:after, .play-button.radio.checkbox input:focus ~ label:after, .download-button.radio.checkbox input:focus ~ .box:after, .download-button.radio.checkbox input:focus ~ label:after { background-color: rgba(0, 0, 0, 0.95); } /* Indeterminate */ .ui.radio.checkbox input:indeterminate ~ .box:after, .ui.radio.checkbox input:indeterminate ~ label:after, .play-button.radio.checkbox input:indeterminate ~ .box:after, .play-button.radio.checkbox input:indeterminate ~ label:after, .download-button.radio.checkbox input:indeterminate ~ .box:after, .download-button.radio.checkbox input:indeterminate ~ label:after { opacity: 0; } /* Active */ .ui.radio.checkbox input:checked ~ .box:before, .ui.radio.checkbox input:checked ~ label:before, .play-button.radio.checkbox input:checked ~ .box:before, .play-button.radio.checkbox input:checked ~ label:before, .download-button.radio.checkbox input:checked ~ .box:before, .download-button.radio.checkbox input:checked ~ label:before { background-color: #FFFFFF; } .ui.radio.checkbox input:checked ~ .box:after, .ui.radio.checkbox input:checked ~ label:after, .play-button.radio.checkbox input:checked ~ .box:after, .play-button.radio.checkbox input:checked ~ label:after, .download-button.radio.checkbox input:checked ~ .box:after, .download-button.radio.checkbox input:checked ~ label:after { background-color: rgba(0, 0, 0, 0.95); } /* Active Focus */ .ui.radio.checkbox input:focus:checked ~ .box:before, .ui.radio.checkbox input:focus:checked ~ label:before, .play-button.radio.checkbox input:focus:checked ~ .box:before, .play-button.radio.checkbox input:focus:checked ~ label:before, .download-button.radio.checkbox input:focus:checked ~ .box:before, .download-button.radio.checkbox input:focus:checked ~ label:before { background-color: #FFFFFF; } .ui.radio.checkbox input:focus:checked ~ .box:after, .ui.radio.checkbox input:focus:checked ~ label:after, .play-button.radio.checkbox input:focus:checked ~ .box:after, .play-button.radio.checkbox input:focus:checked ~ label:after, .download-button.radio.checkbox input:focus:checked ~ .box:after, .download-button.radio.checkbox input:focus:checked ~ label:after { background-color: rgba(0, 0, 0, 0.95); } /*-------------- Slider ---------------*/ .ui.slider.checkbox, .play-button.slider.checkbox, .download-button.slider.checkbox { min-height: 1.25rem; } /* Input */ .ui.slider.checkbox input, .play-button.slider.checkbox input, .download-button.slider.checkbox input { width: 3.5rem; height: 1.25rem; } /* Label */ .ui.slider.checkbox .box, .ui.slider.checkbox label, .play-button.slider.checkbox .box, .play-button.slider.checkbox label, .download-button.slider.checkbox .box, .download-button.slider.checkbox label { padding-left: 4.5rem; line-height: 1rem; color: rgba(0, 0, 0, 0.4); } /* Line */ .ui.slider.checkbox .box:before, .ui.slider.checkbox label:before, .play-button.slider.checkbox .box:before, .play-button.slider.checkbox label:before, .download-button.slider.checkbox .box:before, .download-button.slider.checkbox label:before { display: block; position: absolute; content: ''; border: none !important; left: 0em; z-index: 1; top: 0.4rem; background-color: rgba(0, 0, 0, 0.05); width: 3.5rem; height: 0.21428571rem; transform: none; border-radius: 500rem; transition: background 0.3s ease; } /* Handle */ .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after, .play-button.slider.checkbox .box:after, .play-button.slider.checkbox label:after, .download-button.slider.checkbox .box:after, .download-button.slider.checkbox label:after { background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: '' !important; opacity: 1; z-index: 2; border: none; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: -0.25rem; left: 0em; transform: none; border-radius: 500rem; transition: left 0.3s ease; } /* Focus */ .ui.slider.checkbox input:focus ~ .box:before, .ui.slider.checkbox input:focus ~ label:before, .play-button.slider.checkbox input:focus ~ .box:before, .play-button.slider.checkbox input:focus ~ label:before, .download-button.slider.checkbox input:focus ~ .box:before, .download-button.slider.checkbox input:focus ~ label:before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Hover */ .ui.slider.checkbox .box:hover, .ui.slider.checkbox label:hover, .play-button.slider.checkbox .box:hover, .play-button.slider.checkbox label:hover, .download-button.slider.checkbox .box:hover, .download-button.slider.checkbox label:hover { color: rgba(0, 0, 0, 0.8); } .ui.slider.checkbox .box:hover::before, .ui.slider.checkbox label:hover::before, .play-button.slider.checkbox .box:hover::before, .play-button.slider.checkbox label:hover::before, .download-button.slider.checkbox .box:hover::before, .download-button.slider.checkbox label:hover::before { background: rgba(0, 0, 0, 0.15); } /* Active */ .ui.slider.checkbox input:checked ~ .box, .ui.slider.checkbox input:checked ~ label, .play-button.slider.checkbox input:checked ~ .box, .play-button.slider.checkbox input:checked ~ label, .download-button.slider.checkbox input:checked ~ .box, .download-button.slider.checkbox input:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.slider.checkbox input:checked ~ .box:before, .ui.slider.checkbox input:checked ~ label:before, .play-button.slider.checkbox input:checked ~ .box:before, .play-button.slider.checkbox input:checked ~ label:before, .download-button.slider.checkbox input:checked ~ .box:before, .download-button.slider.checkbox input:checked ~ label:before { background-color: #545454 !important; } .ui.slider.checkbox input:checked ~ .box:after, .ui.slider.checkbox input:checked ~ label:after, .play-button.slider.checkbox input:checked ~ .box:after, .play-button.slider.checkbox input:checked ~ label:after, .download-button.slider.checkbox input:checked ~ .box:after, .download-button.slider.checkbox input:checked ~ label:after { left: 2rem; } /* Active Focus */ .ui.slider.checkbox input:focus:checked ~ .box, .ui.slider.checkbox input:focus:checked ~ label, .play-button.slider.checkbox input:focus:checked ~ .box, .play-button.slider.checkbox input:focus:checked ~ label, .download-button.slider.checkbox input:focus:checked ~ .box, .download-button.slider.checkbox input:focus:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.slider.checkbox input:focus:checked ~ .box:before, .ui.slider.checkbox input:focus:checked ~ label:before, .play-button.slider.checkbox input:focus:checked ~ .box:before, .play-button.slider.checkbox input:focus:checked ~ label:before, .download-button.slider.checkbox input:focus:checked ~ .box:before, .download-button.slider.checkbox input:focus:checked ~ label:before { background-color: #000000 !important; } /*-------------- Toggle ---------------*/ .ui.toggle.checkbox, .play-button.toggle.checkbox, .download-button.toggle.checkbox { min-height: 1.5rem; } /* Input */ .ui.toggle.checkbox input, .play-button.toggle.checkbox input, .download-button.toggle.checkbox input { width: 3.5rem; height: 1.5rem; } /* Label */ .ui.toggle.checkbox .box, .ui.toggle.checkbox label, .play-button.toggle.checkbox .box, .play-button.toggle.checkbox label, .download-button.toggle.checkbox .box, .download-button.toggle.checkbox label { min-height: 1.5rem; padding-left: 4.5rem; color: rgba(0, 0, 0, 0.87); } .ui.toggle.checkbox label, .play-button.toggle.checkbox label, .download-button.toggle.checkbox label { padding-top: 0.15em; } /* Switch */ .ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before, .play-button.toggle.checkbox .box:before, .play-button.toggle.checkbox label:before, .download-button.toggle.checkbox .box:before, .download-button.toggle.checkbox label:before { display: block; position: absolute; content: ''; z-index: 1; transform: none; border: none; top: 0rem; background: rgba(0, 0, 0, 0.05); box-shadow: none; width: 3.5rem; height: 1.5rem; border-radius: 500rem; } /* Handle */ .ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after, .play-button.toggle.checkbox .box:after, .play-button.toggle.checkbox label:after, .download-button.toggle.checkbox .box:after, .download-button.toggle.checkbox label:after { background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: '' !important; opacity: 1; z-index: 2; border: none; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: 0rem; left: 0em; border-radius: 500rem; transition: background 0.3s ease, left 0.3s ease; } .ui.toggle.checkbox input ~ .box:after, .ui.toggle.checkbox input ~ label:after, .play-button.toggle.checkbox input ~ .box:after, .play-button.toggle.checkbox input ~ label:after, .download-button.toggle.checkbox input ~ .box:after, .download-button.toggle.checkbox input ~ label:after { left: -0.05rem; box-shadow: none; } /* Focus */ .ui.toggle.checkbox input:focus ~ .box:before, .ui.toggle.checkbox input:focus ~ label:before, .play-button.toggle.checkbox input:focus ~ .box:before, .play-button.toggle.checkbox input:focus ~ label:before, .download-button.toggle.checkbox input:focus ~ .box:before, .download-button.toggle.checkbox input:focus ~ label:before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Hover */ .ui.toggle.checkbox .box:hover::before, .ui.toggle.checkbox label:hover::before, .play-button.toggle.checkbox .box:hover::before, .play-button.toggle.checkbox label:hover::before, .download-button.toggle.checkbox .box:hover::before, .download-button.toggle.checkbox label:hover::before { background-color: rgba(0, 0, 0, 0.15); border: none; } /* Active */ .ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label, .play-button.toggle.checkbox input:checked ~ .box, .play-button.toggle.checkbox input:checked ~ label, .download-button.toggle.checkbox input:checked ~ .box, .download-button.toggle.checkbox input:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before, .play-button.toggle.checkbox input:checked ~ .box:before, .play-button.toggle.checkbox input:checked ~ label:before, .download-button.toggle.checkbox input:checked ~ .box:before, .download-button.toggle.checkbox input:checked ~ label:before { background-color: #3CB5B5 !important; } .ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after, .play-button.toggle.checkbox input:checked ~ .box:after, .play-button.toggle.checkbox input:checked ~ label:after, .download-button.toggle.checkbox input:checked ~ .box:after, .download-button.toggle.checkbox input:checked ~ label:after { left: 2.15rem; box-shadow: none; } /* Active Focus */ .ui.toggle.checkbox input:focus:checked ~ .box, .ui.toggle.checkbox input:focus:checked ~ label, .play-button.toggle.checkbox input:focus:checked ~ .box, .play-button.toggle.checkbox input:focus:checked ~ label, .download-button.toggle.checkbox input:focus:checked ~ .box, .download-button.toggle.checkbox input:focus:checked ~ label { color: rgba(0, 0, 0, 0.95) !important; } .ui.toggle.checkbox input:focus:checked ~ .box:before, .ui.toggle.checkbox input:focus:checked ~ label:before, .play-button.toggle.checkbox input:focus:checked ~ .box:before, .play-button.toggle.checkbox input:focus:checked ~ label:before, .download-button.toggle.checkbox input:focus:checked ~ .box:before, .download-button.toggle.checkbox input:focus:checked ~ label:before { background-color: #28a0a0 !important; } /******************************* Variations *******************************/ /*-------------- Fitted ---------------*/ .ui.fitted.checkbox .box, .ui.fitted.checkbox label, .play-button.fitted.checkbox .box, .play-button.fitted.checkbox label, .download-button.fitted.checkbox .box, .download-button.fitted.checkbox label { padding-left: 0em !important; } .ui.fitted.toggle.checkbox, .ui.fitted.toggle.checkbox, .play-button.fitted.toggle.checkbox, .play-button.fitted.toggle.checkbox, .download-button.fitted.toggle.checkbox, .download-button.fitted.toggle.checkbox { width: 3.5rem; } .ui.fitted.slider.checkbox, .ui.fitted.slider.checkbox, .play-button.fitted.slider.checkbox, .play-button.fitted.slider.checkbox, .download-button.fitted.slider.checkbox, .download-button.fitted.slider.checkbox { width: 3.5rem; } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Checkbox'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); } /* Checkmark */ .ui.checkbox label:after, .ui.checkbox .box:after, .play-button.checkbox label:after, .play-button.checkbox .box:after, .download-button.checkbox label:after, .download-button.checkbox .box:after { font-family: 'Checkbox'; } /* Checked */ .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after, .play-button.checkbox input:checked ~ .box:after, .play-button.checkbox input:checked ~ label:after, .download-button.checkbox input:checked ~ .box:after, .download-button.checkbox input:checked ~ label:after { content: '\e800'; } /* Indeterminate */ .ui.checkbox input:indeterminate ~ .box:after, .ui.checkbox input:indeterminate ~ label:after, .play-button.checkbox input:indeterminate ~ .box:after, .play-button.checkbox input:indeterminate ~ label:after, .download-button.checkbox input:indeterminate ~ .box:after, .download-button.checkbox input:indeterminate ~ label:after { font-size: 12px; content: '\e801'; } /* UTF Reference .check:before { content: '\e800'; } .dash:before { content: '\e801'; } .plus:before { content: '\e802'; } */ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Dimmer * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Dimmer *******************************/ /* Hidden (Default) */ /* Content */ /* Visible */ /*------------------- Types --------------------*/ /* Page Dimmer*/ /*------------------- Variations --------------------*/ /* Inverted */ /* Simple */ /* Packaged Theme */ /******************************* Dimmer *******************************/ /* Hidden (Default) */ /* Content */ /* Visible */ /*------------------- Types --------------------*/ /* Page Dimmer*/ /*------------------- Variations --------------------*/ /* Inverted */ /* Simple */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Dimmer *******************************/ .dimmable:not(body) { position: relative; } .ui.dimmer, .play-button.dimmer, .download-button.dimmer { display: none; position: absolute; top: 0em !important; left: 0em !important; width: 100%; height: 100%; text-align: center; vertical-align: middle; background-color: rgba(0, 0, 0, 0.85); opacity: 0; line-height: 1; animation-fill-mode: both; animation-duration: 0.5s; transition: background-color 0.5s linear; user-select: none; will-change: opacity; z-index: 1000; } /* Dimmer Content */ .ui.dimmer > .content, .play-button.dimmer > .content, .download-button.dimmer > .content { width: 100%; height: 100%; display: table; user-select: text; } .ui.dimmer > .content > *, .play-button.dimmer > .content > *, .download-button.dimmer > .content > * { display: table-cell; vertical-align: middle; color: #FFFFFF; } /* Loose Coupling */ .ui.segment > .ui.dimmer, .play-button.segment > .play-button.dimmer, .download-button.segment > .download-button.dimmer { border-radius: inherit !important; } /* Scrollbars */ .ui.dimmer:not(.inverted)::-webkit-scrollbar-track, .play-button.dimmer:not(.inverted)::-webkit-scrollbar-track, .download-button.dimmer:not(.inverted)::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb, .play-button.dimmer:not(.inverted)::-webkit-scrollbar-thumb, .download-button.dimmer:not(.inverted)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive, .play-button.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive, .download-button.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover, .play-button.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover, .download-button.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /******************************* States *******************************/ .animating.dimmable:not(body), .dimmed.dimmable:not(body) { overflow: hidden; } .dimmed.dimmable > .ui.animating.dimmer, .dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer, .dimmed.dimmable > .play-button.animating.dimmer, .dimmed.dimmable > .play-button.visible.dimmer, .play-button.active.dimmer, .dimmed.dimmable > .download-button.animating.dimmer, .dimmed.dimmable > .download-button.visible.dimmer, .download-button.active.dimmer { display: block; opacity: 1; } .ui.disabled.dimmer, .play-button.disabled.dimmer, .download-button.disabled.dimmer { width: 0 !important; height: 0 !important; } /******************************* Variations *******************************/ /*-------------- Page ---------------*/ .ui.page.dimmer, .play-button.page.dimmer, .download-button.page.dimmer { position: fixed; transform-style: ''; perspective: 2000px; transform-origin: center center; } body.animating.in.dimmable, body.dimmed.dimmable { overflow: hidden; } body.dimmable > .dimmer { position: fixed; } /*-------------- Blurring ---------------*/ .blurring.dimmable > :not(.dimmer) { filter: blur(0px) grayscale(0); transition: 800ms filter ease; } .blurring.dimmed.dimmable > :not(.dimmer) { filter: blur(5px) grayscale(0.7); } /* Dimmer Color */ .blurring.dimmable > .dimmer { background-color: rgba(0, 0, 0, 0.6); } .blurring.dimmable > .inverted.dimmer { background-color: rgba(255, 255, 255, 0.6); } /*-------------- Aligned ---------------*/ .ui.dimmer > .top.aligned.content > *, .play-button.dimmer > .top.aligned.content > *, .download-button.dimmer > .top.aligned.content > * { vertical-align: top; } .ui.dimmer > .bottom.aligned.content > *, .play-button.dimmer > .bottom.aligned.content > *, .download-button.dimmer > .bottom.aligned.content > * { vertical-align: bottom; } /*-------------- Inverted ---------------*/ .ui.inverted.dimmer, .play-button.inverted.dimmer, .download-button.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } .ui.inverted.dimmer > .content > *, .play-button.inverted.dimmer > .content > *, .download-button.inverted.dimmer > .content > * { color: #FFFFFF; } /*-------------- Simple ---------------*/ /* Displays without javascript */ .ui.simple.dimmer, .play-button.simple.dimmer, .download-button.simple.dimmer { display: block; overflow: hidden; opacity: 1; width: 0%; height: 0%; z-index: -100; background-color: rgba(0, 0, 0, 0); } .dimmed.dimmable > .ui.simple.dimmer, .dimmed.dimmable > .play-button.simple.dimmer, .dimmed.dimmable > .download-button.simple.dimmer { overflow: visible; opacity: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1; } .ui.simple.inverted.dimmer, .play-button.simple.inverted.dimmer, .download-button.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0); } .dimmed.dimmable > .ui.simple.inverted.dimmer, .dimmed.dimmable > .play-button.simple.inverted.dimmer, .dimmed.dimmable > .download-button.simple.inverted.dimmer { background-color: rgba(255, 255, 255, 0.85); } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Dropdown * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Dropdown *******************************/ /*------------------- Element --------------------*/ /*------------------- Content --------------------*/ /* Icon */ /* Current Text */ /* Menu */ /* Text */ /* Menu Item */ /* Sub Menu */ /* Menu Header */ /* Menu Divider */ /* Menu Input */ /* Menu Image */ /* Item Sub-Element */ /* Sub-Menu Dropdown Icon */ /* Description */ /* Message */ /* Floated Content */ /*------------------- Types --------------------*/ /*------------ Selection --------------*/ /* */ /* Responsive */ /* Derived */ /* 1px / em size */ /* Hover */ /* Focus */ /* Visible */ /* Visible Hover */ /*-------------- Search --------------*/ /* Search Selection */ /* Inline */ /*-------------- Multiple --------------*/ /* Split Actual Padding Between Child and Parent (allows for label spacing) */ /* Child Elements */ /* Dropdown Icon */ /* Selection Label */ /*------------------- States --------------------*/ /* Hovered */ /* Default Text */ /* Loading */ /* Active Menu Item */ /* Selected */ /* Error */ /*------------------- Variations --------------------*/ /* Scrolling */ /* 0px / em size */ /* Upward */ /* Flyout Direction */ /* Left */ /* Simple */ /* Floating */ /* Pointing */ /* Pointing Upward */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Dropdown *******************************/ .ui.dropdown, .play-button.dropdown, .download-button.dropdown { cursor: pointer; position: relative; display: inline-block; outline: none; text-align: left; transition: box-shadow 0.1s ease, width 0.1s ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /******************************* Content *******************************/ /*-------------- Menu ---------------*/ .ui.dropdown .menu, .play-button.dropdown .menu, .download-button.dropdown .menu { cursor: auto; position: absolute; display: none; outline: none; top: 100%; min-width: max-content; margin: 0em; padding: 0em 0em; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; transition: opacity 0.1s ease; z-index: 11; will-change: transform, opacity; } .ui.dropdown .menu > *, .play-button.dropdown .menu > *, .download-button.dropdown .menu > * { white-space: nowrap; } /*-------------- Hidden Input ---------------*/ .ui.dropdown > input:not(.search):first-child, .ui.dropdown > select, .play-button.dropdown > input:not(.search):first-child, .play-button.dropdown > select, .download-button.dropdown > input:not(.search):first-child, .download-button.dropdown > select { display: none !important; } /*-------------- Dropdown Icon ---------------*/ .ui.dropdown > .dropdown.icon, .play-button.dropdown > .dropdown.icon, .download-button.dropdown > .dropdown.icon { position: relative; width: auto; font-size: 0.85714286em; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon, .play-button.dropdown .menu > .item .dropdown.icon, .download-button.dropdown .menu > .item .dropdown.icon { width: auto; float: right; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon + .text, .play-button.dropdown .menu > .item .dropdown.icon + .text, .download-button.dropdown .menu > .item .dropdown.icon + .text { margin-right: 1em; } /*-------------- Text ---------------*/ .ui.dropdown > .text, .play-button.dropdown > .text, .download-button.dropdown > .text { display: inline-block; transition: none; } /*-------------- Menu Item ---------------*/ .ui.dropdown .menu > .item, .play-button.dropdown .menu > .item, .download-button.dropdown .menu > .item { position: relative; cursor: pointer; display: block; border: none; height: auto; text-align: left; border-top: none; line-height: 1em; color: rgba(0, 0, 0, 0.87); padding: 0.78571429rem 1.14285714rem !important; font-size: 1rem; text-transform: none; font-weight: normal; box-shadow: none; -webkit-touch-callout: none; } .ui.dropdown .menu > .item:first-child, .play-button.dropdown .menu > .item:first-child, .download-button.dropdown .menu > .item:first-child { border-top-width: 0px; } /*-------------- Floated Content ---------------*/ .ui.dropdown > .text > [class*="right floated"], .ui.dropdown .menu .item > [class*="right floated"], .play-button.dropdown > .text > [class*="right floated"], .play-button.dropdown .menu .item > [class*="right floated"], .download-button.dropdown > .text > [class*="right floated"], .download-button.dropdown .menu .item > [class*="right floated"] { float: right !important; margin-right: 0em !important; margin-left: 1em !important; } .ui.dropdown > .text > [class*="left floated"], .ui.dropdown .menu .item > [class*="left floated"], .play-button.dropdown > .text > [class*="left floated"], .play-button.dropdown .menu .item > [class*="left floated"], .download-button.dropdown > .text > [class*="left floated"], .download-button.dropdown .menu .item > [class*="left floated"] { float: left !important; margin-left: 0em !important; margin-right: 1em !important; } .ui.dropdown .menu .item > .icon.floated, .ui.dropdown .menu .item > .flag.floated, .ui.dropdown .menu .item > .image.floated, .ui.dropdown .menu .item > img.floated, .play-button.dropdown .menu .item > .icon.floated, .play-button.dropdown .menu .item > .flag.floated, .play-button.dropdown .menu .item > .image.floated, .play-button.dropdown .menu .item > img.floated, .download-button.dropdown .menu .item > .icon.floated, .download-button.dropdown .menu .item > .flag.floated, .download-button.dropdown .menu .item > .image.floated, .download-button.dropdown .menu .item > img.floated { margin-top: 0em; } /*-------------- Menu Divider ---------------*/ .ui.dropdown .menu > .header, .play-button.dropdown .menu > .header, .download-button.dropdown .menu > .header { margin: 1rem 0rem 0.75rem; padding: 0em 1.14285714rem; color: rgba(0, 0, 0, 0.85); font-size: 0.78571429em; font-weight: bold; text-transform: uppercase; } .ui.dropdown .menu > .divider, .play-button.dropdown .menu > .divider, .download-button.dropdown .menu > .divider { border-top: 1px solid rgba(34, 36, 38, 0.1); height: 0em; margin: 0.5em 0em; } .ui.dropdown .menu > .input, .play-button.dropdown .menu > .input, .download-button.dropdown .menu > .input { width: auto; display: flex; margin: 1.14285714rem 0.78571429rem; min-width: 10rem; } .ui.dropdown .menu > .header + .input, .play-button.dropdown .menu > .header + .input, .download-button.dropdown .menu > .header + .input { margin-top: 0em; } .ui.dropdown .menu > .input:not(.transparent) input, .play-button.dropdown .menu > .input:not(.transparent) input, .download-button.dropdown .menu > .input:not(.transparent) input { padding: 0.5em 1em; } .ui.dropdown .menu > .input:not(.transparent) .button, .ui.dropdown .menu > .input:not(.transparent) .icon, .ui.dropdown .menu > .input:not(.transparent) .label, .play-button.dropdown .menu > .input:not(.transparent) .button, .play-button.dropdown .menu > .input:not(.transparent) .icon, .play-button.dropdown .menu > .input:not(.transparent) .label, .ui.dropdown .menu > .input:not(.transparent) .play-button, .download-button.dropdown .menu > .input:not(.transparent) .button, .download-button.dropdown .menu > .input:not(.transparent) .icon, .download-button.dropdown .menu > .input:not(.transparent) .label, .ui.dropdown .menu > .input:not(.transparent) .download-button { padding-top: 0.5em; padding-bottom: 0.5em; } /*----------------- Item Description -------------------*/ .ui.dropdown > .text > .description, .ui.dropdown .menu > .item > .description, .play-button.dropdown > .text > .description, .play-button.dropdown .menu > .item > .description, .download-button.dropdown > .text > .description, .download-button.dropdown .menu > .item > .description { float: right; margin: 0em 0em 0em 1em; color: rgba(0, 0, 0, 0.4); } /*----------------- Message -------------------*/ .ui.dropdown .menu > .message, .play-button.dropdown .menu > .message, .download-button.dropdown .menu > .message { padding: 0.78571429rem 1.14285714rem; font-weight: normal; } .ui.dropdown .menu > .message:not(.ui), .play-button.dropdown .menu > .message:not(.ui), .download-button.dropdown .menu > .message:not(.ui) { color: rgba(0, 0, 0, 0.4); } /*-------------- Sub Menu ---------------*/ .ui.dropdown .menu .menu, .play-button.dropdown .menu .menu, .download-button.dropdown .menu .menu { top: 0% !important; left: 100%; right: auto; margin: 0em 0em 0em -0.5em !important; border-radius: 0.28571429rem !important; z-index: 21 !important; } /* Hide Arrow */ .ui.dropdown .menu .menu:after, .play-button.dropdown .menu .menu:after, .download-button.dropdown .menu .menu:after { display: none; } /*-------------- Sub Elements ---------------*/ /* Icons / Flags / Labels / Image */ .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .play-button.dropdown > .text > .icon, .play-button.dropdown > .text > .label, .play-button.dropdown > .text > .flag, .play-button.dropdown > .text > img, .play-button.dropdown > .text > .image, .download-button.dropdown > .text > .icon, .download-button.dropdown > .text > .label, .download-button.dropdown > .text > .flag, .download-button.dropdown > .text > img, .download-button.dropdown > .text > .image { margin-top: 0em; } .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img, .play-button.dropdown .menu > .item > .icon, .play-button.dropdown .menu > .item > .label, .play-button.dropdown .menu > .item > .flag, .play-button.dropdown .menu > .item > .image, .play-button.dropdown .menu > .item > img, .download-button.dropdown .menu > .item > .icon, .download-button.dropdown .menu > .item > .label, .download-button.dropdown .menu > .item > .flag, .download-button.dropdown .menu > .item > .image, .download-button.dropdown .menu > .item > img { margin-top: 0em; } .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img, .play-button.dropdown > .text > .icon, .play-button.dropdown > .text > .label, .play-button.dropdown > .text > .flag, .play-button.dropdown > .text > img, .play-button.dropdown > .text > .image, .play-button.dropdown .menu > .item > .icon, .play-button.dropdown .menu > .item > .label, .play-button.dropdown .menu > .item > .flag, .play-button.dropdown .menu > .item > .image, .play-button.dropdown .menu > .item > img, .download-button.dropdown > .text > .icon, .download-button.dropdown > .text > .label, .download-button.dropdown > .text > .flag, .download-button.dropdown > .text > img, .download-button.dropdown > .text > .image, .download-button.dropdown .menu > .item > .icon, .download-button.dropdown .menu > .item > .label, .download-button.dropdown .menu > .item > .flag, .download-button.dropdown .menu > .item > .image, .download-button.dropdown .menu > .item > img { margin-left: 0em; float: none; margin-right: 0.78571429rem; } /*-------------- Image ---------------*/ .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img, .play-button.dropdown > .text > img, .play-button.dropdown > .text > .image, .play-button.dropdown .menu > .item > .image, .play-button.dropdown .menu > .item > img, .download-button.dropdown > .text > img, .download-button.dropdown > .text > .image, .download-button.dropdown .menu > .item > .image, .download-button.dropdown .menu > .item > img { display: inline-block; vertical-align: top; width: auto; margin-top: -0.5em; margin-bottom: -0.5em; max-height: 2em; } /******************************* Coupling *******************************/ /*-------------- Menu ---------------*/ /* Remove Menu Item Divider */ .ui.dropdown .ui.menu > .item:before, .ui.menu .ui.dropdown .menu > .item:before, .play-button.dropdown .play-button.menu > .item:before, .play-button.menu .play-button.dropdown .menu > .item:before, .download-button.dropdown .download-button.menu > .item:before, .download-button.menu .download-button.dropdown .menu > .item:before { display: none; } /* Prevent Menu Item Border */ .ui.menu .ui.dropdown .menu .active.item, .play-button.menu .play-button.dropdown .menu .active.item, .download-button.menu .download-button.dropdown .menu .active.item { border-left: none; } /* Automatically float dropdown menu right on last menu item */ .ui.menu .right.menu .dropdown:last-child .menu, .ui.menu .right.dropdown.item .menu, .ui.buttons > .ui.dropdown:last-child .menu, .play-button.menu .right.menu .dropdown:last-child .menu, .play-button.menu .right.dropdown.item .menu, .play-button.buttons > .play-button.dropdown:last-child .menu, .download-button.menu .right.menu .dropdown:last-child .menu, .download-button.menu .right.dropdown.item .menu, .download-button.buttons > .download-button.dropdown:last-child .menu { left: auto; right: 0em; } /*-------------- Label ---------------*/ /* Dropdown Menu */ .ui.label.dropdown .menu, .play-button.label.dropdown .menu, .download-button.label.dropdown .menu { min-width: 100%; } /*-------------- Button ---------------*/ /* No Margin On Icon Button */ .ui.dropdown.icon.button > .dropdown.icon, .play-button.dropdown.icon.button > .dropdown.icon, .ui.dropdown.icon.play-button > .dropdown.icon, .download-button.dropdown.icon.button > .dropdown.icon, .ui.dropdown.icon.download-button > .dropdown.icon { margin: 0em; } .ui.button.dropdown .menu, .play-button.button.dropdown .menu, .ui.play-button.dropdown .menu, .download-button.button.dropdown .menu, .ui.download-button.dropdown .menu { min-width: 100%; } /******************************* Types *******************************/ /*-------------- Selection ---------------*/ /* Displays like a select box */ .ui.selection.dropdown, .play-button.selection.dropdown, .download-button.selection.dropdown { cursor: pointer; word-wrap: break-word; line-height: 1em; white-space: normal; outline: 0; transform: rotateZ(0deg); min-width: 14em; min-height: 2.71428571em; background: #FFFFFF; display: inline-block; padding: 0.78571429em 2.1em 0.78571429em 1em; color: rgba(0, 0, 0, 0.87); box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; transition: box-shadow 0.1s ease, width 0.1s ease; } .ui.selection.dropdown.visible, .ui.selection.dropdown.active, .play-button.selection.dropdown.visible, .play-button.selection.dropdown.active, .download-button.selection.dropdown.visible, .download-button.selection.dropdown.active { z-index: 10; } select.ui.dropdown, select.play-button.dropdown, select.download-button.dropdown { height: 38px; padding: 0.5em; border: 1px solid rgba(34, 36, 38, 0.15); visibility: visible; } .ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon, .play-button.selection.dropdown > .search.icon, .play-button.selection.dropdown > .delete.icon, .play-button.selection.dropdown > .dropdown.icon, .download-button.selection.dropdown > .search.icon, .download-button.selection.dropdown > .delete.icon, .download-button.selection.dropdown > .dropdown.icon { cursor: pointer; position: absolute; width: auto; height: auto; line-height: 1.21428571em; top: 0.78571429em; right: 1em; z-index: 3; margin: -0.78571429em; padding: 0.91666667em; opacity: 0.8; transition: opacity 0.1s ease; } /* Compact */ .ui.compact.selection.dropdown, .play-button.compact.selection.dropdown, .download-button.compact.selection.dropdown { min-width: 0px; } /* Selection Menu */ .ui.selection.dropdown .menu, .play-button.selection.dropdown .menu, .download-button.selection.dropdown .menu { overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; border-top-width: 0px !important; width: auto; outline: none; margin: 0px -1px; min-width: calc(100% + 2px ); width: calc(100% + 2px ); border-radius: 0em 0em 0.28571429rem 0.28571429rem; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); transition: opacity 0.1s ease; } .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before, .play-button.selection.dropdown .menu:after, .play-button.selection.dropdown .menu:before, .download-button.selection.dropdown .menu:after, .download-button.selection.dropdown .menu:before { display: none; } /*-------------- Message ---------------*/ .ui.selection.dropdown .menu > .message, .play-button.selection.dropdown .menu > .message, .download-button.selection.dropdown .menu > .message { padding: 0.78571429rem 1.14285714rem; } @media only screen and (max-width: 767px) { .ui.selection.dropdown .menu, .play-button.selection.dropdown .menu, .download-button.selection.dropdown .menu { max-height: 8.01428571rem; } } @media only screen and (min-width: 768px) { .ui.selection.dropdown .menu, .play-button.selection.dropdown .menu, .download-button.selection.dropdown .menu { max-height: 10.68571429rem; } } @media only screen and (min-width: 992px) { .ui.selection.dropdown .menu, .play-button.selection.dropdown .menu, .download-button.selection.dropdown .menu { max-height: 16.02857143rem; } } @media only screen and (min-width: 1920px) { .ui.selection.dropdown .menu, .play-button.selection.dropdown .menu, .download-button.selection.dropdown .menu { max-height: 21.37142857rem; } } /* Menu Item */ .ui.selection.dropdown .menu > .item, .play-button.selection.dropdown .menu > .item, .download-button.selection.dropdown .menu > .item { border-top: 1px solid #FAFAFA; padding: 0.78571429rem 1.14285714rem !important; white-space: normal; word-wrap: normal; } /* User Item */ .ui.selection.dropdown .menu > .hidden.addition.item, .play-button.selection.dropdown .menu > .hidden.addition.item, .download-button.selection.dropdown .menu > .hidden.addition.item { display: none; } /* Hover */ .ui.selection.dropdown:hover, .play-button.selection.dropdown:hover, .download-button.selection.dropdown:hover { border-color: rgba(34, 36, 38, 0.35); box-shadow: none; } /* Active */ .ui.selection.active.dropdown, .play-button.selection.active.dropdown, .download-button.selection.active.dropdown { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } .ui.selection.active.dropdown .menu, .play-button.selection.active.dropdown .menu, .download-button.selection.active.dropdown .menu { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Focus */ .ui.selection.dropdown:focus, .play-button.selection.dropdown:focus, .download-button.selection.dropdown:focus { border-color: #96C8DA; box-shadow: none; } .ui.selection.dropdown:focus .menu, .play-button.selection.dropdown:focus .menu, .download-button.selection.dropdown:focus .menu { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Visible */ .ui.selection.visible.dropdown > .text:not(.default), .play-button.selection.visible.dropdown > .text:not(.default), .download-button.selection.visible.dropdown > .text:not(.default) { font-weight: normal; color: rgba(0, 0, 0, 0.8); } /* Visible Hover */ .ui.selection.active.dropdown:hover, .play-button.selection.active.dropdown:hover, .download-button.selection.active.dropdown:hover { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } .ui.selection.active.dropdown:hover .menu, .play-button.selection.active.dropdown:hover .menu, .download-button.selection.active.dropdown:hover .menu { border-color: #96C8DA; box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Dropdown Icon */ .ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon, .play-button.active.selection.dropdown > .dropdown.icon, .play-button.visible.selection.dropdown > .dropdown.icon, .download-button.active.selection.dropdown > .dropdown.icon, .download-button.visible.selection.dropdown > .dropdown.icon { opacity: 1; z-index: 3; } /* Connecting Border */ .ui.active.selection.dropdown, .play-button.active.selection.dropdown, .download-button.active.selection.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } /* Empty Connecting Border */ .ui.active.empty.selection.dropdown, .play-button.active.empty.selection.dropdown, .download-button.active.empty.selection.dropdown { border-radius: 0.28571429rem !important; box-shadow: none !important; } .ui.active.empty.selection.dropdown .menu, .play-button.active.empty.selection.dropdown .menu, .download-button.active.empty.selection.dropdown .menu { border: none !important; box-shadow: none !important; } /*-------------- Searchable ---------------*/ /* Search Selection */ .ui.search.dropdown, .play-button.search.dropdown, .download-button.search.dropdown { min-width: ''; } /* Search Dropdown */ .ui.search.dropdown > input.search, .play-button.search.dropdown > input.search, .download-button.search.dropdown > input.search { background: none transparent !important; border: none !important; box-shadow: none !important; cursor: text; top: 0em; left: 1px; width: 100%; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: inherit; } /* Text Layering */ .ui.search.dropdown > input.search, .play-button.search.dropdown > input.search, .download-button.search.dropdown > input.search { position: absolute; z-index: 2; } .ui.search.dropdown > .text, .play-button.search.dropdown > .text, .download-button.search.dropdown > .text { cursor: text; position: relative; left: 1px; z-index: 3; } /* Search Selection */ .ui.search.selection.dropdown > input.search, .play-button.search.selection.dropdown > input.search, .download-button.search.selection.dropdown > input.search { line-height: 1.21428571em; padding: 0.67857143em 2.1em 0.67857143em 1em; } /* Used to size multi select input to character width */ .ui.search.selection.dropdown > span.sizer, .play-button.search.selection.dropdown > span.sizer, .download-button.search.selection.dropdown > span.sizer { line-height: 1.21428571em; padding: 0.67857143em 2.1em 0.67857143em 1em; display: none; white-space: pre; } /* Active/Visible Search */ .ui.search.dropdown.active > input.search, .ui.search.dropdown.visible > input.search, .play-button.search.dropdown.active > input.search, .play-button.search.dropdown.visible > input.search, .download-button.search.dropdown.active > input.search, .download-button.search.dropdown.visible > input.search { cursor: auto; } .ui.search.dropdown.active > .text, .ui.search.dropdown.visible > .text, .play-button.search.dropdown.active > .text, .play-button.search.dropdown.visible > .text, .download-button.search.dropdown.active > .text, .download-button.search.dropdown.visible > .text { pointer-events: none; } /* Filtered Text */ .ui.active.search.dropdown input.search:focus + .text .icon, .ui.active.search.dropdown input.search:focus + .text .flag, .play-button.active.search.dropdown input.search:focus + .text .icon, .play-button.active.search.dropdown input.search:focus + .text .flag, .download-button.active.search.dropdown input.search:focus + .text .icon, .download-button.active.search.dropdown input.search:focus + .text .flag { opacity: 0.45; } .ui.active.search.dropdown input.search:focus + .text, .play-button.active.search.dropdown input.search:focus + .text, .download-button.active.search.dropdown input.search:focus + .text { color: rgba(115, 115, 115, 0.87) !important; } /* Search Menu */ .ui.search.dropdown .menu, .play-button.search.dropdown .menu, .download-button.search.dropdown .menu { overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 767px) { .ui.search.dropdown .menu, .play-button.search.dropdown .menu, .download-button.search.dropdown .menu { max-height: 8.01428571rem; } } @media only screen and (min-width: 768px) { .ui.search.dropdown .menu, .play-button.search.dropdown .menu, .download-button.search.dropdown .menu { max-height: 10.68571429rem; } } @media only screen and (min-width: 992px) { .ui.search.dropdown .menu, .play-button.search.dropdown .menu, .download-button.search.dropdown .menu { max-height: 16.02857143rem; } } @media only screen and (min-width: 1920px) { .ui.search.dropdown .menu, .play-button.search.dropdown .menu, .download-button.search.dropdown .menu { max-height: 21.37142857rem; } } /*-------------- Multiple ---------------*/ /* Multiple Selection */ .ui.multiple.dropdown, .play-button.multiple.dropdown, .download-button.multiple.dropdown { padding: 0.22619048em 2.1em 0.22619048em 0.35714286em; } .ui.multiple.dropdown .menu, .play-button.multiple.dropdown .menu, .download-button.multiple.dropdown .menu { cursor: auto; } /* Multiple Search Selection */ .ui.multiple.search.dropdown, .ui.multiple.search.dropdown > input.search, .play-button.multiple.search.dropdown, .play-button.multiple.search.dropdown > input.search, .download-button.multiple.search.dropdown, .download-button.multiple.search.dropdown > input.search { cursor: text; } /* Selection Label */ .ui.multiple.dropdown > .label, .play-button.multiple.dropdown > .label, .download-button.multiple.dropdown > .label { user-select: none; display: inline-block; vertical-align: top; white-space: normal; font-size: 1em; padding: 0.35714286em 0.78571429em; margin: 0.14285714rem 0.28571429rem 0.14285714rem 0em; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } /* Dropdown Icon */ .ui.multiple.dropdown .dropdown.icon, .play-button.multiple.dropdown .dropdown.icon, .download-button.multiple.dropdown .dropdown.icon { margin: ''; padding: ''; } /* Text */ .ui.multiple.dropdown > .text, .play-button.multiple.dropdown > .text, .download-button.multiple.dropdown > .text { position: static; padding: 0; max-width: 100%; margin: 0.45238095em 0em 0.45238095em 0.64285714em; line-height: 1.21428571em; } .ui.multiple.dropdown > .label ~ input.search, .play-button.multiple.dropdown > .label ~ input.search, .download-button.multiple.dropdown > .label ~ input.search { margin-left: 0.14285714em !important; } .ui.multiple.dropdown > .label ~ .text, .play-button.multiple.dropdown > .label ~ .text, .download-button.multiple.dropdown > .label ~ .text { display: none; } /*----------------- Multiple Search -----------------*/ /* Prompt Text */ .ui.multiple.search.dropdown > .text, .play-button.multiple.search.dropdown > .text, .download-button.multiple.search.dropdown > .text { display: inline-block; position: absolute; top: 0; left: 0; padding: inherit; margin: 0.45238095em 0em 0.45238095em 0.64285714em; line-height: 1.21428571em; } .ui.multiple.search.dropdown > .label ~ .text, .play-button.multiple.search.dropdown > .label ~ .text, .download-button.multiple.search.dropdown > .label ~ .text { display: none; } /* Search */ .ui.multiple.search.dropdown > input.search, .play-button.multiple.search.dropdown > input.search, .download-button.multiple.search.dropdown > input.search { position: static; padding: 0; max-width: 100%; margin: 0.45238095em 0em 0.45238095em 0.64285714em; width: 2.2em; line-height: 1.21428571em; } /*-------------- Inline ---------------*/ .ui.inline.dropdown, .play-button.inline.dropdown, .download-button.inline.dropdown { cursor: pointer; display: inline-block; color: inherit; } .ui.inline.dropdown .dropdown.icon, .play-button.inline.dropdown .dropdown.icon, .download-button.inline.dropdown .dropdown.icon { margin: 0em 0.5em 0em 0.21428571em; vertical-align: baseline; } .ui.inline.dropdown > .text, .play-button.inline.dropdown > .text, .download-button.inline.dropdown > .text { font-weight: bold; } .ui.inline.dropdown .menu, .play-button.inline.dropdown .menu, .download-button.inline.dropdown .menu { cursor: auto; margin-top: 0.21428571em; border-radius: 0.28571429rem; } /******************************* States *******************************/ /*-------------------- Active ----------------------*/ /* Menu Item Active */ .ui.dropdown .menu .active.item, .play-button.dropdown .menu .active.item, .download-button.dropdown .menu .active.item { background: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); box-shadow: none; z-index: 12; } /*-------------------- Hover ----------------------*/ /* Menu Item Hover */ .ui.dropdown .menu > .item:hover, .play-button.dropdown .menu > .item:hover, .download-button.dropdown .menu > .item:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); z-index: 13; } /*-------------------- Loading ---------------------*/ .ui.loading.dropdown > i.icon, .play-button.loading.dropdown > i.icon, .download-button.loading.dropdown > i.icon { height: 1em !important; } .ui.loading.selection.dropdown > i.icon, .play-button.loading.selection.dropdown > i.icon, .download-button.loading.selection.dropdown > i.icon { padding: 1.5em 1.28571429em !important; } .ui.loading.dropdown > i.icon:before, .play-button.loading.dropdown > i.icon:before, .download-button.loading.dropdown > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.dropdown > i.icon:after, .play-button.loading.dropdown > i.icon:after, .download-button.loading.dropdown > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; box-shadow: 0px 0px 0px 1px transparent; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; animation: dropdown-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #42495F transparent transparent; border-style: solid; border-width: 0.2em; } /* Coupling */ .ui.loading.dropdown.button > i.icon:before, .ui.loading.dropdown.button > i.icon:after, .play-button.loading.dropdown.button > i.icon:before, .play-button.loading.dropdown.button > i.icon:after, .ui.loading.dropdown.play-button > i.icon:before, .ui.loading.dropdown.play-button > i.icon:after, .download-button.loading.dropdown.button > i.icon:before, .download-button.loading.dropdown.button > i.icon:after, .ui.loading.dropdown.download-button > i.icon:before, .ui.loading.dropdown.download-button > i.icon:after { display: none; } @keyframes dropdown-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*-------------------- Default Text ----------------------*/ .ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text, .play-button.dropdown:not(.button) > .default.text, .play-button.default.dropdown:not(.button) > .text, .download-button.dropdown:not(.button) > .default.text, .download-button.default.dropdown:not(.button) > .text { color: rgba(191, 191, 191, 0.87); } .ui.dropdown:not(.button) > input:focus ~ .default.text, .ui.default.dropdown:not(.button) > input:focus ~ .text, .play-button.dropdown:not(.button) > input:focus ~ .default.text, .play-button.default.dropdown:not(.button) > input:focus ~ .text, .download-button.dropdown:not(.button) > input:focus ~ .default.text, .download-button.default.dropdown:not(.button) > input:focus ~ .text { color: rgba(115, 115, 115, 0.87); } /*-------------------- Loading ----------------------*/ .ui.loading.dropdown > .text, .play-button.loading.dropdown > .text, .download-button.loading.dropdown > .text { transition: none; } /* Used To Check Position */ .ui.dropdown .loading.menu, .play-button.dropdown .loading.menu, .download-button.dropdown .loading.menu { display: block; visibility: hidden; z-index: -1; } .ui.dropdown > .loading.menu, .play-button.dropdown > .loading.menu, .download-button.dropdown > .loading.menu { left: 0px !important; right: auto !important; } .ui.dropdown > .menu .loading.menu, .play-button.dropdown > .menu .loading.menu, .download-button.dropdown > .menu .loading.menu { left: 100% !important; right: auto !important; } /*-------------------- Keyboard Select ----------------------*/ /* Selected Item */ .ui.dropdown.selected, .ui.dropdown .menu .selected.item, .play-button.dropdown.selected, .play-button.dropdown .menu .selected.item, .download-button.dropdown.selected, .download-button.dropdown .menu .selected.item { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------------- Search Filtered ----------------------*/ /* Filtered Item */ .ui.dropdown > .filtered.text, .play-button.dropdown > .filtered.text, .download-button.dropdown > .filtered.text { visibility: hidden; } .ui.dropdown .filtered.item, .play-button.dropdown .filtered.item, .download-button.dropdown .filtered.item { display: none !important; } /*-------------------- Error ----------------------*/ .ui.dropdown.error, .ui.dropdown.error > .text, .ui.dropdown.error > .default.text, .play-button.dropdown.error, .play-button.dropdown.error > .text, .play-button.dropdown.error > .default.text, .download-button.dropdown.error, .download-button.dropdown.error > .text, .download-button.dropdown.error > .default.text { color: #9F3A38; } .ui.selection.dropdown.error, .play-button.selection.dropdown.error, .download-button.selection.dropdown.error { background: #FFF6F6; border-color: #E0B4B4; } .ui.selection.dropdown.error:hover, .play-button.selection.dropdown.error:hover, .download-button.selection.dropdown.error:hover { border-color: #E0B4B4; } .ui.dropdown.error > .menu, .ui.dropdown.error > .menu .menu, .play-button.dropdown.error > .menu, .play-button.dropdown.error > .menu .menu, .download-button.dropdown.error > .menu, .download-button.dropdown.error > .menu .menu { border-color: #E0B4B4; } .ui.dropdown.error > .menu > .item, .play-button.dropdown.error > .menu > .item, .download-button.dropdown.error > .menu > .item { color: #9F3A38; } .ui.multiple.selection.error.dropdown > .label, .play-button.multiple.selection.error.dropdown > .label, .download-button.multiple.selection.error.dropdown > .label { border-color: #E0B4B4; } /* Item Hover */ .ui.dropdown.error > .menu > .item:hover, .play-button.dropdown.error > .menu > .item:hover, .download-button.dropdown.error > .menu > .item:hover { background-color: #FFF2F2; } /* Item Active */ .ui.dropdown.error > .menu .active.item, .play-button.dropdown.error > .menu .active.item, .download-button.dropdown.error > .menu .active.item { background-color: #FDCFCF; } /*-------------------- Disabled ----------------------*/ /* Disabled */ .ui.disabled.dropdown, .ui.dropdown .menu > .disabled.item, .play-button.disabled.dropdown, .play-button.dropdown .menu > .disabled.item, .download-button.disabled.dropdown, .download-button.dropdown .menu > .disabled.item { cursor: default; pointer-events: none; opacity: 0.45; } /******************************* Variations *******************************/ /*-------------- Direction ---------------*/ /* Flyout Direction */ .ui.dropdown .menu, .play-button.dropdown .menu, .download-button.dropdown .menu { left: 0px; } /* Default Side (Right) */ .ui.dropdown .right.menu > .menu, .ui.dropdown .menu .right.menu, .play-button.dropdown .right.menu > .menu, .play-button.dropdown .menu .right.menu, .download-button.dropdown .right.menu > .menu, .download-button.dropdown .menu .right.menu { left: 100% !important; right: auto !important; border-radius: 0.28571429rem !important; } /* Leftward Opening Menu */ .ui.dropdown > .left.menu, .play-button.dropdown > .left.menu, .download-button.dropdown > .left.menu { left: auto !important; right: 0px !important; } .ui.dropdown > .left.menu .menu, .ui.dropdown .menu .left.menu, .play-button.dropdown > .left.menu .menu, .play-button.dropdown .menu .left.menu, .download-button.dropdown > .left.menu .menu, .download-button.dropdown .menu .left.menu { left: auto; right: 100%; margin: 0em -0.5em 0em 0em !important; border-radius: 0.28571429rem !important; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon, .play-button.dropdown .item .left.dropdown.icon, .play-button.dropdown .left.menu .item .dropdown.icon, .download-button.dropdown .item .left.dropdown.icon, .download-button.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0em 0em 0em; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon, .play-button.dropdown .item .left.dropdown.icon, .play-button.dropdown .left.menu .item .dropdown.icon, .download-button.dropdown .item .left.dropdown.icon, .download-button.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0em 0em 0em; } .ui.dropdown .item .left.dropdown.icon + .text, .ui.dropdown .left.menu .item .dropdown.icon + .text, .play-button.dropdown .item .left.dropdown.icon + .text, .play-button.dropdown .left.menu .item .dropdown.icon + .text, .download-button.dropdown .item .left.dropdown.icon + .text, .download-button.dropdown .left.menu .item .dropdown.icon + .text { margin-left: 1em; margin-right: 0em; } /*-------------- Upward ---------------*/ /* Upward Main Menu */ .ui.upward.dropdown > .menu, .play-button.upward.dropdown > .menu, .download-button.upward.dropdown > .menu { top: auto; bottom: 100%; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Upward Sub Menu */ .ui.dropdown .upward.menu, .play-button.dropdown .upward.menu, .download-button.dropdown .upward.menu { top: auto !important; bottom: 0 !important; } /* Active Upward */ .ui.simple.upward.active.dropdown, .ui.simple.upward.dropdown:hover, .play-button.simple.upward.active.dropdown, .play-button.simple.upward.dropdown:hover, .download-button.simple.upward.active.dropdown, .download-button.simple.upward.dropdown:hover { border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; } .ui.upward.dropdown.button:not(.pointing):not(.floating).active, .play-button.upward.dropdown.button:not(.pointing):not(.floating).active, .ui.upward.dropdown.play-button:not(.pointing):not(.floating).active, .download-button.upward.dropdown.button:not(.pointing):not(.floating).active, .ui.upward.dropdown.download-button:not(.pointing):not(.floating).active { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Selection */ .ui.upward.selection.dropdown .menu, .play-button.upward.selection.dropdown .menu, .download-button.upward.selection.dropdown .menu { border-top-width: 1px !important; border-bottom-width: 0px !important; box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } .ui.upward.selection.dropdown:hover, .play-button.upward.selection.dropdown:hover, .download-button.upward.selection.dropdown:hover { box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); } /* Active Upward */ .ui.active.upward.selection.dropdown, .play-button.active.upward.selection.dropdown, .download-button.active.upward.selection.dropdown { border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; } /* Visible Upward */ .ui.upward.selection.dropdown.visible, .play-button.upward.selection.dropdown.visible, .download-button.upward.selection.dropdown.visible { box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; } /* Visible Hover Upward */ .ui.upward.active.selection.dropdown:hover, .play-button.upward.active.selection.dropdown:hover, .download-button.upward.active.selection.dropdown:hover { box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); } .ui.upward.active.selection.dropdown:hover .menu, .play-button.upward.active.selection.dropdown:hover .menu, .download-button.upward.active.selection.dropdown:hover .menu { box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } /*-------------- Simple ---------------*/ /* Selection Menu */ .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu, .play-button.scrolling.dropdown .menu, .play-button.dropdown .scrolling.menu, .download-button.scrolling.dropdown .menu, .download-button.dropdown .scrolling.menu { overflow-x: hidden; overflow-y: auto; } .ui.scrolling.dropdown .menu, .play-button.scrolling.dropdown .menu, .download-button.scrolling.dropdown .menu { overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; min-width: 100% !important; width: auto !important; } .ui.dropdown .scrolling.menu, .play-button.dropdown .scrolling.menu, .download-button.dropdown .scrolling.menu { position: static; overflow-y: auto; border: none; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; min-width: 100% !important; width: auto !important; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.scrolling.dropdown .menu .item.item.item, .ui.dropdown .scrolling.menu > .item.item.item, .play-button.scrolling.dropdown .menu .item.item.item, .play-button.dropdown .scrolling.menu > .item.item.item, .download-button.scrolling.dropdown .menu .item.item.item, .download-button.dropdown .scrolling.menu > .item.item.item { border-top: none; } .ui.scrolling.dropdown .menu .item:first-child, .ui.dropdown .scrolling.menu .item:first-child, .play-button.scrolling.dropdown .menu .item:first-child, .play-button.dropdown .scrolling.menu .item:first-child, .download-button.scrolling.dropdown .menu .item:first-child, .download-button.dropdown .scrolling.menu .item:first-child { border-top: none; } .ui.dropdown > .animating.menu .scrolling.menu, .ui.dropdown > .visible.menu .scrolling.menu, .play-button.dropdown > .animating.menu .scrolling.menu, .play-button.dropdown > .visible.menu .scrolling.menu, .download-button.dropdown > .animating.menu .scrolling.menu, .download-button.dropdown > .visible.menu .scrolling.menu { display: block; } /* Scrollbar in IE */ @media all and (-ms-high-contrast: none) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu, .play-button.scrolling.dropdown .menu, .play-button.dropdown .scrolling.menu, .download-button.scrolling.dropdown .menu, .download-button.dropdown .scrolling.menu { min-width: calc(100% - 17px ); } } @media only screen and (max-width: 767px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu, .play-button.scrolling.dropdown .menu, .play-button.dropdown .scrolling.menu, .download-button.scrolling.dropdown .menu, .download-button.dropdown .scrolling.menu { max-height: 10.28571429rem; } } @media only screen and (min-width: 768px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu, .play-button.scrolling.dropdown .menu, .play-button.dropdown .scrolling.menu, .download-button.scrolling.dropdown .menu, .download-button.dropdown .scrolling.menu { max-height: 15.42857143rem; } } @media only screen and (min-width: 992px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu, .play-button.scrolling.dropdown .menu, .play-button.dropdown .scrolling.menu, .download-button.scrolling.dropdown .menu, .download-button.dropdown .scrolling.menu { max-height: 20.57142857rem; } } @media only screen and (min-width: 1920px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu, .play-button.scrolling.dropdown .menu, .play-button.dropdown .scrolling.menu, .download-button.scrolling.dropdown .menu, .download-button.dropdown .scrolling.menu { max-height: 20.57142857rem; } } /*-------------- Simple ---------------*/ /* Displays without javascript */ .ui.simple.dropdown .menu:before, .ui.simple.dropdown .menu:after, .play-button.simple.dropdown .menu:before, .play-button.simple.dropdown .menu:after, .download-button.simple.dropdown .menu:before, .download-button.simple.dropdown .menu:after { display: none; } .ui.simple.dropdown .menu, .play-button.simple.dropdown .menu, .download-button.simple.dropdown .menu { position: absolute; display: block; overflow: hidden; top: -9999px !important; opacity: 0; width: 0; height: 0; transition: opacity 0.1s ease; } .ui.simple.active.dropdown, .ui.simple.dropdown:hover, .play-button.simple.active.dropdown, .play-button.simple.dropdown:hover, .download-button.simple.active.dropdown, .download-button.simple.dropdown:hover { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } .ui.simple.active.dropdown > .menu, .ui.simple.dropdown:hover > .menu, .play-button.simple.active.dropdown > .menu, .play-button.simple.dropdown:hover > .menu, .download-button.simple.active.dropdown > .menu, .download-button.simple.dropdown:hover > .menu { overflow: visible; width: auto; height: auto; top: 100% !important; opacity: 1; } .ui.simple.dropdown > .menu > .item:active > .menu, .ui.simple.dropdown:hover > .menu > .item:hover > .menu, .play-button.simple.dropdown > .menu > .item:active > .menu, .play-button.simple.dropdown:hover > .menu > .item:hover > .menu, .download-button.simple.dropdown > .menu > .item:active > .menu, .download-button.simple.dropdown:hover > .menu > .item:hover > .menu { overflow: visible; width: auto; height: auto; top: 0% !important; left: 100% !important; opacity: 1; } .ui.simple.disabled.dropdown:hover .menu, .play-button.simple.disabled.dropdown:hover .menu, .download-button.simple.disabled.dropdown:hover .menu { display: none; height: 0px; width: 0px; overflow: hidden; } /* Visible */ .ui.simple.visible.dropdown > .menu, .play-button.simple.visible.dropdown > .menu, .download-button.simple.visible.dropdown > .menu { display: block; } /*-------------- Fluid ---------------*/ .ui.fluid.dropdown, .play-button.fluid.dropdown, .download-button.fluid.dropdown { display: block; width: 100%; min-width: 0em; } .ui.fluid.dropdown > .dropdown.icon, .play-button.fluid.dropdown > .dropdown.icon, .download-button.fluid.dropdown > .dropdown.icon { float: right; } /*-------------- Floating ---------------*/ .ui.floating.dropdown .menu, .play-button.floating.dropdown .menu, .download-button.floating.dropdown .menu { left: 0; right: auto; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; border-radius: 0.28571429rem !important; } .ui.floating.dropdown > .menu, .play-button.floating.dropdown > .menu, .download-button.floating.dropdown > .menu { margin-top: 0.5em !important; border-radius: 0.28571429rem !important; } /*-------------- Pointing ---------------*/ .ui.pointing.dropdown > .menu, .play-button.pointing.dropdown > .menu, .download-button.pointing.dropdown > .menu { top: 100%; margin-top: 0.78571429rem; border-radius: 0.28571429rem; } .ui.pointing.dropdown > .menu:after, .play-button.pointing.dropdown > .menu:after, .download-button.pointing.dropdown > .menu:after { display: block; position: absolute; pointer-events: none; content: ''; visibility: visible; transform: rotate(45deg); width: 0.5em; height: 0.5em; box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); background: #FFFFFF; z-index: 2; } .ui.pointing.dropdown > .menu:after, .play-button.pointing.dropdown > .menu:after, .download-button.pointing.dropdown > .menu:after { top: -0.25em; left: 50%; margin: 0em 0em 0em -0.25em; } /* Top Left Pointing */ .ui.top.left.pointing.dropdown > .menu, .play-button.top.left.pointing.dropdown > .menu, .download-button.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu, .play-button.top.left.pointing.dropdown > .menu, .download-button.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu:after, .play-button.top.left.pointing.dropdown > .menu:after, .download-button.top.left.pointing.dropdown > .menu:after { top: -0.25em; left: 1em; right: auto; margin: 0em; transform: rotate(45deg); } /* Top Right Pointing */ .ui.top.right.pointing.dropdown > .menu, .play-button.top.right.pointing.dropdown > .menu, .download-button.top.right.pointing.dropdown > .menu { top: 100%; bottom: auto; right: 0%; left: auto; margin: 1em 0em 0em; } .ui.top.pointing.dropdown > .left.menu:after, .ui.top.right.pointing.dropdown > .menu:after, .play-button.top.pointing.dropdown > .left.menu:after, .play-button.top.right.pointing.dropdown > .menu:after, .download-button.top.pointing.dropdown > .left.menu:after, .download-button.top.right.pointing.dropdown > .menu:after { top: -0.25em; left: auto !important; right: 1em !important; margin: 0em; transform: rotate(45deg); } /* Left Pointing */ .ui.left.pointing.dropdown > .menu, .play-button.left.pointing.dropdown > .menu, .download-button.left.pointing.dropdown > .menu { top: 0%; left: 100%; right: auto; margin: 0em 0em 0em 1em; } .ui.left.pointing.dropdown > .menu:after, .play-button.left.pointing.dropdown > .menu:after, .download-button.left.pointing.dropdown > .menu:after { top: 1em; left: -0.25em; margin: 0em 0em 0em 0em; transform: rotate(-45deg); } .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu, .play-button.left:not(.top):not(.bottom).pointing.dropdown > .left.menu, .download-button.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { left: auto !important; right: 100% !important; margin: 0em 1em 0em 0em; } .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after, .play-button.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after, .download-button.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { top: 1em; left: auto; right: -0.25em; margin: 0em 0em 0em 0em; transform: rotate(135deg); } /* Right Pointing */ .ui.right.pointing.dropdown > .menu, .play-button.right.pointing.dropdown > .menu, .download-button.right.pointing.dropdown > .menu { top: 0%; left: auto; right: 100%; margin: 0em 1em 0em 0em; } .ui.right.pointing.dropdown > .menu:after, .play-button.right.pointing.dropdown > .menu:after, .download-button.right.pointing.dropdown > .menu:after { top: 1em; left: auto; right: -0.25em; margin: 0em 0em 0em 0em; transform: rotate(135deg); } /* Bottom Pointing */ .ui.bottom.pointing.dropdown > .menu, .play-button.bottom.pointing.dropdown > .menu, .download-button.bottom.pointing.dropdown > .menu { top: auto; bottom: 100%; left: 0%; right: auto; margin: 0em 0em 1em; } .ui.bottom.pointing.dropdown > .menu:after, .play-button.bottom.pointing.dropdown > .menu:after, .download-button.bottom.pointing.dropdown > .menu:after { top: auto; bottom: -0.25em; right: auto; margin: 0em; transform: rotate(-135deg); } /* Reverse Sub-Menu Direction */ .ui.bottom.pointing.dropdown > .menu .menu, .play-button.bottom.pointing.dropdown > .menu .menu, .download-button.bottom.pointing.dropdown > .menu .menu { top: auto !important; bottom: 0px !important; } /* Bottom Left */ .ui.bottom.left.pointing.dropdown > .menu, .play-button.bottom.left.pointing.dropdown > .menu, .download-button.bottom.left.pointing.dropdown > .menu { left: 0%; right: auto; } .ui.bottom.left.pointing.dropdown > .menu:after, .play-button.bottom.left.pointing.dropdown > .menu:after, .download-button.bottom.left.pointing.dropdown > .menu:after { left: 1em; right: auto; } /* Bottom Right */ .ui.bottom.right.pointing.dropdown > .menu, .play-button.bottom.right.pointing.dropdown > .menu, .download-button.bottom.right.pointing.dropdown > .menu { right: 0%; left: auto; } .ui.bottom.right.pointing.dropdown > .menu:after, .play-button.bottom.right.pointing.dropdown > .menu:after, .download-button.bottom.right.pointing.dropdown > .menu:after { left: auto; right: 1em; } /* Upward pointing */ .ui.pointing.upward.dropdown .menu, .ui.top.pointing.upward.dropdown .menu, .play-button.pointing.upward.dropdown .menu, .play-button.top.pointing.upward.dropdown .menu, .download-button.pointing.upward.dropdown .menu, .download-button.top.pointing.upward.dropdown .menu { top: auto !important; bottom: 100% !important; margin: 0em 0em 0.78571429rem; border-radius: 0.28571429rem; } .ui.pointing.upward.dropdown .menu:after, .ui.top.pointing.upward.dropdown .menu:after, .play-button.pointing.upward.dropdown .menu:after, .play-button.top.pointing.upward.dropdown .menu:after, .download-button.pointing.upward.dropdown .menu:after, .download-button.top.pointing.upward.dropdown .menu:after { top: 100% !important; bottom: auto !important; box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); margin: -0.25em 0em 0em; } /* Right Pointing Upward */ .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu, .play-button.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu, .download-button.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { top: auto !important; bottom: 0 !important; margin: 0em 1em 0em 0em; } .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after, .play-button.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after, .download-button.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { top: auto !important; bottom: 0 !important; margin: 0em 0em 1em 0em; box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); } /* Left Pointing Upward */ .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu, .play-button.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu, .download-button.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { top: auto !important; bottom: 0 !important; margin: 0em 0em 0em 1em; } .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after, .play-button.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after, .download-button.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { top: auto !important; bottom: 0 !important; margin: 0em 0em 1em 0em; box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); } /******************************* Theme Overrides *******************************/ /* Dropdown Carets */ @font-face { font-family: 'Dropdown'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } .ui.dropdown > .dropdown.icon, .play-button.dropdown > .dropdown.icon, .download-button.dropdown > .dropdown.icon { font-family: 'Dropdown'; line-height: 1; height: 1em; width: 1.23em; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.dropdown > .dropdown.icon, .play-button.dropdown > .dropdown.icon, .download-button.dropdown > .dropdown.icon { width: auto; } .ui.dropdown > .dropdown.icon:before, .play-button.dropdown > .dropdown.icon:before, .download-button.dropdown > .dropdown.icon:before { content: '\f0d7'; } /* Sub Menu */ .ui.dropdown .menu .item .dropdown.icon:before, .play-button.dropdown .menu .item .dropdown.icon:before, .download-button.dropdown .menu .item .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } .ui.dropdown .item .left.dropdown.icon:before, .ui.dropdown .left.menu .item .dropdown.icon:before, .play-button.dropdown .item .left.dropdown.icon:before, .play-button.dropdown .left.menu .item .dropdown.icon:before, .download-button.dropdown .item .left.dropdown.icon:before, .download-button.dropdown .left.menu .item .dropdown.icon:before { content: "\f0d9" /*rtl:"\f0da"*/; } /* Vertical Menu Dropdown */ .ui.vertical.menu .dropdown.item > .dropdown.icon:before, .play-button.vertical.menu .dropdown.item > .dropdown.icon:before, .download-button.vertical.menu .dropdown.item > .dropdown.icon:before { content: "\f0da" /*rtl:"\f0d9"*/; } /* Icons for Reference .dropdown.down.icon { content: "\f0d7"; } .dropdown.up.icon { content: "\f0d8"; } .dropdown.left.icon { content: "\f0d9"; } .dropdown.icon.icon { content: "\f0da"; } */ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Video * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Video *******************************/ /*------------------- Element --------------------*/ /* Simple */ /* Placeholder */ /* Placeholder Overlayed Background */ /* Icon */ /*------------------- States --------------------*/ /* Hover */ /*------------------- Variations --------------------*/ /* Aspect Ratios */ /* Packaged Theme */ /******************************* Video *******************************/ /*------------------- Element --------------------*/ /* Simple */ /* Placeholder */ /* Placeholder Overlayed Background */ /* Icon */ /*------------------- States --------------------*/ /* Hover */ /*------------------- Variations --------------------*/ /* Aspect Ratios */ /* Site Theme */ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Types *******************************/ .ui.embed, .play-button.embed, .download-button.embed { position: relative; max-width: 100%; height: 0px; overflow: hidden; background: #DCDDDE; padding-bottom: 56.25%; } /*----------------- Embedded Content ------------------*/ .ui.embed iframe, .ui.embed embed, .ui.embed object, .play-button.embed iframe, .play-button.embed embed, .play-button.embed object, .download-button.embed iframe, .download-button.embed embed, .download-button.embed object { position: absolute; border: none; width: 100%; height: 100%; top: 0px; left: 0px; margin: 0em; padding: 0em; } /*----------------- Embed ------------------*/ .ui.embed > .embed, .play-button.embed > .embed, .download-button.embed > .embed { display: none; } /*-------------- Placeholder ---------------*/ .ui.embed > .placeholder, .play-button.embed > .placeholder, .download-button.embed > .placeholder { position: absolute; cursor: pointer; top: 0px; left: 0px; display: block; width: 100%; height: 100%; background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); } /*-------------- Icon ---------------*/ .ui.embed > .icon, .play-button.embed > .icon, .download-button.embed > .icon { cursor: pointer; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; } .ui.embed > .icon:after, .play-button.embed > .icon:after, .download-button.embed > .icon:after { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 3; content: ''; background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); opacity: 0.5; transition: opacity 0.5s ease; } .ui.embed > .icon:before, .play-button.embed > .icon:before, .download-button.embed > .icon:before { position: absolute; top: 50%; left: 50%; z-index: 4; transform: translateX(-50%) translateY(-50%); color: #FFFFFF; font-size: 6rem; text-shadow: 0px 2px 10px rgba(34, 36, 38, 0.2); transition: opacity 0.5s ease, color 0.5s ease; z-index: 10; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.embed .icon:hover:after, .play-button.embed .icon:hover:after, .download-button.embed .icon:hover:after { background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); opacity: 1; } .ui.embed .icon:hover:before, .play-button.embed .icon:hover:before, .download-button.embed .icon:hover:before { color: #FFFFFF; } /*-------------- Active ---------------*/ .ui.active.embed > .icon, .ui.active.embed > .placeholder, .play-button.active.embed > .icon, .play-button.active.embed > .placeholder, .download-button.active.embed > .icon, .download-button.active.embed > .placeholder { display: none; } .ui.active.embed > .embed, .play-button.active.embed > .embed, .download-button.active.embed > .embed { display: block; } /******************************* Video Overrides *******************************/ /******************************* Site Overrides *******************************/ /******************************* Variations *******************************/ .ui.square.embed, .play-button.square.embed, .download-button.square.embed { padding-bottom: 100%; } .ui[class*="4:3"].embed, .play-button[class*="4:3"].embed, .download-button[class*="4:3"].embed { padding-bottom: 75%; } .ui[class*="16:9"].embed, .play-button[class*="16:9"].embed, .download-button[class*="16:9"].embed { padding-bottom: 56.25%; } .ui[class*="21:9"].embed, .play-button[class*="21:9"].embed, .download-button[class*="21:9"].embed { padding-bottom: 42.85714286%; } /*! * # Semantic UI - Modal * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Modal *******************************/ /* Close Icon */ /* Header */ /* Content */ /* Image / Description */ /* Modal Actions */ /* Inner Close Position (Tablet/Mobile) */ /* Mobile Positions */ /* Responsive Widths */ /* Coupling */ /*------------------- States --------------------*/ /*------------------- Types --------------------*/ /* Basic */ /* Scrolling Margin */ /* Scrolling Content */ /*------------------- Variations --------------------*/ /* Size Widths */ /* Derived Responsive Sizes */ /* Packaged Theme */ /******************************* Modal *******************************/ /* Close Icon */ /* Header */ /* Content */ /* Image / Description */ /* Modal Actions */ /* Inner Close Position (Tablet/Mobile) */ /* Mobile Positions */ /* Responsive Widths */ /* Coupling */ /*------------------- States --------------------*/ /*------------------- Types --------------------*/ /* Basic */ /* Scrolling Margin */ /* Scrolling Content */ /*------------------- Variations --------------------*/ /* Size Widths */ /* Derived Responsive Sizes */ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Modal *******************************/ .ui.modal, .play-button.modal, .download-button.modal { display: none; position: fixed; z-index: 1001; top: 50%; left: 50%; text-align: left; background: #FFFFFF; border: none; box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2); transform-origin: 50% 25%; border-radius: 0.28571429rem; user-select: text; will-change: top, left, margin, transform, opacity; } .ui.modal > :first-child:not(.icon), .ui.modal > .icon:first-child + *, .play-button.modal > :first-child:not(.icon), .play-button.modal > .icon:first-child + *, .download-button.modal > :first-child:not(.icon), .download-button.modal > .icon:first-child + * { border-top-left-radius: 0.28571429rem; border-top-right-radius: 0.28571429rem; } .ui.modal > :last-child, .play-button.modal > :last-child, .download-button.modal > :last-child { border-bottom-left-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem; } /******************************* Content *******************************/ /*-------------- Close ---------------*/ .ui.modal > .close, .play-button.modal > .close, .download-button.modal > .close { cursor: pointer; position: absolute; top: -2.5rem; right: -2.5rem; z-index: 1; opacity: 0.8; font-size: 1.25em; color: #FFFFFF; width: 2.25rem; height: 2.25rem; padding: 0.625rem 0rem 0rem 0rem; } .ui.modal > .close:hover, .play-button.modal > .close:hover, .download-button.modal > .close:hover { opacity: 1; } /*-------------- Header ---------------*/ .ui.modal > .header, .play-button.modal > .header, .download-button.modal > .header { display: block; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; background: #FFFFFF; margin: 0em; padding: 1.25rem 1.5rem; box-shadow: none; color: rgba(0, 0, 0, 0.85); border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.modal > .header:not(.ui), .play-button.modal > .header:not(.ui), .download-button.modal > .header:not(.ui) { font-size: 1.42857143rem; line-height: 1.28571429em; font-weight: bold; } /*-------------- Content ---------------*/ .ui.modal > .content, .play-button.modal > .content, .download-button.modal > .content { display: block; width: 100%; font-size: 1em; line-height: 1.4; padding: 1.5rem; background: #FFFFFF; } .ui.modal > .image.content, .play-button.modal > .image.content, .download-button.modal > .image.content { display: flex; flex-direction: row; } /* Image */ .ui.modal > .content > .image, .play-button.modal > .content > .image, .download-button.modal > .content > .image { display: block; flex: 0 1 auto; width: ''; align-self: top; } .ui.modal > [class*="top aligned"], .play-button.modal > [class*="top aligned"], .download-button.modal > [class*="top aligned"] { align-self: top; } .ui.modal > [class*="middle aligned"], .play-button.modal > [class*="middle aligned"], .download-button.modal > [class*="middle aligned"] { align-self: middle; } .ui.modal > [class*="stretched"], .play-button.modal > [class*="stretched"], .download-button.modal > [class*="stretched"] { align-self: stretch; } /* Description */ .ui.modal > .content > .description, .play-button.modal > .content > .description, .download-button.modal > .content > .description { display: block; flex: 1 0 auto; min-width: 0px; align-self: top; } .ui.modal > .content > .icon + .description, .ui.modal > .content > .image + .description, .play-button.modal > .content > .icon + .description, .play-button.modal > .content > .image + .description, .download-button.modal > .content > .icon + .description, .download-button.modal > .content > .image + .description { flex: 0 1 auto; min-width: ''; width: auto; padding-left: 2em; } /*rtl:ignore*/ .ui.modal > .content > .image > i.icon, .play-button.modal > .content > .image > i.icon, .download-button.modal > .content > .image > i.icon { margin: 0em; opacity: 1; width: auto; line-height: 1; font-size: 8rem; } /*-------------- Actions ---------------*/ .ui.modal > .actions, .play-button.modal > .actions, .download-button.modal > .actions { background: #F9FAFB; padding: 1rem 1rem; border-top: 1px solid rgba(34, 36, 38, 0.15); text-align: right; } .ui.modal .actions > .button, .play-button.modal .actions > .button, .ui.modal .actions > .play-button, .download-button.modal .actions > .button, .ui.modal .actions > .download-button { margin-left: 0.75em; } /*------------------- Responsive --------------------*/ /* Modal Width */ @media only screen and (max-width: 767px) { .ui.modal, .play-button.modal, .download-button.modal { width: 95%; margin: 0em 0em 0em -47.5%; } } @media only screen and (min-width: 768px) { .ui.modal, .play-button.modal, .download-button.modal { width: 88%; margin: 0em 0em 0em -44%; } } @media only screen and (min-width: 992px) { .ui.modal, .play-button.modal, .download-button.modal { width: 850px; margin: 0em 0em 0em -425px; } } @media only screen and (min-width: 1200px) { .ui.modal, .play-button.modal, .download-button.modal { width: 900px; margin: 0em 0em 0em -450px; } } @media only screen and (min-width: 1920px) { .ui.modal, .play-button.modal, .download-button.modal { width: 950px; margin: 0em 0em 0em -475px; } } /* Tablet and Mobile */ @media only screen and (max-width: 991px) { .ui.modal > .header, .play-button.modal > .header, .download-button.modal > .header { padding-right: 2.25rem; } .ui.modal > .close, .play-button.modal > .close, .download-button.modal > .close { top: 1.0535rem; right: 1rem; color: rgba(0, 0, 0, 0.87); } } /* Mobile */ @media only screen and (max-width: 767px) { .ui.modal > .header, .play-button.modal > .header, .download-button.modal > .header { padding: 0.75rem 1rem !important; padding-right: 2.25rem !important; } .ui.modal > .content, .play-button.modal > .content, .download-button.modal > .content { display: block; padding: 1rem !important; } .ui.modal > .close, .play-button.modal > .close, .download-button.modal > .close { top: 0.5rem !important; right: 0.5rem !important; } /*rtl:ignore*/ .ui.modal .image.content, .play-button.modal .image.content, .download-button.modal .image.content { flex-direction: column; } .ui.modal .content > .image, .play-button.modal .content > .image, .download-button.modal .content > .image { display: block; max-width: 100%; margin: 0em auto !important; text-align: center; padding: 0rem 0rem 1rem !important; } .ui.modal > .content > .image > i.icon, .play-button.modal > .content > .image > i.icon, .download-button.modal > .content > .image > i.icon { font-size: 5rem; text-align: center; } /*rtl:ignore*/ .ui.modal .content > .description, .play-button.modal .content > .description, .download-button.modal .content > .description { display: block; width: 100% !important; margin: 0em !important; padding: 1rem 0rem !important; box-shadow: none; } /* Let Buttons Stack */ .ui.modal > .actions, .play-button.modal > .actions, .download-button.modal > .actions { padding: 1rem 1rem 0rem !important; } .ui.modal .actions > .buttons, .ui.modal .actions > .button, .play-button.modal .actions > .buttons, .play-button.modal .actions > .button, .ui.modal .actions > .play-button, .download-button.modal .actions > .buttons, .download-button.modal .actions > .button, .ui.modal .actions > .download-button { margin-bottom: 1rem; } } /*-------------- Coupling ---------------*/ .ui.inverted.dimmer > .ui.modal, .play-button.inverted.dimmer > .play-button.modal, .download-button.inverted.dimmer > .download-button.modal { box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); } /******************************* Types *******************************/ .ui.basic.modal, .play-button.basic.modal, .download-button.basic.modal { background-color: transparent; border: none; border-radius: 0em; box-shadow: none !important; color: #FFFFFF; } .ui.basic.modal > .header, .ui.basic.modal > .content, .ui.basic.modal > .actions, .play-button.basic.modal > .header, .play-button.basic.modal > .content, .play-button.basic.modal > .actions, .download-button.basic.modal > .header, .download-button.basic.modal > .content, .download-button.basic.modal > .actions { background-color: transparent; } .ui.basic.modal > .header, .play-button.basic.modal > .header, .download-button.basic.modal > .header { color: #FFFFFF; } .ui.basic.modal > .close, .play-button.basic.modal > .close, .download-button.basic.modal > .close { top: 1rem; right: 1.5rem; } .ui.inverted.dimmer > .basic.modal, .play-button.inverted.dimmer > .basic.modal, .download-button.inverted.dimmer > .basic.modal { color: rgba(0, 0, 0, 0.87); } .ui.inverted.dimmer > .ui.basic.modal > .header, .play-button.inverted.dimmer > .play-button.basic.modal > .header, .download-button.inverted.dimmer > .download-button.basic.modal > .header { color: rgba(0, 0, 0, 0.85); } /* Tablet and Mobile */ @media only screen and (max-width: 991px) { .ui.basic.modal > .close, .play-button.basic.modal > .close, .download-button.basic.modal > .close { color: #FFFFFF; } } /******************************* States *******************************/ .ui.loading.modal, .play-button.loading.modal, .download-button.loading.modal { display: block; visibility: hidden; z-index: -1; } .ui.active.modal, .play-button.active.modal, .download-button.active.modal { display: block; } /******************************* Variations *******************************/ /*-------------- Scrolling ---------------*/ /* A modal that cannot fit on the page */ .scrolling.dimmable.dimmed { overflow: hidden; } .scrolling.dimmable.dimmed > .dimmer { overflow: auto; -webkit-overflow-scrolling: touch; } .scrolling.dimmable > .dimmer { position: fixed; } .modals.dimmer .ui.scrolling.modal, .modals.dimmer .play-button.scrolling.modal, .modals.dimmer .download-button.scrolling.modal { position: static !important; margin: 3.5rem auto !important; } /* undetached scrolling */ .scrolling.undetached.dimmable.dimmed { overflow: auto; -webkit-overflow-scrolling: touch; } .scrolling.undetached.dimmable.dimmed > .dimmer { overflow: hidden; } .scrolling.undetached.dimmable .ui.scrolling.modal, .scrolling.undetached.dimmable .play-button.scrolling.modal, .scrolling.undetached.dimmable .download-button.scrolling.modal { position: absolute; left: 50%; margin-top: 3.5rem !important; } /* Coupling with Sidebar */ .undetached.dimmable.dimmed > .pusher { z-index: auto; } @media only screen and (max-width: 991px) { .modals.dimmer .ui.scrolling.modal, .modals.dimmer .play-button.scrolling.modal, .modals.dimmer .download-button.scrolling.modal { margin-top: 1rem !important; margin-bottom: 1rem !important; } } /* Scrolling Content */ .ui.modal .scrolling.content, .play-button.modal .scrolling.content, .download-button.modal .scrolling.content { max-height: calc(70vh); overflow: auto; } /*-------------- Full Screen ---------------*/ .ui.fullscreen.modal, .play-button.fullscreen.modal, .download-button.fullscreen.modal { width: 95% !important; left: 2.5% !important; margin: 1em auto; } .ui.fullscreen.scrolling.modal, .play-button.fullscreen.scrolling.modal, .download-button.fullscreen.scrolling.modal { left: 0em !important; } .ui.fullscreen.modal > .header, .play-button.fullscreen.modal > .header, .download-button.fullscreen.modal > .header { padding-right: 2.25rem; } .ui.fullscreen.modal > .close, .play-button.fullscreen.modal > .close, .download-button.fullscreen.modal > .close { top: 1.0535rem; right: 1rem; color: rgba(0, 0, 0, 0.87); } /*-------------- Size ---------------*/ .ui.modal, .play-button.modal, .download-button.modal { font-size: 1rem; } /* Mini */ .ui.mini.modal > .header:not(.ui), .play-button.mini.modal > .header:not(.ui), .download-button.mini.modal > .header:not(.ui) { font-size: 1.3em; } /* Mini Modal Width */ @media only screen and (max-width: 767px) { .ui.mini.modal, .play-button.mini.modal, .download-button.mini.modal { width: 95%; margin: 0em 0em 0em -47.5%; } } @media only screen and (min-width: 768px) { .ui.mini.modal, .play-button.mini.modal, .download-button.mini.modal { width: 35.2%; margin: 0em 0em 0em -17.6%; } } @media only screen and (min-width: 992px) { .ui.mini.modal, .play-button.mini.modal, .download-button.mini.modal { width: 340px; margin: 0em 0em 0em -170px; } } @media only screen and (min-width: 1200px) { .ui.mini.modal, .play-button.mini.modal, .download-button.mini.modal { width: 360px; margin: 0em 0em 0em -180px; } } @media only screen and (min-width: 1920px) { .ui.mini.modal, .play-button.mini.modal, .download-button.mini.modal { width: 380px; margin: 0em 0em 0em -190px; } } /* mini */ .ui.small.modal > .header:not(.ui), .play-button.small.modal > .header:not(.ui), .download-button.small.modal > .header:not(.ui) { font-size: 1.3em; } /* Tiny Modal Width */ @media only screen and (max-width: 767px) { .ui.tiny.modal, .play-button.tiny.modal, .download-button.tiny.modal { width: 95%; margin: 0em 0em 0em -47.5%; } } @media only screen and (min-width: 768px) { .ui.tiny.modal, .play-button.tiny.modal, .download-button.tiny.modal { width: 52.8%; margin: 0em 0em 0em -26.4%; } } @media only screen and (min-width: 992px) { .ui.tiny.modal, .play-button.tiny.modal, .download-button.tiny.modal { width: 510px; margin: 0em 0em 0em -255px; } } @media only screen and (min-width: 1200px) { .ui.tiny.modal, .play-button.tiny.modal, .download-button.tiny.modal { width: 540px; margin: 0em 0em 0em -270px; } } @media only screen and (min-width: 1920px) { .ui.tiny.modal, .play-button.tiny.modal, .download-button.tiny.modal { width: 570px; margin: 0em 0em 0em -285px; } } /* Small */ .ui.small.modal > .header:not(.ui), .play-button.small.modal > .header:not(.ui), .download-button.small.modal > .header:not(.ui) { font-size: 1.3em; } /* Small Modal Width */ @media only screen and (max-width: 767px) { .ui.small.modal, .play-button.small.modal, .download-button.small.modal { width: 95%; margin: 0em 0em 0em -47.5%; } } @media only screen and (min-width: 768px) { .ui.small.modal, .play-button.small.modal, .download-button.small.modal { width: 70.4%; margin: 0em 0em 0em -35.2%; } } @media only screen and (min-width: 992px) { .ui.small.modal, .play-button.small.modal, .download-button.small.modal { width: 680px; margin: 0em 0em 0em -340px; } } @media only screen and (min-width: 1200px) { .ui.small.modal, .play-button.small.modal, .download-button.small.modal { width: 720px; margin: 0em 0em 0em -360px; } } @media only screen and (min-width: 1920px) { .ui.small.modal, .play-button.small.modal, .download-button.small.modal { width: 760px; margin: 0em 0em 0em -380px; } } /* Large Modal Width */ .ui.large.modal > .header, .play-button.large.modal > .header, .download-button.large.modal > .header { font-size: 1.6em; } @media only screen and (max-width: 767px) { .ui.large.modal, .play-button.large.modal, .download-button.large.modal { width: 95%; margin: 0em 0em 0em -47.5%; } } @media only screen and (min-width: 768px) { .ui.large.modal, .play-button.large.modal, .download-button.large.modal { width: 88%; margin: 0em 0em 0em -44%; } } @media only screen and (min-width: 992px) { .ui.large.modal, .play-button.large.modal, .download-button.large.modal { width: 1020px; margin: 0em 0em 0em -510px; } } @media only screen and (min-width: 1200px) { .ui.large.modal, .play-button.large.modal, .download-button.large.modal { width: 1080px; margin: 0em 0em 0em -540px; } } @media only screen and (min-width: 1920px) { .ui.large.modal, .play-button.large.modal, .download-button.large.modal { width: 1140px; margin: 0em 0em 0em -570px; } } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Nag * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Nag *******************************/ /*-------------- Collection ---------------*/ /*-------------- Elements ---------------*/ /* Title */ /*-------------- States ---------------*/ /* Hover */ /*-------------- Variations ---------------*/ /* Top / Bottom */ /* Inverted */ /*-------------- Plural ---------------*/ /* Packaged Theme */ /******************************* Nag *******************************/ /*-------------- Collection ---------------*/ /*-------------- Elements ---------------*/ /* Title */ /*-------------- States ---------------*/ /* Hover */ /*-------------- Variations ---------------*/ /* Top / Bottom */ /* Inverted */ /*-------------- Plural ---------------*/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Nag *******************************/ .ui.nag, .play-button.nag, .download-button.nag { display: none; opacity: 0.95; position: relative; top: 0em; left: 0px; z-index: 999; min-height: 0em; width: 100%; margin: 0em; padding: 0.75em 1em; background: #555555; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); font-size: 1rem; text-align: center; color: rgba(0, 0, 0, 0.87); border-radius: 0em 0em 0.28571429rem 0.28571429rem; transition: 0.2s background ease; } a.ui.nag, a.play-button.nag, a.download-button.nag { cursor: pointer; } .ui.nag > .title, .play-button.nag > .title, .download-button.nag > .title { display: inline-block; margin: 0em 0.5em; color: #FFFFFF; } .ui.nag > .close.icon, .play-button.nag > .close.icon, .download-button.nag > .close.icon { cursor: pointer; opacity: 0.4; position: absolute; top: 50%; right: 1em; font-size: 1em; margin: -0.5em 0em 0em; color: #FFFFFF; transition: opacity 0.2s ease; } /******************************* States *******************************/ /* Hover */ .ui.nag:hover, .play-button.nag:hover, .download-button.nag:hover { background: #555555; opacity: 1; } .ui.nag .close:hover, .play-button.nag .close:hover, .download-button.nag .close:hover { opacity: 1; } /******************************* Variations *******************************/ /*-------------- Static ---------------*/ .ui.overlay.nag, .play-button.overlay.nag, .download-button.overlay.nag { position: absolute; display: block; } /*-------------- Fixed ---------------*/ .ui.fixed.nag, .play-button.fixed.nag, .download-button.fixed.nag { position: fixed; } /*-------------- Bottom ---------------*/ .ui.bottom.nags, .ui.bottom.nag, .play-button.bottom.nags, .play-button.bottom.nag, .download-button.bottom.nags, .download-button.bottom.nag { border-radius: 0.28571429rem 0.28571429rem 0em 0em; top: auto; bottom: 0em; } /*-------------- White ---------------*/ .ui.inverted.nags .nag, .ui.inverted.nag, .play-button.inverted.nags .nag, .play-button.inverted.nag, .download-button.inverted.nags .nag, .download-button.inverted.nag { background-color: #F3F4F5; color: rgba(0, 0, 0, 0.85); } .ui.inverted.nags .nag .close, .ui.inverted.nags .nag .title, .ui.inverted.nag .close, .ui.inverted.nag .title, .play-button.inverted.nags .nag .close, .play-button.inverted.nags .nag .title, .play-button.inverted.nag .close, .play-button.inverted.nag .title, .download-button.inverted.nags .nag .close, .download-button.inverted.nags .nag .title, .download-button.inverted.nag .close, .download-button.inverted.nag .title { color: rgba(0, 0, 0, 0.4); } /******************************* Groups *******************************/ .ui.nags .nag, .play-button.nags .nag, .download-button.nags .nag { border-radius: 0em !important; } .ui.nags .nag:last-child, .play-button.nags .nag:last-child, .download-button.nags .nag:last-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui.bottom.nags .nag:last-child, .play-button.bottom.nags .nag:last-child, .download-button.bottom.nags .nag:last-child { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Popup * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Popup *******************************/ /*------------------- Element --------------------*/ /*------------------- Parts --------------------*/ /* Placement */ /* Header */ /* Content Border */ /* Arrow */ /* Arrow color by position */ /*------------------- Types --------------------*/ /* Tooltip */ /* Inverted */ /* Arrow */ /*------------------- Coupling --------------------*/ /* Grid Inside Popup */ /* (padding * @medium) */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Wide */ /* Inverted */ /* Arrow color by position */ /* Packaged Theme */ /******************************* Popup *******************************/ /*------------------- Element --------------------*/ /*------------------- Parts --------------------*/ /* Placement */ /* Header */ /* Content Border */ /* Arrow */ /* Arrow color by position */ /*------------------- Types --------------------*/ /* Tooltip */ /* Inverted */ /* Arrow */ /*------------------- Coupling --------------------*/ /* Grid Inside Popup */ /* (padding * @medium) */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Wide */ /* Inverted */ /* Arrow color by position */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Popup *******************************/ .ui.popup, .play-button.popup, .download-button.popup { display: none; position: absolute; top: 0px; right: 0px; /* Fixes content being squished when inline (moz only) */ min-width: min-content; z-index: 1900; border: 1px solid #D4D4D5; line-height: 1.4285em; max-width: 250px; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); } .ui.popup > .header, .play-button.popup > .header, .download-button.popup > .header { padding: 0em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.14285714em; line-height: 1.2; font-weight: bold; } .ui.popup > .header + .content, .play-button.popup > .header + .content, .download-button.popup > .header + .content { padding-top: 0.5em; } .ui.popup:before, .play-button.popup:before, .download-button.popup:before { position: absolute; content: ''; width: 0.71428571em; height: 0.71428571em; background: #FFFFFF; transform: rotate(45deg); z-index: 2; box-shadow: 1px 1px 0px 0px #bababc; } /******************************* Types *******************************/ /*-------------- Tooltip ---------------*/ /* Content */ [data-tooltip] { position: relative; } /* Arrow */ [data-tooltip]:before { pointer-events: none; position: absolute; content: ''; font-size: 1rem; width: 0.71428571em; height: 0.71428571em; background: #FFFFFF; transform: rotate(45deg); z-index: 2; box-shadow: 1px 1px 0px 0px #bababc; } /* Popup */ [data-tooltip]:after { pointer-events: none; content: attr(data-tooltip); position: absolute; text-transform: none; text-align: left; white-space: nowrap; font-size: 1rem; border: 1px solid #D4D4D5; line-height: 1.4285em; max-width: none; background: #FFFFFF; padding: 0.833em 1em; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); z-index: 1; } /* Default Position (Top Center) */ [data-tooltip]:not([data-position]):before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } [data-tooltip]:not([data-position]):after { left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 0.5em; } /* Animation */ [data-tooltip]:before, [data-tooltip]:after { pointer-events: none; visibility: hidden; } [data-tooltip]:before { opacity: 0; transform: rotate(45deg) scale(0) !important; transform-origin: center top; transition: all 0.1s ease; } [data-tooltip]:after { opacity: 1; transform-origin: center bottom; transition: all 0.1s ease; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; pointer-events: auto; } [data-tooltip]:hover:before { transform: rotate(45deg) scale(1) !important; opacity: 1; } /* Animation Position */ [data-tooltip]:after, [data-tooltip][data-position="top center"]:after, [data-tooltip][data-position="bottom center"]:after { transform: translateX(-50%) scale(0) !important; } [data-tooltip]:hover:after, [data-tooltip][data-position="bottom center"]:hover:after { transform: translateX(-50%) scale(1) !important; } [data-tooltip][data-position="left center"]:after, [data-tooltip][data-position="right center"]:after { transform: translateY(-50%) scale(0) !important; } [data-tooltip][data-position="left center"]:hover:after, [data-tooltip][data-position="right center"]:hover:after { transform: translateY(-50%) scale(1) !important; } [data-tooltip][data-position="top left"]:after, [data-tooltip][data-position="top right"]:after, [data-tooltip][data-position="bottom left"]:after, [data-tooltip][data-position="bottom right"]:after { transform: scale(0) !important; } [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after, [data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after { transform: scale(1) !important; } /*-------------- Inverted ---------------*/ /* Arrow */ [data-tooltip][data-inverted]:before { box-shadow: none !important; } /* Arrow Position */ [data-tooltip][data-inverted]:before { background: #1B1C1D; } /* Popup */ [data-tooltip][data-inverted]:after { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } [data-tooltip][data-inverted]:after .header { background-color: none; color: #FFFFFF; } /*-------------- Position ---------------*/ /* Top Center */ [data-position="top center"][data-tooltip]:after { top: auto; right: auto; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 0.5em; } [data-position="top center"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 50%; background: #FFFFFF; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Top Left */ [data-position="top left"][data-tooltip]:after { top: auto; right: auto; left: 0; bottom: 100%; margin-bottom: 0.5em; } [data-position="top left"][data-tooltip]:before { top: auto; right: auto; bottom: 100%; left: 1em; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Top Right */ [data-position="top right"][data-tooltip]:after { top: auto; left: auto; right: 0; bottom: 100%; margin-bottom: 0.5em; } [data-position="top right"][data-tooltip]:before { top: auto; left: auto; bottom: 100%; right: 1em; margin-left: -0.07142857rem; margin-bottom: 0.14285714rem; } /* Bottom Center */ [data-position="bottom center"][data-tooltip]:after { bottom: auto; right: auto; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 0.5em; } [data-position="bottom center"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 50%; margin-left: -0.07142857rem; margin-top: 0.14285714rem; } /* Bottom Left */ [data-position="bottom left"][data-tooltip]:after { left: 0; top: 100%; margin-top: 0.5em; } [data-position="bottom left"][data-tooltip]:before { bottom: auto; right: auto; top: 100%; left: 1em; margin-left: -0.07142857rem; margin-top: 0.14285714rem; } /* Bottom Right */ [data-position="bottom right"][data-tooltip]:after { right: 0; top: 100%; margin-top: 0.5em; } [data-position="bottom right"][data-tooltip]:before { bottom: auto; left: auto; top: 100%; right: 1em; margin-left: -0.14285714rem; margin-top: 0.07142857rem; } /* Left Center */ [data-position="left center"][data-tooltip]:after { right: 100%; top: 50%; margin-right: 0.5em; transform: translateY(-50%); } [data-position="left center"][data-tooltip]:before { right: 100%; top: 50%; margin-top: -0.14285714rem; margin-right: -0.07142857rem; } /* Right Center */ [data-position="right center"][data-tooltip]:after { left: 100%; top: 50%; margin-left: 0.5em; transform: translateY(-50%); } [data-position="right center"][data-tooltip]:before { left: 100%; top: 50%; margin-top: -0.07142857rem; margin-left: 0.14285714rem; } /* Arrow */ [data-position~="bottom"][data-tooltip]:before { background: #FFFFFF; box-shadow: -1px -1px 0px 0px #bababc; } [data-position="left center"][data-tooltip]:before { background: #FFFFFF; box-shadow: 1px -1px 0px 0px #bababc; } [data-position="right center"][data-tooltip]:before { background: #FFFFFF; box-shadow: -1px 1px 0px 0px #bababc; } [data-position~="top"][data-tooltip]:before { background: #FFFFFF; } /* Inverted Arrow Color */ [data-inverted][data-position~="bottom"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px -1px 0px 0px #bababc; } [data-inverted][data-position="left center"][data-tooltip]:before { background: #1B1C1D; box-shadow: 1px -1px 0px 0px #bababc; } [data-inverted][data-position="right center"][data-tooltip]:before { background: #1B1C1D; box-shadow: -1px 1px 0px 0px #bababc; } [data-inverted][data-position~="top"][data-tooltip]:before { background: #1B1C1D; } [data-position~="bottom"][data-tooltip]:before { transform-origin: center bottom; } [data-position~="bottom"][data-tooltip]:after { transform-origin: center top; } [data-position="left center"][data-tooltip]:before { transform-origin: top center; } [data-position="left center"][data-tooltip]:after { transform-origin: right center; } [data-position="right center"][data-tooltip]:before { transform-origin: right center; } [data-position="right center"][data-tooltip]:after { transform-origin: left center; } /*-------------- Spacing ---------------*/ .ui.popup, .play-button.popup, .download-button.popup { margin: 0em; } /* Extending from Top */ .ui.top.popup, .play-button.top.popup, .download-button.top.popup { margin: 0em 0em 0.71428571em; } .ui.top.left.popup, .play-button.top.left.popup, .download-button.top.left.popup { transform-origin: left bottom; } .ui.top.center.popup, .play-button.top.center.popup, .download-button.top.center.popup { transform-origin: center bottom; } .ui.top.right.popup, .play-button.top.right.popup, .download-button.top.right.popup { transform-origin: right bottom; } /* Extending from Vertical Center */ .ui.left.center.popup, .play-button.left.center.popup, .download-button.left.center.popup { margin: 0em 0.71428571em 0em 0em; transform-origin: right 50%; } .ui.right.center.popup, .play-button.right.center.popup, .download-button.right.center.popup { margin: 0em 0em 0em 0.71428571em; transform-origin: left 50%; } /* Extending from Bottom */ .ui.bottom.popup, .play-button.bottom.popup, .download-button.bottom.popup { margin: 0.71428571em 0em 0em; } .ui.bottom.left.popup, .play-button.bottom.left.popup, .download-button.bottom.left.popup { transform-origin: left top; } .ui.bottom.center.popup, .play-button.bottom.center.popup, .download-button.bottom.center.popup { transform-origin: center top; } .ui.bottom.right.popup, .play-button.bottom.right.popup, .download-button.bottom.right.popup { transform-origin: right top; } /*-------------- Pointer ---------------*/ /*--- Below ---*/ .ui.bottom.center.popup:before, .play-button.bottom.center.popup:before, .download-button.bottom.center.popup:before { margin-left: -0.30714286em; top: -0.30714286em; left: 50%; right: auto; bottom: auto; box-shadow: -1px -1px 0px 0px #bababc; } .ui.bottom.left.popup, .play-button.bottom.left.popup, .download-button.bottom.left.popup { margin-left: 0em; } /*rtl:rename*/ .ui.bottom.left.popup:before, .play-button.bottom.left.popup:before, .download-button.bottom.left.popup:before { top: -0.30714286em; left: 1em; right: auto; bottom: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #bababc; } .ui.bottom.right.popup, .play-button.bottom.right.popup, .download-button.bottom.right.popup { margin-right: 0em; } /*rtl:rename*/ .ui.bottom.right.popup:before, .play-button.bottom.right.popup:before, .download-button.bottom.right.popup:before { top: -0.30714286em; right: 1em; bottom: auto; left: auto; margin-left: 0em; box-shadow: -1px -1px 0px 0px #bababc; } /*--- Above ---*/ .ui.top.center.popup:before, .play-button.top.center.popup:before, .download-button.top.center.popup:before { top: auto; right: auto; bottom: -0.30714286em; left: 50%; margin-left: -0.30714286em; } .ui.top.left.popup, .play-button.top.left.popup, .download-button.top.left.popup { margin-left: 0em; } /*rtl:rename*/ .ui.top.left.popup:before, .play-button.top.left.popup:before, .download-button.top.left.popup:before { bottom: -0.30714286em; left: 1em; top: auto; right: auto; margin-left: 0em; } .ui.top.right.popup, .play-button.top.right.popup, .download-button.top.right.popup { margin-right: 0em; } /*rtl:rename*/ .ui.top.right.popup:before, .play-button.top.right.popup:before, .download-button.top.right.popup:before { bottom: -0.30714286em; right: 1em; top: auto; left: auto; margin-left: 0em; } /*--- Left Center ---*/ /*rtl:rename*/ .ui.left.center.popup:before, .play-button.left.center.popup:before, .download-button.left.center.popup:before { top: 50%; right: -0.30714286em; bottom: auto; left: auto; margin-top: -0.30714286em; box-shadow: 1px -1px 0px 0px #bababc; } /*--- Right Center ---*/ /*rtl:rename*/ .ui.right.center.popup:before, .play-button.right.center.popup:before, .download-button.right.center.popup:before { top: 50%; left: -0.30714286em; bottom: auto; right: auto; margin-top: -0.30714286em; box-shadow: -1px 1px 0px 0px #bababc; } /* Arrow Color By Location */ .ui.bottom.popup:before, .play-button.bottom.popup:before, .download-button.bottom.popup:before { background: #FFFFFF; } .ui.right.center.popup:before, .ui.left.center.popup:before, .play-button.right.center.popup:before, .play-button.left.center.popup:before, .download-button.right.center.popup:before, .download-button.left.center.popup:before { background: #FFFFFF; } .ui.top.popup:before, .play-button.top.popup:before, .download-button.top.popup:before { background: #FFFFFF; } /* Inverted Arrow Color */ .ui.inverted.bottom.popup:before, .play-button.inverted.bottom.popup:before, .download-button.inverted.bottom.popup:before { background: #1B1C1D; } .ui.inverted.right.center.popup:before, .ui.inverted.left.center.popup:before, .play-button.inverted.right.center.popup:before, .play-button.inverted.left.center.popup:before, .download-button.inverted.right.center.popup:before, .download-button.inverted.left.center.popup:before { background: #1B1C1D; } .ui.inverted.top.popup:before, .play-button.inverted.top.popup:before, .download-button.inverted.top.popup:before { background: #1B1C1D; } /******************************* Coupling *******************************/ /* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded), .play-button.popup > .play-button.grid:not(.padded), .download-button.popup > .download-button.grid:not(.padded) { width: calc(100% + 1.75rem); margin: -0.7rem -0.875rem; } /******************************* States *******************************/ .ui.loading.popup, .play-button.loading.popup, .download-button.loading.popup { display: block; visibility: hidden; z-index: -1; } .ui.animating.popup, .ui.visible.popup, .play-button.animating.popup, .play-button.visible.popup, .download-button.animating.popup, .download-button.visible.popup { display: block; } .ui.visible.popup, .play-button.visible.popup, .download-button.visible.popup { transform: translateZ(0px); backface-visibility: hidden; } /******************************* Variations *******************************/ /*-------------- Basic ---------------*/ .ui.basic.popup:before, .play-button.basic.popup:before, .download-button.basic.popup:before { display: none; } /*-------------- Wide ---------------*/ .ui.wide.popup, .play-button.wide.popup, .download-button.wide.popup { max-width: 350px; } .ui[class*="very wide"].popup, .play-button[class*="very wide"].popup, .download-button[class*="very wide"].popup { max-width: 550px; } @media only screen and (max-width: 767px) { .ui.wide.popup, .ui[class*="very wide"].popup, .play-button.wide.popup, .play-button[class*="very wide"].popup, .download-button.wide.popup, .download-button[class*="very wide"].popup { max-width: 250px; } } /*-------------- Fluid ---------------*/ .ui.fluid.popup, .play-button.fluid.popup, .download-button.fluid.popup { width: 100%; max-width: none; } /*-------------- Colors ---------------*/ /* Inverted colors */ .ui.inverted.popup, .play-button.inverted.popup, .download-button.inverted.popup { background: #1B1C1D; color: #FFFFFF; border: none; box-shadow: none; } .ui.inverted.popup .header, .play-button.inverted.popup .header, .download-button.inverted.popup .header { background-color: none; color: #FFFFFF; } .ui.inverted.popup:before, .play-button.inverted.popup:before, .download-button.inverted.popup:before { background-color: #1B1C1D; box-shadow: none !important; } /*-------------- Flowing ---------------*/ .ui.flowing.popup, .play-button.flowing.popup, .download-button.flowing.popup { max-width: none; } /*-------------- Sizes ---------------*/ .ui.mini.popup, .play-button.mini.popup, .download-button.mini.popup { font-size: 0.78571429rem; } .ui.tiny.popup, .play-button.tiny.popup, .download-button.tiny.popup { font-size: 0.85714286rem; } .ui.small.popup, .play-button.small.popup, .download-button.small.popup { font-size: 0.92857143rem; } .ui.popup, .play-button.popup, .download-button.popup { font-size: 1rem; } .ui.large.popup, .play-button.large.popup, .download-button.large.popup { font-size: 1.14285714rem; } .ui.huge.popup, .play-button.huge.popup, .download-button.huge.popup { font-size: 1.42857143rem; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Progress Bar * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Progress *******************************/ /*------------------- Element --------------------*/ /* Bar */ /* Progress Bar Label */ /* Label */ /*------------------- Types --------------------*/ /*------------------- States --------------------*/ /* Active */ /*------------------- Variations --------------------*/ /* Attached */ /* Inverted */ /* Sizing */ /* Packaged Theme */ /******************************* Progress *******************************/ /*------------------- Element --------------------*/ /* Bar */ /* Progress Bar Label */ /* Label */ /*------------------- Types --------------------*/ /*------------------- States --------------------*/ /* Active */ /*------------------- Variations --------------------*/ /* Attached */ /* Inverted */ /* Sizing */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Progress *******************************/ .ui.progress, .play-button.progress, .download-button.progress { position: relative; display: block; max-width: 100%; border: none; margin: 1em 0em 2.5em; box-shadow: none; background: rgba(0, 0, 0, 0.1); padding: 0em; border-radius: 0.28571429rem; } .ui.progress:first-child, .play-button.progress:first-child, .download-button.progress:first-child { margin: 0em 0em 2.5em; } .ui.progress:last-child, .play-button.progress:last-child, .download-button.progress:last-child { margin: 0em 0em 1.5em; } /******************************* Content *******************************/ /* Activity Bar */ .ui.progress .bar, .play-button.progress .bar, .download-button.progress .bar { display: block; line-height: 1; position: relative; width: 0%; min-width: 2em; background: #888888; border-radius: 0.28571429rem; transition: width 0.1s ease, background-color 0.1s ease; } /* Percent Complete */ .ui.progress .bar > .progress, .play-button.progress .bar > .progress, .download-button.progress .bar > .progress { white-space: nowrap; position: absolute; width: auto; font-size: 0.92857143em; top: 50%; right: 0.5em; left: auto; bottom: auto; color: rgba(255, 255, 255, 0.7); text-shadow: none; margin-top: -0.5em; font-weight: bold; text-align: left; } /* Label */ .ui.progress > .label, .play-button.progress > .label, .download-button.progress > .label { position: absolute; width: 100%; font-size: 1em; top: 100%; right: auto; left: 0%; bottom: auto; color: rgba(0, 0, 0, 0.87); font-weight: bold; text-shadow: none; margin-top: 0.2em; text-align: center; transition: color 0.4s ease; } /******************************* Types *******************************/ /* Indicating */ .ui.indicating.progress[data-percent^="1"] .bar, .ui.indicating.progress[data-percent^="2"] .bar, .play-button.indicating.progress[data-percent^="1"] .bar, .play-button.indicating.progress[data-percent^="2"] .bar, .download-button.indicating.progress[data-percent^="1"] .bar, .download-button.indicating.progress[data-percent^="2"] .bar { background-color: #D95C5C; } .ui.indicating.progress[data-percent^="3"] .bar, .play-button.indicating.progress[data-percent^="3"] .bar, .download-button.indicating.progress[data-percent^="3"] .bar { background-color: #EFBC72; } .ui.indicating.progress[data-percent^="4"] .bar, .ui.indicating.progress[data-percent^="5"] .bar, .play-button.indicating.progress[data-percent^="4"] .bar, .play-button.indicating.progress[data-percent^="5"] .bar, .download-button.indicating.progress[data-percent^="4"] .bar, .download-button.indicating.progress[data-percent^="5"] .bar { background-color: #E6BB48; } .ui.indicating.progress[data-percent^="6"] .bar, .play-button.indicating.progress[data-percent^="6"] .bar, .download-button.indicating.progress[data-percent^="6"] .bar { background-color: #DDC928; } .ui.indicating.progress[data-percent^="7"] .bar, .ui.indicating.progress[data-percent^="8"] .bar, .play-button.indicating.progress[data-percent^="7"] .bar, .play-button.indicating.progress[data-percent^="8"] .bar, .download-button.indicating.progress[data-percent^="7"] .bar, .download-button.indicating.progress[data-percent^="8"] .bar { background-color: #B4D95C; } .ui.indicating.progress[data-percent^="9"] .bar, .ui.indicating.progress[data-percent^="100"] .bar, .play-button.indicating.progress[data-percent^="9"] .bar, .play-button.indicating.progress[data-percent^="100"] .bar, .download-button.indicating.progress[data-percent^="9"] .bar, .download-button.indicating.progress[data-percent^="100"] .bar { background-color: #66DA81; } /* Indicating Label */ .ui.indicating.progress[data-percent^="1"] .label, .ui.indicating.progress[data-percent^="2"] .label, .play-button.indicating.progress[data-percent^="1"] .label, .play-button.indicating.progress[data-percent^="2"] .label, .download-button.indicating.progress[data-percent^="1"] .label, .download-button.indicating.progress[data-percent^="2"] .label { color: rgba(0, 0, 0, 0.87); } .ui.indicating.progress[data-percent^="3"] .label, .play-button.indicating.progress[data-percent^="3"] .label, .download-button.indicating.progress[data-percent^="3"] .label { color: rgba(0, 0, 0, 0.87); } .ui.indicating.progress[data-percent^="4"] .label, .ui.indicating.progress[data-percent^="5"] .label, .play-button.indicating.progress[data-percent^="4"] .label, .play-button.indicating.progress[data-percent^="5"] .label, .download-button.indicating.progress[data-percent^="4"] .label, .download-button.indicating.progress[data-percent^="5"] .label { color: rgba(0, 0, 0, 0.87); } .ui.indicating.progress[data-percent^="6"] .label, .play-button.indicating.progress[data-percent^="6"] .label, .download-button.indicating.progress[data-percent^="6"] .label { color: rgba(0, 0, 0, 0.87); } .ui.indicating.progress[data-percent^="7"] .label, .ui.indicating.progress[data-percent^="8"] .label, .play-button.indicating.progress[data-percent^="7"] .label, .play-button.indicating.progress[data-percent^="8"] .label, .download-button.indicating.progress[data-percent^="7"] .label, .download-button.indicating.progress[data-percent^="8"] .label { color: rgba(0, 0, 0, 0.87); } .ui.indicating.progress[data-percent^="9"] .label, .ui.indicating.progress[data-percent^="100"] .label, .play-button.indicating.progress[data-percent^="9"] .label, .play-button.indicating.progress[data-percent^="100"] .label, .download-button.indicating.progress[data-percent^="9"] .label, .download-button.indicating.progress[data-percent^="100"] .label { color: rgba(0, 0, 0, 0.87); } /* Single Digits */ .ui.indicating.progress[data-percent="1"] .bar, .ui.indicating.progress[data-percent="2"] .bar, .ui.indicating.progress[data-percent="3"] .bar, .ui.indicating.progress[data-percent="4"] .bar, .ui.indicating.progress[data-percent="5"] .bar, .ui.indicating.progress[data-percent="6"] .bar, .ui.indicating.progress[data-percent="7"] .bar, .ui.indicating.progress[data-percent="8"] .bar, .ui.indicating.progress[data-percent="9"] .bar, .play-button.indicating.progress[data-percent="1"] .bar, .play-button.indicating.progress[data-percent="2"] .bar, .play-button.indicating.progress[data-percent="3"] .bar, .play-button.indicating.progress[data-percent="4"] .bar, .play-button.indicating.progress[data-percent="5"] .bar, .play-button.indicating.progress[data-percent="6"] .bar, .play-button.indicating.progress[data-percent="7"] .bar, .play-button.indicating.progress[data-percent="8"] .bar, .play-button.indicating.progress[data-percent="9"] .bar, .download-button.indicating.progress[data-percent="1"] .bar, .download-button.indicating.progress[data-percent="2"] .bar, .download-button.indicating.progress[data-percent="3"] .bar, .download-button.indicating.progress[data-percent="4"] .bar, .download-button.indicating.progress[data-percent="5"] .bar, .download-button.indicating.progress[data-percent="6"] .bar, .download-button.indicating.progress[data-percent="7"] .bar, .download-button.indicating.progress[data-percent="8"] .bar, .download-button.indicating.progress[data-percent="9"] .bar { background-color: #D95C5C; } .ui.indicating.progress[data-percent="1"] .label, .ui.indicating.progress[data-percent="2"] .label, .ui.indicating.progress[data-percent="3"] .label, .ui.indicating.progress[data-percent="4"] .label, .ui.indicating.progress[data-percent="5"] .label, .ui.indicating.progress[data-percent="6"] .label, .ui.indicating.progress[data-percent="7"] .label, .ui.indicating.progress[data-percent="8"] .label, .ui.indicating.progress[data-percent="9"] .label, .play-button.indicating.progress[data-percent="1"] .label, .play-button.indicating.progress[data-percent="2"] .label, .play-button.indicating.progress[data-percent="3"] .label, .play-button.indicating.progress[data-percent="4"] .label, .play-button.indicating.progress[data-percent="5"] .label, .play-button.indicating.progress[data-percent="6"] .label, .play-button.indicating.progress[data-percent="7"] .label, .play-button.indicating.progress[data-percent="8"] .label, .play-button.indicating.progress[data-percent="9"] .label, .download-button.indicating.progress[data-percent="1"] .label, .download-button.indicating.progress[data-percent="2"] .label, .download-button.indicating.progress[data-percent="3"] .label, .download-button.indicating.progress[data-percent="4"] .label, .download-button.indicating.progress[data-percent="5"] .label, .download-button.indicating.progress[data-percent="6"] .label, .download-button.indicating.progress[data-percent="7"] .label, .download-button.indicating.progress[data-percent="8"] .label, .download-button.indicating.progress[data-percent="9"] .label { color: rgba(0, 0, 0, 0.87); } /* Indicating Success */ .ui.indicating.progress.success .label, .play-button.indicating.progress.success .label, .download-button.indicating.progress.success .label { color: #1A531B; } /******************************* States *******************************/ /*-------------- Success ---------------*/ .ui.progress.success .bar, .play-button.progress.success .bar, .download-button.progress.success .bar { background-color: #3FC863 !important; } .ui.progress.success .bar, .ui.progress.success .bar::after, .play-button.progress.success .bar, .play-button.progress.success .bar::after, .download-button.progress.success .bar, .download-button.progress.success .bar::after { animation: none !important; } .ui.progress.success > .label, .play-button.progress.success > .label, .download-button.progress.success > .label { color: #1A531B; } /*-------------- Warning ---------------*/ .ui.progress.warning .bar, .play-button.progress.warning .bar, .download-button.progress.warning .bar { background-color: #F2C037 !important; } .ui.progress.warning .bar, .ui.progress.warning .bar::after, .play-button.progress.warning .bar, .play-button.progress.warning .bar::after, .download-button.progress.warning .bar, .download-button.progress.warning .bar::after { animation: none !important; } .ui.progress.warning > .label, .play-button.progress.warning > .label, .download-button.progress.warning > .label { color: #794B02; } /*-------------- Error ---------------*/ .ui.progress.error .bar, .play-button.progress.error .bar, .download-button.progress.error .bar { background-color: #E81123 !important; } .ui.progress.error .bar, .ui.progress.error .bar::after, .play-button.progress.error .bar, .play-button.progress.error .bar::after, .download-button.progress.error .bar, .download-button.progress.error .bar::after { animation: none !important; } .ui.progress.error > .label, .play-button.progress.error > .label, .download-button.progress.error > .label { color: #912D2B; } /*-------------- Active ---------------*/ .ui.active.progress .bar, .play-button.active.progress .bar, .download-button.active.progress .bar { position: relative; min-width: 2em; } .ui.active.progress .bar::after, .play-button.active.progress .bar::after, .download-button.active.progress .bar::after { content: ''; opacity: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #FFFFFF; border-radius: 0.28571429rem; animation: progress-active 2s ease infinite; } @keyframes progress-active { 0% { opacity: 0.3; width: 0; } 100% { opacity: 0; width: 100%; } } /*-------------- Disabled ---------------*/ .ui.disabled.progress, .play-button.disabled.progress, .download-button.disabled.progress { opacity: 0.35; } .ui.disabled.progress .bar, .ui.disabled.progress .bar::after, .play-button.disabled.progress .bar, .play-button.disabled.progress .bar::after, .download-button.disabled.progress .bar, .download-button.disabled.progress .bar::after { animation: none !important; } /******************************* Variations *******************************/ /*-------------- Inverted ---------------*/ .ui.inverted.progress, .play-button.inverted.progress, .download-button.inverted.progress { background: rgba(255, 255, 255, 0.08); border: none; } .ui.inverted.progress .bar, .play-button.inverted.progress .bar, .download-button.inverted.progress .bar { background: #888888; } .ui.inverted.progress .bar > .progress, .play-button.inverted.progress .bar > .progress, .download-button.inverted.progress .bar > .progress { color: #F9FAFB; } .ui.inverted.progress > .label, .play-button.inverted.progress > .label, .download-button.inverted.progress > .label { color: #FFFFFF; } .ui.inverted.progress.success > .label, .play-button.inverted.progress.success > .label, .download-button.inverted.progress.success > .label { color: #3FC863; } .ui.inverted.progress.warning > .label, .play-button.inverted.progress.warning > .label, .download-button.inverted.progress.warning > .label { color: #F2C037; } .ui.inverted.progress.error > .label, .play-button.inverted.progress.error > .label, .download-button.inverted.progress.error > .label { color: #E81123; } /*-------------- Attached ---------------*/ /* bottom attached */ .ui.progress.attached, .play-button.progress.attached, .download-button.progress.attached { background: transparent; position: relative; border: none; margin: 0em; } .ui.progress.attached, .ui.progress.attached .bar, .play-button.progress.attached, .play-button.progress.attached .bar, .download-button.progress.attached, .download-button.progress.attached .bar { display: block; height: 0.2rem; padding: 0px; overflow: hidden; border-radius: 0em 0em 0.28571429rem 0.28571429rem; } .ui.progress.attached .bar, .play-button.progress.attached .bar, .download-button.progress.attached .bar { border-radius: 0em; } /* top attached */ .ui.progress.top.attached, .ui.progress.top.attached .bar, .play-button.progress.top.attached, .play-button.progress.top.attached .bar, .download-button.progress.top.attached, .download-button.progress.top.attached .bar { top: 0px; border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.progress.top.attached .bar, .play-button.progress.top.attached .bar, .download-button.progress.top.attached .bar { border-radius: 0em; } /* Coupling */ .ui.segment > .ui.attached.progress, .ui.card > .ui.attached.progress, .play-button.segment > .play-button.attached.progress, .play-button.card > .play-button.attached.progress, .download-button.segment > .download-button.attached.progress, .download-button.card > .download-button.attached.progress { position: absolute; top: auto; left: 0; bottom: 100%; width: 100%; } .ui.segment > .ui.bottom.attached.progress, .ui.card > .ui.bottom.attached.progress, .play-button.segment > .play-button.bottom.attached.progress, .play-button.card > .play-button.bottom.attached.progress, .download-button.segment > .download-button.bottom.attached.progress, .download-button.card > .download-button.bottom.attached.progress { top: 100%; bottom: auto; } /*-------------- Colors ---------------*/ /* Red */ .ui.red.progress .bar, .play-button.red.progress .bar, .download-button.red.progress .bar { background-color: #E81123; } .ui.red.inverted.progress .bar, .play-button.red.inverted.progress .bar, .download-button.red.inverted.progress .bar { background-color: #FF695E; } /* Orange */ .ui.orange.progress .bar, .play-button.orange.progress .bar, .download-button.orange.progress .bar { background-color: #DF4600; } .ui.orange.inverted.progress .bar, .play-button.orange.inverted.progress .bar, .download-button.orange.inverted.progress .bar { background-color: #FF851B; } /* Yellow */ .ui.yellow.progress .bar, .play-button.yellow.progress .bar, .download-button.yellow.progress .bar, .ui.download-button.progress .bar { background-color: #F4C918; } .ui.yellow.inverted.progress .bar, .play-button.yellow.inverted.progress .bar, .download-button.yellow.inverted.progress .bar, .ui.download-button.inverted.progress .bar { background-color: #FFE21F; } /* Olive */ .ui.olive.progress .bar, .play-button.olive.progress .bar, .download-button.olive.progress .bar { background-color: #B5CC18; } .ui.olive.inverted.progress .bar, .play-button.olive.inverted.progress .bar, .download-button.olive.inverted.progress .bar { background-color: #D9E778; } /* Green */ .ui.green.progress .bar, .ui.ui.button.getting-started-btn.progress .bar, .play-button.green.progress .bar, .download-button.green.progress .bar, .ui.play-button.button.getting-started-btn.progress .bar, .ui.ui.play-button.getting-started-btn.progress .bar, .ui.download-button.button.getting-started-btn.progress .bar, .ui.ui.download-button.getting-started-btn.progress .bar { background-color: #3FC863; } .ui.green.inverted.progress .bar, .ui.ui.button.getting-started-btn.inverted.progress .bar, .play-button.green.inverted.progress .bar, .download-button.green.inverted.progress .bar, .ui.play-button.button.getting-started-btn.inverted.progress .bar, .ui.ui.play-button.getting-started-btn.inverted.progress .bar, .ui.download-button.button.getting-started-btn.inverted.progress .bar, .ui.ui.download-button.getting-started-btn.inverted.progress .bar { background-color: #2ECC40; } /* Teal */ .ui.teal.progress .bar, .play-button.teal.progress .bar, .download-button.teal.progress .bar { background-color: #008272; } .ui.teal.inverted.progress .bar, .play-button.teal.inverted.progress .bar, .download-button.teal.inverted.progress .bar { background-color: #6DFFFF; } /* Blue */ .ui.blue.progress .bar, .play-button.blue.progress .bar, .ui.play-button.progress .bar, .download-button.blue.progress .bar { background-color: #54C9C9; } .ui.blue.inverted.progress .bar, .play-button.blue.inverted.progress .bar, .ui.play-button.inverted.progress .bar, .download-button.blue.inverted.progress .bar { background-color: #54C8FF; } /* Violet */ .ui.violet.progress .bar, .play-button.violet.progress .bar, .download-button.violet.progress .bar { background-color: #C90072; } .ui.violet.inverted.progress .bar, .play-button.violet.inverted.progress .bar, .download-button.violet.inverted.progress .bar { background-color: #A291FB; } /* Purple */ .ui.purple.progress .bar, .play-button.purple.progress .bar, .download-button.purple.progress .bar { background-color: #8169E6; } .ui.purple.inverted.progress .bar, .play-button.purple.inverted.progress .bar, .download-button.purple.inverted.progress .bar { background-color: #DC73FF; } /* Pink */ .ui.pink.progress .bar, .play-button.pink.progress .bar, .download-button.pink.progress .bar { background-color: #E2008C; } .ui.pink.inverted.progress .bar, .play-button.pink.inverted.progress .bar, .download-button.pink.inverted.progress .bar { background-color: #FF8EDF; } /* Brown */ .ui.brown.progress .bar, .play-button.brown.progress .bar, .download-button.brown.progress .bar { background-color: #6B5B4C; } .ui.brown.inverted.progress .bar, .play-button.brown.inverted.progress .bar, .download-button.brown.inverted.progress .bar { background-color: #D67C1C; } /* Grey */ .ui.grey.progress .bar, .ui.ui.button.editortools-btn.progress .bar, .play-button.grey.progress .bar, .download-button.grey.progress .bar, .ui.play-button.button.editortools-btn.progress .bar, .ui.ui.play-button.editortools-btn.progress .bar, .ui.download-button.button.editortools-btn.progress .bar, .ui.ui.download-button.editortools-btn.progress .bar { background-color: #42495F; } .ui.grey.inverted.progress .bar, .ui.ui.button.editortools-btn.inverted.progress .bar, .play-button.grey.inverted.progress .bar, .download-button.grey.inverted.progress .bar, .ui.play-button.button.editortools-btn.inverted.progress .bar, .ui.ui.play-button.editortools-btn.inverted.progress .bar, .ui.download-button.button.editortools-btn.inverted.progress .bar, .ui.ui.download-button.editortools-btn.inverted.progress .bar { background-color: #DCDDDE; } /* Black */ .ui.black.progress .bar, .play-button.black.progress .bar, .download-button.black.progress .bar { background-color: #1B1C1D; } .ui.black.inverted.progress .bar, .play-button.black.inverted.progress .bar, .download-button.black.inverted.progress .bar { background-color: #545454; } /*-------------- Sizes ---------------*/ .ui.tiny.progress, .play-button.tiny.progress, .download-button.tiny.progress { font-size: 0.85714286rem; } .ui.tiny.progress .bar, .play-button.tiny.progress .bar, .download-button.tiny.progress .bar { height: 0.5em; } .ui.small.progress, .play-button.small.progress, .download-button.small.progress { font-size: 0.92857143rem; } .ui.small.progress .bar, .play-button.small.progress .bar, .download-button.small.progress .bar { height: 1em; } .ui.progress, .play-button.progress, .download-button.progress { font-size: 1rem; } .ui.progress .bar, .play-button.progress .bar, .download-button.progress .bar { height: 1.75em; } .ui.large.progress, .play-button.large.progress, .download-button.large.progress { font-size: 1.14285714rem; } .ui.large.progress .bar, .play-button.large.progress .bar, .download-button.large.progress .bar { height: 2.5em; } .ui.big.progress, .play-button.big.progress, .download-button.big.progress { font-size: 1.28571429rem; } .ui.big.progress .bar, .play-button.big.progress .bar, .download-button.big.progress .bar { height: 3.5em; } /******************************* Progress *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Rating * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Rating *******************************/ /*------------------- Types --------------------*/ /* Standard */ /* Star */ /* Heart */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Packaged Theme */ /******************************* Rating *******************************/ /*------------------- Types --------------------*/ /* Standard */ /* Star */ /* Heart */ /*------------------- States --------------------*/ /*------------------- Variations --------------------*/ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Rating *******************************/ .ui.rating, .play-button.rating, .download-button.rating { display: inline-flex; white-space: nowrap; vertical-align: baseline; } .ui.rating:last-child, .play-button.rating:last-child, .download-button.rating:last-child { margin-right: 0em; } /* Icon */ .ui.rating .icon, .play-button.rating .icon, .download-button.rating .icon { padding: 0em; margin: 0em; text-align: center; font-weight: normal; font-style: normal; flex: 1 0 auto; cursor: pointer; width: 1.25em; height: auto; transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease; } /******************************* Types *******************************/ /*------------------- Standard --------------------*/ /* Inactive Icon */ .ui.rating .icon, .play-button.rating .icon, .download-button.rating .icon { background: transparent; color: rgba(0, 0, 0, 0.15); } /* Active Icon */ .ui.rating .active.icon, .play-button.rating .active.icon, .download-button.rating .active.icon { background: transparent; color: rgba(0, 0, 0, 0.85); } /* Selected Icon */ .ui.rating .icon.selected, .ui.rating .icon.selected.active, .play-button.rating .icon.selected, .play-button.rating .icon.selected.active, .download-button.rating .icon.selected, .download-button.rating .icon.selected.active { background: transparent; color: rgba(0, 0, 0, 0.87); } /*------------------- Star --------------------*/ /* Inactive */ .ui.star.rating .icon, .play-button.star.rating .icon, .download-button.star.rating .icon { width: 1.25em; height: auto; background: transparent; color: rgba(0, 0, 0, 0.15); text-shadow: none; } /* Active Star */ .ui.star.rating .active.icon, .play-button.star.rating .active.icon, .download-button.star.rating .active.icon { background: transparent !important; color: #FFE623 !important; text-shadow: 0px -1px 0px #DDC507, -1px 0px 0px #DDC507, 0px 1px 0px #DDC507, 1px 0px 0px #DDC507 !important; } /* Selected Star */ .ui.star.rating .icon.selected, .ui.star.rating .icon.selected.active, .play-button.star.rating .icon.selected, .play-button.star.rating .icon.selected.active, .download-button.star.rating .icon.selected, .download-button.star.rating .icon.selected.active { background: transparent !important; color: #FFCC00 !important; text-shadow: 0px -1px 0px #E6A200, -1px 0px 0px #E6A200, 0px 1px 0px #E6A200, 1px 0px 0px #E6A200 !important; } /*------------------- Heart --------------------*/ .ui.heart.rating .icon, .play-button.heart.rating .icon, .download-button.heart.rating .icon { width: 1.4em; height: auto; background: transparent; color: rgba(0, 0, 0, 0.15); text-shadow: none !important; } /* Active Heart */ .ui.heart.rating .active.icon, .play-button.heart.rating .active.icon, .download-button.heart.rating .active.icon { background: transparent !important; color: #FF6D75 !important; text-shadow: 0px -1px 0px #CD0707, -1px 0px 0px #CD0707, 0px 1px 0px #CD0707, 1px 0px 0px #CD0707 !important; } /* Selected Heart */ .ui.heart.rating .icon.selected, .ui.heart.rating .icon.selected.active, .play-button.heart.rating .icon.selected, .play-button.heart.rating .icon.selected.active, .download-button.heart.rating .icon.selected, .download-button.heart.rating .icon.selected.active { background: transparent !important; color: #FF3000 !important; text-shadow: 0px -1px 0px #AA0101, -1px 0px 0px #AA0101, 0px 1px 0px #AA0101, 1px 0px 0px #AA0101 !important; } /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /* disabled rating */ .ui.disabled.rating .icon, .play-button.disabled.rating .icon, .download-button.disabled.rating .icon { cursor: default; } /*------------------- User Interactive --------------------*/ /* Selected Rating */ .ui.rating.selected .active.icon, .play-button.rating.selected .active.icon, .download-button.rating.selected .active.icon { opacity: 1; } .ui.rating.selected .icon.selected, .ui.rating .icon.selected, .play-button.rating.selected .icon.selected, .play-button.rating .icon.selected, .download-button.rating.selected .icon.selected, .download-button.rating .icon.selected { opacity: 1; } /******************************* Variations *******************************/ .ui.mini.rating, .play-button.mini.rating, .download-button.mini.rating { font-size: 0.78571429rem; } .ui.tiny.rating, .play-button.tiny.rating, .download-button.tiny.rating { font-size: 0.85714286rem; } .ui.small.rating, .play-button.small.rating, .download-button.small.rating { font-size: 0.92857143rem; } .ui.rating, .play-button.rating, .download-button.rating { font-size: 1rem; } .ui.large.rating, .play-button.large.rating, .download-button.large.rating { font-size: 1.14285714rem; } .ui.huge.rating, .play-button.huge.rating, .download-button.huge.rating { font-size: 1.42857143rem; } .ui.massive.rating, .play-button.massive.rating, .download-button.massive.rating { font-size: 2rem; } /******************************* Theme Overrides *******************************/ @font-face { font-family: 'Rating'; src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABcUAAoAAAAAFswAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAEuEAABLho6TvIE9TLzIAABPYAAAAYAAAAGAIIwgbY21hcAAAFDgAAACkAAAApKPambxnYXNwAAAU3AAAAAgAAAAIAAAAEGhlYWQAABTkAAAANgAAADYBGAe5aGhlYQAAFRwAAAAkAAAAJAPiAf1obXR4AAAVQAAAAHAAAABwLOAAQ21heHAAABWwAAAABgAAAAYAHFAAbmFtZQAAFbgAAAE8AAABPPC1n05wb3N0AAAW9AAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLZviU+HQFHQAAAP0PHQAAAQIRHQAAAAkdAAAS2BIAHQEBBw0PERQZHiMoLTI3PEFGS1BVWl9kaW5zeH2Ch4xyYXRpbmdyYXRpbmd1MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUYwMDR1RjAwNXVGMDA2dUYwMEN1RjAwRHVGMDIzdUYwMkV1RjA2RXVGMDcwdUYwODd1RjA4OHVGMDg5dUYwOEF1RjA5N3VGMDlDdUYxMjN1RjE2NHVGMTY1AAACAYkAGgAcAgABAAQABwAKAA0AVgCWAL0BAgGMAeQCbwLwA4cD5QR0BQMFdgZgB8MJkQtxC7oM2Q1jDggOmRAYEZr8lA78lA78lA77lA74lPetFftFpTz3NDz7NPtFcfcU+xBt+0T3Mt73Mjht90T3FPcQBfuU+0YV+wRRofcQMOP3EZ3D9wXD+wX3EXkwM6H7EPsExQUO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFYuLi/exw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iu2i7J4pm6mqLKetovci81JizoIDviU98EVi9xJzTqLYItkeHBucKhknmCLOotJSYs6i2CeZKhwCIuL9zT7NAWbe5t7m4ubi5ubm5sI9zT3NAWopp6yi7YIME0V+zb7NgWKioqKiouKi4qMiowI+zb3NgV6m4Ghi6OLubCwuYuji6GBm3oIule6vwWbnKGVo4u5i7Bmi12Lc4F1ensIDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iuni6WDoX4IXED3BEtL+zT3RPdU+wTLssYFl46YjZiL3IvNSYs6CA6L98UVi7WXrKOio6Otl7aLlouXiZiHl4eWhZaEloSUhZKFk4SShZKEkpKSkZOSkpGUkZaSCJaSlpGXj5iPl42Wi7aLrX+jc6N0l2qLYYthdWBgYAj7RvtABYeIh4mGi4aLh42Hjgj7RvdABYmNiY2Hj4iOhpGDlISUhZWFlIWVhpaHmYaYiZiLmAgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuHioiJiImIiIqHi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuCh4aDi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwjKeRXjN3b7DfcAxPZSd/cN4t/7DJ1V9wFV+wEFDq73ZhWLk42RkZEIsbIFkZCRjpOLkouSiJCGCN8291D3UAWQkJKOkouTi5GIkYYIsWQFkYaNhIuEi4OJhYWFCPuJ+4kFhYWFiYOLhIuEjYaRCPsi9yIFhZCJkouSCA77AartFYuSjpKQkAjf3zffBYaQiJKLk4uSjpKQkAiysgWRkJGOk4uSi5KIkIYI3zff3wWQkJKOk4uSi5KIkIYIsmQFkIaOhIuEi4OIhIaGCDc33zcFkIaOhIuEi4OIhYaFCGRkBYaGhIiEi4OLhI6GkAg33zc3BYaGhIiEi4OLhY6FkAhksgWGkYiRi5MIDvtLi8sVi/c5BYuSjpKQkJCQko6SiwiVi4vCBYuul6mkpKSkqpiui66LqX6kcqRymG2LaAiLVJSLBZKLkoiQhpCGjoSLhAiL+zkFi4OIhYaGhoWEiYSLCPuniwWEi4SNhpGGkIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+yaLshWL+AQFi5GNkY+RjpCQj5KNj42PjI+LCPfAiwWPi4+Kj4mRiZCHj4aPhY2Fi4UIi/wEBYuEiYWHhoeGhoeFiIiKhoqHi4GLhI6EkQj7EvcN+xL7DQWEhYOIgouHi4eLh42EjoaPiJCHkImRi5IIDov3XRWLko2Rj5Kltq+vuKW4pbuZvYu9i7t9uHG4ca9npWCPhI2Fi4SLhYmEh4RxYGdoXnAIXnFbflmLWYtbmF6lXqZnrnG2h5KJkouRCLCLFaRkq2yxdLF0tH+4i7iLtJexorGiq6qksm64Z61goZZ3kXaLdItnfm1ycnJybX9oiwhoi22XcqRypH6pi6+LopGglp9gdWdpbl4I9xiwFYuHjIiOiI6IjoqPi4+LjoyOjo2OjY6Lj4ubkJmXl5eWmZGbi4+LjoyOjo2OjY6LjwiLj4mOiY6IjYiNh4tzi3eCenp6eoJ3i3MIDov3XRWLko2Sj5GouK+utqW3pbqYvouci5yJnIgIm6cFjY6NjI+LjIuNi42JjYqOio+JjomOiY6KjomOiY6JjoqNioyKjomMiYuHi4qLiouLCHdnbVVjQ2NDbVV3Zwh9cgWJiIiJiIuJi36SdJiIjYmOi46LjY+UlJlvl3KcdJ90oHeie6WHkYmSi5IIsIsVqlq0Z711CKGzBXqXfpqCnoKdhp6LoIuikaCWn2B1Z2luXgj3GLAVi4eMiI6IjoiOio+Lj4uOjI6OjY6NjouPi5uQmZeXl5aZkZuLj4uOjI6OjY6NjouPCIuPiY6JjoiNiI2Hi3OLd4J6enp6gneLcwji+10VoLAFtI+wmK2hrqKnqKKvdq1wp2uhCJ2rBZ1/nHycepx6mHqWeY+EjYWLhIuEiYWHhIR/gH1+fG9qaXJmeWV5Y4Jhiwi53BXb9yQFjIKMg4uEi3CDc3x1fHV3fHOBCA6L1BWL90sFi5WPlJKSkpKTj5aLCNmLBZKPmJqepJaZlZeVlY+Qj5ONl42WjpeOmI+YkZWTk5OSk46Vi5uLmYiYhZiFlIGSfgiSfo55i3WLeYd5gXgIvosFn4uchJl8mn2Seot3i3qGfIJ9jYSLhYuEi3yIfoR+i4eLh4uHi3eGen99i3CDdnt8CHt8dYNwiwhmiwV5i3mNeY95kHeRc5N1k36Ph4sIOYsFgIuDjoSShJKHlIuVCLCdFYuGjIePiI+Hj4mQi5CLj42Pj46OjY+LkIuQiZCIjoePh42Gi4aLh4mHh4eIioaLhgjUeRWUiwWNi46Lj4qOi4+KjYqOi4+Kj4mQio6KjYqNio+Kj4mQio6KjIqzfquEpIsIrosFr4uemouri5CKkYqQkY6QkI6SjpKNkouSi5KJkoiRlZWQlouYi5CKkImRiZGJj4iOCJGMkI+PlI+UjZKLkouViJODk4SSgo+CiwgmiwWLlpCalJ6UnpCbi5aLnoiYhJSFlH+QeYuGhoeDiYCJf4h/h3+IfoWBg4KHh4SCgH4Ii4qIiYiGh4aIh4mIiIiIh4eGh4aHh4eHiIiHiIeHiIiHiIeKh4mIioiLCIKLi/tLBQ6L90sVi/dLBYuVj5OSk5KSk46WiwjdiwWPi5iPoZOkk6CRnZCdj56Nn4sIq4sFpougg5x8m3yTd4txCIuJBZd8kHuLd4uHi4eLh5J+jn6LfIuEi4SJhZR9kHyLeot3hHp8fH19eoR3iwhYiwWVeI95i3mLdIh6hH6EfoKBfoV+hX2He4uBi4OPg5KFkYaTh5SHlYiTipOKk4qTiJMIiZSIkYiPgZSBl4CaeKR+moSPCD2LBYCLg4+EkoSSh5SLlQiw9zgVi4aMh4+Ij4ePiZCLkIuPjY+Pjo6Nj4uQi5CJkIiOh4+HjYaLhouHiYeHh4iKhouGCNT7OBWUiwWOi46Kj4mPio+IjoiPh4+IjoePiI+Hj4aPho6HjoiNiI6Hj4aOho6Ii4qWfpKDj4YIk4ORgY5+j36OgI1/jYCPg5CGnYuXj5GUkpSOmYuei5aGmoKfgp6GmouWCPCLBZSLlI+SkpOTjpOLlYuSiZKHlIeUho+Fi46PjY+NkY2RjJCLkIuYhpaBlY6RjZKLkgiLkomSiJKIkoaQhY6MkIyRi5CLm4aXgpOBkn6Pe4sIZosFcotrhGN9iouIioaJh4qHiomKiYqIioaKh4mHioiKiYuHioiLh4qIi4mLCIKLi/tLBQ77lIv3txWLkpCPlo0I9yOgzPcWBY6SkI+RiwiL/BL7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOi/fFFYu1l6yjoqOjrZe2i5aLl4mYh5eHloWWhJaElIWShZOEkoWShJKSkpGTkpKRlJGWkgiWkpaRl4+Yj5eNlou2i61/o3OjdJdqi2GLYXVgYGAI+0b7QAWHiIeJhouGi4eNh44I+0b3QAWJjYmNh4+IjoaRg5SElIWVhZSFlYaWh5mGmImYi5gIsIsVi2ucaa9oCPc6+zT3OvczBa+vnK2Lq4ubiZiHl4eXhpSFkoSSg5GCj4KQgo2CjYONgYuBi4KLgIl/hoCGgIWChAiBg4OFhISEhYaFhoaIhoaJhYuFi4aNiJCGkIaRhJGEkoORgZOCkoCRgJB/kICNgosIgYuBi4OJgomCiYKGgoeDhYSEhYSGgod/h3+Jfot7CA77JouyFYv4BAWLkY2Rj5GOkJCPko2PjY+Mj4sI98CLBY+Lj4qPiZGJkIePho+FjYWLhQiL/AQFi4SJhYeGh4aGh4WIiIqGioeLgYuEjoSRCPsS9w37EvsNBYSFg4iCi4eLh4uHjYSOho+IkIeQiZGLkgiwkxX3JvchpHL3DfsIi/f3+7iLi/v3BQ5ni8sVi/c5BYuSjpKQkJCQko6Siwj3VIuLwgWLrpippKSkpKmYrouvi6l+pHKkcpdti2gIi0IFi4aKhoeIh4eHiYaLCHmLBYaLh42Hj4eOipCLkAiL1AWLn4OcfZp9mXqSdot3i3qEfX18fIR6i3cIi1SniwWSi5KIkIaQho6Ei4QIi/s5BYuDiIWGhoaFhImEiwj7p4sFhIuEjYaRhpCIkYuTCA5njPe6FYyQkI6UjQj3I6DM9xYFj5KPj5GLkIuQh4+ECMv7FvcjdgWUiZCIjYaNhoiFhYUIIyak+yMFjIWKhomHiYiIiYaLiIuHjIeNCPsUz/sVRwWHiYeKiIuHi4eNiY6Jj4uQjJEIo/cjI/AFhZGJkY2QCPeB+z0VnILlW3rxiJ6ZmNTS+wydgpxe54v7pwUOZ4vCFYv3SwWLkI2Pjo+Pjo+NkIsI3osFkIuPiY6Ij4eNh4uGCIv7SwWLhomHh4eIh4eKhosIOIsFhouHjIePiI+Jj4uQCLCvFYuGjIePh46IkImQi5CLj42Pjo6PjY+LkIuQiZCIjoePh42Gi4aLhomIh4eIioaLhgjvZxWL90sFi5CNj46Oj4+PjZCLj4ySkJWWlZaVl5SXmJuVl5GRjo6OkI6RjZCNkIyPjI6MkY2TCIySjJGMj4yPjZCOkY6RjpCPjo6Pj42Qi5SLk4qSiZKJkYiPiJCIjoiPho6GjYeMhwiNh4yGjIaMhYuHi4iLiIuHi4eLg4uEiYSJhImFiYeJh4mFh4WLioqJiomJiIqJiokIi4qKiIqJCNqLBZqLmIWWgJaAkH+LfIt6hn2Af46DjYSLhIt9h36Cf4+Bi3+HgImAhYKEhI12hnmAfgh/fXiDcosIZosFfot+jHyOfI5/joOOg41/j32Qc5N8j4SMhouHjYiOh4+Jj4uQCA5ni/c5FYuGjYaOiI+Hj4mQiwjeiwWQi4+Njo+Pjo2Qi5AIi/dKBYuQiZCHjoiPh42Giwg4iwWGi4eJh4eIiImGi4YIi/tKBbD3JhWLkIyPj4+OjpCNkIuQi4+Jj4iOh42Hi4aLhomHiIeHh4eKhouGi4aMiI+Hj4qPi5AI7/snFYv3SwWLkI2Qj46Oj4+NkIuSi5qPo5OZkJePk46TjZeOmo6ajpiMmIsIsIsFpIueg5d9ln6Qeol1koSRgo2Aj4CLgIeAlH+Pfot9i4WJhIiCloCQfIt7i3yFfoGACICAfoZ8iwg8iwWMiIyJi4mMiYyJjYmMiIyKi4mPhI2GjYeNh42GjYOMhIyEi4SLhouHi4iLiYuGioYIioWKhomHioeJh4iGh4eIh4aIh4iFiISJhImDioKLhouHjYiPh4+Ij4iRiJGJkIqPCIqPipGKkomTipGKj4qOiZCJkYiQiJCIjoWSgZZ+nIKXgZaBloGWhJGHi4aLh42HjwiIjomQi48IDviUFPiUFYsMCgAAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAPFlAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAkAAAACAAIAAEAAAAAQAg5gXwBvAN8CPwLvBu8HDwivCX8JzxI/Fl//3//wAAAAAAIOYA8ATwDPAj8C7wbvBw8Ifwl/Cc8SPxZP/9//8AAf/jGgQQBhABD+wP4g+jD6IPjA+AD3wO9g62AAMAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAAJrVlLJfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAFAAABwAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); font-weight: normal; font-style: normal; } .ui.rating .icon, .play-button.rating .icon, .download-button.rating .icon { font-family: 'Rating'; line-height: 1; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } /* Empty Star */ .ui.rating .icon:before, .play-button.rating .icon:before, .download-button.rating .icon:before { content: '\f005'; } /* Active Star */ .ui.rating .active.icon:before, .play-button.rating .active.icon:before, .download-button.rating .active.icon:before { content: '\f005'; } /*------------------- Star --------------------*/ /* Unfilled Star */ .ui.star.rating .icon:before, .play-button.star.rating .icon:before, .download-button.star.rating .icon:before { content: '\f005'; } /* Active Star */ .ui.star.rating .active.icon:before, .play-button.star.rating .active.icon:before, .download-button.star.rating .active.icon:before { content: '\f005'; } /* Partial */ .ui.star.rating .partial.icon:before, .play-button.star.rating .partial.icon:before, .download-button.star.rating .partial.icon:before { content: '\f006'; } .ui.star.rating .partial.icon, .play-button.star.rating .partial.icon, .download-button.star.rating .partial.icon { content: '\f005'; } /*------------------- Heart --------------------*/ /* Empty Heart .ui.heart.rating .icon:before { content: '\f08a'; } */ .ui.heart.rating .icon:before, .play-button.heart.rating .icon:before, .download-button.heart.rating .icon:before { content: '\f004'; } /* Active */ .ui.heart.rating .active.icon:before, .play-button.heart.rating .active.icon:before, .download-button.heart.rating .active.icon:before { content: '\f004'; } /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Search * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Search *******************************/ /* Search Prompt */ /* Result Box */ /* Result */ /* Result Image */ /* Result Content */ /* Description */ /* Price */ /* Special Message */ /* All Results Link */ /******************************* States *******************************/ /* Focus */ /* Hover */ /* Loading */ /* Active Category */ /* Active Result */ /******************************* Types *******************************/ /* Selection */ /* Category */ /* Packaged Theme */ /******************************* Search *******************************/ /* Search Prompt */ /* Result Box */ /* Result */ /* Result Image */ /* Result Content */ /* Description */ /* Price */ /* Special Message */ /* All Results Link */ /******************************* States *******************************/ /* Focus */ /* Hover */ /* Loading */ /* Active Category */ /* Active Result */ /******************************* Types *******************************/ /* Selection */ /* Category */ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Search *******************************/ .ui.search, .play-button.search, .download-button.search { position: relative; } .ui.search > .prompt, .play-button.search > .prompt, .download-button.search > .prompt { margin: 0em; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-shadow: none; font-style: normal; font-weight: normal; line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); box-shadow: 0em 0em 0em 0em transparent inset; transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease; } .ui.search .prompt, .play-button.search .prompt, .download-button.search .prompt { border-radius: 500rem; } /*-------------- Icon ---------------*/ .ui.search .prompt ~ .search.icon, .play-button.search .prompt ~ .search.icon, .download-button.search .prompt ~ .search.icon { cursor: pointer; } /*-------------- Results ---------------*/ .ui.search > .results, .play-button.search > .results, .download-button.search > .results { display: none; position: absolute; top: 100%; left: 0%; transform-origin: center top; white-space: normal; background: #FFFFFF; margin-top: 0.5em; width: 18em; border-radius: 0.28571429rem; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); border: 1px solid #D4D4D5; z-index: 998; } .ui.search > .results > :first-child, .play-button.search > .results > :first-child, .download-button.search > .results > :first-child { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } .ui.search > .results > :last-child, .play-button.search > .results > :last-child, .download-button.search > .results > :last-child { border-radius: 0em 0em 0.28571429rem 0.28571429rem; } /*-------------- Result ---------------*/ .ui.search > .results .result, .play-button.search > .results .result, .download-button.search > .results .result { cursor: pointer; display: block; overflow: hidden; font-size: 1em; padding: 0.85714286em 1.14285714em; color: rgba(0, 0, 0, 0.87); line-height: 1.33; border-bottom: 1px solid rgba(34, 36, 38, 0.1); } .ui.search > .results .result:last-child, .play-button.search > .results .result:last-child, .download-button.search > .results .result:last-child { border-bottom: none !important; } /* Image */ .ui.search > .results .result .image, .play-button.search > .results .result .image, .download-button.search > .results .result .image { float: right; overflow: hidden; background: none; width: 5em; height: 3em; border-radius: 0.25em; } .ui.search > .results .result .image img, .play-button.search > .results .result .image img, .download-button.search > .results .result .image img { display: block; width: auto; height: 100%; } /*-------------- Info ---------------*/ .ui.search > .results .result .image + .content, .play-button.search > .results .result .image + .content, .download-button.search > .results .result .image + .content { margin: 0em 6em 0em 0em; } .ui.search > .results .result .title, .play-button.search > .results .result .title, .download-button.search > .results .result .title { margin: -0.14285714em 0em 0em; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1em; color: rgba(0, 0, 0, 0.85); } .ui.search > .results .result .description, .play-button.search > .results .result .description, .download-button.search > .results .result .description { margin-top: 0; font-size: 0.92857143em; color: rgba(0, 0, 0, 0.4); } .ui.search > .results .result .price, .play-button.search > .results .result .price, .download-button.search > .results .result .price { float: right; color: #3FC863; } /*-------------- Message ---------------*/ .ui.search > .results > .message, .play-button.search > .results > .message, .download-button.search > .results > .message { padding: 1em 1em; } .ui.search > .results > .message .header, .play-button.search > .results > .message .header, .download-button.search > .results > .message .header { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: bold; color: rgba(0, 0, 0, 0.87); } .ui.search > .results > .message .description, .play-button.search > .results > .message .description, .download-button.search > .results > .message .description { margin-top: 0.25rem; font-size: 1em; color: rgba(0, 0, 0, 0.87); } /* View All Results */ .ui.search > .results > .action, .play-button.search > .results > .action, .download-button.search > .results > .action { display: block; border-top: none; background: #F3F4F5; padding: 0.92857143em 1em; color: rgba(0, 0, 0, 0.87); font-weight: bold; text-align: center; } /******************************* States *******************************/ /*-------------------- Focus ---------------------*/ .ui.search > .prompt:focus, .play-button.search > .prompt:focus, .download-button.search > .prompt:focus { border-color: rgba(34, 36, 38, 0.35); background: #FFFFFF; color: rgba(0, 0, 0, 0.95); } /*-------------------- Loading ---------------------*/ .ui.loading.search .input > i.icon:before, .play-button.loading.search .input > i.icon:before, .download-button.loading.search .input > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.search .input > i.icon:after, .play-button.loading.search .input > i.icon:after, .download-button.loading.search .input > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #42495F transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /*-------------- Hover ---------------*/ .ui.search > .results .result:hover, .ui.category.search > .results .category .result:hover, .play-button.search > .results .result:hover, .play-button.category.search > .results .category .result:hover, .download-button.search > .results .result:hover, .download-button.category.search > .results .category .result:hover { background: #F9FAFB; } .ui.search .action:hover, .play-button.search .action:hover, .download-button.search .action:hover { background: #E0E0E0; } /*-------------- Active ---------------*/ .ui.category.search > .results .category.active, .play-button.category.search > .results .category.active, .download-button.category.search > .results .category.active { background: #F3F4F5; } .ui.category.search > .results .category.active > .name, .play-button.category.search > .results .category.active > .name, .download-button.category.search > .results .category.active > .name { color: rgba(0, 0, 0, 0.87); } .ui.search > .results .result.active, .ui.category.search > .results .category .result.active, .play-button.search > .results .result.active, .play-button.category.search > .results .category .result.active, .download-button.search > .results .result.active, .download-button.category.search > .results .category .result.active { position: relative; border-left-color: rgba(34, 36, 38, 0.1); background: #F3F4F5; box-shadow: none; } .ui.search > .results .result.active .title, .play-button.search > .results .result.active .title, .download-button.search > .results .result.active .title { color: rgba(0, 0, 0, 0.85); } .ui.search > .results .result.active .description, .play-button.search > .results .result.active .description, .download-button.search > .results .result.active .description { color: rgba(0, 0, 0, 0.85); } /******************************* Types *******************************/ /*-------------- Selection ---------------*/ .ui.search.selection .prompt, .play-button.search.selection .prompt, .download-button.search.selection .prompt { border-radius: 0.28571429rem; } /* Remove input */ .ui.search.selection > .icon.input > .remove.icon, .play-button.search.selection > .icon.input > .remove.icon, .download-button.search.selection > .icon.input > .remove.icon { pointer-events: none; position: absolute; left: auto; opacity: 0; color: ''; top: 0em; right: 0em; transition: color 0.1s ease, opacity 0.1s ease; } .ui.search.selection > .icon.input > .active.remove.icon, .play-button.search.selection > .icon.input > .active.remove.icon, .download-button.search.selection > .icon.input > .active.remove.icon { cursor: pointer; opacity: 0.8; pointer-events: auto; } .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon, .play-button.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon, .download-button.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon { right: 1.85714em; } .ui.search.selection > .icon.input > .remove.icon:hover, .play-button.search.selection > .icon.input > .remove.icon:hover, .download-button.search.selection > .icon.input > .remove.icon:hover { opacity: 1; color: #E81123; } /*-------------- Category ---------------*/ .ui.category.search .results, .play-button.category.search .results, .download-button.category.search .results { width: 28em; } /* Category */ .ui.category.search > .results .category, .play-button.category.search > .results .category, .download-button.category.search > .results .category { background: #F3F4F5; box-shadow: none; border-bottom: 1px solid rgba(34, 36, 38, 0.1); transition: background 0.1s ease, border-color 0.1s ease; } /* Last Category */ .ui.category.search > .results .category:last-child, .play-button.category.search > .results .category:last-child, .download-button.category.search > .results .category:last-child { border-bottom: none; } /* First / Last */ .ui.category.search > .results .category:first-child .name + .result, .play-button.category.search > .results .category:first-child .name + .result, .download-button.category.search > .results .category:first-child .name + .result { border-radius: 0em 0.28571429rem 0em 0em; } .ui.category.search > .results .category:last-child .result:last-child, .play-button.category.search > .results .category:last-child .result:last-child, .download-button.category.search > .results .category:last-child .result:last-child { border-radius: 0em 0em 0.28571429rem 0em; } /* Category Result */ .ui.category.search > .results .category .result, .play-button.category.search > .results .category .result, .download-button.category.search > .results .category .result { background: #FFFFFF; margin-left: 100px; border-left: 1px solid rgba(34, 36, 38, 0.15); border-bottom: 1px solid rgba(34, 36, 38, 0.1); transition: background 0.1s ease, border-color 0.1s ease; padding: 0.85714286em 1.14285714em; } .ui.category.search > .results .category:last-child .result:last-child, .play-button.category.search > .results .category:last-child .result:last-child, .download-button.category.search > .results .category:last-child .result:last-child { border-bottom: none; } /* Category Result Name */ .ui.category.search > .results .category > .name, .play-button.category.search > .results .category > .name, .download-button.category.search > .results .category > .name { width: 100px; background: transparent; font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1em; float: 1em; float: left; padding: 0.4em 1em; font-weight: bold; color: rgba(0, 0, 0, 0.4); } /******************************* Variations *******************************/ /*------------------- Left / Right --------------------*/ .ui[class*="left aligned"].search > .results, .play-button[class*="left aligned"].search > .results, .download-button[class*="left aligned"].search > .results { right: auto; left: 0%; } .ui[class*="right aligned"].search > .results, .play-button[class*="right aligned"].search > .results, .download-button[class*="right aligned"].search > .results { right: 0%; left: auto; } /*-------------- Fluid ---------------*/ .ui.fluid.search .results, .play-button.fluid.search .results, .download-button.fluid.search .results { width: 100%; } /*-------------- Sizes ---------------*/ .ui.mini.search, .play-button.mini.search, .download-button.mini.search { font-size: 0.78571429em; } .ui.small.search, .play-button.small.search, .download-button.small.search { font-size: 0.92857143em; } .ui.search, .play-button.search, .download-button.search { font-size: 1em; } .ui.large.search, .play-button.large.search, .download-button.large.search { font-size: 1.14285714em; } .ui.big.search, .play-button.big.search, .download-button.big.search { font-size: 1.28571429em; } .ui.huge.search, .play-button.huge.search, .download-button.huge.search { font-size: 1.42857143em; } .ui.massive.search, .play-button.massive.search, .download-button.massive.search { font-size: 1.71428571em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Shape * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Shape *******************************/ /* Animating */ /* Side */ /*-------------- Types ---------------*/ /* Cube */ /* Packaged Theme */ /******************************* Shape *******************************/ /* Animating */ /* Side */ /*-------------- Types ---------------*/ /* Cube */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Shape *******************************/ .ui.shape, .play-button.shape, .download-button.shape { position: relative; vertical-align: top; display: inline-block; perspective: 2000px; transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out; } .ui.shape .sides, .play-button.shape .sides, .download-button.shape .sides { transform-style: preserve-3d; } .ui.shape .side, .play-button.shape .side, .download-button.shape .side { opacity: 1; width: 100%; margin: 0em !important; backface-visibility: hidden; } .ui.shape .side, .play-button.shape .side, .download-button.shape .side { display: none; } .ui.shape .side *, .play-button.shape .side *, .download-button.shape .side * { backface-visibility: visible !important; } /******************************* Types *******************************/ .ui.cube.shape .side, .play-button.cube.shape .side, .download-button.cube.shape .side { min-width: 15em; height: 15em; padding: 2em; background-color: #E6E6E6; color: rgba(0, 0, 0, 0.87); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); } .ui.cube.shape .side > .content, .play-button.cube.shape .side > .content, .download-button.cube.shape .side > .content { width: 100%; height: 100%; display: table; text-align: center; user-select: text; } .ui.cube.shape .side > .content > div, .play-button.cube.shape .side > .content > div, .download-button.cube.shape .side > .content > div { display: table-cell; vertical-align: middle; font-size: 2em; } /******************************* Variations *******************************/ .ui.text.shape.animating .sides, .play-button.text.shape.animating .sides, .download-button.text.shape.animating .sides { position: static; } .ui.text.shape .side, .play-button.text.shape .side, .download-button.text.shape .side { white-space: nowrap; } .ui.text.shape .side > *, .play-button.text.shape .side > *, .download-button.text.shape .side > * { white-space: normal; } /******************************* States *******************************/ /*-------------- Loading ---------------*/ .ui.loading.shape, .play-button.loading.shape, .download-button.loading.shape { position: absolute; top: -9999px; left: -9999px; } /*-------------- Animating ---------------*/ .ui.shape .animating.side, .play-button.shape .animating.side, .download-button.shape .animating.side { position: absolute; top: 0px; left: 0px; display: block; z-index: 100; } .ui.shape .hidden.side, .play-button.shape .hidden.side, .download-button.shape .hidden.side { opacity: 0.6; } /*-------------- CSS ---------------*/ .ui.shape.animating .sides, .play-button.shape.animating .sides, .download-button.shape.animating .sides { position: absolute; } .ui.shape.animating .sides, .play-button.shape.animating .sides, .download-button.shape.animating .sides { transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out; } .ui.shape.animating .side, .play-button.shape.animating .side, .download-button.shape.animating .side { transition: opacity 0.6s ease-in-out; } /*-------------- Active ---------------*/ .ui.shape .active.side, .play-button.shape .active.side, .download-button.shape .active.side { display: block; } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Sidebar * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Sidebar *******************************/ /*------------------- Content --------------------*/ /* Animation */ /* Dimmer */ /* Color below page */ /* Shadow */ /* Layering */ /*------------------- Variations --------------------*/ /* Width */ /* Height */ /* Packaged Theme */ /******************************* Sidebar *******************************/ /*------------------- Content --------------------*/ /* Animation */ /* Dimmer */ /* Color below page */ /* Shadow */ /* Layering */ /*------------------- Variations --------------------*/ /* Width */ /* Height */ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Sidebar *******************************/ /* Sidebar Menu */ .ui.sidebar, .play-button.sidebar, .download-button.sidebar { position: fixed; top: 0; left: 0; backface-visibility: hidden; transition: none; will-change: transform; transform: translate3d(0, 0, 0); visibility: hidden; -webkit-overflow-scrolling: touch; height: 100% !important; max-height: 100%; border-radius: 0em !important; margin: 0em !important; overflow-y: auto !important; z-index: 102; } /* GPU Layers for Child Elements */ .ui.sidebar > *, .play-button.sidebar > *, .download-button.sidebar > * { backface-visibility: hidden; } /*-------------- Direction ---------------*/ .ui.left.sidebar, .play-button.left.sidebar, .download-button.left.sidebar { right: auto; left: 0px; transform: translate3d(-100%, 0, 0); } .ui.right.sidebar, .play-button.right.sidebar, .download-button.right.sidebar { right: 0px !important; left: auto !important; transform: translate3d(100%, 0%, 0); } .ui.top.sidebar, .ui.bottom.sidebar, .play-button.top.sidebar, .play-button.bottom.sidebar, .download-button.top.sidebar, .download-button.bottom.sidebar { width: 100% !important; height: auto !important; } .ui.top.sidebar, .play-button.top.sidebar, .download-button.top.sidebar { top: 0px !important; bottom: auto !important; transform: translate3d(0, -100%, 0); } .ui.bottom.sidebar, .play-button.bottom.sidebar, .download-button.bottom.sidebar { top: auto !important; bottom: 0px !important; transform: translate3d(0, 100%, 0); } /*-------------- Pushable ---------------*/ .pushable { height: 100%; overflow-x: hidden; padding: 0em !important; } /* Whole Page */ body.pushable { background: #545454 !important; } /* Page Context */ .pushable:not(body) { transform: translate3d(0, 0, 0); } .pushable:not(body) > .ui.sidebar, .pushable:not(body) > .fixed, .pushable:not(body) > .pusher:after, .pushable:not(body) > .play-button.sidebar, .pushable:not(body) > .download-button.sidebar { position: absolute; } /*-------------- Fixed ---------------*/ .pushable > .fixed { position: fixed; backface-visibility: hidden; transition: transform 500ms ease; will-change: transform; z-index: 101; } /*-------------- Page ---------------*/ .pushable > .pusher { position: relative; backface-visibility: hidden; overflow: hidden; min-height: 100%; transition: transform 500ms ease; z-index: 2; } body.pushable > .pusher { background: #FDFDFA; } /* Pusher should inherit background from context */ .pushable > .pusher { background: inherit; } /*-------------- Dimmer ---------------*/ .pushable > .pusher:after { position: fixed; top: 0px; right: 0px; content: ''; background-color: rgba(0, 0, 0, 0.4); overflow: hidden; opacity: 0; transition: opacity 500ms; will-change: opacity; z-index: 1000; } /*-------------- Coupling ---------------*/ .ui.sidebar.menu .item, .play-button.sidebar.menu .item, .download-button.sidebar.menu .item { border-radius: 0em !important; } /******************************* States *******************************/ /*-------------- Dimmed ---------------*/ .pushable > .pusher.dimmed:after { width: 100% !important; height: 100% !important; opacity: 1 !important; } /*-------------- Animating ---------------*/ .ui.animating.sidebar, .play-button.animating.sidebar, .download-button.animating.sidebar { visibility: visible; } /*-------------- Visible ---------------*/ .ui.visible.sidebar, .play-button.visible.sidebar, .download-button.visible.sidebar { visibility: visible; transform: translate3d(0, 0, 0); } /* Shadow Direction */ .ui.left.visible.sidebar, .ui.right.visible.sidebar, .play-button.left.visible.sidebar, .play-button.right.visible.sidebar, .download-button.left.visible.sidebar, .download-button.right.visible.sidebar { box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); } .ui.top.visible.sidebar, .ui.bottom.visible.sidebar, .play-button.top.visible.sidebar, .play-button.bottom.visible.sidebar, .download-button.top.visible.sidebar, .download-button.bottom.visible.sidebar { box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); } /* Visible On Load */ .ui.visible.left.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .pusher, .play-button.visible.left.sidebar ~ .fixed, .play-button.visible.left.sidebar ~ .pusher, .download-button.visible.left.sidebar ~ .fixed, .download-button.visible.left.sidebar ~ .pusher { transform: translate3d(260px, 0, 0); } .ui.visible.right.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .pusher, .play-button.visible.right.sidebar ~ .fixed, .play-button.visible.right.sidebar ~ .pusher, .download-button.visible.right.sidebar ~ .fixed, .download-button.visible.right.sidebar ~ .pusher { transform: translate3d(-260px, 0, 0); } .ui.visible.top.sidebar ~ .fixed, .ui.visible.top.sidebar ~ .pusher, .play-button.visible.top.sidebar ~ .fixed, .play-button.visible.top.sidebar ~ .pusher, .download-button.visible.top.sidebar ~ .fixed, .download-button.visible.top.sidebar ~ .pusher { transform: translate3d(0, 36px, 0); } .ui.visible.bottom.sidebar ~ .fixed, .ui.visible.bottom.sidebar ~ .pusher, .play-button.visible.bottom.sidebar ~ .fixed, .play-button.visible.bottom.sidebar ~ .pusher, .download-button.visible.bottom.sidebar ~ .fixed, .download-button.visible.bottom.sidebar ~ .pusher { transform: translate3d(0, -36px, 0); } /* opposite sides visible forces content overlay */ .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed, .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher, .play-button.visible.left.sidebar ~ .play-button.visible.right.sidebar ~ .fixed, .play-button.visible.left.sidebar ~ .play-button.visible.right.sidebar ~ .pusher, .play-button.visible.right.sidebar ~ .play-button.visible.left.sidebar ~ .fixed, .play-button.visible.right.sidebar ~ .play-button.visible.left.sidebar ~ .pusher, .download-button.visible.left.sidebar ~ .download-button.visible.right.sidebar ~ .fixed, .download-button.visible.left.sidebar ~ .download-button.visible.right.sidebar ~ .pusher, .download-button.visible.right.sidebar ~ .download-button.visible.left.sidebar ~ .fixed, .download-button.visible.right.sidebar ~ .download-button.visible.left.sidebar ~ .pusher { transform: translate3d(0, 0, 0); } /*-------------- iOS ---------------*/ /******************************* Variations *******************************/ /*-------------- Width ---------------*/ /* Left / Right */ .ui.thin.left.sidebar, .ui.thin.right.sidebar, .play-button.thin.left.sidebar, .play-button.thin.right.sidebar, .download-button.thin.left.sidebar, .download-button.thin.right.sidebar { width: 150px; } .ui[class*="very thin"].left.sidebar, .ui[class*="very thin"].right.sidebar, .play-button[class*="very thin"].left.sidebar, .play-button[class*="very thin"].right.sidebar, .download-button[class*="very thin"].left.sidebar, .download-button[class*="very thin"].right.sidebar { width: 60px; } .ui.left.sidebar, .ui.right.sidebar, .play-button.left.sidebar, .play-button.right.sidebar, .download-button.left.sidebar, .download-button.right.sidebar { width: 260px; } .ui.wide.left.sidebar, .ui.wide.right.sidebar, .play-button.wide.left.sidebar, .play-button.wide.right.sidebar, .download-button.wide.left.sidebar, .download-button.wide.right.sidebar { width: 350px; } .ui[class*="very wide"].left.sidebar, .ui[class*="very wide"].right.sidebar, .play-button[class*="very wide"].left.sidebar, .play-button[class*="very wide"].right.sidebar, .download-button[class*="very wide"].left.sidebar, .download-button[class*="very wide"].right.sidebar { width: 475px; } /* Left Visible */ .ui.visible.thin.left.sidebar ~ .fixed, .ui.visible.thin.left.sidebar ~ .pusher, .play-button.visible.thin.left.sidebar ~ .fixed, .play-button.visible.thin.left.sidebar ~ .pusher, .download-button.visible.thin.left.sidebar ~ .fixed, .download-button.visible.thin.left.sidebar ~ .pusher { transform: translate3d(150px, 0, 0); } .ui.visible[class*="very thin"].left.sidebar ~ .fixed, .ui.visible[class*="very thin"].left.sidebar ~ .pusher, .play-button.visible[class*="very thin"].left.sidebar ~ .fixed, .play-button.visible[class*="very thin"].left.sidebar ~ .pusher, .download-button.visible[class*="very thin"].left.sidebar ~ .fixed, .download-button.visible[class*="very thin"].left.sidebar ~ .pusher { transform: translate3d(60px, 0, 0); } .ui.visible.wide.left.sidebar ~ .fixed, .ui.visible.wide.left.sidebar ~ .pusher, .play-button.visible.wide.left.sidebar ~ .fixed, .play-button.visible.wide.left.sidebar ~ .pusher, .download-button.visible.wide.left.sidebar ~ .fixed, .download-button.visible.wide.left.sidebar ~ .pusher { transform: translate3d(350px, 0, 0); } .ui.visible[class*="very wide"].left.sidebar ~ .fixed, .ui.visible[class*="very wide"].left.sidebar ~ .pusher, .play-button.visible[class*="very wide"].left.sidebar ~ .fixed, .play-button.visible[class*="very wide"].left.sidebar ~ .pusher, .download-button.visible[class*="very wide"].left.sidebar ~ .fixed, .download-button.visible[class*="very wide"].left.sidebar ~ .pusher { transform: translate3d(475px, 0, 0); } /* Right Visible */ .ui.visible.thin.right.sidebar ~ .fixed, .ui.visible.thin.right.sidebar ~ .pusher, .play-button.visible.thin.right.sidebar ~ .fixed, .play-button.visible.thin.right.sidebar ~ .pusher, .download-button.visible.thin.right.sidebar ~ .fixed, .download-button.visible.thin.right.sidebar ~ .pusher { transform: translate3d(-150px, 0, 0); } .ui.visible[class*="very thin"].right.sidebar ~ .fixed, .ui.visible[class*="very thin"].right.sidebar ~ .pusher, .play-button.visible[class*="very thin"].right.sidebar ~ .fixed, .play-button.visible[class*="very thin"].right.sidebar ~ .pusher, .download-button.visible[class*="very thin"].right.sidebar ~ .fixed, .download-button.visible[class*="very thin"].right.sidebar ~ .pusher { transform: translate3d(-60px, 0, 0); } .ui.visible.wide.right.sidebar ~ .fixed, .ui.visible.wide.right.sidebar ~ .pusher, .play-button.visible.wide.right.sidebar ~ .fixed, .play-button.visible.wide.right.sidebar ~ .pusher, .download-button.visible.wide.right.sidebar ~ .fixed, .download-button.visible.wide.right.sidebar ~ .pusher { transform: translate3d(-350px, 0, 0); } .ui.visible[class*="very wide"].right.sidebar ~ .fixed, .ui.visible[class*="very wide"].right.sidebar ~ .pusher, .play-button.visible[class*="very wide"].right.sidebar ~ .fixed, .play-button.visible[class*="very wide"].right.sidebar ~ .pusher, .download-button.visible[class*="very wide"].right.sidebar ~ .fixed, .download-button.visible[class*="very wide"].right.sidebar ~ .pusher { transform: translate3d(-475px, 0, 0); } /******************************* Animations *******************************/ /*-------------- Overlay ---------------*/ /* Set-up */ .ui.overlay.sidebar, .play-button.overlay.sidebar, .download-button.overlay.sidebar { z-index: 102; } /* Initial */ .ui.left.overlay.sidebar, .play-button.left.overlay.sidebar, .download-button.left.overlay.sidebar { transform: translate3d(-100%, 0%, 0); } .ui.right.overlay.sidebar, .play-button.right.overlay.sidebar, .download-button.right.overlay.sidebar { transform: translate3d(100%, 0%, 0); } .ui.top.overlay.sidebar, .play-button.top.overlay.sidebar, .download-button.top.overlay.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.overlay.sidebar, .play-button.bottom.overlay.sidebar, .download-button.bottom.overlay.sidebar { transform: translate3d(0%, 100%, 0); } /* Animation */ .animating.ui.overlay.sidebar, .ui.visible.overlay.sidebar, .animating.play-button.overlay.sidebar, .play-button.visible.overlay.sidebar, .animating.download-button.overlay.sidebar, .download-button.visible.overlay.sidebar { transition: transform 500ms ease; } /* End - Sidebar */ .ui.visible.left.overlay.sidebar, .play-button.visible.left.overlay.sidebar, .download-button.visible.left.overlay.sidebar { transform: translate3d(0%, 0%, 0); } .ui.visible.right.overlay.sidebar, .play-button.visible.right.overlay.sidebar, .download-button.visible.right.overlay.sidebar { transform: translate3d(0%, 0%, 0); } .ui.visible.top.overlay.sidebar, .play-button.visible.top.overlay.sidebar, .download-button.visible.top.overlay.sidebar { transform: translate3d(0%, 0%, 0); } .ui.visible.bottom.overlay.sidebar, .play-button.visible.bottom.overlay.sidebar, .download-button.visible.bottom.overlay.sidebar { transform: translate3d(0%, 0%, 0); } /* End - Pusher */ .ui.visible.overlay.sidebar ~ .fixed, .ui.visible.overlay.sidebar ~ .pusher, .play-button.visible.overlay.sidebar ~ .fixed, .play-button.visible.overlay.sidebar ~ .pusher, .download-button.visible.overlay.sidebar ~ .fixed, .download-button.visible.overlay.sidebar ~ .pusher { transform: none !important; } /*-------------- Push ---------------*/ /* Initial */ .ui.push.sidebar, .play-button.push.sidebar, .download-button.push.sidebar { transition: transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.push.sidebar, .play-button.left.push.sidebar, .download-button.left.push.sidebar { transform: translate3d(-100%, 0, 0); } .ui.right.push.sidebar, .play-button.right.push.sidebar, .download-button.right.push.sidebar { transform: translate3d(100%, 0, 0); } .ui.top.push.sidebar, .play-button.top.push.sidebar, .download-button.top.push.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.push.sidebar, .play-button.bottom.push.sidebar, .download-button.bottom.push.sidebar { transform: translate3d(0%, 100%, 0); } /* End */ .ui.visible.push.sidebar, .play-button.visible.push.sidebar, .download-button.visible.push.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Uncover ---------------*/ /* Initial */ .ui.uncover.sidebar, .play-button.uncover.sidebar, .download-button.uncover.sidebar { transform: translate3d(0, 0, 0); z-index: 1; } /* End */ .ui.visible.uncover.sidebar, .play-button.visible.uncover.sidebar, .download-button.visible.uncover.sidebar { transform: translate3d(0, 0, 0); transition: transform 500ms ease; } /*-------------- Slide Along ---------------*/ /* Initial */ .ui.slide.along.sidebar, .play-button.slide.along.sidebar, .download-button.slide.along.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.along.sidebar, .play-button.left.slide.along.sidebar, .download-button.left.slide.along.sidebar { transform: translate3d(-50%, 0, 0); } .ui.right.slide.along.sidebar, .play-button.right.slide.along.sidebar, .download-button.right.slide.along.sidebar { transform: translate3d(50%, 0, 0); } .ui.top.slide.along.sidebar, .play-button.top.slide.along.sidebar, .download-button.top.slide.along.sidebar { transform: translate3d(0, -50%, 0); } .ui.bottom.slide.along.sidebar, .play-button.bottom.slide.along.sidebar, .download-button.bottom.slide.along.sidebar { transform: translate3d(0%, 50%, 0); } /* Animation */ .ui.animating.slide.along.sidebar, .play-button.animating.slide.along.sidebar, .download-button.animating.slide.along.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.along.sidebar, .play-button.visible.slide.along.sidebar, .download-button.visible.slide.along.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Slide Out ---------------*/ /* Initial */ .ui.slide.out.sidebar, .play-button.slide.out.sidebar, .download-button.slide.out.sidebar { z-index: 1; } /* Sidebar - Initial */ .ui.left.slide.out.sidebar, .play-button.left.slide.out.sidebar, .download-button.left.slide.out.sidebar { transform: translate3d(50%, 0, 0); } .ui.right.slide.out.sidebar, .play-button.right.slide.out.sidebar, .download-button.right.slide.out.sidebar { transform: translate3d(-50%, 0, 0); } .ui.top.slide.out.sidebar, .play-button.top.slide.out.sidebar, .download-button.top.slide.out.sidebar { transform: translate3d(0%, 50%, 0); } .ui.bottom.slide.out.sidebar, .play-button.bottom.slide.out.sidebar, .download-button.bottom.slide.out.sidebar { transform: translate3d(0%, -50%, 0); } /* Animation */ .ui.animating.slide.out.sidebar, .play-button.animating.slide.out.sidebar, .download-button.animating.slide.out.sidebar { transition: transform 500ms ease; } /* End */ .ui.visible.slide.out.sidebar, .play-button.visible.slide.out.sidebar, .download-button.visible.slide.out.sidebar { transform: translate3d(0%, 0, 0); } /*-------------- Scale Down ---------------*/ /* Initial */ .ui.scale.down.sidebar, .play-button.scale.down.sidebar, .download-button.scale.down.sidebar { transition: transform 500ms ease; z-index: 102; } /* Sidebar - Initial */ .ui.left.scale.down.sidebar, .play-button.left.scale.down.sidebar, .download-button.left.scale.down.sidebar { transform: translate3d(-100%, 0, 0); } .ui.right.scale.down.sidebar, .play-button.right.scale.down.sidebar, .download-button.right.scale.down.sidebar { transform: translate3d(100%, 0, 0); } .ui.top.scale.down.sidebar, .play-button.top.scale.down.sidebar, .download-button.top.scale.down.sidebar { transform: translate3d(0%, -100%, 0); } .ui.bottom.scale.down.sidebar, .play-button.bottom.scale.down.sidebar, .download-button.bottom.scale.down.sidebar { transform: translate3d(0%, 100%, 0); } /* Pusher - Initial */ .ui.scale.down.left.sidebar ~ .pusher, .play-button.scale.down.left.sidebar ~ .pusher, .download-button.scale.down.left.sidebar ~ .pusher { transform-origin: 75% 50%; } .ui.scale.down.right.sidebar ~ .pusher, .play-button.scale.down.right.sidebar ~ .pusher, .download-button.scale.down.right.sidebar ~ .pusher { transform-origin: 25% 50%; } .ui.scale.down.top.sidebar ~ .pusher, .play-button.scale.down.top.sidebar ~ .pusher, .download-button.scale.down.top.sidebar ~ .pusher { transform-origin: 50% 75%; } .ui.scale.down.bottom.sidebar ~ .pusher, .play-button.scale.down.bottom.sidebar ~ .pusher, .download-button.scale.down.bottom.sidebar ~ .pusher { transform-origin: 50% 25%; } /* Animation */ .ui.animating.scale.down > .visible.ui.sidebar, .play-button.animating.scale.down > .visible.play-button.sidebar, .download-button.animating.scale.down > .visible.download-button.sidebar { transition: transform 500ms ease; } .ui.visible.scale.down.sidebar ~ .pusher, .ui.animating.scale.down.sidebar ~ .pusher, .play-button.visible.scale.down.sidebar ~ .pusher, .play-button.animating.scale.down.sidebar ~ .pusher, .download-button.visible.scale.down.sidebar ~ .pusher, .download-button.animating.scale.down.sidebar ~ .pusher { display: block !important; width: 100%; height: 100%; overflow: hidden !important; } /* End */ .ui.visible.scale.down.sidebar, .play-button.visible.scale.down.sidebar, .download-button.visible.scale.down.sidebar { transform: translate3d(0, 0, 0); } .ui.visible.scale.down.sidebar ~ .pusher, .play-button.visible.scale.down.sidebar ~ .pusher, .download-button.visible.scale.down.sidebar ~ .pusher { transform: scale(0.75); } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Sticky * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Sticky *******************************/ /* Packaged Theme */ /******************************* Sticky *******************************/ /* Site Theme */ /******************************* Site Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Sticky *******************************/ .ui.sticky, .play-button.sticky, .download-button.sticky { position: static; transition: none; z-index: 800; } /******************************* States *******************************/ /* Bound */ .ui.sticky.bound, .play-button.sticky.bound, .download-button.sticky.bound { position: absolute; left: auto; right: auto; } /* Fixed */ .ui.sticky.fixed, .play-button.sticky.fixed, .download-button.sticky.fixed { position: fixed; left: auto; right: auto; } /* Bound/Fixed Position */ .ui.sticky.bound.top, .ui.sticky.fixed.top, .play-button.sticky.bound.top, .play-button.sticky.fixed.top, .download-button.sticky.bound.top, .download-button.sticky.fixed.top { top: 0px; bottom: auto; } .ui.sticky.bound.bottom, .ui.sticky.fixed.bottom, .play-button.sticky.bound.bottom, .play-button.sticky.fixed.bottom, .download-button.sticky.bound.bottom, .download-button.sticky.fixed.bottom { top: auto; bottom: 0px; } /******************************* Types *******************************/ .ui.native.sticky, .play-button.native.sticky, .download-button.native.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Semantic UI - Tab * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Tab *******************************/ /* Loading */ /* Packaged Theme */ /******************************* Tab *******************************/ /* Loading */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* UI Tabs *******************************/ .ui.tab, .play-button.tab, .download-button.tab { display: none; } /******************************* States *******************************/ /*-------------------- Active ---------------------*/ .ui.tab.active, .ui.tab.open, .play-button.tab.active, .play-button.tab.open, .download-button.tab.active, .download-button.tab.open { display: block; } /*-------------------- Loading ---------------------*/ .ui.tab.loading, .play-button.tab.loading, .download-button.tab.loading { position: relative; overflow: hidden; display: block; min-height: 250px; } .ui.tab.loading *, .play-button.tab.loading *, .download-button.tab.loading * { position: relative !important; left: -10000px !important; } .ui.tab.loading:before, .ui.tab.loading.segment:before, .play-button.tab.loading:before, .play-button.tab.loading.segment:before, .download-button.tab.loading:before, .download-button.tab.loading.segment:before { position: absolute; content: ''; top: 100px; left: 50%; margin: -1.25em 0em 0em -1.25em; width: 2.5em; height: 2.5em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.tab.loading:after, .ui.tab.loading.segment:after, .play-button.tab.loading:after, .play-button.tab.loading.segment:after, .download-button.tab.loading:after, .download-button.tab.loading.segment:after { position: absolute; content: ''; top: 100px; left: 50%; margin: -1.25em 0em 0em -1.25em; width: 2.5em; height: 2.5em; animation: button-spin 0.6s linear; animation-iteration-count: infinite; border-radius: 500rem; border-color: #42495F transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent; } /******************************* Tab Overrides *******************************/ /******************************* User Overrides *******************************/ /*! * # Semantic UI - Transition * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ ╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ */ /******************************* Theme Selection *******************************/ /* To override a theme for an individual element specify theme name below */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Import Theme *******************************/ /******************************* Import Directives *******************************/ /*------------------ Theme -------------------*/ /*-------------------- Site Variables ---------------------*/ /* Default site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Packaged site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /* Component's site.variables */ /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /*------------------- Component Variables ---------------------*/ /* Default */ /******************************* Transition *******************************/ /* Packaged Theme */ /******************************* Transition *******************************/ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /******************************* Mix-ins *******************************/ /*------------------ Fonts -------------------*/ /*------------------ Overrides -------------------*/ /* End Config */ /******************************* Transitions *******************************/ .transition { animation-iteration-count: 1; animation-duration: 300ms; animation-timing-function: ease; animation-fill-mode: both; } /******************************* States *******************************/ /* Animating */ .animating.transition { backface-visibility: hidden; visibility: visible !important; } /* Loading */ .loading.transition { position: absolute; top: -99999px; left: -99999px; } /* Hidden */ .hidden.transition { display: none; visibility: hidden; } /* Visible */ .visible.transition { display: block !important; visibility: visible !important; /* backface-visibility: @backfaceVisibility; transform: @use3DAcceleration;*/ } /* Disabled */ .disabled.transition { animation-play-state: paused; } /******************************* Variations *******************************/ .looping.transition { animation-iteration-count: infinite; } /******************************* Transitions *******************************/ /* Some transitions adapted from Animate CSS https://github.com/daneden/animate.css Additional transitions adapted from Glide by Nick Pettit - https://github.com/nickpettit/glide */ /*-------------- Browse ---------------*/ .transition.browse { animation-duration: 500ms; } .transition.browse.in { animation-name: browseIn; } .transition.browse.out, .transition.browse.left.out { animation-name: browseOutLeft; } .transition.browse.right.out { animation-name: browseOutRight; } /* In */ @keyframes browseIn { 0% { transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { transform: scale(1) translateZ(0px); z-index: 999; } } /* Out */ @keyframes browseOutLeft { 0% { z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutRight { 0% { z-index: 999; transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } /*-------------- Drop ---------------*/ .drop.transition { transform-origin: top center; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { animation-name: dropIn; } .drop.transition.out { animation-name: dropOut; } /* Drop */ @keyframes dropIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes dropOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } /*-------------- Fade ---------------*/ .transition.fade.in { animation-name: fadeIn; } .transition[class*="fade up"].in { animation-name: fadeInUp; } .transition[class*="fade down"].in { animation-name: fadeInDown; } .transition[class*="fade left"].in { animation-name: fadeInLeft; } .transition[class*="fade right"].in { animation-name: fadeInRight; } .transition.fade.out { animation-name: fadeOut; } .transition[class*="fade up"].out { animation-name: fadeOutUp; } .transition[class*="fade down"].out { animation-name: fadeOutDown; } .transition[class*="fade left"].out { animation-name: fadeOutLeft; } .transition[class*="fade right"].out { animation-name: fadeOutRight; } /* In */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-10%); } 100% { opacity: 1; transform: translateY(0%); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(10%); } 100% { opacity: 1; transform: translateX(0%); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(-10%); } 100% { opacity: 1; transform: translateX(0%); } } /* Out */ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(5%); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0%); } 100% { opacity: 0; transform: translateY(-5%); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(5%); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0%); } 100% { opacity: 0; transform: translateX(-5%); } } /*-------------- Flips ---------------*/ .flip.transition.in, .flip.transition.out { animation-duration: 600ms; } .horizontal.flip.transition.in { animation-name: horizontalFlipIn; } .horizontal.flip.transition.out { animation-name: horizontalFlipOut; } .vertical.flip.transition.in { animation-name: verticalFlipIn; } .vertical.flip.transition.out { animation-name: verticalFlipOut; } /* In */ @keyframes horizontalFlipIn { 0% { transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @keyframes verticalFlipIn { 0% { transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { transform: perspective(2000px) rotateX(0deg); opacity: 1; } } /* Out */ @keyframes horizontalFlipOut { 0% { transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @keyframes verticalFlipOut { 0% { transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } /*-------------- Scale ---------------*/ .scale.transition.in { animation-name: scaleIn; } .scale.transition.out { animation-name: scaleOut; } @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } /* Out */ @keyframes scaleOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } /*-------------- Fly ---------------*/ /* Inward */ .transition.fly { animation-duration: 0.6s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .transition.fly.in { animation-name: flyIn; } .transition[class*="fly up"].in { animation-name: flyInUp; } .transition[class*="fly down"].in { animation-name: flyInDown; } .transition[class*="fly left"].in { animation-name: flyInLeft; } .transition[class*="fly right"].in { animation-name: flyInRight; } /* Outward */ .transition.fly.out { animation-name: flyOut; } .transition[class*="fly up"].out { animation-name: flyOutUp; } .transition[class*="fly down"].out { animation-name: flyOutDown; } .transition[class*="fly left"].out { animation-name: flyOutLeft; } .transition[class*="fly right"].out { animation-name: flyOutRight; } /* In */ @keyframes flyIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes flyInUp { 0% { opacity: 0; transform: translate3d(0, 1500px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes flyInDown { 0% { opacity: 0; transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; } } @keyframes flyInLeft { 0% { opacity: 0; transform: translate3d(1500px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } @keyframes flyInRight { 0% { opacity: 0; transform: translate3d(-1500px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } /* Out */ @keyframes flyOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } @keyframes flyOutUp { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } @keyframes flyOutDown { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } @keyframes flyOutRight { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @keyframes flyOutLeft { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } /*-------------- Slide ---------------*/ .transition.slide.in, .transition[class*="slide down"].in { animation-name: slideInY; transform-origin: top center; } .transition[class*="slide up"].in { animation-name: slideInY; transform-origin: bottom center; } .transition[class*="slide left"].in { animation-name: slideInX; transform-origin: center right; } .transition[class*="slide right"].in { animation-name: slideInX; transform-origin: center left; } .transition.slide.out, .transition[class*="slide down"].out { animation-name: slideOutY; transform-origin: top center; } .transition[class*="slide up"].out { animation-name: slideOutY; transform-origin: bottom center; } .transition[class*="slide left"].out { animation-name: slideOutX; transform-origin: center right; } .transition[class*="slide right"].out { animation-name: slideOutX; transform-origin: center left; } /* In */ @keyframes slideInY { 0% { opacity: 0; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } } @keyframes slideInX { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } } /* Out */ @keyframes slideOutY { 0% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); } } @keyframes slideOutX { 0% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(0); } } /*-------------- Swing ---------------*/ .transition.swing { animation-duration: 800ms; } .transition[class*="swing down"].in { animation-name: swingInX; transform-origin: top center; } .transition[class*="swing up"].in { animation-name: swingInX; transform-origin: bottom center; } .transition[class*="swing left"].in { animation-name: swingInY; transform-origin: center right; } .transition[class*="swing right"].in { animation-name: swingInY; transform-origin: center left; } .transition.swing.out, .transition[class*="swing down"].out { animation-name: swingOutX; transform-origin: top center; } .transition[class*="swing up"].out { animation-name: swingOutX; transform-origin: bottom center; } .transition[class*="swing left"].out { animation-name: swingOutY; transform-origin: center right; } .transition[class*="swing right"].out { animation-name: swingOutY; transform-origin: center left; } /* In */ @keyframes swingInX { 0% { transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { transform: perspective(1000px) rotateX(15deg); } 80% { transform: perspective(1000px) rotateX(-7.5deg); } 100% { transform: perspective(1000px) rotateX(0deg); } } @keyframes swingInY { 0% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { transform: perspective(1000px) rotateY(-17.5deg); } 80% { transform: perspective(1000px) rotateY(7.5deg); } 100% { transform: perspective(1000px) rotateY(0deg); } } /* Out */ @keyframes swingOutX { 0% { transform: perspective(1000px) rotateX(0deg); } 40% { transform: perspective(1000px) rotateX(-7.5deg); } 60% { transform: perspective(1000px) rotateX(17.5deg); } 80% { transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes swingOutY { 0% { transform: perspective(1000px) rotateY(0deg); } 40% { transform: perspective(1000px) rotateY(7.5deg); } 60% { transform: perspective(1000px) rotateY(-10deg); } 80% { transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } /******************************* Static Animations *******************************/ /*-------------- Emphasis ---------------*/ .flash.transition { animation-duration: 750ms; animation-name: flash; } .shake.transition { animation-duration: 750ms; animation-name: shake; } .bounce.transition { animation-duration: 750ms; animation-name: bounce; } .tada.transition { animation-duration: 750ms; animation-name: tada; } .pulse.transition { animation-duration: 500ms; animation-name: pulse; } .jiggle.transition { animation-duration: 750ms; animation-name: jiggle; } /* Flash */ @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* Shake */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } /* Bounce */ @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } /* Tada */ @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } /* Pulse */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* Rubberband */ @keyframes jiggle { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } /******************************* Site Overrides *******************************/ /*-------------- Rotate In ---------------*/ /* Inward */ .transition.rotate { animation-duration: 0.6s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .transition.rotate.in { animation-name: rotateIn; } .transition[class*="rotate down left"].in { animation-name: rotateInDownLeft; } .transition[class*="rotate down right"].in { animation-name: rotateInDownRight; } .transition[class*="rotate up left"].in { animation-name: rotateInUpLeft; } .transition[class*="rotate up right"].in { animation-name: rotateInUpRight; } /* Outward */ .transition.rotate.out { animation-name: rotateOut; } .transition[class*="rotate down left"].out { animation-name: rotateOutDownLeft; } .transition[class*="rotate down right"].out { animation-name: rotateOutDownRight; } .transition[class*="rotate up left"].out { animation-name: rotateOutUpLeft; } .transition[class*="rotate up right"].out { animation-name: rotateOutUpRight; } /* In */ @keyframes rotateIn { from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { transform-origin: center; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } } /* Out */ @keyframes rotateOut { from { transform-origin: center; opacity: 1; } to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } /* Import all components */ /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ Import this file into your LESS project to use Semantic UI without build tools */ /* Global */ /* Elements */ /* Collections */ /* Views */ /* Modules */ /* Reference import */ /******************************* Layout *******************************/ /* Main Layout */ #filelist, #maineditor, #sidedocs { position: absolute; top: 5rem; bottom: 0rem; } .hideMenuBar #filelist, .hideMenuBar #maineditor, .hideMenuBar #sidedocs { top: 0; } .full-abs { position: absolute !important; left: 0; top: 0; bottom: 0; right: 0; } /* Main Editor layout */ #maineditor { left: 23rem; right: 0; overflow: visible; } .rtl #maineditor { left: 0; right: 23rem; } /* File list / Simulator layout */ #simulator { height: 100%; } #filelist, #downloadArea { min-width: 23rem; max-width: 23rem; left: 0; } .rtl #filelist { left: auto; right: 0; } #filelist { padding: 1em 2em 1em 2em; overflow-x: hidden; overflow-y: auto; margin-top: 0; margin-bottom: 0; width: 100%; background-color: #fff; } #filelist .simtoolbar { -webkit-transition: opacity 0.2s; /* Safari */ -moz-transition: opacity 0.2s; /* Mozilla */ -webkit-transition-timing-function: linear; /* Mozilla */ -o-transition: opacity 0.2s; /* Opera */ transition: opacity 0.2s; transition-timing-function: linear; } #downloadArea { margin-top: 0 !important; padding-top: 0.7rem; background-color: #fff; } .filemenu { direction: ltr; } #filelist .menu { width: 100%; } #filelist .nested.item { padding-left: 4rem; } #filelist .header { background: rgba(0, 0, 0, 0.05); } #simulators { text-align: center; } /* Getting started button */ #getting-started-btn { display: none; z-index: 9; position: absolute; top: 5rem; right: 2rem; } .rtl #getting-started-btn { right: auto; left: 2rem; } #getting-started-btn:not(.sideDocs) { display: block; } .ui.button.getting-started-btn .ui.text, .play-button.button.getting-started-btn .play-button.text, .ui.play-button.getting-started-btn .ui.text, .download-button.button.getting-started-btn .download-button.text, .ui.download-button.getting-started-btn .ui.text { font-weight: 100 !important; } /* Side Docs layout */ #sidedocs { display: none; overflow-y: auto; right: 0; border: none; top: 0; padding-top: 5rem; height: 100%; } .rtl #sidedocs { right: auto; left: 0; } #sidedocspopout { position: absolute; top: 6rem; right: 4.25rem; display: none; } .rtl #sidedocspopout { right: auto; left: 4.25rem; } #sidedocsexpand { position: absolute; top: 6rem; right: 1.25rem; display: none; } .rtl #sidedocsexpand { right: auto; left: 1.25rem; } /* Tutorial Mode */ .tutorial-menuitem > .selected { background-color: #3CB5B5 !important; padding: 1.3rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } #tutorialcard { position: absolute; z-index: 9; min-width: 320px; } #tutorialcard.top { /* top right */ top: 1rem; right: 1rem; } .rtl #tutorialcard.top { /* bottom left */ right: auto; left: 1rem; } #tutorialcard.bottom { /* bottom right */ bottom: 6rem; right: 1rem; } .rtl #tutorialcard.bottom { /* bottom left */ right: auto; left: 1rem; } #tutorialcard .ui.card, #tutorialcard .play-button.card, #tutorialcard .download-button.card { padding: 2px; } #tutorialcontent { display: block; width: 100%; overflow: hidden; border: none; height: 100%; } body#docs.tutorial { overflow-y: hidden; } #docs.tutorial .ui.segment, #docs.tutorial .play-button.segment, #docs.tutorial .download-button.segment { padding: 0; margin: 0; box-shadow: none; border: none; } #docs.tutorial #content { margin-bottom: 0.5rem !important; } /* Cookie Message */ #cookiemsg { position: absolute; right: 2rem; bottom: 12rem; width: 18rem; text-align: left; z-index: 1000; } #cookiemsg > a { color: white; text-decoration: underline; } .rtl #cookiemsg { right: auto; left: 2rem; text-align: right; } .collapsedEditorTools #cookiemsg { bottom: 6rem; } /* Simulator */ div.simframe { border: none; margin: 0 0 0.5rem 0; position: relative; background: transparent; width: 100%; padding-bottom: 81.96%; } div.simframe > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .simHeadless { height: 0 !important; width: 0 !important; } /* Menu */ .ui.menu .item.editor-menuitem, .play-button.menu .item.editor-menuitem, .download-button.menu .item.editor-menuitem { background: rgba(27, 28, 29, 0.3) !important; margin: 0.5rem; padding: 0.7rem; border-radius: 0.5rem !important; } .sandbox .ui.menu.fixed .item:first-child, .sandbox .play-button.menu.fixed .item:first-child, .sandbox .download-button.menu.fixed .item:first-child { border-radius: 0.5rem !important; } .ui.menu.fixed .item.blocks-menuitem, .ui.menu.fixed .item.javascript-menuitem, .play-button.menu.fixed .item.blocks-menuitem, .play-button.menu.fixed .item.javascript-menuitem, .download-button.menu.fixed .item.blocks-menuitem, .download-button.menu.fixed .item.javascript-menuitem { border-radius: 0.2rem !important; } .ui.inverted.menu .item.blocks-menuitem, .play-button.inverted.menu .item.blocks-menuitem, .download-button.inverted.menu .item.blocks-menuitem { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } .ui.inverted.menu .item.javascript-menuitem, .play-button.inverted.menu .item.javascript-menuitem, .download-button.inverted.menu .item.javascript-menuitem { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; } .ui.inverted.menu .item.blocks-menuitem, .ui.inverted.menu .item.javascript-menuitem, .play-button.inverted.menu .item.blocks-menuitem, .play-button.inverted.menu .item.javascript-menuitem, .download-button.inverted.menu .item.blocks-menuitem, .download-button.inverted.menu .item.javascript-menuitem { -webkit-transition: background 1s; /* Safari */ -moz-transition: background 1s; /* Mozilla */ -webkit-transition-timing-function: ease-in; /* Mozilla */ -o-transition: background 1s; /* Opera */ transition: background 1s; transition-timing-function: ease-in; } /* Editor tools */ #editortools { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 3; height: 5rem; background-color: #fff; } #blocksArea, #monacoEditor, #pxtJsonEditor, #filelist { bottom: 5rem !important; } /* Help card */ #helpcard { position: absolute; right: 7rem; bottom: 2.2rem; margin: 0; z-index: 5; font-size: 0.8rem; } .rtl #helpcard { left: 7rem; right: auto; } /* Logo */ .ui.menu .ui.item.logo, .play-button.menu .play-button.item.logo, .download-button.menu .download-button.item.logo { font-size: 2.2rem; margin: 0; padding: 0rem !important; } .ui.item.logo .name, .play-button.item.logo .name, .download-button.item.logo .name { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, inherit; color: #666666; padding: 0 0.3rem; } .ui.item.logo svg, .play-button.item.logo svg, .download-button.item.logo svg { width: 1.2rem; height: 1.2rem; } .ui.item.logo img, .play-button.item.logo img, .download-button.item.logo img { max-height: 2.0rem; margin-left: 1rem; margin-right: 1rem; } .modal img.ui.logo, .modal img.play-button.logo, .modal img.download-button.logo { max-width: 10em; max-height: 3em; vertical-align: middle; } /* Sandbox */ .sandboxfooter { position: absolute; bottom: 0rem; right: 1rem; z-index: 5; font-size: 0.7rem; margin-bottom: 0.2rem !important; } .rtl .sandboxfooter { right: auto; left: 1rem; } /* code card */ .ui.card .image pre, .play-button.card .image pre, .download-button.card .image pre { margin-left: 0.5rem; margin-right: 0.5rem; color: #000; font-size: 0.7rem; white-space: pre-wrap; max-height: 10rem; overflow-y: hidden; } /* Popup message */ #msg { position: absolute; bottom: 5rem; left: 0; right: 0; text-align: center; } #msg > div { display: inline-block; z-index: 100; } #msg > div:empty { display: none; } /* Scrollbars */ /* OSX Lion+ hides scrollbars while not in use, this overrides that so it's obvious when a div can be scrolled */ ::-webkit-scrollbar { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #ccc; box-shadow: 0 0 1px #ccc; -webkit-box-shadow: 0 0 1px #ccc; } /* Button Colors */ /******************************* Docs *******************************/ #docs { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif !important; } #docs > h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif !important; } #docs span.block { display: inline-block; vertical-align: middle; } /******************************* Projects Modal *******************************/ .ui.modal.projectsdialog .ui.dividing.header, .ui.modal.projectsdialog .content > .header, .play-button.modal.projectsdialog .play-button.dividing.header, .play-button.modal.projectsdialog .content > .header, .download-button.modal.projectsdialog .download-button.dividing.header, .download-button.modal.projectsdialog .content > .header { font-weight: normal !important; } .ui.modal.projectsdialog .ui.secondary.inverted.pointing.menu, .play-button.modal.projectsdialog .play-button.secondary.inverted.pointing.menu, .download-button.modal.projectsdialog .download-button.secondary.inverted.pointing.menu { border: 0; } .ui.modal.projectsdialog .group, .play-button.modal.projectsdialog .group, .download-button.modal.projectsdialog .group { padding: 1rem; } .ui.modal.projectsdialog > .content, .play-button.modal.projectsdialog > .content, .download-button.modal.projectsdialog > .content { padding: 0 !important; } .ui.modal.projectsdialog .tabsegment, .play-button.modal.projectsdialog .tabsegment, .download-button.modal.projectsdialog .tabsegment { min-height: 450px; background: white !important; } /******************************* Blockly *******************************/ .blocklyTooltipDiv { border: none !important; box-shadow: none !important; background-color: transparent !important; opacity: 1 !important; } .blocklyToolboxDiv, .monacoToolboxDiv { background: #F6F4E6 !important; z-index: 1; -webkit-transition: width 1s; /* Safari */ -moz-transition: width 1s; /* Mozilla */ -webkit-transition-timing-function: ease-in; /* Mozilla */ -o-transition: width 1s; /* Opera */ transition: width 1s; transition-timing-function: ease-in; } svg.blocklySvg { background-color: #fff !important; } #blocksEditor .injectionDiv svg { overflow: visible; } span.blocklyTreeLabel, text.blocklyText, input.blocklyHtmlInput { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important; } /* Using 1rem creates font size issues in Edge text.blocklyText { font-size:1rem !important; } */ span.blocklyTreeLabel { font-size: 1.25rem; } .blocklyFlyoutButtonShadow { fill: none !important; } .blocklyFlyoutLabelText { fill: white !important; font-size: 1rem; } .blocklyFlyoutLabelText:hover { fill: white !important; } /* Opacity of blockly flyout background */ .blocklyFlyoutBackground { fill-opacity: 0.9 !important; } /* This horrendous selector and the next are for subcategories in the Blockly toolbox */ div.blocklyTreeRoot div div div div div.blocklyTreeRow { border-left-width: 12px !important; padding-left: 0px !important; } div.blocklyTreeRoot div div div div div.blocklyTreeRow span.blocklyTreeLabel { font-size: 1rem; } /* The trash icon inside the toolbox */ #blocklyTrashIcon { position: absolute; top: 20%; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 100px; height: 80px; z-index: 8; font-size: 5rem; color: #3CB5B5; } /* Blockly / Monaco Toolbox Buttons */ #blocklyToolboxButtons, #monacoToolboxButtons { margin-top: 0.1rem; font-size: 3rem; } /* Blockly Search bar */ .blocklySearchInputField { border: 0 !important; border-radius: 0 !important; } /* Blockly toolbox icons */ span.blocklyTreeIcon { opacity: 1; margin: -0.2em 0.25em 0em 0.25em; width: 1.18em; font-family: 'Icons'; font-style: normal; font-weight: normal; text-decoration: inherit; text-align: center; speak: none; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; backface-visibility: hidden; font-size: 1.2rem; display: none; } .blocklyTreeSelected .blocklyTreeIcon { color: white; } .blocklyTreeIcon.blocklyTreeIconsearch::before { content: "\f002"; } .blocklyTreeIcon.blocklyTreeIconDefault::before { content: "\f12e"; } .blocklyTreeIcon.blocklyTreeIconadvanced::before { content: "\f141"; } .blocklyTreeIcon.blocklyTreeIconmore::before { content: "\f141"; } .blocklyTreeIcon.blocklyTreeIconaddpackage::before { content: "\f055"; } .blocklyTreeIcon.blocklyTreeIconloops::before { content: "\f01e"; } .blocklyTreeIcon.blocklyTreeIconmath::before { content: "\f1ec"; } .blocklyTreeIcon.blocklyTreeIconlogic::before { content: "\f074"; } .blocklyTreeIcon.blocklyTreeIconvariables::before { content: "\f039"; } .blocklyTreeIcon.blocklyTreeIcontext::before { content: "\f035"; } .blocklyTreeIcon.blocklyTreeIconlists::before { content: "\f0cb"; } /* Blockly Slider field */ .blocklyWidgetDiv .goog-slider-horizontal { background: white; border: 2px solid black; border-radius: 5px; } /* Fade out disabled blocks, but don't completely lose the colour */ .blocklyDisabled > .blocklyPathDark { display: block !important; fill-opacity: 0.5; } /******************************* Monaco Editor *******************************/ .monaco-editor .monaco-scrollable-element.editor-scrollable { margin-left: .5rem; } /* Monaco Editor Line number colors, changed from the default light theme */ .monaco-editor.vs .line-numbers { color: #2c3e50 !important; } /* Monaco Editor Line number background, changed from the default light theme */ .monaco-editor.vs .margin-view-overlays.monaco-editor-background { background: rgba(0, 0, 0, 0.05); } /* Monaco Editor Current line highlighting, only needed for the light theme */ .monaco-editor.vs .current-line { background: rgba(0, 0, 255, 0.1); } /* Monaco Editor Suggest Widget, styling */ .monaco-editor .suggest-widget { border-radius: 5px; } .monaco-list-row.focused { background-color: #0078D7; color: #fff; } .monaco-editor.vs .suggest-widget:not(.frozen) .monaco-list .monaco-list-row .monaco-highlighted-label .highlight { color: #0078D7; } .monaco-editor.vs .suggest-widget:not(.frozen) .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight { color: #fff; } .monaco-editor.vs .suggest-widget .details > .monaco-scrollable-element > .body > .type, .monaco-editor .suggest-widget .monaco-list .monaco-list-row .type-label { color: #FFB900; } .monaco-editor.vs .suggest-widget .details > .monaco-scrollable-element > .body > .docs, .monaco-editor .suggest-widget .monaco-list .monaco-list-row .docs { color: #fff; } /* Monaco Editor Main tokens */ .monaco-editor .highlight-statement { background-color: #FFB900; } /* Monaco Toolbox */ .monacoFlyout { font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; background: rgba(221, 221, 221, 0.8); overflow-x: visible; overflow-y: auto; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .monacoFlyout div { margin: 1.1rem; } .monacoDraggableBlock { color: #FFFFFF; padding: 0.6rem; border-radius: 8px; border: solid 3px #FFFFFF; cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } .monacoDraggableBlock span.sig { opacity: 0.7; } .monacoDraggableBlock span.docs { display: block; /* enable as needed */ color: #FFFFFF; font-size: 70%; max-width: 22rem; } .monacoDraggableBlock:hover { border: solid 3px #fc3 !important; } /****************************** Avatar ******************************/ .avatar { position: relative; } #root .avatar .message { margin-left: 4em; margin-bottom: 1em; } .avatar .avatar-image { position: absolute; left: 0; top: 1em; width: 3em; height: 3em; background-size: contain; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2018.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%0A%0A%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%0A%20%20%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%20%20%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%0A%20%20%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22Ebene_1%22%0A%20%20%20x%3D%220px%22%0A%20%20%20y%3D%220px%22%0A%20%20%20viewBox%3D%220%200%20175.49999%20172.4%22%0A%20%20%20enable-background%3D%22new%200%200%20841.9%20595.3%22%0A%20%20%20xml%3Aspace%3D%22preserve%22%0A%20%20%20inkscape%3Aversion%3D%220.91%20r13725%22%0A%20%20%20sodipodi%3Adocname%3D%22Logo_Calliope_Woman.svg%22%0A%20%20%20width%3D%22175.5%22%0A%20%20%20height%3D%22172.39999%22%3E%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata5011%22%3E%3Crdf%3ARDF%3E%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%20%2F%3E%3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E%3C%2Fcc%3AWork%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%0A%20%20%20%20%20id%3D%22defs5009%22%20%2F%3E%3Csodipodi%3Anamedview%0A%20%20%20%20%20pagecolor%3D%22%23ffffff%22%0A%20%20%20%20%20bordercolor%3D%22%23666666%22%0A%20%20%20%20%20borderopacity%3D%221%22%0A%20%20%20%20%20objecttolerance%3D%2210%22%0A%20%20%20%20%20gridtolerance%3D%2210%22%0A%20%20%20%20%20guidetolerance%3D%2210%22%0A%20%20%20%20%20inkscape%3Apageopacity%3D%220%22%0A%20%20%20%20%20inkscape%3Apageshadow%3D%222%22%0A%20%20%20%20%20inkscape%3Awindow-width%3D%221920%22%0A%20%20%20%20%20inkscape%3Awindow-height%3D%221137%22%0A%20%20%20%20%20id%3D%22namedview5007%22%0A%20%20%20%20%20showgrid%3D%22false%22%0A%20%20%20%20%20inkscape%3Azoom%3D%220.34208337%22%0A%20%20%20%20%20inkscape%3Acx%3D%22420.95001%22%0A%20%20%20%20%20inkscape%3Acy%3D%22297.64999%22%0A%20%20%20%20%20inkscape%3Awindow-x%3D%22-8%22%0A%20%20%20%20%20inkscape%3Awindow-y%3D%22156%22%0A%20%20%20%20%20inkscape%3Awindow-maximized%3D%221%22%0A%20%20%20%20%20inkscape%3Acurrent-layer%3D%22Ebene_1%22%20%2F%3E%3Cg%0A%20%20%20%20%20id%3D%22g4955%22%0A%20%20%20%20%20transform%3D%22translate(-260.90025%2C-204.1)%22%3E%3Cg%0A%20%20%20%20%20%20%20id%3D%22g4957%22%3E%3Cdefs%0A%20%20%20%20%20%20%20%20%20id%3D%22defs4959%22%3E%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22SVGID_7_%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%22193.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%22204.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22318.29999%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22256.29999%22%20%2F%3E%3C%2Fdefs%3E%3CclipPath%0A%20%20%20%20%20%20%20%20%20id%3D%22SVGID_1_%22%3E%3Cuse%0A%20%20%20%20%20%20%20%20%20%20%20xlink%3Ahref%3D%22%23SVGID_7_%22%0A%20%20%20%20%20%20%20%20%20%20%20overflow%3D%22visible%22%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22use4963%22%0A%20%20%20%20%20%20%20%20%20%20%20style%3D%22overflow%3Avisible%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22100%25%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22100%25%22%20%2F%3E%3C%2FclipPath%3E%3C%2Fg%3E%3Cg%0A%20%20%20%20%20%20%20id%3D%22g4965%22%3E%3Cdefs%0A%20%20%20%20%20%20%20%20%20id%3D%22defs4967%22%3E%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22SVGID_9_%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%22193.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%22204.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22318.29999%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22256.29999%22%20%2F%3E%3C%2Fdefs%3E%3CclipPath%0A%20%20%20%20%20%20%20%20%20id%3D%22SVGID_2_%22%3E%3Cuse%0A%20%20%20%20%20%20%20%20%20%20%20xlink%3Ahref%3D%22%23SVGID_9_%22%0A%20%20%20%20%20%20%20%20%20%20%20overflow%3D%22visible%22%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22use4971%22%0A%20%20%20%20%20%20%20%20%20%20%20style%3D%22overflow%3Avisible%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22100%25%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22100%25%22%20%2F%3E%3C%2FclipPath%3E%3C%2Fg%3E%3Cg%0A%20%20%20%20%20%20%20id%3D%22g4973%22%3E%3Cdefs%0A%20%20%20%20%20%20%20%20%20id%3D%22defs4975%22%3E%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22SVGID_11_%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%22193.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%22204.10001%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22318.29999%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22256.29999%22%20%2F%3E%3C%2Fdefs%3E%3CclipPath%0A%20%20%20%20%20%20%20%20%20id%3D%22SVGID_3_%22%3E%3Cuse%0A%20%20%20%20%20%20%20%20%20%20%20xlink%3Ahref%3D%22%23SVGID_11_%22%0A%20%20%20%20%20%20%20%20%20%20%20overflow%3D%22visible%22%0A%20%20%20%20%20%20%20%20%20%20%20id%3D%22use4979%22%0A%20%20%20%20%20%20%20%20%20%20%20style%3D%22overflow%3Avisible%22%0A%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20y%3D%220%22%0A%20%20%20%20%20%20%20%20%20%20%20width%3D%22100%25%22%0A%20%20%20%20%20%20%20%20%20%20%20height%3D%22100%25%22%20%2F%3E%3C%2FclipPath%3E%3Cpath%0A%20%20%20%20%20%20%20%20%20clip-path%3D%22url(%23SVGID_3_)%22%0A%20%20%20%20%20%20%20%20%20d%3D%22m%20436.4%2C262%20-47.9%2C0%200%2C-46%20c%200%2C-4.7%203.8%2C-8.4%208.4%2C-8.4%20l%2031%2C0%20c%204.7%2C0%208.4%2C3.8%208.4%2C8.4%20l%200%2C46%20z%22%0A%20%20%20%20%20%20%20%20%20id%3D%22path4981%22%0A%20%20%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20%20%20style%3D%22fill%3A%234a5261%22%20%2F%3E%3C%2Fg%3E%3Crect%0A%20%20%20%20%20%20%20x%3D%22394.79999%22%0A%20%20%20%20%20%20%20y%3D%22218.7%22%0A%20%20%20%20%20%20%20width%3D%2235.099998%22%0A%20%20%20%20%20%20%20height%3D%2243.200001%22%0A%20%20%20%20%20%20%20id%3D%22rect4983%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%238096a1%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20317.6%2C239.5%200%2C61%2071%2C0.2%20c%200%2C0%200%2C-57.3%200%2C-61%200%2C-19.5%20-16.1%2C-35.6%20-35.6%2C-35.6%20-19.6%2C0%20-35.4%2C15.8%20-35.4%2C35.4%22%0A%20%20%20%20%20%20%20id%3D%22path4985%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23855c33%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20412.4%2C376.5%20-114.2%2C0%20c%20-35.6%2C0%20-50.9%2C-45.2%20-22.6%2C-66.8%20l%2063.8%2C-47.8%2096.9%2C0%200%2C90.7%20c%200.1%2C13.2%20-10.6%2C23.9%20-23.9%2C23.9%22%0A%20%20%20%20%20%20%20id%3D%22path4987%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%2326a6ab%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22345.7%2C257.3%20334.8%2C298.8%20285.1%2C302.5%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4989%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%2342c9c9%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22354%2C283.8%20332.5%2C283.8%20345.7%2C257.3%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4991%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23f7f5e8%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22375.4%2C283.8%20354%2C283.8%20362.2%2C257.3%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4993%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23f7f5e8%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22373.1%2C298.8%20334.8%2C298.8%20332.5%2C283.8%20375.4%2C283.8%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon4995%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23bdd1cf%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20400.6%2C376.5%20c%20-3.5%2C-26.2%20-10.6%2C-58%20-27.3%2C-77.7%20l%20-0.2%2C0%20-19%2C0%20-19%2C0%20-0.2%2C0%20c%20-16.7%2C19.8%20-23.8%2C51.5%20-27.3%2C77.7%20l%2093%2C0%20z%22%0A%20%20%20%20%20%20%20id%3D%22path4997%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23f7f5e8%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20357%2C258%20-6.1%2C0%20c%20-6.4%2C0%20-11.5%2C-5.2%20-11.5%2C-11.5%20l%200%2C-19.7%2029.2%2C0%200%2C19.7%20c%20-0.1%2C6.3%20-5.3%2C11.5%20-11.6%2C11.5%22%0A%20%20%20%20%20%20%20id%3D%22path4999%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffcc99%22%20%2F%3E%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20335.8%2C376.5%200%2C-77.7%20c%2012.4%2C29.1%2027.7%2C64.3%2046.5%2C77.7%20l%20-46.5%2C0%20z%22%0A%20%20%20%20%20%20%20id%3D%22path5001%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23bdd1cf%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22362.2%2C257.3%20345.7%2C257.3%20354%2C283.8%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon5003%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffcc99%22%20%2F%3E%3Cpolygon%0A%20%20%20%20%20%20%20points%3D%22436.4%2C315.3%20394.8%2C262%20436.4%2C262%20%22%0A%20%20%20%20%20%20%20id%3D%22polygon5005%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%2342c9c9%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .avatar .message:after { top: 1.1em; left: -1em; bottom: auto; border-width: 0px 1em 0.7em 0; border-color: rgba(0, 0, 0, 0) #EEE; content: ''; position: absolute; border-style: solid; display: block; width: 0; } /******************************* Layout Variables *******************************/ .ui.widedesktop.only, .play-button.widedesktop.only, .download-button.widedesktop.only { display: none !important; } .ui.tablet.only, .play-button.tablet.only, .download-button.tablet.only { display: none !important; } @media only screen and (min-width: 1200px) and (min-height: 30em) { .ui.widedesktop.only, .play-button.widedesktop.only, .download-button.widedesktop.only { display: inherit !important; } .ui.widedesktop.hide, .play-button.widedesktop.hide, .download-button.widedesktop.hide { display: none !important; } } /* smaller desktop screen */ @media only screen and (max-width: 991px), only screen and (max-aspect-ratio: 12/10) { .ui.desktop.only, .play-button.desktop.only, .download-button.desktop.only { display: none !important; } } /* thin desktop portrait mode */ @media only screen and (max-width: 991px), only screen and (max-aspect-ratio: 7/10) { .ui.landscape.only, .play-button.landscape.only, .download-button.landscape.only { display: none !important; } } @media only screen and (min-width: 992px) { .ui.portrait.only, .play-button.portrait.only, .download-button.portrait.only { display: none !important; } } /* Tablet only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.tablet.only, .play-button.tablet.only, .download-button.tablet.only { display: inherit !important; } } /* Mobile + Tablet */ @media only screen and (max-width: 991px) { .ui.portrait.only, .play-button.portrait.only, .download-button.portrait.only { display: inherit !important; } .ui.portrait.hide, .play-button.portrait.hide, .download-button.portrait.hide { display: none !important; } } /* Screens with decent vertical space */ @media only screen and (max-height: 44rem) { .ui.tall.only, .play-button.tall.only, .download-button.tall.only { display: none !important; } } @media only screen and (min-width: 320px) { .ui.thin.only, .play-button.thin.only, .download-button.thin.only { display: none !important; } } @media only screen and (max-width: 320px) { .ui.wide.only, .play-button.wide.only, .download-button.wide.only { display: none !important; } } /******************************* Media Adjustments *******************************/ /* Large Monitor */ @media only screen and (min-width: 1200px) { /* Layout */ .sideDocs #maineditor, .sideDocs #editortools { right: 20rem; } .rtl .sideDocs #maineditor { left: 20rem; right: 23rem; } .rtl .sideDocs #editortools { left: 20rem; right: 0; } .sideDocs #sidedocs { display: block; width: 20rem; } #sidedocspopout, #sidedocsexpand { display: block; } /* Blockly */ div.blocklyTreeRow { min-width: 200px; } } /* Small Monitor */ @media only screen and (min-width: 992px) and (max-width: 1199px) { /* Blockly row */ div.blocklyTreeRow { min-width: 200px; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 991px) { /* Blockly */ div.blocklyTreeRow { padding-top: 0.25rem !important; padding-bottom: 1.5rem !important; border-left-width: 12px !important; } div.blocklyTreeRoot div div div div div.blocklyTreeRow { border-left-width: 18px !important; padding-top: 0px !important; padding-bottom: 1.6rem !important; } } /* Mobile */ /* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */ @media only screen and (min-width: 992px) { /* Blockly */ div.blocklyTreeRow { padding-top: 0.5rem !important; padding-bottom: 2.0rem !important; border-left-width: 12px !important; } div.blocklyTreeRoot div div div div div.blocklyTreeRow { border-left-width: 18px !important; padding-top: 0px !important; padding-bottom: 1.6rem !important; } .collapsedEditorTools #filelist { display: none; } .collapsedEditorTools #downloadArea { background: #fff; } .collapsedEditorTools #maineditor { left: 0; } .rtl .collapsedEditorTools #maineditor { left: inherit; right: 0 !important; } #cookiemsg { bottom: 7.5rem; } /* Full screen */ .fullscreensim #filelist { position: fixed; z-index: 100; top: 0; left: 0; bottom: 0; right: 0; padding: 0; max-width: 100%; min-width: 100%; height: 100%; } .fullscreensim #boardview { position: relative; height: 100%; background-color: white; padding: 5rem; padding-left: calc(10rem); padding-right: calc(10rem); background-color: #1B1C1D; background: #1B1C1D; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#1B1C1D 50%, #fff); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#1B1C1D 50%, #fff); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#1B1C1D 50%, #fff); /* For Firefox 3.6 to 15 */ background: linear-gradient(#1B1C1D 50%, #fff); /* Standard syntax */ } .fullscreensim #simulator .ui.item:not(.simtoolbar), .fullscreensim #simulator .ui.menu, .fullscreensim #menubar .ui.item:not(.logo), .fullscreensim #maineditor, .fullscreensim #editortools, .fullscreensim #simulator .play-button.item:not(.simtoolbar), .fullscreensim #simulator .play-button.menu, .fullscreensim #menubar .play-button.item:not(.logo), .fullscreensim #simulator .download-button.item:not(.simtoolbar), .fullscreensim #simulator .download-button.menu, .fullscreensim #menubar .download-button.item:not(.logo) { display: none !important; z-index: -10; } .fullscreensim .sandboxfooter { z-index: 100; bottom: 1rem; } .fullscreensim .ui.menu, .fullscreensim .play-button.menu, .fullscreensim .download-button.menu { background: transparent !important; } .fullscreensim #filelist .simtoolbar { position: fixed; bottom: 2rem; left: auto; right: auto; } .fullscreensim #simulators { position: relative; padding: 3rem; width: 100%; height: 100%; } .fullscreensim div.simframe { position: relative; width: 50%; height: 100%; float: left; padding-bottom: 0 !important; } .fullscreensim div.simframe > iframe { position: relative; max-width: 90%; } .fullscreensim div.simframe:only-child { width: 100%; } .fullscreensim div.simframe:only-child > iframe { max-width: 100%; } } /* <= Small Monitor (Mobile + Tablet + Small Monitor) */ @media only screen and (max-width: 1199px) { /* Layout */ #filelist, #downloadArea { min-width: 20rem; max-width: 20rem; } #maineditor { left: 20rem; } .rtl #maineditor { right: 20rem; left: 0; } /* Logo */ #logo .name { display: none !important; } /* Blockly */ span.blocklyTreeLabel { font-size: 1rem; } /* Help card */ #helpcard { top: auto; bottom: 2.2rem; margin: 0; } } /* <= Tablet (Mobile + Tablet) */ @media only screen and (max-width: 991px) { /* Blockly */ span.blocklyTreeLabel { font-size: 1rem; } /* Help card */ #helpcard { top: auto; bottom: 2rem; margin: 0; } /* Layout */ #filelist { position: absolute; padding: 0; margin: 1em; z-index: 5; bottom: 0rem !important; left: 4rem !important; top: auto; width: auto; min-width: inherit; max-width: inherit; background: transparent !important; } .rtl #filelist { left: auto; right: 0; } #maineditor, .rtl #maineditor { left: 0; right: 0; } #maineditor:not(.sandbox), .rtl #maineditor:not(.sandbox) { bottom: 0rem; } #editortools { height: 10rem; } #blocksArea, #monacoEditor, #pxtJsonEditor, #msg { bottom: 10rem !important; } #tutorialcard.bottom { bottom: 11rem !important; } .hideEditorFloats #editortools { height: 5rem !important; } .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor, .hideEditorFloats #msg { bottom: 5rem !important; } .hideEditorFloats #tutorialcard.bottom { bottom: 5rem !important; } /* Simulator */ div.simframe { display: inline-block; width: 10rem; margin-right: 0.5rem; } div.simframe:not(:first-child) { display: none !important; } /* Hide floating editors */ .hideEditorFloats .editorFloat { display: none; } #downloadArea { display: none; } /* Menu spacing */ .ui.menu .item, .play-button.menu .item, .download-button.menu .item { padding: 0.4em !important; } .ui.menu .item.editor-menuitem, .play-button.menu .item.editor-menuitem, .download-button.menu .item.editor-menuitem { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } /* Top Menu */ #maineditor { top: 5rem !important; } #getting-started-btn { top: 5rem; } /* Logo */ .ui.item.logo img, .play-button.item.logo img, .download-button.item.logo img { max-height: 2.5rem; margin-left: 0.5rem; margin-right: 0.5rem; } .ui.mini.image, .play-button.mini.image, .download-button.mini.image { display: block !important; } } /* Mobile */ @media only screen and (max-width: 767px) { /* Logo */ #logo { font-size: 0rem; padding-right: 0; } /* Blockly */ text.blocklyCheckbox { font-size: 17pt !important; } /* Hide blockly tree labels on mobile */ span.blocklyTreeLabel { display: none !important; } div.blocklyTreeRow:hover span.blocklyTreeLabel { display: none !important; } div.blocklyTreeRow.blocklyTreeSelected:hover span.blocklyTreeLabel { display: none !important; } div.blocklyTreeRow { padding-right: 0; height: 2rem; text-align: center; } div.blocklyTreeRoot div div div div div.blocklyTreeRow { border-left-width: 8px !important; } span.blocklyTreeIcon { font-size: 1.5rem; margin: 0.0em 0.25em 0.0em 0.25em; } /* Blockly trash icon */ #blocklyTrashIcon { font-size: 3rem; } /* Hide the blockly toolbox search */ #blocklySearchArea { display: none !important; } .hideEditorFloats #editortools { height: 5rem !important; } .hideEditorFloats #blocksArea, .hideEditorFloats #monacoEditor { bottom: 5rem !important; } } /******************************* Site Settings *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Base Sizes --------------------*/ /* This is the single variable that controls them all */ /* The size of page text */ /*------------------- Border Radius --------------------*/ /* See Power-user section below for explanation of @px variables */ /*------------------- Brand Colors --------------------*/ /*-------------- Page Heading ---------------*/ /*-------------- Form Input ---------------*/ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */ /*------------------- Focused Input --------------------*/ /* Used on inputs, textarea etc */ /* Used on dropdowns, other larger blocks */ /*------------------- Sizes --------------------*/ /* Sizes are all expressed in terms of 14px/em (default em) This ensures these "ratios" remain constant despite changes in EM */ /*------------------- Page --------------------*/ /*------------------- Paragraph --------------------*/ /*------------------- Links --------------------*/ /*------------------- Scroll Bars --------------------*/ /* Inverted */ /*------------------- Highlighted Text --------------------*/ /*------------------- Loader --------------------*/ /*------------------- Grid --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Breakpoints --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Headers ---*/ /*--- Colored Text ---*/ /*--- Colored Border ---*/ /*------------------- Alpha Colors --------------------*/ /*------------------- Accents --------------------*/ /* Differentiating Neutrals */ /* Differentiating Layers */ /******************************* Power-User *******************************/ /*------------------- Emotive Colors --------------------*/ /* Positive */ /* Negative */ /* Info */ /* Warning */ /*------------------- Paths --------------------*/ /* For source only. Modified in gulp for dist */ /*------------------- Em Sizes --------------------*/ /* This rounds @size values to the closest pixel then expresses that value in (r)em. This ensures all size values round to exact pixels */ /* em */ /* rem */ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Derived Values --------------------*/ /* Loaders Position Offset */ /* Rendered Scrollbar Width */ /* Maximum Single Character Glyph Width, aka Capital "W" */ /* Used to match floats with text */ /* Header Spacing */ /* Minimum Mobile Width */ /* Positive / Negative Dupes */ /* Responsive */ /*------------------- Exact Pixel Values --------------------*/ /* These are used to specify exact pixel values in em for things like borders that remain constantly sized as emSize adjusts Since there are many more sizes than names for sizes, these are named by their original pixel values. */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Shadows ---*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Focus --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /*------------------- Active --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Brand ---*/ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ /******************************* User Global Variables *******************************/ /*------------------- Fonts --------------------*/ /*------------------- Breakpoints --------------------*/ /* @mobileBreakpoint : unit( (63 * @emSize), px); @tabletBreakpoint : unit( (79 * @emSize), px); @computerBreakpoint : unit( (91 * @emSize), px); @largeMonitorBreakpoint : unit( (99 * @emSize), px); @widescreenMonitorBreakpoint : unit( (119 * @emSize), px); */ /******************************* PXT Variables *******************************/ /*------------------- Menu --------------------*/ /*------------------- Layout --------------------*/ /*------------------- Background --------------------*/ /*------------------- Full screen --------------------*/ /*------------------- Side Docs --------------------*/ /*------------------- Editor --------------------*/ /******************************* User Global Variables *******************************/ /*------------------- Site Colors --------------------*/ /******************************* PXT Overrides *******************************/ /******************************* Menu *******************************/ /*------------------- Collection --------------------*/ /* Menu */ /* Menu Item */ /* Divider */ /* Sub Menu */ /* Text Item */ /*-------------- Elements ---------------*/ /* Icon */ /* Dropdown Icon */ /* Header */ /* Vertical Icon */ /* Vertical Header */ /* Pointing Arrow */ /*-------------- Couplings ---------------*/ /* Button */ /* Input */ /* Image */ /* Label */ /* Dropdown in Menu */ /* Dropdown Variations */ /*-------------- States ---------------*/ /* Hovered Item */ /* Pressed Item */ /* Active Item */ /* Active Hovered Item */ /* Selected Dropdown */ /* Active Dropdown */ /* Active Sub Menu */ /*-------------- Types ---------------*/ /* Vertical */ /* Secondary */ /* Pointing */ /* Inverted Secondary */ /* Inverted Pointing */ /* Tiered */ /* Icon */ /* Tabular */ /* Pagination */ /* Labeled Icon */ /* Text */ /*-------------- Variations ---------------*/ /* Inverted */ /* Inverted Sub Menu */ /* Inverted Hover */ /* Pressed */ /* Inverted Active */ /* Inverted Active Hover */ /* Inverted Menu Divider */ /* Inverted Colored */ /* Fixed */ /* Floated */ /* Attached */ /* Resize large sizes */ /* Sizes */ /* Reference import */ /******************************* Add your custom CSS here *******************************/ /* not relevant in new UI .openproject { background: #4ECC60 !important; } */ .blocks-menuitem.active, .javascript-menuitem.active { background: #738791 !important; } /* not relevant in new UI .help-dropdown-menuitem, .more-dropdown-menuitem { background: #424955 !important; margin-right:0px !important; } */ .huge.download-button i { display: none !important; } #filelist .menu { width: 100%; } /******************************* Blockly *******************************/ div.blocklyTreeRow { border-radius: 8px; } /* This removes any padding at the top of the toolbox */ div.blocklyTreeRoot { padding: 0px !important; } /* Blockly Text */ div.blocklyTreeLabel { font-family: 'Roboto Mono', 'Helvetica Neue', Arial, Helvetica, sans-serif !important; font-size: 1rem !important; } .blocklyFlyoutBackground { fill: #42495F; } .blocklyToolboxDiv { padding: 7px; } .organization { top: 1.6em; } /* Mobile */ @media only screen and (max-width: 767px) { .blocklyTreeLabel { font-size: 0.5rem !important; } } /* Tablet */ /* Small Monitor */ /* Large Monitor */ /******************************* Menu Bar *******************************/ #menubar { height: 5rem; } #fileNameInput { width: 350px; }