/* * # Semantic - Item * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * 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 Default -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*------------------- Page --------------------*/ /*------------------- Background Colors --------------------*/ /* Used for differentiating neutrals */ /* Used for differentiating layers */ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /******************************* Power-User *******************************/ /*------------------- Icons --------------------*/ /* Max Width of Icon */ /*------------------- Easing --------------------*/ /*--- Light Variations ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Text ---*/ /*--- Colored Headers ---*/ /*------------------- Emotive Colors --------------------*/ /* Mood */ /* Solid Background Color */ /* Status */ /* Darkened Headers */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Grid Columns --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Item *******************************/ /*------------------- View --------------------*/ /* Items */ /* Item */ /*------------------- Content --------------------*/ /* Image */ /* Content */ /* Header */ /* Metadata */ /* Icons */ /* Links */ /* Description */ /* Content Image */ /* Avatar Image */ /* Paragraph */ /* Additional Content */ /*------------------- Variations --------------------*/ /* Divided */ /* Sizes */ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Mix-in -------------------*/ /******************************* Standard *******************************/ /*-------------- Item ---------------*/ .ui.items > .item { table-layout: fixed; display: table; margin: 1em 0em; width: 100%; min-height: 0px; background: transparent; padding: 0em; border: none; border-radius: 0rem; box-shadow: none; -webkit-transition: box-shadow 0.25s ease; transition: box-shadow 0.25s ease; z-index: ''; } .ui.items > .item a { cursor: pointer; } /*-------------- Items ---------------*/ .ui.items { margin: 1.5em 0em; } .ui.items:first-child { margin-top: 0em; } .ui.items:last-child { margin-bottom: 0em; } /*-------------- Item ---------------*/ .ui.items > .item { min-width: 100%; } .ui.items > .item:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item:first-child { margin-top: 0em; } .ui.items > .item:last-child { margin-bottom: 0em; } /*-------------- Images ---------------*/ .ui.items > .item > .image { position: relative; display: table-cell; float: none; margin: 0em; padding: 0em; max-height: ''; vertical-align: top; } .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: 0rem; } /* Default Image Width */ .ui.items > .item > .image:not(.ui) { width: 175px; } /*-------------- Content ---------------*/ .ui.items > .item > .content { display: block; background: none; margin: 0em; padding: 0em; box-shadow: none; font-size: 1em; border: none; border-radius: 0em; } .ui.items > .item > .content:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } .ui.items > .item > .image + .content { width: 100%; display: table-cell; margin-left: 0em; vertical-align: top; padding-left: 1.5em; } .ui.items > .item > .content > .header { display: inline-block; margin: 0em; font-family: 'Open Sans', "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.2em; color: rgba(0, 0, 0, 0.85); } .ui.items > .item > .content > .meta + .description { margin-top: 0.6em; } /*-------------- Floated ---------------*/ .ui.items > .item .left.floated { float: left; } .ui.items > .item .right.floated { float: right; } /*-------------- Content Image ---------------*/ .ui.items > .item .content img { display: inline-block; vertical-align: middle; width: 2em; } .ui.items > .item img.avatar, .ui.items > .item .avatar img { width: 2em; height: 2em; border-radius: 500rem; } /*-------------- Description ---------------*/ .ui.items > .item > .content > .description { font-size: 1.1em; line-height: 1.2; color: rgba(0, 0, 0, 0.8); } /*-------------- Paragraph ---------------*/ .ui.items > .item > .content p { margin: 0em 0em 0.5em; } .ui.items > .item > .content p:last-child { margin-bottom: 0em; } /*-------------- Meta ---------------*/ .ui.items > .item .meta { font-size: 1em; color: rgba(0, 0, 0, 0.6); } .ui.items > .item .meta * { margin-right: 0.3em; } .ui.items > .item .meta :last-child { margin-right: 0em; } .ui.items > .item .meta .right.floated { margin-right: 0em; margin-left: 0.3em; } /*-------------- Links ---------------*/ /* Generic */ .ui.items > .item > .content a { color: #009fda; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .ui.items > .item > .content a:hover { color: #00b2f3; } /* Header */ .ui.items > .item > .content > a.header { color: rgba(0, 0, 0, 0.85); } .ui.items > .item > .content > a.header:hover { color: #00b2f3; } /* Meta */ .ui.items > .item .meta a { color: rgba(0, 0, 0, 0.4); } .ui.items > .item .meta a:hover { color: rgba(0, 0, 0, 0.8); } /*-------------- Labels ---------------*/ /*-----Star----- */ /* Icon */ .ui.items > .item > .content .star.icon { cursor: pointer; opacity: 0.75; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .ui.items > .item > .content .star.icon:hover { opacity: 1; color: #ac9400; } .ui.items > .item > .content .active.star.icon { color: #e9b539; } /*-----Like----- */ /* Icon */ .ui.items > .item > .content .like.icon { cursor: pointer; opacity: 0.75; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .ui.items > .item > .content .like.icon:hover { opacity: 1; color: #ffadae; } .ui.items > .item > .content .active.like.icon { color: #ef404a; } /*---------------- Extra Content -----------------*/ .ui.items > .item .extra { display: block; position: relative; background: none; margin: 1em 0em 0em; width: 100%; padding: 0.25em 0em 0em; top: 0em; left: 0em; color: rgba(0, 0, 0, 0.4); box-shadow: none; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; border-top: 1px solid rgba(0, 0, 0, 0.05); } .ui.items > .item .extra:after { display: block; content: ' '; height: 0px; clear: both; overflow: hidden; visibility: hidden; } /******************************* Variations *******************************/ /*------------------- Aligned --------------------*/ .ui.items > .item > .image + .top.aligned.content { vertical-align: top; } .ui.items > .item > .image + .middle.aligned.content { vertical-align: middle; } .ui.items > .item > .image + .bottom.aligned.content { vertical-align: bottom; } /*------------------- Divided --------------------*/ .ui.divided.items > .item { border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 0em; padding: 1em 0em; } .ui.divided.items > .item:first-child { border-top: none; margin-top: 0em; padding-top: 0em; } .ui.divided.items > .item:last-child { margin-bottom: 0em; padding-bottom: 0em; } /*------------------- Link --------------------*/ .ui.items a.item:hover, .ui.link.item > .item:hover { cursor: pointer; } .ui.items a.item:hover .content .header, .ui.link.item > .item:hover .content .header { color: #00b2f3; } /*-------------- Size ---------------*/ .ui.items > .item { font-size: 1em; } /******************************* Overrides *******************************/ /******************************* User Variable Overrides *******************************/