123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- * { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; }
- html, body { height: 100%; }
- body {
- width: 100%;
- margin: 0;
- color: rgba(0,0,0,.89);
- font: 12px/17px "Helvetica Neue", Helvetica, Arial, sans-serif;
- background: url(../img/minimalism_by_nerdynotdirty.jpg);
- background: url(../img/bg.jpg);
- background-size: cover;
- }
- .avatar {
- width: 40px;
- height: 40px;
- border-radius: 3px;
- background-size: cover;
- }
- header {
- height: 40px;
- padding: 12px 0 8px 13px;
- background: #eee;
- border-bottom: 1px solid hsla(222, 10%, 55%,.34);
- }
- h2 {
- font-size: 18px;
- font-weight: normal;
- float: left;
- }
- header input[type=search],
- header select,
- header button {
- margin-right: 13px;
- float: right;
- }
- header button {
- margin-top: -3px;
- }
- .sidebar {
- width: 200px;
- left: 0;
- top: 0;
- bottom: 0;
- position: absolute;
- border-right: 1px solid hsla(222, 10%, 55%,.34);
- z-index: 1;
- }
- header .agent {
- padding: 8px;
- border-bottom: 1px solid hsla(222, 10%, 55%,.34);
- }
- header .agent .name {
- padding: 12px 21px 0 0;
- line-height: 18px;
- }
- .name {
- color: black;
- font-weight: bold;
- }
- .userActions {
- list-style: none;
- overflow: hidden;
- }
- .userActions li {
- padding-right: 8px;
- color: hsl(222, 10%, 77%);
- font-size: 11px;
- float: left;
- cursor: pointer;
- }
- .userActions li:hover {
- color: hsl(222, 10%, 34%);
- }
- .userActions li:last-child {
- width: 34%;
- padding-right: 21px;
- }
- .listHeader {
- padding: 13px 21px 13px;
- color: hsl(222, 10%, 13%);
- font-size: 15px;
- text-transform: uppercase;
- }
- .listView li {
- padding: 13px 21px 13px 34px;
- color: hsla(222, 10%, 13%, .55);
- font-weight: bold;
- cursor: pointer;
- }
- .listView li.selected {
- color: hsl(222, 10%, 13%);
- background-image: -webkit-linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.13));
- position: relative;
- }
- .listView li.selected:before123 {
- top: 6px;
- right: -15px;
- width: 31px;
- height: 31px;
- content: "";
- background: hsl(222, 10%, 87%);
- position: absolute;
- z-index: -1;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- .listView li .counter {
- float: right;
- padding: 1px 5px;
- font-size: 10px;
- font-weight: bold;
- text-shadow: 0 1px rgba(255,255,255,.55);
- background-color: hsl(55, 100%, 50%);
- background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.05));
- border-radius: 2px;
- border: 1px solid rgba(0,0,0,.34);
- box-shadow:
- 0 1px rgba(0,0,0,.05),
- 0 1px 3px rgba(0,0,0,.05),
- 0 0 0 1px rgba(255,255,255,.21) inset;
- }
- .twoColumns, .stream, .conversation {
- top: 0;
- bottom: 0;
- position: absolute;
- }
- .twoColumns {
- right: 0;
- left: 200px;
- }
- .content {
- left: 0;
- right: 0;
- bottom: 0;
- top: 40px;
- position: absolute;
- overflow: auto;
- background: white;
- }
- .stream {
- left: 0;
- right: 60%;
- border-right: 1px solid hsla(222, 10%, 55%,.34);
- }
- .stream article {
- height: 76px;
- padding: 13px;
- position: relative;
- box-shadow: inset 0 -1px hsla(222, 10%, 55%,.34);
- }
- .stream.important article { border-left: 5px solid rgba(0,255,0,.34); }
- .stream article.urgent { border-left-color: rgba(255,0,0,.55); }
- .stream article.important { border-left-color: rgba(255,180,80,.89); }
- .stream article.selected {
- background: hsl(55, 100%, 50%);
- }
- .stream article.selected p {
- color: black;
- }
- .stream section {
- margin-left: 63px;
- }
- .stream .name {
- font-weight: bold;
- }
- .stream nav, .stream .time {
- float: right;
- }
- .stream nav {
- margin-top: -5px;
- }
- .stream nav span {
- color: rgba(0,0,0,.34);
- padding-left: 3px;
- cursor: pointer;
- }
- .stream nav span:hover {
- color: rgba(0,0,0,1);
- }
- .stream .time, .stream .channel {
- padding-left: 5px;
- color: black;
- font-size: 0.95em;
- }
- .stream img {
- left: 13px;
- position: absolute;
- border-radius: 3px;
- }
- .stream section.answer {
- margin-top: 5px;
- padding: 5px 8px 8px 36px;
- background: rgba(0,0,0,0.05);
- position: relative;
- overflow: hidden;
- }
- .stream section.answer textarea {
- width: 100%;
- margin-bottom: 5px;
- font: 12px/18px "Helvetica Neue", Helvetica, sans-serif;
- border: 1px solid rgba(0,0,0,.21);
- box-shadow: 1px 1px white, inset 1px 1px rgba(0,0,0,0.05);
- }
- .stream section.answer button { float: right; }
- .stream section.answer img { top: 6px; left: 5px; width: 25px; border-radius: 2px; }
- .stream p {
- height: 32px;
- color: rgba(0,0,0,.50);
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .conversation {
- left: 40%;
- right: 0;
- }
- .conversation section {
- margin: 13px;
- overflow: hidden;
- position: relative;
- }
- .conversation .info { width: 50px; position: absolute; }
- .conversation .info img { margin-top: 1px; border-radius: 3px; }
- .conversation .agent .info { right: 0; }
- .conversation .agent .info { float: right; }
- .conversation .agent .body, .conversation .customer .body {
- min-height: 34px;
- float: left;
- padding: 0 13px;
- margin: 0 0 13px 58px;
- background: white;
- border-radius: 5px;
- box-shadow: 0 1px 2px hsla(222, 10%, 55%,.34);
- }
- .conversation .agent .body { float: right; margin: 0 58px 13px 0; }
- .converastion .agent { float: right; }
- .conversation .body p {
- margin: 8px 0;
- }
- .converastion .customer { float: left; }
- blockquote {
- margin: 8px 0;
- padding: 0 8px;
- color: #144fae;
- border-left: 2px solid #144fae;
- }
- blockquote blockquote {
- color: #006312;
- border-color: #006312;
- }
- blockquote blockquote blockquote {
- color: #540000;
- border-color: #540000;
- }
- button {
- padding: 3px 13px;
- color: rgba(0,0,0,.89);
- line-height: 15px;
- text-shadow: 0 1px rgba(255,255,255,.34);
- background: rgba(0,0,0,.13);
- background: -webkit-linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.08));
- background: -moz-linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.08));
- background: linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.08));
- border: 1px solid rgba(0,0,0,.21);
- border-radius: 2px;
- box-shadow: inset 0 1px rgba(255,255,255,.34), 0 1px rgba(0,0,0,.05);
- cursor: pointer;
- }
- button.main { font-weight: bold; }
-
- /* helpers */
- .clearfix:after {
- content: "";
- clear: both;
- display: block;
- height: 0;
- }
|