.ui.segment { position: relative; background-color: #FFF; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1); box-shadow: 0 0 0 1px rgba(0,0,0,.1); margin: 1em 0; padding: 1em; border-radius: 5px; -webkit-box-sizing: border-box; -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; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1); 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; -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.1); 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; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.15); -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%; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1); 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 { -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.1); 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; -webkit-box-shadow: none; 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; -webkit-box-shadow: none; 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-gradient(linear, top left, bottom left, 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: 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-gradient(linear, top left, bottom left, 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: 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; -webkit-box-shadow: 0 0 0 1px #DDD; 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; }