public/assets/css/inbox.css

   1 /***
   2 Inbox Page
   3 ***/
   4 .inbox {
   5   margin-bottom: 20px;
   6 }
   7
   8 .inbox .inbox {
   9   margin-bottom: 0px;
  10 }
  11
  12 .inbox .tab-content {
  13   overflow: inherit;
  14 }
  15
  16 .inbox .inbox-loading {
  17   display: none;
  18   font-size: 22px;
  19   font-weight: 300;
  20 }
  21
  22 /*Inbox Menu*/
  23 .inbox .inbox-nav {
  24   margin: 0;
  25   padding: 0;
  26   list-style: none;
  27 }
  28
  29 .inbox .inbox-nav li {
  30   position: relative;
  31 }
  32
  33 .inbox .inbox-nav li a {
  34   color: #4d82a3;
  35   display: block;
  36   font-size: 15px;
  37   border-left: none;
  38   text-align: left !important;
  39   padding: 8px 14px;
  40   margin-bottom: 1px;
  41   background: #f4f9fd;
  42 }
  43
  44 .inbox .inbox-nav li.active a,
  45 .inbox .inbox-nav li.active:hover a {
  46   color: #fff;
  47   border-left: none;
  48   background: #169ef4 !important;
  49   text-decoration: none;
  50 }
  51
  52 .inbox .inbox-nav li.active b {
  53   top: 12px;
  54   right: -6px;
  55   width: 6px;
  56   position: absolute;
  57   display: inline-block;
  58   border-top: 6px solid transparent;
  59   border-bottom: 6px solid transparent;
  60   border-left: 6px solid #169ef4;
  61 }
  62
  63 .inbox .inbox-nav li:hover a {
  64   color: #4d82a3;
  65   background: #eef4f7 !important;
  66   text-decoration: none;
  67 }
  68
  69 .inbox .inbox-nav li.compose-btn a {
  70   color: #fff;
  71   text-shadow: none;
  72   text-align: center;
  73   margin-bottom: 18px;
  74   background: #35aa47;
  75 }
  76
  77 .inbox .inbox-nav li.compose-btn i,
  78 .inbox .inbox-nav li.compose-btn:hover i {
  79   top: 1px;
  80   color: #fff;
  81   font-size: 15px;
  82   position: relative;
  83   background: none !important;
  84 }
  85
  86 .inbox .inbox-nav li.compose-btn a:hover {
  87   background-color: #1d943b !important;
  88 }
  89
  90 /*Inbox Content*/
  91 .inbox .inbox-header {
  92   overflow: hidden;
  93 }
  94
  95 .inbox .inbox-header h1 {
  96   margin: 0;
  97   color: #666;
  98   margin-bottom: 10px;
  99 }
 100
 101 .inbox .pagination-control {
 102   text-align: right;
 103 }
 104
 105 .inbox .pagination-control .pagination-info {
 106   display: inline-block;
 107   padding-right: 10px;
 108   font-size: 14px;
 109   line-height: 14px;
 110 }
 111
 112 .inbox tr {
 113   color: #777;
 114   font-size: 13px;
 115 }
 116
 117 .inbox tr label {
 118   display: inline-block;
 119   margin-bottom: 0;
 120 }
 121
 122 .inbox tr.unread td {
 123   font-weight: 600;
 124 }
 125
 126 .inbox td i.icon-paper-clip {
 127   top: 2px;
 128   color: #d8e0e5;
 129   font-size: 17px;
 130   position: relative;
 131 }
 132
 133 .inbox tr i.icon-star,
 134 .inbox tr i.icon-trash {
 135   cursor: pointer;
 136 }
 137
 138 .inbox tr i.icon-star {
 139   color: #eceef0;
 140 }
 141
 142 .inbox tr i.icon-star:hover {
 143   color: #fd7b12;
 144 }
 145
 146 .inbox tr i.inbox-started {
 147   color: #fd7b12;
 148 }
 149
 150 /*.inbox .table th,
 151 .inbox .table td {
 152   border: none;
 153 }
 154
 155 .inbox .table th {
 156   background: #eef4f7;
 157   border-bottom: solid 5px #fff;
 158 }*/
 159
 160 .inbox th.text-right {
 161   text-align: right;
 162 }
 163
 164 .inbox th label.inbox-select-all {
 165   color: #828f97;
 166   font-size: 13px;
 167   padding: 1px 4px 0;
 168 }
 169
 170 .inbox ul.inbox-nav {
 171   margin-bottom: 0;
 172 }
 173
 174 .inbox ul.inbox-nav li {
 175   padding: 0;
 176 }
 177
 178 .inbox ul.inbox-nav li span {
 179   color: #828f97;
 180   font-size: 12px;
 181   margin-right: 10px;
 182 }
 183
 184 .inbox ul.inbox-nav i {
 185   color: #fff;
 186   padding: 1px 0;
 187   font-size: 15px;
 188   cursor: pointer;
 189   /*background: #d0dde4 !important;*/
 190 }
 191
 192 .inbox ul.inbox-nav i:hover {
 193   background: #169ef4 !important;
 194 }
 195
 196 .inbox td.text-right {
 197   /*width: 100px;*/
 198   text-align: right;
 199 }
 200
 201 .inbox td.inbox-small-cells {
 202   width: 10px;
 203 }
 204
 205 .inbox .table-hover tbody tr:hover > td,
 206 .inbox .table-hover tbody tr:hover > th,
 207 .inbox .table-striped tbody > tr:nth-child(odd) > td,
 208 .inbox .table-striped tbody > tr:nth-child(odd) > th {
 209   background: #f8fbfd;
 210   cursor: pointer;
 211 }
 212
 213 .inbox .table-hover tbody tr:hover > td,
 214 .inbox .table-hover tbody tr:hover > th {
 215   background: #eef4f7;
 216 }
 217
 218 /*Inbox Drafts*/
 219 .inbox .inbox-drafts {
 220   padding: 8px 0;
 221   text-align: center;
 222   border-top: solid 1px #eee;
 223   border-bottom: solid 1px #eee;
 224 }
 225
 226 /*Inbox View*/
 227 .inbox-view-header {
 228   margin-bottom: 20px;
 229 }
 230
 231 .inbox-view-header h1 {
 232   color: #666;
 233   font-size: 22px;
 234   line-height: 24px;
 235   margin-bottom: 0 !important;
 236 }
 237
 238 .inbox-view-header h1 a {
 239   top: -2px;
 240   color: #fff;
 241   cursor: pointer;
 242   font-size: 13px;
 243   padding: 2px 7px;
 244   line-height: 16px;
 245   position: relative;
 246   background: #b0bcc4;
 247   display: inline-block;
 248 }
 249
 250 .inbox-view-header h1 a:hover {
 251   background: #aab5bc;
 252   text-decoration: none;
 253 }
 254
 255 .inbox-view-header i.icon-print {
 256   color: #94a4ab;
 257   cursor: pointer;
 258   font-size: 14px;
 259   display: inline-block;
 260   padding: 6px 8px !important;
 261   background: #edf1f4 !important;
 262 }
 263
 264 .inbox-view-header i.icon-print:hover {
 265   background: #e7ebef !important;
 266 }
 267
 268 .inbox-view-info {
 269   color: #666;
 270   padding: 5px 0;
 271   margin-bottom: 10px;
 272   border-top: solid 1px #eee;
 273   border-bottom: solid 1px #eee;
 274 }
 275
 276 .inbox-view-info strong {
 277   color: #666;
 278   margin: 0 10px 0 5px;
 279 }
 280
 281 .inbox-view-info .inbox-info-btn {
 282   text-align: right;
 283 }
 284
 285 .inbox-view-info .inbox-info-btn ul {
 286   text-align: left;
 287 }
 288
 289 .inbox-view-info button {
 290   top: 2px;
 291   color: #94a4ab;
 292   font-size: 13px;
 293   margin-left: 4px;
 294   padding: 3px 10px;
 295   position: relative;
 296   background: #edf1f4;
 297 }
 298
 299 .inbox-view-info button:hover {
 300   color: #94a4ab;
 301   background: #e7ebef;
 302 }
 303
 304 .inbox-view {
 305   color: #666;
 306   padding: 15px 0 0;
 307 }
 308
 309 .inbox-view a {
 310   color: #169ce9;
 311 }
 312
 313 .inbox-attached {
 314   line-height: 16px;
 315 }
 316
 317 .inbox-attached a {
 318   margin: 0 2px;
 319 }
 320
 321 .inbox-attached img {
 322   height: auto;
 323   max-width: 250px;
 324   margin-bottom: 5px;
 325 }
 326
 327 .inbox-attached span {
 328   margin-right: 3px;
 329 }
 330
 331 .inbox-attached strong {
 332   color: #555;
 333   display: block;
 334   font-size: 13px;
 335 }
 336
 337 .inbox-attached .margin-bottom-25 {
 338   margin-bottom: 25px;
 339 }
 340
 341 .inbox-attached .margin-bottom-15 {
 342   margin-bottom: 15px;
 343 }
 344
 345 /*Inbox Compose*/
 346 .inbox-compose {
 347   margin-top: 1px;
 348   border: solid 1px #eee;
 349 }
 350
 351 .inbox-compose-btn {
 352   padding: 8px 4px;
 353   background: #f0f6fa;
 354 }
 355
 356 .inbox-compose-attachment {
 357   padding: 8px 8px;
 358 }
 359
 360 .inbox-compose-attachment .btn {
 361   padding: 4px 10px;
 362 }
 363
 364 .inbox-compose-btn button {
 365   color: #fff;
 366   font-size: 14px;
 367   margin-left: 4px;
 368   padding: 4px 10px;
 369   background: #c0cfdd;
 370 }
 371
 372 .inbox-compose-btn button:hover {
 373   color: #fff;
 374   background: #4d90fe;
 375 }
 376
 377 .inbox-compose-btn button i {
 378   margin-right: 3px;
 379 }
 380
 381 .inbox-compose .inbox-form-group {
 382   margin-bottom: 0;
 383   position: relative;
 384   border-bottom: solid 1px #eee;
 385 }
 386
 387 .inbox-compose .controls {
 388   margin-left: 85px;
 389 }
 390
 391 .inbox-compose .inbox-form-group > label {
 392   width: 80px;
 393   float: left;
 394   color: #979797;
 395   text-align: right;
 396 }
 397
 398 .inbox-compose .controls > input {
 399   border: none !important;
 400 }
 401
 402 .inbox-compose .controls-to {
 403   padding-right: 55px;
 404 }
 405
 406 .inbox-compose .controls-cc {
 407   padding-right: 20px;
 408 }
 409
 410 .inbox-compose .controls-bcc {
 411   padding-right: 20px;
 412 }
 413
 414 .inbox-compose .inbox-form-group a.close {
 415   top: 13px;
 416   right: 10px;
 417   position: absolute;
 418 }
 419
 420 .inbox-compose .mail-to .inbox-cc-bcc {
 421   display: inline-block;
 422   top: 7px;
 423   right: 10px;
 424   color: #979797;
 425   font-size: 14px;
 426   cursor: pointer;
 427   position: absolute;
 428 }
 429
 430 .inbox-compose .mail-to .inbox-bcc {
 431   margin-left: 5px;
 432 }
 433
 434 .inbox-compose .mail-to inbox-cc:hover,
 435 .inbox-compose .mail-to inbox-bcc:hover {
 436   color: #777;
 437 }
 438
 439 .inbox-compose .wysihtml5 {
 440   padding: 0px !important;
 441   margin: 0px !important;
 442   border: 0 !important;
 443 }
 444
 445 .inbox-compose .wysihtml5-sandbox {
 446   padding: 0px !important;
 447   margin: 0px !important;
 448   display: block !important;
 449   border: 0 !important;
 450   margin-top: 5px;
 451   width: 100% !important;
 452   border-left: none;
 453   border-right: none;
 454   border-color: #eee;
 455 }
 456
 457 .inbox-compose .wysihtml5-toolbar {
 458   border: 0;
 459   border-bottom: 1px solid #eee;
 460 }
 461
 462 .inbox-compose .wysihtml5-toolbar > li {
 463   height: 34px;
 464   margin-right: 0;
 465   margin-bottom: 0;
 466 }
 467
 468 .inbox-compose .wysihtml5-toolbar > li > a,
 469 .inbox-compose .wysihtml5-toolbar > li > div > a {
 470   background: #fff;
 471 }
 472 .inbox-compose .wysihtml5-toolbar > li > a:hover,
 473 .inbox-compose .wysihtml5-toolbar > li > div > a:hover {
 474   background: #f1f1f1;
 475   border-radius: 0;
 476 }
 477
 478 .inbox-compose .wysihtml5-toolbar .dropdown.open .dropdown-toggle,
 479 ul.wysihtml5-toolbar a.btn.wysihtml5-command-active {
 480   background: #eee !important;
 481 }
 482
 483 @media (max-width: 480px) {
 484   .inbox-compose .inbox-form-group > label {
 485     margin-top: 7px;
 486   }
 487 }