diff options
Diffstat (limited to 'src/wwwroot/libraries/fomantic/dist/components/card.css')
| -rw-r--r-- | src/wwwroot/libraries/fomantic/dist/components/card.css | 1318 |
1 files changed, 1318 insertions, 0 deletions
diff --git a/src/wwwroot/libraries/fomantic/dist/components/card.css b/src/wwwroot/libraries/fomantic/dist/components/card.css new file mode 100644 index 0000000..8ba69e7 --- /dev/null +++ b/src/wwwroot/libraries/fomantic/dist/components/card.css @@ -0,0 +1,1318 @@ +/*! + * # Fomantic-UI - Card + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------- + Card +---------------*/ + +.ui.cards > .card, +.ui.card { + max-width: 100%; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 290px; + min-height: 0; + background: #FFFFFF; + padding: 0; + border: none; + border-radius: 0.28571429rem; + -webkit-box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5; + box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5; + -webkit-transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: box-shadow 0.1s ease, transform 0.1s ease; + transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-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: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: -0.875em -0.5em; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.ui.cards > .card { + display: -webkit-box; + display: -ms-flexbox; + 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.28571429rem 0.28571429rem 0 0 !important; + border-top: none !important; +} +.ui.cards > .card > :last-child, +.ui.card > :last-child { + border-radius: 0 0 0.28571429rem 0.28571429rem !important; +} +.ui.cards > .card > :only-child, +.ui.card > :only-child { + border-radius: 0.28571429rem !important; +} + +/*-------------- + Images +---------------*/ + +.ui.cards > .card > .image, +.ui.card > .image { + position: relative; + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + 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 { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border: none; + border-top: 1px solid rgba(34, 36, 38, 0.1); + background: none; + margin: 0; + padding: 1em 1em; + -webkit-box-shadow: none; + 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: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + color: rgba(0, 0, 0, 0.85); +} + +/* Default Header Size */ +.ui.cards > .card > .content > .header:not(.ui), +.ui.card > .content > .header:not(.ui) { + font-weight: bold; + font-size: 1.28571429em; + margin-top: -0.21425em; + line-height: 1.28571429em; +} +.ui.cards > .card > .content > .meta + .description, +.ui.cards > .card > .content > .header + .description, +.ui.card > .content > .meta + .description, +.ui.card > .content > .header + .description { + 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: ''; + -webkit-transition: color 0.1s ease; + 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: #1e70bf; +} + +/* 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; +} + +/*-------------- + Dimmer +---------------*/ + +.ui.cards > .card .dimmer, +.ui.card .dimmer { + background-color: ''; + z-index: 10; +} + +/*-------------- + Labels +---------------*/ + + +/*-----Star----- */ + + +/* Icon */ +.ui.cards > .card > .content .star.icon, +.ui.card > .content .star.icon { + cursor: pointer; + opacity: 0.75; + -webkit-transition: color 0.1s ease; + 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; + -webkit-transition: color 0.1s ease; + 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; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + border-top: 1px solid rgba(0, 0, 0, 0.05) !important; + position: static; + background: none; + width: auto; + margin: 0 0; + padding: 0.75em 1em; + top: 0; + left: 0; + color: rgba(0, 0, 0, 0.4); + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: color 0.1s ease; + 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: #1e70bf; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Horizontal + --------------------*/ + +.ui.horizontal.cards > .card, +.ui.card.horizontal { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + min-width: 270px; + width: 400px; + max-width: 100%; +} +.ui.horizontal.cards > .card > .image, +.ui.card.horizontal > .image { + border-radius: 0.28571429rem 0 0 0.28571429rem; + width: 150px; +} +.ui.horizontal.cards > .card > .image > img, +.ui.card.horizontal > .image > img { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + height: 100%; + border-radius: 0.28571429rem 0 0 0.28571429rem; +} +.ui.horizontal.cards > .card > .image:last-child > img, +.ui.card.horizontal > .image:last-child > img { + border-radius: 0 0.28571429rem 0.28571429rem 0; +} +.ui.horizontal.cards > .card > .content, +.ui.horizontal.card > .content { + -ms-flex-preferred-size: 1px; + flex-basis: 1px; +} +.ui.horizontal.cards > .card > .extra, +.ui.horizontal.card > .extra { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; +} + +/*------------------- + Raised + --------------------*/ + +.ui.raised.cards > .card, +.ui.raised.card { + -webkit-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); + 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 { + -webkit-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); + 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); +} + +/*------------------- + Centered + --------------------*/ + +.ui.centered.cards { + -webkit-box-pack: center; + -ms-flex-pack: center; + 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 { + -webkit-transform: none; + 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: #FFFFFF; + border: none; + -webkit-box-shadow: 0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5; + box-shadow: 0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5; + -webkit-transform: translateY(-3px); + transform: translateY(-3px); +} + +/*------------------- + Colors +--------------------*/ + +.ui.primary.cards > .card, +.ui.cards > .primary.card, +.ui.primary.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5; +} +.ui.primary.cards > .card:hover, +.ui.cards > .primary.card:hover, +.ui.primary.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.primary.cards > .card, +.ui.inverted.cards > .primary.card, +.ui.inverted.primary.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555; +} +.ui.inverted.primary.cards > .card:hover, +.ui.inverted.cards > .primary.card:hover, +.ui.inverted.primary.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555; +} +.ui.secondary.cards > .card, +.ui.cards > .secondary.card, +.ui.secondary.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5; +} +.ui.secondary.cards > .card:hover, +.ui.cards > .secondary.card:hover, +.ui.secondary.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.secondary.cards > .card, +.ui.inverted.cards > .secondary.card, +.ui.inverted.secondary.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555; +} +.ui.inverted.secondary.cards > .card:hover, +.ui.inverted.cards > .secondary.card:hover, +.ui.inverted.secondary.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555555; +} +.ui.red.cards > .card, +.ui.cards > .red.card, +.ui.red.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, 0 1px 3px 0 #D4D4D5; +} +.ui.red.cards > .card:hover, +.ui.cards > .red.card:hover, +.ui.red.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.red.cards > .card, +.ui.inverted.cards > .red.card, +.ui.inverted.red.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF695E, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF695E, 0 0 0 1px #555555; +} +.ui.inverted.red.cards > .card:hover, +.ui.inverted.cards > .red.card:hover, +.ui.inverted.red.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff392b, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff392b, 0 0 0 1px #555555; +} +.ui.orange.cards > .card, +.ui.cards > .orange.card, +.ui.orange.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, 0 1px 3px 0 #D4D4D5; +} +.ui.orange.cards > .card:hover, +.ui.cards > .orange.card:hover, +.ui.orange.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.orange.cards > .card, +.ui.inverted.cards > .orange.card, +.ui.inverted.orange.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF851B, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF851B, 0 0 0 1px #555555; +} +.ui.inverted.orange.cards > .card:hover, +.ui.inverted.cards > .orange.card:hover, +.ui.inverted.orange.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #e76b00, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #e76b00, 0 0 0 1px #555555; +} +.ui.yellow.cards > .card, +.ui.cards > .yellow.card, +.ui.yellow.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, 0 1px 3px 0 #D4D4D5; +} +.ui.yellow.cards > .card:hover, +.ui.cards > .yellow.card:hover, +.ui.yellow.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.yellow.cards > .card, +.ui.inverted.cards > .yellow.card, +.ui.inverted.yellow.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FFE21F, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FFE21F, 0 0 0 1px #555555; +} +.ui.inverted.yellow.cards > .card:hover, +.ui.inverted.cards > .yellow.card:hover, +.ui.inverted.yellow.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ebcd00, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ebcd00, 0 0 0 1px #555555; +} +.ui.olive.cards > .card, +.ui.cards > .olive.card, +.ui.olive.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, 0 1px 3px 0 #D4D4D5; +} +.ui.olive.cards > .card:hover, +.ui.cards > .olive.card:hover, +.ui.olive.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.olive.cards > .card, +.ui.inverted.cards > .olive.card, +.ui.inverted.olive.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D9E778, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D9E778, 0 0 0 1px #555555; +} +.ui.inverted.olive.cards > .card:hover, +.ui.inverted.cards > .olive.card:hover, +.ui.inverted.olive.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #d2e745, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #d2e745, 0 0 0 1px #555555; +} +.ui.green.cards > .card, +.ui.cards > .green.card, +.ui.green.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, 0 1px 3px 0 #D4D4D5; +} +.ui.green.cards > .card:hover, +.ui.cards > .green.card:hover, +.ui.green.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.green.cards > .card, +.ui.inverted.cards > .green.card, +.ui.inverted.green.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #2ECC40, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #2ECC40, 0 0 0 1px #555555; +} +.ui.inverted.green.cards > .card:hover, +.ui.inverted.cards > .green.card:hover, +.ui.inverted.green.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555555; +} +.ui.teal.cards > .card, +.ui.cards > .teal.card, +.ui.teal.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, 0 1px 3px 0 #D4D4D5; +} +.ui.teal.cards > .card:hover, +.ui.cards > .teal.card:hover, +.ui.teal.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.teal.cards > .card, +.ui.inverted.cards > .teal.card, +.ui.inverted.teal.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6DFFFF, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6DFFFF, 0 0 0 1px #555555; +} +.ui.inverted.teal.cards > .card:hover, +.ui.inverted.cards > .teal.card:hover, +.ui.inverted.teal.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #3affff, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #3affff, 0 0 0 1px #555555; +} +.ui.blue.cards > .card, +.ui.cards > .blue.card, +.ui.blue.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5; +} +.ui.blue.cards > .card:hover, +.ui.cards > .blue.card:hover, +.ui.blue.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.blue.cards > .card, +.ui.inverted.cards > .blue.card, +.ui.inverted.blue.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555; +} +.ui.inverted.blue.cards > .card:hover, +.ui.inverted.cards > .blue.card:hover, +.ui.inverted.blue.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555; +} +.ui.violet.cards > .card, +.ui.cards > .violet.card, +.ui.violet.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, 0 1px 3px 0 #D4D4D5; +} +.ui.violet.cards > .card:hover, +.ui.cards > .violet.card:hover, +.ui.violet.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.violet.cards > .card, +.ui.inverted.cards > .violet.card, +.ui.inverted.violet.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #A291FB, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #A291FB, 0 0 0 1px #555555; +} +.ui.inverted.violet.cards > .card:hover, +.ui.inverted.cards > .violet.card:hover, +.ui.inverted.violet.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #745aff, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #745aff, 0 0 0 1px #555555; +} +.ui.purple.cards > .card, +.ui.cards > .purple.card, +.ui.purple.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, 0 1px 3px 0 #D4D4D5; +} +.ui.purple.cards > .card:hover, +.ui.cards > .purple.card:hover, +.ui.purple.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.purple.cards > .card, +.ui.inverted.cards > .purple.card, +.ui.inverted.purple.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DC73FF, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DC73FF, 0 0 0 1px #555555; +} +.ui.inverted.purple.cards > .card:hover, +.ui.inverted.cards > .purple.card:hover, +.ui.inverted.purple.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555555; +} +.ui.pink.cards > .card, +.ui.cards > .pink.card, +.ui.pink.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, 0 1px 3px 0 #D4D4D5; +} +.ui.pink.cards > .card:hover, +.ui.cards > .pink.card:hover, +.ui.pink.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.pink.cards > .card, +.ui.inverted.cards > .pink.card, +.ui.inverted.pink.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF8EDF, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF8EDF, 0 0 0 1px #555555; +} +.ui.inverted.pink.cards > .card:hover, +.ui.inverted.cards > .pink.card:hover, +.ui.inverted.pink.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff5bd1, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff5bd1, 0 0 0 1px #555555; +} +.ui.brown.cards > .card, +.ui.cards > .brown.card, +.ui.brown.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, 0 1px 3px 0 #D4D4D5; +} +.ui.brown.cards > .card:hover, +.ui.cards > .brown.card:hover, +.ui.brown.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.brown.cards > .card, +.ui.inverted.cards > .brown.card, +.ui.inverted.brown.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D67C1C, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D67C1C, 0 0 0 1px #555555; +} +.ui.inverted.brown.cards > .card:hover, +.ui.inverted.cards > .brown.card:hover, +.ui.inverted.brown.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #b0620f, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #b0620f, 0 0 0 1px #555555; +} +.ui.grey.cards > .card, +.ui.cards > .grey.card, +.ui.grey.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, 0 1px 3px 0 #D4D4D5; +} +.ui.grey.cards > .card:hover, +.ui.cards > .grey.card:hover, +.ui.grey.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.grey.cards > .card, +.ui.inverted.cards > .grey.card, +.ui.inverted.grey.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DCDDDE, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DCDDDE, 0 0 0 1px #555555; +} +.ui.inverted.grey.cards > .card:hover, +.ui.inverted.cards > .grey.card:hover, +.ui.inverted.grey.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555555; +} +.ui.black.cards > .card, +.ui.cards > .black.card, +.ui.black.card { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5; +} +.ui.black.cards > .card:hover, +.ui.cards > .black.card:hover, +.ui.black.card:hover { + -webkit-box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD; + box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD; +} +.ui.inverted.black.cards > .card, +.ui.inverted.cards > .black.card, +.ui.inverted.black.card { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555; +} +.ui.inverted.black.cards > .card:hover, +.ui.inverted.cards > .black.card:hover, +.ui.inverted.black.card:hover { + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #000000, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #000000, 0 0 0 1px #555555; +} + +/*-------------- + 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.nine.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.nine.cards > .card { + width: calc(11.11111111111111% - 1em); + margin-left: 0.5em; + margin-right: 0.5em; + font-size: 10px; +} +.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 */ +@media only screen and (max-width: 767.98px) { + .ui.two.doubling.cards { + margin-left: 0; + margin-right: 0; + } + .ui.two.doubling.cards > .card { + width: 100%; + margin-left: 0; + margin-right: 0; + } + .ui.three.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.three.doubling.cards > .card { + width: calc(50% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.four.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.four.doubling.cards > .card { + width: calc(50% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.five.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.five.doubling.cards > .card { + width: calc(50% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.six.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.six.doubling.cards > .card { + width: calc(50% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.seven.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.seven.doubling.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.eight.doubling.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.nine.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.nine.doubling.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.ten.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.ten.doubling.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; + } +} + +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 991.98px) { + .ui.two.doubling.cards { + margin-left: 0; + margin-right: 0; + } + .ui.two.doubling.cards > .card { + width: 100%; + margin-left: 0; + margin-right: 0; + } + .ui.three.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.three.doubling.cards > .card { + width: calc(50% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.four.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.four.doubling.cards > .card { + width: calc(50% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.five.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.five.doubling.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.six.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.six.doubling.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.eight.doubling.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.eight.doubling.cards > .card { + width: calc(25% - 1.5em); + margin-left: 0.75em; + margin-right: 0.75em; + } + .ui.nine.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.nine.doubling.cards > .card { + width: calc(25% - 1.5em); + margin-left: 0.75em; + margin-right: 0.75em; + } + .ui.ten.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.ten.doubling.cards > .card { + width: calc(20% - 1.5em); + margin-left: 0.75em; + margin-right: 0.75em; + } +} + +/*------------------- + 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.cards .card { + font-size: 0.78571429rem; +} +.ui.tiny.cards .card { + font-size: 0.85714286rem; +} +.ui.small.cards .card { + font-size: 0.92857143rem; +} +.ui.large.cards .card { + font-size: 1.14285714rem; +} +.ui.big.cards .card { + font-size: 1.28571429rem; +} +.ui.huge.cards .card { + font-size: 1.42857143rem; +} +.ui.massive.cards .card { + font-size: 1.71428571rem; +} + +/*----------------- + Inverted + ------------------*/ + +.ui.inverted.cards > .card, +.ui.inverted.card { + background: #1B1C1D; + -webkit-box-shadow: 0 1px 3px 0 #555555, 0 0 0 1px #555555; + box-shadow: 0 1px 3px 0 #555555, 0 0 0 1px #555555; +} + +/* 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); +} + +/* 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: #1e70bf; +} + +/* 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; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + |
