|
|
.ui.segment { position: relative; background-color: #FFF; box-shadow: 0 0 0 1px rgba(0,0,0,.1); margin: 1em 0; padding: 1em; border-radius: 5px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.ui.segment:first-child { margin-top: 0; }
.ui.segment:last-child { margin-bottom: 0; }
.ui.segment:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }
.ui.vertical.segment { margin: 0; padding-left: 0; padding-right: 0; background-color: transparent; border-radius: 0; box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.ui.vertical.segment:first-child { padding-top: 0; }
.ui.horizontal.segment { margin: 0; padding-top: 0; padding-bottom: 0; background-color: transparent; border-radius: 0; box-shadow: 1px 0 0 rgba(0,0,0,.1); }
.ui.horizontal.segment:first-child { padding-left: 0; }
.ui.pointing.menu+.ui.attached.segment { top: 1px; }
.ui.segment>:first-child { margin-top: 0; }
.ui.segment>:last-child { margin-bottom: 0; }
.ui.piled.segment { margin: 2em 0; -ms-box-shadow: 0 0 1px 1px rgba(0,0,0,.15); -o-box-shadow: 0 0 1px 1px rgba(0,0,0,.15); box-shadow: 0 0 1px 1px rgba(0,0,0,.15); }
.ui.piled.segment:first-child { margin-top: 0; }
.ui.piled.segment:last-child { margin-bottom: 0; }
.ui.piled.segment:after, .ui.piled.segment:before { background-color: #FFF; visibility: visible; content: ""; display: block; height: 100%; left: -1px; position: absolute; width: 100%; box-shadow: 0 0 1px 1px rgba(0,0,0,.1); }
.ui.piled.segment:after { -webkit-transform: rotate(1.2deg); -ms-transform: rotate(1.2deg); transform: rotate(1.2deg); top: 0; z-index: -1; }
.ui.piled.segment:before { -webkit-transform: rotate(-1.2deg); -ms-transform: rotate(-1.2deg); transform: rotate(-1.2deg); top: 0; z-index: -2; }
.ui.stacked.segment { padding-bottom: 1.7em; }
.ui.stacked.segment:after, .ui.stacked.segment:before { content: ''; position: absolute; bottom: -3px; left: 0; border-top: 1px solid rgba(0,0,0,.1); background-color: rgba(0,0,0,.02); width: 100%; height: 5px; visibility: visible; }
.ui.stacked.segment:before { bottom: 0; }
.ui.stacked.inverted.segment:after, .ui.stacked.inverted.segment:before { background-color: rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.35); }
.ui.raised.segment { box-shadow: 0 1px 2px 1px rgba(0,0,0,.1); }
.ui.disabled.segment { opacity: .8; color: #DDD; }
.ui.basic.segment { position: relative; background-color: transparent; box-shadow: none; border-radius: 0; }
.ui.basic.segment:first-child { padding-top: 0; }
.ui.basic.segment:last-child { padding-bottom: 0; }
.ui.fitted.segment { padding: 0; }
.ui.blue.segment { border-top: .2em solid #6ECFF5; }
.ui.green.segment { border-top: .2em solid #A1CF64; }
.ui.red.segment { border-top: .2em solid #D95C5C; }
.ui.orange.segment { border-top: .2em solid #F05940; }
.ui.purple.segment { border-top: .2em solid #564F8A; }
.ui.teal.segment { border-top: .2em solid #00B5AD; }
.ui.inverted.black.segment { background-color: #5C6166!important; color: #FFF!important; }
.ui.inverted.blue.segment { background-color: #6ECFF5!important; color: #FFF!important; }
.ui.inverted.green.segment { background-color: #A1CF64!important; color: #FFF!important; }
.ui.inverted.red.segment { background-color: #D95C5C!important; color: #FFF!important; }
.ui.inverted.orange.segment { background-color: #F05940!important; color: #FFF!important; }
.ui.inverted.purple.segment { background-color: #564F8A!important; color: #FFF!important; }
.ui.inverted.teal.segment { background-color: #00B5AD!important; color: #FFF!important; }
.ui.left.aligned.segment { text-align: left; }
.ui.right.aligned.segment { text-align: right; }
.ui.center.aligned.segment { text-align: center; }
.ui.floated.segment, .ui.left.floated.segment { float: left; }
.ui.right.floated.segment { float: right; }
.ui.inverted.segment { border: 0; box-shadow: none; }
.ui.inverted.segment, .ui.primary.inverted.segment { background-color: #222; color: #FFF; }
.ui.primary.segment { background-color: #FFF; color: #555; }
.ui.secondary.segment { background-color: #FAF9FA; color: #777; }
.ui.tertiary.segment { background-color: #EBEBEB; color: #B0B0B0; }
.ui.secondary.inverted.segment { background-color: #555; background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(255,255,255,.3))); background-image: -webkit-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%); background-image: -webkit-linear-gradient(rgba(255,255,255,.3) 0, rgba(255,255,255,.3) 100%); background-image: linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%); color: #FAFAFA; }
.ui.tertiary.inverted.segment { background-color: #555; background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.6))); background-image: -webkit-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%); background-image: -webkit-linear-gradient(rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 100%); background-image: linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%); color: #EEE; }
.ui.segment.attached { top: -1px; bottom: -1px; border-radius: 0; margin: 0; box-shadow: 0 0 0 1px #DDD; }
.ui.top.attached.segment { top: 0; bottom: -1px; margin-top: 1em; margin-bottom: 0; border-radius: 5px 5px 0 0; }
.ui.segment.bottom.attached { top: -1px; bottom: 0; margin-top: 0; margin-bottom: 1em; border-radius: 0 0 5px 5px; }
|