Commit 58ca2e63 authored by Alexander Akulich's avatar Alexander Akulich
Browse files

Styles/Renkoo: Extract coloring css from variants

Summary:
This code deduplication let us to adjust a color in a single file
instead of in (colors - 1) files.

ATM there are five color schemes, so this results in four times
code reduction.

Test Plan: Checked all twenty combinations

Differential Revision: https://phabricator.kde.org/D12751
parent cd27534c
.x-incomingItem .x-timeStamp
{
color: #7fc5f8;
}
.x-incomingItem .x-myBubble .x-indicator
{
background: url("../images/blueIndicator.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tl
{
background: url("../images/blueCurves.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tr
{
background: url("../images/blueCurves.png") no-repeat top right;
}
.x-incomingItem .x-tableBubble .x-head
{
background: url("../images/blueCurves.png") no-repeat -10px 0;
}
.x-incomingItem .x-tableBubble .x-message
{
background: url("../images/blueBackground.png") repeat-y top left;
}
.x-incomingItem .x-tableBubble .x-messageRight
{
background: url("../images/blueBackground.png") repeat-y top right;
}
.x-incomingItem .x-tableBubble .x-bl
{
background: url("../images/blueCurves.png") no-repeat bottom left;
}
.x-incomingItem .x-tableBubble .x-br
{
background: url("../images/blueCurves.png") no-repeat bottom right;
}
.x-incomingItem .x-followUp
{
background-color: #ddf0fe;
border-bottom: 1px solid #fff;
}
.x-incomingItem .x-timeStamp
{
color: #9ecf35;
}
.x-incomingItem .x-myBubble .x-indicator
{
background: url("../images/greenIndicator.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tl
{
background: url("../images/greenCurves.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tr
{
background: url("../images/greenCurves.png") no-repeat top right;
}
.x-incomingItem .x-tableBubble .x-head
{
background: url("../images/greenCurves.png") no-repeat -10px 0;
}
.x-incomingItem .x-tableBubble .x-message
{
background: url("../images/greenBackground.png") repeat-y top left;
}
.x-incomingItem .x-tableBubble .x-messageRight
{
background: url("../images/greenBackground.png") repeat-y top right;
}
.x-incomingItem .x-tableBubble .x-bl
{
background: url("../images/greenCurves.png") no-repeat bottom left;
}
.x-incomingItem .x-tableBubble .x-br
{
background: url("../images/greenCurves.png") no-repeat bottom right;
}
.x-incomingItem .x-followUp
{
background-color: #e2efc4;
border-bottom: 1px solid #fff;
}
.x-incomingItem .x-timeStamp
{
color: #f88f8f;
}
.x-incomingItem .x-myBubble .x-indicator
{
background: url("../images/redIndicator.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tl
{
background: url("../images/redCurves.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tr
{
background: url("../images/redCurves.png") no-repeat top right;
}
.x-incomingItem .x-tableBubble .x-head
{
background: url("../images/redCurves.png") no-repeat -10px 0;
}
.x-incomingItem .x-tableBubble .x-message
{
background: url("../images/redBackground.png") repeat-y top left;
}
.x-incomingItem .x-tableBubble .x-messageRight
{
background: url("../images/redBackground.png") repeat-y top right;
}
.x-incomingItem .x-tableBubble .x-bl
{
background: url("../images/redCurves.png") no-repeat bottom left;
}
.x-incomingItem .x-tableBubble .x-br
{
background: url("../images/redCurves.png") no-repeat bottom right;
}
.x-incomingItem .x-followUp
{
background-color: #ffdada;
border-bottom: 1px solid #fff;
}
.x-incomingItem .x-timeStamp
{
color: #a9a9a9;
}
.x-incomingItem .x-myBubble .x-indicator
{
background: url("../images/steelIndicator.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tl
{
background: url("../images/steelCurves.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tr
{
background: url("../images/steelCurves.png") no-repeat top right;
}
.x-incomingItem .x-tableBubble .x-head
{
background: url("../images/steelCurves.png") no-repeat -10px 0;
}
.x-incomingItem .x-tableBubble .x-message
{
background: url("../images/steelBackground.png") repeat-y top left;
}
.x-incomingItem .x-tableBubble .x-messageRight
{
background: url("../images/steelBackground.png") repeat-y top right;
}
.x-incomingItem .x-tableBubble .x-bl
{
background: url("../images/steelCurves.png") no-repeat bottom left;
}
.x-incomingItem .x-tableBubble .x-br
{
background: url("../images/steelCurves.png") no-repeat bottom right;
}
.x-incomingItem .x-followUp
{
background-color: #ececec;
border-bottom: 1px solid #fff;
}
.x-incomingItem .x-timeStamp
{
color: #bdb410;
}
.x-incomingItem .x-myBubble .x-indicator
{
background: url("../images/yellowIndicator.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tl
{
background: url("../images/yellowCurves.png") no-repeat top left;
}
.x-incomingItem .x-tableBubble .x-tr
{
background: url("../images/yellowCurves.png") no-repeat top right;
}
.x-incomingItem .x-tableBubble .x-head
{
background: url("../images/yellowCurves.png") no-repeat -10px 0;
}
.x-incomingItem .x-tableBubble .x-message
{
background: url("../images/yellowBackground.png") repeat-y top left;
}
.x-incomingItem .x-tableBubble .x-messageRight
{
background: url("../images/yellowBackground.png") repeat-y top right;
}
.x-incomingItem .x-tableBubble .x-bl
{
background: url("../images/yellowCurves.png") no-repeat bottom left;
}
.x-incomingItem .x-tableBubble .x-br
{
background: url("../images/yellowCurves.png") no-repeat bottom right;
}
.x-incomingItem .x-followUp
{
background-color: #f4f0a7;
border-bottom: 1px solid #fff;
}
.x-outgoingItem .x-timeStamp
{
color: #7fc5f8;
}
.x-outgoingItem .x-myBubble .x-indicator
{
background: url("../images/blueIndicator.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tl
{
background: url("../images/blueCurves.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tr
{
background: url("../images/blueCurves.png") no-repeat top right;
}
.x-outgoingItem .x-tableBubble .x-head
{
background: url("../images/blueCurves.png") no-repeat -10px 0;
}
.x-outgoingItem .x-tableBubble .x-message
{
background: url("../images/blueBackground.png") repeat-y top left;
}
.x-outgoingItem .x-tableBubble .x-messageRight
{
background: url("../images/blueBackground.png") repeat-y top right;
}
.x-outgoingItem .x-tableBubble .x-bl
{
background: url("../images/blueCurves.png") no-repeat bottom left;
}
.x-outgoingItem .x-tableBubble .x-br
{
background: url("../images/blueCurves.png") no-repeat bottom right;
}
.x-outgoingItem .x-followUp
{
background-color: #ddf0fe;
border-bottom: 1px solid #fff;
}
.x-outgoingItem .x-timeStamp
{
color: #9ecf35;
}
.x-outgoingItem .x-myBubble .x-indicator
{
background: url("../images/greenIndicator.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tl
{
background: url("../images/greenCurves.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tr
{
background: url("../images/greenCurves.png") no-repeat top right;
}
.x-outgoingItem .x-tableBubble .x-head
{
background: url("../images/greenCurves.png") no-repeat -10px 0;
}
.x-outgoingItem .x-tableBubble .x-message
{
background: url("../images/greenBackground.png") repeat-y top left;
}
.x-outgoingItem .x-tableBubble .x-messageRight
{
background: url("../images/greenBackground.png") repeat-y top right;
}
.x-outgoingItem .x-tableBubble .x-bl
{
background: url("../images/greenCurves.png") no-repeat bottom left;
}
.x-outgoingItem .x-tableBubble .x-br
{
background: url("../images/greenCurves.png") no-repeat bottom right;
}
.x-outgoingItem .x-followUp
{
background-color: #e2efc4;
border-bottom: 1px solid #fff;
}
.x-outgoingItem .x-timeStamp
{
color: #f88f8f;
}
.x-outgoingItem .x-myBubble .x-indicator
{
background: url("../images/redIndicator.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tl
{
background: url("../images/redCurves.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tr
{
background: url("../images/redCurves.png") no-repeat top right;
}
.x-outgoingItem .x-tableBubble .x-head
{
background: url("../images/redCurves.png") no-repeat -10px 0;
}
.x-outgoingItem .x-tableBubble .x-message
{
background: url("../images/redBackground.png") repeat-y top left;
}
.x-outgoingItem .x-tableBubble .x-messageRight
{
background: url("../images/redBackground.png") repeat-y top right;
}
.x-outgoingItem .x-tableBubble .x-bl
{
background: url("../images/redCurves.png") no-repeat bottom left;
}
.x-outgoingItem .x-tableBubble .x-br
{
background: url("../images/redCurves.png") no-repeat bottom right;
}
.x-outgoingItem .x-followUp
{
background-color: #ffdada;
border-bottom: 1px solid #fff;
}
.x-outgoingItem .x-timeStamp
{
color: #a9a9a9;
}
.x-outgoingItem .x-myBubble .x-indicator
{
background: url("../images/steelIndicator.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tl
{
background: url("../images/steelCurves.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tr
{
background: url("../images/steelCurves.png") no-repeat top right;
}
.x-outgoingItem .x-tableBubble .x-head
{
background: url("../images/steelCurves.png") no-repeat -10px 0;
}
.x-outgoingItem .x-tableBubble .x-message
{
background: url("../images/steelBackground.png") repeat-y top left;
}
.x-outgoingItem .x-tableBubble .x-messageRight
{
background: url("../images/steelBackground.png") repeat-y top right;
}
.x-outgoingItem .x-tableBubble .x-bl
{
background: url("../images/steelCurves.png") no-repeat bottom left;
}
.x-outgoingItem .x-tableBubble .x-br
{
background: url("../images/steelCurves.png") no-repeat bottom right;
}
.x-outgoingItem .x-followUp
{
background-color: #ececec;
border-bottom: 1px solid #fff;
}
.x-outgoingItem .x-timeStamp
{
color: #bdb410;
}
.x-outgoingItem .x-myBubble .x-indicator
{
background: url("../images/yellowIndicator.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tl
{
background: url("../images/yellowCurves.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tr
{
background: url("../images/yellowCurves.png") no-repeat top right;
}
.x-outgoingItem .x-tableBubble .x-head
{
background: url("../images/yellowCurves.png") no-repeat -10px 0;
}
.x-outgoingItem .x-tableBubble .x-message
{
background: url("../images/yellowBackground.png") repeat-y top left;
}
.x-outgoingItem .x-tableBubble .x-messageRight
{
background: url("../images/yellowBackground.png") repeat-y top right;
}
.x-outgoingItem .x-tableBubble .x-bl
{
background: url("../images/yellowCurves.png") no-repeat bottom left;
}
.x-outgoingItem .x-tableBubble .x-br
{
background: url("../images/yellowCurves.png") no-repeat bottom right;
}
.x-outgoingItem .x-followUp
{
background-color: #f4f0a7;
border-bottom: 1px solid #fff;
}
@import url("../Styles/main.css");
/* outgoing */
.x-outgoingItem .x-timeStamp
{
color: #7fc5f8;
}
.x-outgoingItem .x-myBubble .x-indicator
{
background: url("../images/blueIndicator.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tl
{
background: url("../images/blueCurves.png") no-repeat top left;
}
.x-outgoingItem .x-tableBubble .x-tr
{
background: url("../images/blueCurves.png") no-repeat top right;
}
.x-outgoingItem .x-tableBubble .x-head
{
background: url("../images/blueCurves.png") no-repeat -10px 0;
}
.x-outgoingItem .x-tableBubble .x-message
{
background: url("../images/blueBackground.png") repeat-y top left;
}
.x-outgoingItem .x-tableBubble .x-messageRight
{
background: url("../images/blueBackground.png") repeat-y top right;
}
.x-outgoingItem .x-tableBubble .x-bl
{
background: url("../images/blueCurves.png") no-repeat bottom left;
}
.x-outgoingItem .x-tableBubble .x-br
{
background: url("../images/blueCurves.png") no-repeat bottom right;
}
.x-outgoingItem .x-followUp
{
background-color: #ddf0fe;
border-bottom: 1px solid #fff;
}
/*incoming */
.x-incomingItem .x-myBubble .x-indicator
{
background: url("../images/greenIndicator.png") no-repeat top left;
}
.x-incomingItem .x-timeStamp