Matte bubbles for Messages on OS X

chatitem {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient:vertical;
}

header {
    padding-top: 8px;
}

error-button {
    padding: 0px 11px 6px 0px;
    margin-left: -8px;
}

/* receipts and receipt animations */

receipt {
    overflow:hidden;
    text-align: right !important;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    padding-right:12px;
    position: absolute;
    right: 0px;
    bottom: 1px;
    opacity:0;
}

[receipt-fade="none"] message:nth-last-of-type(1)[emote="no"],
[receipt-fade="swap"] message:nth-last-of-type(1)[emote="no"]{
    padding-bottom:13px;
}

[receipt-fade="none"] receipt {
    opacity:1;
}

/* fade in */

@-webkit-keyframes padding-animation-in {
    from {
        padding-bottom:0px;
    }
    to {
        padding-bottom:13px;
    }
}

[receipt-fade="in"] receipt {
    -webkit-animation-name:fade-in;
    -webkit-animation-fill-mode:both;
    -webkit-animation-duration:150ms;
    -webkit-animation-delay:300ms;
}

[receipt-fade="in"] message:nth-last-of-type(1)[emote="no"] {
    -webkit-animation:padding-animation-in;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-duration:150ms;
    -webkit-animation-delay:150ms;
    -webkit-animation-timing-function:steps(14,start);
}

/* fade out */

@-webkit-keyframes padding-animation-out {
    from {
        padding-bottom:13px;
    }
    to {
        padding-bottom:0px;
    }
}

