.Reactions { position: relative; font-size: 11px; line-height: 18px; } .Reactions .Handle { display: inline-block; opacity: .3; } .React { position: absolute; right: 0; top: 0; } .ReactHeading { display: inline-block; padding: 0px 6px; background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.4); } .Flag .ReactHeading { border-radius: 4px 0 0 4px; } .React .ReactHeading { border-radius: 0 4px 4px 0; } .Item:hover .ReactHeading { background: rgba(0,0,0,0.8); color: #fff; } .ReactButton { display: inline-block; margin: 0 2px; line-height: 18px; vertical-align: top; position: relative; } .Flyout .ReactButton { margin: 0; } .UserReactionWrap { position: relative; line-height: 1; display: inline-block; margin-right: 3px; } .UserReactionWrap .ReactSprite { position: absolute; right: -2px; bottom: -2px; } /* Hover Mechanics */ .Reactions .Count { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; vertical-align: top; background: #494949; background: rgba(0, 0, 0, 0.7); } .ToggleFlyout.Open .ReactButton { opacity: 1 !important; } .Item:hover .Reactions .Handle { opacity: .75; } .Reactions .ReactHandle { display: none; } .Reactions a.HasCount { display: inline-block; } .InProgress .ReactSprite { background-image: none !Important; background: transparent !Important; } .InProgress .Count { visibility: hidden; } .FilterButton.Selected { font-weight: bold; } .DataCounts { margin: 5px 0; text-align: center; } /*.DataCounts a { color: #000; } .DataCounts a:hover { color: #ff0084; }*/ .CountTotal { display: block; line-height: 100%; font-size: 28px; } .CountTotal img { height: 40px; } .CountItemWrap { width: 10%; display: inline-block; } .CountItem { display: block; text-align: center; border: solid 2px transparent; padding: 4px; margin: 0 4px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; white-space: nowrap; overflow: visible; } .Compact .Item .Author img { height: 24px; width: 24px; } .Compact .Author .PhotoWrap { margin: 0 8px 4px 0; } .Compact .Title { font-size: 13px; } .Compact .Reactions { margin-top: 5px; } .Compact p { margin: 5px 0; } .CountItem.Selected { background: rgba(55, 173, 227, 0.1); border: solid 2px rgba(55, 173, 227, .2); padding: 4px } li.Buried { padding: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .Buried, .Buried a { color: #aaa; font-size: 12px; } .Buried .Author .ProfilePhoto { height: 21px; width: 21px; margin: 0 3px 0 0; opacity: .4; } .Buried .Reactions { display: none; } li.Buried * { display: inline; margin: 0; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .Buried br { display: none; } .Buried .Item-BodyWrap, .Buried .Options, .Buried .Signature, .Buried .RecordReactions { display: none; } li.Buried:hover:before { content: "Post is buried, click here to show the rest."; display: block; position: absolute; background: rgba(0,0,0,.75); color: #fff; text-shadow: 0 1px 1px #000; width: 100%; height: 100%; left: 0; top: 0; text-align: center; vertical-align: middle; line-height: 40px; /* approx, could cause problems */ } /*.Promoted { box-shadow: inset 0 80px 600px #fffcdc; border-top: solid 1px #fff; } .Promoted .Message { font-size: 110%; } .Promoted .Author .ProfilePhotoMedium { box-shadow: 0px -1px 8px #fff; }*/ /* Menu stuff */ .Flyout.Flags { top: 25px; z-index: 1000; } .FlagMenu > .SpFlyoutHandle { left: 10px; bottom: -12px; z-index: 1001; } /* Reaction Revamp */ .Reactions .Bullet { color: #999; } .React { position: relative; top: auto; right: auto; } .Reactions { margin: 15px 0 0 0; } .RecordReactions { margin-top: 15px; } .RecordReactions + .Reactions { margin-top: 0; } .Reactions .Count { font-size: 8px; background: #555; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-right: 4px; } .Reactions > a.React > .ReactSprite { margin-right: 2px; } .Reactions .FlagMenu .MenuItems .ReactButton { margin: 0; padding: 0 15px; width: 100%; } .MenuItems-Reactions { position: absolute; width: 160px; margin-bottom: 5px; z-index: 1; } .MenuItems-Reactions a { display: inline-block !important; padding: 2px 3px 5px !important; } .MenuItems-Reactions .ProfilePhotoSmall { height: 20px; width: 20px; } /* OLD "Best Of" */ .ReactionFilters { margin: 8px 0; } .ReactionFilters .ReactButton { opacity: 1; margin-right: 6px; } .ReactionFilters .ReactButton .ReactSprite { background-image: url('reaction-sprites-color.png') !important; } .ReactionFilters .ReactLabel { padding-left: 4px; } .BestOfData .DataList .Item:first-child { border-top: 1px solid #BEC8CC; } /* End "Best Of" */ #infscr-loading { text-align: center; } #infscr-loading img { margin: 0 auto; } /* End "Best Of" */ /** Best of tiling stuff. **/ .Tile { float: left; width: 278px; border: solid 1px #ddd; margin: 5px; padding: 10px; border-radius: 2px; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .Tile > h3 { margin-top: 0; line-height: 1.2; } .Tile .Image img, .Tile .Body img{ max-width: 100% !important; float: none !important; margin: 0 auto 10px !important; display: block; } .Tile .AuthorWrap { margin: 0 -10px -10px; padding: 10px; background: rgba(0,0,0,.03); } .Tile .AuthorWrap .ProfilePhoto { height: 32px; width: 32px; } .Tile .Reactions { margin: 0; line-height: 1.6; } .Tile .ReactButton { position: relative; } .Tile .Message { margin: 0; } .Tile .ReactLabel { display: none; background: #fff; color: #000; white-space: nowrap; position: absolute; line-height: 1; padding: 3px 6px 4px; left: -4px; top: -23px; } .Tile .Flyout .ReactLabel { position: initial; display: inline-block; padding: 0; background: initial; color: inherit; } .Tile .Reactions .Bullet, .Tile .Reactions .Count { display: none; } .Tile .Body iframe, .Tile .Body embed, .Tile .Body object { height: 100%; width: 100%; } /**** Transitions ****/ .masonry, .masonry .masonry-brick { -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -ms-transition-duration: 0.7s; -o-transition-duration: 0.7s; transition-duration: 0.7s; } .masonry { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .masonry .masonry-brick { -webkit-transition-property: left, right, top; -moz-transition-property: left, right, top; -ms-transition-property: left, right, top; -o-transition-property: left, right, top; transition-property: left, right, top; }