213 lines
6.4 KiB
CSS
213 lines
6.4 KiB
CSS
.Reactions {
|
|
position: relative;
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
margin: 15px 0 0 0;
|
|
}
|
|
|
|
.React {
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
}
|
|
|
|
.ReactButton {
|
|
display: inline-block;
|
|
margin: 0 5px;
|
|
line-height: 18px;
|
|
vertical-align: top;
|
|
position: relative;
|
|
}
|
|
|
|
.UserReactionWrap {
|
|
position: relative;
|
|
line-height: 1;
|
|
display: inline-block;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.UserReactionWrap .ReactSprite {
|
|
position: absolute;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background-image: url('images/action-sprites-bordered.png');
|
|
}
|
|
|
|
.Item:hover .Reactions a {
|
|
width: inherit;
|
|
}
|
|
|
|
.DataCounts {
|
|
margin: 5px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.CountTotal {
|
|
display: block;
|
|
line-height: 100%;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.CountItem.Selected {
|
|
background: rgba(55, 173, 227, 0.1);
|
|
border: solid 2px rgba(55, 173, 227, .2);
|
|
padding: 4px
|
|
}
|
|
|
|
.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;
|
|
vertical-align: top;
|
|
}
|
|
.Item .Reactions > * {
|
|
visibility: hidden;
|
|
}
|
|
.Item .Reactions > *.Visible {
|
|
visibility: visible;
|
|
}
|
|
.Item.Open .Reactions > *,
|
|
.Item:hover .Reactions > *,
|
|
.Item .Reactions > .FlagMenu {
|
|
visibility: visible;
|
|
}
|
|
|
|
.Reactions > a.React > .ReactSprite {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/* iPad/iPhone */
|
|
@media only screen and (device-width: 768px),
|
|
only screen and (max-device-width: 480px) {
|
|
.Item .Reactions > * { visibility: visible; }
|
|
}
|
|
|
|
/* Override default reactsprite styles from style.css to work with custom sheets */
|
|
.ReactSprite {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
line-height: 18px;
|
|
vertical-align: bottom;
|
|
background-image: url('images/action-sprites.png');
|
|
background-position: 16px 16px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
input + .ReactSprite {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ReactHappy { background-position: -4px -4px; }
|
|
.ReactHappy2 { background-position: -28px -4px; }
|
|
.ReactSmiley { background-position: -52px -4px; }
|
|
.ReactSmiley2 { background-position: -76px -4px; }
|
|
.ReactTongue { background-position: -100px -4px; }
|
|
.ReactTongue2 { background-position: -124px -4px; }
|
|
.ReactSad { background-position: -148px -4px; }
|
|
.ReactSad2 { background-position: -172px -4px; }
|
|
.ReactWink { background-position: -196px -5px; }
|
|
.ReactWink2 { background-position: -220px -4px; }
|
|
.ReactGrin { background-position: -244px -4px; }
|
|
.ReactShocked { background-position: -268px -4px; }
|
|
.ReactConfused { background-position: -292px -4px; }
|
|
.ReactConfused2 { background-position: -316px -4px; }
|
|
.ReactNeutral { background-position: -340px -4px; }
|
|
.ReactNeutral2 { background-position: -364px -4px; }
|
|
.ReactWondering { background-position: -4px -28px; }
|
|
.ReactWondering2 { background-position: -28px -28px; }
|
|
.ReactPointUp { background-position: -52px -28px; }
|
|
.ReactPointRight { background-position: -76px -28px; }
|
|
.ReactPointDown { background-position: -100px -28px; }
|
|
.ReactPointLeft { background-position: -124px -28px; }
|
|
.ReactThumbsUp { background-position: -148px -28px; }
|
|
.ReactThumbsUp2 { background-position: -172px -28px; }
|
|
.ReactShocked2 { background-position: -196px -28px; }
|
|
.ReactEvil { background-position: -220px -28px; }
|
|
.ReactEvil2 { background-position: -244px -28px; }
|
|
.ReactAngry { background-position: -268px -28px; }
|
|
.ReactAngry2 { background-position: -292px -28px; }
|
|
.ReactHeart { background-position: -316px -28px; }
|
|
.ReactHeart2 { background-position: -340px -28px; }
|
|
.ReactHeartBroken { background-position: -364px -28px; }
|
|
.ReactStar { background-position: -4px -52px; }
|
|
.ReactStar2 { background-position: -28px -52px; }
|
|
.ReactGrin2 { background-position: -52px -52px; }
|
|
.ReactCool { background-position: -76px -52px; }
|
|
.ReactCool2 { background-position: -100px -52px; }
|
|
.ReactQuestion { background-position: -124px -52px; }
|
|
.ReactNotification { background-position: -148px -52px; }
|
|
.ReactWarning { background-position: -172px -52px; }
|
|
.ReactSpam { background-position: -196px -52px; }
|
|
.ReactBlocked { background-position: -220px -52px; }
|
|
.ReactEye { background-position: -244px -52px; }
|
|
.ReactEye2 { background-position: -268px -52px; }
|
|
.ReactEyeBlocked { background-position: -292px -52px; }
|
|
.ReactFlag { background-position: -316px -52px; }
|
|
.ReactBrightnessMedium { background-position: -340px -52px; }
|
|
.ReactQuotesLeft { background-position: -364px -52px; }
|
|
.ReactMusic { background-position: -4px -76px; }
|
|
.ReactPacman { background-position: -28px -76px; }
|
|
.ReactBullhorn { background-position: -52px -76px; }
|
|
.ReactRocket { background-position: -76px -76px; }
|
|
.ReactFire { background-position: -100px -76px; }
|
|
.ReactHammer { background-position: -124px -76px; }
|
|
.ReactTarget { background-position: -148px -76px; }
|
|
.ReactLightning { background-position: -172px -76px; }
|
|
.ReactShield { background-position: -196px -76px; }
|
|
.ReactCheckmarkCircle { background-position: -220px -76px; }
|
|
.ReactLab { background-position: -244px -76px; }
|
|
.ReactLeaf { background-position: -268px -76px; }
|
|
.ReactDashboard { background-position: -292px -76px; }
|
|
.ReactDroplet { background-position: -316px -76px; }
|
|
.ReactFeed { background-position: -340px -76px; }
|
|
.ReactSupport { background-position: -364px -76px; }
|
|
.ReactHammer2 { background-position: -4px -100px; }
|
|
.ReactWand { background-position: -28px -100px; }
|
|
.ReactCog { background-position: -52px -100px; }
|
|
.ReactGift { background-position: -76px -100px; }
|
|
.ReactTrophy { background-position: -100px -100px; }
|
|
.ReactMagnet { background-position: -124px -100px; }
|
|
.ReactSwitch { background-position: -148px -100px; }
|
|
.ReactGlobe { background-position: -172px -100px; }
|
|
.ReactBookmark { background-position: -196px -100px; }
|
|
.ReactBookmarks { background-position: -220px -100px; }
|
|
.ReactStar3 { background-position: -244px -100px; }
|
|
.ReactInfo { background-position: -268px -100px; }
|
|
.ReactInfo2 { background-position: -292px -100px; }
|
|
.ReactCancelCircle { background-position: -316px -100px; }
|
|
.ReactCheckmark { background-position: -340px -100px; }
|
|
.ReactClose { background-position: -364px -100px; }
|
|
|
|
.MenuItems a:hover .ReactSprite {
|
|
background-image: url('images/action-sprites-white.png');
|
|
}
|