/* * # Semantic - Image * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Themes *******************************/ /* To override a theme for an individual element specify theme name below Be sure to update the user folder name (see README) */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Import Directives *******************************/ /*------------------ Load Defaults -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*------------------- Page --------------------*/ /*------------------- Background Colors --------------------*/ /* Used for differentiating neutrals */ /* Used for differentiating layers */ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /******************************* Power-User *******************************/ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Easing --------------------*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Text ---*/ /*--- Colored Headers ---*/ /*------------------- Emotive Colors --------------------*/ /* Mood */ /* Status */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Derived Values --------------------*/ /* Makes sure padded grid can fit at 320px */ /* Used to match floats with text */ /* Positive / Negative Dupes */ /* Header Colors */ /* Responsive */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Image *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Avatar */ /*------------------- Variations --------------------*/ /* Floated */ /* Sizing */ /* Size */ /*------------------ Load Theme -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*--- Light Colors ---*/ /*------------------- Page --------------------*/ /*------------------- Background Colors --------------------*/ /* Used for differentiating neutrals */ /* Used for differentiating layers */ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /******************************* Power-User *******************************/ /*------------------- Icons --------------------*/ /* Maximum Glyph Width of Icon */ /*------------------- Easing --------------------*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Text ---*/ /*--- Colored Headers ---*/ /*------------------- Emotive Colors --------------------*/ /* Mood */ /* Status */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /*------------------- Derived Values --------------------*/ /* Makes sure padded grid can fit at 320px */ /* Used to match floats with text */ /* Positive / Negative Dupes */ /* Header Colors */ /* Responsive */ /* Columns */ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Image *******************************/ /*------------------- Element --------------------*/ /*------------------- Types --------------------*/ /* Avatar */ /*------------------- Variations --------------------*/ /* Floated */ /* Sizing */ /* Size */ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Loader -------------------*/ /******************************* Image *******************************/ .ui.image { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; background-color: transparent; } img.ui.image { display: block; background: none; } .ui.image img { display: block; max-width: 100%; height: auto; } /******************************* States *******************************/ .ui.disabled.image { cursor: default; opacity: 0.3; } /******************************* Variations *******************************/ /*-------------- Inline ---------------*/ .ui.inline.image, .ui.inline.image img { display: inline-block; } /*------------------ Vertical Aligned -------------------*/ .ui.top.aligned.images .image, .ui.top.aligned.image, .ui.top.aligned.image img { display: inline-block; vertical-align: top; } .ui.middle.aligned.images .image, .ui.middle.aligned.image, .ui.middle.aligned.image img { display: inline-block; vertical-align: middle; } .ui.bottom.aligned.images .image, .ui.bottom.aligned.image, .ui.bottom.aligned.image img { display: inline-block; vertical-align: bottom; } /*-------------- Rounded ---------------*/ .ui.rounded.images .image, .ui.rounded.images img, .ui.rounded.image img, .ui.rounded.image { border-radius: 0.3125em; } /*-------------- Bordered ---------------*/ .ui.bordered.images .image, .ui.bordered.images img, .ui.bordered.image img, img.ui.bordered.image { border: 1px solid rgba(0, 0, 0, 0.1); } /*-------------- Circular ---------------*/ .ui.circular.images .image, .ui.circular.images img, .ui.circular.image img, .ui.circular.image { border-radius: 500rem; } /*-------------- Fluid ---------------*/ .ui.fluid.images, .ui.fluid.image, .ui.fluid.images img, .ui.fluid.image img { display: block; width: 100%; } /*-------------- Avatar ---------------*/ .ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.image img, .ui.avatar.image { margin-right: 0.25rem; display: inline-block; width: 2.5em; height: 2.5em; border-radius: 500rem; } /*------------------- 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: 0em; margin-bottom: 1em; margin-left: 1em; } .ui.floated.images:last-child, .ui.floated.image:last-child { margin-bottom: 0em; } .ui.centered.images, .ui.centered.image { margin-left: auto; margin-right: auto; } /*-------------- Sizes ---------------*/ .ui.mini.images .image, .ui.mini.images img, .ui.mini.image { width: 20px; font-size: 0.7em; } .ui.tiny.images .image, .ui.tiny.images img, .ui.tiny.image { width: 80px; font-size: 0.8em; } .ui.small.images .image, .ui.small.images img, .ui.small.image { width: 150px; font-size: 0.875em; } .ui.medium.images .image, .ui.medium.images img, .ui.medium.image { width: 300px; font-size: 1em; } .ui.large.images .image, .ui.large.images img, .ui.large.image { width: 450px; font-size: 1.125em; } .ui.big.images .image, .ui.big.images img, .ui.big.image { width: 600px; font-size: 1.25em; } .ui.huge.images .image, .ui.huge.images img, .ui.huge.image { width: 800px; font-size: 1.375em; } .ui.massive.images .image, .ui.massive.images img, .ui.massive.image { width: 960px; font-size: 1.5em; } /******************************* Groups *******************************/ .ui.images { font-size: 0em; margin: 0em -0.25rem 0rem; } .ui.images .image, .ui.images img { display: inline-block; margin: 0em 0.25rem 0.5rem; } /******************************* Overrides *******************************/ /******************************* Overrides *******************************/