/* Semantic UI */ /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ Import this file into your LESS project to use Fomantic-UI without build tools */ /* Global */ /*! * # Fomantic-UI - Reset * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Reset *******************************/ /* Packaged Theme */ /* Site Theme */ /******************************* User Global Variables *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Reset *******************************/ /* Border-Box */ *, *::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 v8.0.1 | 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 iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { 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 ========================================================================== */ /** * 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 ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * 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 { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * 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 ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 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 { overflow: visible; /* 1 */ } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; /* 1 */ } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * 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. */ /** * 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. */ /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ /** * 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 in Chrome and Safari on macOS. */ [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 Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Site * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged Theme */ /* Site Theme */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Page *******************************/ @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/LatoLatin-Regular.woff2") format("woff2") , url("../../themes/default/assets/fonts/LatoLatin-Regular.woff") format("woff"); font-style: normal; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/LatoLatin-Bold.woff2") format("woff2") , url("../../themes/default/assets/fonts/LatoLatin-Bold.woff") format("woff"); font-style: normal; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/LatoLatin-Italic.woff2") format("woff2") , url("../../themes/default/assets/fonts/LatoLatin-Italic.woff") format("woff"); font-style: italic; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/LatoLatin-BoldItalic.woff2") format("woff2") , url("../../themes/default/assets/fonts/LatoLatin-BoldItalic.woff") format("woff"); font-style: italic; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04; } @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/Lato-Regular.woff2") format("woff2") , url("../../themes/default/assets/fonts/Lato-Regular.woff") format("woff"); font-style: normal; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/Lato-Bold.woff2") format("woff2") , url("../../themes/default/assets/fonts/Lato-Bold.woff") format("woff"); font-style: normal; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/Lato-Italic.woff2") format("woff2") , url("../../themes/default/assets/fonts/Lato-Italic.woff") format("woff"); font-style: italic; font-weight: normal; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } @font-face { font-family: "Lato"; src: url("../../themes/default/assets/fonts/Lato-BoldItalic.woff2") format("woff2") , url("../../themes/default/assets/fonts/Lato-BoldItalic.woff") format("woff"); font-style: italic; font-weight: bold; font-display: swap; text-rendering: optimizeLegibility; unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77; } html, body { height: 100%; } html { font-size: 15px; } body { margin: 0; padding: 0; overflow-x: hidden; min-width: 320px; background: #fff; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.7; color: rgba(0, 0, 0, 0.87); } /******************************* Headers *******************************/ h1, h2, h3, h4, h5 { font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; line-height: 1.28571429em; margin: calc(2rem - 0.1428571428571429em) 0 1rem; font-weight: bold; padding: 0; } 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: 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child { margin-bottom: 0; } /******************************* Text *******************************/ p { margin: 0 0 1em; line-height: 1.7; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } /* ------------------- Links -------------------- */ a { color: #269eab; text-decoration: underline; } a:hover { color: #18646c; text-decoration: underline; } /******************************* Scrollbars *******************************/ /* Force Simple Scrollbars */ body ::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 10px; } body ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0; } body ::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 5px; background: rgba(0, 0, 0, 0.25); -webkit-transition: color 0.2s ease; 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); } body .ui { /* IE11 */ scrollbar-face-color: #bfbfbf; scrollbar-shadow-color: #bfbfbf; scrollbar-track-color: #e6e6e6; scrollbar-arrow-color: #e6e6e6; } @supports (-moz-appearance: none) { body .ui { /* firefox: first color thumb, second track */ scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1); scrollbar-width: thin; } } /* Inverted UI */ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } body .ui.inverted:not(.dimmer) { /* IE11 */ scrollbar-face-color: #656565; scrollbar-shadow-color: #656565; scrollbar-track-color: #323232; scrollbar-arrow-color: #323232; } @supports (-moz-appearance: none) { body .ui.inverted:not(.dimmer) { /* firefox: first color thumb, second track */ scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1); } } /******************************* Highlighting *******************************/ /* Site */ ::-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::-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); } /******************************* Global Overrides *******************************/ /******************************* Site Overrides *******************************/ b, strong { font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; font-weight: bold; } /* Elements */ /*! * # Fomantic-UI - Button * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* ------------- Tertiary ------------- */ /* Tertiary Hover */ /* Tertiary Focus */ /* Tertiary Active */ /* ------------------- Variations -------------------- */ /* Colors */ /* Colored */ /* Inverted */ /* Ordinality */ /* Compact */ /* Attached */ /* Floated */ /* Animated */ /* Toggle */ /* Circular */ /* Spaced */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Button *******************************/ .ui.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: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; margin: 0 0.25em 0 0; padding: 0.73333333em 1.5em 0.73333333em; text-transform: none; text-shadow: none; font-weight: bold; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: 0.26666667rem; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -webkit-user-select: none; -moz-user-select: none; 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: auto; -webkit-tap-highlight-color: transparent; } /******************************* States *******************************/ /* -------------- Hover --------------- */ .ui.button:hover { background-color: #cacbcd; background-image: none; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; color: rgba(0, 0, 0, 0.8); } .ui.button:hover .icon { opacity: 0.85; } /* -------------- Focus --------------- */ .ui.button:focus { background-color: #cacbcd; color: rgba(0, 0, 0, 0.8); background-image: none; box-shadow: ""; } .ui.button:focus .icon { opacity: 0.85; } /* -------------- Down --------------- */ .ui.button:active, .ui.active.button:active { background-color: #babbbc; background-image: ""; color: rgba(0, 0, 0, 0.9); box-shadow: none; } /* -------------- Active --------------- */ .ui.active.button { background-color: #c0c1c2; background-image: none; box-shadow: 0 0 0 1px transparent inset; color: rgba(0, 0, 0, 0.95); } .ui.active.button:hover { background-color: #c0c1c2; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.button:active { background-color: #c0c1c2; background-image: none; } /* -------------- Loading --------------- */ /* Specificity hack */ .ui.ui.ui.ui.ui.ui.loading.button { position: relative; cursor: default; text-shadow: none !important; color: transparent; opacity: 1; pointer-events: auto; transition: all 0s linear, opacity 0.1s ease; } .ui.loading.button::before { position: absolute; content: ""; top: 50%; left: 50%; margin: -0.63333333em 0 0 -0.63333333em; width: 1.26666667em; height: 1.26666667em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.15); } .ui.loading.button::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -0.63333333em 0 0 -0.63333333em; width: 1.26666667em; height: 1.26666667em; border-radius: 500rem; animation: loader 0.6s infinite linear; border: 0.2em solid currentColor; color: #fff; box-shadow: 0 0 0 1px transparent; } .ui.ui.ui.loading.button .label { background-color: transparent; border-color: transparent; color: transparent; } .ui.labeled.icon.loading.button .icon { background-color: transparent; box-shadow: none; } .ui.basic.loading.button:not(.inverted)::before { border-color: rgba(0, 0, 0, 0.1); } .ui.basic.loading.button:not(.inverted)::after { border-color: #767676; } /* ------------------- Disabled -------------------- */ .ui.buttons .disabled.button:not(.basic), .ui.disabled.button, .ui.button:disabled, .ui.disabled.button:hover, .ui.disabled.active.button { cursor: default; opacity: 0.45 !important; background-image: none; box-shadow: none; pointer-events: none !important; } /* Basic Group With Disabled */ .ui.basic.buttons .ui.disabled.button { border-color: rgba(34, 36, 38, 0.5); } /******************************* Types *******************************/ /* ------------------- Animated -------------------- */ .ui.animated.button { position: relative; overflow: hidden; padding-right: 0 !important; vertical-align: middle; z-index: 1; } .ui.animated.button .content { will-change: transform, opacity; } .ui.animated.button .visible.content { position: relative; margin-right: 1.5em; } .ui.animated.button .hidden.content { position: absolute; width: 100%; } /* Horizontal */ .ui.animated.button .visible.content, .ui.animated.button .hidden.content { transition: right 0.3s ease 0s; } .ui.animated.button .visible.content { left: auto; right: 0; } .ui.animated.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 { left: auto; right: 200%; } .ui.animated.button:focus .hidden.content, .ui.animated.button:hover .hidden.content { left: auto; right: 0; } /* Vertical */ .ui.vertical.animated.button .visible.content, .ui.vertical.animated.button .hidden.content { transition: top 0.3s ease, transform 0.3s ease; } .ui.vertical.animated.button .visible.content { transform: translateY(0); right: auto; } .ui.vertical.animated.button .hidden.content { top: -50%; left: 0; right: auto; } .ui.vertical.animated.button:focus .visible.content, .ui.vertical.animated.button:hover .visible.content { transform: translateY(200%); right: auto; } .ui.vertical.animated.button:focus .hidden.content, .ui.vertical.animated.button:hover .hidden.content { top: 50%; right: auto; } /* Fade */ .ui.fade.animated.button .visible.content, .ui.fade.animated.button .hidden.content { transition: opacity 0.3s ease, transform 0.3s ease; } .ui.fade.animated.button .visible.content { left: auto; right: auto; opacity: 1; transform: scale(1); } .ui.fade.animated.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 { left: auto; right: auto; opacity: 0; transform: scale(0.75); } .ui.fade.animated.button:focus .hidden.content, .ui.fade.animated.button:hover .hidden.content { left: 0; right: auto; opacity: 1; transform: scale(1); } /* ------------------- Inverted -------------------- */ .ui.inverted.button { box-shadow: 0 0 0 2px #fff inset; background: transparent none; color: #fff; text-shadow: none !important; } /* Group */ .ui.inverted.buttons .button { margin: 0 0 0 -2px; } .ui.inverted.buttons .button:first-child { margin-left: 0; } .ui.inverted.vertical.buttons .button { margin: 0 0 -2px 0; } .ui.inverted.vertical.buttons .button:first-child { margin-top: 0; } /* States */ /* Hover */ .ui.inverted.button:hover { background: #fff; box-shadow: 0 0 0 2px #fff inset; color: rgba(0, 0, 0, 0.8); } /* Active / Focus */ .ui.inverted.button:focus, .ui.inverted.button.active { background: #fff; box-shadow: 0 0 0 2px #fff inset; color: rgba(0, 0, 0, 0.8); } /* Active Focus */ .ui.inverted.button.active:focus { background: #dcddde; box-shadow: 0 0 0 2px #dcddde inset; color: rgba(0, 0, 0, 0.8); } /* ------------------- Labeled Button -------------------- */ .ui.labeled.button:not(.icon) { display: inline-flex; flex-direction: row; background: none; padding: 0 !important; border: none; box-shadow: none; } .ui.labeled.button > .button { margin: 0; } .ui.labeled.button > .label { display: flex; align-items: center; margin: 0 0 0 -1px !important; font-size: 1em; padding: ""; border-color: rgba(34, 36, 38, 0.15); } /* Tag */ .ui.labeled.button > .tag.label::before { width: 1.85em; height: 1.85em; } /* Right */ .ui.labeled.button:not([class*="left labeled"]) > .button { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ui.labeled.button:not([class*="left labeled"]) > .label { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Left Side */ .ui[class*="left labeled"].button > .button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ui[class*="left labeled"].button > .label { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ------------------- Social -------------------- */ /* Facebook */ .ui.facebook.button { background-color: #3b5998; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.facebook.button:hover { background-color: #304d8a; color: #fff; text-shadow: none; } .ui.facebook.button:active { background-color: #2d4373; color: #fff; text-shadow: none; } /* Twitter */ .ui.twitter.button { background-color: #1da1f2; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.twitter.button:hover { background-color: #0298f3; color: #fff; text-shadow: none; } .ui.twitter.button:active { background-color: #0c85d0; color: #fff; text-shadow: none; } /* Google Plus */ .ui.google.plus.button { background-color: #dd4b39; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.google.plus.button:hover { background-color: #e0321c; color: #fff; text-shadow: none; } .ui.google.plus.button:active { background-color: #c23321; color: #fff; text-shadow: none; } /* Linked In */ .ui.linkedin.button { background-color: #0077b5; color: #fff; text-shadow: none; } .ui.linkedin.button:hover { background-color: #00669c; color: #fff; text-shadow: none; } .ui.linkedin.button:active { background-color: #005582; color: #fff; text-shadow: none; } /* YouTube */ .ui.youtube.button { background-color: #f00; color: #fff; text-shadow: none; background-image: none; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.youtube.button:hover { background-color: #e60000; color: #fff; text-shadow: none; } .ui.youtube.button:active { background-color: #cc0000; color: #fff; text-shadow: none; } /* Instagram */ /* Pinterest */ /* VK */ /* WhatsApp */ /* Telegram */ /* -------------- Icon --------------- */ .ui.button > .icon:not(.button) { height: auto; opacity: 0.8; transition: opacity 0.1s ease; color: ""; } .ui.button:not(.icon) > .icon:not(.button):not(.dropdown), .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { margin: 0 0.4em 0 -0.2em; vertical-align: baseline; } .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { vertical-align: baseline; } .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { margin: 0 -0.2em 0 0.4em; } /******************************* Variations *******************************/ /* -------------- Stackable --------------- */ /* Tablet Or Below */ @media only screen and (max-width: 767.98px) { .ui.stackable.buttons { flex-direction: column; width: 100%; } .ui.stackable.buttons .button:first-child { border-bottom-left-radius: 0; border-top-right-radius: 0.26666667rem; } .ui.stackable.buttons .button:last-child { border-bottom-left-radius: 0.26666667rem; border-top-right-radius: 0; } .ui.stackable.buttons .button:only-child { border-radius: 0.26666667rem; } } /* ------------------- Floated -------------------- */ .ui[class*="left floated"].buttons, .ui[class*="left floated"].button { float: left; margin-left: 0; margin-right: 0.25em; } .ui[class*="right floated"].buttons, .ui[class*="right floated"].button { float: right; margin-right: 0; margin-left: 0.25em; } /* ------------------- Compact -------------------- */ /* ------------------- Sizes -------------------- */ .ui.buttons .button, .ui.buttons .or, .ui.button { font-size: 1rem; } .ui.mini.buttons .dropdown, .ui.mini.buttons .dropdown .menu > .item, .ui.mini.buttons .button, .ui.mini.buttons .or, .ui.ui.ui.ui.mini.button { font-size: 0.8rem; } .ui.tiny.buttons .dropdown, .ui.tiny.buttons .dropdown .menu > .item, .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.ui.ui.ui.tiny.button { font-size: 0.86666667rem; } .ui.small.buttons .dropdown, .ui.small.buttons .dropdown .menu > .item, .ui.small.buttons .button, .ui.small.buttons .or, .ui.ui.ui.ui.small.button { font-size: 0.93333333rem; } .ui.large.buttons .dropdown, .ui.large.buttons .dropdown .menu > .item, .ui.large.buttons .button, .ui.large.buttons .or, .ui.ui.ui.ui.large.button { font-size: 1.13333333rem; } .ui.big.buttons .dropdown, .ui.big.buttons .dropdown .menu > .item, .ui.big.buttons .button, .ui.big.buttons .or, .ui.ui.ui.ui.big.button { font-size: 1.26666667rem; } .ui.huge.buttons .dropdown, .ui.huge.buttons .dropdown .menu > .item, .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.ui.ui.ui.huge.button { font-size: 1.4rem; } .ui.massive.buttons .dropdown, .ui.massive.buttons .dropdown .menu > .item, .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.ui.ui.ui.massive.button { font-size: 1.73333333rem; } /* -------------- Icon Only --------------- */ .ui.icon.buttons .button, .ui.icon.button:not(.animated):not(.compact):not(.labeled) { padding: 0.73333333em 0.73333333em 0.73333333em; } .ui.animated.icon.button > .content > .icon, .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { opacity: 0.9; margin: 0 !important; vertical-align: top; } .ui.animated.button > .content > .icon { vertical-align: top; } /* ------------------- Basic -------------------- */ .ui.basic.buttons .button, .ui.basic.button { background: transparent none; color: rgba(0, 0, 0, 0.6); font-weight: normal; border-radius: 0.26666667rem; text-transform: none; text-shadow: none !important; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons { box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.26666667rem; border-right: none; } .ui.basic.buttons .button { border-radius: 0; } .ui.basic.buttons .button:hover, .ui.basic.button:hover { background: #fff; color: rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:focus, .ui.basic.button:focus { background: #fff; color: rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:active, .ui.basic.button:active { background: #f8f8f8; color: rgba(0, 0, 0, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .active.button, .ui.basic.active.button { background: rgba(0, 0, 0, 0.05); box-shadow: ""; color: rgba(0, 0, 0, 0.95); } .ui.basic.buttons .active.button:hover, .ui.basic.active.button:hover { background-color: rgba(0, 0, 0, 0.05); } .ui.basic.buttons .button:hover { box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .button:active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; } .ui.basic.buttons .active.button { box-shadow: ""; } /* Standard Basic Inverted */ .ui.basic.inverted.buttons .button, .ui.basic.inverted.button { background-color: transparent; color: #f9fafb; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; } .ui.basic.inverted.buttons .button:hover, .ui.basic.inverted.button:hover { color: #fff; box-shadow: 0 0 0 2px #ffffff inset; } .ui.basic.inverted.buttons .button:focus, .ui.basic.inverted.button:focus { color: #fff; box-shadow: 0 0 0 2px #ffffff inset; } .ui.basic.inverted.buttons .button:active, .ui.basic.inverted.button:active { background-color: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset; } .ui.basic.inverted.buttons .active.button, .ui.basic.inverted.active.button { background-color: rgba(255, 255, 255, 0.08); color: #fff; text-shadow: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset; } .ui.basic.inverted.buttons .active.button:hover, .ui.basic.inverted.active.button:hover { background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 2px #ffffff inset; } /* Basic Group */ .ui.basic.buttons:not(.inverted) .button:not(.basic) { border-right: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.vertical.buttons .button { border-left: none; border-left-width: 0; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.basic.vertical.buttons:not(.spaced):not(.circular) .button:first-child { border-top: none; } /* ------------------- Tertiary -------------------- */ /* Overline Mixin */ /* -------------- Labeled Icon --------------- */ .ui.labeled.icon.buttons .button, .ui.labeled.icon.button { position: relative; padding-left: 3.96666667em !important; padding-right: 1.5em !important; } /* Left Labeled */ .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { position: absolute; top: 0; left: 0; height: 100%; line-height: 1; border-radius: 0; border-top-left-radius: inherit; border-bottom-left-radius: inherit; text-align: center; animation: none; padding: 0.73333333em 0; margin: 0; width: 2.46666667em; background-color: rgba(0, 0, 0, 0.05); color: ""; box-shadow: -1px 0 0 0 transparent inset; } /* Right Labeled */ .ui[class*="right labeled"].icon.button { padding-right: 3.96666667em !important; padding-left: 1.5em !important; } .ui[class*="right labeled"].icon.button > .icon { left: auto; right: 0; border-radius: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; box-shadow: 1px 0 0 0 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 { display: block; position: relative; width: 100%; top: 0; text-align: center; } .ui.labeled.icon.buttons .button > .icon { border-radius: 0; } .ui.labeled.icon.buttons .button:first-child > .icon { border-top-left-radius: 0.26666667rem; border-bottom-left-radius: 0.26666667rem; } .ui.labeled.icon.buttons .button:last-child > .icon { border-top-right-radius: 0.26666667rem; border-bottom-right-radius: 0.26666667rem; } .ui.vertical.labeled.icon.buttons .button:first-child > .icon { border-radius: 0; border-top-left-radius: 0.26666667rem; } .ui.vertical.labeled.icon.buttons .button:last-child > .icon { border-radius: 0; border-bottom-left-radius: 0.26666667rem; } /* Loading Icon in Labeled Button */ .ui.labeled.icon.button > .loading.icon::before { animation: loader 2s linear infinite; } /* -------------- Toggle --------------- */ /* Toggle (Modifies active state to give affordances) */ .ui.toggle.buttons .active.button, .ui.buttons .button.toggle.active, .ui.button.toggle.active { background-color: #269eab; box-shadow: none; text-shadow: none; color: #fff; } .ui.button.toggle.active:hover { background-color: #1c8f9c; text-shadow: none; color: #fff; } /* -------------- Circular --------------- */ .ui.ui.circular.buttons .button, .ui.ui.ui.ui.circular.button { border-radius: 10em; min-width: 2.5em; } .ui.circular.buttons .button > .icon, .ui.circular.button > .icon { width: 1em; vertical-align: baseline; } .ui.circular.buttons:not(.vertical):not(.spaced) .button { margin-right: 0.25em; } .ui.vertical.circular.buttons .button { margin-bottom: 0.25em; } .ui.circular.basic.buttons { border: none; } .ui.circular.basic.buttons .button { border: 1px solid rgba(34, 36, 38, 0.15); } .ui.circular.basic.buttons .button.basic { border: none; } /* ------------------- Or Buttons -------------------- */ .ui.buttons .or { position: relative; width: 0.3em; height: 2.46666667em; z-index: 3; } .ui.buttons .or::before { position: absolute; text-align: center; border-radius: 500rem; content: "or"; top: 50%; left: 50%; background-color: #fff; text-shadow: none; margin-top: -0.86666667em; margin-left: -0.86666667em; width: 1.73333333em; height: 1.73333333em; line-height: 1.73333333em; color: rgba(0, 0, 0, 0.4); font-style: normal; font-weight: bold; box-shadow: 0 0 0 1px transparent inset; } .ui.buttons .or[data-text]::before { content: attr(data-text); } /* Fluid Or */ .ui.fluid.buttons .or { width: 0 !important; } .ui.fluid.buttons .or::after { display: none; } /* ------------------- Attached -------------------- */ /* Singular */ .ui.attached.button { position: relative; display: block; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15); } /* Top / Bottom */ .ui.attached.top.button { border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.attached.bottom.button { border-radius: 0 0 0.26666667rem 0.26666667rem; } /* Left / Right */ .ui.left.attached.button { display: inline-block; border-left: none; text-align: right; padding-right: 0.75em; border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui.right.attached.button { display: inline-block; text-align: left; padding-left: 0.75em; border-radius: 0 0.26666667rem 0.26666667rem 0; } /* Plural */ .ui.attached.buttons { position: relative; display: flex; border-radius: 0; width: auto !important; z-index: auto; margin-left: -1px; margin-right: -1px; } .ui.attached.buttons .button { margin: 0; } .ui.attached.buttons .button:first-child { border-radius: 0; } .ui.attached.buttons .button:last-child { border-radius: 0; } /* Top / Bottom */ .ui[class*="top attached"].buttons { margin-bottom: 0; border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui[class*="top attached"].buttons .button:first-child { border-radius: 0.26666667rem 0 0 0; } .ui[class*="top attached"].buttons .button:last-child { border-radius: 0 0.26666667rem 0 0; } .ui[class*="bottom attached"].buttons { margin-top: -1px; border-radius: 0 0 0.26666667rem 0.26666667rem; } .ui[class*="bottom attached"].buttons .button:first-child { border-radius: 0 0 0 0.26666667rem; } .ui[class*="bottom attached"].buttons .button:last-child { border-radius: 0 0 0.26666667rem 0; } /* Left / Right */ .ui[class*="left attached"].buttons { display: inline-flex; margin-right: 0; margin-left: -1px; border-radius: 0 0.26666667rem 0.26666667rem 0; } .ui[class*="left attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0 0.26666667rem 0 0; } .ui[class*="left attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0 0 0.26666667rem 0; } .ui[class*="right attached"].buttons { display: inline-flex; margin-left: 0; margin-right: -1px; border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui[class*="right attached"].buttons .button:first-child { margin-left: -1px; border-radius: 0.26666667rem 0 0 0; } .ui[class*="right attached"].buttons .button:last-child { margin-left: -1px; border-radius: 0 0 0 0.26666667rem; } /* ------------------- Fluid -------------------- */ .ui.fluid.buttons, .ui.fluid.button { width: 100%; } .ui.fluid.button { display: block; } .ui.two.buttons { width: 100%; } .ui.two.buttons > .button { width: 50%; } .ui.three.buttons { width: 100%; } .ui.three.buttons > .button { width: 33.333%; } .ui.four.buttons { width: 100%; } .ui.four.buttons > .button { width: 25%; } .ui.five.buttons { width: 100%; } .ui.five.buttons > .button { width: 20%; } .ui.six.buttons { width: 100%; } .ui.six.buttons > .button { width: 16.666%; } .ui.seven.buttons { width: 100%; } .ui.seven.buttons > .button { width: 14.285%; } .ui.eight.buttons { width: 100%; } .ui.eight.buttons > .button { width: 12.5%; } .ui.ten.buttons { width: 100%; } .ui.ten.buttons > .button { width: 10%; } .ui.eleven.buttons { width: 100%; } .ui.eleven.buttons > .button { width: 9.09%; } .ui.twelve.buttons { width: 100%; } .ui.twelve.buttons > .button { width: 8.3333%; } /* Fluid Vertical Buttons */ .ui.fluid.vertical.buttons, .ui.fluid.vertical.buttons > .button { display: flex; width: auto; justify-content: center; } .ui.two.vertical.buttons > .button { height: 50%; } .ui.three.vertical.buttons > .button { height: 33.333%; } .ui.four.vertical.buttons > .button { height: 25%; } .ui.five.vertical.buttons > .button { height: 20%; } .ui.six.vertical.buttons > .button { height: 16.666%; } .ui.seven.vertical.buttons > .button { height: 14.285%; } .ui.eight.vertical.buttons > .button { height: 12.5%; } .ui.ten.vertical.buttons > .button { height: 10%; } .ui.eleven.vertical.buttons > .button { height: 9.09%; } .ui.twelve.vertical.buttons > .button { height: 8.3333%; } /* ------------------- Colors -------------------- */ .ui.primary.buttons .button, .ui.primary.button { background-color: #0e3f47; color: #fff; text-shadow: none; background-image: none; } .ui.primary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { background-color: #082e34; color: #fff; text-shadow: none; } .ui.primary.buttons .button:focus, .ui.primary.button:focus { background-color: #042328; color: #fff; text-shadow: none; } .ui.primary.buttons .button:active, .ui.primary.button:active { background-color: #06191c; color: #fff; text-shadow: none; } .ui.primary.buttons .active.button, .ui.primary.buttons .active.button:active, .ui.primary.active.button, .ui.primary.button .active.button:active { background-color: #072e35; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.primary.buttons .button, .ui.basic.primary.button { background: transparent; box-shadow: 0 0 0 1px #0e3f47 inset; color: #0e3f47; } .ui.basic.primary.buttons .button:hover, .ui.basic.primary.button:hover { background: transparent; box-shadow: 0 0 0 1px #082e34 inset; color: #082e34; } .ui.basic.primary.buttons .button:focus, .ui.basic.primary.button:focus { background: transparent; box-shadow: 0 0 0 1px #042328 inset; color: #082e34; } .ui.basic.primary.buttons .active.button, .ui.basic.primary.active.button { background: transparent; box-shadow: 0 0 0 1px #072e35 inset; color: #06191c; } .ui.basic.primary.buttons .button:active, .ui.basic.primary.button:active { box-shadow: 0 0 0 1px #06191c inset; color: #06191c; } /* Inverted */ .ui.inverted.primary.buttons .button, .ui.inverted.primary.button { background-color: transparent; box-shadow: 0 0 0 2px #54c8ff inset; color: #54c8ff; } .ui.inverted.primary.buttons .button:hover, .ui.inverted.primary.button:hover, .ui.inverted.primary.buttons .button:focus, .ui.inverted.primary.button:focus, .ui.inverted.primary.buttons .button.active, .ui.inverted.primary.button.active, .ui.inverted.primary.buttons .button:active, .ui.inverted.primary.button:active { box-shadow: none; color: #fff; } .ui.inverted.primary.buttons .button:hover, .ui.inverted.primary.button:hover { background-color: #21b8ff; } .ui.inverted.primary.buttons .button:focus, .ui.inverted.primary.button:focus { background-color: #2bbbff; } .ui.inverted.primary.buttons .active.button, .ui.inverted.primary.active.button { background-color: #3ac0ff; } .ui.inverted.primary.buttons .button:active, .ui.inverted.primary.button:active { background-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.primary.basic.buttons .button, .ui.inverted.primary.buttons .basic.button, .ui.inverted.primary.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.primary.basic.buttons .button:hover, .ui.inverted.primary.buttons .basic.button:hover, .ui.inverted.primary.basic.button:hover { box-shadow: 0 0 0 2px #21b8ff inset; color: #54c8ff; } .ui.inverted.primary.basic.buttons .button:focus, .ui.inverted.primary.basic.buttons .button:focus, .ui.inverted.primary.basic.button:focus { box-shadow: 0 0 0 2px #2bbbff inset; color: #54c8ff; } .ui.inverted.primary.basic.buttons .active.button, .ui.inverted.primary.buttons .basic.active.button, .ui.inverted.primary.basic.active.button { box-shadow: 0 0 0 2px #3ac0ff inset; color: #54c8ff; } .ui.inverted.primary.basic.buttons .button:active, .ui.inverted.primary.buttons .basic.button:active, .ui.inverted.primary.basic.button:active { box-shadow: 0 0 0 2px #21b8ff inset; color: #54c8ff; } /* Tertiary */ .ui.secondary.buttons .button, .ui.secondary.button { background-color: #1b1c1d; color: #fff; text-shadow: none; background-image: none; } .ui.secondary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.secondary.buttons .button:hover, .ui.secondary.button:hover { background-color: #27292a; color: #fff; text-shadow: none; } .ui.secondary.buttons .button:focus, .ui.secondary.button:focus { background-color: #2e3032; color: #fff; text-shadow: none; } .ui.secondary.buttons .button:active, .ui.secondary.button:active { background-color: #343637; color: #fff; text-shadow: none; } .ui.secondary.buttons .active.button, .ui.secondary.buttons .active.button:active, .ui.secondary.active.button, .ui.secondary.button .active.button:active { background-color: #27292a; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.secondary.buttons .button, .ui.basic.secondary.button { background: transparent; box-shadow: 0 0 0 1px #1b1c1d inset; color: #1b1c1d; } .ui.basic.secondary.buttons .button:hover, .ui.basic.secondary.button:hover { background: transparent; box-shadow: 0 0 0 1px #27292a inset; color: #27292a; } .ui.basic.secondary.buttons .button:focus, .ui.basic.secondary.button:focus { background: transparent; box-shadow: 0 0 0 1px #2e3032 inset; color: #27292a; } .ui.basic.secondary.buttons .active.button, .ui.basic.secondary.active.button { background: transparent; box-shadow: 0 0 0 1px #27292a inset; color: #343637; } .ui.basic.secondary.buttons .button:active, .ui.basic.secondary.button:active { box-shadow: 0 0 0 1px #343637 inset; color: #343637; } /* Inverted */ .ui.inverted.secondary.buttons .button, .ui.inverted.secondary.button { background-color: transparent; box-shadow: 0 0 0 2px #545454 inset; color: #545454; } .ui.inverted.secondary.buttons .button:hover, .ui.inverted.secondary.button:hover, .ui.inverted.secondary.buttons .button:focus, .ui.inverted.secondary.button:focus, .ui.inverted.secondary.buttons .button.active, .ui.inverted.secondary.button.active, .ui.inverted.secondary.buttons .button:active, .ui.inverted.secondary.button:active { box-shadow: none; color: #fff; } .ui.inverted.secondary.buttons .button:hover, .ui.inverted.secondary.button:hover { background-color: #6e6e6e; } .ui.inverted.secondary.buttons .button:focus, .ui.inverted.secondary.button:focus { background-color: #686868; } .ui.inverted.secondary.buttons .active.button, .ui.inverted.secondary.active.button { background-color: #616161; } .ui.inverted.secondary.buttons .button:active, .ui.inverted.secondary.button:active { background-color: #6e6e6e; } /* Inverted Basic */ .ui.inverted.secondary.basic.buttons .button, .ui.inverted.secondary.buttons .basic.button, .ui.inverted.secondary.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.secondary.basic.buttons .button:hover, .ui.inverted.secondary.buttons .basic.button:hover, .ui.inverted.secondary.basic.button:hover { box-shadow: 0 0 0 2px #6e6e6e inset; color: #545454; } .ui.inverted.secondary.basic.buttons .button:focus, .ui.inverted.secondary.basic.buttons .button:focus, .ui.inverted.secondary.basic.button:focus { box-shadow: 0 0 0 2px #686868 inset; color: #545454; } .ui.inverted.secondary.basic.buttons .active.button, .ui.inverted.secondary.buttons .basic.active.button, .ui.inverted.secondary.basic.active.button { box-shadow: 0 0 0 2px #616161 inset; color: #545454; } .ui.inverted.secondary.basic.buttons .button:active, .ui.inverted.secondary.buttons .basic.button:active, .ui.inverted.secondary.basic.button:active { box-shadow: 0 0 0 2px #6e6e6e inset; color: #545454; } /* Tertiary */ .ui.red.buttons .button, .ui.red.button { background-color: #db2828; color: #fff; text-shadow: none; background-image: none; } .ui.red.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.red.buttons .button:hover, .ui.red.button:hover { background-color: #d01919; color: #fff; text-shadow: none; } .ui.red.buttons .button:focus, .ui.red.button:focus { background-color: #ca1010; color: #fff; text-shadow: none; } .ui.red.buttons .button:active, .ui.red.button:active { background-color: #b21e1e; color: #fff; text-shadow: none; } .ui.red.buttons .active.button, .ui.red.buttons .active.button:active, .ui.red.active.button, .ui.red.button .active.button:active { background-color: #d41515; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.red.buttons .button, .ui.basic.red.button { background: transparent; box-shadow: 0 0 0 1px #db2828 inset; color: #db2828; } .ui.basic.red.buttons .button:hover, .ui.basic.red.button:hover { background: transparent; box-shadow: 0 0 0 1px #d01919 inset; color: #d01919; } .ui.basic.red.buttons .button:focus, .ui.basic.red.button:focus { background: transparent; box-shadow: 0 0 0 1px #ca1010 inset; color: #d01919; } .ui.basic.red.buttons .active.button, .ui.basic.red.active.button { background: transparent; box-shadow: 0 0 0 1px #d41515 inset; color: #b21e1e; } .ui.basic.red.buttons .button:active, .ui.basic.red.button:active { box-shadow: 0 0 0 1px #b21e1e inset; color: #b21e1e; } /* Inverted */ .ui.inverted.red.buttons .button, .ui.inverted.red.button { background-color: transparent; box-shadow: 0 0 0 2px #ff695e inset; 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 { box-shadow: none; color: #fff; } .ui.inverted.red.buttons .button:hover, .ui.inverted.red.button:hover { background-color: #ff392b; } .ui.inverted.red.buttons .button:focus, .ui.inverted.red.button:focus { background-color: #ff4335; } .ui.inverted.red.buttons .active.button, .ui.inverted.red.active.button { background-color: #ff5144; } .ui.inverted.red.buttons .button:active, .ui.inverted.red.button:active { background-color: #ff392b; } /* Inverted Basic */ .ui.inverted.red.basic.buttons .button, .ui.inverted.red.buttons .basic.button, .ui.inverted.red.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.red.basic.buttons .button:hover, .ui.inverted.red.buttons .basic.button:hover, .ui.inverted.red.basic.button:hover { box-shadow: 0 0 0 2px #ff392b inset; color: #ff695e; } .ui.inverted.red.basic.buttons .button:focus, .ui.inverted.red.basic.buttons .button:focus, .ui.inverted.red.basic.button:focus { box-shadow: 0 0 0 2px #ff4335 inset; color: #ff695e; } .ui.inverted.red.basic.buttons .active.button, .ui.inverted.red.buttons .basic.active.button, .ui.inverted.red.basic.active.button { box-shadow: 0 0 0 2px #ff5144 inset; color: #ff695e; } .ui.inverted.red.basic.buttons .button:active, .ui.inverted.red.buttons .basic.button:active, .ui.inverted.red.basic.button:active { box-shadow: 0 0 0 2px #ff392b inset; color: #ff695e; } /* Tertiary */ /* Basic */ /* Inverted */ /* Inverted Basic */ /* Tertiary */ /* Basic */ /* Inverted */ /* Inverted Basic */ /* Tertiary */ /* Basic */ /* Inverted */ /* Inverted Basic */ /* Tertiary */ .ui.green.buttons .button, .ui.green.button { background-color: #269eab; color: #fff; text-shadow: none; background-image: none; } .ui.green.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.green.buttons .button:hover, .ui.green.button:hover { background-color: #1c8f9c; color: #fff; text-shadow: none; } .ui.green.buttons .button:focus, .ui.green.button:focus { background-color: #148894; color: #fff; text-shadow: none; } .ui.green.buttons .button:active, .ui.green.button:active { background-color: #1d7781; color: #fff; text-shadow: none; } .ui.green.buttons .active.button, .ui.green.buttons .active.button:active, .ui.green.active.button, .ui.green.button .active.button:active { background-color: #19929f; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.green.buttons .button, .ui.basic.green.button { background: transparent; box-shadow: 0 0 0 1px #269eab inset; color: #269eab; } .ui.basic.green.buttons .button:hover, .ui.basic.green.button:hover { background: transparent; box-shadow: 0 0 0 1px #1c8f9c inset; color: #1c8f9c; } .ui.basic.green.buttons .button:focus, .ui.basic.green.button:focus { background: transparent; box-shadow: 0 0 0 1px #148894 inset; color: #1c8f9c; } .ui.basic.green.buttons .active.button, .ui.basic.green.active.button { background: transparent; box-shadow: 0 0 0 1px #19929f inset; color: #1d7781; } .ui.basic.green.buttons .button:active, .ui.basic.green.button:active { box-shadow: 0 0 0 1px #1d7781 inset; color: #1d7781; } /* Inverted */ .ui.inverted.green.buttons .button, .ui.inverted.green.button { background-color: transparent; box-shadow: 0 0 0 2px #2ecc40 inset; 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 { box-shadow: none; color: #fff; } .ui.inverted.green.buttons .button:hover, .ui.inverted.green.button:hover { background-color: #1ea92e; } .ui.inverted.green.buttons .button:focus, .ui.inverted.green.button:focus { background-color: #19b82b; } .ui.inverted.green.buttons .active.button, .ui.inverted.green.active.button { background-color: #1fc231; } .ui.inverted.green.buttons .button:active, .ui.inverted.green.button:active { background-color: #25a233; } /* Inverted Basic */ .ui.inverted.green.basic.buttons .button, .ui.inverted.green.buttons .basic.button, .ui.inverted.green.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.green.basic.buttons .button:hover, .ui.inverted.green.buttons .basic.button:hover, .ui.inverted.green.basic.button:hover { box-shadow: 0 0 0 2px #1ea92e inset; color: #2ecc40; } .ui.inverted.green.basic.buttons .button:focus, .ui.inverted.green.basic.buttons .button:focus, .ui.inverted.green.basic.button:focus { box-shadow: 0 0 0 2px #19b82b inset; color: #2ecc40; } .ui.inverted.green.basic.buttons .active.button, .ui.inverted.green.buttons .basic.active.button, .ui.inverted.green.basic.active.button { box-shadow: 0 0 0 2px #1fc231 inset; color: #2ecc40; } .ui.inverted.green.basic.buttons .button:active, .ui.inverted.green.buttons .basic.button:active, .ui.inverted.green.basic.button:active { box-shadow: 0 0 0 2px #25a233 inset; color: #2ecc40; } /* Tertiary */ .ui.teal.buttons .button, .ui.teal.button { background-color: #00b5ad; color: #fff; text-shadow: none; background-image: none; } .ui.teal.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.teal.buttons .button:hover, .ui.teal.button:hover { background-color: #009c95; color: #fff; text-shadow: none; } .ui.teal.buttons .button:focus, .ui.teal.button:focus { background-color: #008c86; color: #fff; text-shadow: none; } .ui.teal.buttons .button:active, .ui.teal.button:active { background-color: #00827c; color: #fff; text-shadow: none; } .ui.teal.buttons .active.button, .ui.teal.buttons .active.button:active, .ui.teal.active.button, .ui.teal.button .active.button:active { background-color: #009c95; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.teal.buttons .button, .ui.basic.teal.button { background: transparent; box-shadow: 0 0 0 1px #00b5ad inset; color: #00b5ad; } .ui.basic.teal.buttons .button:hover, .ui.basic.teal.button:hover { background: transparent; box-shadow: 0 0 0 1px #009c95 inset; color: #009c95; } .ui.basic.teal.buttons .button:focus, .ui.basic.teal.button:focus { background: transparent; box-shadow: 0 0 0 1px #008c86 inset; color: #009c95; } .ui.basic.teal.buttons .active.button, .ui.basic.teal.active.button { background: transparent; box-shadow: 0 0 0 1px #009c95 inset; color: #00827c; } .ui.basic.teal.buttons .button:active, .ui.basic.teal.button:active { box-shadow: 0 0 0 1px #00827c inset; color: #00827c; } /* Inverted */ .ui.inverted.teal.buttons .button, .ui.inverted.teal.button { background-color: transparent; box-shadow: 0 0 0 2px #6dffff inset; 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 { box-shadow: none; color: rgba(0, 0, 0, 0.6); } .ui.inverted.teal.buttons .button:hover, .ui.inverted.teal.button:hover { background-color: #3affff; } .ui.inverted.teal.buttons .button:focus, .ui.inverted.teal.button:focus { background-color: #44ffff; } .ui.inverted.teal.buttons .active.button, .ui.inverted.teal.active.button { background-color: #54ffff; } .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.button:active { background-color: #3affff; } /* Inverted Basic */ .ui.inverted.teal.basic.buttons .button, .ui.inverted.teal.buttons .basic.button, .ui.inverted.teal.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.teal.basic.buttons .button:hover, .ui.inverted.teal.buttons .basic.button:hover, .ui.inverted.teal.basic.button:hover { box-shadow: 0 0 0 2px #3affff inset; color: #6dffff; } .ui.inverted.teal.basic.buttons .button:focus, .ui.inverted.teal.basic.buttons .button:focus, .ui.inverted.teal.basic.button:focus { box-shadow: 0 0 0 2px #44ffff inset; color: #6dffff; } .ui.inverted.teal.basic.buttons .active.button, .ui.inverted.teal.buttons .basic.active.button, .ui.inverted.teal.basic.active.button { box-shadow: 0 0 0 2px #54ffff inset; color: #6dffff; } .ui.inverted.teal.basic.buttons .button:active, .ui.inverted.teal.buttons .basic.button:active, .ui.inverted.teal.basic.button:active { box-shadow: 0 0 0 2px #3affff inset; color: #6dffff; } /* Tertiary */ .ui.blue.buttons .button, .ui.blue.button { background-color: #2185d0; color: #fff; text-shadow: none; background-image: none; } .ui.blue.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.blue.buttons .button:hover, .ui.blue.button:hover { background-color: #1678c2; color: #fff; text-shadow: none; } .ui.blue.buttons .button:focus, .ui.blue.button:focus { background-color: #0d71bb; color: #fff; text-shadow: none; } .ui.blue.buttons .button:active, .ui.blue.button:active { background-color: #1a69a4; color: #fff; text-shadow: none; } .ui.blue.buttons .active.button, .ui.blue.buttons .active.button:active, .ui.blue.active.button, .ui.blue.button .active.button:active { background-color: #1279c6; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.blue.buttons .button, .ui.basic.blue.button { background: transparent; box-shadow: 0 0 0 1px #2185d0 inset; color: #2185d0; } .ui.basic.blue.buttons .button:hover, .ui.basic.blue.button:hover { background: transparent; box-shadow: 0 0 0 1px #1678c2 inset; color: #1678c2; } .ui.basic.blue.buttons .button:focus, .ui.basic.blue.button:focus { background: transparent; box-shadow: 0 0 0 1px #0d71bb inset; color: #1678c2; } .ui.basic.blue.buttons .active.button, .ui.basic.blue.active.button { background: transparent; box-shadow: 0 0 0 1px #1279c6 inset; color: #1a69a4; } .ui.basic.blue.buttons .button:active, .ui.basic.blue.button:active { box-shadow: 0 0 0 1px #1a69a4 inset; color: #1a69a4; } /* Inverted */ .ui.inverted.blue.buttons .button, .ui.inverted.blue.button { background-color: transparent; box-shadow: 0 0 0 2px #54c8ff inset; 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 { box-shadow: none; color: #fff; } .ui.inverted.blue.buttons .button:hover, .ui.inverted.blue.button:hover { background-color: #21b8ff; } .ui.inverted.blue.buttons .button:focus, .ui.inverted.blue.button:focus { background-color: #2bbbff; } .ui.inverted.blue.buttons .active.button, .ui.inverted.blue.active.button { background-color: #3ac0ff; } .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.button:active { background-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.blue.basic.buttons .button, .ui.inverted.blue.buttons .basic.button, .ui.inverted.blue.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.blue.basic.buttons .button:hover, .ui.inverted.blue.buttons .basic.button:hover, .ui.inverted.blue.basic.button:hover { box-shadow: 0 0 0 2px #21b8ff inset; color: #54c8ff; } .ui.inverted.blue.basic.buttons .button:focus, .ui.inverted.blue.basic.buttons .button:focus, .ui.inverted.blue.basic.button:focus { box-shadow: 0 0 0 2px #2bbbff inset; color: #54c8ff; } .ui.inverted.blue.basic.buttons .active.button, .ui.inverted.blue.buttons .basic.active.button, .ui.inverted.blue.basic.active.button { box-shadow: 0 0 0 2px #3ac0ff inset; color: #54c8ff; } .ui.inverted.blue.basic.buttons .button:active, .ui.inverted.blue.buttons .basic.button:active, .ui.inverted.blue.basic.button:active { box-shadow: 0 0 0 2px #21b8ff inset; color: #54c8ff; } /* Tertiary */ /* Basic */ /* Inverted */ /* Inverted Basic */ /* Tertiary */ .ui.purple.buttons .button, .ui.purple.button { background-color: #a333c8; color: #fff; text-shadow: none; background-image: none; } .ui.purple.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.purple.buttons .button:hover, .ui.purple.button:hover { background-color: #9627ba; color: #fff; text-shadow: none; } .ui.purple.buttons .button:focus, .ui.purple.button:focus { background-color: #8f1eb4; color: #fff; text-shadow: none; } .ui.purple.buttons .button:active, .ui.purple.button:active { background-color: #82299f; color: #fff; text-shadow: none; } .ui.purple.buttons .active.button, .ui.purple.buttons .active.button:active, .ui.purple.active.button, .ui.purple.button .active.button:active { background-color: #9724be; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.purple.buttons .button, .ui.basic.purple.button { background: transparent; box-shadow: 0 0 0 1px #a333c8 inset; color: #a333c8; } .ui.basic.purple.buttons .button:hover, .ui.basic.purple.button:hover { background: transparent; box-shadow: 0 0 0 1px #9627ba inset; color: #9627ba; } .ui.basic.purple.buttons .button:focus, .ui.basic.purple.button:focus { background: transparent; box-shadow: 0 0 0 1px #8f1eb4 inset; color: #9627ba; } .ui.basic.purple.buttons .active.button, .ui.basic.purple.active.button { background: transparent; box-shadow: 0 0 0 1px #9724be inset; color: #82299f; } .ui.basic.purple.buttons .button:active, .ui.basic.purple.button:active { box-shadow: 0 0 0 1px #82299f inset; color: #82299f; } /* Inverted */ .ui.inverted.purple.buttons .button, .ui.inverted.purple.button { background-color: transparent; box-shadow: 0 0 0 2px #dc73ff inset; 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 { box-shadow: none; color: #fff; } .ui.inverted.purple.buttons .button:hover, .ui.inverted.purple.button:hover { background-color: #cf40ff; } .ui.inverted.purple.buttons .button:focus, .ui.inverted.purple.button:focus { background-color: #d24aff; } .ui.inverted.purple.buttons .active.button, .ui.inverted.purple.active.button { background-color: #d65aff; } .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.button:active { background-color: #cf40ff; } /* Inverted Basic */ .ui.inverted.purple.basic.buttons .button, .ui.inverted.purple.buttons .basic.button, .ui.inverted.purple.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.purple.basic.buttons .button:hover, .ui.inverted.purple.buttons .basic.button:hover, .ui.inverted.purple.basic.button:hover { box-shadow: 0 0 0 2px #cf40ff inset; color: #dc73ff; } .ui.inverted.purple.basic.buttons .button:focus, .ui.inverted.purple.basic.buttons .button:focus, .ui.inverted.purple.basic.button:focus { box-shadow: 0 0 0 2px #d24aff inset; color: #dc73ff; } .ui.inverted.purple.basic.buttons .active.button, .ui.inverted.purple.buttons .basic.active.button, .ui.inverted.purple.basic.active.button { box-shadow: 0 0 0 2px #d65aff inset; color: #dc73ff; } .ui.inverted.purple.basic.buttons .button:active, .ui.inverted.purple.buttons .basic.button:active, .ui.inverted.purple.basic.button:active { box-shadow: 0 0 0 2px #cf40ff inset; color: #dc73ff; } /* Tertiary */ /* Basic */ /* Inverted */ /* Inverted Basic */ /* Tertiary */ /* Basic */ /* Inverted */ /* Inverted Basic */ /* Tertiary */ .ui.grey.buttons .button, .ui.grey.button { background-color: #767676; color: #fff; text-shadow: none; background-image: none; } .ui.grey.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.grey.buttons .button:hover, .ui.grey.button:hover { background-color: #838383; color: #fff; text-shadow: none; } .ui.grey.buttons .button:focus, .ui.grey.button:focus { background-color: #8a8a8a; color: #fff; text-shadow: none; } .ui.grey.buttons .button:active, .ui.grey.button:active { background-color: #909090; color: #fff; text-shadow: none; } .ui.grey.buttons .active.button, .ui.grey.buttons .active.button:active, .ui.grey.active.button, .ui.grey.button .active.button:active { background-color: #696969; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.grey.buttons .button, .ui.basic.grey.button { background: transparent; box-shadow: 0 0 0 1px #767676 inset; color: #767676; } .ui.basic.grey.buttons .button:hover, .ui.basic.grey.button:hover { background: transparent; box-shadow: 0 0 0 1px #838383 inset; color: #838383; } .ui.basic.grey.buttons .button:focus, .ui.basic.grey.button:focus { background: transparent; box-shadow: 0 0 0 1px #8a8a8a inset; color: #838383; } .ui.basic.grey.buttons .active.button, .ui.basic.grey.active.button { background: transparent; box-shadow: 0 0 0 1px #696969 inset; color: #909090; } .ui.basic.grey.buttons .button:active, .ui.basic.grey.button:active { box-shadow: 0 0 0 1px #909090 inset; color: #909090; } /* Inverted */ .ui.inverted.grey.buttons .button, .ui.inverted.grey.button { background-color: transparent; box-shadow: 0 0 0 2px #d4d4d5 inset; color: #fff; } .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 { box-shadow: none; color: rgba(0, 0, 0, 0.6); } .ui.inverted.grey.buttons .button:hover, .ui.inverted.grey.button:hover { background-color: #c2c4c5; } .ui.inverted.grey.buttons .button:focus, .ui.inverted.grey.button:focus { background-color: #c7c9cb; } .ui.inverted.grey.buttons .active.button, .ui.inverted.grey.active.button { background-color: #cfd0d2; } .ui.inverted.grey.buttons .button:active, .ui.inverted.grey.button:active { background-color: #c2c4c5; } /* Inverted Basic */ .ui.inverted.grey.basic.buttons .button, .ui.inverted.grey.buttons .basic.button, .ui.inverted.grey.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.grey.basic.buttons .button:hover, .ui.inverted.grey.buttons .basic.button:hover, .ui.inverted.grey.basic.button:hover { box-shadow: 0 0 0 2px #c2c4c5 inset; color: #fff; } .ui.inverted.grey.basic.buttons .button:focus, .ui.inverted.grey.basic.buttons .button:focus, .ui.inverted.grey.basic.button:focus { box-shadow: 0 0 0 2px #c7c9cb inset; color: #dcddde; } .ui.inverted.grey.basic.buttons .active.button, .ui.inverted.grey.buttons .basic.active.button, .ui.inverted.grey.basic.active.button { box-shadow: 0 0 0 2px #cfd0d2 inset; color: #fff; } .ui.inverted.grey.basic.buttons .button:active, .ui.inverted.grey.buttons .basic.button:active, .ui.inverted.grey.basic.button:active { box-shadow: 0 0 0 2px #c2c4c5 inset; color: #fff; } /* Tertiary */ .ui.black.buttons .button, .ui.black.button { background-color: #1b1c1d; color: #fff; text-shadow: none; background-image: none; } .ui.black.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.black.buttons .button:hover, .ui.black.button:hover { background-color: #27292a; color: #fff; text-shadow: none; } .ui.black.buttons .button:focus, .ui.black.button:focus { background-color: #2f3032; color: #fff; text-shadow: none; } .ui.black.buttons .button:active, .ui.black.button:active { background-color: #343637; color: #fff; text-shadow: none; } .ui.black.buttons .active.button, .ui.black.buttons .active.button:active, .ui.black.active.button, .ui.black.button .active.button:active { background-color: #0f0f10; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.black.buttons .button, .ui.basic.black.button { background: transparent; box-shadow: 0 0 0 1px #1b1c1d inset; color: #1b1c1d; } .ui.basic.black.buttons .button:hover, .ui.basic.black.button:hover { background: transparent; box-shadow: 0 0 0 1px #27292a inset; color: #27292a; } .ui.basic.black.buttons .button:focus, .ui.basic.black.button:focus { background: transparent; box-shadow: 0 0 0 1px #2f3032 inset; color: #27292a; } .ui.basic.black.buttons .active.button, .ui.basic.black.active.button { background: transparent; box-shadow: 0 0 0 1px #0f0f10 inset; color: #343637; } .ui.basic.black.buttons .button:active, .ui.basic.black.button:active { box-shadow: 0 0 0 1px #343637 inset; color: #343637; } /* Inverted */ .ui.inverted.black.buttons .button, .ui.inverted.black.button { background-color: transparent; box-shadow: 0 0 0 2px #d4d4d5 inset; color: #fff; } .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 { box-shadow: none; color: #fff; } .ui.inverted.black.buttons .button:hover, .ui.inverted.black.button:hover { background-color: #000000; } .ui.inverted.black.buttons .button:focus, .ui.inverted.black.button:focus { background-color: #000000; } .ui.inverted.black.buttons .active.button, .ui.inverted.black.active.button { background-color: #000000; } .ui.inverted.black.buttons .button:active, .ui.inverted.black.button:active { background-color: #000000; } /* Inverted Basic */ .ui.inverted.black.basic.buttons .button, .ui.inverted.black.buttons .basic.button, .ui.inverted.black.basic.button { background-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset; color: #fff; } .ui.inverted.black.basic.buttons .button:hover, .ui.inverted.black.buttons .basic.button:hover, .ui.inverted.black.basic.button:hover { box-shadow: 0 0 0 2px #000000 inset; color: #fff; } .ui.inverted.black.basic.buttons .button:focus, .ui.inverted.black.basic.buttons .button:focus, .ui.inverted.black.basic.button:focus { box-shadow: 0 0 0 2px #000000 inset; color: #545454; } .ui.inverted.black.basic.buttons .active.button, .ui.inverted.black.buttons .basic.active.button, .ui.inverted.black.basic.active.button { box-shadow: 0 0 0 2px #000000 inset; color: #fff; } .ui.inverted.black.basic.buttons .button:active, .ui.inverted.black.buttons .basic.button:active, .ui.inverted.black.basic.button:active { box-shadow: 0 0 0 2px #000000 inset; color: #fff; } /* Tertiary */ /* Standard */ .ui.positive.buttons .button, .ui.positive.button { background-color: #269eab; color: #fff; text-shadow: none; background-image: none; } .ui.positive.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.positive.buttons .button:hover, .ui.positive.button:hover { background-color: #1c8f9c; color: #fff; text-shadow: none; } .ui.positive.buttons .button:focus, .ui.positive.button:focus { background-color: #148894; color: #fff; text-shadow: none; } .ui.positive.buttons .button:active, .ui.positive.button:active { background-color: #1d7781; color: #fff; text-shadow: none; } .ui.positive.buttons .active.button, .ui.positive.buttons .active.button:active, .ui.positive.active.button, .ui.positive.button .active.button:active { background-color: #19929f; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.positive.buttons .button, .ui.basic.positive.button { background: transparent; box-shadow: 0 0 0 1px #269eab inset; color: #269eab; } .ui.basic.positive.buttons .button:hover, .ui.basic.positive.button:hover { background: transparent; box-shadow: 0 0 0 1px #1c8f9c inset; color: #1c8f9c; } .ui.basic.positive.buttons .button:focus, .ui.basic.positive.button:focus { background: transparent; box-shadow: 0 0 0 1px #148894 inset; color: #1c8f9c; } .ui.basic.positive.buttons .active.button, .ui.basic.positive.active.button { background: transparent; box-shadow: 0 0 0 1px #19929f inset; color: #1d7781; } .ui.basic.positive.buttons .button:active, .ui.basic.positive.button:active { box-shadow: 0 0 0 1px #1d7781 inset; color: #1d7781; } .ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) { margin-left: -1px; } /* Standard */ .ui.negative.buttons .button, .ui.negative.button { background-color: #db2828; color: #fff; text-shadow: none; background-image: none; } .ui.negative.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.negative.buttons .button:hover, .ui.negative.button:hover { background-color: #d01919; color: #fff; text-shadow: none; } .ui.negative.buttons .button:focus, .ui.negative.button:focus { background-color: #ca1010; color: #fff; text-shadow: none; } .ui.negative.buttons .button:active, .ui.negative.button:active { background-color: #b21e1e; color: #fff; text-shadow: none; } .ui.negative.buttons .active.button, .ui.negative.buttons .active.button:active, .ui.negative.active.button, .ui.negative.button .active.button:active { background-color: #d41515; color: #fff; text-shadow: none; } /* Basic */ .ui.basic.negative.buttons .button, .ui.basic.negative.button { background: transparent; box-shadow: 0 0 0 1px #db2828 inset; color: #db2828; } .ui.basic.negative.buttons .button:hover, .ui.basic.negative.button:hover { background: transparent; box-shadow: 0 0 0 1px #d01919 inset; color: #d01919; } .ui.basic.negative.buttons .button:focus, .ui.basic.negative.button:focus { background: transparent; box-shadow: 0 0 0 1px #ca1010 inset; color: #d01919; } .ui.basic.negative.buttons .active.button, .ui.basic.negative.active.button { background: transparent; box-shadow: 0 0 0 1px #d41515 inset; color: #b21e1e; } .ui.basic.negative.buttons .button:active, .ui.basic.negative.button:active { box-shadow: 0 0 0 1px #b21e1e inset; color: #b21e1e; } .ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) { margin-left: -1px; } /******************************* Groups *******************************/ .ui.buttons { display: inline-flex; flex-direction: row; font-size: 0; vertical-align: baseline; margin: 0 0.25em 0 0; } .ui.buttons:not(.basic):not(.inverted) { box-shadow: none; } /* Clearfix */ .ui.buttons::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Standard Group */ .ui.buttons .button { flex: 1 0 auto; border-radius: 0; margin: 0; } .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.buttons .button:first-child { border-left: none; margin-left: 0; border-top-left-radius: 0.26666667rem; border-bottom-left-radius: 0.26666667rem; } .ui.buttons .button:last-child { border-top-right-radius: 0.26666667rem; border-bottom-right-radius: 0.26666667rem; } /* Vertical Style */ .ui.vertical.buttons { display: inline-flex; flex-direction: column; } .ui.vertical.buttons .button { display: block; float: none; width: 100%; margin: 0; border-radius: 0; } .ui.vertical.buttons .button:not(.basic) { box-shadow: none; } .ui.vertical.buttons .button:first-child { border-top-left-radius: 0.26666667rem; border-top-right-radius: 0.26666667rem; } .ui.vertical.buttons .button:last-child { margin-bottom: 0; border-bottom-left-radius: 0.26666667rem; border-bottom-right-radius: 0.26666667rem; } .ui.vertical.buttons .button:only-child { border-radius: 0.26666667rem; } .ui.vertical.buttons .basic.button:not(:first-child) { border-top: none; } .ui.wrapped.buttons:not(.spaced) { border-top-right-radius: 0; } .ui.wrapped.buttons:not(.spaced) .button:first-child { border-radius: 0.26666667rem 0 0 0; } .ui.wrapped.buttons:not(.spaced) .button:last-child { border-radius: 0 0 0.26666667rem 0; } .ui.wrapped[class*="top attached"].buttons { border-radius: 0.26666667rem 0 0 0; } .ui.wrapped[class*="top attached"].buttons .button:last-child { border-radius: 0; } .ui.wrapped[class*="bottom attached"].buttons { border-radius: 0 0 0 0.26666667rem; } .ui.wrapped[class*="bottom attached"].buttons .button:first-child { border-radius: 0; } .ui.basic.buttons:not(.vertical).inverted .button, .ui.basic.buttons:not(.vertical) .basic.button { margin-left: -1px; border-right: none; } .ui.basic.buttons:not(.vertical):not(.spaced):not(.inverted) .basic.button { margin-top: -1px; border-bottom: none; } .ui.inverted.basic.buttons:not(.spaced) .button, .ui.attached.basic.buttons:not(.wrapping):not(.inverted) .basic.button { margin-bottom: -1px; } .ui.basic.buttons:not(.vertical):not(.attached):not(.spaced):not(.wrapping):not(.inverted) .basic.button { margin-bottom: -1px; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Container * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* Resizable */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Container *******************************/ /* All Sizes */ .ui.container { display: block; max-width: 100%; } /* Mobile */ @media only screen and (max-width: 767.98px) { .ui.ui.ui.container:not(.fluid) { width: auto; margin-left: 1em; margin-right: 1em; } .ui.ui.ui.grid.container { width: auto; } .ui.ui.ui.relaxed.grid.container { width: auto; } .ui.ui.ui.very.relaxed.grid.container { width: auto; } } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.ui.ui.container:not(.fluid) { width: 721px; margin-left: auto; margin-right: auto; } .ui.ui.ui.grid.container { width: calc(721px + 2rem); } .ui.ui.ui.relaxed.grid.container { width: calc(721px + 3rem); } .ui.ui.ui.very.relaxed.grid.container { width: calc(721px + 5rem); } } /* Small Monitor */ @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .ui.ui.ui.container:not(.fluid) { width: 930px; margin-left: auto; margin-right: auto; } .ui.ui.ui.grid.container { width: calc(930px + 2rem); } .ui.ui.ui.relaxed.grid.container { width: calc(930px + 3rem); } .ui.ui.ui.very.relaxed.grid.container { width: calc(930px + 5rem); } } /* Large Monitor */ @media only screen and (min-width: 1200px) { .ui.ui.ui.container:not(.fluid) { width: 1123px; margin-left: auto; margin-right: auto; } .ui.ui.ui.grid.container { width: calc(1123px + 2rem); } .ui.ui.ui.relaxed.grid.container { width: calc(1123px + 3rem); } .ui.ui.ui.very.relaxed.grid.container { width: calc(1123px + 5rem); } } /******************************* Types *******************************/ /* Text Container */ .ui.text.container { font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; max-width: 700px; line-height: 1.5; font-size: 1.13333333rem; } /* Wide Container */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.ui.ui.wide.container { width: 865.2px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .ui.ui.ui.wide.container { width: 1116px; } } @media only screen and (min-width: 1200px) { .ui.ui.ui.wide.container { width: 1347.6px; } } /* Fluid */ .ui.fluid.container { width: 100%; } /******************************* Variations *******************************/ .ui[class*="left aligned"].container { text-align: left; } .ui[class*="center aligned"].container { text-align: center; } .ui[class*="right aligned"].container { text-align: right; } /* -------------- Scrolling --------------- */ .ui.scrolling.container { overflow: auto; overscroll-behavior: none; } @media only screen and (max-width: 767.98px) { .ui.scrolling.container.short { max-height: 11.25em; } .ui.scrolling.container[class*="very short"] { max-height: 7.5em; } .ui.scrolling.container { max-height: 15em; } .ui.scrolling.container.long { max-height: 30em; } .ui.scrolling.container[class*="very long"] { max-height: 45em; } } @media only screen and (min-width: 768px) { .ui.scrolling.container.short { max-height: 13.5em; } .ui.scrolling.container[class*="very short"] { max-height: 9em; } .ui.scrolling.container { max-height: 18em; } .ui.scrolling.container.long { max-height: 36em; } .ui.scrolling.container[class*="very long"] { max-height: 54em; } } @media only screen and (min-width: 992px) { .ui.scrolling.container.short { max-height: 18em; } .ui.scrolling.container[class*="very short"] { max-height: 12em; } .ui.scrolling.container { max-height: 24em; } .ui.scrolling.container.long { max-height: 48em; } .ui.scrolling.container[class*="very long"] { max-height: 72em; } } @media only screen and (min-width: 1920px) { .ui.scrolling.container.short { max-height: 22.5em; } .ui.scrolling.container[class*="very short"] { max-height: 15em; } .ui.scrolling.container { max-height: 30em; } .ui.scrolling.container.long { max-height: 60em; } .ui.scrolling.container[class*="very long"] { max-height: 90em; } } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Divider * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Divider *******************************/ /* ------------------- Element -------------------- */ /* Text */ /* ------------------- Coupling -------------------- */ /* Icon */ /******************************* Variations *******************************/ /* Horizontal / Vertical */ /* Inverted */ /* Section */ /* Sizes */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Divider *******************************/ .ui.divider { margin: 1rem 0; line-height: 1; height: 0; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(0, 0, 0, 0.85); -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* -------------- Basic --------------- */ .ui.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 { left: auto; } /* -------------- Horizontal --------------- */ .ui.horizontal.divider { display: table; white-space: nowrap; height: auto; margin: ""; line-height: 1; text-align: center; } .ui.horizontal.divider::before, .ui.horizontal.divider::after { content: ""; display: table-cell; position: relative; top: 50%; width: 50%; background-repeat: no-repeat; } .ui.horizontal.divider::before { background-position: right 1em top 50%; } .ui.horizontal.divider::after { background-position: left 1em top 50%; } /* -------------- Vertical --------------- */ .ui.vertical.divider { position: absolute; z-index: 2; top: 50%; left: 50%; margin: 0; padding: 0; width: auto; height: 50%; line-height: 0; text-align: center; transform: translateX(-50%); } .ui.vertical.divider::before, .ui.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 { top: -100%; } .ui.vertical.divider::after { top: auto; bottom: 0; } /* Inside grid */ @media only screen and (max-width: 767.98px) { .ui.stackable.grid .ui.vertical.divider, .ui.grid .stackable.row .ui.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 { 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 { background-position: right 1em top 50%; } .ui.stackable.grid .ui.vertical.divider::after, .ui.grid .stackable.row .ui.vertical.divider::after { background-position: left 1em top 50%; } } /* -------------- Icon --------------- */ .ui.divider > .icon { margin: 0; font-size: 1rem; height: 1em; vertical-align: middle; } /* -------------- Header --------------- */ .ui.horizontal.divider[class*="left aligned"]::before { display: none; } .ui.horizontal.divider[class*="left aligned"]::after { width: 100%; } .ui.horizontal.divider[class*="right aligned"]::before { width: 100%; } .ui.horizontal.divider[class*="right aligned"]::after { display: none; } /******************************* Variations *******************************/ /* -------------- Hidden --------------- */ .ui.hidden.divider { border-color: transparent !important; } .ui.hidden.divider::before, .ui.hidden.divider::after { display: none; } /* -------------- Inverted --------------- */ .ui.divider.inverted, .ui.vertical.inverted.divider, .ui.horizontal.inverted.divider { color: #fff; } .ui.divider.inverted, .ui.divider.inverted::after, .ui.divider.inverted::before { border-color: rgba(34, 36, 38, 0.15) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) rgba(34, 36, 38, 0.15) !important; } /* -------------- Fitted --------------- */ .ui.fitted.divider { margin: 0; } /* -------------- Clearing --------------- */ .ui.clearing.divider { clear: both; } /* -------------- Section --------------- */ .ui.section.divider { margin-top: 2rem; margin-bottom: 2rem; } /* -------------- Sizes --------------- */ .ui.divider { font-size: 1rem; } .ui.mini.divider { font-size: 0.8rem; } .ui.tiny.divider { font-size: 0.86666667rem; } .ui.small.divider { font-size: 0.93333333rem; } .ui.large.divider { font-size: 1.13333333rem; } .ui.big.divider { font-size: 1.26666667rem; } .ui.huge.divider { font-size: 1.4rem; } .ui.massive.divider { font-size: 1.73333333rem; } /******************************* Theme Overrides *******************************/ .ui.horizontal.divider::before, .ui.horizontal.divider::after { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC"); } @media only screen and (max-width: 767px) { .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 { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC"); } } /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Header * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Header *******************************/ /* Standard */ .ui.header { border: none; margin: calc(2rem - 0.1428571428571429em) 0 1rem; padding: 0 0; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.28571429em; text-transform: none; color: rgba(0, 0, 0, 0.87); } .ui.header:first-child { margin-top: -0.14285714em; } .ui.header:last-child { margin-bottom: 0; } /* -------------- Sub Header --------------- */ .ui.header .sub.header { display: block; font-weight: normal; padding: 0; margin: 0; font-size: 1rem; line-height: 1.2em; color: rgba(0, 0, 0, 0.6); } /* -------------- Icon --------------- */ .ui.header > .icons, .ui.header > i.icon { display: table-cell; opacity: 1; font-size: 1.5em; padding-top: 0; vertical-align: middle; } /* With Text Node */ .ui.header:not(.icon) > .icons:only-child, .ui.header:not(.icon) > i.icon:only-child { display: inline-block; padding: 0; margin-right: 0.75rem; } /* ------------------- Image -------------------- */ .ui.header > .image:not(.icon), .ui.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 { margin-right: 0.75rem; } /* -------------- Content --------------- */ .ui.header .content { display: inline-block; vertical-align: top; } /* After Image */ .ui.header > img + .content, .ui.header > .image + .content { padding-left: 0.75rem; vertical-align: middle; } /* After Icon */ .ui.header:not(.icon):not(.centered):not(.aligned) > .icons + .content, .ui.header:not(.icon):not(.centered):not(.aligned) > i.icon + .content { padding-left: 0.75rem; display: table-cell; vertical-align: middle; } /* -------------- Loose Coupling --------------- */ .ui.header .ui.label { font-size: ""; margin-left: 0.5rem; vertical-align: middle; } /* Positioning */ .ui.header + p { margin-top: 0; } /******************************* Types *******************************/ /* -------------- Page --------------- */ h1.ui.header { font-size: 2rem; } h1.ui.header .sub.header { font-size: 1.13333333rem; } h2.ui.header { font-size: 1.71428571rem; } h2.ui.header .sub.header { font-size: 1.13333333rem; } h3.ui.header { font-size: 1.28571429rem; } h3.ui.header .sub.header { font-size: 1rem; } h4.ui.header { font-size: 1.07142857rem; } h4.ui.header .sub.header { font-size: 1rem; } h5.ui.header { font-size: 1rem; } h5.ui.header .sub.header { font-size: 0.93333333rem; } /* -------------- Content Heading --------------- */ .ui.mini.header { font-size: 0.85714286em; } .ui.mini.header .sub.header { font-size: 0.93333333rem; } .ui.mini.sub.header { font-size: 0.8em; } .ui.tiny.header { font-size: 1em; } .ui.tiny.header .sub.header { font-size: 0.93333333rem; } .ui.tiny.sub.header { font-size: 0.8em; } .ui.small.header { font-size: 1.07142857em; } .ui.small.header .sub.header { font-size: 1rem; } .ui.small.sub.header { font-size: 0.8em; } .ui.large.header { font-size: 1.71428571em; } .ui.large.header .sub.header { font-size: 1.13333333rem; } .ui.large.sub.header { font-size: 0.93333333em; } .ui.big.header { font-size: 1.85714286em; } .ui.big.header .sub.header { font-size: 1.13333333rem; } .ui.big.sub.header { font-size: 1em; } .ui.huge.header { font-size: 2em; min-height: 1em; } .ui.huge.header .sub.header { font-size: 1.13333333rem; } .ui.huge.sub.header { font-size: 1em; } .ui.massive.header { font-size: 2.28571429em; min-height: 1em; } .ui.massive.header .sub.header { font-size: 1.4rem; } .ui.massive.sub.header { font-size: 1.13333333em; } /* -------------- Sub Heading --------------- */ .ui.sub.header { padding: 0; margin-bottom: 0.13333333rem; font-weight: bold; font-size: 0.86666667em; text-transform: uppercase; color: ""; } /* ------------------- Icon -------------------- */ .ui.icon.header { display: inline-block; text-align: center; margin: 2rem 0 1rem; } .ui.icon.header::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .ui.icon.header:first-child { margin-top: 0; } .ui.icon.header > .image.icon, .ui.icon.header > .icons, .ui.icon.header > i.icon { float: none; display: block; width: auto; height: auto; line-height: 1; padding: 0; font-size: 3em; margin: 0 auto 0.5rem; opacity: 1; } .ui.icon.header .content { display: block; padding: 0; } .ui.icon.header > i.circular { font-size: 2em; } .ui.block.icon.header > .image.icon, .ui.block.icon.header > .icons, .ui.block.icon.header > i.icon { margin-bottom: 0; } .ui.icon.header.aligned { margin-left: auto; margin-right: auto; display: block; } /******************************* States *******************************/ .ui.disabled.header { opacity: 0.45; } /******************************* Variations *******************************/ /* ------------------- Inverted -------------------- */ .ui.inverted.header { color: #fff; } .ui.inverted.header .sub.header { color: rgba(255, 255, 255, 0.8); } .ui.inverted.attached.header { background: #1b1c1d; box-shadow: none; border-color: transparent; } .ui.inverted.block.header { background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); box-shadow: none; border-bottom: none; } /* ------------------- Colors -------------------- */ .ui.primary.header { color: #0e3f47; } a.ui.primary.header:hover { color: #082e34; } .ui.primary.dividing.header { border-bottom: 2px solid #0e3f47; } .ui.inverted.primary.header.header.header { color: #54c8ff; } a.ui.inverted.primary.header.header.header:hover { color: #21b8ff; } .ui.inverted.primary.dividing.header { border-bottom: 2px solid #54c8ff; } .ui.secondary.header { color: #1b1c1d; } a.ui.secondary.header:hover { color: #27292a; } .ui.secondary.dividing.header { border-bottom: 2px solid #1b1c1d; } .ui.inverted.secondary.header.header.header { color: #545454; } a.ui.inverted.secondary.header.header.header:hover { color: #6e6e6e; } .ui.inverted.secondary.dividing.header { border-bottom: 2px solid #545454; } .ui.red.header { color: #db2828; } a.ui.red.header:hover { color: #d01919; } .ui.red.dividing.header { border-bottom: 2px solid #db2828; } .ui.inverted.red.header.header.header { color: #ff695e; } a.ui.inverted.red.header.header.header:hover { color: #ff392b; } .ui.inverted.red.dividing.header { border-bottom: 2px solid #ff695e; } .ui.green.header { color: #269eab; } a.ui.green.header:hover { color: #1c8f9c; } .ui.green.dividing.header { border-bottom: 2px solid #269eab; } .ui.inverted.green.header.header.header { color: #2ecc40; } a.ui.inverted.green.header.header.header:hover { color: #1ea92e; } .ui.inverted.green.dividing.header { border-bottom: 2px solid #2ecc40; } .ui.teal.header { color: #00b5ad; } a.ui.teal.header:hover { color: #009c95; } .ui.teal.dividing.header { border-bottom: 2px solid #00b5ad; } .ui.inverted.teal.header.header.header { color: #6dffff; } a.ui.inverted.teal.header.header.header:hover { color: #3affff; } .ui.inverted.teal.dividing.header { border-bottom: 2px solid #6dffff; } .ui.blue.header { color: #2185d0; } a.ui.blue.header:hover { color: #1678c2; } .ui.blue.dividing.header { border-bottom: 2px solid #2185d0; } .ui.inverted.blue.header.header.header { color: #54c8ff; } a.ui.inverted.blue.header.header.header:hover { color: #21b8ff; } .ui.inverted.blue.dividing.header { border-bottom: 2px solid #54c8ff; } .ui.purple.header { color: #a333c8; } a.ui.purple.header:hover { color: #9627ba; } .ui.purple.dividing.header { border-bottom: 2px solid #a333c8; } .ui.inverted.purple.header.header.header { color: #dc73ff; } a.ui.inverted.purple.header.header.header:hover { color: #cf40ff; } .ui.inverted.purple.dividing.header { border-bottom: 2px solid #dc73ff; } .ui.grey.header { color: #767676; } a.ui.grey.header:hover { color: #838383; } .ui.grey.dividing.header { border-bottom: 2px solid #767676; } .ui.inverted.grey.header.header.header { color: #dcddde; } a.ui.inverted.grey.header.header.header:hover { color: #c2c4c5; } .ui.inverted.grey.dividing.header { border-bottom: 2px solid #dcddde; } .ui.black.header { color: #1b1c1d; } a.ui.black.header:hover { color: #27292a; } .ui.black.dividing.header { border-bottom: 2px solid #1b1c1d; } .ui.inverted.black.header.header.header { color: #545454; } a.ui.inverted.black.header.header.header:hover { color: #000000; } .ui.inverted.black.dividing.header { border-bottom: 2px solid #545454; } /* ------------------- Aligned -------------------- */ .ui.left.aligned.header { text-align: left; } .ui.right.aligned.header { text-align: right; } .ui.centered.header, .ui.center.aligned.header { text-align: center; } /* ------------------- Floated -------------------- */ .ui.floated.header, .ui[class*="left floated"].header { float: left; margin-top: 0; margin-right: 0.5em; } .ui[class*="right floated"].header { float: right; margin-top: 0; margin-left: 0.5em; } /* ------------------- Fitted -------------------- */ .ui.fitted.header { padding: 0; } /* ------------------- Dividing -------------------- */ .ui.dividing.header { padding-bottom: 0.2rem; border-bottom: 1px solid rgba(34, 36, 38, 0.15); } .ui.dividing.header .sub.header { padding-bottom: 0.2rem; } .ui.dividing.header i.icon { margin-bottom: 0; } .ui.inverted.dividing.header { border-bottom-color: rgba(255, 255, 255, 0.1); } /* ------------------- Block -------------------- */ .ui.block.header { background: #f3f4f5; padding: 0.8rem 1rem; box-shadow: none; border: 1px solid #d4d4d5; border-radius: 0.26666667rem; } .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1rem; } .ui.mini.block.header { font-size: 0.8rem; } .ui.tiny.block.header { font-size: 0.86666667rem; } .ui.small.block.header { font-size: 0.93333333rem; } .ui.large.block.header { font-size: 1.13333333rem; } .ui.big.block.header { font-size: 1.26666667rem; } .ui.huge.block.header { font-size: 1.4rem; } .ui.massive.block.header { font-size: 1.73333333rem; } /* ------------------- Attached -------------------- */ .ui.attached.header { background: #fff; padding: 0.8rem 1rem; margin: 0 -1px; box-shadow: none; border: 1px solid #d4d4d5; border-radius: 0; } .ui.attached.block.header { background: #f3f4f5; } .ui.attached:not(.top).header { border-top: none; } .ui.top.attached.header { border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.bottom.attached.header { border-radius: 0 0 0.26666667rem 0.26666667rem; } /* Attached Sizes */ .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1em; } .ui.mini.attached.header { font-size: 0.8em; } .ui.tiny.attached.header { font-size: 0.86666667em; } .ui.small.attached.header { font-size: 0.93333333em; } .ui.large.attached.header { font-size: 1.13333333em; } .ui.big.attached.header { font-size: 1.26666667em; } .ui.huge.attached.header { font-size: 1.4em; } .ui.massive.attached.header { font-size: 1.73333333em; } /* ------------------- Sizing -------------------- */ .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: 1.28571429em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Icon * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /* * Font Awesome 5.15.4 by @fontawesome [https://fontawesome.com] * License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License) */ /******************************* Fomantic-UI integration of FontAwesome: // class names are separated i.icon.angle-left => i.icon.angle.left // variations are extracted i.icon.circle => i.icon.circle i.icon.circle-o => i.icon.circle.outline // abbreviation are replaced by full words i.icon.*-h => i.icon.*.horizontal i.icon.*-v => i.icon.*.vertical i.icon.alpha => i.icon.alphabet i.icon.asc => i.icon.ascending i.icon.desc => i.icon.descending i.icon.alt => i.icon.alternate Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand *******************************/ /******************************* Icon *******************************/ /* -------------- Font Files --------------- */ /* Solid Icons */ /* Deprecated (In/Out Naming Conflict) */ /* Icons */ /* -------------- Definition --------------- */ /* Icon Variables */ /* Variations */ /* Duotone specifics */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Icon *******************************/ @font-face { font-family: "icons"; src: url("/semantic/themes/default/assets/fonts/icons.woff2") format("woff2") , url("/semantic/themes/default/assets/fonts/icons.woff") format("woff"); font-style: normal; font-weight: normal; font-display: block; font-variant: normal; text-decoration: inherit; text-transform: none; } @font-face { font-family: "outline-icons"; src: url("/semantic/themes/default/assets/fonts/outline-icons.woff2") format("woff2") , url("/semantic/themes/default/assets/fonts/outline-icons.woff") format("woff"); font-style: normal; font-weight: normal; font-display: block; font-variant: normal; text-decoration: inherit; text-transform: none; } @font-face { font-family: "brand-icons"; src: url("/semantic/themes/default/assets/fonts/brand-icons.woff2") format("woff2") , url("/semantic/themes/default/assets/fonts/brand-icons.woff") format("woff"); font-style: normal; font-weight: normal; font-display: block; font-variant: normal; text-decoration: inherit; text-transform: none; } i.icon { display: inline-block; opacity: 1; margin: 0 0.25rem 0 0; width: 1.18em; height: 1em; font-family: "icons"; font-style: normal; font-weight: normal; text-decoration: inherit; text-align: center; speak: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; backface-visibility: hidden; } i.icon::before { background: none; } /******************************* Types *******************************/ /* -------------- Loading --------------- */ i.loading.icon { height: 1em; line-height: 1; } i.loading.icon, i.loading.icons { animation: loader 2s linear infinite; } /******************************* States *******************************/ i.icon:hover, i.icons:hover, i.icon:active, i.icons:active { opacity: 1; } i.disabled.icon, i.disabled.icons { opacity: 0.45; cursor: default; pointer-events: none; } /******************************* Variations *******************************/ /* ------------------- Fitted -------------------- */ i.fitted.icons, i.fitted.icon { width: auto; margin: 0 !important; } /* ------------------- Link -------------------- */ i.link.icon:not(.disabled), i.link.icons:not(.disabled) { cursor: pointer; opacity: 0.8; transition: opacity 0.1s ease; } i.link.icon:hover, i.link.icons:hover { opacity: 1; } /* ------------------- Circular -------------------- */ i.circular.icon { border-radius: 500em !important; line-height: 1 !important; padding: 0.5em 0 !important; box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; width: 2em !important; height: 2em !important; } i.circular.icon.colored { box-shadow: 0 0 0 0.1em currentColor inset; } i.circular.inverted.icon { border: none; box-shadow: none; } /* ------------------- Flipped -------------------- */ /* ------------------- Rotated -------------------- */ /* -------------------------- Flipped & Rotated --------------------------- */ /* ------------------- Bordered -------------------- */ i.bordered.icon { line-height: 1; vertical-align: baseline; width: 2em; height: 2em; padding: 0.5em 0 !important; box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; } i.bordered.icon.colored { box-shadow: 0 0 0 0.1em currentColor inset; } i.bordered.inverted.icon { border: none; box-shadow: none; } /* ------------------- Inverted -------------------- */ /* Inverted Shapes */ i.inverted.bordered.icon, i.inverted.circular.icon { background-color: #1b1c1d; color: #fff; } i.inverted.icon { color: #fff; } /* ------------------- Colors -------------------- */ i.primary.icon.icon.icon.icon.icon.icon { color: #0e3f47; } i.inverted.primary.icon.icon.icon.icon.icon.icon { color: #54c8ff; } i.inverted.bordered.primary.icon.icon.icon.icon.icon.icon, i.inverted.circular.primary.icon.icon.icon.icon.icon.icon, i.inverted.bordered.primary.icons, i.inverted.circular.primary.icons { background-color: #0e3f47; color: #fff; } i.secondary.icon.icon.icon.icon.icon.icon { color: #1b1c1d; } i.inverted.secondary.icon.icon.icon.icon.icon.icon { color: #545454; } i.inverted.bordered.secondary.icon.icon.icon.icon.icon.icon, i.inverted.circular.secondary.icon.icon.icon.icon.icon.icon, i.inverted.bordered.secondary.icons, i.inverted.circular.secondary.icons { background-color: #1b1c1d; color: #fff; } i.red.icon.icon.icon.icon.icon.icon { color: #db2828; } i.inverted.red.icon.icon.icon.icon.icon.icon { color: #ff695e; } i.inverted.bordered.red.icon.icon.icon.icon.icon.icon, i.inverted.circular.red.icon.icon.icon.icon.icon.icon, i.inverted.bordered.red.icons, i.inverted.circular.red.icons { background-color: #db2828; color: #fff; } i.green.icon.icon.icon.icon.icon.icon { color: #269eab; } i.inverted.green.icon.icon.icon.icon.icon.icon { color: #2ecc40; } i.inverted.bordered.green.icon.icon.icon.icon.icon.icon, i.inverted.circular.green.icon.icon.icon.icon.icon.icon, i.inverted.bordered.green.icons, i.inverted.circular.green.icons { background-color: #269eab; color: #fff; } i.teal.icon.icon.icon.icon.icon.icon { color: #00b5ad; } i.inverted.teal.icon.icon.icon.icon.icon.icon { color: #6dffff; } i.inverted.bordered.teal.icon.icon.icon.icon.icon.icon, i.inverted.circular.teal.icon.icon.icon.icon.icon.icon, i.inverted.bordered.teal.icons, i.inverted.circular.teal.icons { background-color: #00b5ad; color: #fff; } i.blue.icon.icon.icon.icon.icon.icon { color: #2185d0; } i.inverted.blue.icon.icon.icon.icon.icon.icon { color: #54c8ff; } i.inverted.bordered.blue.icon.icon.icon.icon.icon.icon, i.inverted.circular.blue.icon.icon.icon.icon.icon.icon, i.inverted.bordered.blue.icons, i.inverted.circular.blue.icons { background-color: #2185d0; color: #fff; } i.purple.icon.icon.icon.icon.icon.icon { color: #a333c8; } i.inverted.purple.icon.icon.icon.icon.icon.icon { color: #dc73ff; } i.inverted.bordered.purple.icon.icon.icon.icon.icon.icon, i.inverted.circular.purple.icon.icon.icon.icon.icon.icon, i.inverted.bordered.purple.icons, i.inverted.circular.purple.icons { background-color: #a333c8; color: #fff; } i.grey.icon.icon.icon.icon.icon.icon { color: #767676; } i.inverted.grey.icon.icon.icon.icon.icon.icon { color: #dcddde; } i.inverted.bordered.grey.icon.icon.icon.icon.icon.icon, i.inverted.circular.grey.icon.icon.icon.icon.icon.icon, i.inverted.bordered.grey.icons, i.inverted.circular.grey.icons { background-color: #767676; color: #fff; } i.black.icon.icon.icon.icon.icon.icon { color: #1b1c1d; } i.inverted.black.icon.icon.icon.icon.icon.icon { color: #545454; } i.inverted.bordered.black.icon.icon.icon.icon.icon.icon, i.inverted.circular.black.icon.icon.icon.icon.icon.icon, i.inverted.bordered.black.icons, i.inverted.circular.black.icons { background-color: #1b1c1d; color: #fff; } /* ------------------- Sizes -------------------- */ i.icon, i.icons { font-size: 1em; line-height: 1; font-style: normal; } i.mini.mini.mini.icon, i.mini.mini.mini.icons { font-size: 0.4em; vertical-align: middle; } i.tiny.tiny.tiny.icon, i.tiny.tiny.tiny.icons { font-size: 0.5em; vertical-align: middle; } i.small.small.small.icon, i.small.small.small.icons { font-size: 0.75em; vertical-align: middle; } i.large.large.large.icon, i.large.large.large.icons { font-size: 1.5em; vertical-align: middle; } i.big.big.big.icon, i.big.big.big.icons { font-size: 2em; vertical-align: middle; } i.huge.huge.huge.icon, i.huge.huge.huge.icons { font-size: 4em; vertical-align: middle; } i.massive.massive.massive.icon, i.massive.massive.massive.icons { font-size: 8em; vertical-align: middle; } /******************************* Groups *******************************/ i.icons { display: inline-block; position: relative; line-height: 1; min-width: 1.18em; min-height: 1em; margin: 0 0.25rem 0 0; text-align: center; } i.icons .icon { position: absolute; top: 50%; left: 50%; margin: 0; } i.icons .icon:not(.corner):not(.rotated):not(.flipped) { transform: translateX(-50%) translateY(-50%); } i.icons .icon:first-child { position: static; width: auto; height: auto; vertical-align: top; } i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) { transform: none; } /* Corner Icon */ /************************************************* Bordered/circular with corner or group icons *************************************************/ i.bordered.icons, i.circular.icons { width: 2em; height: 2em; box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset; vertical-align: middle; } i.bordered.icons.colored, i.circular.icons.colored { box-shadow: 0 0 0 0.1em currentColor inset; } i.circular.icons { border-radius: 500em; } i.bordered.icons i.icon:first-child, i.circular.icons i.icon:first-child { position: absolute; transform: translateX(-50%) translateY(-50%); } /* Inverted Icon */ i.bordered.inverted.icons, i.circular.inverted.icons { border: none; box-shadow: none; background-color: #1b1c1d; color: #fff; } /* Corner Icon */ /* Deprecated *In/Out Naming Conflict) */ i.icon.linkedin.in::before { content: "\f0e1"; } i.icon.zoom.in::before { content: "\f00e"; } i.icon.zoom.out::before { content: "\f010"; } i.icon.sign.in::before { content: "\f2f6"; } i.icon.log.out::before { content: "\f2f5"; } i.icon.sign.out::before { content: "\f2f5"; } i.icon.sign.in.alternate::before { content: "\f2f6"; } i.icon.sign.out.alternate::before { content: "\f2f5"; } /******************************* Solid Icons *******************************/ /* Icons */ i.icon.ad::before { content: "\f641"; } i.icon.address.book::before { content: "\f2b9"; } i.icon.address.card::before { content: "\f2bb"; } i.icon.adjust::before { content: "\f042"; } i.icon.angle.double.down::before { content: "\f103"; } 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.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.archive::before { content: "\f187"; } i.icon.arrow.alternate.circle.down::before { content: "\f358"; } i.icon.arrow.alternate.circle.left::before { content: "\f359"; } i.icon.arrow.alternate.circle.right::before { content: "\f35a"; } i.icon.arrow.alternate.circle.up::before { content: "\f35b"; } i.icon.arrow.circle.down::before { content: "\f0ab"; } 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.down::before { content: "\f063"; } i.icon.arrow.left::before { content: "\f060"; } i.icon.arrow.right::before { content: "\f061"; } i.icon.arrow.up::before { content: "\f062"; } i.icon.at::before { content: "\f1fa"; } i.icon.audio.description::before { content: "\f29e"; } i.icon.award::before { content: "\f559"; } i.icon.backspace::before { content: "\f55a"; } i.icon.backward::before { content: "\f04a"; } i.icon.balance.scale::before { content: "\f24e"; } i.icon.balance.scale.left::before { content: "\f515"; } i.icon.balance.scale.right::before { content: "\f516"; } i.icon.barcode::before { content: "\f02a"; } i.icon.blog::before { content: "\f781"; } i.icon.bold::before { content: "\f032"; } i.icon.book::before { content: "\f02d"; } i.icon.book.open::before { content: "\f518"; } i.icon.book.reader::before { content: "\f5da"; } i.icon.border.all::before { content: "\f84c"; } i.icon.border.none::before { content: "\f850"; } i.icon.border.style::before { content: "\f853"; } i.icon.box::before { content: "\f466"; } i.icon.box.open::before { content: "\f49e"; } i.icon.broadcast.tower::before { content: "\f519"; } i.icon.brush::before { content: "\f55d"; } i.icon.bug::before { content: "\f188"; } i.icon.building::before { content: "\f1ad"; } i.icon.business.time::before { content: "\f64a"; } i.icon.calendar::before { content: "\f133"; } i.icon.calendar.alternate::before { content: "\f073"; } i.icon.calendar.check::before { content: "\f274"; } i.icon.calendar.plus::before { content: "\f271"; } i.icon.calendar.times::before { content: "\f273"; } i.icon.camera::before { content: "\f030"; } i.icon.check::before { content: "\f00c"; } i.icon.check.circle::before { content: "\f058"; } i.icon.check.double::before { content: "\f560"; } i.icon.chevron.circle.down::before { content: "\f13a"; } 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.down::before { content: "\f078"; } i.icon.chevron.left::before { content: "\f053"; } i.icon.chevron.right::before { content: "\f054"; } i.icon.chevron.up::before { content: "\f077"; } i.icon.circle::before { content: "\f111"; } i.icon.city::before { content: "\f64f"; } i.icon.clipboard::before { content: "\f328"; } i.icon.clipboard.check::before { content: "\f46c"; } i.icon.clipboard.list::before { content: "\f46d"; } i.icon.clock::before { content: "\f017"; } i.icon.clone::before { content: "\f24d"; } i.icon.code::before { content: "\f121"; } i.icon.code.branch::before { content: "\f126"; } i.icon.columns::before { content: "\f0db"; } i.icon.comment::before { content: "\f075"; } i.icon.comment.alternate::before { content: "\f27a"; } i.icon.cookie::before { content: "\f563"; } i.icon.copy::before { content: "\f0c5"; } i.icon.cube::before { content: "\f1b2"; } i.icon.cut::before { content: "\f0c4"; } i.icon.desktop::before { content: "\f108"; } i.icon.directions::before { content: "\f5eb"; } i.icon.download::before { content: "\f019"; } i.icon.drum::before { content: "\f569"; } i.icon.edit::before { content: "\f044"; } i.icon.ellipsis.horizontal::before { content: "\f141"; } i.icon.ellipsis.vertical::before { content: "\f142"; } i.icon.envelope::before { content: "\f0e0"; } i.icon.envelope.open::before { content: "\f2b6"; } i.icon.envelope.open.text::before { content: "\f658"; } i.icon.equals::before { content: "\f52c"; } i.icon.expand::before { content: "\f065"; } i.icon.expand.alternate::before { content: "\f424"; } i.icon.external.alternate::before { content: "\f35d"; } i.icon.fast.backward::before { content: "\f049"; } i.icon.fast.forward::before { content: "\f050"; } i.icon.file::before { content: "\f15b"; } i.icon.file.alternate::before { content: "\f15c"; } i.icon.file.archive::before { content: "\f1c6"; } i.icon.file.audio::before { content: "\f1c7"; } i.icon.file.code::before { content: "\f1c9"; } i.icon.file.download::before { content: "\f56d"; } i.icon.file.export::before { content: "\f56e"; } i.icon.file.image::before { content: "\f1c5"; } i.icon.file.import::before { content: "\f56f"; } i.icon.file.pdf::before { content: "\f1c1"; } i.icon.file.powerpoint::before { content: "\f1c4"; } i.icon.file.video::before { content: "\f1c8"; } i.icon.file.word::before { content: "\f1c2"; } i.icon.fill::before { content: "\f575"; } i.icon.film::before { content: "\f008"; } i.icon.filter::before { content: "\f0b0"; } i.icon.fire::before { content: "\f06d"; } i.icon.fire.alternate::before { content: "\f7e4"; } i.icon.first.aid::before { content: "\f479"; } i.icon.flag::before { content: "\f024"; } i.icon.font::before { content: "\f031"; } i.icon.forward::before { content: "\f04e"; } i.icon.gift::before { content: "\f06b"; } i.icon.glasses::before { content: "\f530"; } i.icon.graduation.cap::before { content: "\f19d"; } i.icon.hand.holding::before { content: "\f4bd"; } i.icon.hand.holding.heart::before { content: "\f4be"; } i.icon.hand.paper::before { content: "\f256"; } i.icon.hand.point.down::before { content: "\f0a7"; } i.icon.hand.point.left::before { content: "\f0a5"; } i.icon.hand.point.right::before { content: "\f0a4"; } i.icon.hand.point.up::before { content: "\f0a6"; } i.icon.hand.pointer::before { content: "\f25a"; } i.icon.hands::before { content: "\f4c2"; } i.icon.hands.helping::before { content: "\f4c4"; } i.icon.handshake::before { content: "\f2b5"; } i.icon.hashtag::before { content: "\f292"; } i.icon.heading::before { content: "\f1dc"; } i.icon.heart::before { content: "\f004"; } i.icon.history::before { content: "\f1da"; } i.icon.home::before { content: "\f015"; } i.icon.hourglass::before { content: "\f254"; } i.icon.hourglass.end::before { content: "\f253"; } i.icon.hourglass.half::before { content: "\f252"; } i.icon.hourglass.start::before { content: "\f251"; } i.icon.house.user::before { content: "\e065"; } i.icon.i.cursor::before { content: "\f246"; } i.icon.icons::before { content: "\f86d"; } i.icon.id.card::before { content: "\f2c2"; } i.icon.id.card.alternate::before { content: "\f47f"; } i.icon.image::before { content: "\f03e"; } i.icon.images::before { content: "\f302"; } i.icon.industry::before { content: "\f275"; } i.icon.info::before { content: "\f129"; } i.icon.info.circle::before { content: "\f05a"; } i.icon.italic::before { content: "\f033"; } i.icon.joint::before { content: "\f595"; } i.icon.key::before { content: "\f084"; } i.icon.keyboard::before { content: "\f11c"; } i.icon.language::before { content: "\f1ab"; } i.icon.laptop::before { content: "\f109"; } i.icon.laptop.code::before { content: "\f5fc"; } i.icon.laptop.house::before { content: "\e066"; } i.icon.layer.group::before { content: "\f5fd"; } i.icon.less.than::before { content: "\f536"; } i.icon.lightbulb::before { content: "\f0eb"; } i.icon.list::before { content: "\f03a"; } i.icon.list.alternate::before { content: "\f022"; } i.icon.list.ol::before { content: "\f0cb"; } i.icon.list.ul::before { content: "\f0ca"; } i.icon.location.arrow::before { content: "\f124"; } i.icon.lock::before { content: "\f023"; } i.icon.lock.open::before { content: "\f3c1"; } i.icon.long.arrow.alternate.down::before { content: "\f309"; } i.icon.long.arrow.alternate.left::before { content: "\f30a"; } i.icon.long.arrow.alternate.right::before { content: "\f30b"; } i.icon.long.arrow.alternate.up::before { content: "\f30c"; } i.icon.map::before { content: "\f279"; } i.icon.map.marked::before { content: "\f59f"; } i.icon.map.marked.alternate::before { content: "\f5a0"; } i.icon.map.marker::before { content: "\f041"; } i.icon.map.marker.alternate::before { content: "\f3c5"; } i.icon.map.pin::before { content: "\f276"; } i.icon.marker::before { content: "\f5a1"; } i.icon.microphone::before { content: "\f130"; } i.icon.microphone.alternate::before { content: "\f3c9"; } i.icon.mobile::before { content: "\f10b"; } i.icon.mobile.alternate::before { content: "\f3cd"; } i.icon.mouse::before { content: "\f8cc"; } i.icon.mouse.pointer::before { content: "\f245"; } i.icon.music::before { content: "\f001"; } i.icon.network.wired::before { content: "\f6ff"; } i.icon.object.group::before { content: "\f247"; } i.icon.paint.brush::before { content: "\f1fc"; } i.icon.paper.plane::before { content: "\f1d8"; } i.icon.paste::before { content: "\f0ea"; } i.icon.pause::before { content: "\f04c"; } i.icon.pause.circle::before { content: "\f28b"; } i.icon.pen::before { content: "\f304"; } i.icon.pen.alternate::before { content: "\f305"; } i.icon.pencil.alternate::before { content: "\f303"; } i.icon.person.booth::before { content: "\f756"; } i.icon.phone::before { content: "\f095"; } i.icon.phone.alternate::before { content: "\f879"; } i.icon.phone.volume::before { content: "\f2a0"; } i.icon.photo.video::before { content: "\f87c"; } i.icon.plane::before { content: "\f072"; } i.icon.play::before { content: "\f04b"; } i.icon.play.circle::before { content: "\f144"; } i.icon.plus::before { content: "\f067"; } i.icon.plus.circle::before { content: "\f055"; } i.icon.portrait::before { content: "\f3e0"; } i.icon.power.off::before { content: "\f011"; } i.icon.print::before { content: "\f02f"; } i.icon.procedures::before { content: "\f487"; } i.icon.project.diagram::before { content: "\f542"; } i.icon.puzzle.piece::before { content: "\f12e"; } i.icon.question::before { content: "\f128"; } i.icon.question.circle::before { content: "\f059"; } i.icon.quote.left::before { content: "\f10d"; } i.icon.quote.right::before { content: "\f10e"; } i.icon.random::before { content: "\f074"; } i.icon.registered::before { content: "\f25d"; } i.icon.remove.format::before { content: "\f87d"; } i.icon.ribbon::before { content: "\f4d6"; } i.icon.robot::before { content: "\f544"; } i.icon.rss::before { content: "\f09e"; } i.icon.running::before { content: "\f70c"; } i.icon.save::before { content: "\f0c7"; } i.icon.scroll::before { content: "\f70e"; } i.icon.search::before { content: "\f002"; } i.icon.search.location::before { content: "\f689"; } i.icon.search.plus::before { content: "\f00e"; } i.icon.server::before { content: "\f233"; } i.icon.shapes::before { content: "\f61f"; } i.icon.share::before { content: "\f064"; } i.icon.share.alternate::before { content: "\f1e0"; } i.icon.ship::before { content: "\f21a"; } i.icon.sign::before { content: "\f4d9"; } i.icon.sign.language::before { content: "\f2a7"; } i.icon.sliders.horizontal::before { content: "\f1de"; } i.icon.sort::before { content: "\f0dc"; } i.icon.sort.amount.down::before { content: "\f160"; } i.icon.sort.amount.down.alternate::before { content: "\f884"; } i.icon.sort.amount.up::before { content: "\f161"; } i.icon.sort.amount.up.alternate::before { content: "\f885"; } i.icon.sort.down::before { content: "\f0dd"; } i.icon.sort.numeric.down::before { content: "\f162"; } i.icon.sort.numeric.down.alternate::before { content: "\f886"; } i.icon.sort.numeric.up::before { content: "\f163"; } i.icon.sort.numeric.up.alternate::before { content: "\f887"; } i.icon.sort.up::before { content: "\f0de"; } i.icon.star::before { content: "\f005"; } i.icon.star.half::before { content: "\f089"; } i.icon.star.half.alternate::before { content: "\f5c0"; } i.icon.star.of.life::before { content: "\f621"; } i.icon.step.backward::before { content: "\f048"; } i.icon.step.forward::before { content: "\f051"; } i.icon.stop::before { content: "\f04d"; } i.icon.stop.circle::before { content: "\f28d"; } i.icon.stopwatch::before { content: "\f2f2"; } i.icon.store::before { content: "\f54e"; } i.icon.store.alternate::before { content: "\f54f"; } i.icon.stream::before { content: "\f550"; } i.icon.sync::before { content: "\f021"; } i.icon.sync.alternate::before { content: "\f2f1"; } i.icon.table::before { content: "\f0ce"; } i.icon.tablet::before { content: "\f10a"; } i.icon.tablet.alternate::before { content: "\f3fa"; } i.icon.tag::before { content: "\f02b"; } i.icon.tags::before { content: "\f02c"; } i.icon.tasks::before { content: "\f0ae"; } i.icon.text.height::before { content: "\f034"; } i.icon.text.width::before { content: "\f035"; } i.icon.th::before { content: "\f00a"; } i.icon.th.large::before { content: "\f009"; } i.icon.th.list::before { content: "\f00b"; } i.icon.times::before { content: "\f00d"; } i.icon.times.circle::before { content: "\f057"; } i.icon.tired::before { content: "\f5c8"; } i.icon.toggle.off::before { content: "\f204"; } i.icon.toggle.on::before { content: "\f205"; } i.icon.tools::before { content: "\f7d9"; } i.icon.traffic.light::before { content: "\f637"; } i.icon.train::before { content: "\f238"; } i.icon.tree::before { content: "\f1bb"; } i.icon.trophy::before { content: "\f091"; } i.icon.tv::before { content: "\f26c"; } i.icon.underline::before { content: "\f0cd"; } i.icon.universal.access::before { content: "\f29a"; } i.icon.university::before { content: "\f19c"; } i.icon.user::before { content: "\f007"; } i.icon.user.alternate::before { content: "\f406"; } i.icon.user.check::before { content: "\f4fc"; } i.icon.user.circle::before { content: "\f2bd"; } i.icon.user.clock::before { content: "\f4fd"; } i.icon.user.edit::before { content: "\f4ff"; } i.icon.user.friends::before { content: "\f500"; } i.icon.user.graduate::before { content: "\f501"; } i.icon.user.lock::before { content: "\f502"; } i.icon.user.md::before { content: "\f0f0"; } i.icon.user.plus::before { content: "\f234"; } i.icon.user.tag::before { content: "\f507"; } i.icon.user.times::before { content: "\f235"; } i.icon.users::before { content: "\f0c0"; } i.icon.video::before { content: "\f03d"; } i.icon.volume.down::before { content: "\f027"; } i.icon.volume.mute::before { content: "\f6a9"; } i.icon.volume.off::before { content: "\f026"; } i.icon.volume.up::before { content: "\f028"; } i.icon.window.close::before { content: "\f410"; } i.icon.window.minimize::before { content: "\f2d1"; } i.icon.window.restore::before { content: "\f2d2"; } i.icon.won.sign::before { content: "\f159"; } i.icon.yen.sign::before { content: "\f157"; } /* Aliases */ i.icon.add::before { content: "\f067"; } i.icon.add.circle::before { content: "\f055"; } i.icon.add.to.calendar::before { content: "\f271"; } i.icon.add.user::before { content: "\f234"; } i.icon.announcement::before { content: "\f0a1"; } i.icon.area.graph::before { content: "\f1fe"; } i.icon.attach::before { content: "\f0c6"; } i.icon.attention::before { content: "\f06a"; } i.icon.balance::before { content: "\f24e"; } i.icon.bar::before { content: "\f0fc"; } i.icon.birthday::before { content: "\f1fd"; } i.icon.block.layout::before { content: "\f009"; } i.icon.browser::before { content: "\f022"; } i.icon.call::before { content: "\f095"; } i.icon.cancel::before { content: "\f00d"; } i.icon.cc::before { content: "\f20a"; } i.icon.chat::before { content: "\f075"; } i.icon.circle.thin::before { content: "\f111"; } i.icon.close::before { content: "\f00d"; } i.icon.commenting::before { content: "\f27a"; } i.icon.computer::before { content: "\f108"; } i.icon.configure::before { content: "\f0ad"; } i.icon.content::before { content: "\f0c9"; } i.icon.delete::before { content: "\f00d"; } i.icon.delete.calendar::before { content: "\f273"; } i.icon.discussions::before { content: "\f086"; } i.icon.dropdown::before { content: "\f0d7"; } i.icon.external::before { content: "\f35d"; } i.icon.external.share::before { content: "\f14d"; } i.icon.favorite::before { content: "\f005"; } i.icon.feed::before { content: "\f09e"; } i.icon.file.text::before { content: "\f15c"; } i.icon.find::before { content: "\f1e5"; } i.icon.first.aid::before { content: "\f0fa"; } i.icon.game::before { content: "\f11b"; } i.icon.graduation::before { content: "\f19d"; } i.icon.grid.layout::before { content: "\f00a"; } i.icon.group::before { content: "\f0c0"; } i.icon.h::before { content: "\f0fd"; } i.icon.header::before { content: "\f1dc"; } i.icon.heart.empty::before { content: "\f004"; } i.icon.help::before { content: "\f128"; } i.icon.help.circle::before { content: "\f059"; } i.icon.hide::before { content: "\f070"; } i.icon.hourglass.four::before { content: "\f254"; } i.icon.hourglass.full::before { content: "\f254"; } i.icon.hourglass.one::before { content: "\f251"; } i.icon.hourglass.three::before { content: "\f253"; } i.icon.hourglass.two::before { content: "\f252"; } i.icon.idea::before { content: "\f0eb"; } i.icon.lab::before { content: "\f0c3"; } i.icon.law::before { content: "\f24e"; } i.icon.lightning::before { content: "\f0e7"; } i.icon.like::before { content: "\f004"; } i.icon.list.layout::before { content: "\f00b"; } i.icon.mail::before { content: "\f0e0"; } i.icon.mail.forward::before { content: "\f064"; } i.icon.marker::before { content: "\f041"; } i.icon.move::before { content: "\f0b2"; } i.icon.mute::before { content: "\f131"; } i.icon.options::before { content: "\f1de"; } i.icon.other.gender::before { content: "\f229"; } i.icon.other.gender.horizontal::before { content: "\f22b"; } i.icon.other.gender.vertical::before { content: "\f22a"; } i.icon.pencil::before { content: "\f303"; } i.icon.photo::before { content: "\f030"; } i.icon.pin::before { content: "\f08d"; } i.icon.point::before { content: "\f041"; } i.icon.pointing.down::before { content: "\f0a7"; } i.icon.pointing.left::before { content: "\f0a5"; } i.icon.pointing.right::before { content: "\f0a4"; } i.icon.pointing.up::before { content: "\f0a6"; } i.icon.power::before { content: "\f011"; } i.icon.privacy::before { content: "\f084"; } i.icon.puzzle::before { content: "\f12e"; } i.icon.r.circle::before { content: "\f25d"; } i.icon.record::before { content: "\f03d"; } i.icon.refresh::before { content: "\f021"; } i.icon.remove::before { content: "\f00d"; } i.icon.remove.circle::before { content: "\f057"; } i.icon.remove.from.calendar::before { content: "\f272"; } i.icon.remove.user::before { content: "\f235"; } i.icon.resize.horizontal::before { content: "\f337"; } i.icon.resize.vertical::before { content: "\f338"; } i.icon.send::before { content: "\f1d8"; } i.icon.setting::before { content: "\f013"; } i.icon.settings::before { content: "\f085"; } i.icon.sidebar::before { content: "\f0c9"; } i.icon.sliders::before { content: "\f1de"; } i.icon.sound::before { content: "\f025"; } i.icon.star.empty::before { content: "\f005"; } i.icon.star.half.empty::before { content: "\f089"; } i.icon.star.half.full::before { content: "\f089"; } i.icon.student::before { content: "\f19d"; } i.icon.talk::before { content: "\f27a"; } i.icon.target::before { content: "\f140"; } i.icon.text.cursor::before { content: "\f246"; } i.icon.text.telephone::before { content: "\f1e4"; } i.icon.time::before { content: "\f017"; } i.icon.times.rectangle::before { content: "\f410"; } i.icon.toggle.down::before { content: "\f150"; } i.icon.toggle.left::before { content: "\f191"; } i.icon.toggle.right::before { content: "\f152"; } i.icon.toggle.up::before { content: "\f151"; } i.icon.translate::before { content: "\f1ab"; } i.icon.triangle.down::before { content: "\f0d7"; } i.icon.triangle.left::before { content: "\f0d9"; } i.icon.triangle.right::before { content: "\f0da"; } i.icon.triangle.up::before { content: "\f0d8"; } i.icon.try::before { content: "\f195"; } i.icon.user.cancel::before { content: "\f235"; } i.icon.user.close::before { content: "\f235"; } i.icon.user.delete::before { content: "\f235"; } i.icon.user.x::before { content: "\f235"; } i.icon.video.camera::before { content: "\f03d"; } i.icon.video.play::before { content: "\f144"; } i.icon.volume.control.phone::before { content: "\f2a0"; } i.icon.wait::before { content: "\f017"; } i.icon.warning::before { content: "\f12a"; } i.icon.warning.circle::before { content: "\f06a"; } i.icon.warning.sign::before { content: "\f071"; } i.icon.wizard::before { content: "\f0d0"; } i.icon.won::before { content: "\f159"; } i.icon.world::before { content: "\f0ac"; } i.icon.write::before { content: "\f303"; } i.icon.x::before { content: "\f00d"; } i.icon.yen::before { content: "\f157"; } i.icon.zoom::before { content: "\f00e"; } /******************************* Outline Icons *******************************/ i.icon.outline { font-family: "outline-icons"; } /* Icons */ i.icon.address.book.outline::before { content: "\f2b9"; } i.icon.address.card.outline::before { content: "\f2bb"; } i.icon.arrow.alternate.circle.down.outline::before { content: "\f358"; } i.icon.arrow.alternate.circle.left.outline::before { content: "\f359"; } i.icon.arrow.alternate.circle.right.outline::before { content: "\f35a"; } i.icon.arrow.alternate.circle.up.outline::before { content: "\f35b"; } i.icon.building.outline::before { content: "\f1ad"; } i.icon.calendar.alternate.outline::before { content: "\f073"; } i.icon.calendar.check.outline::before { content: "\f274"; } i.icon.calendar.outline::before { content: "\f133"; } i.icon.calendar.plus.outline::before { content: "\f271"; } i.icon.calendar.times.outline::before { content: "\f273"; } i.icon.check.circle.outline::before { content: "\f058"; } i.icon.circle.outline::before { content: "\f111"; } i.icon.clipboard.outline::before { content: "\f328"; } i.icon.clock.outline::before { content: "\f017"; } i.icon.clone.outline::before { content: "\f24d"; } i.icon.comment.alternate.outline::before { content: "\f27a"; } i.icon.comment.outline::before { content: "\f075"; } i.icon.copy.outline::before { content: "\f0c5"; } i.icon.edit.outline::before { content: "\f044"; } i.icon.envelope.open.outline::before { content: "\f2b6"; } i.icon.envelope.outline::before { content: "\f0e0"; } i.icon.file.alternate.outline::before { content: "\f15c"; } i.icon.file.archive.outline::before { content: "\f1c6"; } i.icon.file.audio.outline::before { content: "\f1c7"; } i.icon.file.code.outline::before { content: "\f1c9"; } i.icon.file.image.outline::before { content: "\f1c5"; } i.icon.file.outline::before { content: "\f15b"; } i.icon.file.pdf.outline::before { content: "\f1c1"; } i.icon.file.powerpoint.outline::before { content: "\f1c4"; } i.icon.file.video.outline::before { content: "\f1c8"; } i.icon.file.word.outline::before { content: "\f1c2"; } i.icon.flag.outline::before { content: "\f024"; } i.icon.hand.paper.outline::before { content: "\f256"; } i.icon.hand.point.down.outline::before { content: "\f0a7"; } i.icon.hand.point.left.outline::before { content: "\f0a5"; } i.icon.hand.point.right.outline::before { content: "\f0a4"; } i.icon.hand.point.up.outline::before { content: "\f0a6"; } i.icon.hand.pointer.outline::before { content: "\f25a"; } i.icon.handshake.outline::before { content: "\f2b5"; } i.icon.heart.outline::before { content: "\f004"; } i.icon.hourglass.outline::before { content: "\f254"; } i.icon.id.card.outline::before { content: "\f2c2"; } i.icon.image.outline::before { content: "\f03e"; } i.icon.images.outline::before { content: "\f302"; } i.icon.keyboard.outline::before { content: "\f11c"; } i.icon.lightbulb.outline::before { content: "\f0eb"; } i.icon.list.alternate.outline::before { content: "\f022"; } i.icon.map.outline::before { content: "\f279"; } i.icon.object.group.outline::before { content: "\f247"; } i.icon.paper.plane.outline::before { content: "\f1d8"; } i.icon.pause.circle.outline::before { content: "\f28b"; } i.icon.play.circle.outline::before { content: "\f144"; } i.icon.question.circle.outline::before { content: "\f059"; } i.icon.registered.outline::before { content: "\f25d"; } i.icon.save.outline::before { content: "\f0c7"; } i.icon.star.half.outline::before { content: "\f089"; } i.icon.star.outline::before { content: "\f005"; } i.icon.stop.circle.outline::before { content: "\f28d"; } i.icon.times.circle.outline::before { content: "\f057"; } i.icon.tired.outline::before { content: "\f5c8"; } i.icon.user.circle.outline::before { content: "\f2bd"; } i.icon.user.outline::before { content: "\f007"; } i.icon.window.close.outline::before { content: "\f410"; } i.icon.window.minimize.outline::before { content: "\f2d1"; } i.icon.window.restore.outline::before { content: "\f2d2"; } /* Aliases */ /******************************* Brand Icons *******************************/ /* Icons */ i.icon.accessible::before { content: "\f368"; font-family: "brand-icons"; } i.icon.amazon::before { content: "\f270"; font-family: "brand-icons"; } i.icon.app.store::before { content: "\f36f"; font-family: "brand-icons"; } i.icon.bootstrap::before { content: "\f836"; font-family: "brand-icons"; } i.icon.cc.visa::before { content: "\f1f0"; font-family: "brand-icons"; } i.icon.chrome::before { content: "\f268"; font-family: "brand-icons"; } i.icon.cloudflare::before { content: "\e07d"; font-family: "brand-icons"; } i.icon.creative.commons::before { content: "\f25e"; font-family: "brand-icons"; } i.icon.creative.commons.by::before { content: "\f4e7"; font-family: "brand-icons"; } i.icon.creative.commons.nc::before { content: "\f4e8"; font-family: "brand-icons"; } i.icon.creative.commons.nc.jp::before { content: "\f4ea"; font-family: "brand-icons"; } i.icon.creative.commons.share::before { content: "\f4f2"; font-family: "brand-icons"; } i.icon.critical.role::before { content: "\f6c9"; font-family: "brand-icons"; } i.icon.d.and.d::before { content: "\f38d"; font-family: "brand-icons"; } i.icon.d.and.d.beyond::before { content: "\f6ca"; font-family: "brand-icons"; } i.icon.dev::before { content: "\f6cc"; font-family: "brand-icons"; } i.icon.discourse::before { content: "\f393"; font-family: "brand-icons"; } i.icon.dropbox::before { content: "\f16b"; font-family: "brand-icons"; } i.icon.edge::before { content: "\f282"; font-family: "brand-icons"; } i.icon.edge.legacy::before { content: "\e078"; font-family: "brand-icons"; } i.icon.facebook::before { content: "\f09a"; font-family: "brand-icons"; } i.icon.facebook.f::before { content: "\f39e"; font-family: "brand-icons"; } i.icon.firefox::before { content: "\f269"; font-family: "brand-icons"; } i.icon.firefox.browser::before { content: "\e007"; font-family: "brand-icons"; } i.icon.first.order::before { content: "\f2b0"; font-family: "brand-icons"; } i.icon.first.order.alternate::before { content: "\f50a"; font-family: "brand-icons"; } i.icon.flickr::before { content: "\f16e"; font-family: "brand-icons"; } i.icon.get.pocket::before { content: "\f265"; font-family: "brand-icons"; } i.icon.github::before { content: "\f09b"; font-family: "brand-icons"; } i.icon.github.alternate::before { content: "\f113"; font-family: "brand-icons"; } i.icon.google::before { content: "\f1a0"; font-family: "brand-icons"; } i.icon.google.drive::before { content: "\f3aa"; font-family: "brand-icons"; } i.icon.google.play::before { content: "\f3ab"; font-family: "brand-icons"; } i.icon.google.plus::before { content: "\f2b3"; font-family: "brand-icons"; } i.icon.google.plus.g::before { content: "\f0d5"; font-family: "brand-icons"; } i.icon.html5::before { content: "\f13b"; font-family: "brand-icons"; } i.icon.ideal::before { content: "\e013"; font-family: "brand-icons"; } i.icon.java::before { content: "\f4e4"; font-family: "brand-icons"; } i.icon.js::before { content: "\f3b8"; font-family: "brand-icons"; } i.icon.linkedin::before { content: "\f08c"; font-family: "brand-icons"; } i.icon.markdown::before { content: "\f60f"; font-family: "brand-icons"; } i.icon.mastodon::before { content: "\f4f6"; font-family: "brand-icons"; } i.icon.maxcdn::before { content: "\f136"; font-family: "brand-icons"; } i.icon.medium::before { content: "\f23a"; font-family: "brand-icons"; } i.icon.medium.m::before { content: "\f3c7"; font-family: "brand-icons"; } i.icon.microsoft::before { content: "\f3ca"; font-family: "brand-icons"; } i.icon.node::before { content: "\f419"; font-family: "brand-icons"; } i.icon.node.js::before { content: "\f3d3"; font-family: "brand-icons"; } i.icon.npm::before { content: "\f3d4"; font-family: "brand-icons"; } i.icon.php::before { content: "\f457"; font-family: "brand-icons"; } i.icon.pushed::before { content: "\f3e1"; font-family: "brand-icons"; } i.icon.r.project::before { content: "\f4f7"; font-family: "brand-icons"; } i.icon.readme::before { content: "\f4d5"; font-family: "brand-icons"; } i.icon.rev::before { content: "\f5b2"; font-family: "brand-icons"; } i.icon.safari::before { content: "\f267"; font-family: "brand-icons"; } i.icon.sketch::before { content: "\f7c6"; font-family: "brand-icons"; } i.icon.slideshare::before { content: "\f1e7"; font-family: "brand-icons"; } i.icon.speaker.deck::before { content: "\f83c"; font-family: "brand-icons"; } i.icon.twitter::before { content: "\f099"; font-family: "brand-icons"; } i.icon.vimeo::before { content: "\f40a"; font-family: "brand-icons"; } i.icon.vimeo.v::before { content: "\f27d"; font-family: "brand-icons"; } i.icon.wikipedia.w::before { content: "\f266"; font-family: "brand-icons"; } i.icon.wordpress::before { content: "\f19a"; font-family: "brand-icons"; } i.icon.wordpress.simple::before { content: "\f411"; font-family: "brand-icons"; } i.icon.youtube::before { content: "\f167"; font-family: "brand-icons"; } /* Aliases */ i.icon.fa::before { content: "\f2b4"; font-family: "brand-icons"; } i.icon.facebook.official::before { content: "\f082"; font-family: "brand-icons"; } i.icon.five.hundred.pixels::before { content: "\f26e"; font-family: "brand-icons"; } i.icon.google.plus.circle::before { content: "\f2b3"; font-family: "brand-icons"; } i.icon.google.plus.official::before { content: "\f2b3"; font-family: "brand-icons"; } i.icon.microsoft.edge::before { content: "\f282"; font-family: "brand-icons"; } i.icon.ms.edge::before { content: "\f282"; font-family: "brand-icons"; } i.icon.pocket::before { content: "\f265"; font-family: "brand-icons"; } i.icon.visa::before { content: "\f1f0"; font-family: "brand-icons"; } i.icon.visa.card::before { content: "\f1f0"; font-family: "brand-icons"; } i.icon.wikipedia::before { content: "\f266"; font-family: "brand-icons"; } i.icon.wordpress.forms::before { content: "\f298"; font-family: "brand-icons"; } i.icon.ycombinator::before { content: "\f23b"; font-family: "brand-icons"; } i.icon.youtube.play::before { content: "\f167"; font-family: "brand-icons"; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Image * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Image *******************************/ /* ------------------- Element -------------------- */ /* ------------------- Types -------------------- */ /* Avatar */ /* ------------------- Variations -------------------- */ /* Spaced */ /* Floated */ /* Size */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Image *******************************/ .ui.image { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; background-color: transparent; } img.ui.image { display: block; } .ui.image svg, .ui.image img { display: block; max-width: 100%; height: auto; } /******************************* States *******************************/ .ui.hidden.images, .ui.ui.hidden.image { display: none; } .ui.hidden.transition.images, .ui.hidden.transition.image { display: block; visibility: hidden; } .ui.images > .hidden.transition { display: inline-block; visibility: hidden; } .ui.disabled.images, .ui.disabled.image { cursor: default; opacity: 0.45; } /******************************* Variations *******************************/ /* -------------- Inline --------------- */ .ui.inline.image, .ui.inline.image svg, .ui.inline.image img { display: inline-block; } /* ------------------ Vertical Aligned ------------------- */ .ui.top.aligned.image, .ui.top.aligned.image svg, .ui.top.aligned.image img { display: inline-block; vertical-align: top; } .ui.middle.aligned.image, .ui.middle.aligned.image svg, .ui.middle.aligned.image img { display: inline-block; vertical-align: middle; } .ui.bottom.aligned.image, .ui.bottom.aligned.image svg, .ui.bottom.aligned.image img { display: inline-block; vertical-align: bottom; } .ui.top.aligned.images .image, .ui.images .ui.top.aligned.image { align-self: flex-start; } .ui.middle.aligned.images .image, .ui.images .ui.middle.aligned.image { align-self: center; } .ui.bottom.aligned.images .image, .ui.images .ui.bottom.aligned.image { align-self: flex-end; } /* -------------- Rounded --------------- */ /* -------------- 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 { border: 1px solid rgba(0, 0, 0, 0.1); } /* -------------- Circular --------------- */ .ui.circular.images, .ui.circular.image { overflow: hidden; } .ui.circular.images .image, .ui.circular.image, .ui.circular.images .image > *, .ui.circular.image > * { 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 { 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 { margin-right: 0.25em; display: inline-block; width: 2em; height: 2em; border-radius: 500rem; } /* ------------------- Spaced -------------------- */ .ui[class*="left spaced"].image { margin-left: 0.5em; margin-right: 0; } .ui[class*="right spaced"].image { margin-left: 0; margin-right: 0.5em; } /* ------------------- Floated -------------------- */ .ui.floated.image, .ui.floated.images { float: left; margin-right: 1em; margin-bottom: 1em; } .ui.right.floated.images, .ui.right.floated.image { float: right; margin-right: 0; margin-bottom: 1em; margin-left: 1em; } .ui.floated.images:last-child, .ui.floated.image:last-child { margin-bottom: 0; } .ui.centered.image { display: block; margin-left: auto; margin-right: auto; } .ui.centered.images { display: flex; flex-flow: row wrap; align-items: stretch; justify-content: center; } /* -------------- Sizes --------------- */ .ui.medium.images .image, .ui.medium.images img, .ui.medium.images svg, .ui.medium.image { width: 300px; height: auto; font-size: 1rem; } .ui.mini.images .image, .ui.mini.images img, .ui.mini.images svg, .ui.mini.image { width: 35px; height: auto; font-size: 0.8rem; } .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.images svg, .ui.tiny.image { width: 80px; height: auto; font-size: 0.86666667rem; } .ui.small.images .image, .ui.small.images img, .ui.small.images svg, .ui.small.image { width: 150px; height: auto; font-size: 0.93333333rem; } .ui.large.images .image, .ui.large.images img, .ui.large.images svg, .ui.large.image { width: 450px; height: auto; font-size: 1.13333333rem; } .ui.big.images .image, .ui.big.images img, .ui.big.images svg, .ui.big.image { width: 600px; height: auto; font-size: 1.26666667rem; } .ui.huge.images .image, .ui.huge.images img, .ui.huge.images svg, .ui.huge.image { width: 800px; height: auto; font-size: 1.4rem; } .ui.massive.images .image, .ui.massive.images img, .ui.massive.images svg, .ui.massive.image { width: 960px; height: auto; font-size: 1.73333333rem; } /******************************* Groups *******************************/ .ui.images { font-size: 0; margin: 0 -0.25rem; } .ui.images .image, .ui.images > img, .ui.images > svg { display: inline-block; margin: 0 0.25rem 0.5rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Input * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Input *******************************/ /* ------------------- Element -------------------- */ /* ------------------- Types -------------------- */ /* Icon Input */ /* Circular Icon Input */ /* Labeled Input */ /* ------------------- States -------------------- */ /* Placeholder */ /* Down */ /* Focus */ /* Loader */ /* file */ /* ------------------- Variations -------------------- */ /* Inverted */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Standard *******************************/ /* -------------------- Inputs --------------------- */ .ui.input { position: relative; font-weight: normal; font-style: normal; display: inline-flex; color: rgba(0, 0, 0, 0.87); } .ui.input > input { margin: 0; max-width: 100%; flex: 1 1 auto; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; line-height: 1.21428571em; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; background: #fff; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); border-radius: 0.26666667rem; transition: box-shadow 0.1s ease, border-color 0.1s ease; box-shadow: none; } .ui.input > input:not([type="color"]) { padding: 0.62619048em 0.93333333em; } .ui.input > input::-webkit-calendar-picker-indicator { padding: 0; opacity: 0.5; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; } /* -------------------- Placeholder --------------------- */ /* browsers require these rules separate */ .ui.input > input::-moz-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.input > input::placeholder { color: rgba(191, 191, 191, 0.87); } .ui.input > input::-moz-placeholder { opacity: 1; } .ui.input > input:-ms-input-placeholder { color: rgba(191, 191, 191, 0.87); } /******************************* States *******************************/ /* -------------------- Disabled --------------------- */ .ui.disabled.input, .ui.input:not(.disabled) input[disabled] { opacity: 0.45; } .ui.disabled.input > input, .ui.input:not(.disabled) input[disabled] { pointer-events: none; } /* -------------------- Active --------------------- */ .ui.input > input:active, .ui.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.ui.loading.input > i.icon::before { position: absolute; content: ""; top: 50%; left: 50%; margin: -0.63333333em 0 0 -0.63333333em; width: 1.26666667em; height: 1.26666667em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.ui.loading.input > i.icon::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -0.63333333em 0 0 -0.63333333em; width: 1.26666667em; height: 1.26666667em; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; box-shadow: 0 0 0 1px transparent; } /* -------------------- Focus --------------------- */ .ui.input.focus > input, .ui.input > input:focus { border-color: #85b7d9; background: #fff; color: rgba(0, 0, 0, 0.8); box-shadow: none; } .ui.input.focus > input::-moz-placeholder, .ui.input > input:focus::-moz-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus > input::placeholder, .ui.input > input:focus::placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus > input:-ms-input-placeholder, .ui.input > input:focus:-ms-input-placeholder { color: rgba(115, 115, 115, 0.87); } /* -------------------- States --------------------- */ .ui.input.error > input { background-color: #fff6f6; border-color: #e0b4b4; color: #9f3a38; box-shadow: none; } /* Placeholder */ .ui.input.error > input::-moz-placeholder { color: #e7bdbc; } .ui.input.error > input::placeholder { color: #e7bdbc; } .ui.input.error > input:-ms-input-placeholder { color: #e7bdbc !important; } /* Focused Placeholder */ .ui.input.error > input:focus::-moz-placeholder { color: #da9796; } .ui.input.error > input:focus::placeholder { color: #da9796; } .ui.input.error > input:focus:-ms-input-placeholder { color: #da9796 !important; } .ui.input.info > input { background-color: #f8ffff; border-color: #a9d5de; color: #276f86; box-shadow: none; } /* Placeholder */ .ui.input.info > input::-moz-placeholder { color: #98cfe1; } .ui.input.info > input::placeholder { color: #98cfe1; } .ui.input.info > input:-ms-input-placeholder { color: #98cfe1 !important; } /* Focused Placeholder */ .ui.input.info > input:focus::-moz-placeholder { color: #70bdd6; } .ui.input.info > input:focus::placeholder { color: #70bdd6; } .ui.input.info > input:focus:-ms-input-placeholder { color: #70bdd6 !important; } .ui.input.success > input { background-color: #fcfff5; border-color: #a3c293; color: #2c662d; box-shadow: none; } /* Placeholder */ .ui.input.success > input::-moz-placeholder { color: #8fcf90; } .ui.input.success > input::placeholder { color: #8fcf90; } .ui.input.success > input:-ms-input-placeholder { color: #8fcf90 !important; } /* Focused Placeholder */ .ui.input.success > input:focus::-moz-placeholder { color: #6cbf6d; } .ui.input.success > input:focus::placeholder { color: #6cbf6d; } .ui.input.success > input:focus:-ms-input-placeholder { color: #6cbf6d !important; } .ui.input.warning > input { background-color: #fffaf3; border-color: #c9ba9b; color: #573a08; box-shadow: none; } /* Placeholder */ .ui.input.warning > input::-moz-placeholder { color: #edad3e; } .ui.input.warning > input::placeholder { color: #edad3e; } .ui.input.warning > input:-ms-input-placeholder { color: #edad3e !important; } /* Focused Placeholder */ .ui.input.warning > input:focus::-moz-placeholder { color: #e39715; } .ui.input.warning > input:focus::placeholder { color: #e39715; } .ui.input.warning > input:focus:-ms-input-placeholder { color: #e39715 !important; } /******************************* Variations *******************************/ /* -------------------- Transparent --------------------- */ /* Transparent Icon */ /* Transparent Inverted */ /* -------------------- Icon --------------------- */ .ui.icon.input > i.icon { cursor: default; position: absolute; line-height: 1; text-align: center; top: 0; right: 0; margin: 0; height: 100%; width: 2.56666667em; opacity: 0.5; border-radius: 0 0.26666667rem 0.26666667rem 0; transition: opacity 0.3s ease; } .ui.icon.input > i.icon:not(.link) { pointer-events: none; } .ui.ui.ui.ui.icon.input:not(.corner) > textarea, .ui.ui.ui.ui.icon.input:not(.corner) > input { padding-right: 2.56666667em; } .ui.icon.input > i.icon::before, .ui.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 { cursor: pointer; } .ui.icon.input > i.circular.icon { top: 0.35em; right: 0.5em; } /* Left Icon Input */ .ui[class*="left icon"].input > i.icon { right: auto; left: 1px; border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui[class*="left icon"].input > i.circular.icon { right: auto; left: 0.5em; } .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > textarea, .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input { padding-left: 2.56666667em; } .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea, .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input { padding-right: 0.93333333em; } /* Focus */ .ui.input > input:focus::-webkit-calendar-picker-indicator, .ui.icon.input > textarea:focus ~ i.icon, .ui.icon.input > input:focus ~ i.icon { opacity: 1; } /* -------------------- Labeled --------------------- */ /* Adjacent Label */ .ui.labeled.input > .label { flex: 0 0 auto; margin: 0; font-size: 1em; } .ui.labeled.input > .label:not(.corner) { padding-top: 0.73333333em; padding-bottom: 0.73333333em; } /* Regular Label on Left */ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; } .ui.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 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-color: transparent !important; } .ui[class*="right labeled"].input > input + .label { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ui[class*="right labeled"].input > input:focus { border-right-color: #85b7d9 !important; } /* Corner Label */ /* Spacing with corner label */ /* Left Labeled */ .ui[class*="left icon"].input > .ui.dropdown:first-child, .ui[class*="left icon"].input > i.icon + .ui.dropdown { padding-left: 2.5em; } .ui[class*="left icon"].input > .ui.dropdown > .search { padding-left: 2.5em; } .ui[class*="left icon"].input > .ui.dropdown > .menu { padding-left: 1.25em; } .ui[class*="left icon"].input > .ui.dropdown > .menu > .item { padding-left: 2.5em; margin-left: -1.25em; } .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .search { padding-right: 5.75em; } .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .remove.icon, .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .dropdown.icon { padding-right: 2.5em; } @supports selector(:has(.f)) { .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .dropdown.icon { padding-right: initial; } .ui.icon.input:not([class*="left icon"]):not(:has(.ui.dropdown ~ input)) > .ui.dropdown > .dropdown.icon { padding-right: 2.5em; } } .ui.icon.input > .ui.visible.dropdown ~ i.icon, .ui.icon.input > .ui.active.dropdown ~ i.icon { z-index: 10; } .ui.icon.input > textarea ~ i.icon { height: 3em; } /* Corner Label Position */ /* Labeled and action input states */ .ui.form .field.error > .ui.action.input > .ui.button, .ui.form .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.error > .ui.button, .ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #e0b4b4; border-bottom: 1px solid #e0b4b4; } .ui.form .field.error > .ui[class*="left action"].input > .ui.button, .ui.form .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.error > .ui.button, .ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #e0b4b4; } .ui.form .field.error > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.error:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label, .ui.form .field.error > .ui.action.input:not([class*="left action"]) > textarea + .ui.button, .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > textarea + .ui.label, .ui.action.input.error:not([class*="left action"]) > textarea + .ui.button, .ui.right.labeled.input.error:not([class*="corner labeled"]) > textarea + .ui.label { border-right: 1px solid #e0b4b4; } .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #e0b4b4; } .ui.form .field.info > .ui.action.input > .ui.button, .ui.form .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.info > .ui.button, .ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #a9d5de; border-bottom: 1px solid #a9d5de; } .ui.form .field.info > .ui[class*="left action"].input > .ui.button, .ui.form .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.info > .ui.button, .ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #a9d5de; } .ui.form .field.info > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.info:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label, .ui.form .field.info > .ui.action.input:not([class*="left action"]) > textarea + .ui.button, .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > textarea + .ui.label, .ui.action.input.info:not([class*="left action"]) > textarea + .ui.button, .ui.right.labeled.input.info:not([class*="corner labeled"]) > textarea + .ui.label { border-right: 1px solid #a9d5de; } .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #a9d5de; } .ui.form .field.success > .ui.action.input > .ui.button, .ui.form .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.success > .ui.button, .ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #a3c293; border-bottom: 1px solid #a3c293; } .ui.form .field.success > .ui[class*="left action"].input > .ui.button, .ui.form .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.success > .ui.button, .ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #a3c293; } .ui.form .field.success > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.success:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label, .ui.form .field.success > .ui.action.input:not([class*="left action"]) > textarea + .ui.button, .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > textarea + .ui.label, .ui.action.input.success:not([class*="left action"]) > textarea + .ui.button, .ui.right.labeled.input.success:not([class*="corner labeled"]) > textarea + .ui.label { border-right: 1px solid #a3c293; } .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #a3c293; } .ui.form .field.warning > .ui.action.input > .ui.button, .ui.form .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.warning > .ui.button, .ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #c9ba9b; border-bottom: 1px solid #c9ba9b; } .ui.form .field.warning > .ui[class*="left action"].input > .ui.button, .ui.form .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.warning > .ui.button, .ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #c9ba9b; } .ui.form .field.warning > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.warning:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label, .ui.form .field.warning > .ui.action.input:not([class*="left action"]) > textarea + .ui.button, .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > textarea + .ui.label, .ui.action.input.warning:not([class*="left action"]) > textarea + .ui.button, .ui.right.labeled.input.warning:not([class*="corner labeled"]) > textarea + .ui.label { border-right: 1px solid #c9ba9b; } .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #c9ba9b; } /* -------------------- Action --------------------- */ .ui.action.input > .button, .ui.action.input > .buttons { display: flex; align-items: center; flex: 0 0 auto; } .ui.action.input > .button, .ui.action.input > .buttons > .button { padding-top: 0.73333333em; padding-bottom: 0.73333333em; margin: 0; } /* Input when ui Left */ .ui[class*="left action"].input > input, .ui[class*="left action"].input > textarea { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; } /* Input when ui Right */ .ui.action.input:not([class*="left action"]) > input, .ui.action.input:not([class*="left action"]) > textarea { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent; } /* Button and Dropdown */ .ui.action.input > .dropdown:first-child, .ui.action.input > .button:first-child, .ui.action.input > .buttons:first-child > .button { border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui.action.input > .dropdown:not(:first-child), .ui.action.input > .button:not(:first-child), .ui.action.input > .buttons:not(:first-child) > .button { border-radius: 0; } .ui.action.input > .dropdown:last-child, .ui.action.input > .button:last-child, .ui.action.input > .buttons:last-child > .button { border-radius: 0 0.26666667rem 0.26666667rem 0; } /* Input Focus */ .ui.action.input:not([class*="left action"]) > input:focus, .ui.action.input:not([class*="left action"]) > textarea:focus { border-right-color: #85b7d9; } .ui.ui[class*="left action"].input > input:focus, .ui.ui[class*="left action"].input > textarea:focus { border-left-color: #85b7d9; } /* -------------------- Inverted --------------------- */ /* Standard */ .ui.inverted.input > input { border: none; } /* -------------------- Fluid --------------------- */ .ui.fluid.input { display: flex; } .ui.fluid.input > input { width: 0 !important; } /* -------------------- File --------------------- */ /* width hack for chrome/edge */ .ui.file.input { width: 100%; } .ui.file.input input[type="file"] { width: 0; } .ui.form .field > input[type="file"], .ui.file.input:not(.action) input[type="file"] { padding: 0; } .ui.action.file.input input[type="file"]::-webkit-file-upload-button { display: none; } .ui.form .field input[type="file"]::-webkit-file-upload-button, .ui.file.input input[type="file"]::-webkit-file-upload-button { border: none; cursor: pointer; padding: 0.62619048em 0.93333333em; margin-right: 1em; background: #e0e1e2; font-weight: bold; color: rgba(0, 0, 0, 0.6); } .ui.form .field input[type="file"]::-webkit-file-upload-button:hover, .ui.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #cacbcd; color: rgba(0, 0, 0, 0.6); } .ui.action.file.input input[type="file"]::-ms-browse { display: none; } .ui.form .field input[type="file"]::-ms-browse, .ui.file.input input[type="file"]::-ms-browse { border: none; cursor: pointer; padding: 0.62619048em 0.93333333em; margin: 0; background: #e0e1e2; font-weight: bold; color: rgba(0, 0, 0, 0.6); } .ui.form .field input[type="file"]::-ms-browse:hover, .ui.file.input input[type="file"]::-ms-browse:hover { background: #cacbcd; color: rgba(0, 0, 0, 0.6); } /* IE needs additional styling for input field :S */ @media all and (-ms-high-contrast: none) { .ui.file.input > input[type="file"], input[type="file"].ui.file.input { padding: 0 !important; } } .ui.action.file.input input[type="file"]::file-selector-button { display: none; } .ui.form .field input[type="file"]::file-selector-button, .ui.file.input input[type="file"]::file-selector-button { border: none; cursor: pointer; padding: 0.62619048em 0.93333333em; margin-right: 1em; background: #e0e1e2; font-weight: bold; color: rgba(0, 0, 0, 0.6); } .ui.form .field input[type="file"]::file-selector-button:hover, .ui.file.input input[type="file"]::file-selector-button:hover { background: #cacbcd; color: rgba(0, 0, 0, 0.6); } input[type="file"].ui.invisible.file.input, .ui.invisible.file.input input[type="file"] { left: -99999px; position: absolute; } input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) { background: #cacbcd; color: rgba(0, 0, 0, 0.8); } input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary).inverted { background: #fff; } /* this is related to existing buttons, so the button color variable is used here! */ input[type="file"].ui.file.input:focus + label.ui.primary.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.primary.button:not(.basic):not(.tertiary) { background-color: #082e34; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.primary.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.primary.button:not(.basic):not(.tertiary).inverted { background-color: #21b8ff; } input[type="file"].ui.file.input:focus + label.ui.secondary.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.secondary.button:not(.basic):not(.tertiary) { background-color: #27292a; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.secondary.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.secondary.button:not(.basic):not(.tertiary).inverted { background-color: #6e6e6e; } input[type="file"].ui.file.input:focus + label.ui.red.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.red.button:not(.basic):not(.tertiary) { background-color: #d01919; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.red.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.red.button:not(.basic):not(.tertiary).inverted { background-color: #ff392b; } input[type="file"].ui.file.input:focus + label.ui.green.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.green.button:not(.basic):not(.tertiary) { background-color: #1c8f9c; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.green.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.green.button:not(.basic):not(.tertiary).inverted { background-color: #1ea92e; } input[type="file"].ui.file.input:focus + label.ui.teal.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.teal.button:not(.basic):not(.tertiary) { background-color: #009c95; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.teal.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.teal.button:not(.basic):not(.tertiary).inverted { background-color: #3affff; } input[type="file"].ui.file.input:focus + label.ui.blue.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.blue.button:not(.basic):not(.tertiary) { background-color: #1678c2; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.blue.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.blue.button:not(.basic):not(.tertiary).inverted { background-color: #21b8ff; } input[type="file"].ui.file.input:focus + label.ui.purple.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.purple.button:not(.basic):not(.tertiary) { background-color: #9627ba; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.purple.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.purple.button:not(.basic):not(.tertiary).inverted { background-color: #cf40ff; } input[type="file"].ui.file.input:focus + label.ui.grey.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.grey.button:not(.basic):not(.tertiary) { background-color: #838383; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.grey.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.grey.button:not(.basic):not(.tertiary).inverted { background-color: #c2c4c5; } input[type="file"].ui.file.input:focus + label.ui.black.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.black.button:not(.basic):not(.tertiary) { background-color: #27292a; color: #fff; } input[type="file"].ui.file.input:focus + label.ui.black.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.black.button:not(.basic):not(.tertiary).inverted { background-color: #000000; } input[type="file"].ui.primary.file.input::-webkit-file-upload-button, .ui.primary.file.input input[type="file"]::-webkit-file-upload-button { background: #0e3f47; color: #fff; } input[type="file"].ui.primary.file.input::-webkit-file-upload-button:hover, .ui.primary.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #082e34; } input[type="file"].ui.primary.file.input::-ms-browse, .ui.primary.file.input input[type="file"]::-ms-browse { background: #0e3f47; color: #fff; } input[type="file"].ui.primary.file.input::-ms-browse:hover, .ui.primary.file.input input[type="file"]::-ms-browse:hover { background: #082e34; } input[type="file"].ui.primary.file.input::file-selector-button, .ui.primary.file.input input[type="file"]::file-selector-button { background: #0e3f47; color: #fff; } input[type="file"].ui.primary.file.input::file-selector-button:hover, .ui.primary.file.input input[type="file"]::file-selector-button:hover { background: #082e34; } input[type="file"].ui.secondary.file.input::-webkit-file-upload-button, .ui.secondary.file.input input[type="file"]::-webkit-file-upload-button { background: #1b1c1d; color: #fff; } input[type="file"].ui.secondary.file.input::-webkit-file-upload-button:hover, .ui.secondary.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #27292a; } input[type="file"].ui.secondary.file.input::-ms-browse, .ui.secondary.file.input input[type="file"]::-ms-browse { background: #1b1c1d; color: #fff; } input[type="file"].ui.secondary.file.input::-ms-browse:hover, .ui.secondary.file.input input[type="file"]::-ms-browse:hover { background: #27292a; } input[type="file"].ui.secondary.file.input::file-selector-button, .ui.secondary.file.input input[type="file"]::file-selector-button { background: #1b1c1d; color: #fff; } input[type="file"].ui.secondary.file.input::file-selector-button:hover, .ui.secondary.file.input input[type="file"]::file-selector-button:hover { background: #27292a; } input[type="file"].ui.red.file.input::-webkit-file-upload-button, .ui.red.file.input input[type="file"]::-webkit-file-upload-button { background: #db2828; color: #fff; } input[type="file"].ui.red.file.input::-webkit-file-upload-button:hover, .ui.red.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #d01919; } input[type="file"].ui.red.file.input::-ms-browse, .ui.red.file.input input[type="file"]::-ms-browse { background: #db2828; color: #fff; } input[type="file"].ui.red.file.input::-ms-browse:hover, .ui.red.file.input input[type="file"]::-ms-browse:hover { background: #d01919; } input[type="file"].ui.red.file.input::file-selector-button, .ui.red.file.input input[type="file"]::file-selector-button { background: #db2828; color: #fff; } input[type="file"].ui.red.file.input::file-selector-button:hover, .ui.red.file.input input[type="file"]::file-selector-button:hover { background: #d01919; } input[type="file"].ui.green.file.input::-webkit-file-upload-button, .ui.green.file.input input[type="file"]::-webkit-file-upload-button { background: #269eab; color: #fff; } input[type="file"].ui.green.file.input::-webkit-file-upload-button:hover, .ui.green.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #1c8f9c; } input[type="file"].ui.green.file.input::-ms-browse, .ui.green.file.input input[type="file"]::-ms-browse { background: #269eab; color: #fff; } input[type="file"].ui.green.file.input::-ms-browse:hover, .ui.green.file.input input[type="file"]::-ms-browse:hover { background: #1c8f9c; } input[type="file"].ui.green.file.input::file-selector-button, .ui.green.file.input input[type="file"]::file-selector-button { background: #269eab; color: #fff; } input[type="file"].ui.green.file.input::file-selector-button:hover, .ui.green.file.input input[type="file"]::file-selector-button:hover { background: #1c8f9c; } input[type="file"].ui.teal.file.input::-webkit-file-upload-button, .ui.teal.file.input input[type="file"]::-webkit-file-upload-button { background: #00b5ad; color: #fff; } input[type="file"].ui.teal.file.input::-webkit-file-upload-button:hover, .ui.teal.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #009c95; } input[type="file"].ui.teal.file.input::-ms-browse, .ui.teal.file.input input[type="file"]::-ms-browse { background: #00b5ad; color: #fff; } input[type="file"].ui.teal.file.input::-ms-browse:hover, .ui.teal.file.input input[type="file"]::-ms-browse:hover { background: #009c95; } input[type="file"].ui.teal.file.input::file-selector-button, .ui.teal.file.input input[type="file"]::file-selector-button { background: #00b5ad; color: #fff; } input[type="file"].ui.teal.file.input::file-selector-button:hover, .ui.teal.file.input input[type="file"]::file-selector-button:hover { background: #009c95; } input[type="file"].ui.blue.file.input::-webkit-file-upload-button, .ui.blue.file.input input[type="file"]::-webkit-file-upload-button { background: #2185d0; color: #fff; } input[type="file"].ui.blue.file.input::-webkit-file-upload-button:hover, .ui.blue.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #1678c2; } input[type="file"].ui.blue.file.input::-ms-browse, .ui.blue.file.input input[type="file"]::-ms-browse { background: #2185d0; color: #fff; } input[type="file"].ui.blue.file.input::-ms-browse:hover, .ui.blue.file.input input[type="file"]::-ms-browse:hover { background: #1678c2; } input[type="file"].ui.blue.file.input::file-selector-button, .ui.blue.file.input input[type="file"]::file-selector-button { background: #2185d0; color: #fff; } input[type="file"].ui.blue.file.input::file-selector-button:hover, .ui.blue.file.input input[type="file"]::file-selector-button:hover { background: #1678c2; } input[type="file"].ui.purple.file.input::-webkit-file-upload-button, .ui.purple.file.input input[type="file"]::-webkit-file-upload-button { background: #a333c8; color: #fff; } input[type="file"].ui.purple.file.input::-webkit-file-upload-button:hover, .ui.purple.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #9627ba; } input[type="file"].ui.purple.file.input::-ms-browse, .ui.purple.file.input input[type="file"]::-ms-browse { background: #a333c8; color: #fff; } input[type="file"].ui.purple.file.input::-ms-browse:hover, .ui.purple.file.input input[type="file"]::-ms-browse:hover { background: #9627ba; } input[type="file"].ui.purple.file.input::file-selector-button, .ui.purple.file.input input[type="file"]::file-selector-button { background: #a333c8; color: #fff; } input[type="file"].ui.purple.file.input::file-selector-button:hover, .ui.purple.file.input input[type="file"]::file-selector-button:hover { background: #9627ba; } input[type="file"].ui.grey.file.input::-webkit-file-upload-button, .ui.grey.file.input input[type="file"]::-webkit-file-upload-button { background: #767676; color: #fff; } input[type="file"].ui.grey.file.input::-webkit-file-upload-button:hover, .ui.grey.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #838383; } input[type="file"].ui.grey.file.input::-ms-browse, .ui.grey.file.input input[type="file"]::-ms-browse { background: #767676; color: #fff; } input[type="file"].ui.grey.file.input::-ms-browse:hover, .ui.grey.file.input input[type="file"]::-ms-browse:hover { background: #838383; } input[type="file"].ui.grey.file.input::file-selector-button, .ui.grey.file.input input[type="file"]::file-selector-button { background: #767676; color: #fff; } input[type="file"].ui.grey.file.input::file-selector-button:hover, .ui.grey.file.input input[type="file"]::file-selector-button:hover { background: #838383; } input[type="file"].ui.black.file.input::-webkit-file-upload-button, .ui.black.file.input input[type="file"]::-webkit-file-upload-button { background: #1b1c1d; color: #fff; } input[type="file"].ui.black.file.input::-webkit-file-upload-button:hover, .ui.black.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #27292a; } input[type="file"].ui.black.file.input::-ms-browse, .ui.black.file.input input[type="file"]::-ms-browse { background: #1b1c1d; color: #fff; } input[type="file"].ui.black.file.input::-ms-browse:hover, .ui.black.file.input input[type="file"]::-ms-browse:hover { background: #27292a; } input[type="file"].ui.black.file.input::file-selector-button, .ui.black.file.input input[type="file"]::file-selector-button { background: #1b1c1d; color: #fff; } input[type="file"].ui.black.file.input::file-selector-button:hover, .ui.black.file.input input[type="file"]::file-selector-button:hover { background: #27292a; } /* -------------------- Size --------------------- */ .ui.input { font-size: 1em; } .ui.mini.input { font-size: 0.8em; } .ui.tiny.input { font-size: 0.86666667em; } .ui.small.input { font-size: 0.93333333em; } .ui.large.input { font-size: 1.13333333em; } .ui.big.input { font-size: 1.26666667em; } .ui.huge.input { font-size: 1.4em; } .ui.massive.input { font-size: 1.73333333em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Label * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* Inverted */ /* Colors */ /* Attached */ /* Corner */ /* Corner Text */ /* Horizontal */ /* Circular Padding */ /* Pointing */ /* Avoids error with background: inherit; on animation */ /* Basic Pointing */ /* Floating */ /* ------------------- Group -------------------- */ /* Sizing */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Label *******************************/ .ui.label { display: inline-block; line-height: 1; vertical-align: baseline; margin: 0 0.13333333em; 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: 0 solid transparent; border-radius: 0.26666667rem; transition: background 0.1s ease; } .ui.label:first-child { margin-left: 0; } .ui.label:last-child { margin-right: 0; } /* Link */ a.ui.label { cursor: pointer; } /* Inside Link */ .ui.label > a { cursor: pointer; color: inherit; opacity: 0.5; transition: 0.1s opacity ease; } .ui.label > a:hover { opacity: 1; } /* Image */ .ui.label > img { width: auto !important; vertical-align: middle; height: 2.1666em; } /* Icon */ .ui.ui[class*="left icon"].label > .icon, .ui.label > .icon { width: auto; margin: 0 0.75em 0 0; } /* Detail */ .ui.label > .detail { display: inline-block; vertical-align: top; font-weight: bold; margin-left: 1em; opacity: 0.8; } .ui.label > .detail .icon { margin: 0 0.25em 0 0; } /* Removable label */ .ui.label > .close.icon, .ui.label > .delete.icon { cursor: pointer; font-size: 0.93333333em; opacity: 0.5; transition: background 0.1s ease; } .ui.label > .close.icon:hover, .ui.label > .delete.icon:hover { opacity: 1; } /* Backward compatible positioning */ .ui.label[class*="left icon"] > .close.icon, .ui.label[class*="left icon"] > .delete.icon { margin: 0 0.5em 0 0; } .ui.label[class*="left icon"] > .close.icon.right, .ui.label[class*="left icon"] > .delete.icon.right { margin: 0 0 0 0.5em; } .ui.label:not(.icon) > .close.icon, .ui.label:not(.icon) > .delete.icon { margin: 0 0 0 0.5em; } /* Label for only an icon */ .ui.icon.label > .icon { margin: 0 auto; } /* Right Side Icon */ .ui[class*="right icon"].label > .icon { margin: 0 0 0 0.75em; } /* ------------------- Group -------------------- */ .ui.labels > .label { margin: 0 0.5em 0.5em 0; } /* ------------------- Coupling -------------------- */ .ui.header > .ui.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 { border-top-left-radius: 0; } .ui.attached.segment > .ui.top.right.attached.label, .ui.bottom.attached.segment > .ui.top.right.attached.label { border-top-right-radius: 0; } .ui.top.attached.segment > .ui.bottom.left.attached.label { border-bottom-left-radius: 0; } .ui.top.attached.segment > .ui.bottom.right.attached.label { border-bottom-right-radius: 0; } /* Padding on next content after a label */ .ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached), .ui.top.attached.label + :not(.attached) { margin-top: 2rem !important; } .ui.bottom.attached.label ~ :last-child:not(.attached) { margin-top: 0; margin-bottom: 2rem !important; } .ui.segment:not(.basic) > .ui.top.attached.label { margin-top: -1px; } .ui.segment:not(.basic) > .ui.bottom.attached.label { margin-bottom: -1px; } .ui.segment:not(.basic) > .ui.attached.label:not(.right) { margin-left: -1px; } .ui.segment:not(.basic) > .ui.right.attached.label { margin-right: -1px; } .ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) { width: calc(100% + 2px); } /******************************* Types *******************************/ .ui.image.label { width: auto; margin-top: 0; margin-bottom: 0; max-width: 9999px; vertical-align: baseline; text-transform: none; background: #e8e8e8; padding: 0.5833em 0.833em 0.5833em 0.5em; border-radius: 0.26666667rem; box-shadow: none; } .ui.image.label.attached:not(.basic) { padding: 0.5833em 0.833em 0.5833em 0.5em; } .ui.image.label img { display: inline-block; vertical-align: top; height: 2.1666em; margin: -0.5833em 0.5em -0.5833em -0.5em; border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui.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: 0 0.26666667rem 0.26666667rem 0; } .ui.bottom.attached.image.label:not(.right) > img, .ui.top.right.attached.image.label > img { border-top-left-radius: 0; } .ui.top.attached.image.label:not(.right) > img, .ui.bottom.right.attached.image.label > img { border-bottom-left-radius: 0; } /* ------------------- Tag -------------------- */ .ui.tag.labels .label, .ui.tag.label { margin-left: 1em; position: relative; padding-left: 1.5em; padding-right: 1.5em; border-radius: 0 0.26666667rem 0.26666667rem 0; transition: none; } .ui.tag.labels .label::before, .ui.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 { position: absolute; content: ""; top: 50%; left: -0.25em; margin-top: -0.25em; background-color: #fff; width: 0.5em; height: 0.5em; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); border-radius: 500rem; } .ui.basic.tag.labels .label::before, .ui.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; right: calc(100% + 1px); } .ui.basic.tag.labels .label::after, .ui.basic.tag.label::after { box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8); } /* ------------------- Corner Label -------------------- */ /* Icon Label */ /* Left Corner */ /* Segment */ /* ------------------- Ribbon -------------------- */ .ui.ribbon.label { position: relative; margin: 0; min-width: -moz-max-content; min-width: max-content; border-radius: 0 0.26666667rem 0.26666667rem 0; border-color: rgba(0, 0, 0, 0.15); } .ui.ribbon.label::after { position: absolute; content: ""; top: 100%; left: 0; background-color: transparent; border-style: solid; border-width: 0 1.2em 1.2em 0; border-color: transparent; border-right-color: inherit; width: 0; height: 0; } /* Positioning */ .ui.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 { left: calc(100% + 1rem + 1.2em); padding-left: 1.2em; padding-right: calc(1rem + 1.2em); } .ui.basic.ribbon.label { padding-top: calc(0.5833em - 1px); padding-bottom: calc(0.5833em - 1px); } .ui.basic.ribbon.label:not([class*="right ribbon"]) { padding-left: calc(1rem + 1.2em - 1px); padding-right: calc(1.2em - 1px); } .ui.basic[class*="right ribbon"].label { padding-left: calc(1.2em - 1px); padding-right: calc(1rem + 1.2em - 1px); } .ui.basic.ribbon.label::after { top: calc(100% + 1px); } .ui.basic.ribbon.label:not([class*="right ribbon"])::after { left: -1px; } .ui.basic[class*="right ribbon"].label::after { right: -1px; } /* Right Ribbon */ .ui[class*="right ribbon"].label { text-align: left; transform: translateX(-100%); border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui[class*="right ribbon"].label::after { left: auto; right: 0; border-style: solid; border-width: 1.2em 1.2em 0 0; border-color: transparent; border-top-color: inherit; } .ui.ui.center.ribbon.label { top: calc(50% - 1em); z-index: 1; } .ui.bottom.ribbon.label::after { bottom: 100%; top: auto; border-width: 1.2em 1.2em 0 0; } .ui.bottom[class*="right ribbon"].label::after { border-width: 1.2em 0 0 1.2em; border-color: transparent; border-left-color: inherit; } /* Inside Image */ .ui.image > .ribbon.label, .ui.card .image > .ribbon.label { position: absolute; top: 1rem; } .ui.card .image > .ui.ribbon.label, .ui.image > .ui.ribbon.label { left: calc(0.05rem - 1.2em); } .ui.card .image > .ui[class*="right ribbon"].label, .ui.image > .ui[class*="right ribbon"].label { left: calc(100% + -0.05rem + 1.2em); padding-left: 0.833em; } .ui.card .image > .ui.bottom.ribbon.label, .ui.image > .ui.bottom.ribbon.label { bottom: 1rem; top: auto; } /* Inside Table */ .ui.table td > .ui.ribbon.label { left: calc(-1em - 1.2em); } .ui.table td > .ui[class*="right ribbon"].label { left: calc(100% + 1em + 1.2em); padding-left: 0.833em; } /* ------------------- Attached -------------------- */ .ui[class*="top attached"].label, .ui.attached.label { width: 100%; position: absolute; margin: 0; top: 0; left: 0; padding: 0.75em 1em; border-radius: 0.2rem 0.2rem 0 0; } .ui[class*="bottom attached"].label { top: auto; bottom: 0; border-radius: 0 0 0.2rem 0.2rem; } .ui[class*="top left attached"].label { width: auto; margin-top: 0; border-radius: 0.2rem 0 0.26666667rem 0; } .ui[class*="top right attached"].label { width: auto; left: auto; right: 0; border-radius: 0 0.2rem 0 0.26666667rem; } .ui[class*="bottom left attached"].label { width: auto; top: auto; bottom: 0; border-radius: 0 0.26666667rem 0 0.2rem; } .ui[class*="bottom right attached"].label { top: auto; bottom: 0; left: auto; right: 0; width: auto; border-radius: 0.26666667rem 0 0.2rem 0; } /******************************* States *******************************/ /* ------------------- Disabled -------------------- */ .ui.disabled.labels .label, .ui.label.disabled { opacity: 0.45; pointer-events: none; } /* ------------------- Hover -------------------- */ .ui.labels a.label:hover, a.ui.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 { color: rgba(0, 0, 0, 0.8); } /* ------------------- Active -------------------- */ .ui.active.label { background-color: #d0d0d0; border-color: #d0d0d0; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.active.label::before { background-color: #d0d0d0; background-image: none; color: rgba(0, 0, 0, 0.95); } /* ------------------- Active Hover -------------------- */ .ui.labels a.active.label:hover, a.ui.active.label:hover { background-color: #c8c8c8; border-color: #c8c8c8; background-image: none; color: rgba(0, 0, 0, 0.95); } .ui.labels a.active.label:hover::before, a.ui.active.label:hover::before { background-color: #c8c8c8; background-image: none; color: rgba(0, 0, 0, 0.95); } /* ------------------- Visible -------------------- */ .ui.labels.visible .label, .ui.label.visible:not(.dropdown) { display: inline-block !important; } /* ------------------- Hidden -------------------- */ .ui.labels.hidden .label, .ui.label.hidden { display: none !important; } /******************************* Variations *******************************/ /* ------------------- Basic -------------------- */ .ui.basic.labels .label, .ui.basic.label { background: none #fff; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); box-shadow: none; padding-top: calc(0.5833em - 1px); padding-bottom: calc(0.5833em - 1px); padding-right: calc(0.833em - 1px); } .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label, .ui.basic.label:not(.tag):not(.image):not(.ribbon) { padding-left: calc(0.833em - 1px); } .ui.basic.image.label { padding-left: calc(0.5em - 1px); } /* Link */ .ui.basic.labels a.label:hover, a.ui.basic.label:hover { text-decoration: none; background: none #fff; color: #18646c; box-shadow: none; } /* Pointing */ .ui.basic.pointing.label::before { border-color: inherit; } /* ------------------- Fluid -------------------- */ .ui.label.fluid, .ui.fluid.labels > .label { width: 100%; box-sizing: border-box; } .ui.centered.labels .label, .ui.centered.label { text-align: center; } /* ------------------- Inverted -------------------- */ .ui.inverted.labels .label, .ui.inverted.label { color: rgba(255, 255, 255, 0.9); background-color: #b5b5b5; } .ui.inverted.basic.labels .label, .ui.inverted.basic.label, .ui.inverted.basic.label:hover { border-color: rgba(255, 255, 255, 0.5); background: #1b1c1d; } .ui.inverted.basic.label:hover { color: #269eab; } /* ------------------- Colors -------------------- */ .ui.primary.labels .label, .ui.ui.ui.primary.label { background-color: #0e3f47; border-color: #0e3f47; color: rgba(255, 255, 255, 0.9); } /* Link */ .ui.primary.labels a.label:hover, a.ui.ui.ui.primary.label:hover { background-color: #082e34; border-color: #082e34; color: #fff; } /* Ribbon */ .ui.ui.ui.primary.ribbon.label { border-color: #06191c; } /* Basic */ .ui.basic.labels .primary.label, .ui.ui.ui.basic.primary.label { background: none #fff; border-color: #0e3f47; color: #0e3f47; } .ui.basic.labels a.primary.label:hover, a.ui.ui.ui.basic.primary.label:hover { background: none #fff; border-color: #082e34; color: #082e34; } /* Inverted */ .ui.inverted.labels .primary.label, .ui.ui.ui.inverted.primary.label { background-color: #54c8ff; border-color: #54c8ff; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.primary.label:hover, a.ui.ui.ui.inverted.primary.label:hover { background-color: #21b8ff; border-color: #21b8ff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.primary.ribbon.label { border-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.basic.labels .primary.label, .ui.ui.ui.inverted.basic.primary.label { background-color: #1b1c1d; border-color: #54c8ff; color: #54c8ff; } .ui.inverted.basic.labels a.primary.label:hover, a.ui.ui.ui.inverted.basic.primary.label:hover { border-color: #21b8ff; background-color: #1b1c1d; color: #21b8ff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .primary.label, .ui.ui.ui.inverted.primary.basic.tag.label { border: 1px solid #54c8ff; } .ui.inverted.basic.tag.labels .primary.label::before, .ui.ui.ui.inverted.primary.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.secondary.labels .label, .ui.ui.ui.secondary.label { background-color: #1b1c1d; border-color: #1b1c1d; color: rgba(255, 255, 255, 0.9); } /* Link */ .ui.secondary.labels a.label:hover, a.ui.ui.ui.secondary.label:hover { background-color: #27292a; border-color: #27292a; color: #fff; } /* Ribbon */ .ui.ui.ui.secondary.ribbon.label { border-color: #020203; } /* Basic */ .ui.basic.labels .secondary.label, .ui.ui.ui.basic.secondary.label { background: none #fff; border-color: #1b1c1d; color: #1b1c1d; } .ui.basic.labels a.secondary.label:hover, a.ui.ui.ui.basic.secondary.label:hover { background: none #fff; border-color: #27292a; color: #27292a; } /* Inverted */ .ui.inverted.labels .secondary.label, .ui.ui.ui.inverted.secondary.label { background-color: #545454; border-color: #545454; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.secondary.label:hover, a.ui.ui.ui.inverted.secondary.label:hover { background-color: #6e6e6e; border-color: #6e6e6e; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.secondary.ribbon.label { border-color: #3b3b3b; } /* Inverted Basic */ .ui.inverted.basic.labels .secondary.label, .ui.ui.ui.inverted.basic.secondary.label { background-color: #1b1c1d; border-color: #545454; color: #545454; } .ui.inverted.basic.labels a.secondary.label:hover, a.ui.ui.ui.inverted.basic.secondary.label:hover { border-color: #6e6e6e; background-color: #1b1c1d; color: #6e6e6e; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .secondary.label, .ui.ui.ui.inverted.secondary.basic.tag.label { border: 1px solid #545454; } .ui.inverted.basic.tag.labels .secondary.label::before, .ui.ui.ui.inverted.secondary.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.red.labels .label, .ui.ui.ui.red.label { background-color: #db2828; border-color: #db2828; color: #fff; } /* Link */ .ui.red.labels a.label:hover, a.ui.ui.ui.red.label:hover { background-color: #d01919; border-color: #d01919; color: #fff; } /* Ribbon */ .ui.ui.ui.red.ribbon.label { border-color: #b21e1e; } /* Basic */ .ui.basic.labels .red.label, .ui.ui.ui.basic.red.label { background: none #fff; border-color: #db2828; color: #db2828; } .ui.basic.labels a.red.label:hover, a.ui.ui.ui.basic.red.label:hover { background: none #fff; border-color: #d01919; color: #d01919; } /* Inverted */ .ui.inverted.labels .red.label, .ui.ui.ui.inverted.red.label { background-color: #ff695e; border-color: #ff695e; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.red.label:hover, a.ui.ui.ui.inverted.red.label:hover { background-color: #ff392b; border-color: #ff392b; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.red.ribbon.label { border-color: #ff392b; } /* Inverted Basic */ .ui.inverted.basic.labels .red.label, .ui.ui.ui.inverted.basic.red.label { background-color: #1b1c1d; border-color: #ff695e; color: #ff695e; } .ui.inverted.basic.labels a.red.label:hover, a.ui.ui.ui.inverted.basic.red.label:hover { border-color: #ff392b; background-color: #1b1c1d; color: #ff392b; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .red.label, .ui.ui.ui.inverted.red.basic.tag.label { border: 1px solid #ff695e; } .ui.inverted.basic.tag.labels .red.label::before, .ui.ui.ui.inverted.red.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } /* Link */ /* Ribbon */ /* Basic */ /* Inverted */ /* Inverted Link */ /* Inverted Ribbon */ /* Inverted Basic */ /* Inverted Basic Tags */ /* Link */ /* Ribbon */ /* Basic */ /* Inverted */ /* Inverted Link */ /* Inverted Ribbon */ /* Inverted Basic */ /* Inverted Basic Tags */ /* Link */ /* Ribbon */ /* Basic */ /* Inverted */ /* Inverted Link */ /* Inverted Ribbon */ /* Inverted Basic */ /* Inverted Basic Tags */ .ui.green.labels .label, .ui.ui.ui.green.label { background-color: #269eab; border-color: #269eab; color: #fff; } /* Link */ .ui.green.labels a.label:hover, a.ui.ui.ui.green.label:hover { background-color: #1c8f9c; border-color: #1c8f9c; color: #fff; } /* Ribbon */ .ui.ui.ui.green.ribbon.label { border-color: #1d7781; } /* Basic */ .ui.basic.labels .green.label, .ui.ui.ui.basic.green.label { background: none #fff; border-color: #269eab; color: #269eab; } .ui.basic.labels a.green.label:hover, a.ui.ui.ui.basic.green.label:hover { background: none #fff; border-color: #1c8f9c; color: #1c8f9c; } /* Inverted */ .ui.inverted.labels .green.label, .ui.ui.ui.inverted.green.label { background-color: #2ecc40; border-color: #2ecc40; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.green.label:hover, a.ui.ui.ui.inverted.green.label:hover { background-color: #1ea92e; border-color: #1ea92e; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.green.ribbon.label { border-color: #25a233; } /* Inverted Basic */ .ui.inverted.basic.labels .green.label, .ui.ui.ui.inverted.basic.green.label { background-color: #1b1c1d; border-color: #2ecc40; color: #2ecc40; } .ui.inverted.basic.labels a.green.label:hover, a.ui.ui.ui.inverted.basic.green.label:hover { border-color: #1ea92e; background-color: #1b1c1d; color: #1ea92e; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .green.label, .ui.ui.ui.inverted.green.basic.tag.label { border: 1px solid #2ecc40; } .ui.inverted.basic.tag.labels .green.label::before, .ui.ui.ui.inverted.green.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.teal.labels .label, .ui.ui.ui.teal.label { background-color: #00b5ad; border-color: #00b5ad; color: #fff; } /* Link */ .ui.teal.labels a.label:hover, a.ui.ui.ui.teal.label:hover { background-color: #009c95; border-color: #009c95; color: #fff; } /* Ribbon */ .ui.ui.ui.teal.ribbon.label { border-color: #00827c; } /* Basic */ .ui.basic.labels .teal.label, .ui.ui.ui.basic.teal.label { background: none #fff; border-color: #00b5ad; color: #00b5ad; } .ui.basic.labels a.teal.label:hover, a.ui.ui.ui.basic.teal.label:hover { background: none #fff; border-color: #009c95; color: #009c95; } /* Inverted */ .ui.inverted.labels .teal.label, .ui.ui.ui.inverted.teal.label { background-color: #6dffff; border-color: #6dffff; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.teal.label:hover, a.ui.ui.ui.inverted.teal.label:hover { background-color: #3affff; border-color: #3affff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.teal.ribbon.label { border-color: #3affff; } /* Inverted Basic */ .ui.inverted.basic.labels .teal.label, .ui.ui.ui.inverted.basic.teal.label { background-color: #1b1c1d; border-color: #6dffff; color: #6dffff; } .ui.inverted.basic.labels a.teal.label:hover, a.ui.ui.ui.inverted.basic.teal.label:hover { border-color: #3affff; background-color: #1b1c1d; color: #3affff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .teal.label, .ui.ui.ui.inverted.teal.basic.tag.label { border: 1px solid #6dffff; } .ui.inverted.basic.tag.labels .teal.label::before, .ui.ui.ui.inverted.teal.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.blue.labels .label, .ui.ui.ui.blue.label { background-color: #2185d0; border-color: #2185d0; color: #fff; } /* Link */ .ui.blue.labels a.label:hover, a.ui.ui.ui.blue.label:hover { background-color: #1678c2; border-color: #1678c2; color: #fff; } /* Ribbon */ .ui.ui.ui.blue.ribbon.label { border-color: #1a69a4; } /* Basic */ .ui.basic.labels .blue.label, .ui.ui.ui.basic.blue.label { background: none #fff; border-color: #2185d0; color: #2185d0; } .ui.basic.labels a.blue.label:hover, a.ui.ui.ui.basic.blue.label:hover { background: none #fff; border-color: #1678c2; color: #1678c2; } /* Inverted */ .ui.inverted.labels .blue.label, .ui.ui.ui.inverted.blue.label { background-color: #54c8ff; border-color: #54c8ff; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.blue.label:hover, a.ui.ui.ui.inverted.blue.label:hover { background-color: #21b8ff; border-color: #21b8ff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.blue.ribbon.label { border-color: #21b8ff; } /* Inverted Basic */ .ui.inverted.basic.labels .blue.label, .ui.ui.ui.inverted.basic.blue.label { background-color: #1b1c1d; border-color: #54c8ff; color: #54c8ff; } .ui.inverted.basic.labels a.blue.label:hover, a.ui.ui.ui.inverted.basic.blue.label:hover { border-color: #21b8ff; background-color: #1b1c1d; color: #21b8ff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .blue.label, .ui.ui.ui.inverted.blue.basic.tag.label { border: 1px solid #54c8ff; } .ui.inverted.basic.tag.labels .blue.label::before, .ui.ui.ui.inverted.blue.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } /* Link */ /* Ribbon */ /* Basic */ /* Inverted */ /* Inverted Link */ /* Inverted Ribbon */ /* Inverted Basic */ /* Inverted Basic Tags */ .ui.purple.labels .label, .ui.ui.ui.purple.label { background-color: #a333c8; border-color: #a333c8; color: #fff; } /* Link */ .ui.purple.labels a.label:hover, a.ui.ui.ui.purple.label:hover { background-color: #9627ba; border-color: #9627ba; color: #fff; } /* Ribbon */ .ui.ui.ui.purple.ribbon.label { border-color: #82299f; } /* Basic */ .ui.basic.labels .purple.label, .ui.ui.ui.basic.purple.label { background: none #fff; border-color: #a333c8; color: #a333c8; } .ui.basic.labels a.purple.label:hover, a.ui.ui.ui.basic.purple.label:hover { background: none #fff; border-color: #9627ba; color: #9627ba; } /* Inverted */ .ui.inverted.labels .purple.label, .ui.ui.ui.inverted.purple.label { background-color: #dc73ff; border-color: #dc73ff; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.purple.label:hover, a.ui.ui.ui.inverted.purple.label:hover { background-color: #cf40ff; border-color: #cf40ff; color: #1b1c1d; } /* Inverted Ribbon */ .ui.ui.ui.inverted.purple.ribbon.label { border-color: #cf40ff; } /* Inverted Basic */ .ui.inverted.basic.labels .purple.label, .ui.ui.ui.inverted.basic.purple.label { background-color: #1b1c1d; border-color: #dc73ff; color: #dc73ff; } .ui.inverted.basic.labels a.purple.label:hover, a.ui.ui.ui.inverted.basic.purple.label:hover { border-color: #cf40ff; background-color: #1b1c1d; color: #cf40ff; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .purple.label, .ui.ui.ui.inverted.purple.basic.tag.label { border: 1px solid #dc73ff; } .ui.inverted.basic.tag.labels .purple.label::before, .ui.ui.ui.inverted.purple.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } /* Link */ /* Ribbon */ /* Basic */ /* Inverted */ /* Inverted Link */ /* Inverted Ribbon */ /* Inverted Basic */ /* Inverted Basic Tags */ /* Link */ /* Ribbon */ /* Basic */ /* Inverted */ /* Inverted Link */ /* Inverted Ribbon */ /* Inverted Basic */ /* Inverted Basic Tags */ .ui.grey.labels .label, .ui.ui.ui.grey.label { background-color: #767676; border-color: #767676; color: #fff; } /* Link */ .ui.grey.labels a.label:hover, a.ui.ui.ui.grey.label:hover { background-color: #838383; border-color: #838383; color: #fff; } /* Ribbon */ .ui.ui.ui.grey.ribbon.label { border-color: #5d5d5d; } /* Basic */ .ui.basic.labels .grey.label, .ui.ui.ui.basic.grey.label { background: none #fff; border-color: #767676; color: #767676; } .ui.basic.labels a.grey.label:hover, a.ui.ui.ui.basic.grey.label:hover { background: none #fff; border-color: #838383; color: #838383; } /* Inverted */ .ui.inverted.labels .grey.label, .ui.ui.ui.inverted.grey.label { background-color: #dcddde; border-color: #dcddde; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.grey.label:hover, a.ui.ui.ui.inverted.grey.label:hover { background-color: #c2c4c5; border-color: #c2c4c5; color: #fff; } /* Inverted Ribbon */ .ui.ui.ui.inverted.grey.ribbon.label { border-color: #e9eaea; } /* Inverted Basic */ .ui.inverted.basic.labels .grey.label, .ui.ui.ui.inverted.basic.grey.label { background-color: #1b1c1d; border-color: #dcddde; color: rgba(255, 255, 255, 0.9); } .ui.inverted.basic.labels a.grey.label:hover, a.ui.ui.ui.inverted.basic.grey.label:hover { border-color: #c2c4c5; background-color: #1b1c1d; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .grey.label, .ui.ui.ui.inverted.grey.basic.tag.label { border: 1px solid #dcddde; } .ui.inverted.basic.tag.labels .grey.label::before, .ui.ui.ui.inverted.grey.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } .ui.black.labels .label, .ui.ui.ui.black.label { background-color: #1b1c1d; border-color: #1b1c1d; color: #fff; } /* Link */ .ui.black.labels a.label:hover, a.ui.ui.ui.black.label:hover { background-color: #27292a; border-color: #27292a; color: #fff; } /* Ribbon */ .ui.ui.ui.black.ribbon.label { border-color: #020203; } /* Basic */ .ui.basic.labels .black.label, .ui.ui.ui.basic.black.label { background: none #fff; border-color: #1b1c1d; color: #1b1c1d; } .ui.basic.labels a.black.label:hover, a.ui.ui.ui.basic.black.label:hover { background: none #fff; border-color: #27292a; color: #27292a; } /* Inverted */ .ui.inverted.labels .black.label, .ui.ui.ui.inverted.black.label { background-color: #545454; border-color: #545454; color: #1b1c1d; } /* Inverted Link */ .ui.inverted.labels a.black.label:hover, a.ui.ui.ui.inverted.black.label:hover { background-color: #000000; border-color: #000000; color: #fff; } /* Inverted Ribbon */ .ui.ui.ui.inverted.black.ribbon.label { border-color: #616161; } /* Inverted Basic */ .ui.inverted.basic.labels .black.label, .ui.ui.ui.inverted.basic.black.label { background-color: #1b1c1d; border-color: #545454; color: rgba(255, 255, 255, 0.9); } .ui.inverted.basic.labels a.black.label:hover, a.ui.ui.ui.inverted.basic.black.label:hover { border-color: #000000; background-color: #1b1c1d; } /* Inverted Basic Tags */ .ui.inverted.basic.tag.labels .black.label, .ui.ui.ui.inverted.black.basic.tag.label { border: 1px solid #545454; } .ui.inverted.basic.tag.labels .black.label::before, .ui.ui.ui.inverted.black.basic.tag.label::before { border-color: inherit; border-width: 1px 0 0 1px; border-style: inherit; background-color: #1b1c1d; right: calc(100% + 1px); } /* ------------------- Horizontal -------------------- */ .ui.horizontal.labels .label, .ui.horizontal.label { margin: 0 0.5em 0 0; padding: 0.4em 0.833em; min-width: 3em; text-align: center; } /* ------------------- Circular -------------------- */ .ui.circular.labels .label, .ui.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 { min-width: 0; min-height: 0; overflow: hidden; width: 0.5em; height: 0.5em; vertical-align: baseline; } /* ------------------- Pointing -------------------- */ .ui.pointing.label { position: relative; } .ui.attached.pointing.label { position: absolute; } .ui.pointing.label::before { background-color: inherit; background-image: inherit; border-width: 0; border-style: solid; border-color: inherit; } /* Arrow */ .ui.pointing.label::before { position: absolute; content: ""; transform: rotate(45deg); background-image: none; z-index: 2; width: 0.6666em; height: 0.6666em; transition: none; } /* --- Above --- */ .ui.pointing.label, .ui[class*="pointing above"].label { margin-top: 1em; } .ui.pointing.label::before, .ui[class*="pointing above"].label::before { border-width: 1px 0 0 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 0; left: 50%; } /* --- Below --- */ .ui[class*="bottom pointing"].label, .ui[class*="pointing below"].label { margin-top: 0; margin-bottom: 1em; } .ui[class*="bottom pointing"].label::before, .ui[class*="pointing below"].label::before { border-width: 0 1px 1px 0; right: auto; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 100%; left: 50%; } /* --- Left --- */ .ui[class*="left pointing"].label { margin-top: 0; margin-left: 0.6666em; } .ui[class*="left pointing"].label::before { border-width: 0 0 1px 1px; transform: translateX(-50%) translateY(-50%) rotate(45deg); bottom: auto; right: auto; top: 50%; left: 0; } /* --- Right --- */ .ui[class*="right pointing"].label { margin-top: 0; margin-right: 0.6666em; } .ui[class*="right pointing"].label::before { border-width: 1px 1px 0 0; 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 { margin-top: -1px; } /* --- Below --- */ .ui.basic[class*="bottom pointing"].label::before, .ui.basic[class*="pointing below"].label::before { bottom: auto; top: 100%; margin-top: 1px; } /* --- Left --- */ .ui.basic[class*="left pointing"].label::before { top: 50%; left: -1px; } /* --- Right --- */ .ui.basic[class*="right pointing"].label::before { top: 50%; right: -1px; } /* ------------------ Floating Label ------------------- */ /* ------------------- Sizes -------------------- */ .ui.labels .label, .ui.label { font-size: 0.8rem; } .ui.mini.labels .label, .ui.mini.label { font-size: 0.6rem; } .ui.tiny.labels .label, .ui.tiny.label { font-size: 0.66666667rem; } .ui.small.labels .label, .ui.small.label { font-size: 0.73333333rem; } .ui.large.labels .label, .ui.large.label { font-size: 1rem; } .ui.big.labels .label, .ui.big.label { font-size: 1.26666667rem; } .ui.huge.labels .label, .ui.huge.label { font-size: 1.4rem; } .ui.massive.labels .label, .ui.massive.label { font-size: 1.73333333rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - List * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* List *******************************/ ul.ui.list, ol.ui.list, .ui.list { list-style-type: none; margin: 1em 0; padding: 0 0; } ul.ui.list:first-child, ol.ui.list:first-child, .ui.list:first-child { margin-top: 0; padding-top: 0; } ul.ui.list:last-child, ol.ui.list:last-child, .ui.list:last-child { margin-bottom: 0; padding-bottom: 0; } /******************************* Content *******************************/ /* List Item */ ul.ui.list li, ol.ui.list li, .ui.list > .item, .ui.list .list > .item { display: list-item; table-layout: fixed; list-style-type: none; list-style-position: outside; padding: 0.2em 0; line-height: 1.5; } ul.ui.list > li:first-child::after, ol.ui.list > li:first-child::after, .ui.list > .list > .item::after, .ui.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 { padding-top: 0; } ul.ui.list li:last-child, ol.ui.list li:last-child, .ui.list .list > .item:last-child, .ui.list > .item:last-child { padding-bottom: 0; } /* Child List */ ul.ui.list ul, ol.ui.list ol, .ui.list .list:not(.icon) { clear: both; margin: 0; padding: 0.75em 0 0.25em 0.5em; } /* Child Item */ ul.ui.list ul li, ol.ui.list ol li, .ui.list .list > .item { padding: 0.13333333em 0; line-height: inherit; } /* Icon */ .ui.list .list > .item > i.icon, .ui.list > .item > i.icon { display: table-cell; min-width: 1.55em; margin: 0; padding-top: 0; transition: color 0.1s ease; } .ui.list .list > .item > i.icon:not(.loading), .ui.list > .item > i.icon:not(.loading) { padding-right: 0.26666667em; vertical-align: top; } .ui.list .list > .item > i.icon:only-child, .ui.list > .item > i.icon:only-child { display: inline-block; min-width: auto; vertical-align: top; } /* Image */ .ui.list .list > .item > .image, .ui.list > .item > .image { display: table-cell; background-color: transparent; margin: 0; vertical-align: top; } .ui.list .list > .item > .image:not(:only-child):not(img), .ui.list > .item > .image:not(:only-child):not(img) { padding-right: 0.5em; } .ui.list .list > .item > .image img, .ui.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 { display: inline-block; } /* Content */ .ui.list .list > .item > .content, .ui.list > .item > .content { line-height: 1.5; color: rgba(0, 0, 0, 0.87); } .ui.list .list > .item > .image + .content, .ui.list .list > .item > i.icon + .content, .ui.list > .item > .image + .content, .ui.list > .item > i.icon + .content { display: table-cell; width: 100%; padding: 0 0 0 0.5em; vertical-align: top; } .ui.list .list > .item > i.loading.icon + .content, .ui.list > .item > i.loading.icon + .content { padding-left: calc(0.26666666666666666em + 0.5em); } .ui.list .list > .item > img.image + .content, .ui.list > .item > img.image + .content { display: inline-block; width: auto; } .ui.list .list > .item > .content > .list, .ui.list > .item > .content > .list { margin-left: 0; padding-left: 0; } /* Header */ .ui.list .list > .item .header, .ui.list > .item .header { display: block; margin: 0; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; font-weight: bold; color: rgba(0, 0, 0, 0.87); } /* Description */ .ui.list .list > .item .description, .ui.list > .item .description { display: block; color: rgba(0, 0, 0, 0.7); } /* Child Link */ .ui.list > .item a, .ui.list .list > .item a { cursor: pointer; } /* Linking Item */ .ui.list .list > a.item, .ui.list > a.item { cursor: pointer; color: #269eab; } .ui.list .list > a.item:hover, .ui.list > a.item:hover { color: #18646c; } /* Linked Item Icons */ .ui.list .list > a.item > i.icons, .ui.list > a.item > i.icons, .ui.list .list > a.item > i.icon, .ui.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 { cursor: pointer; color: #269eab !important; } .ui.list .list > .item > a.header:hover, .ui.list > .item > a.header:hover { color: #18646c !important; } /* Floated Content */ .ui[class*="left floated"].list { float: left; } .ui[class*="right floated"].list { float: right; } .ui.list .list > .item [class*="left floated"], .ui.list > .item [class*="left floated"] { float: left; margin: 0 1em 0 0; } .ui.list .list > .item [class*="right floated"], .ui.list > .item [class*="right floated"] { float: right; margin: 0 0 0 1em; } /******************************* Coupling *******************************/ .ui.menu .ui.list > .item, .ui.menu .ui.list .list > .item { display: list-item; table-layout: fixed; background-color: transparent; list-style-type: none; list-style-position: outside; padding: 0.2em 0; line-height: 1.5; } .ui.menu .ui.list .list > .item::before, .ui.menu .ui.list > .item::before { border: none; background: none; } .ui.menu .ui.list .list > .item:first-child, .ui.menu .ui.list > .item:first-child { padding-top: 0; } .ui.menu .ui.list .list > .item:last-child, .ui.menu .ui.list > .item:last-child { padding-bottom: 0; } /******************************* Types *******************************/ /* ------------------- Horizontal -------------------- */ .ui.horizontal.list { display: inline-block; font-size: 0; } .ui.horizontal.list > .item { display: inline-block; margin-right: 1em; font-size: 1rem; } .ui.horizontal.list:not(.celled) > .item:last-child { margin-right: 0; padding-right: 0; } .ui.horizontal.list .list:not(.icon) { padding-left: 0; padding-bottom: 0; } .ui.horizontal.list > .item > .image, .ui.horizontal.list .list > .item > .image, .ui.horizontal.list > .item > i.icon, .ui.horizontal.list .list > .item > i.icon, .ui.horizontal.list > .item > .content, .ui.horizontal.list .list > .item > .content { vertical-align: middle; } /* Padding on all elements */ .ui.horizontal.list > .item:first-child, .ui.horizontal.list > .item:last-child { padding-top: 0.2em; padding-bottom: 0.2em; } /* Horizontal List */ .ui.horizontal.list > .item > i.icon, .ui.horizontal.list .item > i.icons > i.icon { margin: 0; padding: 0 0.25em 0 0; } .ui.horizontal.list > .item > .image + .content, .ui.horizontal.list > .item > i.icon, .ui.horizontal.list > .item > i.icon + .content { float: none; display: inline-block; width: auto; } .ui.horizontal.list > .item > .image { display: inline-block; } /******************************* States *******************************/ /* ------------------- Disabled -------------------- */ .ui.list .list > .disabled.item, .ui.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 { color: rgba(225, 225, 225, 0.3) !important; } /* ------------------- Hover -------------------- */ .ui.list .list > a.item:hover > .icons, .ui.list > a.item:hover > .icons, .ui.list .list > a.item:hover > i.icon, .ui.list > a.item:hover > i.icon { color: rgba(0, 0, 0, 0.87); } /******************************* Variations *******************************/ /* ------------------- Inverted -------------------- */ .ui.inverted.list .list > a.item > i.icon, .ui.inverted.list > a.item > i.icon { color: rgba(255, 255, 255, 0.7); } .ui.inverted.list .list > .item .header, .ui.inverted.list > .item .header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.list .list > .item .description, .ui.inverted.list > .item .description { color: rgba(255, 255, 255, 0.7); } .ui.inverted.list .list > .item > .content, .ui.inverted.list > .item > .content { color: rgba(255, 255, 255, 0.7); } /* Item Link */ .ui.inverted.list .list > a.item, .ui.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 { color: #18646c; } /* Linking Content */ .ui.inverted.list .item a:not(.ui) { color: rgba(255, 255, 255, 0.9) !important; } .ui.inverted.list .item a:not(.ui):hover { color: #18646c !important; } /* ------------------- Aligned -------------------- */ .ui.list[class*="top aligned"] .image, .ui.list[class*="top aligned"] .content, .ui.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"] { vertical-align: middle !important; } .ui.list[class*="bottom aligned"] .image, .ui.list[class*="bottom aligned"] .content, .ui.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) { color: rgba(0, 0, 0, 0.4); transition: 0.1s color ease; } .ui.ui.link.list a.item:hover, .ui.ui.link.list .item a:not(.ui):hover { color: rgba(0, 0, 0, 0.8); } .ui.ui.link.list a.item:active, .ui.ui.link.list .item a:not(.ui):active { color: rgba(0, 0, 0, 0.9); } .ui.ui.link.list .active.item, .ui.ui.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) { color: rgba(255, 255, 255, 0.5); } .ui.ui.inverted.link.list a.item:hover, .ui.ui.inverted.link.list .item a:not(.ui):hover { color: #ffffff; } .ui.ui.inverted.link.list a.item:active, .ui.ui.inverted.link.list .item a:not(.ui):active { color: #ffffff; } .ui.ui.inverted.link.list a.active.item, .ui.ui.inverted.link.list .active.item a:not(.ui) { color: #ffffff; } /* ------------------- Selection -------------------- */ .ui.selection.list .list > .item, .ui.selection.list > .item { cursor: pointer; background: transparent; padding: 0.5em 0.5em; margin: 0; 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 { margin-bottom: 0; } .ui.selection.list .list > .item:hover, .ui.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 { 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 { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* Inverted */ .ui.inverted.selection.list > .item { background: transparent; color: rgba(255, 255, 255, 0.5); } .ui.inverted.selection.list > .item:hover { background: rgba(255, 255, 255, 0.02); color: #ffffff; } .ui.inverted.selection.list > .item:active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .ui.inverted.selection.list > .item.active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* Celled / Divided Selection List */ .ui.divided.selection.list .list > .item, .ui.divided.selection.list > .item { border-radius: 0; } /* ------------------- Animated -------------------- */ .ui.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 { padding-left: 1em; } /* ------------------- Fitted -------------------- */ .ui.fitted.list:not(.selection) .list > .item, .ui.fitted.list:not(.selection) > .item { padding-left: 0; padding-right: 0; } .ui.fitted.selection.list .list > .item, .ui.fitted.selection.list > .item { margin-left: -0.5em; margin-right: -0.5em; } /* ------------------- Bulleted -------------------- */ ul.ui.list { margin-left: 1.25rem; } ul.ui.list li { position: relative; } ul.ui.list li::before { -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; position: absolute; top: auto; left: auto; font-weight: normal; margin-left: -1.25rem; content: "\2022"; opacity: 1; color: inherit; vertical-align: top; } ul.ui.list li::before { color: rgba(0, 0, 0, 0.87); } ul.ui.list ul { padding-left: 1.25rem; } /* Horizontal Bulleted */ /* ------------------- Ordered -------------------- */ ol.ui.list, ol.ui.list ol { counter-reset: ordered; margin-left: 1.25rem; list-style-type: none; } ol.ui.list li { list-style-type: none; position: relative; } ol.ui.list li::before { position: absolute; top: auto; left: auto; -webkit-user-select: none; -moz-user-select: none; 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 { color: rgba(255, 255, 255, 0.7); } /* Value */ ol.ui.list li[value]::before { content: attr(value); } /* Child Lists */ ol.ui.list ol { margin-left: 1em; } ol.ui.list ol li::before { margin-left: -2em; } /* Horizontal Ordered */ ol.ui.horizontal.list { margin-left: 0; } ol.ui.horizontal.list li::before { position: static; margin: 0 0.5em 0 0; } /* Suffixed Ordered */ /* ------------------- Divided -------------------- */ .ui.divided.list > .item { border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.divided.list .list > .item { border-top: none; } .ui.divided.list .item .list > .item { border-top: none; } .ui.divided.list .list > .item:first-child, .ui.divided.list > .item:first-child { border-top: none; } /* Sub Menu */ .ui.divided.list:not(.horizontal) .list > .item:first-child { border-top-width: 1px; } /* Divided bulleted */ /* Divided Ordered */ /* Divided Selection */ .ui.divided.selection.list .list > .item, .ui.divided.selection.list > .item { margin: 0; border-radius: 0; } /* Divided horizontal */ .ui.divided.horizontal.list { margin-left: 0; } .ui.divided.horizontal.list > .item { padding-left: 0.5em; } .ui.divided.horizontal.list > .item:not(:last-child) { padding-right: 0.5em; } .ui.divided.horizontal.list > .item { border-top: none; border-right: 1px solid rgba(34, 36, 38, 0.15); margin: 0; line-height: 0.6; } .ui.horizontal.divided.list > .item:last-child { border-right: none; } /* Inverted */ .ui.divided.inverted.list > .item, .ui.divided.inverted.list > .list, .ui.divided.inverted.horizontal.list > .item { border-color: rgba(255, 255, 255, 0.1); } /* ------------------- Celled -------------------- */ /* Padding on all elements */ /* Sub Menu */ /* Celled Bulleted */ /* Celled Ordered */ /* Celled Horizontal */ /* Inverted */ /* ------------------- Relaxed -------------------- */ .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { padding-top: 0.4em; } .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { padding-bottom: 0.4em; } .ui.horizontal.relaxed.list .list > .item:not(:first-child), .ui.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) { padding-right: 1rem; } /* Very Relaxed */ .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { padding-top: 0.8em; } .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { padding-bottom: 0.8em; } .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), .ui.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) { padding-right: 1.5rem; } /* ------------------- Sizes -------------------- */ .ui.list { font-size: 1em; } .ui.mini.list { font-size: 0.8em; } .ui.mini.horizontal.list .list > .item, .ui.mini.horizontal.list > .item { font-size: 0.8rem; } .ui.tiny.list { font-size: 0.86666667em; } .ui.tiny.horizontal.list .list > .item, .ui.tiny.horizontal.list > .item { font-size: 0.86666667rem; } .ui.small.list { font-size: 0.93333333em; } .ui.small.horizontal.list .list > .item, .ui.small.horizontal.list > .item { font-size: 0.93333333rem; } .ui.large.list { font-size: 1.13333333em; } .ui.large.horizontal.list .list > .item, .ui.large.horizontal.list > .item { font-size: 1.13333333rem; } .ui.big.list { font-size: 1.26666667em; } .ui.big.horizontal.list .list > .item, .ui.big.horizontal.list > .item { font-size: 1.26666667rem; } .ui.huge.list { font-size: 1.4em; } .ui.huge.horizontal.list .list > .item, .ui.huge.horizontal.list > .item { font-size: 1.4rem; } .ui.massive.list { font-size: 1.73333333em; } .ui.massive.horizontal.list .list > .item, .ui.massive.horizontal.list > .item { font-size: 1.73333333rem; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Fomantic-UI - Segment * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Segment *******************************/ /* ------------------- Element -------------------- */ /* ------------------- Group -------------------- */ /* ------------------- Coupling -------------------- */ /* Page Grid Segment */ /******************************* Types *******************************/ /* Placeholder */ /* Piled */ /* Circular */ /* Stacked */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /******************************* Variations *******************************/ /* Raised */ /* Padded */ /* Attached */ /* Inverted */ /* Floated */ /* Basic */ /* Colors */ /* Ordinality */ /* Resizable */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Segment *******************************/ .ui.segment { position: relative; background: #fff; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0; padding: 1em 1em; border-radius: 0.26666667rem; border: 1px solid rgba(34, 36, 38, 0.15); } .ui.segment:first-child { margin-top: 0; } .ui.segment:last-child { margin-bottom: 0; } /* Vertical */ .ui.vertical.segment { margin: 0; padding-left: 0; padding-right: 0; background: none transparent; border-radius: 0; box-shadow: none; border: none; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.vertical.segment:first-child { border-top: none; } /* ------------------- Loose Coupling -------------------- */ /* Header */ .ui.inverted.segments .segment > .ui.header .sub.header, .ui.inverted.segments .segment > .ui.header, .ui.inverted.segment > .ui.header .sub.header, .ui.inverted.segment > .ui.header { color: #fff; } /* Label */ .ui[class*="bottom attached"].segment > [class*="top attached"].label { border-top-left-radius: 0; border-top-right-radius: 0; } .ui[class*="top attached"].segment > [class*="bottom attached"].label { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { border-top-left-radius: 0; border-top-right-radius: 0; } .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Grid */ .ui.page.grid.segment, .ui.grid > .row > .ui.segment.column, .ui.grid > .ui.segment.column { padding-top: 2em; padding-bottom: 2em; } .ui.grid.segment { margin: 1rem 0; border-radius: 0.26666667rem; } /* Table */ .ui.basic.table.segment { background: #fff; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); } .ui[class*="very basic"].table.segment { padding: 1em 1em; } /* Tab */ .ui.segment.tab:last-child { margin-bottom: 1rem; } /******************************* Types *******************************/ /* ------------------- Placeholder -------------------- */ .ui.placeholder.segment { display: flex; flex-direction: column; justify-content: center; align-items: stretch; max-width: initial; animation: none; overflow: visible; padding: 1em 1em; min-height: 18rem; background: #f9fafb; border-color: rgba(34, 36, 38, 0.15); box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset; } .ui.placeholder.segment.tab { display: none; } .ui.placeholder.segment.tab.active { display: flex; } .ui.placeholder.segment .button, .ui.placeholder.segment textarea { display: block; } .ui.placeholder.segment .field, .ui.placeholder.segment textarea, .ui.placeholder.segment > .ui.input, .ui.placeholder.segment .button { max-width: 15rem; margin-left: auto; margin-right: auto; } .ui.placeholder.segment .column .button, .ui.placeholder.segment .column .field, .ui.placeholder.segment .column textarea, .ui.placeholder.segment .column > .ui.input { max-width: 15rem; margin-left: auto; margin-right: auto; } .ui.placeholder.segment > .inline { align-self: center; } .ui.placeholder.segment > .inline > .button { display: inline-block; width: auto; margin: 0 0.33333333rem 0 0; } .ui.placeholder.segment > .inline > .button:last-child { margin-right: 0; } /* ------------------- Piled -------------------- */ /* Piled Attached */ @supports selector(:has(.f)) { *:has(> .ui.piled.segment) { z-index: 0; position: relative; } } /* ------------------- Stacked -------------------- */ /* Add additional page */ /* Inverted */ /* ------------------- Padded -------------------- */ /* Padded vertical */ /* ------------------- Compact -------------------- */ /* Compact Group */ /* ------------------- Circular -------------------- */ .ui.circular.segment { display: table-cell; padding: 2em; text-align: center; vertical-align: middle; border-radius: 500em; } /* ------------------- Raised -------------------- */ .ui.ui.raised.segments, .ui.ui.raised.segment { box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); } .ui.ui.inverted.raised.segments, .ui.ui.inverted.raised.segment { box-shadow: 0 2px 4px 0 rgba(225, 225, 225, 0.1), 0 2px 10px 0 rgba(225, 225, 225, 0.5); } /******************************* Groups *******************************/ /* Group */ .ui.segments { flex-direction: column; position: relative; margin: 1rem 0; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.26666667rem; } .ui.segments:first-child { margin-top: 0; } .ui.segments:last-child { margin-bottom: 0; } /* Nested Segment */ .ui.segments > .segment { top: 0; bottom: 0; border-radius: 0; margin: 0; width: auto; box-shadow: none; border: none; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.segments:not(.horizontal) > .segment:first-child { top: 0; bottom: 0; border-top: none; margin-top: 0; margin-bottom: 0; border-radius: 0.26666667rem 0.26666667rem 0 0; } /* Bottom */ .ui.segments:not(.horizontal) > .segment:last-child { top: 0; bottom: 0; margin-top: 0; margin-bottom: 0; box-shadow: 0 2px 1px -1px rgba(34, 36, 38, 0.15); border-radius: 0 0 0.26666667rem 0.26666667rem; } /* Only */ .ui.segments:not(.horizontal) > .segment:only-child { border-radius: 0.26666667rem; } /* Nested Group */ .ui.segments > .ui.segments { border-top: 1px solid rgba(34, 36, 38, 0.15); margin: 1rem; } .ui.segments > .segments:first-child { border-top: none; } .ui.segments > .segment + .segments:not(.horizontal) { margin-top: 0; } /* Horizontal Group */ .ui.horizontal.segments { display: flex; flex-direction: row; background-color: transparent; padding: 0; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0; border-radius: 0.26666667rem; border: 1px solid rgba(34, 36, 38, 0.15); } .ui.stackable.horizontal.segments { flex-wrap: wrap; } /* Nested Horizontal Group */ .ui.segments > .horizontal.segments { margin: 0; background-color: transparent; border-radius: 0; border: none; box-shadow: none; border-top: 1px solid rgba(34, 36, 38, 0.15); } /* Horizontal Segment */ .ui.horizontal.segments:not(.compact) > .segment:not(.compact) { flex: 1 1 auto; -ms-flex: 1 1 0; } .ui.horizontal.segments > .segment { margin: 0; min-width: 0; border-radius: 0; border: none; box-shadow: none; border-left: 1px solid rgba(34, 36, 38, 0.15); } /* Border Fixes */ .ui.segments > .horizontal.segments:first-child { border-top: none; } .ui.horizontal.segments:not(.stackable):not(.wrapping) > .segment:first-child { border-left: none; } .ui.horizontal.segments > .segment:first-child { border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui.horizontal.segments > .segment:last-child { border-radius: 0 0.26666667rem 0.26666667rem 0; } /* Equal Width */ .ui[class*="equal width"].horizontal.segments > .segment { width: 100%; } /******************************* States *******************************/ /* -------------- Disabled --------------- */ .ui.disabled.segments, .ui.disabled.segment { opacity: 0.45; color: rgba(40, 40, 40, 0.3); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* -------------- Loading --------------- */ .ui.loading.segments, .ui.loading.segment { position: relative; cursor: default; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: all 0s linear; min-height: 4.5em; } .ui.loading.segments::before, .ui.loading.segment::before { position: absolute; content: ""; top: 0; left: 0; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; border-radius: 0.26666667rem; z-index: 100; } .ui.loading.segments::after, .ui.loading.segment::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -1.5em 0 0 -1.5em; width: 3em; height: 3em; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: 101; } /******************************* Variations *******************************/ /* ------------------- Basic -------------------- */ .ui.basic.segment, .ui.segments .ui.basic.segment, .ui.basic.segments { background: none transparent; box-shadow: none; border: none; border-radius: 0; } /* ------------------- Clearing -------------------- */ .ui.clearing.segment::after { content: ""; display: block; clear: both; } /* ------------------- Colors -------------------- */ .ui.ui.ui.ui.ui.red.segment:not(.inverted) { border-top: 2px solid #db2828; } .ui.ui.ui.ui.ui.inverted.red.segment { background-color: #db2828; color: #fff; } .ui.ui.inverted.red.segment:not(.piled) { border-color: #db2828; } .ui.ui.ui.ui.ui.green.segment:not(.inverted) { border-top: 2px solid #269eab; } .ui.ui.ui.ui.ui.inverted.green.segment { background-color: #269eab; color: #fff; } .ui.ui.inverted.green.segment:not(.piled) { border-color: #269eab; } .ui.ui.ui.ui.ui.teal.segment:not(.inverted) { border-top: 2px solid #00b5ad; } .ui.ui.ui.ui.ui.inverted.teal.segment { background-color: #00b5ad; color: #fff; } .ui.ui.inverted.teal.segment:not(.piled) { border-color: #00b5ad; } .ui.ui.ui.ui.ui.blue.segment:not(.inverted) { border-top: 2px solid #2185d0; } .ui.ui.ui.ui.ui.inverted.blue.segment { background-color: #2185d0; color: #fff; } .ui.ui.inverted.blue.segment:not(.piled) { border-color: #2185d0; } .ui.ui.ui.ui.ui.purple.segment:not(.inverted) { border-top: 2px solid #a333c8; } .ui.ui.ui.ui.ui.inverted.purple.segment { background-color: #a333c8; color: #fff; } .ui.ui.inverted.purple.segment:not(.piled) { border-color: #a333c8; } .ui.ui.ui.ui.ui.grey.segment:not(.inverted) { border-top: 2px solid #767676; } .ui.ui.ui.ui.ui.inverted.grey.segment { background-color: #767676; color: #fff; } .ui.ui.inverted.grey.segment:not(.piled) { border-color: #767676; } .ui.ui.ui.ui.ui.black.segment:not(.inverted) { border-top: 2px solid #1b1c1d; } .ui.ui.ui.ui.ui.inverted.black.segment { background-color: #1b1c1d; color: #fff; } .ui.ui.inverted.black.segment:not(.piled) { border-color: #1b1c1d; } /* ------------------- Aligned -------------------- */ .ui[class*="left aligned"].segment { text-align: left; } .ui[class*="right aligned"].segment { text-align: right; } .ui[class*="center aligned"].segment { text-align: center; } /* ------------------- Floated -------------------- */ .ui.floated.segment, .ui[class*="left floated"].segment { float: left; margin-right: 1em; } .ui[class*="right floated"].segment { float: right; margin-left: 1em; } /* ------------------- Inverted -------------------- */ .ui.inverted.segments, .ui.inverted.segments .segment, .ui.inverted.segment { border: none; box-shadow: none; } .ui.inverted.segments .segment, .ui.inverted.segment, .ui.primary.inverted.segment { background: #1b1c1d; color: rgba(255, 255, 255, 0.9); } /* Nested */ .ui.inverted.segment .segment { color: rgba(0, 0, 0, 0.87); } .ui.inverted.segment .inverted.segment { color: rgba(255, 255, 255, 0.9); } /* Attached */ .ui.ui.inverted.attached.segment { border-color: #555; } /* Loading */ .ui.inverted.loading.segments, .ui.inverted.loading.segment { color: #fff; } .ui.inverted.loading.segments::before, .ui.inverted.loading.segment::before { background: rgba(0, 0, 0, 0.85); } /* ------------------- Emphasis -------------------- */ /* Secondary */ .ui.secondary.segment { background: #f3f4f5; color: rgba(0, 0, 0, 0.6); } .ui.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 */ /* ------------------- Attached -------------------- */ /* Middle */ .ui.attached.segment { top: 0; bottom: 0; border-radius: 0; margin: 0 -1px; width: calc(100% + 2px); max-width: calc(100% + 2px); box-shadow: none; } .ui.attached.segment:not(.basic) { border: 1px solid #d4d4d5; } .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top):not([class*="left attached"]):not([class*="right attached"]) { border-top: none; } /* Top */ .ui.segment[class*="top attached"] { bottom: 0; margin-bottom: 0; top: 0; margin-top: 1rem; border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.segment[class*="top attached"]:first-child { margin-top: 0; } .ui.tab.segment[class*="top attached"]:first-child { margin-top: 1rem; } /* Bottom */ .ui.segment[class*="bottom attached"] { bottom: 0; margin-top: 0; top: 0; margin-bottom: 1rem; box-shadow: 0 2px 1px -1px rgba(34, 36, 38, 0.15); border-radius: 0 0 0.26666667rem 0.26666667rem; } .ui.segment[class*="bottom attached"]:last-child { margin-bottom: 0; } .ui.tab.segment[class*="bottom attached"]:last-child { margin-bottom: 1rem; } .ui[class*="left attached"].segment { margin-right: 0; } .ui[class*="right attached"].segment { margin-left: 0; } /* -------------- Fitted --------------- */ .ui.fitted.segment:not(.horizontally) { padding-top: 0; padding-bottom: 0; } .ui.fitted.segment:not(.vertically) { padding-left: 0; padding-right: 0; } /* -------------- Scrolling --------------- */ .ui.scrolling.segment { overflow: auto; overscroll-behavior: none; } @media only screen and (max-width: 767.98px) { .ui.scrolling.segment.short { max-height: 11.25em; } .ui.scrolling.segment[class*="very short"] { max-height: 7.5em; } .ui.scrolling.segment { max-height: 15em; } .ui.scrolling.segment.long { max-height: 30em; } .ui.scrolling.segment[class*="very long"] { max-height: 45em; } } @media only screen and (min-width: 768px) { .ui.scrolling.segment.short { max-height: 13.5em; } .ui.scrolling.segment[class*="very short"] { max-height: 9em; } .ui.scrolling.segment { max-height: 18em; } .ui.scrolling.segment.long { max-height: 36em; } .ui.scrolling.segment[class*="very long"] { max-height: 54em; } } @media only screen and (min-width: 992px) { .ui.scrolling.segment.short { max-height: 18em; } .ui.scrolling.segment[class*="very short"] { max-height: 12em; } .ui.scrolling.segment { max-height: 24em; } .ui.scrolling.segment.long { max-height: 48em; } .ui.scrolling.segment[class*="very long"] { max-height: 72em; } } @media only screen and (min-width: 1920px) { .ui.scrolling.segment.short { max-height: 22.5em; } .ui.scrolling.segment[class*="very short"] { max-height: 15em; } .ui.scrolling.segment { max-height: 30em; } .ui.scrolling.segment.long { max-height: 60em; } .ui.scrolling.segment[class*="very long"] { max-height: 90em; } } /* ------------------- Size -------------------- */ .ui.segments .segment, .ui.segment { font-size: 1rem; } .ui.mini.segments .segment, .ui.mini.segment { font-size: 0.8rem; } .ui.tiny.segments .segment, .ui.tiny.segment { font-size: 0.86666667rem; } .ui.small.segments .segment, .ui.small.segment { font-size: 0.93333333rem; } .ui.large.segments .segment, .ui.large.segment { font-size: 1.13333333rem; } .ui.big.segments .segment, .ui.big.segment { font-size: 1.26666667rem; } .ui.huge.segments .segment, .ui.huge.segment { font-size: 1.4rem; } .ui.massive.segments .segment, .ui.massive.segment { font-size: 1.73333333rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /* Collections */ /*! * # Fomantic-UI - Breadcrumb * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Breadcrumb *******************************/ /* ------------------- Breadcrumb -------------------- */ /* Coupling */ /* Inverted */ /* ------------------- States -------------------- */ /* Packaged Theme */ /* Site Theme */ /******************************* Site Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Breadcrumb *******************************/ .ui.breadcrumb { line-height: 1.7; display: inline-block; margin: 0 0; vertical-align: middle; } .ui.breadcrumb:first-child { margin-top: 0; } .ui.breadcrumb:last-child { margin-bottom: 0; } /******************************* Content *******************************/ /* Divider */ .ui.breadcrumb .divider { display: inline-block; opacity: 0.7; margin: 0 0.2rem; font-size: 0.93333333em; color: rgba(0, 0, 0, 0.4); vertical-align: baseline; } /* Link */ .ui.breadcrumb a { color: #269eab; } .ui.breadcrumb a:hover { color: #18646c; } /* Icon Divider */ .ui.breadcrumb .icon.divider { font-size: 0.86666667em; vertical-align: baseline; } /* Section */ .ui.breadcrumb a.section { cursor: pointer; } .ui.breadcrumb .section { display: inline-block; margin: 0; padding: 0; } /* Loose Coupling */ .ui.breadcrumb.segment { display: inline-block; padding: 0.8em 1em; } /* Inverted */ .ui.inverted.breadcrumb { color: #dcddde; } .ui.inverted.breadcrumb > .active.section { color: #fff; } .ui.inverted.breadcrumb > .divider { color: rgba(255, 255, 255, 0.7); } /******************************* States *******************************/ .ui.breadcrumb .active.section { font-weight: bold; } /******************************* Variations *******************************/ .ui.breadcrumb { font-size: 1rem; } .ui.mini.breadcrumb { font-size: 0.8rem; } .ui.tiny.breadcrumb { font-size: 0.86666667rem; } .ui.small.breadcrumb { font-size: 0.93333333rem; } .ui.large.breadcrumb { font-size: 1.13333333rem; } .ui.big.breadcrumb { font-size: 1.26666667rem; } .ui.huge.breadcrumb { font-size: 1.4rem; } .ui.massive.breadcrumb { font-size: 1.73333333rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Form * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* Input states */ /* Loading Dimmer */ /* Loading Spinner */ /* ------------------- Types -------------------- */ /* Required */ /* Inverted */ /* ------------------- Variations -------------------- */ /* Grouped Fields */ /* Icon */ /* Inline */ /* ------------------- Groups -------------------- */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Elements *******************************/ /* -------------------- Form --------------------- */ .ui.form { position: relative; max-width: 100%; } /* -------------------- Content --------------------- */ .ui.form > p { margin: 1em 0; } /* -------------------- Field --------------------- */ .ui.form .field { clear: both; margin: 0 0 1em; } .ui.form .fields .fields, .ui.form .field:last-child, .ui.form .fields:last-child .field { margin-bottom: 0; } .ui.form .fields .field { clear: both; margin: 0; } /* -------------------- Labels --------------------- */ .ui.form .field > label { display: block; margin: 0 0 0.26666667rem 0; font-size: 0.93333333em; font-weight: bold; text-transform: none; } .ui.form:not(.inverted) .field > label:not(.button) { color: rgba(0, 0, 0, 0.87); } /* -------------------- Standard Inputs --------------------- */ .ui.form textarea, .ui.form input:not([type]), .ui.form input[type="color"], .ui.form input[type="date"], .ui.form input[type="email"], .ui.form input[type="month"], .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"] { width: 100%; vertical-align: top; } /* Set max height on unusual input */ .ui.form ::-webkit-datetime-edit, .ui.form ::-webkit-inner-spin-button { height: 1.21428571em; } .ui.form input:not([type]), .ui.form input[type="color"], .ui.form input[type="date"], .ui.form input[type="email"], .ui.form input[type="month"], .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"] { font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; margin: 0; outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.62619048em 0.93333333em; font-size: 1em; background: #fff; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); border-radius: 0.26666667rem; box-shadow: 0 0 0 0 transparent inset; transition: color 0.1s ease, border-color 0.1s ease; } .ui.form input[type="color"] { padding: initial; } .ui.form input::-webkit-calendar-picker-indicator { padding: 0; opacity: 0.5; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; } /* Text Area */ .ui.input textarea, .ui.form textarea { margin: 0; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.73333333em 0.93333333em; background: #fff; border: 1px solid rgba(34, 36, 38, 0.15); outline: none; color: rgba(0, 0, 0, 0.87); border-radius: 0.26666667rem; box-shadow: 0 0 0 0 transparent inset; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; line-height: 1.2857; resize: vertical; min-height: 3.16666667em; } .ui.input > textarea { flex: 1 1 auto; max-width: 100%; } .ui.form textarea:not([rows]) { height: 12em; min-height: 8em; max-height: 24em; } .ui.form textarea { vertical-align: top; } /* -------------------- Checkbox margin --------------------- */ /* -------------------- Transparent --------------------- */ /* -------------------------- Input w/ attached Button --------------------------- */ .ui.form input.attached { width: auto; } /* -------------------- Basic Select --------------------- */ .ui.form select { display: block; height: auto; width: 100%; background: #fff; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.26666667rem; box-shadow: 0 0 0 0 transparent inset; padding: 0.62em 0.93333333em; color: rgba(0, 0, 0, 0.87); transition: color 0.1s ease, border-color 0.1s ease; } /* -------------------- Dropdown --------------------- */ /* Block */ .ui.form .field > .selection.dropdown:not(.compact) { min-width: auto; width: 100%; } .ui.form .field > .selection.dropdown > .dropdown.icon { float: right; } /* Inline */ .ui.form .inline.fields .field > .selection.dropdown, .ui.form .inline.field > .selection.dropdown { width: auto; } .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, .ui.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 { width: 100%; } /* Inline */ .ui.form .inline.fields .field:not(.wide) .ui.input, .ui.form .inline.field:not(.wide) .ui.input { width: auto; vertical-align: middle; } /* Auto Input */ .ui.form .fields .field .ui.input input, .ui.form .fields .field .ui.input textarea, .ui.form .field .ui.input input, .ui.form .field .ui.input textarea { width: 100%; } /* Full Width Input */ .ui.form .ten.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 { flex: 1 0 auto; width: 0; } /* -------------------- Types of Messages --------------------- */ .ui.form .error.message, .ui.form .error.message:empty { display: none; } .ui.form .info.message, .ui.form .info.message:empty { display: none; } .ui.form .success.message, .ui.form .success.message:empty { display: none; } .ui.form .warning.message, .ui.form .warning.message:empty { display: none; } /* Assumptions */ .ui.form .message:first-child { margin-top: 0; } /* -------------------- Validation Prompt --------------------- */ .ui.form .field .prompt.label { white-space: normal; background: #fff !important; border: 1px solid #e0b4b4 !important; color: #9f3a38 !important; } .ui.form .field .prompt.label li::before { color: #9f3a38; } .ui.form .inline.fields .field .prompt, .ui.form .inline.field .prompt { vertical-align: top; margin: -0.25em 0 -0.5em 0.5em; } .ui.form .inline.fields .field .prompt::before, .ui.form .inline.field .prompt::before { border-width: 0 0 1px 1px; bottom: auto; right: auto; top: 50%; left: 0; } /******************************* States *******************************/ /* -------------------- Autofilled --------------------- */ .ui.form .field.field input:-webkit-autofill { box-shadow: 0 0 0 100px #fffff0 inset !important; border-color: #e5dfa1 !important; } /* Focus */ .ui.form .field.field input:-webkit-autofill:focus { box-shadow: 0 0 0 100px #fffff0 inset !important; border-color: #d5c315 !important; } /* -------------------- Placeholder --------------------- */ /* browsers require these rules separate */ .ui.form ::-moz-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.form ::placeholder { color: rgba(191, 191, 191, 0.87); } .ui.form ::-moz-placeholder { opacity: 1; } .ui.form :focus::-moz-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.form :focus::placeholder { color: rgba(115, 115, 115, 0.87); } .ui.form :focus:-ms-input-placeholder { color: rgba(115, 115, 115, 0.87) !important; } /* -------------------- Focus --------------------- */ .ui.form input:not([type]):focus, .ui.form input[type="color"]:focus, .ui.form input[type="date"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="month"]: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 { color: rgba(0, 0, 0, 0.95); border-color: #85b7d9; border-radius: 0.26666667rem; background: #fff; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; } .ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="color"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="month"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="tel"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus, .ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus, .ui.form .ui.action.input:not([class*="left action"]) textarea:focus { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ui.form .ui[class*="left action"].input input:not([type]), .ui.form .ui[class*="left action"].input input[type="color"], .ui.form .ui[class*="left action"].input input[type="date"], .ui.form .ui[class*="left action"].input input[type="email"], .ui.form .ui[class*="left action"].input input[type="month"], .ui.form .ui[class*="left action"].input input[type="number"], .ui.form .ui[class*="left action"].input input[type="password"], .ui.form .ui[class*="left action"].input input[type="search"], .ui.form .ui[class*="left action"].input input[type="tel"], .ui.form .ui[class*="left action"].input input[type="time"], .ui.form .ui[class*="left action"].input input[type="text"], .ui.form .ui[class*="left action"].input input[type="file"], .ui.form .ui[class*="left action"].input input[type="url"], .ui.form .ui[class*="left action"].input textarea { border-bottom-left-radius: 0; border-top-left-radius: 0; } .ui.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #85b7d9; border-radius: 0.26666667rem; background: #fff; box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; -webkit-appearance: none; } /* Focus */ .ui.form input:focus::-webkit-calendar-picker-indicator { opacity: 1; } /* -------------------- States --------------------- */ /* On Form */ .ui.form.error .error.message:not(:empty) { display: block; } .ui.form.error .icon.error.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.error .error.message:not(:empty), .ui.form .field.error .error.message:not(:empty) { display: block; } .ui.form .fields.error .icon.error.message:not(:empty), .ui.form .field.error .icon.error.message:not(:empty) { display: flex; } .ui.ui.form .fields.error .field label, .ui.ui.form .fields.error .field .ui.label:not(.corner), .ui.ui.form .field.error label, .ui.ui.form .field.error .ui.label:not(.corner), .ui.ui.form .fields.error .field .input, .ui.ui.form .field.error .input { color: #9f3a38; } @supports selector(:has(.f)) { .ui.form .fields:has(.error) > label { color: #9f3a38; } } .ui.form .fields.error .field .ui.label, .ui.form .field.error .ui.label { background-color: #ecd1d1; } .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="color"], .ui.form .fields.error .field input[type="date"], .ui.form .fields.error .field input[type="email"], .ui.form .fields.error .field input[type="month"], .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="color"], .ui.form .field.error input[type="date"], .ui.form .field.error input[type="email"], .ui.form .field.error input[type="month"], .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"] { color: #9f3a38; background: #fff6f6; border-color: #e0b4b4; border-radius: ""; box-shadow: none; } .ui.form:not(.initial) .field input:invalid { color: #9f3a38; background: #fff6f6; border-color: #e0b4b4; 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="color"]:focus, .ui.form .field.error input[type="date"]:focus, .ui.form .field.error input[type="email"]:focus, .ui.form .field.error input[type="month"]: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 { background: #fff6f6; border-color: #e0b4b4; color: #9f3a38; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.error select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ /* Autofilled */ .ui.form .error.error input:-webkit-autofill { box-shadow: 0 0 0 100px #fffaf0 inset !important; border-color: #e0b4b4 !important; } /* Placeholder */ .ui.form .error ::-moz-placeholder { color: #e7bdbc; } .ui.form .error .ui.dropdown > .default.text, .ui.form .error ::placeholder { color: #e7bdbc; } .ui.form .error :focus::-moz-placeholder { color: #da9796; } .ui.form .error .ui.dropdown > input:focus ~ .default.text, .ui.form .error :focus::placeholder { color: #da9796; } .ui.form .error :focus:-ms-input-placeholder { color: #da9796 !important; } /*------------------ Dropdown State --------------------*/ .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 { background: #fff6f6; color: #9f3a38; } .ui.form .fields.error .field .ui.dropdown, .ui.form .field.error .ui.dropdown { border-color: #e0b4b4 !important; } .ui.form .fields.error .field .ui.dropdown:hover, .ui.form .field.error .ui.dropdown:hover { border-color: #e0b4b4 !important; } .ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .field.error .ui.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 { 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 { background-color: #fbe7e7; } /* Selected */ .ui.form .fields.error .field .ui.dropdown .menu .selected.item, .ui.form .field.error .ui.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 { background-color: #fdcfcf !important; } /*-------------------- Checkbox State ---------------------*/ .ui.inverted.form .fields.error .field label, .ui.inverted.form .error.field label { color: #ecd1d1; } @supports selector(:has(.f)) { .ui.inverted.form .fields:has(.error) > label { color: #ecd1d1; } } /* On Form */ .ui.form.info .info.message:not(:empty) { display: block; } .ui.form.info .icon.info.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.info .info.message:not(:empty), .ui.form .field.info .info.message:not(:empty) { display: block; } .ui.form .fields.info .icon.info.message:not(:empty), .ui.form .field.info .icon.info.message:not(:empty) { display: flex; } .ui.ui.form .fields.info .field label, .ui.ui.form .fields.info .field .ui.label:not(.corner), .ui.ui.form .field.info label, .ui.ui.form .field.info .ui.label:not(.corner), .ui.ui.form .fields.info .field .input, .ui.ui.form .field.info .input { color: #276f86; } @supports selector(:has(.f)) { .ui.form .fields:has(.info) > label { color: #276f86; } } .ui.form .fields.info .field .ui.label, .ui.form .field.info .ui.label { background-color: #c6e3e9; } .ui.form .fields.info .field textarea, .ui.form .fields.info .field select, .ui.form .fields.info .field input:not([type]), .ui.form .fields.info .field input[type="color"], .ui.form .fields.info .field input[type="date"], .ui.form .fields.info .field input[type="email"], .ui.form .fields.info .field input[type="month"], .ui.form .fields.info .field input[type="number"], .ui.form .fields.info .field input[type="password"], .ui.form .fields.info .field input[type="search"], .ui.form .fields.info .field input[type="tel"], .ui.form .fields.info .field input[type="time"], .ui.form .fields.info .field input[type="text"], .ui.form .fields.info .field input[type="file"], .ui.form .fields.info .field input[type="url"], .ui.form .field.info textarea, .ui.form .field.info select, .ui.form .field.info input:not([type]), .ui.form .field.info input[type="color"], .ui.form .field.info input[type="date"], .ui.form .field.info input[type="email"], .ui.form .field.info input[type="month"], .ui.form .field.info input[type="number"], .ui.form .field.info input[type="password"], .ui.form .field.info input[type="search"], .ui.form .field.info input[type="tel"], .ui.form .field.info input[type="time"], .ui.form .field.info input[type="text"], .ui.form .field.info input[type="file"], .ui.form .field.info input[type="url"] { color: #276f86; background: #f8ffff; border-color: #a9d5de; border-radius: ""; box-shadow: none; } .ui.form .field.info textarea:focus, .ui.form .field.info select:focus, .ui.form .field.info input:not([type]):focus, .ui.form .field.info input[type="color"]:focus, .ui.form .field.info input[type="date"]:focus, .ui.form .field.info input[type="email"]:focus, .ui.form .field.info input[type="month"]:focus, .ui.form .field.info input[type="number"]:focus, .ui.form .field.info input[type="password"]:focus, .ui.form .field.info input[type="search"]:focus, .ui.form .field.info input[type="tel"]:focus, .ui.form .field.info input[type="time"]:focus, .ui.form .field.info input[type="text"]:focus, .ui.form .field.info input[type="file"]:focus, .ui.form .field.info input[type="url"]:focus { background: #f8ffff; border-color: #a9d5de; color: #276f86; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.info select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ /* Autofilled */ .ui.form .info.info input:-webkit-autofill { box-shadow: 0 0 0 100px #f0faff inset !important; border-color: #b3e0e0 !important; } /* Placeholder */ .ui.form .info ::-moz-placeholder { color: #98cfe1; } .ui.form .info .ui.dropdown > .default.text, .ui.form .info ::placeholder { color: #98cfe1; } .ui.form .info :focus::-moz-placeholder { color: #70bdd6; } .ui.form .info .ui.dropdown > input:focus ~ .default.text, .ui.form .info :focus::placeholder { color: #70bdd6; } .ui.form .info :focus:-ms-input-placeholder { color: #70bdd6 !important; } /*------------------ Dropdown State --------------------*/ .ui.form .fields.info .field .ui.dropdown, .ui.form .fields.info .field .ui.dropdown .item, .ui.form .field.info .ui.dropdown, .ui.form .field.info .ui.dropdown > .text, .ui.form .field.info .ui.dropdown .item { background: #f8ffff; color: #276f86; } .ui.form .fields.info .field .ui.dropdown, .ui.form .field.info .ui.dropdown { border-color: #a9d5de !important; } .ui.form .fields.info .field .ui.dropdown:hover, .ui.form .field.info .ui.dropdown:hover { border-color: #a9d5de !important; } .ui.form .fields.info .field .ui.dropdown:hover .menu, .ui.form .field.info .ui.dropdown:hover .menu { border-color: #a9d5de; } .ui.form .fields.info .field .ui.multiple.selection.dropdown > .label, .ui.form .field.info .ui.multiple.selection.dropdown > .label { background-color: #cce3ea; color: #276f86; } /* Hover */ .ui.form .fields.info .field .ui.dropdown .menu .item:hover, .ui.form .field.info .ui.dropdown .menu .item:hover { background-color: #e9f2fb; } /* Selected */ .ui.form .fields.info .field .ui.dropdown .menu .selected.item, .ui.form .field.info .ui.dropdown .menu .selected.item { background-color: #e9f2fb; } /* Active */ .ui.form .fields.info .field .ui.dropdown .menu .active.item, .ui.form .field.info .ui.dropdown .menu .active.item { background-color: #cef1fd !important; } /*-------------------- Checkbox State ---------------------*/ .ui.inverted.form .fields.info .field label, .ui.inverted.form .info.field label { color: #c6e3e9; } @supports selector(:has(.f)) { .ui.inverted.form .fields:has(.info) > label { color: #c6e3e9; } } /* On Form */ .ui.form.success .success.message:not(:empty) { display: block; } .ui.form.success .icon.success.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.success .success.message:not(:empty), .ui.form .field.success .success.message:not(:empty) { display: block; } .ui.form .fields.success .icon.success.message:not(:empty), .ui.form .field.success .icon.success.message:not(:empty) { display: flex; } .ui.ui.form .fields.success .field label, .ui.ui.form .fields.success .field .ui.label:not(.corner), .ui.ui.form .field.success label, .ui.ui.form .field.success .ui.label:not(.corner), .ui.ui.form .fields.success .field .input, .ui.ui.form .field.success .input { color: #2c662d; } @supports selector(:has(.f)) { .ui.form .fields:has(.success) > label { color: #2c662d; } } .ui.form .fields.success .field .ui.label, .ui.form .field.success .ui.label { background-color: #b9d1ad; } .ui.form .fields.success .field textarea, .ui.form .fields.success .field select, .ui.form .fields.success .field input:not([type]), .ui.form .fields.success .field input[type="color"], .ui.form .fields.success .field input[type="date"], .ui.form .fields.success .field input[type="email"], .ui.form .fields.success .field input[type="month"], .ui.form .fields.success .field input[type="number"], .ui.form .fields.success .field input[type="password"], .ui.form .fields.success .field input[type="search"], .ui.form .fields.success .field input[type="tel"], .ui.form .fields.success .field input[type="time"], .ui.form .fields.success .field input[type="text"], .ui.form .fields.success .field input[type="file"], .ui.form .fields.success .field input[type="url"], .ui.form .field.success textarea, .ui.form .field.success select, .ui.form .field.success input:not([type]), .ui.form .field.success input[type="color"], .ui.form .field.success input[type="date"], .ui.form .field.success input[type="email"], .ui.form .field.success input[type="month"], .ui.form .field.success input[type="number"], .ui.form .field.success input[type="password"], .ui.form .field.success input[type="search"], .ui.form .field.success input[type="tel"], .ui.form .field.success input[type="time"], .ui.form .field.success input[type="text"], .ui.form .field.success input[type="file"], .ui.form .field.success input[type="url"] { color: #2c662d; background: #fcfff5; border-color: #a3c293; border-radius: ""; box-shadow: none; } .ui.form .field.success textarea:focus, .ui.form .field.success select:focus, .ui.form .field.success input:not([type]):focus, .ui.form .field.success input[type="color"]:focus, .ui.form .field.success input[type="date"]:focus, .ui.form .field.success input[type="email"]:focus, .ui.form .field.success input[type="month"]:focus, .ui.form .field.success input[type="number"]:focus, .ui.form .field.success input[type="password"]:focus, .ui.form .field.success input[type="search"]:focus, .ui.form .field.success input[type="tel"]:focus, .ui.form .field.success input[type="time"]:focus, .ui.form .field.success input[type="text"]:focus, .ui.form .field.success input[type="file"]:focus, .ui.form .field.success input[type="url"]:focus { background: #fcfff5; border-color: #a3c293; color: #2c662d; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.success select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ /* Autofilled */ .ui.form .success.success input:-webkit-autofill { box-shadow: 0 0 0 100px #f0fff0 inset !important; border-color: #bee0b3 !important; } /* Placeholder */ .ui.form .success ::-moz-placeholder { color: #8fcf90; } .ui.form .success .ui.dropdown > .default.text, .ui.form .success ::placeholder { color: #8fcf90; } .ui.form .success :focus::-moz-placeholder { color: #6cbf6d; } .ui.form .success .ui.dropdown > input:focus ~ .default.text, .ui.form .success :focus::placeholder { color: #6cbf6d; } .ui.form .success :focus:-ms-input-placeholder { color: #6cbf6d !important; } /*------------------ Dropdown State --------------------*/ .ui.form .fields.success .field .ui.dropdown, .ui.form .fields.success .field .ui.dropdown .item, .ui.form .field.success .ui.dropdown, .ui.form .field.success .ui.dropdown > .text, .ui.form .field.success .ui.dropdown .item { background: #fcfff5; color: #2c662d; } .ui.form .fields.success .field .ui.dropdown, .ui.form .field.success .ui.dropdown { border-color: #a3c293 !important; } .ui.form .fields.success .field .ui.dropdown:hover, .ui.form .field.success .ui.dropdown:hover { border-color: #a3c293 !important; } .ui.form .fields.success .field .ui.dropdown:hover .menu, .ui.form .field.success .ui.dropdown:hover .menu { border-color: #a3c293; } .ui.form .fields.success .field .ui.multiple.selection.dropdown > .label, .ui.form .field.success .ui.multiple.selection.dropdown > .label { background-color: #cceacc; color: #2c662d; } /* Hover */ .ui.form .fields.success .field .ui.dropdown .menu .item:hover, .ui.form .field.success .ui.dropdown .menu .item:hover { background-color: #e9fbe9; } /* Selected */ .ui.form .fields.success .field .ui.dropdown .menu .selected.item, .ui.form .field.success .ui.dropdown .menu .selected.item { background-color: #e9fbe9; } /* Active */ .ui.form .fields.success .field .ui.dropdown .menu .active.item, .ui.form .field.success .ui.dropdown .menu .active.item { background-color: #dafdce !important; } /*-------------------- Checkbox State ---------------------*/ .ui.inverted.form .fields.success .field label, .ui.inverted.form .success.field label { color: #b9d1ad; } @supports selector(:has(.f)) { .ui.inverted.form .fields:has(.success) > label { color: #b9d1ad; } } /* On Form */ .ui.form.warning .warning.message:not(:empty) { display: block; } .ui.form.warning .icon.warning.message:not(:empty) { display: flex; } /* On Field(s) */ .ui.form .fields.warning .warning.message:not(:empty), .ui.form .field.warning .warning.message:not(:empty) { display: block; } .ui.form .fields.warning .icon.warning.message:not(:empty), .ui.form .field.warning .icon.warning.message:not(:empty) { display: flex; } .ui.ui.form .fields.warning .field label, .ui.ui.form .fields.warning .field .ui.label:not(.corner), .ui.ui.form .field.warning label, .ui.ui.form .field.warning .ui.label:not(.corner), .ui.ui.form .fields.warning .field .input, .ui.ui.form .field.warning .input { color: #573a08; } @supports selector(:has(.f)) { .ui.form .fields:has(.warning) > label { color: #573a08; } } .ui.form .fields.warning .field .ui.label, .ui.form .field.warning .ui.label { background-color: #d7ccb5; } .ui.form .fields.warning .field textarea, .ui.form .fields.warning .field select, .ui.form .fields.warning .field input:not([type]), .ui.form .fields.warning .field input[type="color"], .ui.form .fields.warning .field input[type="date"], .ui.form .fields.warning .field input[type="email"], .ui.form .fields.warning .field input[type="month"], .ui.form .fields.warning .field input[type="number"], .ui.form .fields.warning .field input[type="password"], .ui.form .fields.warning .field input[type="search"], .ui.form .fields.warning .field input[type="tel"], .ui.form .fields.warning .field input[type="time"], .ui.form .fields.warning .field input[type="text"], .ui.form .fields.warning .field input[type="file"], .ui.form .fields.warning .field input[type="url"], .ui.form .field.warning textarea, .ui.form .field.warning select, .ui.form .field.warning input:not([type]), .ui.form .field.warning input[type="color"], .ui.form .field.warning input[type="date"], .ui.form .field.warning input[type="email"], .ui.form .field.warning input[type="month"], .ui.form .field.warning input[type="number"], .ui.form .field.warning input[type="password"], .ui.form .field.warning input[type="search"], .ui.form .field.warning input[type="tel"], .ui.form .field.warning input[type="time"], .ui.form .field.warning input[type="text"], .ui.form .field.warning input[type="file"], .ui.form .field.warning input[type="url"] { color: #573a08; background: #fffaf3; border-color: #c9ba9b; border-radius: ""; box-shadow: none; } .ui.form .field.warning textarea:focus, .ui.form .field.warning select:focus, .ui.form .field.warning input:not([type]):focus, .ui.form .field.warning input[type="color"]:focus, .ui.form .field.warning input[type="date"]:focus, .ui.form .field.warning input[type="email"]:focus, .ui.form .field.warning input[type="month"]:focus, .ui.form .field.warning input[type="number"]:focus, .ui.form .field.warning input[type="password"]:focus, .ui.form .field.warning input[type="search"]:focus, .ui.form .field.warning input[type="tel"]:focus, .ui.form .field.warning input[type="time"]:focus, .ui.form .field.warning input[type="text"]:focus, .ui.form .field.warning input[type="file"]:focus, .ui.form .field.warning input[type="url"]:focus { background: #fffaf3; border-color: #c9ba9b; color: #573a08; box-shadow: none; } /* Preserve Native Select Stylings */ .ui.form .field.warning select { -webkit-appearance: menulist-button; } /*------------------ Input State --------------------*/ /* Transparent */ /* Autofilled */ .ui.form .warning.warning input:-webkit-autofill { box-shadow: 0 0 0 100px #ffffe0 inset !important; border-color: #e0e0b3 !important; } /* Placeholder */ .ui.form .warning ::-moz-placeholder { color: #edad3e; } .ui.form .warning .ui.dropdown > .default.text, .ui.form .warning ::placeholder { color: #edad3e; } .ui.form .warning :focus::-moz-placeholder { color: #e39715; } .ui.form .warning .ui.dropdown > input:focus ~ .default.text, .ui.form .warning :focus::placeholder { color: #e39715; } .ui.form .warning :focus:-ms-input-placeholder { color: #e39715 !important; } /*------------------ Dropdown State --------------------*/ .ui.form .fields.warning .field .ui.dropdown, .ui.form .fields.warning .field .ui.dropdown .item, .ui.form .field.warning .ui.dropdown, .ui.form .field.warning .ui.dropdown > .text, .ui.form .field.warning .ui.dropdown .item { background: #fffaf3; color: #573a08; } .ui.form .fields.warning .field .ui.dropdown, .ui.form .field.warning .ui.dropdown { border-color: #c9ba9b !important; } .ui.form .fields.warning .field .ui.dropdown:hover, .ui.form .field.warning .ui.dropdown:hover { border-color: #c9ba9b !important; } .ui.form .fields.warning .field .ui.dropdown:hover .menu, .ui.form .field.warning .ui.dropdown:hover .menu { border-color: #c9ba9b; } .ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label, .ui.form .field.warning .ui.multiple.selection.dropdown > .label { background-color: #eaeacc; color: #573a08; } /* Hover */ .ui.form .fields.warning .field .ui.dropdown .menu .item:hover, .ui.form .field.warning .ui.dropdown .menu .item:hover { background-color: #fbfbe9; } /* Selected */ .ui.form .fields.warning .field .ui.dropdown .menu .selected.item, .ui.form .field.warning .ui.dropdown .menu .selected.item { background-color: #fbfbe9; } /* Active */ .ui.form .fields.warning .field .ui.dropdown .menu .active.item, .ui.form .field.warning .ui.dropdown .menu .active.item { background-color: #fdfdce !important; } /*-------------------- Checkbox State ---------------------*/ .ui.inverted.form .fields.warning .field label, .ui.inverted.form .warning.field label { color: #d7ccb5; } @supports selector(:has(.f)) { .ui.inverted.form .fields:has(.warning) > label { color: #d7ccb5; } } /* -------------------- Disabled --------------------- */ .ui.form .disabled.fields .field, .ui.form .disabled.field, .ui.form .field :disabled { pointer-events: none; opacity: 0.45; } .ui.form .field.disabled > label, .ui.form .fields.disabled > label { opacity: 0.45; } .ui.form .field.disabled :disabled { opacity: 1; } /* -------------- Loading --------------- */ .ui.loading.form { position: relative; cursor: default; pointer-events: none; } .ui.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.segments::before { border-radius: 0.26666667rem; } .ui.loading.form::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -1.5em 0 0 -1.5em; width: 3em; height: 3em; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: 101; } /******************************* Element Types *******************************/ /* -------------------- Required Field --------------------- */ .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after, .ui.form .required.fields.inline > label::after, .ui.form .required.field > label::after, .ui.form label.required::after { margin: -0.2em 0 0 0.2em; content: "*"; color: #db2828; } .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after, .ui.form .required.fields.inline > label::after, .ui.form .required.field > label::after, .ui.form label.required::after { display: inline-block; vertical-align: top; } .ui.ui.ui.ui.form .fields:not(.required) > label:empty::after, .ui.ui.ui.ui.form .fields:not(.grouped):not(.inline) > .field:not(.required) > label:empty::after { content: " "; display: inline-block; } .ui.ui.ui.ui.form .inline.fields .field:not(.required) > label:empty { display: none; } /******************************* Variations *******************************/ /* -------------------- Inverted Colors --------------------- */ .ui.inverted.form label, .ui.form .inverted.segment label, .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 { color: rgba(255, 255, 255, 0.9); } .ui.inverted.loading.form { color: #fff; } .ui.inverted.loading.form::before { background: rgba(0, 0, 0, 0.85); } /* Inverted Field */ .ui.inverted.form input:not([type]), .ui.inverted.form input[type="color"], .ui.inverted.form input[type="date"], .ui.inverted.form input[type="email"], .ui.inverted.form input[type="month"], .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"] { background: #fff; border-color: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.87); box-shadow: none; } /* -------------------- Field Groups --------------------- */ /* Grouped Vertically */ /* -------------------- Fields --------------------- */ /* Split fields */ .ui.form .fields { display: flex; flex-direction: row; margin: 0 -0.5em 1em; } .ui.form .fields > .field { flex: 0 1 auto; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .fields > .field:first-child { border-left: none; box-shadow: none; } /* Other Combinations */ .ui.form .two.fields > .fields, .ui.form .two.fields > .field { width: 50%; } .ui.form .three.fields > .fields, .ui.form .three.fields > .field { width: 33.33333333%; } .ui.form .four.fields > .fields, .ui.form .four.fields > .field { width: 25%; } .ui.form .five.fields > .fields, .ui.form .five.fields > .field { width: 20%; } .ui.form .six.fields > .fields, .ui.form .six.fields > .field { width: 16.66666667%; } .ui.form .seven.fields > .fields, .ui.form .seven.fields > .field { width: 14.28571429%; } .ui.form .eight.fields > .fields, .ui.form .eight.fields > .field { width: 12.5%; } .ui.form .ten.fields > .fields, .ui.form .ten.fields > .field { width: 10%; } /* Swap to full width on mobile */ @media only screen and (max-width: 767.98px) { .ui.form .fields { flex-wrap: wrap; margin-bottom: 0; } .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields, .ui.form:not(.unstackable) .fields:not(.unstackable) > .field { width: 100%; margin: 0 0 1em; } } /* Sizing Combinations */ .ui.form .fields .wide.field { width: 6.25%; padding-left: 0.5em; padding-right: 0.5em; } .ui.form .one.wide.field { width: 6.25%; } .ui.form .two.wide.field { width: 12.5%; } .ui.form .three.wide.field { width: 18.75%; } .ui.form .four.wide.field { width: 25%; } .ui.form .five.wide.field { width: 31.25%; } .ui.form .six.wide.field { width: 37.5%; } .ui.form .seven.wide.field { width: 43.75%; } .ui.form .eight.wide.field { width: 50%; } .ui.form .ten.wide.field { width: 62.5%; } .ui.form .eleven.wide.field { width: 68.75%; } .ui.form .twelve.wide.field { width: 75%; } .ui.form .thirteen.wide.field { width: 81.25%; } .ui.form .sixteen.wide.field { width: 100%; } /* -------------------- Equal Width --------------------- */ .ui[class*="equal width"].form .fields > .field, .ui.form [class*="equal width"].fields > .field { width: 100%; flex: 1 1 auto; } /* -------------------- Inline Fields --------------------- */ .ui.form .inline.fields { margin: 0 0 1em; align-items: center; } .ui.form .inline.fields .field { margin: 0; padding: 0 1em 0 0; } /* 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 { display: inline-block; width: auto; margin-top: 0; margin-bottom: 0; vertical-align: baseline; font-size: 0.93333333em; font-weight: bold; color: rgba(0, 0, 0, 0.87); text-transform: none; } /* Grouped Inline Label */ .ui.form .inline.fields > label { margin: 0.03571em 1em 0 0; } /* Inline Input */ .ui.form .inline.fields .field > input, .ui.form .inline.fields .field > select, .ui.form .inline.field > input, .ui.form .inline.field > select { display: inline-block; width: auto; margin-top: 0; margin-bottom: 0; vertical-align: middle; font-size: 1em; } .ui.form .inline.fields .field .calendar:not(.popup), .ui.form .inline.field .calendar:not(.popup) { display: inline-block; } .ui.form .inline.fields .field .calendar:not(.popup) > .input > input, .ui.form .inline.field .calendar:not(.popup) > .input > input { width: 13.11em; } /* Label */ .ui.form .inline.fields .field > :first-child, .ui.form .inline.field > :first-child { margin: 0 0.86666667em 0 0; } .ui.form .inline.fields .field > :only-child, .ui.form .inline.field > :only-child { margin: 0; } /* Wide */ .ui.form .inline.fields .wide.field { display: flex; align-items: center; } .ui.form .inline.fields .wide.field > input, .ui.form .inline.fields .wide.field > select { width: 100%; } /* -------------------- Sizes --------------------- */ .ui.form, .ui.form .field .dropdown, .ui.form .field .dropdown .menu > .item { font-size: 1rem; } .ui.mini.form, .ui.mini.form .field .dropdown, .ui.mini.form .field .dropdown .menu > .item { font-size: 0.8rem; } .ui.tiny.form, .ui.tiny.form .field .dropdown, .ui.tiny.form .field .dropdown .menu > .item { font-size: 0.86666667rem; } .ui.small.form, .ui.small.form .field .dropdown, .ui.small.form .field .dropdown .menu > .item { font-size: 0.93333333rem; } .ui.large.form, .ui.large.form .field .dropdown, .ui.large.form .field .dropdown .menu > .item { font-size: 1.13333333rem; } .ui.big.form, .ui.big.form .field .dropdown, .ui.big.form .field .dropdown .menu > .item { font-size: 1.26666667rem; } .ui.huge.form, .ui.huge.form .field .dropdown, .ui.huge.form .field .dropdown .menu > .item { font-size: 1.4rem; } .ui.massive.form, .ui.massive.form .field .dropdown, .ui.massive.form .field .dropdown .menu > .item { font-size: 1.73333333rem; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Grid * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Grid *******************************/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /* -------------- Relaxed --------------- */ /* -------------- Divided --------------- */ /* -------------- Celled --------------- */ /* -------------- Stackable --------------- */ /* -------------- Compact --------------- */ /* ------------------ Very Compact ------------------ */ /******************************* Legacy *******************************/ /* -------------- Page --------------- */ /* Legacy (DO NOT USE) */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Standard *******************************/ .ui.grid { display: flex; flex-flow: row wrap; align-items: stretch; padding: 0; } /* ---------------------- Remove Gutters ----------------------- */ .ui.grid { margin: -1rem -1rem; } .ui.relaxed.grid { margin-left: -1.5rem; margin-right: -1.5rem; } .ui[class*="very relaxed"].grid { margin-left: -2.5rem; margin-right: -2.5rem; } /* Preserve Rows Spacing on Consecutive Grids */ .ui.grid + .grid { margin-top: 1rem; } /* ------------------- Columns -------------------- */ /* Standard 16 column */ .ui.grid > .column:not(.row), .ui.grid > .row > .column { position: relative; display: inline-block; width: 6.25%; padding-left: 1rem; padding-right: 1rem; vertical-align: top; } .ui.grid > * { padding-left: 1rem; padding-right: 1rem; } /* ------------------- Rows -------------------- */ .ui.grid > .row { position: relative; display: flex; flex-flow: row wrap; justify-content: inherit; align-items: stretch; width: 100% !important; padding: 0; padding-top: 1rem; padding-bottom: 1rem; } /* ------------------- Columns -------------------- */ /* Vertical padding when no rows */ .ui.grid > .column:not(.row) { padding-top: 1rem; padding-bottom: 1rem; } .ui.grid > .row > .column { margin-top: 0; margin-bottom: 0; } /* ------------------- Content -------------------- */ .ui.grid > .row > img, .ui.grid > .row > .column > img { max-width: 100%; } /* ------------------- Loose Coupling -------------------- */ /* Collapse Margin on Consecutive Grid */ .ui.grid > .ui.grid:first-child { margin-top: 0; } .ui.grid > .ui.grid:last-child { margin-bottom: 0; } /* Segment inside Aligned Grid */ .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), .ui.aligned.grid .column > .segment:not(.compact):not(.attached) { width: 100%; } /* Align Dividers with Gutter */ .ui.grid .row + .ui.divider { flex-grow: 1; margin: 1rem 1rem; } .ui.grid .column + .ui.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 { box-shadow: none; } /******************************* Variations *******************************/ /* ----------------------- Page Grid ------------------------- */ @media only screen and (max-width: 767.98px) { .ui.page.grid { width: auto; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.page.grid { width: auto; margin-left: 0; margin-right: 0; padding-left: 2em; padding-right: 2em; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .ui.page.grid { width: auto; margin-left: 0; margin-right: 0; padding-left: 3%; padding-right: 3%; } } @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { .ui.page.grid { width: auto; margin-left: 0; margin-right: 0; padding-left: 15%; padding-right: 15%; } } @media only screen and (min-width: 1920px) { .ui.page.grid { width: auto; margin-left: 0; margin-right: 0; 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 { width: 100%; } /* Grid Based */ .ui[class*="one column"].grid > .row > .column, .ui[class*="one column"].grid > .column:not(.row) { width: 100%; } .ui[class*="two column"].grid > .row > .column, .ui[class*="two column"].grid > .column:not(.row) { width: 50%; } .ui[class*="three column"].grid > .row > .column, .ui[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) { width: 25%; } .ui[class*="five column"].grid > .row > .column, .ui[class*="five column"].grid > .column:not(.row) { width: 20%; } .ui[class*="six column"].grid > .row > .column, .ui[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) { width: 14.28571429%; } .ui[class*="eight column"].grid > .row > .column, .ui[class*="eight column"].grid > .column:not(.row) { width: 12.5%; } .ui[class*="ten column"].grid > .row > .column, .ui[class*="ten column"].grid > .column:not(.row) { width: 10%; } .ui[class*="eleven column"].grid > .row > .column, .ui[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) { width: 8.33333333%; } .ui[class*="thirteen column"].grid > .row > .column, .ui[class*="thirteen column"].grid > .column:not(.row) { width: 7.69230769%; } .ui[class*="sixteen column"].grid > .row > .column, .ui[class*="sixteen column"].grid > .column:not(.row) { width: 6.25%; } /* Row Based Overrides */ .ui.grid > [class*="one column"].row > .column { width: 100% !important; } .ui.grid > [class*="two column"].row > .column { width: 50% !important; } .ui.grid > [class*="three column"].row > .column { width: 33.33333333% !important; } .ui.grid > [class*="four column"].row > .column { width: 25% !important; } .ui.grid > [class*="five column"].row > .column { width: 20% !important; } .ui.grid > [class*="six column"].row > .column { width: 16.66666667% !important; } .ui.grid > [class*="seven column"].row > .column { width: 14.28571429% !important; } .ui.grid > [class*="eight column"].row > .column { width: 12.5% !important; } .ui.grid > [class*="ten column"].row > .column { width: 10% !important; } .ui.grid > [class*="eleven column"].row > .column { width: 9.09090909% !important; } .ui.grid > [class*="twelve column"].row > .column { width: 8.33333333% !important; } .ui.grid > [class*="thirteen column"].row > .column { width: 7.69230769% !important; } .ui.grid > [class*="sixteen column"].row > .column { width: 6.25% !important; } /* Celled Page */ /* ------------------- 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { width: 50% !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 { 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 { 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 { 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 { width: 81.25% !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 { width: 100% !important; } /* ---------------------- Width per Device ----------------------- */ /* Mobile Sizing Combinations */ @media only screen and (min-width: 320px) and (max-width: 767.98px) { .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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { width: 50% !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 { 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 { 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 { 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 { width: 81.25% !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 { width: 100% !important; } } /* Tablet Sizing Combinations */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { width: 50% !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 { 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 { 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 { 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 { width: 81.25% !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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { width: 50% !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 { 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 { 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 { 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 { width: 81.25% !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 { width: 100% !important; } } /* Large Monitor Sizing Combinations */ @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { .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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { width: 50% !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 { 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 { 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 { 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 { width: 81.25% !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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { width: 50% !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 { 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 { 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 { 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 { width: 81.25% !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 { width: 100% !important; } } /* ---------------------- Centered ----------------------- */ .ui.centered.grid, .ui.centered.grid > .row, .ui.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) { text-align: left; } .ui.grid > .centered.column, .ui.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 { 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 { padding-left: 2.5rem; padding-right: 2.5rem; } /* Coupling with UI Divider */ .ui.relaxed.grid .row + .ui.divider, .ui.grid .relaxed.row + .ui.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 { margin-left: 2.5rem; margin-right: 2.5rem; } /* ---------------------- Padded ----------------------- */ /* ---------------------- "Floated" ----------------------- */ .ui.grid [class*="left floated"].column { margin-right: auto; } .ui.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 { box-shadow: -1px 0 0 0 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 { margin-top: 1rem; margin-bottom: 1rem; padding-top: 0; padding-bottom: 0; } .ui[class*="vertically divided"].grid > .row { margin-top: 0; margin-bottom: 0; } /* 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 { box-shadow: none; } /* No space on top of first row */ .ui[class*="vertically divided"].grid > .row:first-child > .column { margin-top: 0; } /* Divided Row */ .ui.grid > .divided.row > .column { box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); } .ui.grid > .divided.row > .column:first-child { box-shadow: none; } /* Vertically Divided */ .ui[class*="vertically divided"].grid > .row { position: relative; } .ui[class*="vertically divided"].grid > .row::before { position: absolute; content: ""; top: 0; left: 0; width: calc(100% - 2rem); height: 1px; margin: 0 1rem; box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); } /* Padded Horizontally Divided */ /* First Row Vertically Divided */ .ui[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 { box-shadow: -1px 0 0 0 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 { box-shadow: none; } .ui.inverted[class*="vertically divided"].grid > .row::before { box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1); } /* Relaxed */ .ui.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 { margin-left: 2.5rem; margin-right: 2.5rem; width: calc(100% - 5rem); } /* ---------------------- Celled ----------------------- */ /* Internally Celled */ /* ---------------------- 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 { 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 { 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 { flex-direction: column; vertical-align: bottom; align-self: flex-end !important; } /* Stretched */ /* ---------------------- 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.ui.grid > [class*="left aligned"].column, .ui.ui.grid > .row > [class*="left aligned"].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.ui.grid > [class*="center aligned"].column, .ui.ui.grid > .row > [class*="center aligned"].column { text-align: center; align-self: inherit; } .ui[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.ui.grid > [class*="right aligned"].column, .ui.ui.grid > .row > [class*="right aligned"].column { text-align: right; align-self: inherit; } /* Justified */ /* ---------------------- Colored ----------------------- */ .ui.grid > .primary.row, .ui.grid > .primary.column, .ui.grid > .row > .primary.column { background-color: #0e3f47; color: #fff; } .ui.grid > .secondary.row, .ui.grid > .secondary.column, .ui.grid > .row > .secondary.column { background-color: #1b1c1d; color: #fff; } .ui.grid > .red.row, .ui.grid > .red.column, .ui.grid > .row > .red.column { background-color: #db2828; color: #fff; } .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column { background-color: #269eab; color: #fff; } .ui.grid > .teal.row, .ui.grid > .teal.column, .ui.grid > .row > .teal.column { background-color: #00b5ad; color: #fff; } .ui.grid > .blue.row, .ui.grid > .blue.column, .ui.grid > .row > .blue.column { background-color: #2185d0; color: #fff; } .ui.grid > .purple.row, .ui.grid > .purple.column, .ui.grid > .row > .purple.column { background-color: #a333c8; color: #fff; } .ui.grid > .grey.row, .ui.grid > .grey.column, .ui.grid > .row > .grey.column { background-color: #767676; color: #fff; } .ui.grid > .black.row, .ui.grid > .black.column, .ui.grid > .row > .black.column { background-color: #1b1c1d; color: #fff; } /* ---------------------- Equal Width ----------------------- */ .ui[class*="equal width"].grid > .column:not(.row), .ui[class*="equal width"].grid > .row > .column, .ui.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 { flex-grow: 0; } /* ---------------------- Reverse ----------------------- */ /* Mobile */ @media only screen and (max-width: 767.98px) { .ui[class*="mobile reversed"].grid, .ui[class*="mobile reversed"].grid > .row, .ui.grid > [class*="mobile reversed"].row { flex-direction: row-reverse; } .ui[class*="mobile vertically reversed"].grid, .ui.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 { box-shadow: -1px 0 0 0 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 { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before { box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before { box-shadow: none; } /* Celled Reversed */ } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui[class*="tablet reversed"].grid, .ui[class*="tablet reversed"].grid > .row, .ui.grid > [class*="tablet reversed"].row { flex-direction: row-reverse; } .ui[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 { box-shadow: -1px 0 0 0 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 { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before { box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before { box-shadow: none; } /* Celled Reversed */ } /* 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 { flex-direction: row-reverse; } .ui[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 { box-shadow: -1px 0 0 0 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 { box-shadow: none; } /* Vertically Divided Reversed */ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before { box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); } .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before { box-shadow: none; } /* Celled Reversed */ } /* ------------------- Doubling -------------------- */ /* Tablet Only */ /* Mobile Only */ /* ------------------- Stackable -------------------- */ @media only screen and (max-width: 767.98px) { body > .ui.stackable.grid, .ui:not(.segment):not(.grid) .ui.stackable.grid { width: auto; margin-left: 0; margin-right: 0; } .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.stackable.row > .column { width: 100% !important; margin: 0 !important; box-shadow: none !important; padding: 1rem 1rem; } .ui.stackable.grid:not(.vertically) > .row { margin: 0; padding: 0; } /* Coupling */ .ui.container > .ui.stackable.grid > .column, .ui.container > .ui.stackable.grid > .row > .column { padding-left: 0 !important; padding-right: 0 !important; } /* Don't pad inside segment or nested grid */ .ui.grid .ui.stackable.grid, .ui.segment:not(.vertical) .ui.stackable.page.grid { margin-left: -1rem; margin-right: -1rem; } /* Divided Stackable */ .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.divided.grid > .column:not(.row):first-child { border-top: none !important; } .ui.ui.inverted.stackable.divided.grid > .column:not(.row), .ui.ui.inverted.stackable.divided.grid > .row > .column { border-top: 1px solid rgba(255, 255, 255, 0.1); } .ui.stackable.divided:not(.vertically).grid > .column:not(.row), .ui.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.divided:not(.vertically).grid > .column:not(.row), .ui.stackable.divided:not(.vertically).grid > .row > .column { padding-left: 0 !important; padding-right: 0 !important; } } /* ---------------------- Only (Device) ----------------------- */ /* These include arbitrary class repetitions for forced specificity */ /* Mobile Only Hide */ @media only screen and (max-width: 767.98px) { .ui.ui.ui[class*="tablet only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="tablet only"].row:not(.mobile), .ui.ui.ui.grid > [class*="tablet only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.mobile) { display: none !important; } .ui.ui.ui[class*="computer only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="computer only"].row:not(.mobile), .ui.ui.ui.grid > [class*="computer only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="computer only"].column:not(.mobile) { display: none !important; } .ui.ui.ui[class*="large screen only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Tablet Only Hide */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.ui.ui[class*="mobile only"].grid:not(.tablet), .ui.ui.ui.grid > [class*="mobile only"].row:not(.tablet), .ui.ui.ui.grid > [class*="mobile only"].column:not(.tablet), .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.tablet) { display: none !important; } .ui.ui.ui[class*="computer only"].grid:not(.tablet), .ui.ui.ui.grid > [class*="computer only"].row:not(.tablet), .ui.ui.ui.grid > [class*="computer only"].column:not(.tablet), .ui.ui.ui.grid > .row > [class*="computer only"].column:not(.tablet) { display: none !important; } .ui.ui.ui[class*="large screen only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Computer Only Hide */ @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .ui.ui.ui[class*="mobile only"].grid:not(.computer), .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui.ui.ui[class*="tablet only"].grid:not(.computer), .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui.ui.ui[class*="large screen only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="large screen only"].row:not(.mobile), .ui.ui.ui.grid > [class*="large screen only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="large screen only"].column:not(.mobile) { display: none !important; } .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), .ui.ui.ui.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: 1919.98px) { .ui.ui.ui[class*="mobile only"].grid:not(.computer), .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui.ui.ui[class*="tablet only"].grid:not(.computer), .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } .ui.ui.ui[class*="widescreen only"].grid:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].row:not(.mobile), .ui.ui.ui.grid > [class*="widescreen only"].column:not(.mobile), .ui.ui.ui.grid > .row > [class*="widescreen only"].column:not(.mobile) { display: none !important; } } /* Widescreen Only Hide */ @media only screen and (min-width: 1920px) { .ui.ui.ui[class*="mobile only"].grid:not(.computer), .ui.ui.ui.grid > [class*="mobile only"].row:not(.computer), .ui.ui.ui.grid > [class*="mobile only"].column:not(.computer), .ui.ui.ui.grid > .row > [class*="mobile only"].column:not(.computer) { display: none !important; } .ui.ui.ui[class*="tablet only"].grid:not(.computer), .ui.ui.ui.grid > [class*="tablet only"].row:not(.computer), .ui.ui.ui.grid > [class*="tablet only"].column:not(.computer), .ui.ui.ui.grid > .row > [class*="tablet only"].column:not(.computer) { display: none !important; } } /* ----------------- Compact ----------------- */ /* Row */ /* Columns */ /* Relaxed + Celled */ /* ----------------- Very compact ----------------- */ /* Row */ /* Columns */ /* Relaxed + Celled */ .ui.grid .left.attached.column { padding-right: 0; } .ui.grid .right.attached.column { padding-left: 0; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Menu * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* has to be equal to @circularPadding from label.less */ /* Image Label */ /* Calculates as: @verticalLabel (from label.less) - @labelVerticalPadding (from here) */ /* Logic adopted from label.less */ /* 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 */ /* ------------------- Inverted dropdowns -------------------- */ /* Tabular */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Standard *******************************/ /* -------------- Menu --------------- */ .ui.menu { display: flex; margin: 1rem 0; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; background: #fff; font-weight: normal; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); border-radius: 0.26666667rem; min-height: 2.86666667em; } .ui.menu::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .ui.menu:first-child { margin-top: 0; } .ui.menu:last-child { margin-bottom: 0; } /* -------------- Sub-Menu --------------- */ .ui.menu .menu { margin: 0; } .ui.menu:not(.vertical) > .menu { display: flex; } /* -------------- Item --------------- */ .ui.menu:not(.vertical) .item { display: flex; align-items: center; } .ui.menu .item { position: relative; vertical-align: middle; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; -webkit-user-select: none; -moz-user-select: none; user-select: none; background: none; padding: 0.93333333em 1.13333333em; 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 { border-radius: 0.26666667rem 0 0 0.26666667rem; } /* Border */ .ui.menu .item::before { position: absolute; content: ""; top: 0; right: 0; 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 { -webkit-user-select: text; -moz-user-select: text; user-select: text; line-height: 1.3; } .ui.menu .item > p:first-child { margin-top: 0; } .ui.menu .item > p:last-child { margin-bottom: 0; } /* -------------- Icons --------------- */ .ui.menu .item > i.icon { opacity: 0.9; float: none; margin: 0 0.33333333em 0 0; } /* -------------- Button --------------- */ .ui.menu:not(.vertical) .item > .button { position: relative; top: 0; margin: -0.5em 0; padding-bottom: 0.8em; padding-top: 0.8em; font-size: 1em; } /* ---------------- Grid / Container ----------------- */ .ui.menu > .grid, .ui.menu > .container { display: flex; align-items: inherit; flex-direction: inherit; } /* -------------- Inputs --------------- */ .ui.menu .item > .input { width: 100%; } .ui.menu:not(.vertical) .item > .input { position: relative; top: 0; margin: -0.5em 0; } .ui.menu .item > .input input { font-size: 1em; padding-top: 0.53333333em; padding-bottom: 0.53333333em; } /* -------------- Header --------------- */ .ui.menu .header.item, .ui.vertical.menu .header.item { margin: 0; background: ""; text-transform: normal; font-weight: bold; } .ui.vertical.menu .item > .header:not(.ui) { margin: 0 0 0.5em; font-size: 1em; font-weight: bold; } /* -------------- Dropdowns --------------- */ /* Dropdown Icon */ .ui.menu .item > i.dropdown.icon { padding: 0; float: right; margin: 0 0 0 1em; } /* Menu */ .ui.menu .dropdown.item .menu { min-width: calc(100% - 1px); border-radius: 0 0 0.26666667rem 0.26666667rem; background: #fff; margin: 0 0 0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); } .ui.menu .dropdown.item:not(.column) .menu { flex-direction: column; } /* Menu Items */ .ui.menu .ui.dropdown .menu > .item { margin: 0; text-align: left; font-size: 1em !important; padding: 0.8em 1.13333333em !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 { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.95) !important; } .ui.menu .ui.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 { 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) { display: block; } .ui.menu .ui.dropdown .menu > .item > .icons, .ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { display: inline-block; font-size: 1em !important; float: none; margin: 0 0.75em 0 0 !important; } /* Secondary */ .ui.secondary.menu .dropdown.item > .menu, .ui.text.menu .dropdown.item > .menu { border-radius: 0.26666667rem; margin-top: 0.33333333em; } /* Pointing */ .ui.menu .pointing.dropdown.item .menu { margin-top: 0.75em; } /* Inverted */ .ui.inverted.menu .search.dropdown.item > .search, .ui.inverted.menu .search.dropdown.item > .text { color: rgba(255, 255, 255, 0.9); } /* Vertical */ .ui.vertical.menu .dropdown.item > i.icon { float: right; content: "\f0da"; margin-left: 1em; } .ui.vertical.menu .dropdown.item .menu { left: 100%; /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */ min-width: 0; min-width: -moz-max-content; min-width: max-content; margin: 0 0 0 0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); border-radius: 0 0.26666667rem 0.26666667rem 0.26666667rem; } .ui.vertical.menu .dropdown.item.upward .menu { bottom: 0; } .ui.vertical.menu .dropdown.item:not(.upward) .menu { top: 0; } .ui.vertical.menu .active.dropdown.item { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ui.vertical.menu .dropdown.active.item { box-shadow: none; } /* Evenly Divided */ .ui.item.menu .dropdown .menu .item { width: 100%; } /* -------------- Labels --------------- */ .ui.menu .item > .label:not(.floating) { margin-left: 1em; padding: 0.3em 0.8em; } .ui.vertical.menu .item > .label { margin-top: -0.15em; margin-bottom: -0.15em; padding: 0.3em 0.8em; } .ui.menu .item > .label { background: #999; color: #fff; } .ui.menu .item > .image.label img { margin: -0.2833em 0.8em -0.2833em -0.8em; height: 1.5666em; } /* -------------- Images --------------- */ .ui.menu .item > img:not(.ui) { display: inline-block; vertical-align: middle; margin: -0.3em 0; width: 2.5em; } .ui.vertical.menu .item > img:not(.ui):only-child { display: block; max-width: 100%; width: auto; } /******************************* Coupling *******************************/ /* -------------- List --------------- */ /* Menu divider shouldn't apply */ .ui.menu .list .item::before { background: none !important; } /* -------------- Sidebar --------------- */ /* Show vertical dividers below last */ .ui.vertical.sidebar.menu > .item:first-child::before { display: block !important; } .ui.vertical.sidebar.menu > .item::before { top: auto; bottom: 0; } /* -------------- Container --------------- */ @media only screen and (max-width: 767.98px) { .ui.menu > .ui.container { width: 100% !important; margin-left: 0 !important; margin-right: 0 !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 { border-left: 1px solid rgba(34, 36, 38, 0.1); } .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { border-right: 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 { 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 { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /* -------------- Active --------------- */ .ui.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 { opacity: 1; } /* -------------- Active Hover --------------- */ .ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); } /* -------------- Disabled --------------- */ .ui.ui.menu .item.disabled { cursor: default; background-color: transparent; color: rgba(40, 40, 40, 0.3); pointer-events: none; } /******************************* Types *******************************/ /* ------------------ Floated Menu / Item ------------------- */ /* Left Floated */ .ui.menu:not(.vertical) .left.item, .ui.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 { display: flex; margin-left: auto !important; } .ui.menu:not(.vertical) :not(.dropdown) > .left.menu, .ui.menu:not(.vertical) :not(.dropdown) > .right.menu { display: inherit; } /* Center */ .ui.menu:not(.vertical) .center.item, .ui.menu:not(.vertical) .center.menu { display: flex; margin-left: auto !important; margin-right: auto !important; } /* Swapped Borders */ .ui.menu .right.item::before, .ui.menu .right.menu > .item::before { right: auto; left: 0; } /* Remove Outer Borders */ .ui.menu .center.item:last-child::before, .ui.menu .center.menu > .item:last-child::before { display: none; } /* -------------- Vertical --------------- */ .ui.vertical.menu { display: block; flex-direction: column; background: #fff; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); } /* --- Item --- */ .ui.vertical.menu .item { display: block; background: none; border-top: none; border-right: none; } .ui.vertical.menu > .item:first-child { border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.vertical.menu > .item:last-child { border-radius: 0 0 0.26666667rem 0.26666667rem; } /* --- Label --- */ .ui.vertical.menu .item > .label { float: right; text-align: center; } /* --- Icon --- */ .ui.vertical.menu .item > i.icon, .ui.vertical.menu .item > i.icons { width: 1.18em; float: right; margin: 0 0 0 0.5em; } .ui.vertical.menu .item > .label + i.icon { float: none; margin: 0 0.5em 0 0; } /* --- Border --- */ .ui.vertical.menu .item::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 1px; background: rgba(34, 36, 38, 0.1); } .ui.vertical.menu .item:first-child::before { display: none !important; } /* --- Sub Menu --- */ .ui.vertical.menu .item > .menu { margin: 0.5em -1.13333333em 0; } .ui.vertical.menu .menu .item { background: none; padding: 0.5em 1.32222222em; font-size: 0.86666667em; color: rgba(0, 0, 0, 0.5); } .ui.vertical.menu .item .menu a.item:hover, .ui.vertical.menu .item .menu .link.item:hover { color: rgba(0, 0, 0, 0.85); } .ui.vertical.menu .menu .item::before { display: none; } /* Vertical Active */ .ui.vertical.menu .active.item { background: rgba(0, 0, 0, 0.05); border-radius: 0; box-shadow: none; } .ui.vertical.menu > .active.item:first-child { border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.vertical.menu > .active.item:last-child { border-radius: 0 0 0.26666667rem 0.26666667rem; } .ui.vertical.menu > .active.item:only-child { border-radius: 0.26666667rem; } .ui.vertical.menu .active.item .menu .active.item { border-left: none; } .ui.vertical.menu .item .menu .active.item { background-color: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); } /* -------------- Tabular --------------- */ .ui.tabular.menu { border-radius: 0; box-shadow: none !important; border: none; background: none transparent; border-bottom: 1px solid #d4d4d5; } .ui.tabular.fluid.menu { width: calc(100% + 2px) !important; } .ui.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.93333333em 1.4em; color: rgba(0, 0, 0, 0.87); } .ui.tabular.menu .item::before { display: none; } /* Hover */ .ui.tabular.menu .item:hover { background-color: transparent; color: rgba(0, 0, 0, 0.8); } /* Active */ .ui.tabular.menu .active.item { background: none #fff; 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.26666667rem 0.26666667rem 0 0 !important; } .ui.tabular.menu .active.item:hover { cursor: default; } /* Coupling with segment for attachment */ .ui.tabular.menu ~ .attached:not(.top).segment { border-top: none; margin-left: 0; margin-top: 0; margin-right: 0; width: 100%; } .top.attached.segment + .ui.bottom.tabular.menu { position: relative; width: calc(100% + 2px); left: -1px; } /* Bottom Vertical Tabular */ .ui.bottom.tabular.menu { background: none transparent; border-radius: 0; box-shadow: none !important; border-bottom: none; border-top: 1px solid #d4d4d5; } .ui.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 { background: none #fff; color: rgba(0, 0, 0, 0.95); border-color: #d4d4d5; margin: -1px 0 0 0; border-radius: 0 0 0.26666667rem 0.26666667rem !important; } /* Vertical Tabular (Left) */ .ui.vertical.tabular.menu { background: none transparent; border-radius: 0; box-shadow: none !important; border-bottom: none; border-right: 1px solid #d4d4d5; } .ui.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 { background: none #fff; color: rgba(0, 0, 0, 0.95); border-color: #d4d4d5; margin: 0 -1px 0 0; border-radius: 0.26666667rem 0 0 0.26666667rem !important; } /* Vertical Right Tabular */ .ui.vertical.right.tabular.menu { background: none transparent; border-radius: 0; box-shadow: none !important; border-bottom: none; border-right: none; border-left: 1px solid #d4d4d5; } .ui.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 { background: none #fff; color: rgba(0, 0, 0, 0.95); border-color: #d4d4d5; margin: 0 0 0 -1px; border-radius: 0 0.26666667rem 0.26666667rem 0 !important; } /* Dropdown */ .ui.tabular.menu .active.dropdown.item { margin-bottom: 0; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; border-bottom: none; } .ui.inverted.tabular.menu .active.item, .ui.inverted.tabular.menu .active.item:hover { background: none #1b1c1d; border-color: #555; } .ui.inverted.tabular.menu .item:not(.active):hover { color: #ffffff; background: transparent; cursor: pointer; } /* -------------- Pagination --------------- */ /* Active */ /* -------------- Secondary --------------- */ .ui.secondary.menu { background: none; margin-left: -0.33333333em; margin-right: -0.33333333em; border-radius: 0; border: none; box-shadow: none; } /* Item */ .ui.secondary.menu .item { align-self: center; box-shadow: none; border: none; padding: 0.8em 0.93333333em; margin: 0 0.33333333em; background: none; transition: color 0.1s ease; border-radius: 0.26666667rem; } /* No Divider */ .ui.secondary.menu .item::before { display: none !important; } /* Header */ .ui.secondary.menu .header.item { border-radius: 0; border-right: none; background: none transparent; } /* Image */ .ui.secondary.menu .item > img:not(.ui) { margin: 0; } /* Hover */ .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.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 { box-shadow: none; background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); border-radius: 0.26666667rem; } /* Active Hover */ .ui.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:not(.disabled), .ui.secondary.inverted.menu a.item:not(.disabled) { color: rgba(255, 255, 255, 0.7); } .ui.secondary.inverted.menu .dropdown.item:hover, .ui.secondary.inverted.menu .link.item:hover, .ui.secondary.inverted.menu a.item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .ui.secondary.inverted.menu .active.item { background: rgba(255, 255, 255, 0.15); color: #ffffff; } /* Fix item margins */ .ui.secondary.item.menu { margin-left: 0; margin-right: 0; } .ui.secondary.item.menu .item:last-child { margin-right: 0; } .ui.secondary.attached.menu { box-shadow: none; } /* --------------------- Secondary Vertical ----------------------- */ /* Sub Menu */ .ui.vertical.secondary.menu .item:not(.dropdown) > .menu { margin: 0 -0.93333333em; } .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { margin: 0; padding: 0.46666667em 1.32222222em; } .ui.secondary.vertical.menu > .item { border: none; margin: 0 0 0.33333333em; border-radius: 0.26666667rem !important; } .ui.secondary.vertical.menu > .header.item { border-radius: 0; } /* Sub Menu */ .ui.vertical.secondary.menu .item > .menu .item { background-color: transparent; } /* Inverted */ .ui.secondary.inverted.menu { background-color: transparent; } /* --------------------- Secondary Pointing ----------------------- */ .ui.secondary.pointing.menu { margin-left: 0; margin-right: 0; border-bottom: 2px solid rgba(34, 36, 38, 0.15); } .ui.secondary.pointing.menu .item { border-bottom: 2px solid transparent; border-radius: 0; align-self: flex-end; margin: 0 0 -2px; padding: 0.86666667em 1.13333333em; transition: color 0.1s ease; } .ui.secondary.pointing.menu .ui.dropdown .menu .item { border-bottom-width: 0; } .ui.secondary.pointing.menu .item > .label:not(.floating) { margin-top: -0.3em; margin-bottom: -0.3em; } .ui.secondary.pointing.menu .item > .circular.label { margin-top: -0.5em; margin-bottom: -0.5em; } /* Item Types */ .ui.secondary.pointing.menu .header.item { color: rgba(0, 0, 0, 0.85) !important; } .ui.secondary.pointing.menu .text.item { box-shadow: none !important; } .ui.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 { 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 { background-color: transparent; border-color: rgba(34, 36, 38, 0.15); } /* Active */ .ui.secondary.pointing.menu .active.item { background-color: transparent; box-shadow: none; border-color: currentColor; font-weight: bold; color: rgba(0, 0, 0, 0.95); } /* Active Hover */ .ui.secondary.pointing.menu .active.item:hover { border-color: currentColor; color: rgba(0, 0, 0, 0.95); } /* Active Dropdown */ .ui.secondary.pointing.menu .active.dropdown.item { border-color: transparent; } /* Vertical Pointing */ .ui.secondary.vertical.pointing.menu { border-bottom-width: 0; border-right: 2px solid rgba(34, 36, 38, 0.15); } .ui.secondary.vertical.pointing.menu .item { border-bottom: none; border-right: 2px solid transparent; border-radius: 0 !important; margin: 0 -2px 0 0; } /* Vertical Active */ .ui.secondary.vertical.pointing.menu .active.item { border-color: currentColor; } /* Inverted */ .ui.secondary.inverted.pointing.menu { border-color: rgba(255, 255, 255, 0.1); } .ui.secondary.inverted.pointing.menu .item:not(.disabled) { color: rgba(255, 255, 255, 0.9); } .ui.secondary.inverted.pointing.menu .header.item { color: #fff !important; } /* Hover */ .ui.secondary.inverted.pointing.menu .link.item:hover, .ui.secondary.inverted.pointing.menu a.item:hover { color: #ffffff; } /* Active */ .ui.ui.secondary.inverted.pointing.menu .active.item { border-color: #fff; color: #ffffff; background-color: transparent; } /* -------------- Text Menu --------------- */ .ui.text.menu { background: none transparent; border-radius: 0; box-shadow: none; border: none; margin: 1em -0.46666667em; } .ui.text.menu .item { border-radius: 0; box-shadow: none; align-self: center; margin: 0; padding: 0.33333333em 0.46666667em; 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 { display: none !important; } /* Header */ .ui.text.menu .header.item { background-color: transparent; opacity: 1; color: rgba(0, 0, 0, 0.85); font-size: 0.93333333em; text-transform: uppercase; font-weight: bold; } /* Image */ .ui.text.menu .item > img:not(.ui) { margin: 0; } /* --- fluid text --- */ .ui.text.item.menu .item { margin: 0; } /* --- vertical text --- */ .ui.vertical.text.menu { margin: 1em 0; } .ui.vertical.text.menu:first-child { margin-top: 0; } .ui.vertical.text.menu:last-child { margin-bottom: 0; } .ui.vertical.text.menu .item { margin: 0.53333333em 0; padding-left: 0; padding-right: 0; } .ui.vertical.text.menu .item > i.icon { float: none; margin: 0 0.33333333em 0 0; } .ui.vertical.text.menu .header.item { margin: 0.53333333em 0 0.66666667em; } /* Vertical Sub Menu */ .ui.vertical.text.menu .item:not(.dropdown) > .menu { margin: 0; } .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { margin: 0; padding: 0.46666667em 0; } /* --- hover --- */ .ui.text.menu .item:hover { opacity: 1; background-color: transparent; } /* --- active --- */ .ui.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 { background-color: transparent; } /* Disable Bariations */ .ui.text.pointing.menu .active.item::after { box-shadow: none; } .ui.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 { background-color: transparent; } /* Fluid */ .ui.fluid.text.menu { margin-left: 0; margin-right: 0; } /* -------------- Icon Only --------------- */ /* Vertical Menu */ .ui.vertical.icon.menu { display: inline-block; width: auto; } /* Item */ .ui.icon.menu .item { height: auto; text-align: center; color: #1b1c1d; } /* Icon */ .ui.icon.menu .item > i.icon:not(.dropdown) { margin: 0; opacity: 1; } /* Icon Glyph */ .ui.icon.menu i.icon::before { opacity: 1; } /* (x) Item Icon */ .ui.menu .icon.item > i.icon { width: auto; margin: 0 auto; } /* Vertical Icon */ .ui.vertical.icon.menu .item > i.icon:not(.dropdown) { display: block; opacity: 1; margin: 0 auto; float: none; } /* Inverted */ .ui.inverted.icon.menu .item { color: #fff; } /* -------------- Labeled Icon --------------- */ /* Menu */ .ui.labeled.icon.menu { text-align: center; } /* Item */ .ui.labeled.icon.menu .item { min-width: 6em; flex-direction: column; } /* Icon */ .ui.labeled.icon.menu > .right.menu > .item > i.icon:not(.dropdown), .ui.labeled.icon.menu > .item > i.icon:not(.dropdown) { height: 1em; display: block; font-size: 1.73333333em !important; margin: 0 auto 0.5rem !important; } /* Fluid */ .ui.fluid.labeled.icon.menu > .item { min-width: 0; } /******************************* Variations *******************************/ /* -------------- Stackable --------------- */ @media only screen and (max-width: 767.98px) { .ui.stackable.menu { flex-direction: column; } .ui.stackable.menu.pointing .active.item::after { display: none; } .ui.stackable.menu .item { width: 100% !important; } .ui.stackable.menu .item::before { position: absolute; content: ""; top: auto; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(34, 36, 38, 0.1); } .ui.stackable.menu .left.menu, .ui.stackable.menu .left.item { margin-right: 0 !important; } .ui.stackable.menu .right.menu, .ui.stackable.menu .right.item { margin-left: 0 !important; } .ui.stackable.menu .center.menu, .ui.stackable.menu .center.item { margin-left: 0 !important; margin-right: 0 !important; } .ui.stackable.menu .right.menu, .ui.stackable.menu .center.menu, .ui.stackable.menu .left.menu { flex-direction: column; } } /* -------------- Colors --------------- */ .ui.ui.ui.menu .primary.active.item, .ui.ui.primary.menu .active.item:hover, .ui.ui.primary.menu .active.item { color: #0e3f47; } .ui.ui.ui.menu .red.active.item, .ui.ui.red.menu .active.item:hover, .ui.ui.red.menu .active.item { color: #db2828; } .ui.ui.ui.menu .green.active.item, .ui.ui.green.menu .active.item:hover, .ui.ui.green.menu .active.item { color: #269eab; } .ui.ui.ui.menu .teal.active.item, .ui.ui.teal.menu .active.item:hover, .ui.ui.teal.menu .active.item { color: #00b5ad; } .ui.ui.ui.menu .blue.active.item, .ui.ui.blue.menu .active.item:hover, .ui.ui.blue.menu .active.item { color: #2185d0; } .ui.ui.ui.menu .purple.active.item, .ui.ui.purple.menu .active.item:hover, .ui.ui.purple.menu .active.item { color: #a333c8; } .ui.ui.ui.menu .grey.active.item, .ui.ui.grey.menu .active.item:hover, .ui.ui.grey.menu .active.item { color: #767676; } .ui.ui.ui.menu .black.active.item, .ui.ui.black.menu .active.item:hover, .ui.ui.black.menu .active.item { color: #1b1c1d; } /* -------------- Inverted --------------- */ .ui.inverted.menu { border: 0 solid transparent; background: #1b1c1d; box-shadow: none; } /* Menu Item */ .ui.inverted.menu .item, .ui.inverted.menu .item > a:not(.ui) { background: transparent; color: rgba(255, 255, 255, 0.9); } .ui.inverted.menu .item.menu { background: transparent; } /* --- Border --- */ .ui.inverted.menu .item::before { background: rgba(255, 255, 255, 0.08); } .ui.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) { color: rgba(255, 255, 255, 0.5); } /* Header */ .ui.inverted.menu .header.item { margin: 0; background: transparent; box-shadow: none; } /* Disabled */ .ui.ui.inverted.menu .item.disabled { 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 { 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 { background: transparent; color: #ffffff; } /* --- Pressed --- */ .ui.inverted.menu a.item:active, .ui.inverted.menu .link.item:active { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* --- Active --- */ .ui.inverted.menu .active.item { background: #3d3e3f; color: #ffffff !important; } .ui.inverted.vertical.menu .item .menu .active.item { background: transparent; color: #fff; } .ui.inverted.pointing.menu .active.item::after { background: #3d3e3f; margin: 0 !important; box-shadow: none !important; border: none !important; } /* --- Active Hover --- */ .ui.inverted.menu .active.item:hover { background: #3d3e3f; color: #fff !important; } .ui.inverted.pointing.menu .active.item:hover::after { background: #3d3e3f; } /* -------------- Floated --------------- */ .ui.floated.menu { float: left; margin: 0 0.5rem 0 0; } .ui.floated.menu .item:last-child::before { display: none; } .ui.right.floated.menu { float: right; margin: 0 0 0 0.5rem; } .ui.center.aligned.menu:not(.fluid), .ui.centered.menu:not(.fluid) { display: inline-flex; transform: translateX(-50%); margin-left: 50%; } .ui.center.aligned.menu .item, .ui.centered.menu .item { flex: 1 0 auto; justify-content: center; } /* -------------- Inverted --------------- */ .ui.ui.ui.inverted.menu .primary.active.item, .ui.ui.inverted.primary.menu { background-color: #0e3f47; } .ui.inverted.primary.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.primary.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.primary.menu .active.item { background-color: #082e34; } .ui.ui.ui.inverted.menu .red.active.item, .ui.ui.inverted.red.menu { background-color: #db2828; } .ui.inverted.red.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.red.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.red.menu .active.item { background-color: #d01919; } .ui.ui.ui.inverted.menu .green.active.item, .ui.ui.inverted.green.menu { background-color: #269eab; } .ui.inverted.green.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.green.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.green.menu .active.item { background-color: #1c8f9c; } .ui.ui.ui.inverted.menu .teal.active.item, .ui.ui.inverted.teal.menu { background-color: #00b5ad; } .ui.inverted.teal.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.teal.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.teal.menu .active.item { background-color: #009c95; } .ui.ui.ui.inverted.menu .blue.active.item, .ui.ui.inverted.blue.menu { background-color: #2185d0; } .ui.inverted.blue.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.blue.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.blue.menu .active.item { background-color: #1678c2; } .ui.ui.ui.inverted.menu .purple.active.item, .ui.ui.inverted.purple.menu { background-color: #a333c8; } .ui.inverted.purple.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.purple.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.purple.menu .active.item { background-color: #9627ba; } .ui.ui.ui.inverted.menu .grey.active.item, .ui.ui.inverted.grey.menu { background-color: #767676; } .ui.inverted.grey.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.grey.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.grey.menu .active.item { background-color: #838383; } .ui.ui.ui.inverted.menu .black.active.item, .ui.ui.inverted.black.menu { background-color: #1b1c1d; } .ui.inverted.black.menu .item::before { background-color: rgba(34, 36, 38, 0.1); } .ui.ui.inverted.black.menu .active.item { background-color: rgba(0, 0, 0, 0.1); } .ui.inverted.pointing.black.menu .active.item { background-color: #27292a; } .ui.ui.ui.inverted.pointing.menu .active.item::after { background-color: inherit; } /* -------------- Fitted --------------- */ .ui.fitted.menu .item, .ui.fitted.menu .item .menu .item, .ui.menu .fitted.item { padding: 0; } .ui.horizontally.fitted.menu .item, .ui.horizontally.fitted.menu .item .menu .item, .ui.menu .horizontally.fitted.item { padding-top: 0.93333333em; padding-bottom: 0.93333333em; } /* -------------- Borderless --------------- */ /* ------------------- Compact -------------------- */ /* ------------------- Fluid -------------------- */ .ui.menu.fluid, .ui.vertical.menu.fluid { width: 100% !important; } /* ------------------- Evenly Sized -------------------- */ .ui[class*="equal width"].menu > .item { flex: 1; } .ui[class*="equal width"].menu > .item, .ui.item.menu, .ui.item.menu .item { width: 100%; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center; justify-content: center; } .ui.attached[class*="equal width"].menu:not(.tabular), .ui.attached.item.menu:not(.tabular) { margin: 0 -1px !important; } .ui[class*="equal width"].menu > .item:last-child::before, .ui.item.menu .item:last-child::before { display: none; } .ui.menu.two.item .item { width: 50%; } .ui.menu.three.item .item { width: 33.333%; } .ui.menu.four.item .item { width: 25%; } .ui.menu.five.item .item { width: 20%; } .ui.menu.six.item .item { width: 16.666%; } .ui.menu.seven.item .item { width: 14.285%; } .ui.menu.eight.item .item { width: 12.5%; } .ui.menu.ten.item .item { width: 10%; } .ui.menu.eleven.item .item { width: 9.09%; } .ui.menu.twelve.item .item { width: 8.333%; } /* -------------- Fixed --------------- */ .ui.menu.fixed { position: fixed; z-index: 101; margin: 0; width: 100%; } .ui.menu.fixed, .ui.menu.fixed .item:first-child, .ui.menu.fixed .item:last-child { border-radius: 0 !important; } .ui.fixed.menu, .ui[class*="top fixed"].menu { top: 0; left: 0; right: auto; bottom: auto; } .ui[class*="top fixed"].menu { border-top: none; border-left: none; border-right: none; } .ui[class*="right fixed"].menu { border-top: none; border-bottom: none; border-right: none; top: 0; right: 0; left: auto; bottom: auto; width: auto; height: 100%; } .ui[class*="bottom fixed"].menu { border-bottom: none; border-left: none; border-right: none; bottom: 0; left: 0; top: auto; right: auto; } .ui[class*="left fixed"].menu { border-top: none; border-bottom: none; border-left: none; top: 0; left: 0; right: auto; bottom: auto; width: auto; height: 100%; } /* Coupling with Grid */ .ui.fixed.menu + .ui.grid { padding-top: 2.75rem; } /* ------------------- Pointing -------------------- */ .ui.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 0 0; width: 0.53333333em; height: 0.53333333em; 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 { position: absolute; top: 50%; right: 0; bottom: auto; left: auto; transform: translateX(50%) translateY(-50%) rotate(45deg); margin: 0 -0.5px 0 0; border: none; border-top: 1px solid #d4d4d5; border-right: 1px solid #d4d4d5; } .ui.pointing.menu .ui.dropdown .menu .item::after, .ui.vertical.pointing.menu .ui.dropdown .menu .item::after { display: none; } /* Active */ .ui.pointing.menu .active.item::after { visibility: visible; } .ui.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 { display: none; } /* Colors */ .ui.pointing.menu .active.item:hover::after { background-color: #f2f2f2; } .ui.pointing.menu .active.item::after { background-color: #f2f2f2; } .ui.pointing.menu .active.item:hover::after { background-color: #f2f2f2; } .ui.vertical.pointing.menu .active.item:hover::after { background-color: #f2f2f2; } .ui.vertical.pointing.menu .active.item::after { background-color: #f2f2f2; } .ui.vertical.pointing.menu .menu .active.item::after { background-color: #fff; } @media only screen and (max-width: 767.98px) { .ui.stackable.grid .ui.fluid.vertical.pointing.menu .active.item::after { display: none; } } .ui.inverted.pointing.menu .primary.active.item::after { background-color: #0e3f47; } .ui.inverted.pointing.menu .secondary.active.item::after { background-color: #1b1c1d; } .ui.inverted.pointing.menu .red.active.item::after { background-color: #db2828; } .ui.inverted.pointing.menu .green.active.item::after { background-color: #269eab; } .ui.inverted.pointing.menu .teal.active.item::after { background-color: #00b5ad; } .ui.inverted.pointing.menu .blue.active.item::after { background-color: #2185d0; } .ui.inverted.pointing.menu .purple.active.item::after { background-color: #a333c8; } .ui.inverted.pointing.menu .grey.active.item::after { background-color: #767676; } .ui.inverted.pointing.menu .black.active.item::after { background-color: #1b1c1d; } /* -------------- Attached --------------- */ /* Middle */ .ui.attached.menu { top: 0; bottom: 0; border-radius: 0; margin: 0 -1px; width: calc(100% + 2px); max-width: calc(100% + 2px); box-shadow: none; } .ui.attached + .ui.attached.menu:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].menu { bottom: 0; margin-bottom: 0; top: 0; margin-top: 1rem; border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.menu[class*="top attached"]:first-child { margin-top: 0; } /* Bottom */ .ui[class*="bottom attached"].menu { bottom: 0; margin-top: 0; top: 0; margin-bottom: 1rem; box-shadow: none; border-radius: 0 0 0.26666667rem 0.26666667rem; } .ui[class*="bottom attached"].menu:last-child { margin-bottom: 0; } /* Attached Menu Item */ .ui.top.attached.menu > .item:first-child { border-radius: 0.26666667rem 0 0 0; } .ui.bottom.attached.menu > .item:first-child { border-radius: 0 0 0 0.26666667rem; } /* Tabular Attached */ .ui.attached.menu:not(.tabular):not(.text) { border: 1px solid #d4d4d5; } .ui.attached.inverted.menu { border: none; } .ui[class*="top attached"].inverted.tabular.menu { border-bottom: 1px solid #555; } .ui.attached.tabular.menu { margin-left: 0; margin-right: 0; width: 100%; } .ui.wrapped.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item:first-child { border-bottom-left-radius: 0; } .ui.wrapped.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item:last-child { border-top-right-radius: 0; } /* -------------- Sizes --------------- */ .ui.menu { font-size: 1rem; } .ui.vertical.menu { width: 15rem; } .ui.mini.menu, .ui.mini.menu .dropdown, .ui.mini.menu .dropdown .menu > .item { font-size: 0.73333333rem; } .ui.mini.vertical.menu:not(.icon) { width: 9rem; } .ui.tiny.menu, .ui.tiny.menu .dropdown, .ui.tiny.menu .dropdown .menu > .item { font-size: 0.8rem; } .ui.tiny.vertical.menu:not(.icon) { width: 11rem; } .ui.small.menu, .ui.small.menu .dropdown, .ui.small.menu .dropdown .menu > .item { font-size: 0.86666667rem; } .ui.small.vertical.menu:not(.icon) { width: 13rem; } .ui.large.menu, .ui.large.menu .dropdown, .ui.large.menu .dropdown .menu > .item { font-size: 1rem; } .ui.large.vertical.menu:not(.icon) { width: 18rem; } .ui.big.menu, .ui.big.menu .dropdown, .ui.big.menu .dropdown .menu > .item { font-size: 1.06666667rem; } .ui.big.vertical.menu:not(.icon) { width: 20rem; } .ui.huge.menu, .ui.huge.menu .dropdown, .ui.huge.menu .dropdown .menu > .item { font-size: 1.13333333rem; } .ui.huge.vertical.menu:not(.icon) { width: 22rem; } .ui.massive.menu, .ui.massive.menu .dropdown, .ui.massive.menu .dropdown .menu > .item { font-size: 1.2rem; } .ui.massive.vertical.menu:not(.icon) { width: 25rem; } /* ------------------- Inverted dropdowns -------------------- */ .ui.menu .ui.inverted.inverted.dropdown.item .menu { background: #1b1c1d; box-shadow: none; } .ui.menu .ui.inverted.dropdown .menu > .item { color: rgba(255, 255, 255, 0.8) !important; } .ui.menu .ui.inverted.dropdown .menu > .active.item { background: transparent !important; color: rgba(255, 255, 255, 0.8) !important; } .ui.menu .ui.inverted.dropdown .menu > .item:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.8) !important; } .ui.menu .ui.inverted.dropdown .menu > .selected.item { background: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.8) !important; } /* Vertical */ .ui.vertical.menu .inverted.dropdown.item .menu { box-shadow: none; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Message * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Message *******************************/ /* ------------------- Elements -------------------- */ /* Header */ /* Paragraph */ /* List */ /* Icon */ /* Close Icon */ /* ------------------- Types -------------------- */ /* Icon Message */ /* Attached */ /* Floating */ /* Colors */ /* Warning / Positive / Negative / Info */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Message *******************************/ .ui.message { position: relative; min-height: 1em; margin: 1em 0; background: #f8f8f9; padding: 1em 1.5em; line-height: 1.7; 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.26666667rem; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.message:first-child { margin-top: 0; } .ui.message:last-child { margin-bottom: 0; } /* -------------- Content --------------- */ /* Header */ .ui.message .header { display: block; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; font-weight: bold; margin: -0.14285714em 0 0 0; } /* Default font size */ .ui.message .header:not(.ui) { font-size: 1.13333333em; } /* Paragraph */ .ui.message p { opacity: 0.85; margin: 0.75em 0; } .ui.message p:first-child { margin-top: 0; } .ui.message p:last-child { margin-bottom: 0; } .ui.message .header + p { margin-top: 0.25em; } /* List */ .ui.message .list:not(.ui) { text-align: left; padding: 0; opacity: 0.85; list-style-position: inside; margin: 0.5em 0 0; } .ui.message .list:not(.ui):first-child { margin-top: 0; } .ui.message .list:not(.ui):last-child { margin-bottom: 0; } .ui.message .list:not(.ui) li { position: relative; list-style-type: none; margin: 0 0 0.3em 1em; padding: 0; } .ui.message .list:not(.ui) li::before { position: absolute; content: "•"; left: -1em; height: 100%; vertical-align: baseline; } .ui.message .list:not(.ui) li:last-child { margin-bottom: 0; } /* Icon */ .ui.icon.message > .icons, .ui.icon.message > i.icon { margin-right: 0.6em; } .ui.icon.message > .icons:last-child, .ui.icon.message > i.icon:last-child { margin: 0 0 0 0.6em; } /* Close Icon */ .ui.message > .close.icon { cursor: pointer; position: absolute; margin: 0; top: 0.65em; right: 0.5em; opacity: 0.7; transition: opacity 0.1s ease; } .ui.message > .close.icon:hover { opacity: 1; } /* First / Last Element */ .ui.message > :first-child { margin-top: 0; } .ui.message > :last-child { margin-bottom: 0; } /******************************* Coupling *******************************/ .ui.dropdown .menu > .message { margin: 0 -1px; } /******************************* States *******************************/ /* -------------- Visible --------------- */ .ui.visible.visible.visible.visible.message { display: block; } .ui.icon.visible.visible.visible.visible.message { display: flex; } /* -------------- Hidden --------------- */ .ui.hidden.hidden.hidden.hidden.message { display: none; } /******************************* Variations *******************************/ .ui.centered.message, .ui.center.aligned.message { text-align: center; justify-content: center; } .ui.centered.message > .content, .ui.center.aligned.message > .content { flex: 0 0 auto; } .ui.right.aligned.message { text-align: right; } /* -------------- Compact --------------- */ /* -------------- Attached --------------- */ .ui.attached.message { margin-bottom: -1px; border-radius: 0.26666667rem 0.26666667rem 0 0; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; margin-left: -1px; margin-right: -1px; } .ui.attached + .ui.attached.message:not(.top):not(.bottom) { margin-top: -1px; border-radius: 0; } .ui.bottom.attached.message { margin-top: -1px; border-radius: 0 0 0.26666667rem 0.26666667rem; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15); } .ui.bottom.attached.message:not(:last-child) { margin-bottom: 1em; } .ui.attached.icon.message { width: auto; } /* -------------- Icon --------------- */ .ui.icon.message { display: flex; width: 100%; align-items: center; } .ui.icon.message > .icons, .ui.icon.message > i.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 { display: block; flex: 1 1 auto; vertical-align: middle; } .ui.icon.message > .icons + .content, .ui.icon.message > i.icon:not(.close) + .content { padding-left: 0; } .ui.icon.message > i.circular { width: 1em; } /* -------------- Floating --------------- */ /* -------------- Colors --------------- */ /* -------------- Types --------------- */ /* Colors */ .ui.positive.message { background-color: #fcfff5; color: #2c662d; } .ui.positive.message, .ui.attached.positive.message { box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.positive.message .header { color: #1a531b; } .ui.inverted.positive.message, .ui.inverted.positive.message .header { color: #a3c293; } .ui.negative.message { background-color: #fff6f6; color: #9f3a38; } .ui.negative.message, .ui.attached.negative.message { box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.negative.message .header { color: #912d2b; } .ui.inverted.negative.message, .ui.inverted.negative.message .header { color: #e0b4b4; } .ui.error.message { background-color: #fff6f6; color: #9f3a38; } .ui.error.message, .ui.attached.error.message { box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.error.message .header { color: #912d2b; } .ui.inverted.error.message, .ui.inverted.error.message .header { color: #ecd1d1; } .ui.info.message { background-color: #f8ffff; color: #276f86; } .ui.info.message, .ui.attached.info.message { box-shadow: 0 0 0 1px #a9d5de inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.info.message .header { color: #0e566c; } .ui.inverted.info.message, .ui.inverted.info.message .header { color: #c6e3e9; } .ui.success.message { background-color: #fcfff5; color: #2c662d; } .ui.success.message, .ui.attached.success.message { box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.success.message .header { color: #1a531b; } .ui.inverted.success.message, .ui.inverted.success.message .header { color: #b9d1ad; } .ui.warning.message { background-color: #fffaf3; color: #573a08; } .ui.warning.message, .ui.attached.warning.message { box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.warning.message .header { color: #794b02; } .ui.inverted.warning.message, .ui.inverted.warning.message .header { color: #d7ccb5; } .ui.primary.message { background-color: #dff0ff; color: rgba(255, 255, 255, 0.9); } .ui.primary.message, .ui.attached.primary.message { box-shadow: 0 0 0 1px #0e3f47 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.primary.message .header { color: rgba(242, 242, 242, 0.9); } .ui.secondary.message { background-color: #f4f4f4; color: rgba(255, 255, 255, 0.9); } .ui.secondary.message, .ui.attached.secondary.message { box-shadow: 0 0 0 1px #1b1c1d inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.secondary.message .header { color: rgba(242, 242, 242, 0.9); } .ui.red.message { background-color: #ffe8e6; color: #db2828; } .ui.red.message, .ui.attached.red.message { box-shadow: 0 0 0 1px #db2828 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.red.message .header { color: #c82121; } .ui.green.message { background-color: #e5f9e7; color: #1ebc30; } .ui.green.message, .ui.attached.green.message { box-shadow: 0 0 0 1px #1ebc30 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.green.message .header { color: #1aa62a; } .ui.teal.message { background-color: #e1f7f7; color: #10a3a3; } .ui.teal.message, .ui.attached.teal.message { box-shadow: 0 0 0 1px #10a3a3 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.teal.message .header { color: #0e8c8c; } .ui.blue.message { background-color: #dff0ff; color: #2185d0; } .ui.blue.message, .ui.attached.blue.message { box-shadow: 0 0 0 1px #2185d0 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.blue.message .header { color: #1e77ba; } .ui.purple.message { background-color: #f6e7ff; color: #a333c8; } .ui.purple.message, .ui.attached.purple.message { box-shadow: 0 0 0 1px #a333c8 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.purple.message .header { color: #922eb4; } .ui.grey.message { background-color: #f4f4f4; color: #767676; } .ui.grey.message, .ui.attached.grey.message { box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0); } .ui.grey.message .header { color: #696969; } .ui.black.message { background-color: #1b1c1d; color: rgba(255, 255, 255, 0.9); } .ui.black.message .header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.message { background-color: #1b1c1d; color: rgba(255, 255, 255, 0.9); } /* -------------- Sizes --------------- */ .ui.message { font-size: 1em; } .ui.mini.message { font-size: 0.8em; } .ui.tiny.message { font-size: 0.86666667em; } .ui.small.message { font-size: 0.93333333em; } .ui.large.message { font-size: 1.13333333em; } .ui.big.message { font-size: 1.26666667em; } .ui.huge.message { font-size: 1.4em; } .ui.massive.message { font-size: 1.73333333em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Table * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* Scrolling */ /* Stuck */ /* Sizes */ /* Resizable */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Table *******************************/ /* Prototype */ .ui.table { width: 100%; background: #fff; margin: 1em 0; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; border-radius: 0.26666667rem; text-align: left; vertical-align: middle; color: rgba(0, 0, 0, 0.87); border-collapse: separate; border-spacing: 0; } .ui.table:first-child { margin-top: 0; } .ui.table:last-child { margin-bottom: 0; } .ui.table > thead, .ui.table > tbody { text-align: inherit; vertical-align: inherit; } /******************************* Parts *******************************/ /* Table Content */ .ui.table th, .ui.table td { transition: background 0.1s ease, color 0.1s ease; } /* Rowspan helper class */ /* Headers */ .ui.table > thead { box-shadow: none; } .ui.table > thead > tr > th { cursor: auto; background: #f9fafb; text-align: inherit; color: rgba(0, 0, 0, 0.87); padding: 0.93333333em 0.8em; 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 { border-left: none; } .ui.table > thead > tr:first-child > th:first-child { border-radius: 0.26666667rem 0 0 0; } .ui.table > thead > tr:first-child > th:last-child { border-radius: 0 0.26666667rem 0 0; } .ui.table > thead > tr:first-child > th:only-child { border-radius: 0.26666667rem 0.26666667rem 0 0; } /* Footer */ /* Table Row */ .ui.table > tr > td, .ui.table > tbody > tr > td { border-top: 1px solid rgba(34, 36, 38, 0.1); } .ui.table > tr:first-child > td, .ui.table > tbody > tr:first-child > td { border-top: none; } /* Repeated tbody */ .ui.table > tbody + tbody tr:first-child > td { border-top: 1px solid rgba(34, 36, 38, 0.1); } /* Table Cells */ .ui.table > tbody > tr > td, .ui.table > tr > td { padding: 0.8em 0.8em; text-align: inherit; } /* Icons */ .ui.table > i.icon { vertical-align: baseline; } .ui.table > i.icon:only-child { margin: 0; } /* Table Segment */ .ui.table.segment { padding: 0; } .ui.table.segment::after { display: none; } /* Responsive */ @media only screen and (max-width: 767.98px) { .ui.table:not(.unstackable) { width: 100%; padding: 0; } .ui.table:not(.unstackable) > thead, .ui.table:not(.unstackable) > thead > tr, .ui.table:not(.unstackable) > tbody, .ui.table:not(.unstackable) > tr, .ui.table:not(.unstackable) > tbody > tr, .ui.table:not(.unstackable) > tr > th:not(.rowspanned), .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned), .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned), .ui.table:not(.unstackable) > tr > td:not(.rowspanned), .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned) { display: block !important; width: auto !important; } .ui.table:not(.unstackable) > thead { display: block; } .ui.ui.ui.ui.table:not(.unstackable) > tr, .ui.ui.ui.ui.table:not(.unstackable) > thead > tr, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; } .ui.ui.ui.ui.table:not(.unstackable) > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th, .ui.ui.ui.ui.table:not(.unstackable) > tr > td, .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td { background: none; border: none; padding: 0.25em 0.75em; box-shadow: none; } .ui.table:not(.unstackable) > tr > th:first-child, .ui.table:not(.unstackable) > thead > tr > th:first-child, .ui.table:not(.unstackable) > tbody > tr > th:first-child, .ui.table:not(.unstackable) > tr > td:first-child, .ui.table:not(.unstackable) > tbody > tr > td:first-child { font-weight: bold; } /* Definition Table */ .ui.definition.table:not(.unstackable) > thead > tr > th:first-child { box-shadow: none !important; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #0e3f47 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #0e3f47 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #269eab inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #269eab inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.table:not(.unstackable) tr[class*="black marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="black marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } .ui.scrolling.table.short > tbody { max-height: 7.425em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 4.95em; } .ui.scrolling.table > tbody { max-height: 9.9em; } .ui.scrolling.table.long > tbody { max-height: 19.8em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 29.7em; } } /* -------------- Scrolling --------------- */ @media only screen and (min-width: 768px) { .ui.scrolling.table.short > tbody { max-height: 9.9em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 6.6em; } .ui.scrolling.table > tbody { max-height: 13.2em; } .ui.scrolling.table.long > tbody { max-height: 26.4em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 39.6em; } } @media only screen and (min-width: 992px) { .ui.scrolling.table.short > tbody { max-height: 14.85em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 9.9em; } .ui.scrolling.table > tbody { max-height: 19.8em; } .ui.scrolling.table.long > tbody { max-height: 39.6em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 59.4em; } } @media only screen and (min-width: 1920px) { .ui.scrolling.table.short > tbody { max-height: 19.8em; } .ui.scrolling.table[class*="very short"] > tbody { max-height: 13.2em; } .ui.scrolling.table > tbody { max-height: 26.4em; } .ui.scrolling.table.long > tbody { max-height: 52.8em; } .ui.scrolling.table[class*="very long"] > tbody { max-height: 79.2em; } } .ui.scrolling.table > thead, .ui.scrolling.table > tbody { display: block; overflow-y: scroll; overscroll-behavior: none; } .ui.scrolling.table > thead > tr, .ui.scrolling.table > tbody > tr { display: table; table-layout: fixed; width: 100%; } @supports (-moz-appearance: none) { .ui.scrolling.table > thead, .ui.scrolling.table > tbody { scrollbar-width: thin; } } /* Camouflage scrollbars, we need them only to gain the same width as tbody */ .ui.scrolling.table > thead { background: #f9fafb; color: #f9fafb; border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.inverted.scrolling.table > thead { background: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15); } .ui.scrolling.table > thead::-webkit-scrollbar-track { background: inherit; border-radius: 0.26666667rem; } @supports (-moz-appearance: none) { .ui.scrolling.table > thead { scrollbar-color: currentColor currentColor; } } /* IE scrollbar color needs hex values */ @media all and (-ms-high-contrast: none) { .ui.scrolling.table > thead { scrollbar-face-color: currentColor; scrollbar-shadow-color: currentColor; scrollbar-track-color: currentColor; scrollbar-arrow-color: currentColor; } .ui.scrolling.table > thead { color: #f9fafb; } .ui.inverted.scrolling.table > thead { color: #252525; } } .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } .ui.inverted.scrolling.table > tbody { /* IE11 */ scrollbar-face-color: #656565; scrollbar-shadow-color: #656565; scrollbar-track-color: #323232; scrollbar-arrow-color: #323232; } @supports (-moz-appearance: none) { .ui.inverted.scrolling.table > tbody { /* firefox: first color thumb, second track */ scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1); } } /* -------------- Overflowing --------------- */ /******************************* Coupling *******************************/ /* UI Image */ /******************************* Types *******************************/ /* -------------- Complex --------------- */ .ui.structured.table { border-collapse: collapse; } .ui.structured.table > thead > tr > th { border-left: none; border-right: none; } .ui.structured.basic.table > tr > th, .ui.structured.basic.table > thead > tr > th, .ui.structured.basic.table > tbody > tr > th { border-left: none; border-right: none; } /* -------------- Definition --------------- */ .ui.definition.table > thead:not(.full-width) > tr > th:first-child { pointer-events: none; background: #fff; font-weight: normal; color: rgba(0, 0, 0, 0.4); box-shadow: -0.1em -0.2em 0 0.1em #fff; -moz-transform: scale(1); } .ui.definition.table > thead:not(.full-width) > tr > th:first-child:not(:empty) { pointer-events: auto; } /* Highlight Defining Column */ .ui.definition.table > tr > td:first-child:not(.ignored), .ui.definition.table > tbody > tr > td:first-child:not(.ignored), .ui.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) > tr > th:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } .ui.definition.table > tr > td:nth-child(2), .ui.definition.table > tbody > tr > td:nth-child(2) { border-left: 1px solid rgba(34, 36, 38, 0.15); } /******************************* States *******************************/ /* -------------- Positive --------------- */ .ui.ui.ui.ui.table tr.positive, .ui.ui.table td.positive { box-shadow: 0 0 0 #a3c293 inset; background: #fcfff5; color: #2c662d; } .ui.ui.ui.ui.inverted.table tr.positive, .ui.ui.inverted.table td.positive { background: #a3c293; color: #2c662d; } /* -------------- Negative --------------- */ .ui.ui.ui.ui.table tr.negative, .ui.ui.table td.negative { box-shadow: 0 0 0 #e0b4b4 inset; background: #fff6f6; color: #9f3a38; } .ui.ui.ui.ui.inverted.table tr.negative, .ui.ui.inverted.table td.negative { background: #e0b4b4; color: #9f3a38; } /* -------------- Error --------------- */ .ui.ui.ui.ui.table tr.error, .ui.ui.table td.error { box-shadow: 0 0 0 #e0b4b4 inset; background: #fff6f6; color: #9f3a38; } .ui.ui.ui.ui.inverted.table tr.error, .ui.ui.inverted.table td.error { background: #e0b4b4; color: #9f3a38; } /* -------------- Warning --------------- */ .ui.ui.ui.ui.table tr.warning, .ui.ui.table td.warning { box-shadow: 0 0 0 #c9ba9b inset; background: #fffaf3; color: #573a08; } .ui.ui.ui.ui.inverted.table tr.warning, .ui.ui.inverted.table td.warning { background: #eec97e; color: #573a08; } /* -------------- Active --------------- */ .ui.ui.ui.ui.table tr.active, .ui.ui.table td.active { box-shadow: 0 0 0 rgba(0, 0, 0, 0.87) inset; background: #e0e0e0; color: rgba(0, 0, 0, 0.87); } .ui.ui.ui.ui.inverted.table tr.active, .ui.ui.inverted.table td.active { background: #a0a0a0; color: rgba(0, 0, 0, 0.87); } /* -------------- Disabled --------------- */ .ui.ui.ui.table tr.disabled td, .ui.ui.ui.table tr td.disabled, .ui.table tr.disabled:hover, .ui.table tr:hover td.disabled { pointer-events: none; color: rgba(40, 40, 40, 0.3); } /******************************* Variations *******************************/ /* -------------- Stackable --------------- */ @media only screen and (max-width: 991.98px) { .ui[class*="tablet stackable"].table, .ui[class*="tablet stackable"].table > thead, .ui[class*="tablet stackable"].table > thead > tr, .ui[class*="tablet stackable"].table > tbody, .ui[class*="tablet stackable"].table > tbody > tr, .ui[class*="tablet stackable"].table > tr, .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned), .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned), .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned), .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned), .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) { display: block !important; width: 100% !important; } .ui[class*="tablet stackable"].table { padding: 0; } .ui[class*="tablet stackable"].table > thead { display: block; } .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr, .ui.ui.ui.ui[class*="tablet stackable"].table > tr { padding-top: 1em; padding-bottom: 1em; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; } .ui[class*="tablet stackable"].table > thead > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > th, .ui[class*="tablet stackable"].table > tr > th, .ui[class*="tablet stackable"].table > tbody > tr > td, .ui[class*="tablet stackable"].table > tr > td { background: none; border: none !important; padding: 0.25em 0.75em; box-shadow: none; } /* Definition Table */ .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child { box-shadow: none !important; } } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #0e3f47 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #0e3f47 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="primary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="primary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="secondary marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="secondary marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #db2828 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="red marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="red marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #ff695e inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #269eab inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #269eab inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="green marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="green marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2ecc40 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #00b5ad inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="teal marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="teal marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #6dffff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #2185d0 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="blue marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="blue marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #54c8ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #a333c8 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="purple marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="purple marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dc73ff inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #767676 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="grey marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="grey marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #dcddde inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="black marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #1b1c1d inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="black marked"].left { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0.2em 0 0 0 #545454 inset; } .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="black marked"].right { box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, -0.2em 0 0 0 #545454 inset; } /* -------------- Text Alignment --------------- */ .ui.table[class*="left aligned"], .ui.table [class*="left aligned"] { text-align: left; } .ui.table[class*="center aligned"], .ui.table [class*="center aligned"] { text-align: center; } .ui.table[class*="right aligned"], .ui.table [class*="right aligned"] { text-align: right; } /* ------------------ Vertical Alignment ------------------ */ .ui.table[class*="top aligned"], .ui.table [class*="top aligned"] { vertical-align: top; } .ui.table[class*="middle aligned"], .ui.table [class*="middle aligned"] { vertical-align: middle; } .ui.table[class*="bottom aligned"], .ui.table [class*="bottom aligned"] { vertical-align: bottom; } /* -------------- Collapsing --------------- */ /* -------------- Fixed --------------- */ .ui.fixed.table { table-layout: fixed; } .ui.fixed.table th, .ui.fixed.table td { overflow: hidden; text-overflow: ellipsis; } /* -------------- Selectable --------------- */ /* Selectable Cell Link */ /* Other States */ /* ------------------- Attached -------------------- */ /* Middle */ .ui.attached.table { top: 0; bottom: 0; border-radius: 0; margin: 0 -1px; width: calc(100% + 2px); max-width: calc(100% + 2px); box-shadow: none; border: 1px solid #d4d4d5; } .ui.attached + .ui.attached.table:not(.top) { border-top: none; } /* Top */ .ui[class*="top attached"].table { bottom: 0; margin-bottom: 0; top: 0; margin-top: 1em; border-radius: 0.26666667rem 0.26666667rem 0 0; } .ui.table[class*="top attached"]:first-child { margin-top: 0; } /* Bottom */ .ui[class*="bottom attached"].table { bottom: 0; margin-top: 0; top: 0; margin-bottom: 1em; box-shadow: none; border-radius: 0 0 0.26666667rem 0.26666667rem; } .ui[class*="bottom attached"].table:last-child { margin-bottom: 0; } /* -------------- Striped --------------- */ /* Table Striping */ .ui.striped.table > tr:nth-child(2n), .ui.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) { background-color: rgba(255, 255, 255, 0.05); } /* Allow striped active hover */ /* -------------- Single Line --------------- */ .ui.table[class*="single line"], .ui.table [class*="single line"] { white-space: nowrap; } /* ------------------- Colors -------------------- */ .ui.primary.table { border-top: 0.2em solid #0e3f47; } .ui.inverted.primary.table { background: #0e3f47; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.primary { background: #ddf4ff; color: #ddf4ff; } .ui.scrolling.table > thead.primary > tr > th, .ui.scrolling.table > thead.primary > tr > td { background: inherit; color: rgba(255, 255, 255, 0.9); } .ui.inverted.scrolling.table > thead.primary { background: #0e3f47; color: #0e3f47; } .ui.inverted.scrolling.table > thead.primary > tr > th, .ui.inverted.scrolling.table > thead.primary > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="primary colored"], .ui.ui.table th[class*="primary colored"], .ui.ui.table td[class*="primary colored"], .ui.ui.ui.ui.table tr.primary:not(.marked), .ui.ui.table th.primary:not(.marked), .ui.ui.table td.primary:not(.marked) { background: #ddf4ff; color: rgba(255, 255, 255, 0.9); } .ui.table > thead > tr[class*="primary colored"] > th, .ui.table > thead > tr.primary:not(.marked) > th { background: inherit; color: rgba(255, 255, 255, 0.9); } .ui.ui.ui.ui.inverted.table tr[class*="primary colored"], .ui.ui.inverted.table th[class*="primary colored"], .ui.ui.inverted.table td[class*="primary colored"], .ui.ui.ui.ui.inverted.table tr.primary:not(.marked), .ui.ui.inverted.table th.primary:not(.marked), .ui.ui.inverted.table td.primary:not(.marked) { background: #0e3f47; color: #fff; } .ui.inverted.table > thead > tr[class*="primary colored"] > th, .ui.inverted.table > thead > tr.primary:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="primary marked"].left, .ui.table tr[class*="primary marked"].left { box-shadow: 0.2em 0 0 0 #0e3f47 inset; } .ui.table td[class*="primary marked"].right, .ui.table tr[class*="primary marked"].right { box-shadow: -0.2em 0 0 0 #0e3f47 inset; } .ui.inverted.table td[class*="primary marked"].left, .ui.inverted.table tr[class*="primary marked"].left { box-shadow: 0.2em 0 0 0 #54c8ff inset; } .ui.inverted.table td[class*="primary marked"].right, .ui.inverted.table tr[class*="primary marked"].right { box-shadow: -0.2em 0 0 0 #54c8ff inset; } .ui.secondary.table { border-top: 0.2em solid #1b1c1d; } .ui.inverted.secondary.table { background: #1b1c1d; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.secondary { background: #dddddd; color: #dddddd; } .ui.scrolling.table > thead.secondary > tr > th, .ui.scrolling.table > thead.secondary > tr > td { background: inherit; color: rgba(255, 255, 255, 0.9); } .ui.inverted.scrolling.table > thead.secondary { background: #1b1c1d; color: #1b1c1d; } .ui.inverted.scrolling.table > thead.secondary > tr > th, .ui.inverted.scrolling.table > thead.secondary > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="secondary colored"], .ui.ui.table th[class*="secondary colored"], .ui.ui.table td[class*="secondary colored"], .ui.ui.ui.ui.table tr.secondary:not(.marked), .ui.ui.table th.secondary:not(.marked), .ui.ui.table td.secondary:not(.marked) { background: #dddddd; color: rgba(255, 255, 255, 0.9); } .ui.table > thead > tr[class*="secondary colored"] > th, .ui.table > thead > tr.secondary:not(.marked) > th { background: inherit; color: rgba(255, 255, 255, 0.9); } .ui.ui.ui.ui.inverted.table tr[class*="secondary colored"], .ui.ui.inverted.table th[class*="secondary colored"], .ui.ui.inverted.table td[class*="secondary colored"], .ui.ui.ui.ui.inverted.table tr.secondary:not(.marked), .ui.ui.inverted.table th.secondary:not(.marked), .ui.ui.inverted.table td.secondary:not(.marked) { background: #1b1c1d; color: #fff; } .ui.inverted.table > thead > tr[class*="secondary colored"] > th, .ui.inverted.table > thead > tr.secondary:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="secondary marked"].left, .ui.table tr[class*="secondary marked"].left { box-shadow: 0.2em 0 0 0 #1b1c1d inset; } .ui.table td[class*="secondary marked"].right, .ui.table tr[class*="secondary marked"].right { box-shadow: -0.2em 0 0 0 #1b1c1d inset; } .ui.inverted.table td[class*="secondary marked"].left, .ui.inverted.table tr[class*="secondary marked"].left { box-shadow: 0.2em 0 0 0 #545454 inset; } .ui.inverted.table td[class*="secondary marked"].right, .ui.inverted.table tr[class*="secondary marked"].right { box-shadow: -0.2em 0 0 0 #545454 inset; } .ui.red.table { border-top: 0.2em solid #db2828; } .ui.inverted.red.table { background: #db2828; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.red { background: #ffe1df; color: #ffe1df; } .ui.scrolling.table > thead.red > tr > th, .ui.scrolling.table > thead.red > tr > td { background: inherit; color: #db2828; } .ui.inverted.scrolling.table > thead.red { background: #db2828; color: #db2828; } .ui.inverted.scrolling.table > thead.red > tr > th, .ui.inverted.scrolling.table > thead.red > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="red colored"], .ui.ui.table th[class*="red colored"], .ui.ui.table td[class*="red colored"], .ui.ui.ui.ui.table tr.red:not(.marked), .ui.ui.table th.red:not(.marked), .ui.ui.table td.red:not(.marked) { background: #ffe1df; color: #db2828; } .ui.table > thead > tr[class*="red colored"] > th, .ui.table > thead > tr.red:not(.marked) > th { background: inherit; color: #db2828; } .ui.ui.ui.ui.inverted.table tr[class*="red colored"], .ui.ui.inverted.table th[class*="red colored"], .ui.ui.inverted.table td[class*="red colored"], .ui.ui.ui.ui.inverted.table tr.red:not(.marked), .ui.ui.inverted.table th.red:not(.marked), .ui.ui.inverted.table td.red:not(.marked) { background: #db2828; color: #fff; } .ui.inverted.table > thead > tr[class*="red colored"] > th, .ui.inverted.table > thead > tr.red:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="red marked"].left, .ui.table tr[class*="red marked"].left { box-shadow: 0.2em 0 0 0 #db2828 inset; } .ui.table td[class*="red marked"].right, .ui.table tr[class*="red marked"].right { box-shadow: -0.2em 0 0 0 #db2828 inset; } .ui.inverted.table td[class*="red marked"].left, .ui.inverted.table tr[class*="red marked"].left { box-shadow: 0.2em 0 0 0 #ff695e inset; } .ui.inverted.table td[class*="red marked"].right, .ui.inverted.table tr[class*="red marked"].right { box-shadow: -0.2em 0 0 0 #ff695e inset; } /* Same color for background and color to camouflage the scrollbar */ /* Same color for background and color to camouflage the scrollbar */ /* Same color for background and color to camouflage the scrollbar */ .ui.green.table { border-top: 0.2em solid #269eab; } .ui.inverted.green.table { background: #269eab; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.green { background: #d5f5d9; color: #d5f5d9; } .ui.scrolling.table > thead.green > tr > th, .ui.scrolling.table > thead.green > tr > td { background: inherit; color: #1ebc30; } .ui.inverted.scrolling.table > thead.green { background: #269eab; color: #269eab; } .ui.inverted.scrolling.table > thead.green > tr > th, .ui.inverted.scrolling.table > thead.green > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="green colored"], .ui.ui.table th[class*="green colored"], .ui.ui.table td[class*="green colored"], .ui.ui.ui.ui.table tr.green:not(.marked), .ui.ui.table th.green:not(.marked), .ui.ui.table td.green:not(.marked) { background: #d5f5d9; color: #1ebc30; } .ui.table > thead > tr[class*="green colored"] > th, .ui.table > thead > tr.green:not(.marked) > th { background: inherit; color: #1ebc30; } .ui.ui.ui.ui.inverted.table tr[class*="green colored"], .ui.ui.inverted.table th[class*="green colored"], .ui.ui.inverted.table td[class*="green colored"], .ui.ui.ui.ui.inverted.table tr.green:not(.marked), .ui.ui.inverted.table th.green:not(.marked), .ui.ui.inverted.table td.green:not(.marked) { background: #269eab; color: #fff; } .ui.inverted.table > thead > tr[class*="green colored"] > th, .ui.inverted.table > thead > tr.green:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="green marked"].left, .ui.table tr[class*="green marked"].left { box-shadow: 0.2em 0 0 0 #269eab inset; } .ui.table td[class*="green marked"].right, .ui.table tr[class*="green marked"].right { box-shadow: -0.2em 0 0 0 #269eab inset; } .ui.inverted.table td[class*="green marked"].left, .ui.inverted.table tr[class*="green marked"].left { box-shadow: 0.2em 0 0 0 #2ecc40 inset; } .ui.inverted.table td[class*="green marked"].right, .ui.inverted.table tr[class*="green marked"].right { box-shadow: -0.2em 0 0 0 #2ecc40 inset; } .ui.teal.table { border-top: 0.2em solid #00b5ad; } .ui.inverted.teal.table { background: #00b5ad; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.teal { background: #e2ffff; color: #e2ffff; } .ui.scrolling.table > thead.teal > tr > th, .ui.scrolling.table > thead.teal > tr > td { background: inherit; color: #10a3a3; } .ui.inverted.scrolling.table > thead.teal { background: #00b5ad; color: #00b5ad; } .ui.inverted.scrolling.table > thead.teal > tr > th, .ui.inverted.scrolling.table > thead.teal > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="teal colored"], .ui.ui.table th[class*="teal colored"], .ui.ui.table td[class*="teal colored"], .ui.ui.ui.ui.table tr.teal:not(.marked), .ui.ui.table th.teal:not(.marked), .ui.ui.table td.teal:not(.marked) { background: #e2ffff; color: #10a3a3; } .ui.table > thead > tr[class*="teal colored"] > th, .ui.table > thead > tr.teal:not(.marked) > th { background: inherit; color: #10a3a3; } .ui.ui.ui.ui.inverted.table tr[class*="teal colored"], .ui.ui.inverted.table th[class*="teal colored"], .ui.ui.inverted.table td[class*="teal colored"], .ui.ui.ui.ui.inverted.table tr.teal:not(.marked), .ui.ui.inverted.table th.teal:not(.marked), .ui.ui.inverted.table td.teal:not(.marked) { background: #00b5ad; color: #fff; } .ui.inverted.table > thead > tr[class*="teal colored"] > th, .ui.inverted.table > thead > tr.teal:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="teal marked"].left, .ui.table tr[class*="teal marked"].left { box-shadow: 0.2em 0 0 0 #00b5ad inset; } .ui.table td[class*="teal marked"].right, .ui.table tr[class*="teal marked"].right { box-shadow: -0.2em 0 0 0 #00b5ad inset; } .ui.inverted.table td[class*="teal marked"].left, .ui.inverted.table tr[class*="teal marked"].left { box-shadow: 0.2em 0 0 0 #6dffff inset; } .ui.inverted.table td[class*="teal marked"].right, .ui.inverted.table tr[class*="teal marked"].right { box-shadow: -0.2em 0 0 0 #6dffff inset; } .ui.blue.table { border-top: 0.2em solid #2185d0; } .ui.inverted.blue.table { background: #2185d0; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.blue { background: #ddf4ff; color: #ddf4ff; } .ui.scrolling.table > thead.blue > tr > th, .ui.scrolling.table > thead.blue > tr > td { background: inherit; color: #2185d0; } .ui.inverted.scrolling.table > thead.blue { background: #2185d0; color: #2185d0; } .ui.inverted.scrolling.table > thead.blue > tr > th, .ui.inverted.scrolling.table > thead.blue > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="blue colored"], .ui.ui.table th[class*="blue colored"], .ui.ui.table td[class*="blue colored"], .ui.ui.ui.ui.table tr.blue:not(.marked), .ui.ui.table th.blue:not(.marked), .ui.ui.table td.blue:not(.marked) { background: #ddf4ff; color: #2185d0; } .ui.table > thead > tr[class*="blue colored"] > th, .ui.table > thead > tr.blue:not(.marked) > th { background: inherit; color: #2185d0; } .ui.ui.ui.ui.inverted.table tr[class*="blue colored"], .ui.ui.inverted.table th[class*="blue colored"], .ui.ui.inverted.table td[class*="blue colored"], .ui.ui.ui.ui.inverted.table tr.blue:not(.marked), .ui.ui.inverted.table th.blue:not(.marked), .ui.ui.inverted.table td.blue:not(.marked) { background: #2185d0; color: #fff; } .ui.inverted.table > thead > tr[class*="blue colored"] > th, .ui.inverted.table > thead > tr.blue:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="blue marked"].left, .ui.table tr[class*="blue marked"].left { box-shadow: 0.2em 0 0 0 #2185d0 inset; } .ui.table td[class*="blue marked"].right, .ui.table tr[class*="blue marked"].right { box-shadow: -0.2em 0 0 0 #2185d0 inset; } .ui.inverted.table td[class*="blue marked"].left, .ui.inverted.table tr[class*="blue marked"].left { box-shadow: 0.2em 0 0 0 #54c8ff inset; } .ui.inverted.table td[class*="blue marked"].right, .ui.inverted.table tr[class*="blue marked"].right { box-shadow: -0.2em 0 0 0 #54c8ff inset; } /* Same color for background and color to camouflage the scrollbar */ .ui.purple.table { border-top: 0.2em solid #a333c8; } .ui.inverted.purple.table { background: #a333c8; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.purple { background: #f8e3ff; color: #f8e3ff; } .ui.scrolling.table > thead.purple > tr > th, .ui.scrolling.table > thead.purple > tr > td { background: inherit; color: #a333c8; } .ui.inverted.scrolling.table > thead.purple { background: #a333c8; color: #a333c8; } .ui.inverted.scrolling.table > thead.purple > tr > th, .ui.inverted.scrolling.table > thead.purple > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="purple colored"], .ui.ui.table th[class*="purple colored"], .ui.ui.table td[class*="purple colored"], .ui.ui.ui.ui.table tr.purple:not(.marked), .ui.ui.table th.purple:not(.marked), .ui.ui.table td.purple:not(.marked) { background: #f8e3ff; color: #a333c8; } .ui.table > thead > tr[class*="purple colored"] > th, .ui.table > thead > tr.purple:not(.marked) > th { background: inherit; color: #a333c8; } .ui.ui.ui.ui.inverted.table tr[class*="purple colored"], .ui.ui.inverted.table th[class*="purple colored"], .ui.ui.inverted.table td[class*="purple colored"], .ui.ui.ui.ui.inverted.table tr.purple:not(.marked), .ui.ui.inverted.table th.purple:not(.marked), .ui.ui.inverted.table td.purple:not(.marked) { background: #a333c8; color: #fff; } .ui.inverted.table > thead > tr[class*="purple colored"] > th, .ui.inverted.table > thead > tr.purple:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="purple marked"].left, .ui.table tr[class*="purple marked"].left { box-shadow: 0.2em 0 0 0 #a333c8 inset; } .ui.table td[class*="purple marked"].right, .ui.table tr[class*="purple marked"].right { box-shadow: -0.2em 0 0 0 #a333c8 inset; } .ui.inverted.table td[class*="purple marked"].left, .ui.inverted.table tr[class*="purple marked"].left { box-shadow: 0.2em 0 0 0 #dc73ff inset; } .ui.inverted.table td[class*="purple marked"].right, .ui.inverted.table tr[class*="purple marked"].right { box-shadow: -0.2em 0 0 0 #dc73ff inset; } /* Same color for background and color to camouflage the scrollbar */ /* Same color for background and color to camouflage the scrollbar */ .ui.grey.table { border-top: 0.2em solid #767676; } .ui.inverted.grey.table { background: #767676; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.grey { background: #dcddde; color: #dcddde; } .ui.scrolling.table > thead.grey > tr > th, .ui.scrolling.table > thead.grey > tr > td { background: inherit; color: #767676; } .ui.inverted.scrolling.table > thead.grey { background: #767676; color: #767676; } .ui.inverted.scrolling.table > thead.grey > tr > th, .ui.inverted.scrolling.table > thead.grey > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="grey colored"], .ui.ui.table th[class*="grey colored"], .ui.ui.table td[class*="grey colored"], .ui.ui.ui.ui.table tr.grey:not(.marked), .ui.ui.table th.grey:not(.marked), .ui.ui.table td.grey:not(.marked) { background: #dcddde; color: #767676; } .ui.table > thead > tr[class*="grey colored"] > th, .ui.table > thead > tr.grey:not(.marked) > th { background: inherit; color: #767676; } .ui.ui.ui.ui.inverted.table tr[class*="grey colored"], .ui.ui.inverted.table th[class*="grey colored"], .ui.ui.inverted.table td[class*="grey colored"], .ui.ui.ui.ui.inverted.table tr.grey:not(.marked), .ui.ui.inverted.table th.grey:not(.marked), .ui.ui.inverted.table td.grey:not(.marked) { background: #767676; color: #fff; } .ui.inverted.table > thead > tr[class*="grey colored"] > th, .ui.inverted.table > thead > tr.grey:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="grey marked"].left, .ui.table tr[class*="grey marked"].left { box-shadow: 0.2em 0 0 0 #767676 inset; } .ui.table td[class*="grey marked"].right, .ui.table tr[class*="grey marked"].right { box-shadow: -0.2em 0 0 0 #767676 inset; } .ui.inverted.table td[class*="grey marked"].left, .ui.inverted.table tr[class*="grey marked"].left { box-shadow: 0.2em 0 0 0 #dcddde inset; } .ui.inverted.table td[class*="grey marked"].right, .ui.inverted.table tr[class*="grey marked"].right { box-shadow: -0.2em 0 0 0 #dcddde inset; } .ui.black.table { border-top: 0.2em solid #1b1c1d; } .ui.inverted.black.table { background: #1b1c1d; color: #fff; } /* Same color for background and color to camouflage the scrollbar */ .ui.scrolling.table > thead.black { background: #545454; color: #545454; } .ui.scrolling.table > thead.black > tr > th, .ui.scrolling.table > thead.black > tr > td { background: inherit; color: #fff; } .ui.inverted.scrolling.table > thead.black { background: #1b1c1d; color: #1b1c1d; } .ui.inverted.scrolling.table > thead.black > tr > th, .ui.inverted.scrolling.table > thead.black > tr > td { background: inherit; color: #fff; } .ui.ui.ui.ui.table tr[class*="black colored"], .ui.ui.table th[class*="black colored"], .ui.ui.table td[class*="black colored"], .ui.ui.ui.ui.table tr.black:not(.marked), .ui.ui.table th.black:not(.marked), .ui.ui.table td.black:not(.marked) { background: #545454; color: #fff; } .ui.table > thead > tr[class*="black colored"] > th, .ui.table > thead > tr.black:not(.marked) > th { background: inherit; color: #fff; } .ui.ui.ui.ui.inverted.table tr[class*="black colored"], .ui.ui.inverted.table th[class*="black colored"], .ui.ui.inverted.table td[class*="black colored"], .ui.ui.ui.ui.inverted.table tr.black:not(.marked), .ui.ui.inverted.table th.black:not(.marked), .ui.ui.inverted.table td.black:not(.marked) { background: #1b1c1d; color: #fff; } .ui.inverted.table > thead > tr[class*="black colored"] > th, .ui.inverted.table > thead > tr.black:not(.marked) > th { background: inherit; color: #fff; } .ui.table td[class*="black marked"].left, .ui.table tr[class*="black marked"].left { box-shadow: 0.2em 0 0 0 #1b1c1d inset; } .ui.table td[class*="black marked"].right, .ui.table tr[class*="black marked"].right { box-shadow: -0.2em 0 0 0 #1b1c1d inset; } .ui.inverted.table td[class*="black marked"].left, .ui.inverted.table tr[class*="black marked"].left { box-shadow: 0.2em 0 0 0 #545454 inset; } .ui.inverted.table td[class*="black marked"].right, .ui.inverted.table tr[class*="black marked"].right { box-shadow: -0.2em 0 0 0 #545454 inset; } /* -------------- Column Count --------------- */ /* Grid Based */ .ui.one.column.table td { width: 100%; } .ui.two.column.table td { width: 50%; } .ui.three.column.table td { width: 33.33333333%; } .ui.four.column.table td { width: 25%; } .ui.five.column.table td { width: 20%; } .ui.six.column.table td { width: 16.66666667%; } .ui.seven.column.table td { width: 14.28571429%; } .ui.eight.column.table td { width: 12.5%; } .ui.ten.column.table td { width: 10%; } .ui.eleven.column.table td { width: 9.09090909%; } .ui.twelve.column.table td { width: 8.33333333%; } .ui.thirteen.column.table td { width: 7.69230769%; } .ui.sixteen.column.table td { width: 6.25%; } /* Column Width */ .ui.table th.one.wide, .ui.table td.one.wide { width: 6.25%; } .ui.table th.two.wide, .ui.table td.two.wide { width: 12.5%; } .ui.table th.three.wide, .ui.table td.three.wide { width: 18.75%; } .ui.table th.four.wide, .ui.table td.four.wide { width: 25%; } .ui.table th.five.wide, .ui.table td.five.wide { width: 31.25%; } .ui.table th.six.wide, .ui.table td.six.wide { width: 37.5%; } .ui.table th.seven.wide, .ui.table td.seven.wide { width: 43.75%; } .ui.table th.eight.wide, .ui.table td.eight.wide { width: 50%; } .ui.table th.ten.wide, .ui.table td.ten.wide { width: 62.5%; } .ui.table th.eleven.wide, .ui.table td.eleven.wide { width: 68.75%; } .ui.table th.twelve.wide, .ui.table td.twelve.wide { width: 75%; } .ui.table th.thirteen.wide, .ui.table td.thirteen.wide { width: 81.25%; } .ui.table th.sixteen.wide, .ui.table td.sixteen.wide { width: 100%; } /* -------------- Sortable --------------- */ /* Hover */ /* Sorted */ /* Sorted Hover */ /* Inverted */ /* -------------- Inverted --------------- */ /* Text Color */ .ui.inverted.table { background: #333; color: rgba(255, 255, 255, 0.9); border: none; } .ui.ui.inverted.table > thead > tr > th, .ui.ui.inverted.table > tbody > tr > th, .ui.ui.inverted.table > tr > th { background-color: rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); } .ui.inverted.table > tbody > tr > td, .ui.inverted.table > tr > td { border-color: rgba(255, 255, 255, 0.1); } .ui.ui.ui.inverted.table tr.disabled td, .ui.ui.ui.inverted.table tr td.disabled, .ui.inverted.table tr.disabled:hover td, .ui.inverted.table tr:hover td.disabled { pointer-events: none; color: rgba(225, 225, 225, 0.3); } .ui.ui.ui.inverted.table tr td.disabled:not([class="disabled"]), .ui.inverted.table tr.disabled:not([class="disabled"]) td, .ui.inverted.table tr.disabled td[class]:not(.disabled), .ui.inverted.table tr:hover td.disabled:not([class="disabled"]) { color: rgba(40, 40, 40, 0.3); } /* Definition */ .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child { background: #fff; } .ui.inverted.definition.table > tbody > tr > td:first-child, .ui.inverted.definition.table > tr > td:first-child { background: rgba(255, 255, 255, 0.02); color: #ffffff; } /* -------------- Collapsing --------------- */ /* -------------- Basic --------------- */ .ui.basic.table { background: transparent; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; } .ui.basic.table > thead { box-shadow: none; } .ui.basic.table > thead > tr > th, .ui.basic.table > tbody > tr > th, .ui.basic.table > tr > th { background: transparent; border-left: none; } .ui.basic.table > tbody > tr { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .ui.basic.table > tbody > tr > td, .ui.basic.table > tr > td { background: transparent; } .ui.basic.striped.table > tbody > tr:nth-child(2n) { background-color: rgba(0, 0, 0, 0.05); } /* Very Basic */ .ui[class*="very basic"].table { border: none; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td { padding: ""; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child { padding-left: 0; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child { padding-right: 0; } .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th { padding-top: 0; } /* -------------- Celled --------------- */ /* -------------- Padded --------------- */ /* Very */ /* -------------- Compact --------------- */ /* Very */ /* -------------- Stuck --------------- */ /* -------------- Sizes --------------- */ /* Standard */ .ui.table { font-size: 1em; } .ui.mini.table { font-size: 0.8rem; } .ui.tiny.table { font-size: 0.86666667rem; } .ui.small.table { font-size: 0.9em; } .ui.large.table { font-size: 1.1em; } .ui.big.table { font-size: 1.26666667rem; } .ui.huge.table { font-size: 1.4rem; } .ui.massive.table { font-size: 1.73333333rem; } /******************************* Overrides *******************************/ /******************************* Site Overrides *******************************/ /* Views */ /*! * # Fomantic-UI - Card * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /******************************* States *******************************/ /* Loading Dimmer */ /* Loading Spinner */ /* ------------------- Variations -------------------- */ /* Link */ /* Horizontal */ /* Raised */ /* Basic Raised */ /* Card Count */ /* Stackable */ /* Sizes */ /* Colored */ /* Inverted */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Standard *******************************/ /* -------------- Card --------------- */ .ui.cards > .card, .ui.card { max-width: 100%; position: relative; display: flex; flex-direction: column; width: 290px; min-height: 0; background: #fff; padding: 0; border: none; border-radius: 0.26666667rem; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; transition: box-shadow 0.1s ease, transform 0.1s ease; z-index: ""; word-wrap: break-word; } .ui.card { margin: 1em 0; } .ui.cards > .card a, .ui.card a { cursor: pointer; } .ui.card:first-child { margin-top: 0; } .ui.card:last-child { margin-bottom: 0; } /* -------------- Cards --------------- */ .ui.cards { display: flex; margin: -0.875em -0.5em; flex-wrap: wrap; } .ui.cards > .card { display: flex; margin: 0.875em 0.5em; float: none; } /* Clearing */ .ui.cards::after, .ui.card::after { display: block; content: " "; height: 0; clear: both; overflow: hidden; visibility: hidden; } /* Consecutive Card Groups Preserve Row Spacing */ .ui.cards ~ .ui.cards { margin-top: 0.875em; } /* -------------- Rounded Edges --------------- */ .ui.cards > .card > :first-child, .ui.card > :first-child { border-radius: 0.26666667rem 0.26666667rem 0 0 !important; border-top: none !important; } .ui.cards > .card > :last-child, .ui.card > :last-child { border-radius: 0 0 0.26666667rem 0.26666667rem !important; } .ui.cards > .card > :only-child, .ui.card > :only-child { border-radius: 0.26666667rem !important; } /* -------------- Images --------------- */ .ui.cards > .card > .image, .ui.card > .image { position: relative; display: block; flex: 0 0 auto; padding: 0; background: rgba(0, 0, 0, 0.05); } .ui.cards > .card > .image > img, .ui.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 { border: none; } /* -------------- Content --------------- */ .ui.cards > .card > .content, .ui.card > .content { flex-grow: 1; border: none; border-top: 1px solid rgba(34, 36, 38, 0.1); background: none; margin: 0; padding: 1em; box-shadow: none; font-size: 1em; border-radius: 0; } .ui.cards > .card > .content::after, .ui.card > .content::after { display: block; content: " "; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.cards > .card > .content > .header, .ui.card > .content > .header { display: block; margin: ""; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, 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) { font-weight: bold; font-size: 1.26666667em; margin-top: -0.35em; 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 { margin-top: 0.5em; } /* ---------------- Floated Content ----------------- */ .ui.cards > .card [class*="left floated"], .ui.card [class*="left floated"] { float: left; } .ui.cards > .card [class*="right floated"], .ui.card [class*="right floated"] { float: right; } /* -------------- Aligned --------------- */ .ui.cards > .card [class*="left aligned"], .ui.card [class*="left aligned"] { text-align: left; } .ui.cards > .card [class*="center aligned"], .ui.card [class*="center aligned"] { text-align: center; } .ui.cards > .card [class*="right aligned"], .ui.card [class*="right aligned"] { text-align: right; } /* -------------- Content Image --------------- */ .ui.cards > .card .content img, .ui.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 { width: 2em; height: 2em; border-radius: 500rem; } /* -------------- Description --------------- */ .ui.cards > .card > .content > .description, .ui.card > .content > .description { clear: both; color: rgba(0, 0, 0, 0.68); } /* -------------- Paragraph --------------- */ .ui.cards > .card > .content p, .ui.card > .content p { margin: 0 0 0.5em; } .ui.cards > .card > .content p:last-child, .ui.card > .content p:last-child { margin-bottom: 0; } /* -------------- Meta --------------- */ .ui.cards > .card .meta, .ui.card .meta { font-size: 1em; color: rgba(0, 0, 0, 0.4); } .ui.cards > .card .meta *, .ui.card .meta * { margin-right: 0.3em; } .ui.cards > .card .meta :last-child, .ui.card .meta :last-child { margin-right: 0; } .ui.cards > .card .meta [class*="right floated"], .ui.card .meta [class*="right floated"] { margin-right: 0; margin-left: 0.3em; } /* -------------- Links --------------- */ /* Generic */ .ui.cards > .card > .content a:not(.ui), .ui.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 { color: ""; } /* Header */ .ui.cards > .card > .content > a.header, .ui.card > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.cards > .card > .content > a.header:hover, .ui.card > .content > a.header:hover { color: #18646c; } /* Meta */ .ui.cards > .card .meta > a:not(.ui), .ui.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 { color: rgba(0, 0, 0, 0.87); } /* -------------- Buttons --------------- */ .ui.cards > .card > .buttons, .ui.card > .buttons, .ui.cards > .card > .button, .ui.card > .button { margin: 0 -1px; width: calc(100% + 2px); } .ui.cards > .card > .buttons:last-child, .ui.card > .buttons:last-child, .ui.cards > .card > .button:last-child, .ui.card > .button:last-child { margin-bottom: -1px; } /* -------------- Basic --------------- */ .ui.cards:not(.raised) > .basic.card:not(.raised), .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised), .ui.ui.ui.basic.card:not(.raised) { box-shadow: none; } .ui.cards:not(.raised) > .basic.card:not(.raised) > .buttons, .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised) > .buttons, .ui.ui.ui.basic.card:not(.raised) > .buttons, .ui.cards:not(.raised) > .basic.card:not(.raised) > .button, .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised) > .button, .ui.ui.ui.basic.card:not(.raised) > .button { margin: 0; width: 100%; } .ui.ui.ui.ui.ui.basic.card:not(.raised):hover, .ui.ui.ui.ui.ui.basic.cards:not(.raised) .card:not(.raised):hover { box-shadow: none; } /* -------------- Dimmer --------------- */ .ui.cards > .card .dimmer, .ui.card .dimmer { background: ""; z-index: 10; } /* -------------- Labels --------------- */ /* -----Star----- */ /* Icon */ .ui.cards > .card > .content .star.icon, .ui.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 { opacity: 1; color: #ffb70a; } .ui.cards > .card > .content .active.star.icon, .ui.card > .content .active.star.icon { color: #ffe623; } /* -----Like----- */ /* Icon */ .ui.cards > .card > .content .like.icon, .ui.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 { opacity: 1; color: #ff2733; } .ui.cards > .card > .content .active.like.icon, .ui.card > .content .active.like.icon { color: #ff2733; } /* ---------------- Extra Content ----------------- */ .ui.cards > .card > .extra, .ui.card > .extra { max-width: 100%; min-height: 0 !important; flex-grow: 0; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; position: static; background: none; width: auto; margin: 0; padding: 0.75em 1em; top: 0; left: 0; 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) { color: rgba(0, 0, 0, 0.4); } .ui.cards > .card > .extra a:not(.ui):hover, .ui.card > .extra a:not(.ui):hover { color: #18646c; } /******************************* States *******************************/ /* -------------- Disabled --------------- */ .ui.disabled.card { opacity: 0.45; color: rgba(40, 40, 40, 0.3); pointer-events: none; } /* -------------- Loading --------------- */ .ui.loading.card { position: relative; cursor: default; pointer-events: none; transition: all 0s linear; } .ui.loading.card::before { position: absolute; content: ""; top: 0; left: 0; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; border-radius: 0.26666667rem; z-index: 100; } .ui.loading.card::after { position: absolute; content: ""; top: 50%; left: 50%; margin: -1.5em 0 0 -1.5em; width: 3em; height: 3em; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: 101; } /******************************* Variations *******************************/ /* ------------------- Horizontal -------------------- */ .ui.horizontal.cards > .card, .ui.card.horizontal { flex-flow: row wrap; min-width: 270px; width: 400px; max-width: 100%; } .ui.horizontal.cards > .card > .image, .ui.card.horizontal > .image { border-radius: 0.26666667rem 0 0 0.26666667rem; width: 150px; } .ui.horizontal.cards > .card > .image > img, .ui.card.horizontal > .image > img { background-size: cover; background-repeat: no-repeat; background-position: center; justify-content: center; align-items: center; display: flex; width: 100%; border-radius: 0.26666667rem 0 0 0.26666667rem; } .ui.horizontal.cards > .card > .image:last-child > img, .ui.card.horizontal > .image:last-child > img { border-radius: 0 0.26666667rem 0.26666667rem 0; } .ui.horizontal.cards > .card > .content, .ui.horizontal.card > .content { border-top: none; flex-basis: 1px; } .ui.horizontal.cards > .card > .extra, .ui.horizontal.card > .extra { flex-basis: 100%; } /* ------------------- Raised -------------------- */ .ui.cards > .raised.card, .ui.raised.cards > .card, .ui.raised.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 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 { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25); } .ui.basic.cards > .raised.card, .ui.basic.raised.cards > .card, .ui.raised.cards > .basic.card, .ui.basic.raised.card { box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); } .ui.basic.raised.cards a.card:hover, .ui.link.cards .basic.raised.card:hover, .ui.link.basic.cards .raised.card:hover, .ui.link.basic.raised.cards .card:hover, a.ui.basic.raised.card:hover, .ui.link.basic.raised.card:hover { box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25); } /* ------------------- Centered -------------------- */ .ui.centered.cards { justify-content: center; } .ui.centered.card { margin-left: auto; margin-right: auto; } /* ------------------- Fluid -------------------- */ .ui.fluid.card { width: 100%; max-width: 9999px; } /* ------------------- Link -------------------- */ .ui.cards a.card, .ui.link.cards .card, a.ui.card, .ui.link.card { transform: none; } .ui.cards a.card:hover, .ui.link.cards .card:not(.icon):hover, a.ui.card:hover, .ui.link.card:hover { cursor: pointer; z-index: 5; background: #fff; border: none; box-shadow: 0 1px 3px 0 #bcbdbd, 0 0 0 1px #d4d4d5; transform: translateY(-3px); } /* ------------------- Colors -------------------- */ .ui.primary.cards > .card, .ui.cards > .primary.card, .ui.primary.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #0e3f47, 0 1px 3px 0 #d4d4d5; } .ui.cards a.primary.card:hover, .ui.primary.cards a.card:hover, .ui.link.primary.cards .card:not(.icon):hover, .ui.link.cards .primary.card:not(.icon):hover, a.ui.primary.card:hover, .ui.link.primary.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #082e34, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.primary.card, .ui.basic.primary.cards > .card, .ui.basic.cards > .primary.card, .ui.basic.primary.card { background: #54c8ff; } .ui.basic.cards a.primary.card:hover, .ui.cards a.basic.primary.card:hover, .ui.basic.primary.cards a.card:hover, .ui.link.cards .basic.primary.card:not(.icon):hover, .ui.link.basic.primary.cards .card:not(.icon):hover, .ui.link.basic.cards .primary.card:not(.icon):hover, a.ui.basic.primary.card:hover, .ui.link.basic.primary.card:hover { background: #21b8ff; } .ui.inverted.primary.cards > .card, .ui.inverted.cards > .primary.card, .ui.inverted.primary.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #54c8ff, 0 0 0 1px #555; } .ui.inverted.cards a.primary.card:hover, .ui.inverted.primary.cards a.card:hover, .ui.link.inverted.primary.cards .card:not(.icon):hover, .ui.link.inverted.cards .primary.card:not(.icon):hover, a.ui.inverted.primary.card:hover, .ui.link.inverted.primary.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555; } .ui.inverted.cards > .basic.primary.card, .ui.basic.inverted.primary.cards > .card, .ui.basic.inverted.cards > .primary.card, .ui.basic.inverted.primary.card { background: #0e3f47; } .ui.inverted.cards a.basic.primary.card:hover, .ui.basic.inverted.cards a.primary.card:hover, .ui.basic.inverted.primary.cards a.card:hover, .ui.link.inverted.cards .basic.primary.card:not(.icon):hover, .ui.link.basic.inverted.primary.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .primary.card:not(.icon):hover, a.ui.basic.inverted.primary.card:hover, .ui.link.basic.inverted.primary.card:hover { background: #082e34; } .ui.secondary.cards > .card, .ui.cards > .secondary.card, .ui.secondary.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #1b1c1d, 0 1px 3px 0 #d4d4d5; } .ui.cards a.secondary.card:hover, .ui.secondary.cards a.card:hover, .ui.link.secondary.cards .card:not(.icon):hover, .ui.link.cards .secondary.card:not(.icon):hover, a.ui.secondary.card:hover, .ui.link.secondary.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #27292a, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.secondary.card, .ui.basic.secondary.cards > .card, .ui.basic.cards > .secondary.card, .ui.basic.secondary.card { background: #545454; } .ui.basic.cards a.secondary.card:hover, .ui.cards a.basic.secondary.card:hover, .ui.basic.secondary.cards a.card:hover, .ui.link.cards .basic.secondary.card:not(.icon):hover, .ui.link.basic.secondary.cards .card:not(.icon):hover, .ui.link.basic.cards .secondary.card:not(.icon):hover, a.ui.basic.secondary.card:hover, .ui.link.basic.secondary.card:hover { background: #6e6e6e; } .ui.inverted.secondary.cards > .card, .ui.inverted.cards > .secondary.card, .ui.inverted.secondary.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #545454, 0 0 0 1px #555; } .ui.inverted.cards a.secondary.card:hover, .ui.inverted.secondary.cards a.card:hover, .ui.link.inverted.secondary.cards .card:not(.icon):hover, .ui.link.inverted.cards .secondary.card:not(.icon):hover, a.ui.inverted.secondary.card:hover, .ui.link.inverted.secondary.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555; } .ui.inverted.cards > .basic.secondary.card, .ui.basic.inverted.secondary.cards > .card, .ui.basic.inverted.cards > .secondary.card, .ui.basic.inverted.secondary.card { background: #1b1c1d; } .ui.inverted.cards a.basic.secondary.card:hover, .ui.basic.inverted.cards a.secondary.card:hover, .ui.basic.inverted.secondary.cards a.card:hover, .ui.link.inverted.cards .basic.secondary.card:not(.icon):hover, .ui.link.basic.inverted.secondary.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .secondary.card:not(.icon):hover, a.ui.basic.inverted.secondary.card:hover, .ui.link.basic.inverted.secondary.card:hover { background: #27292a; } .ui.red.cards > .card, .ui.cards > .red.card, .ui.red.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #db2828, 0 1px 3px 0 #d4d4d5; } .ui.cards a.red.card:hover, .ui.red.cards a.card:hover, .ui.link.red.cards .card:not(.icon):hover, .ui.link.cards .red.card:not(.icon):hover, a.ui.red.card:hover, .ui.link.red.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #d01919, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.red.card, .ui.basic.red.cards > .card, .ui.basic.cards > .red.card, .ui.basic.red.card { background: #ff695e; } .ui.basic.cards a.red.card:hover, .ui.cards a.basic.red.card:hover, .ui.basic.red.cards a.card:hover, .ui.link.cards .basic.red.card:not(.icon):hover, .ui.link.basic.red.cards .card:not(.icon):hover, .ui.link.basic.cards .red.card:not(.icon):hover, a.ui.basic.red.card:hover, .ui.link.basic.red.card:hover { background: #ff392b; } .ui.inverted.red.cards > .card, .ui.inverted.cards > .red.card, .ui.inverted.red.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #ff695e, 0 0 0 1px #555; } .ui.inverted.cards a.red.card:hover, .ui.inverted.red.cards a.card:hover, .ui.link.inverted.red.cards .card:not(.icon):hover, .ui.link.inverted.cards .red.card:not(.icon):hover, a.ui.inverted.red.card:hover, .ui.link.inverted.red.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #ff392b, 0 0 0 1px #555; } .ui.inverted.cards > .basic.red.card, .ui.basic.inverted.red.cards > .card, .ui.basic.inverted.cards > .red.card, .ui.basic.inverted.red.card { background: #db2828; } .ui.inverted.cards a.basic.red.card:hover, .ui.basic.inverted.cards a.red.card:hover, .ui.basic.inverted.red.cards a.card:hover, .ui.link.inverted.cards .basic.red.card:not(.icon):hover, .ui.link.basic.inverted.red.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .red.card:not(.icon):hover, a.ui.basic.inverted.red.card:hover, .ui.link.basic.inverted.red.card:hover { background: #d01919; } .ui.green.cards > .card, .ui.cards > .green.card, .ui.green.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #269eab, 0 1px 3px 0 #d4d4d5; } .ui.cards a.green.card:hover, .ui.green.cards a.card:hover, .ui.link.green.cards .card:not(.icon):hover, .ui.link.cards .green.card:not(.icon):hover, a.ui.green.card:hover, .ui.link.green.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #1c8f9c, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.green.card, .ui.basic.green.cards > .card, .ui.basic.cards > .green.card, .ui.basic.green.card { background: #2ecc40; } .ui.basic.cards a.green.card:hover, .ui.cards a.basic.green.card:hover, .ui.basic.green.cards a.card:hover, .ui.link.cards .basic.green.card:not(.icon):hover, .ui.link.basic.green.cards .card:not(.icon):hover, .ui.link.basic.cards .green.card:not(.icon):hover, a.ui.basic.green.card:hover, .ui.link.basic.green.card:hover { background: #1ea92e; } .ui.inverted.green.cards > .card, .ui.inverted.cards > .green.card, .ui.inverted.green.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #2ecc40, 0 0 0 1px #555; } .ui.inverted.cards a.green.card:hover, .ui.inverted.green.cards a.card:hover, .ui.link.inverted.green.cards .card:not(.icon):hover, .ui.link.inverted.cards .green.card:not(.icon):hover, a.ui.inverted.green.card:hover, .ui.link.inverted.green.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555; } .ui.inverted.cards > .basic.green.card, .ui.basic.inverted.green.cards > .card, .ui.basic.inverted.cards > .green.card, .ui.basic.inverted.green.card { background: #269eab; } .ui.inverted.cards a.basic.green.card:hover, .ui.basic.inverted.cards a.green.card:hover, .ui.basic.inverted.green.cards a.card:hover, .ui.link.inverted.cards .basic.green.card:not(.icon):hover, .ui.link.basic.inverted.green.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .green.card:not(.icon):hover, a.ui.basic.inverted.green.card:hover, .ui.link.basic.inverted.green.card:hover { background: #1c8f9c; } .ui.teal.cards > .card, .ui.cards > .teal.card, .ui.teal.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #00b5ad, 0 1px 3px 0 #d4d4d5; } .ui.cards a.teal.card:hover, .ui.teal.cards a.card:hover, .ui.link.teal.cards .card:not(.icon):hover, .ui.link.cards .teal.card:not(.icon):hover, a.ui.teal.card:hover, .ui.link.teal.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #009c95, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.teal.card, .ui.basic.teal.cards > .card, .ui.basic.cards > .teal.card, .ui.basic.teal.card { background: #6dffff; } .ui.basic.cards a.teal.card:hover, .ui.cards a.basic.teal.card:hover, .ui.basic.teal.cards a.card:hover, .ui.link.cards .basic.teal.card:not(.icon):hover, .ui.link.basic.teal.cards .card:not(.icon):hover, .ui.link.basic.cards .teal.card:not(.icon):hover, a.ui.basic.teal.card:hover, .ui.link.basic.teal.card:hover { background: #3affff; } .ui.inverted.teal.cards > .card, .ui.inverted.cards > .teal.card, .ui.inverted.teal.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #6dffff, 0 0 0 1px #555; } .ui.inverted.cards a.teal.card:hover, .ui.inverted.teal.cards a.card:hover, .ui.link.inverted.teal.cards .card:not(.icon):hover, .ui.link.inverted.cards .teal.card:not(.icon):hover, a.ui.inverted.teal.card:hover, .ui.link.inverted.teal.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #3affff, 0 0 0 1px #555; } .ui.inverted.cards > .basic.teal.card, .ui.basic.inverted.teal.cards > .card, .ui.basic.inverted.cards > .teal.card, .ui.basic.inverted.teal.card { background: #00b5ad; } .ui.inverted.cards a.basic.teal.card:hover, .ui.basic.inverted.cards a.teal.card:hover, .ui.basic.inverted.teal.cards a.card:hover, .ui.link.inverted.cards .basic.teal.card:not(.icon):hover, .ui.link.basic.inverted.teal.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .teal.card:not(.icon):hover, a.ui.basic.inverted.teal.card:hover, .ui.link.basic.inverted.teal.card:hover { background: #009c95; } .ui.blue.cards > .card, .ui.cards > .blue.card, .ui.blue.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #2185d0, 0 1px 3px 0 #d4d4d5; } .ui.cards a.blue.card:hover, .ui.blue.cards a.card:hover, .ui.link.blue.cards .card:not(.icon):hover, .ui.link.cards .blue.card:not(.icon):hover, a.ui.blue.card:hover, .ui.link.blue.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.blue.card, .ui.basic.blue.cards > .card, .ui.basic.cards > .blue.card, .ui.basic.blue.card { background: #54c8ff; } .ui.basic.cards a.blue.card:hover, .ui.cards a.basic.blue.card:hover, .ui.basic.blue.cards a.card:hover, .ui.link.cards .basic.blue.card:not(.icon):hover, .ui.link.basic.blue.cards .card:not(.icon):hover, .ui.link.basic.cards .blue.card:not(.icon):hover, a.ui.basic.blue.card:hover, .ui.link.basic.blue.card:hover { background: #21b8ff; } .ui.inverted.blue.cards > .card, .ui.inverted.cards > .blue.card, .ui.inverted.blue.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #54c8ff, 0 0 0 1px #555; } .ui.inverted.cards a.blue.card:hover, .ui.inverted.blue.cards a.card:hover, .ui.link.inverted.blue.cards .card:not(.icon):hover, .ui.link.inverted.cards .blue.card:not(.icon):hover, a.ui.inverted.blue.card:hover, .ui.link.inverted.blue.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555; } .ui.inverted.cards > .basic.blue.card, .ui.basic.inverted.blue.cards > .card, .ui.basic.inverted.cards > .blue.card, .ui.basic.inverted.blue.card { background: #2185d0; } .ui.inverted.cards a.basic.blue.card:hover, .ui.basic.inverted.cards a.blue.card:hover, .ui.basic.inverted.blue.cards a.card:hover, .ui.link.inverted.cards .basic.blue.card:not(.icon):hover, .ui.link.basic.inverted.blue.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .blue.card:not(.icon):hover, a.ui.basic.inverted.blue.card:hover, .ui.link.basic.inverted.blue.card:hover { background: #1678c2; } .ui.purple.cards > .card, .ui.cards > .purple.card, .ui.purple.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #a333c8, 0 1px 3px 0 #d4d4d5; } .ui.cards a.purple.card:hover, .ui.purple.cards a.card:hover, .ui.link.purple.cards .card:not(.icon):hover, .ui.link.cards .purple.card:not(.icon):hover, a.ui.purple.card:hover, .ui.link.purple.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.purple.card, .ui.basic.purple.cards > .card, .ui.basic.cards > .purple.card, .ui.basic.purple.card { background: #dc73ff; } .ui.basic.cards a.purple.card:hover, .ui.cards a.basic.purple.card:hover, .ui.basic.purple.cards a.card:hover, .ui.link.cards .basic.purple.card:not(.icon):hover, .ui.link.basic.purple.cards .card:not(.icon):hover, .ui.link.basic.cards .purple.card:not(.icon):hover, a.ui.basic.purple.card:hover, .ui.link.basic.purple.card:hover { background: #cf40ff; } .ui.inverted.purple.cards > .card, .ui.inverted.cards > .purple.card, .ui.inverted.purple.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #dc73ff, 0 0 0 1px #555; } .ui.inverted.cards a.purple.card:hover, .ui.inverted.purple.cards a.card:hover, .ui.link.inverted.purple.cards .card:not(.icon):hover, .ui.link.inverted.cards .purple.card:not(.icon):hover, a.ui.inverted.purple.card:hover, .ui.link.inverted.purple.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555; } .ui.inverted.cards > .basic.purple.card, .ui.basic.inverted.purple.cards > .card, .ui.basic.inverted.cards > .purple.card, .ui.basic.inverted.purple.card { background: #a333c8; } .ui.inverted.cards a.basic.purple.card:hover, .ui.basic.inverted.cards a.purple.card:hover, .ui.basic.inverted.purple.cards a.card:hover, .ui.link.inverted.cards .basic.purple.card:not(.icon):hover, .ui.link.basic.inverted.purple.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .purple.card:not(.icon):hover, a.ui.basic.inverted.purple.card:hover, .ui.link.basic.inverted.purple.card:hover { background: #9627ba; } .ui.grey.cards > .card, .ui.cards > .grey.card, .ui.grey.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #767676, 0 1px 3px 0 #d4d4d5; } .ui.cards a.grey.card:hover, .ui.grey.cards a.card:hover, .ui.link.grey.cards .card:not(.icon):hover, .ui.link.cards .grey.card:not(.icon):hover, a.ui.grey.card:hover, .ui.link.grey.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #838383, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.grey.card, .ui.basic.grey.cards > .card, .ui.basic.cards > .grey.card, .ui.basic.grey.card { background: #dcddde; } .ui.basic.cards a.grey.card:hover, .ui.cards a.basic.grey.card:hover, .ui.basic.grey.cards a.card:hover, .ui.link.cards .basic.grey.card:not(.icon):hover, .ui.link.basic.grey.cards .card:not(.icon):hover, .ui.link.basic.cards .grey.card:not(.icon):hover, a.ui.basic.grey.card:hover, .ui.link.basic.grey.card:hover { background: #c2c4c5; } .ui.inverted.grey.cards > .card, .ui.inverted.cards > .grey.card, .ui.inverted.grey.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #dcddde, 0 0 0 1px #555; } .ui.inverted.cards a.grey.card:hover, .ui.inverted.grey.cards a.card:hover, .ui.link.inverted.grey.cards .card:not(.icon):hover, .ui.link.inverted.cards .grey.card:not(.icon):hover, a.ui.inverted.grey.card:hover, .ui.link.inverted.grey.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555; } .ui.inverted.cards > .basic.grey.card, .ui.basic.inverted.grey.cards > .card, .ui.basic.inverted.cards > .grey.card, .ui.basic.inverted.grey.card { background: #767676; } .ui.inverted.cards a.basic.grey.card:hover, .ui.basic.inverted.cards a.grey.card:hover, .ui.basic.inverted.grey.cards a.card:hover, .ui.link.inverted.cards .basic.grey.card:not(.icon):hover, .ui.link.basic.inverted.grey.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .grey.card:not(.icon):hover, a.ui.basic.inverted.grey.card:hover, .ui.link.basic.inverted.grey.card:hover { background: #838383; } .ui.black.cards > .card, .ui.cards > .black.card, .ui.black.card { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #1b1c1d, 0 1px 3px 0 #d4d4d5; } .ui.cards a.black.card:hover, .ui.black.cards a.card:hover, .ui.link.black.cards .card:not(.icon):hover, .ui.link.cards .black.card:not(.icon):hover, a.ui.black.card:hover, .ui.link.black.card:hover { box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #27292a, 0 1px 3px 0 #bcbdbd; } .ui.cards > .basic.black.card, .ui.basic.black.cards > .card, .ui.basic.cards > .black.card, .ui.basic.black.card { background: #545454; } .ui.cards > .basic.black.card .header, .ui.basic.black.cards > .card .header, .ui.basic.cards > .black.card .header, .ui.basic.black.card .header, .ui.cards > .basic.black.card .content, .ui.basic.black.cards > .card .content, .ui.basic.cards > .black.card .content, .ui.basic.black.card .content, .ui.cards > .basic.black.card .meta, .ui.basic.black.cards > .card .meta, .ui.basic.cards > .black.card .meta, .ui.basic.black.card .meta, .ui.cards > .basic.black.card .description, .ui.basic.black.cards > .card .description, .ui.basic.cards > .black.card .description, .ui.basic.black.card .description { color: #fff; } .ui.basic.cards a.black.card:hover, .ui.cards a.basic.black.card:hover, .ui.basic.black.cards a.card:hover, .ui.link.cards .basic.black.card:not(.icon):hover, .ui.link.basic.black.cards .card:not(.icon):hover, .ui.link.basic.cards .black.card:not(.icon):hover, a.ui.basic.black.card:hover, .ui.link.basic.black.card:hover { background: #000000; } .ui.inverted.black.cards > .card, .ui.inverted.cards > .black.card, .ui.inverted.black.card { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #545454, 0 0 0 1px #555; } .ui.inverted.cards a.black.card:hover, .ui.inverted.black.cards a.card:hover, .ui.link.inverted.black.cards .card:not(.icon):hover, .ui.link.inverted.cards .black.card:not(.icon):hover, a.ui.inverted.black.card:hover, .ui.link.inverted.black.card:hover { box-shadow: 0 1px 3px 0 #555, 0 2px 0 0 #000000, 0 0 0 1px #555; } .ui.inverted.cards > .basic.black.card, .ui.basic.inverted.black.cards > .card, .ui.basic.inverted.cards > .black.card, .ui.basic.inverted.black.card { background: #1b1c1d; } .ui.inverted.cards a.basic.black.card:hover, .ui.basic.inverted.cards a.black.card:hover, .ui.basic.inverted.black.cards a.card:hover, .ui.link.inverted.cards .basic.black.card:not(.icon):hover, .ui.link.basic.inverted.black.cards .card:not(.icon):hover, .ui.link.basic.inverted.cards .black.card:not(.icon):hover, a.ui.basic.inverted.black.card:hover, .ui.link.basic.inverted.black.card:hover { background: #27292a; } /* -------------- Card Count --------------- */ .ui.one.cards { margin-left: 0; margin-right: 0; } .ui.one.cards > .card { width: 100%; } .ui.two.cards { margin-left: -1em; margin-right: -1em; } .ui.two.cards > .card { width: calc(50% - 2em); margin-left: 1em; margin-right: 1em; } .ui.three.cards { margin-left: -1em; margin-right: -1em; } .ui.three.cards > .card { width: calc(33.33333333333333% - 2em); margin-left: 1em; margin-right: 1em; } .ui.four.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.four.cards > .card { width: calc(25% - 1.5em); margin-left: 0.75em; margin-right: 0.75em; } .ui.five.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.five.cards > .card { width: calc(20% - 1.5em); margin-left: 0.75em; margin-right: 0.75em; } .ui.six.cards { margin-left: -0.75em; margin-right: -0.75em; } .ui.six.cards > .card { width: calc(16.666666666666664% - 1.5em); margin-left: 0.75em; margin-right: 0.75em; } .ui.seven.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.seven.cards > .card { width: calc(14.285714285714285% - 1em); margin-left: 0.5em; margin-right: 0.5em; } .ui.eight.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.eight.cards > .card { width: calc(12.5% - 1em); margin-left: 0.5em; margin-right: 0.5em; font-size: 11px; } .ui.ten.cards { margin-left: -0.5em; margin-right: -0.5em; } .ui.ten.cards > .card { width: calc(10% - 1em); margin-left: 0.5em; margin-right: 0.5em; } /* ------------------- Doubling -------------------- */ /* Mobile Only */ /* Tablet Only */ /* ------------------- Stackable -------------------- */ @media only screen and (max-width: 767.98px) { .ui.stackable.cards { display: block !important; } .ui.stackable.cards .card:first-child { margin-top: 0 !important; } .ui.stackable.cards > .card { display: block !important; height: auto !important; margin: 1em 1em; padding: 0 !important; width: calc(100% - 2em) !important; } } /* -------------- Size --------------- */ .ui.cards > .card { font-size: 1em; } .ui.mini.card, .ui.mini.cards .card { font-size: 0.8rem; } .ui.tiny.card, .ui.tiny.cards .card { font-size: 0.86666667rem; } .ui.small.card, .ui.small.cards .card { font-size: 0.93333333rem; } .ui.large.card, .ui.large.cards .card { font-size: 1.13333333rem; } .ui.big.card, .ui.big.cards .card { font-size: 1.26666667rem; } .ui.huge.card, .ui.huge.cards .card { font-size: 1.4rem; } .ui.massive.card, .ui.massive.cards .card { font-size: 1.73333333rem; } /* ----------------- Inverted ------------------ */ .ui.inverted.cards > .card, .ui.inverted.card { background: #1b1c1d; box-shadow: 0 1px 3px 0 #555, 0 0 0 1px #555; } /* Content */ .ui.inverted.cards > .card > .content, .ui.inverted.card > .content { border-top: 1px solid rgba(255, 255, 255, 0.15); } /* Header */ .ui.inverted.cards > .card > .content > .header, .ui.inverted.card > .content > .header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.cards > .card > .content > a.header, .ui.inverted.card > .content > a.header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.cards > .card > .content > a.header:hover, .ui.inverted.card > .content > a.header:hover { color: #18646c; } /* Description */ .ui.inverted.cards > .card > .content > .description, .ui.inverted.card > .content > .description { color: rgba(255, 255, 255, 0.8); } /* Meta */ .ui.inverted.cards > .card .meta, .ui.inverted.card .meta { color: rgba(255, 255, 255, 0.7); } .ui.inverted.cards > .card .meta > a:not(.ui), .ui.inverted.card .meta > a:not(.ui) { color: rgba(255, 255, 255, 0.7); } .ui.inverted.cards > .card .meta > a:not(.ui):hover, .ui.inverted.card .meta > a:not(.ui):hover { color: #ffffff; } /* Extra */ .ui.inverted.cards > .card > .extra, .ui.inverted.card > .extra { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.7); } .ui.inverted.cards > .card > .extra a:not(.ui), .ui.inverted.card > .extra a:not(.ui) { color: rgba(255, 255, 255, 0.5); } .ui.inverted.cards > .card > .extra a:not(.ui):hover, .ui.inverted.card > .extra a:not(.ui):hover { color: #18646c; } /* Link card(s) */ .ui.inverted.cards a.card:hover, .ui.inverted.link.cards .card:not(.icon):hover, a.inverted.ui.card:hover, .ui.inverted.link.card:hover { background: #1b1c1d; } /* Loading */ .ui.inverted.loading.card { color: #fff; } .ui.inverted.loading.card::before { background: rgba(0, 0, 0, 0.85); } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Fomantic-UI - Feed * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Feed *******************************/ /* ------------------- Feed -------------------- */ /* ------------------- Elements -------------------- */ /* Event */ /* Event Label */ /* Icon Label */ /* Image Label */ /* Text Label */ /* Ui 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 -------------------- */ /* Connected */ /* Divided */ /* Ordered */ /* Inverted */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Activity Feed *******************************/ .ui.feed { margin: 1em 0; } .ui.feed:first-child { margin-top: 0; } .ui.feed:last-child { margin-bottom: 0; } /******************************* Content *******************************/ /* Event */ .ui.feed > .event { display: flex; flex-direction: row; width: 100%; padding: 0.2rem 0; margin: 0; background: none; } .ui.feed > .event:not(:first-child) { border-top: none; } .ui.feed:not(.connected) > .event:first-child { padding-top: 0; } .ui.feed > .event:last-child { padding-bottom: 0; } /* Event Label */ .ui.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 { opacity: 1; font-size: 1.5em; width: 100%; padding: 0.25em; background: none; border: none; border-radius: 0; color: rgba(0, 0, 0, 0.6); } .ui.feed > .event > .label img { width: 100%; height: auto; border-radius: 500rem; } .ui.feed > .event > .label > .text { display: block; text-align: center; margin-top: 0.5em; } .ui.feed > .event > .label > .text.ui { margin-top: 0.65em; } .ui.feed > .event > .label > .ui.label { margin-top: 0.4em; position: relative; z-index: 1; } .ui.feed > .event > .label + .content { margin: 0.5em 0 0.33333333em 1.13333333em; } /* -------------- Content --------------- */ /* Content */ .ui.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 { padding-bottom: 0; } /* Link */ .ui.feed > .event > .content a { cursor: pointer; } /* -------------- Date --------------- */ .ui.feed > .event > .content .date { margin: -0.5rem 0 0; padding: 0; color: rgba(0, 0, 0, 0.4); font-weight: normal; font-size: 1em; font-style: normal; } /* -------------- Summary --------------- */ .ui.feed > .event > .content .summary { margin: 0; font-size: 1em; font-weight: normal; color: rgba(0, 0, 0, 0.87); } /* Summary Image */ .ui.feed > .event > .content .summary img { display: inline-block; width: auto; height: 10em; margin: -0.25em 0.25em 0 0; border-radius: 0.25em; vertical-align: middle; } /* -------------- Inline Date --------------- */ /* Date inside Summary */ .ui.feed > .event > .content .summary > .date { display: inline-block; font-weight: normal; font-size: 0.86666667em; font-style: normal; margin: 0 0 0 0.5em; padding: 0; color: rgba(0, 0, 0, 0.4); } .ui.feed > .event > .content .summary > .date:not(.floated) { float: none; } /* -------------- User --------------- */ .ui.feed > .event > .content .user { display: inline-block; font-weight: bold; margin-right: 0; vertical-align: baseline; } .ui.feed > .event > .content .user img { margin: -0.25em 0.25em 0 0; width: auto; height: 10em; vertical-align: middle; } /* -------------- Extra Summary --------------- */ .ui.feed > .event > .content .extra { margin: 0.5em 0 0; background: none; padding: 0; color: rgba(0, 0, 0, 0.87); } /* Images */ .ui.feed > .event > .content .extra.images img { display: inline-block; margin: 0 0.25em 0 0; width: 6em; } /* Text */ .ui.feed > .event > .content .extra.text { padding: 0; border-left: none; font-size: 1em; max-width: 500px; line-height: 1.7; } /* -------------- Meta --------------- */ .ui.feed > .event > .content .meta { display: inline-block; font-size: 0.86666667em; margin: 0.5em 0 0; background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; color: rgba(0, 0, 0, 0.6); } .ui.feed > .event > .content .meta > * { position: relative; margin-left: 0.75em; } .ui.feed > .event > .content .meta > *::after { content: ""; color: rgba(0, 0, 0, 0.2); top: 0; left: -1em; opacity: 1; position: absolute; vertical-align: top; } .ui.feed > .event > .content .meta .like { color: ""; transition: 0.2s color ease; } .ui.feed > .event > .content .meta .like:hover i.icon { color: #ff2733; } .ui.feed > .event > .content .meta .active.like i.icon { color: #ef404a; } /* First element */ .ui.feed > .event > .content .meta > :first-child { margin-left: 0; } .ui.feed > .event > .content .meta > :first-child::after { display: none; } /* Action */ .ui.feed > .event > .content .meta a, .ui.feed > .event > .content .meta > i.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 i.icon, .ui.feed > .event > .content .meta > i.icon:hover { color: rgba(0, 0, 0, 0.95); } /******************************* Variations *******************************/ /* rtl:rename */ .ui.feed .right.floated { float: right; } .ui.connected.feed > .event { position: relative; } .ui.connected.feed > .event:not(:last-child)::before { border-left: 2px solid rgba(34, 36, 38, 0.15); content: ""; left: 1.2em; position: absolute; top: 2.1em; height: calc(100% - 1.5em); } .ui.connected.feed > .event > .label { position: relative; } .ui.inverted.connected.feed > .event::before { border-left-color: rgba(255, 255, 255, 0.1); } .ui.divided.feed > .event:not(:first-child) { border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.inverted.divided.feed > .event { border-top-color: rgba(255, 255, 255, 0.1); } .ui.ui.feed > .event > .label[data-text]::before { content: attr(data-text); } .ui.feed > .event > .label[data-text]::before { text-align: center; line-height: 1; height: 2.5em; background: #bbbbbb; color: #fff; border-radius: 50%; padding-top: 0.6em; position: relative; display: block; margin-bottom: 0.3em; border: 2px solid transparent; } /* workaround until all browsers support :has() */ .ui.connected.labeled.feed > .event::before, .ui.connected.feed > .labeled.event::before { top: 4.85em; height: calc(100% - 4.6499999999999995em); } @supports selector(:has(.f)) { .ui.connected.feed > .event:has(> .label[data-text] > *)::before { top: 4.85em; height: calc(100% - 4.6499999999999995em); } } .ui.feed { font-size: 1rem; } .ui.mini.feed { font-size: 0.8rem; } .ui.tiny.feed { font-size: 0.86666667rem; } .ui.small.feed { font-size: 0.93333333rem; } .ui.large.feed { font-size: 1.13333333rem; } .ui.big.feed { font-size: 1.26666667rem; } .ui.huge.feed { font-size: 1.4rem; } .ui.massive.feed { font-size: 1.73333333rem; } /* ------------------ Inverted ------------------- */ .ui.inverted.feed > .event { background: #1b1c1d; } .ui.inverted.feed > .event > .label i.icon { color: rgba(255, 255, 255, 0.7); } .ui.inverted.feed > .event > .label .text:not(.ui) { color: #fff; } .ui.inverted.feed > .event > .content .date, .ui.inverted.feed > .event > .content .meta .like { color: rgba(255, 255, 255, 0.7); } .ui.inverted.feed > .event > .content .summary, .ui.inverted.feed > .event > .content .extra.text { color: rgba(255, 255, 255, 0.9); } .ui.inverted.feed > .event > .content .meta .like:hover { color: #ffffff; } .ui.inverted.feed > .event > .content .meta .active.like i.icon { color: rgba(255, 255, 255, 0.7); } /* Action */ .ui.inverted.feed > .event > .content .meta a, .ui.inverted.feed > .event > .content .meta > i.icon { color: rgba(255, 255, 255, 0.7); } .ui.inverted.feed > .event > .content .meta a:hover, .ui.inverted.feed > .event > .content .meta a:hover i.icon, .ui.inverted.feed > .event > .content .meta > i.icon:hover { color: #ffffff; } /* -------------- Colors --------------- */ .ui.ui.feed > .event > .primary.label::before, .ui.primary.feed > .event > .label::before { background: #0e3f47; } .ui.primary.connected.feed > .event::before, .ui.connected.feed > .primary.event::before { border-color: #0e3f47; } .ui.inverted.primary.connected.feed > .event::before, .ui.connected.feed > .inverted.primary.event::before { border-color: #54c8ff; } .ui.ui.feed > .event > .primary.basic.label::before, .ui.primary.basic.feed > .event > .label::before { color: #0e3f47; } .ui.feed > .event > .inverted.primary.label::before, .ui.inverted.primary.feed > .event > .label::before { background: #54c8ff; } .ui.feed > .event > .inverted.primary.basic.label::before, .ui.inverted.primary.basic.feed > .event > .label::before { color: #54c8ff; } .ui.ui.feed > .event > .secondary.label::before, .ui.secondary.feed > .event > .label::before { background: #1b1c1d; } .ui.secondary.connected.feed > .event::before, .ui.connected.feed > .secondary.event::before { border-color: #1b1c1d; } .ui.inverted.secondary.connected.feed > .event::before, .ui.connected.feed > .inverted.secondary.event::before { border-color: #545454; } .ui.ui.feed > .event > .secondary.basic.label::before, .ui.secondary.basic.feed > .event > .label::before { color: #1b1c1d; } .ui.feed > .event > .inverted.secondary.label::before, .ui.inverted.secondary.feed > .event > .label::before { background: #545454; } .ui.feed > .event > .inverted.secondary.basic.label::before, .ui.inverted.secondary.basic.feed > .event > .label::before { color: #545454; } .ui.ui.feed > .event > .red.label::before, .ui.red.feed > .event > .label::before { background: #db2828; } .ui.red.connected.feed > .event::before, .ui.connected.feed > .red.event::before { border-color: #db2828; } .ui.inverted.red.connected.feed > .event::before, .ui.connected.feed > .inverted.red.event::before { border-color: #ff695e; } .ui.ui.feed > .event > .red.basic.label::before, .ui.red.basic.feed > .event > .label::before { color: #db2828; } .ui.feed > .event > .inverted.red.label::before, .ui.inverted.red.feed > .event > .label::before { background: #ff695e; } .ui.feed > .event > .inverted.red.basic.label::before, .ui.inverted.red.basic.feed > .event > .label::before { color: #ff695e; } .ui.ui.feed > .event > .green.label::before, .ui.green.feed > .event > .label::before { background: #269eab; } .ui.green.connected.feed > .event::before, .ui.connected.feed > .green.event::before { border-color: #269eab; } .ui.inverted.green.connected.feed > .event::before, .ui.connected.feed > .inverted.green.event::before { border-color: #2ecc40; } .ui.ui.feed > .event > .green.basic.label::before, .ui.green.basic.feed > .event > .label::before { color: #269eab; } .ui.feed > .event > .inverted.green.label::before, .ui.inverted.green.feed > .event > .label::before { background: #2ecc40; } .ui.feed > .event > .inverted.green.basic.label::before, .ui.inverted.green.basic.feed > .event > .label::before { color: #2ecc40; } .ui.ui.feed > .event > .teal.label::before, .ui.teal.feed > .event > .label::before { background: #00b5ad; } .ui.teal.connected.feed > .event::before, .ui.connected.feed > .teal.event::before { border-color: #00b5ad; } .ui.inverted.teal.connected.feed > .event::before, .ui.connected.feed > .inverted.teal.event::before { border-color: #6dffff; } .ui.ui.feed > .event > .teal.basic.label::before, .ui.teal.basic.feed > .event > .label::before { color: #00b5ad; } .ui.feed > .event > .inverted.teal.label::before, .ui.inverted.teal.feed > .event > .label::before { background: #6dffff; } .ui.feed > .event > .inverted.teal.basic.label::before, .ui.inverted.teal.basic.feed > .event > .label::before { color: #6dffff; } .ui.ui.feed > .event > .blue.label::before, .ui.blue.feed > .event > .label::before { background: #2185d0; } .ui.blue.connected.feed > .event::before, .ui.connected.feed > .blue.event::before { border-color: #2185d0; } .ui.inverted.blue.connected.feed > .event::before, .ui.connected.feed > .inverted.blue.event::before { border-color: #54c8ff; } .ui.ui.feed > .event > .blue.basic.label::before, .ui.blue.basic.feed > .event > .label::before { color: #2185d0; } .ui.feed > .event > .inverted.blue.label::before, .ui.inverted.blue.feed > .event > .label::before { background: #54c8ff; } .ui.feed > .event > .inverted.blue.basic.label::before, .ui.inverted.blue.basic.feed > .event > .label::before { color: #54c8ff; } .ui.ui.feed > .event > .purple.label::before, .ui.purple.feed > .event > .label::before { background: #a333c8; } .ui.purple.connected.feed > .event::before, .ui.connected.feed > .purple.event::before { border-color: #a333c8; } .ui.inverted.purple.connected.feed > .event::before, .ui.connected.feed > .inverted.purple.event::before { border-color: #dc73ff; } .ui.ui.feed > .event > .purple.basic.label::before, .ui.purple.basic.feed > .event > .label::before { color: #a333c8; } .ui.feed > .event > .inverted.purple.label::before, .ui.inverted.purple.feed > .event > .label::before { background: #dc73ff; } .ui.feed > .event > .inverted.purple.basic.label::before, .ui.inverted.purple.basic.feed > .event > .label::before { color: #dc73ff; } .ui.ui.feed > .event > .grey.label::before, .ui.grey.feed > .event > .label::before { background: #767676; } .ui.grey.connected.feed > .event::before, .ui.connected.feed > .grey.event::before { border-color: #767676; } .ui.inverted.grey.connected.feed > .event::before, .ui.connected.feed > .inverted.grey.event::before { border-color: #dcddde; } .ui.ui.feed > .event > .grey.basic.label::before, .ui.grey.basic.feed > .event > .label::before { color: #767676; } .ui.feed > .event > .inverted.grey.label::before, .ui.inverted.grey.feed > .event > .label::before { background: #dcddde; } .ui.feed > .event > .inverted.grey.basic.label::before, .ui.inverted.grey.basic.feed > .event > .label::before { color: #dcddde; } .ui.ui.feed > .event > .black.label::before, .ui.black.feed > .event > .label::before { background: #1b1c1d; } .ui.black.connected.feed > .event::before, .ui.connected.feed > .black.event::before { border-color: #1b1c1d; } .ui.inverted.black.connected.feed > .event::before, .ui.connected.feed > .inverted.black.event::before { border-color: #545454; } .ui.ui.feed > .event > .black.basic.label::before, .ui.black.basic.feed > .event > .label::before { color: #1b1c1d; } .ui.feed > .event > .inverted.black.label::before, .ui.inverted.black.feed > .event > .label::before { background: #545454; } .ui.feed > .event > .inverted.black.basic.label::before, .ui.inverted.black.basic.feed > .event > .label::before { color: #545454; } .ui.ui.feed > .event > .basic.label::before, .ui.ui.ui.basic.feed > .event > .label::before { background: transparent; border-color: currentColor; } .ui.disabled.feed, .ui.feed .disabled.event { opacity: 0.45; pointer-events: none; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /*! * # Fomantic-UI - Item * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 */ /* Inverted */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Standard *******************************/ /* -------------- Item --------------- */ .ui.items > .item { display: flex; margin: 1em 0; width: 100%; min-height: 0; background: transparent; padding: 0; border: none; border-radius: 0; box-shadow: none; transition: box-shadow 0.1s ease; z-index: ""; } .ui.items > .item a { cursor: pointer; } /* -------------- Items --------------- */ .ui.items { margin: 1.5em 0; } .ui.items:first-child { margin-top: 0 !important; } .ui.items:last-child { margin-bottom: 0 !important; } /* -------------- Item --------------- */ .ui.items > .item::after { display: block; content: " "; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item:first-child { margin-top: 0; } .ui.items > .item:last-child { margin-bottom: 0; } /* -------------- Images --------------- */ .ui.items > .item > .image { position: relative; flex: 0 0 auto; display: block; float: none; margin: 0; padding: 0; max-height: ""; align-self: start; } .ui.items > .item > .image > img { display: block; width: 100%; height: auto; border-radius: 0.125rem; border: none; } .ui.items > .item > .image:only-child > img { border-radius: 0; } /* -------------- Content --------------- */ .ui.items > .item > .content { display: block; flex: 1 1 auto; background: none; color: rgba(0, 0, 0, 0.87); margin: 0; padding: 0; box-shadow: none; font-size: 1em; border: none; border-radius: 0; } .ui.items > .item > .content::after { display: block; content: " "; height: 0; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item > .image + .content { min-width: 0; width: auto; display: block; margin-left: 0; align-self: start; padding-left: 1.5em; } .ui.items > .item > .content > .header { display: inline-block; margin: -0.35em 0 0; font-family: a-otf-ud-shin-go-pr6n, 'Hiragino Kaku Gothic Pro', Meiryo, Helvetica, Arial, sans-serif; font-weight: bold; color: rgba(0, 0, 0, 0.85); } /* Default Header Size */ .ui.items > .item > .content > .header:not(.ui) { font-size: 1.26666667em; } /* -------------- Floated --------------- */ .ui.items > .item [class*="left floated"] { float: left; } .ui.items > .item [class*="right floated"] { float: right; } /* -------------- Content Image --------------- */ .ui.items > .item .content img { align-self: center; width: ""; } .ui.items > .item img.avatar, .ui.items > .item .avatar img { width: ""; height: ""; border-radius: 500rem; } /* -------------- Description --------------- */ .ui.items > .item > .content > .description { margin-top: 0.6em; max-width: none; font-size: 1em; line-height: 1.7; color: rgba(0, 0, 0, 0.87); } /* -------------- Paragraph --------------- */ .ui.items > .item > .content p { margin: 0 0 0.5em; } .ui.items > .item > .content p:last-child { margin-bottom: 0; } /* -------------- Meta --------------- */ .ui.items > .item .meta { margin: 0.5em 0 0.5em; font-size: 1em; line-height: 1em; color: rgba(0, 0, 0, 0.6); } .ui.items > .item .meta * { margin-right: 0.3em; } .ui.items > .item .meta :last-child { margin-right: 0; } .ui.items > .item .meta [class*="right floated"] { margin-right: 0; margin-left: 0.3em; } /* -------------- Links --------------- */ /* Generic */ .ui.items > .item > .content a:not(.ui) { color: ""; transition: color 0.1s ease; } .ui.items > .item > .content a:not(.ui):hover { color: ""; } /* Header */ .ui.items > .item > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.items > .item > .content > a.header:hover { color: #18646c; } /* Meta */ .ui.items > .item .meta > a:not(.ui) { color: rgba(0, 0, 0, 0.4); } .ui.items > .item .meta > a:not(.ui):hover { color: rgba(0, 0, 0, 0.87); } /* -------------- Labels --------------- */ /* -----Star----- */ /* Icon */ .ui.items > .item > .content .favorite.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .favorite.icon:hover { opacity: 1; color: #ffb70a; } .ui.items > .item > .content .active.favorite.icon { color: #ffe623; } /* -----Like----- */ /* Icon */ .ui.items > .item > .content .like.icon { cursor: pointer; opacity: 0.75; transition: color 0.1s ease; } .ui.items > .item > .content .like.icon:hover { opacity: 1; color: #ff2733; } .ui.items > .item > .content .active.like.icon { color: #ff2733; } /* ---------------- Extra Content ----------------- */ .ui.items > .item .extra { display: block; position: relative; background: none; margin: 0.5rem 0 0; width: 100%; padding: 0; top: 0; left: 0; color: rgba(0, 0, 0, 0.4); box-shadow: none; transition: color 0.1s ease; border-top: none; } .ui.items > .item .extra > * { margin: 0.25rem 0.5rem 0.25rem 0; } .ui.items > .item .extra > [class*="right floated"] { margin: 0.25rem 0 0.25rem 0.5rem; } .ui.items > .item .extra::after { display: block; content: " "; height: 0; clear: both; overflow: hidden; visibility: hidden; } /******************************* Responsive *******************************/ /* Default Image Width */ .ui.items > .item > .image:not(.ui) { width: 175px; } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.items > .item { margin: 1em 0; } .ui.items > .item > .image:not(.ui) { width: 150px; } .ui.items > .item > .image + .content { display: block; padding: 0 0 0 1em; } } /* Mobile Only */ @media only screen and (max-width: 767.98px) { .ui.items:not(.unstackable) > .item { flex-direction: column; margin: 2em 0; } .ui.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 { max-width: 100% !important; width: auto !important; max-height: 250px !important; } .ui.items:not(.unstackable) > .item > .image + .content { display: block; padding: 1.5em 0 0; } } /******************************* Variations *******************************/ /* ------------------- Aligned -------------------- */ .ui.items > .item > .image + [class*="top aligned"].content { align-self: flex-start; } .ui.items > .item > .image + [class*="middle aligned"].content { align-self: center; } .ui.items > .item > .image + [class*="bottom aligned"].content { align-self: flex-end; } /* -------------- Relaxed --------------- */ .ui.relaxed.items > .item { margin: 1.5em 0; } .ui[class*="very relaxed"].items > .item { margin: 2em 0; } /* ------------------- Divided -------------------- */ .ui.divided.items > .item { border-top: 1px solid rgba(34, 36, 38, 0.15); margin: 0; padding: 1em 0; } .ui.divided.items > .item:first-child { border-top: none; margin-top: 0 !important; padding-top: 0 !important; } .ui.divided.items > .item:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Relaxed Divided */ .ui.relaxed.divided.items > .item { margin: 0; padding: 1.5em 0; } .ui[class*="very relaxed"].divided.items > .item { margin: 0; padding: 2em 0; } /* ------------------- Link -------------------- */ .ui.items a.item:hover, .ui.link.items > .item:hover { cursor: pointer; } .ui.items a.item:hover .content .header, .ui.link.items > .item:hover .content .header { color: #18646c; } /* -------------- Size --------------- */ .ui.items > .item { font-size: 1em; } .ui.mini.items > .item { font-size: 0.8em; } .ui.tiny.items > .item { font-size: 0.86666667em; } .ui.small.items > .item { font-size: 0.93333333em; } .ui.large.items > .item { font-size: 1.13333333em; } .ui.big.items > .item { font-size: 1.26666667em; } .ui.huge.items > .item { font-size: 1.4em; } .ui.massive.items > .item { font-size: 1.73333333em; } /* --------------- Unstackable ---------------- */ /* -------------- Inverted --------------- */ .ui.inverted.items > .item { background: transparent; } .ui.inverted.items > .item > .content { background: none; color: rgba(255, 255, 255, 0.9); } .ui.inverted.items > .item .extra { background: none; } .ui.inverted.items > .item > .content > .header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.items > .item > .content > .description { color: rgba(255, 255, 255, 0.9); } .ui.inverted.items > .item .meta { color: rgba(255, 255, 255, 0.8); } .ui.inverted.items > .item > .content a:not(.ui) { color: #0ee0f7; } .ui.inverted.items > .item > .content a:not(.ui):hover { color: #269eab; } .ui.inverted.items > .item > .content > a.header { color: rgba(255, 255, 255, 0.9); } .ui.inverted.items > .item > .content > a.header:hover { color: #ffffff; } .ui.inverted.items > .item .meta > a:not(.ui) { color: rgba(255, 255, 255, 0.7); } .ui.inverted.items > .item .meta > a:not(.ui):hover { color: rgba(255, 255, 255, 0.9); } .ui.inverted.items > .item > .content .favorite.icon:hover { color: #ffc63d; } .ui.inverted.items > .item > .content .active.favorite.icon { color: #ffec56; } .ui.inverted.items > .item > .content .like.icon:hover { color: #ff5a63; } .ui.inverted.items > .item > .content .active.like.icon { color: #ff5a63; } .ui.inverted.items > .item .extra { color: rgba(255, 255, 255, 0.7); } .ui.inverted.items a.item:hover .content .header, .ui.inverted.link.items > .item:hover .content .header { color: #ffffff; } .ui.inverted.divided.items > .item { border-top: 1px solid rgba(255, 255, 255, 0.1); } .ui.inverted.divided.items > .item:first-child { border-top: none; } .ui.disabled.items, .ui.items > .disabled.item { opacity: 0.45; pointer-events: none; } /******************************* Theme Overrides *******************************/ /******************************* User Variable Overrides *******************************/ /* Modules */ /*! * # Fomantic-UI - Checkbox * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- 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 -------------------- */ /* Invisible */ /* Inverted */ /* Packaged Theme */ /* Site Theme */ /******************************* User Variable Overrides *******************************/ /* ------------------------- Central Color Map ------------------------- */ /* Default */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged colors.less */ /*********************************************************** Central Color Mapping Base for all components to iterate ***********************************************************/ /*********************************************************** Color Mapping Base for form components to iterate ***********************************************************/ /* Packaged Theme */ /* Site Theme */ /******************************* Mix-ins *******************************/ /* ------------------ Fonts ------------------- */ /* ------------------ Overrides ------------------- */ /* End Config */ /******************************* Checkbox *******************************/ /* -------------- Content --------------- */ /* HTML Checkbox */ /* -------------- Checkmark --------------- */ /* -------------- Label --------------- */ /* Inside */ /* Outside */ /******************************* States *******************************/ /* -------------- Hover --------------- */ /* -------------- Down --------------- */ /* -------------- Focus --------------- */ /* -------------- Active --------------- */ /* -------------- Indeterminate --------------- */ /* -------------- Active Focus --------------- */ /* -------------- Read-Only --------------- */ /* -------------- Disabled --------------- */ /* -------------- Hidden --------------- */ /* Initialized checkbox moves input below element to prevent manually triggering */ /* Selectable Label */ /******************************* Types *******************************/ /* -------------- Radio --------------- */ /* Box */ /* Bullet */ /* Focus */ /* Indeterminate */ /* Active */ /* Active Focus */ /* -------------- Slider --------------- */ /* Input */ /* Label */ /* Line */ /* Handle */ /* Focus */ /* Hover */ /* Active */ /* Active Focus */ /* -------------- Toggle --------------- */ /* Input */ /* Label */ /* Switch */ /* Handle */ /* Focus */ /* Hover */ /* Active */ /* Active Focus */ /******************************* Variations *******************************/ /* -------------- Fitted --------------- */ /* -------------- Inverted --------------- */ /* Hover */ /* Slider Label */ /* Slider Line */ /* Slider Hover */ /* Slider Active */ /* Slider Active Focus */ /* Toggle Switch */ /* Toggle Hover */ /* Toggle Active */ /* Toggle Active Focus */ /* -------------- Invisible --------------- */ /* -------------------- Size --------------------- */ /******************************* Theme Overrides *******************************/ @font-face { font-family: Checkbox; src: url("data:application/font-woff;base64,d09GRgABAAAAAAR8AA0AAAAABtwAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEYAAAABoAAAAcgbCWJ0dERUYAAARIAAAAFwAAABgAJQAAT1MvMgAAAZgAAABAAAAAYA8SBD9jbWFwAAAB9AAAAFMAAAFc71zo6Wdhc3AAAARAAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAADJAAABVHshwGBoZWFkAAABMAAAAC4AAAA2Bj3tWWhoZWEAAAFgAAAAHQAAACQHfQPIaG10eAAAAdgAAAAZAAAAHg56AEVsb2NhAAACSAAAABIAAAASAQoAjG1heHAAAAGAAAAAGAAAACAACgAvbmFtZQAAAygAAADnAAABp5xOC4Fwb3N0AAAEEAAAADAAAABaHRtWW3icY2BkYGBgYmDgqbAVjee3+crAzcIAAhc3XilHppl3M+cBKQ6QWgYGAAHnCVsAAHicY2BkYGA+8P8AAwMLAwgw72ZgZEAF7ABaJgNOAAAAeJxjYGRgYOBg0GUA0QwMTAxoAAAFtQA6eJxjYGYWYpzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgF0AQYHBgYXjAxH/h/gMGB+QCIx8CIJKvAwAgAIOcKW3icY2GAAMZQCM0ExCwMDK7MqiAeAAqXAM4AAAB4nN2NwQ2AMAwDL00pHYJH52AQ9n/w6BbFCS9WwJFlO3IUwHl5YAQuJctcOaVdU6TGmGWt7IxJuHXnvmcrnLPR2GWb6NnF4rrwhT5U/o0Hf5EJGAAAAAAAAAgACAAQABgASABsAKoAAHichY09CsJAEIVndiG2gyQ7IASJIbHQyvyIiFhZpBE8iNsIeiVvYOFx7FPbKE6yUcHGgZ23jzd8DxDeowAWCv77Dez0Vd1hAIB+D714NMa0yNdYZrMhum0CfaWnT4bpeSPaEjOd8djIltTBNBlhSGzES3Jqb5oW6UOrE1WBL7/A73lxNBqnK8znZRbNWMgJET8qJhlWF1HV3zvXSceBSifawrTjTLrd0uI3c4lFu4UcYvbh1/KsIaodUayx7Kxr+wb8Y+EFi+YsngAAAHicfc5BSsNAGMXxf9q0agURFy50M3shlOoNikIXddGFa5N0SEvLDKQp2KUH8AxuXXkkz+JL+NYJJPzmffNmAlzxS0L7JJxzYx5wxoN5qPzZnMrv5hGXfJrHyr/NE+74UytJL5Rcdye0Huiue/NQ+aM5lV/NI27ZmsfKv8wTnvhhzgZPyY6CyAfMN77cFVFaaVBxZE9OraWvjvtc6Kn0jN40qDnoVyIBx4yMqWJfH7YxuFk27a2/dLVGxUpbQndYrrVnrazgpO9C1chSb7s3UymGxlU++Dpv/NoVJ7co4zLGkPEPj0VARQB4nGNgYsAPOBgYGJkYmBiZGZgZWRhZGdnYS/MyDYAAShuCaFcLCB9Iw/hGAOPdCuMAAQAB//8AD3icY2BkYGDgAWIBIGYCYhYIDQACOwAmAHicY2BgYGQAgns+by1A9MWNV8phNABQ5wfrAAA=") format("woff"); } /* Checkmark */ /* Checked */ /* Indeterminate */ /* UTF Reference .check::before { content: '\e800'; } .dash::before { content: '\e801'; } .plus::before { content: '\e802'; } */ /******************************* Site Overrides *******************************/ /*! * # Fomantic-UI - Dropdown * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://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 *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Packaged site.variables */ /******************************* Site Settings *******************************/ /*********************************************************** Central element variation compilation enablers ***********************************************************/ /* General */ /******************************* Elements *******************************/ /* Button */ /* Container */ /* Divider */ /* Header */ /* Icon */ /* Font Awesome Pro only */ /* Font Awesome Pro only */ /* Image */ /* Input */ /* Label */ /* List */ /* Loader */ /* Placeholder */ /* Rail */ /* Reveal */ /* Segment */ /* Step */ /* Text */ /******************************* Collections *******************************/ /* Breadcrumb */ /* Form */ /* Grid */ /* Menu */ /* Message */ /* Table */ /******************************* Views *******************************/ /* Ad */ /* Card */ /* Comment */ /* Feed */ /* Item */ /* Statistic */ /******************************* Modules *******************************/ /* Accordion */ /* Calendar */ /* Checkbox */ /* Dimmer */ /* Dropdown */ /* Embed */ /* Flyout */ /* Modal */ /* Nag */ /* Popup */ /* Progress */ /* Rating */ /* Search */ /* Shape */ /* Sidebar */ /* Slider */ /* Tab */ /* Toast */ /* Transition */ /* Emojis */ /* ------------------- 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 -------------------- */ /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */ /* -------------- Page Heading --------------- */ /* -------------- Form Input --------------- */ /* This adjusts the default form input across all elements */ /* Input Text Color */ /* Line Height Default For Inputs in Browser (Descenders 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 */ /* IE needs hex values */ /* Scrolling */ /* ------------------- Highlighted Text -------------------- */ /* ------------------- Loader -------------------- */ /* ------------------- Grid -------------------- */ /* ------------------- Transitions -------------------- */ /* ------------------- Breakpoints -------------------- */ /* ------------------- Site Colors -------------------- */ /* --- Colors --- */ /* --- Light Colors --- */ /* --- Neutrals --- */ /* --- Colored Backgrounds --- */ /* --- Colored Headers --- */ /* --- Colored Text --- */ /* --- Light Colored Text --- */ /* --- Hovered Colored Text --- */ /* --- Colored Border --- */ /* --- Shadows --- */ /* Inverted */ /* Box Shadows */ /* ------------------- 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 --- */ /* --- Tertiary --- */ /* --- Bright --- */ /******************************* States shared in Form-related components *******************************/ /* Form state */ /* Input state */ /* AutoFill */ /* Dropdown state */ /* Focused state */ /* Placeholder state */ /* Component's site.variables */ /* Site theme site.variables */ /******************************* User Global Variables *******************************/ /* Abel Ropa Sans News Cycle Gudea */ /* ------------------- Component Variables --------------------- */ /* Default */ /******************************* Dropdown *******************************/ /* ------------------- Element -------------------- */ /* ------------------- Content -------------------- */ /* Icon */ /* Current Text */ /* Menu */ /* Text */ /* Menu Item */ /* Vertical Item */ /* Sub Menu */ /* Menu Header */ /* Menu Divider */ /* Menu Input */ /* Menu Image */ /* Item Sub-Element */ /* Sub-Menu Dropdown Icon */ /* Description */ /* Message */ /* Floated Content */ /* ------------------- Types -------------------- */ /* ------------ Selection -------------- */ /*