/* delay animation finish to allow the other animations to finish before removing receipt */
@-webkit-keyframes fade-out-delay {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

[receipt-fade="out"] receipt {
    -webkit-animation-name:fade-out-delay;
    -webkit-animation-fill-mode:both;
    -webkit-animation-duration:300ms;
}

[receipt-fade="out"] message:nth-last-of-type(1)[emote="no"] {
    -webkit-animation:padding-animation-out;
    -webkit-animation-fill-mode:backwards;
    -webkit-animation-duration:150ms;
    -webkit-animation-delay:150ms;
    -webkit-animation-timing-function:steps(14,start);
}

date {
display: inline-block;
    font-family: "Helvetica Neue";
    font-size: 11px;
    color: rgb(139,146,165);
    font-weight: normal !important;
    margin-left:3px;
    margin-right:3px;
}
receipt date {
    margin-right: -1px;
}

rollover-date {
    -webkit-box-flex: 1;
    -webkit-transition: opacity 200ms;
    display:block;
    opacity:0;
    padding-bottom:4px;
}
[from-me="yes"] rollover-date {
    text-align:right;
}
messagetext:hover ~ rollover-date  {
    opacity:1;
}

message {
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    position: relative;
}
messagetext {
    display:block;
    word-wrap:break-word;
    text-align:left;
    overflow: hidden;
    cursor: auto;
    max-width: 60%;
}

messagetext * {
    text-shadow: none !important;
}
messagesubject {
    display:block;
}
messagesubject+messagetext {
    border-top:solid 1px rgba(0,0,0,0.3);
}

messagebody {
    display:block;
}

buddyicon div,
.buddyicon {
    background-size: 32px 33px;
    width: 32px;
    height: 33px;
}

spacer {
    display: none;
}

[from-me="yes"] {
    -webkit-box-direction: reverse;
    -webkit-box-align: end;
    -webkit-box-pack: end;
    -webkit-box-orient: horizontal;
}
[from-me="no"] {
    -webkit-box-direction: normal;
    -webkit-box-align: end;
    -webkit-box-pack: start;
    -webkit-box-orient: horizontal;
}
[from-me="yes"][emote="no"] buddyicon,
[from-me="yes"][emote="no"] .buddyicon {
    padding-right:12px;
}
[from-me="no"][emote="no"] buddyicon,
[from-me="no"][emote="no"] .buddyicon {
    padding-left:13px;
}
[emote="no"] buddyname:before {
    font-family: "Helvetica Neue";
    font-size: 11px;
    color: rgb(139, 146, 165);
    /*text-shadow: 0 1px 0 rgba(255,255,255,0.7);*/
    -webkit-user-select: none;
    cursor: default;
}

[shownamesandpictures] [emote="no"] buddyicon,
[showpictures] [emote="no"] buddyicon,
[shownamesandpictures] [emote="no"] .buddyicon,
[showpictures] [emote="no"] .buddyicon {
    display: block;
    padding-bottom: 2px;
}
[shownamesandpictures] [emote="no"] buddyname {
    display: inline-block;
}
[shownamesandpictures] [emote="no"] buddyname:before {
    position: absolute;
}
[shownamesandpictures] [emote="no"][from-me="yes"] buddyname {
    display: none;
}
[shownamesandpictures] [from-me="no"][emote="no"] {
    margin-bottom: 16px;
}
[shownamesandpictures] [from-me="no"][emote="no"] buddyname {
    margin-left: -32px;
}

[showpictures] [emote="no"] buddyicon,
[showpictures] [emote="no"] .buddyicon {
    display: block;
}
[showpictures] [emote="no"] buddyname {
    display: none;
}
[shownamesandpictures] [emote="no"][from-me="yes"] buddyname {
    display: none;
}

[shownames] [emote="no"] buddyicon,
[shownames] [emote="no"] .buddyicon {
    display: none;
}
[shownames] [emote="no"] buddyname {
    display: inline-block;
}
[shownames] [from-me="no"][emote="no"] buddyname {
    padding: 0px 0px 2px 12px;
}
[shownames] [from-me="yes"][emote="no"] buddyname {
    padding: 0px 12px 2px 0px;
}

[from-me="yes"][emote="no"] messagetext {
    -webkit-border-fit:lines;
    margin: 5px 5px 3px 5px;
    padding: 10px 15px;
    border-radius: 15px 15px 0 15px;
}

[from-me="no"][emote="no"] messagetext {
    -webkit-border-fit:lines;
    margin: 5px 5px 3px 5px;
    padding: 10px 15px;
    border-radius: 15px 15px 15px 0;
}

[local-balloon-color="automatic"] [service="imessage"][from-me="yes"][emote="no"] span::selection,
[local-balloon-color="9158907"] [from-me="yes"][emote="no"] span::selection, [remote-balloon-color="9158907"] [from-me="no"][emote="no"] span::selection,
[remote-balloon-color="automatic"] [from-me="no"][emote="no"][balloon-color="9158907"] span::selection,
[remote-balloon-color="random"] [from-me="no"][emote="no"][random-balloon-color="9158907"] span::selection {
    background: #d1d1d1; /* silver selection color */
}


@media screen {
    /* TODO: when we get CSS variables, we can replace the following rules with just one! */
    /* 101 */
    [local-balloon-color="9158907"] [from-me="yes"] messagetext, [local-balloon-color="automatic"] [from-me="yes"] messagetext {
       background-color: rgb(15,135,235);
    }
    /* 102 */
    [local-balloon-color="14530047"] [from-me="yes"][typing-indicator="no"] messagetext {
      background-color: rgb(222,183,255);
    }
    /* 103 */
    [local-balloon-color="16752340"] [from-me="yes"][typing-indicator="no"] messagetext {
        background-color: rgb(255,161,213);
    }
    /* 104 */
    [local-balloon-color="16429620"] [from-me="yes"][typing-indicator="no"] messagetext {
        background-color: rgb(250,180,58);
    }
    /* 105 */
    [local-balloon-color="16770620"] [from-me="yes"][typing-indicator="no"] messagetext {
        background-color: rgb(255,231,66);
    }
    /* 106 */
    [local-balloon-color="8573511"] [from-me="yes"][typing-indicator="no"] messagetext,
    [local-balloon-color="automatic"] [from-me="yes"][service="legacy"][typing-indicator="no"] messagetext {
        background-color: rgb(132,198,83);
    }
    /* 107 */
    [local-balloon-color="12240850"] [from-me="yes"][typing-indicator="no"] messagetext {
        background-color: rgb(171,181,188);
    }
    /* 108 */
    [local-balloon-color="15329769"] [from-me="yes"][typing-indicator="no"] messagetext {
        background-color: rgb(250,250,250);
    }
    /* 101 */
    [remote-balloon-color="random"] [random-balloon-color="9158907"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="9158907"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="9158907"] [from-me="no"][typing-indicator="no"] messagetext {
       background-color: rgb(15,135,235);
    }
    /* 102 */
    [remote-balloon-color="random"] [random-balloon-color="14530047"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="14530047"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="14530047"] [from-me="no"][typing-indicator="no"] messagetext {
      background-color: rgb(222,183,255);
    }
    /* 103 */
    [remote-balloon-color="random"] [random-balloon-color="16752340"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="16752340"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="16752340"] [from-me="no"][typing-indicator="no"] messagetext {
        background-color: rgb(255,161,213);
    }
    /* 104 */
    [remote-balloon-color="random"] [random-balloon-color="16429620"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="16429620"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="16429620"] [from-me="no"][typing-indicator="no"] messagetext {
        background-color: rgb(250,180,58);
    }
    /* 105 */
    [remote-balloon-color="random"] [random-balloon-color="16770620"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="16770620"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="16770620"] [from-me="no"][typing-indicator="no"] messagetext {
        background-color: rgb(255,231,66);
    }
    /* 106 */
    [remote-balloon-color="random"] [random-balloon-color="8573511"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="8573511"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="8573511"] [from-me="no"][typing-indicator="no"] messagetext {
        background-color: rgb(132,198,83);
    }
    /* 107 */
    [remote-balloon-color="random"] [random-balloon-color="12240850"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="12240850"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="12240850"] [from-me="no"][typing-indicator="no"] messagetext {
        background-color: rgb(171,181,188);
    }
    /* 108 */
    [remote-balloon-color="random"] [random-balloon-color="15329769"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="automatic"] [balloon-color="15329769"][from-me="no"][typing-indicator="no"] messagetext,
[remote-balloon-color="15329769"] [from-me="no"][typing-indicator="no"] messagetext {
        background-color: rgb(250,250,250);
    }

    [from-me="yes"][emote="no"][typing-indicator="no"].selected-message messagetext {
    }
    [from-me="no"][emote="no"][typing-indicator="no"].selected-message messagetext {
    }
    [local-use-alternate-selection] [from-me="yes"][emote="no"][typing-indicator="no"].selected-message messagetext,
[local-use-alternate-selection] [from-me="yes"][emote="no"].selected-message messagetext {
    }
    [remote-use-alternate-selection] [from-me="no"][emote="no"][typing-indicator="no"].selected-message messagetext,
[remote-balloon-color="automatic"] [from-me="no"][emote="no"][typing-indicator="no"][use-alternate-selection].selected-message messagetext {
    }

    [typing-indicator="yes"] messagetext {
        content:url(transcript-resource://left-thought-2x);
    }

    [from-me="yes"] .overlay {
        -webkit-mask-box-image:url(transcript-resource://coreui/ImageBubbleGloss-2x) 43.478261% 51.282051% 52.173913% 30.769231%;
    }
    [from-me="no"] .overlay {
        -webkit-mask-box-image:url(transcript-resource://coreui/mirror/ImageBubbleGloss-2x) 43.478261% 30.769231% 52.173913% 51.282051%;
    }
    [from-me="yes"] .inline-image {
        margin: -10px -15px !important;
    }
    [from-me="no"] .inline-image {
        margin: -10px -15px !important;
    }
}


@media print {
    [from-me="yes"] .inline-image {
        margin:0px;
        -webkit-mask-box-image:none;
    }
    [from-me="yes"] .overlay {
        -webkit-mask-box-image:none;
        border-width: 0px;
    }
    [from-me="no"] .inline-image {
        margin:0px;
        -webkit-mask-box-image:none;
    }
    [from-me="no"] .overlay {
        -webkit-mask-box-image:none;
        border-width: 0px;
    }
    .inline-image {
        top: 0px;
    }
}


.selected-message .overlay {
   background-image: -webkit-gradient(linear, left bottom,left top, color-stop(0, rgba(0,32,194,0.5)),color-stop(1, rgba(103,126,207,0.5))) !important;
   background-origin: border-box;
   background-size: auto;
}

.transfer {
    padding-bottom: 2px;
}

[remote-use-alternate-selection] [from-me="no"].selected-message .overlay,
[local-use-alternate-selection] [from-me="yes"].selected-message .overlay,
[remote-balloon-color="automatic"] [use-alternate-selection].selected-message .overlay {
   background-image: -webkit-gradient(linear, left bottom,left top, color-stop(0, rgba(231,231,231,0.5)),color-stop(1, rgba(246,246,246,0.5))) !important;
}

[typing-indicator="yes"] messagetext {
    width: 46px;
    height: 22px;
    content:url(transcript-resource://left-thought);
    -webkit-user-select:none;
    padding: 0px 0px 4px 0px;
    border: 0px 0px 0px 0px !important;
    margin: 5px 0px 3px 4px;
}

.boxes,
.compact {
    display: none !important;
}