Newer
Older
Gabriel Engel
committed
@import "utils/_lesshat.import.less";
@import "utils/_reset.import.less";
@import "utils/_keyframes.import.less";
@import "utils/_preloader.import.less";
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);
Gabriel Engel
committed
@import url(http://fonts.googleapis.com/css?family=Muli:400,300,500);
@footer-min-height: 70px;
@header-min-height: 60px;
//@primary-background-color: #045080;
//@primary-background-color: #38393d;
@secondary-background-color: #F4F4F4;
Gabriel Engel
committed
@primary-font-color: #444444;
@tertiary-font-color: rgba(255, 255, 255, 0.6);
@quaternary-font-color: rgba(255, 255, 255, 0.85);
@status-online: #35AC19;
@status-busy: #D30230;
@status-away: #fcb316;
Gabriel Engel
committed
.cf_ {
display: inline-block;
&:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
}
* {
.box-sizing(border-box);
}
:focus {
outline: 0 !important;
outline-color: transparent;
outline-style: none;
}
a {
text-decoration: none;
&:hover, &:active {
color: @primary-font-color;
text-decoration: none;
}
}
code {
color: #f8f8f2;
display: block;
padding: .5em;
background: #23241f;
border-radius: 6px;
border: none;
overflow-x: auto;
word-wrap: break-word;
font-weight: bold;
}
.text-center {
text-align: center;
}
.connection-status > .alert {
padding: 2px;
position: absolute;
width: 100%;
z-index: 1000;
border-radius: 0px;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
}
.alert-warning {
color: #8A6D3B;
background-color: #FCF8E3;
border-color: #FAEBCC;
}
.landing-page .hidden {
visibility: hidden !important;
display: none !important;
}
Gabriel Engel
committed
.small-title {
font-size: 13px;
text-transform: uppercase;
margin-bottom: 5px;
font-weight: 600;
}
.fill-all {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.custom-scroll(@background, @thumb, @width: 6px) {
Gabriel Engel
committed
&::-webkit-scrollbar {
width: @width;
background: @background;
Gabriel Engel
committed
}
&::-webkit-scrollbar-thumb {
background-color: @thumb;
-webkit-border-radius: 50px;
}
&::-webkit-scrollbar-corner {
background-color: @background;
Gabriel Engel
committed
}
}
.scrollable {
&:extend(.fill-all);
.custom-scroll(transparent, #BFBFBF);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Gabriel Engel
committed
.input-line {
Gabriel Engel
committed
&.search {
.icon-search {
position: absolute;
color: @secondary-font-color;
left: 5px;
top: 10px;
font-weight: 400;
}
input {
padding-left: 25px;
}
}
display: block;
margin-bottom: 4px;
color: @primary-font-color;
}
Gabriel Engel
committed
}
.rocket-h2 {
font-weight: 300;
text-transform: uppercase;
font-size: 20px;
letter-spacing: -0.5px;
margin: 18px 0;
color: #EFEFEF;
}
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Gabriel Engel
committed
.rocket-h3 {
font-weight: 300;
text-transform: uppercase;
font-size: 16px;
letter-spacing: -0.5px;
margin: 18px 0;
color: #EAEAEA;
}
html {
overflow-y: scroll;
.custom-scroll(transparent, rgba(255, 255, 255, 0.05), 3px);
Gabriel Engel
committed
height: 100%;
&.noscroll {
overflow: hidden;
}
}
body {
font-family: "Roboto", "HelveticaNeue-Light", "sans-serif";
font-size: 14px;
Gabriel Engel
committed
height: 100%;
width: 100%;
Gabriel Engel
committed
-webkit-font-smoothing: antialiased;
line-height: 1rem;
padding: 0;
overflow: visible;
position: relative;
}
// input & form styles
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input:focus {
outline: none;
box-shadow: 0 0 0;
Gabriel Engel
committed
}
textarea,
select,
input[type='text'],
input[type='email'],
input[type='password'] {
height: 35px;
line-height: normal;
border: 1px solid #dfdfdf;
background-color: #fff;
border-radius: 2px;
padding: 2px 8px;
Gabriel Engel
committed
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
position: relative;
width: 100%;
outline: none;
}
input.input-forward {
width: 0px;
visibility: hidden;
.transition(width .5s ease-in);
}
input.input-forward.show {
visibility: visible;
.calc(width, ~'100% - 48px');
}
input.search {
&:before {
content: " ";
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #000;
}
}
form.search-form {
position: relative;
}
.form-group {
.-btn {
margin-left: 2px;
&:nth-child(1) {
margin-left: 3px;
}
}
.input-group {
padding: 2px 0;
}
}
.form-horizontal .control-label {
padding-top: 12px;
font-weight: bold;
color: @primary-font-color;
}
.-autocomplete-container {
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
border: none;
border-radius: 0;
width: 100%;
top: auto !important;
p {
font-size: 14px;
padding: 8px 8px;
color: @secondary-font-color;
}
> i {
visibility: hidden;
:after {
content: " ";
visibility: visible;
background-image: url('/images/loading.gif');
background-position: center;
background-repeat: no-repeat;
display: block;
height: 40px;
margin-bottom: 12px;
}
}
Gabriel Engel
committed
}
.-autocomplete-item {
padding: 8px 5px;
font-size: 12px;
cursor: pointer;
color: @secondary-font-color;
}
&.selected {
background-color: @tertiary-background-color;
color: @primary-font-color;
}
Gabriel Engel
committed
}
label.required:after {
content: ' *';
color: red;
}
Gabriel Engel
committed
.status-offline,
color: @status-offline;
Gabriel Engel
committed
}
.status-online,
Gabriel Engel
committed
}
.status-busy,
color: @status-busy;
Gabriel Engel
committed
}
.status-away,
Gabriel Engel
committed
}
// TODO -- Refactor favorite styles and logic;
Gabriel Engel
committed
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
.favorite-room {
color: #FECF09;
}
.toggle-favorite {
color: #AAA;
}
.loading {
background-image: url('/images/loading.gif');
background-repeat: no-repeat;
background-position: 50%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
&.inline {
position: relative;
min-height: 40px;
background-size: 24px 24px;
}
}
.btn-loading {
background-image: url('/images/loading.gif');
background-repeat: no-repeat;
background-position: 50%;
color: transparent !important;
pointer-events: none;
cursor: not-allowed;
background-color: transparent;
border: none;
&:hover {
background-color: transparent;
}
}
// new layout buttons
.button {
display: inline-block;
padding: 10px 12px 8px;
background-color: #FFF;
font-weight: 400;
font-size: 13px;
margin: 4px;
text-transform: uppercase;
word-spacing: 0;
border: none;
line-height: 16px;
position: relative;
background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%);
position: relative;
z-index: 2;
}
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
.transition(opacity .1s ease-out);
}
&:hover {
text-decoration: none;
color: #FFF;
opacity: 1;
}
}
background-color: @tertiary-background-color;
color: @primary-font-color;
min-width: 120px;
background-color: #bc2031;
}
background-color: rgba(0, 0, 0, 0.025);
font-size: 14px;
&.facebook {
background-color: #325c99;
}
&.twitter {
background-color: #02acec;
}
&.google {
background-color: #dd4b39;
}
&.github {
background-color: #4c4c4c;
}
&.trello {
background-color: #026aa7;
}
&.meteor-developer {
background-color: #de4f4f;
}
}
Gabriel Engel
committed
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
.sec-header {
margin: 16px 0;
text-align: center;
> * {
display: inline-table;
width: auto;
vertical-align: middle;
line-height: 35px;
}
label {
margin-left: 20px;
}
}
.burger {
padding: 12px;
visibility: hidden;
display: none;
cursor: pointer;
margin-left: 7px;
position: absolute;
top: 4px;
left: 5px;
.transition(transform .2s ease-out .1s);
i {
display: block;
height: 2px;
width: 20px;
margin: 5px 0;
background-color: #333;
opacity: .8;
.transition(transform .2s ease-out, width .2s ease-out);
&:nth-child(1) {
// .transition-delay(.06s);
}
&:nth-child(3) {
.transition-delay(.1s);
}
}
}
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
.arrow {
display: block;
width: 25px;
height: 25px;
z-index: 100;
.calc(top, ~"50% - 13px");
&:before, &:after {
content: " ";
display: block;
background-color: #aaa;
width: 2px;
height: 10px;
position: absolute;
.calc(top, ~"50% - 5px");
.calc(left, ~"50% - 5px");
}
&:before {
.transform(rotate(135deg) translateX(-4px));
.transition(transform .185s ease-out .085s, background .15s ease-out);
}
&:after {
.transform(rotate(-135deg) translateX(-4px));
.transition(transform .185s ease-out, background .15s ease-out);
}
&.left {
&:before {
.transform(rotate(45deg) translateY(-4px));
}
&:after {
.transform(rotate(-45deg) translateY(4px));
}
}
}
.a-plus{
display: block;
width: 25px;
height: 25px;
z-index: 100;
position: relative;
&:before, &:after{
content: " ";
display: block;
background-color: #aaa;
width: 2px;
height: 10px;
position: absolute;
.calc(top, ~"50% - 5px");
.calc(left, ~"50% - 1px");
.transform-origin(50%, 50%);
}
&:after {
.transform(rotate(90deg));
.transition(transform .315s ease-out .2s, background .15s ease-out);
.transition(transform .315s ease-out .3s, background .15s ease-out);
}
&:hover{
&:before{
.transform(rotate(180deg));
}
&:after{
.transform(rotate(-90deg));
}
}
}
a.github-fork {
Gabriel Engel
committed
position: fixed;
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
display: block;
width: 260px;
z-index: 901;
right: -62px;
top: 50px;
background-size: 100% auto;
cursor: pointer;
background-color: #5c5c5c;
color: #f0f0f0;
padding: 1em 0 0.95em;
line-height: 1.04em;
text-decoration: none;
font-size: 1.04em;
box-shadow: -2px 3px 1px rgba(0, 0, 0, 0.23);
opacity: 1;
text-transform: uppercase;
font-weight: 400 !important;
.transform(rotate(45deg) translateY(0));
.transition(background-color .2s ease-out, transform .45s cubic-bezier(.15, 0, 0, 1) 2.15s, opacity .2s ease-out 2.15);
&:hover {
background-color: #4b4b4b;
color: #FFF;
}
&:before {
content: " ";
border-top: 1px dashed #f0f0f0;
position: absolute;
top: 3px;
width: 100%;
left: 0;
height: 1px;
z-index: 1;
}
&:after {
content: " ";
border-top: 1px dashed #f0f0f0;
position: absolute;
bottom: 2px;
z-index: 1;
left: 0;
width: 100%;
height: 1px;
}
}
.mac-bar {
display: block;
position: relative;
height: 24px;
background-color: #ddd;
Gabriel Engel
committed
width: 100%;
z-index: 10;
i {
height: 12px;
width: 12px;
Gabriel Engel
committed
display: inline-block;
background-color: #ff5f57;
border-radius: 50%;
position: absolute;
top: 6px;
left: 10px;
&:nth-child(2) {
left: 26px;
background-color: #ffbd2e;
Gabriel Engel
committed
}
&:nth-child(3) {
left: 42px;
background-color: #28ca41;
Gabriel Engel
committed
}
}
}
.avatar {
height: 100%;
width: 100%;
overflow: hidden;
.avatar-image {
display: block;
background-color: transparent;
background-size: 100% auto;
#rocket-chat {
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
visibility: visible;
background-color: #fff;
.transition(opacity .2s ease-out);
&.-hidden {
visibility: hidden;
opacity: 0;
}
> .alert {
margin-bottom: 0;
padding: 5px;
}
}
// .popover {
// z-index: 120;
// }
Gabriel Engel
committed
.account-box {
position: relative;
height: 100%;
cursor: pointer;
width: 100%;
.info {
position: relative;
height: 100%;
.thumb {
float: left;
height: 100%;
position: relative;
width: 60px;
padding: 8px;
&:after {
content: " ";
display: block;
Gabriel Engel
committed
z-index: 10;
position: absolute;
Gabriel Engel
committed
}
.avatar-initials {
line-height: 44px;
}
Gabriel Engel
committed
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
}
.data {
float: left;
position: relative;
padding: 0 25px 0 5px;
height: 100%;
display: table;
.calc(width, ~"100% - 60px");
}
.wrp {
display: table-cell;
vertical-align: middle;
text-align: left;
}
h4 {
display: block;
line-height: 18px;
color: rgba(255, 255, 255, 0.65);
font-size: 16px;
margin-top: 3px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
width: 130px;
.transition(color .15s ease-out);
}
&.status-offline {
.thumb:after {
border-color: darken(@status-offline, 5%);
background-color: @status-offline;
Gabriel Engel
committed
}
}
&.status-online {
.thumb:after {
border-color: darken(@status-online, 5%);
background-color: @status-online;
Gabriel Engel
committed
}
}
&.status-away {
.thumb:after {
border-color: darken(@status-away, 5%);
background-color: @status-away;
Gabriel Engel
committed
}
}
&.status-busy {
.thumb:after {
border-color: darken(@status-busy, 5%);
background-color: @status-busy;
Gabriel Engel
committed
}
}
}
.options {
background-color: @primary-background-color;
Gabriel Engel
committed
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
position: fixed;
top: @header-min-height;
left: 0;
padding-top: 15px;
width: @rooms-box-width;
.calc(height, ~'100% - ' @header-min-height + @footer-min-height);
.transition(transform .3s cubic-bezier(.5, 0, .1, 1));
&._hidden {
.transform(translateX(-100%));
}
.status {
padding-left: 30px;
position: relative;
&:after {
content: " ";
display: block;
width: 13px;
height: 13px;
border: 1px solid #6f6f6f;
border-radius: 50%;
z-index: 5;
position: absolute;
left: 12px;
.calc(top, ~"50% - 6px");
}
&.offline {
&:after {
border-color: #666666;
background-color: #7b7b7b;
}
}
&.online {
&:after {
border-color: #2c9210;
background-color: #35AC19;
}
}
&.away {
&:after {
border-color: #e69200;
background-color: #fcb316;
}
}
&.busy {
&:after {
border-color: #9f0030;
background-color: #D30230;
}
}
}
span.soon {
// content: "em breve";
width: 100px;
position: absolute;
right: -30px;
color: #aaa;
font-size: 10px;
top: 17px;
}
i {
width: 18px;
}
a {
position: relative;
display: table;
color: rgba(255, 255, 255, 0.5);
width: 100%;
height: 20px;
padding: 15px 12px;
line-height: 1;
text-decoration: none;
border-bottom: 1px solid darken(@primary-background-color, 2%);
Gabriel Engel
committed
&:nth-child(even) {
// background-color: #EFEFEF;
}
&:hover {
background-color: darken(@primary-background-color, 2%);
Gabriel Engel
committed
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
}
}
&.active .info,
.info:hover {
h4 {
color: rgba(255, 255, 255, 0.85);
}
.arrow {
&:before, &:after {
background-color: rgba(255, 255, 255, 0.85);
}
}
}
Gabriel Engel
committed
position: absolute;
right: 5px;
}
}
// rooms-box
background-color: @primary-background-color;
position: fixed;
top: @header-min-height;
left: 0;
padding-top: 15px;
overflow-y: auto;
overflow-x: hidden;
width: @rooms-box-width;
color: @tertiary-font-color;
.calc(height, ~'100% - ' @header-min-height + @footer-min-height);
.transition(transform .3s cubic-bezier(.5, 0, .1, 1));
.custom-scroll(transparent, rgba(255, 255, 255, 0.05));
&.hidden {
.transform(translateX(-100%));
}
line-height: 18px;
font-size: 21px;
margin-top: 3px;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
line-height: 18px;
margin-top: 6px;
}
}
text-transform: uppercase;
font-weight: 400;
margin-bottom: 0;
color: inherit;
}
border-width: 0 0 1px 0;
border-color: @tertiary-font-color;
background-color: transparent;
padding: 0 8px;
box-shadow: 0 0 0;
border-radius: 0;
}
}
Gabriel Engel
committed
.side-nav {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
width: @rooms-box-width;
height: auto;
overflow: visible;
background-color: #F4F4F4;
z-index: 100;
color: #000;
padding: 12px 0 0 0;
.transition(transform .3s ease-out);
Gabriel Engel
committed
&:before {
content: " ";
height: 1px;
width: 189px;
left: 8px;
position: absolute;
top: 59px;
background-color: #dfdfdf;
}
.rooms-list {
direction: rtl;
position: absolute;
top: @header-min-height;
.calc(height, ~"100% - " @header-min-height + @footer-min-height);
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: block;
-webkit-overflow-scrolling: touch;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
background-color: lighten(@primary-background-color, 2%);
Gabriel Engel
committed
.custom-scroll(transparent, rgba(255, 255, 255, 0.05));
> .wrapper {
direction: ltr;
padding-left: 8px;
}
}
text-align: center;
color: #f09286;
font-size: 12px;
padding: 0;
text-align: left;
margin-bottom: -20px;
margin-top: -12px;
display: block;
margin-bottom: 2px;
}
}
padding-left: 10px;
font-size: 11px;
padding: 2px 0 2px 10px;
color: @tertiary-font-color;
}
Gabriel Engel
committed
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #fff;
z-index: 110;
Gabriel Engel
committed
min-height: @header-min-height;
height: @header-min-height;
background-color: @primary-background-color;
Gabriel Engel
committed
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
Gabriel Engel
committed
text-align: right;
background: #fff;
min-height: @footer-min-height;
background-color: @primary-background-color;
Gabriel Engel
committed
.logo {
display: block;
width: 100%;
height: 100%;
&:hover {
text-decoration: none;
}
}
small {
font-size: 11px;
width: 100%;
display: block;
text-transform: lowercase;
Gabriel Engel
committed
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
margin-bottom: 1px;
font-weight: 300;
padding-right: 3px;
}
img {
display: inline-block;
width: 90%;
}
}
.search-form {
.search {
padding-left: 25px;
}
> div {
position: relative;
}
margin-right: 20px;
}
h3 {
&:extend(.small-title);
cursor: pointer;
position: relative;
text-transform: uppercase;
font-weight: 500;
margin: 25px 0 0 0;
color: @tertiary-font-color;
padding-left: 10px;
&.add-room {
&:hover {
background-color: rgba(0, 0, 0, 0.1);
i{
&:before{
.transform(rotate(180deg));
}
&:after{
.transform(rotate(-90deg));
}
}
position: absolute;
right: 5px;
top: 1px;
Gabriel Engel
committed
}
.unread {
background-color: #1dce73;
min-width: 15px;
padding: 0 2px;
border-radius: 2px;
color: #FFF;
text-align: center;
position: absolute;
right: 6px;
font-size: 11px;
top: 6px;
line-height: 16px;
font-weight: 800;
}
ul {
position: relative;
Gabriel Engel
committed
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
li {
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
.remove, .erase {
position: absolute;
display: block;
right: -18px;
top: 2px;
color: #666;
opacity: 0;
.transform(translateX(-10px));
.transition(opacity .15s ease .35s, transform .12s ease-out .35s);
}
&:hover {
.opt {
background-color: transparent;
opacity: 1;
.transform(translateX(0));
}
}
&.active {
a {
background-color: rgba(255, 255, 255, 0.075);
color: rgba(255, 255, 255, 0.75);
}
.opt {
background-color: transparent;
}
}
&.has-unread {
.opt {
opacity: 0;
}
}
&.away {
a {
color: #666;
}
}
}
a {
display: block;
border-radius: 2px 0 0 2px;
Gabriel Engel
committed
font-size: 15px;
position: relative;
line-height: 16px;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
text-decoration: none;
Gabriel Engel
committed
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
&:hover {
background-color: rgba(255, 255, 255, 0.05);
text-decoration: none;
}
}
.opt {
position: absolute;
right: 0;
width: 50px;
Gabriel Engel
committed
text-align: right;
opacity: 0;
background-color: transparent;
display: block;
Gabriel Engel
committed
.transform(translateX(-10px));
.transition(opacity .12s ease .25s, transform .15s ease-out .25s);
i {
margin: 0 1px;
color: rgba(255, 255, 255, 0.5);
&:hover {
color: rgba(255, 255, 255, 0.75);
}
}
}
i {
color: rgba(255, 255, 255, 0.35);
Gabriel Engel
committed
}
input[type="text"] {
color: #000;
width: 100%;
font-size: 12px;
}
}
}
.new-room-highlight a {
-webkit-animation: highlight 2s infinite;
-moz-animation: highlight 2s infinite;
-o-animation: highlight 2s infinite;
animation: highlight 2s infinite;
}
Gabriel Engel
committed
.page-container {
&:extend(.fill-all);
overflow-y: hidden;
.content {
&:extend(.fill-all);
padding: 0px 40px;
overflow-y: scroll;
margin-top: 60px;
padding-top: 15px;
-webkit-overflow-scrolling: touch;
.calc(height, ~'100% - 60px');
.custom-scroll(transparent, #EAEAEA);
}
}
.fixed-title {
position: absolute;
display: block;
padding: 15px 10px 15px 20px;
background: #fff;
border-bottom: 1px solid @tertiary-background-color;
Gabriel Engel
committed
z-index: 100;
top: 0;
left: 0;
width: 99%;
h2 {
max-width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 22px;
font-weight: 500;
line-height: 29px;
margin-right: -7px;
color: @secondary-font-color;
}
Gabriel Engel
committed
}
Gabriel Engel
committed
// input[type='text']{
// .calc(width, ~'100% - 100px');
// vertical-align: top;
// margin-top: 0;
// }
}
// MAIN CONTENT + MAIN PAGES //
.main-content {
display: table;
position: relative;
margin-left: @rooms-box-width;
margin-top: 0;
height: 100%;
.calc(width, ~'100% - ' @rooms-box-width);
.transition(width .25s cubic-bezier(.5, 0, .1, 1));
&.flex-opened {
.calc(width, ~'100% - ' @rooms-box-width + @flex-tab-width);
margin-right: 420px;
.flex-tab {
.transform(translateX(0));
}
}
.container-fluid {
padding-top: 0;
}
.history-date {
margin-bottom: 20px;
}
}
Gabriel Engel
committed
margin-bottom: 12px;
}
Gabriel Engel
committed
font-weight: 300;
text-transform: uppercase;
}
}
.fixed-title{
h2{
overflow: visible;
}
}
Gabriel Engel
committed
display: inline-block;
Gabriel Engel
committed
margin-right: 6px;
vertical-align: text-top;
margin-top: -5px;
margin-left: 10px;
Gabriel Engel
committed
}
Gabriel Engel
committed
margin-bottom: 20px;
max-width: 680px;
line-height: 20px;
Gabriel Engel
committed
}
Gabriel Engel
committed
margin-bottom: 8px;
}
Gabriel Engel
committed
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
margin-left: -4px;
}
}
}
.page-list {
.search {
margin-bottom: 12px;
}
.results {
padding: 10px 0;
border-bottom: 1px solid #DFDFDF;
margin-bottom: 10px;
font-weight: 300;
color: @secondary-font-color;
p {
font-size: 12px;
text-transform: uppercase;
}
}
.list {
a {
.cf_;
padding: 10px 16px;
width: 100%;
color: @primary-font-color;
border-bottom: 1px solid @secondary-background-color;
Gabriel Engel
committed
.transition(background .15s ease-out);
&:hover {
background-color: @secondary-background-color;
Gabriel Engel
committed
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
}
}
ul {
margin: 6px 0;
}
li {
display: inline-block;
margin-right: 14px;
font-size: 11px;
color: @secondary-font-color;
position: relative;
&:after {
content: " ";
width: 4px;
height: 4px;
border-radius: 50%;
background-color: @secondary-font-color;
position: absolute;
right: -12px;
.calc(top, ~"50% - 2px");
}
&:nth-last-child(1) {
&:after {
display: none;
}
}
}
.info {
display: block;
float: left;
.calc(width, ~"100% - 150px");
i {
margin-right: 5px;
width: 20px;
text-align: left;
}
h3 {
font-size: 18px;
font-weight: 500;
}
a {
text-decoration: none;
color: @primary-font-color;
}
}
.status {
display: block;
float: right;
width: 150px;
min-height: 30px;
color: @secondary-font-color;
text-align: right;
strong {
font-size: 12px;
font-weight: 500;
}
}
}
}
// change to page-messages
Gabriel Engel
committed
.messages-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
display: block;
resize: none;
padding-top: 9px;
padding-bottom: 9px;
overflow-y: hidden;
.calc(width, ~"100% - 16px");
}
Gabriel Engel
committed
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
.edit-room-title {
color: @secondary-font-color;
margin-left: 4px;
font-size: 16px;
&:hover {
color: @primary-font-color;
}
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
word-wrap: break-word;
-webkit-overflow-scrolling: touch;
.custom-scroll(transparent, #EAEAEA);
}
.footer {
position: absolute;
Gabriel Engel
committed
background: #fff;
border-top: 1px solid @tertiary-background-color;
Gabriel Engel
committed
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
Gabriel Engel
committed
}
bottom: @footer-min-height;
left: 0px;
right: 0px;
}
.message-popup-title {
background-color: @secondary-background-color;
border-bottom: 1px solid #EEE;
padding: 10px 20px;
font-size: 18px;
font-weight: 300;
}
.popup-item {
padding: 8px 20px;
color: @secondary-font-color;
&.selected {
background-color: @tertiary-background-color;
color: @primary-font-color;
Gabriel Engel
committed
.message-form {
> div {
position: relative;
}
textarea {
display: block;
padding-top: 9px;
padding-bottom: 9px;
padding-right: 38px;
overflow-y: hidden;
resize: none;
}
Gabriel Engel
committed
position: absolute;
Gabriel Engel
committed
right: 10px;
cursor: pointer;
padding: 8px;
Gabriel Engel
committed
color: @secondary-font-color;
&:hover {
color: @primary-font-color;
}
}
> .users-typing {
height: 20px;
font-size: 12px;
color: #888;
Gabriel Engel
committed
}
}
.add-user-search {
height: 100%;
overflow: hidden;
display: inline-block;
vertical-align: top;
width: 100%;
}
}
.messages-box {
position: relative;
margin: 60px 20px 0px;
overflow: hidden;
.calc(width, ~'100% - 20px');
.calc(height, ~'100% - 120px');
Gabriel Engel
committed
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
padding: 21px 0 10px;
}
.new-message {
margin: 0 -65px;
position: absolute;
background: #428bca;
border-radius: 20px;
width: 130px;
height: 30px;
text-align: center;
color: #FFF;
line-height: 30px;
font-size: 0.8em;
cursor: pointer;
bottom: 8px;
left: 50%;
.transition(transform 0.3s ease-out);
.transform(translateY(0));
&.not {
.transform(translateY(150%));
}
}
.message {
font-size: 14px;
padding-left: 50px;
position: relative;
line-height: 20px;
&.with-thumb {
margin-top: 12px;
min-height: 40px;
.time {
position: relative;
left: 4px;
opacity: 1;
}
}
&:nth-child(1) {
margin-top: 0;
}
.edit-message {
display: none;
cursor: pointer;
}
&.own:hover .edit-message {
display: inherit;
}
.avatar-initials {
line-height: 40px;
}
color: @primary-background-color;
font-weight: 500;
color: darken(@primary-background-color, 10%);
}
}
Gabriel Engel
committed
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
}
.pageView {
display: table;
width: 100%;
text-align: left;
}
.system {
display: inline-block;
background-color: #EFEFEF;
border-radius: 4px;
padding: 8px 12px;
font-size: 12px;
color: @secondary-font-color;
i {
margin-right: 5px;
}
}
.date {
text-align: center;
position: relative;
margin-top: 12px;
&:before {
content: " ";
height: 1px;
width: 80%;
position: absolute;
left: 10%;
top: 11px;
background-color: #DFDFDF;
}
span {
display: inline-block;
padding: 5px 10px;
background-color: #FFF;
position: relative;
z-index: 1;
font-size: 12px;
font-weight: 600;
color: @secondary-font-color;
}
}
.user {
display: inline-block;
font-weight: 600;
color: #444;
&:hover {
color: #333;
}
}
.own {
.user {
color: #4c617b;
&:hover {
color: #3c4958;
}
}
}
.time {
font-size: 12px;
position: absolute;
display: inline-block;
color: #888;
left: 6px;
opacity: 0;
}
.thumb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 40px;
height: 40px;
background-color: #FFF;
border-radius: 2px;
background-image: url(/images/no_picture.png);
background-size: 100% auto;
background-position: 50% 50%;
}
}
.load-more {
text-align: center;
span {
border: 1px solid #CCC;
border-radius: 20px;
padding: 5px 14px;
background-color: #EEE;
}
Gabriel Engel
committed
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
}
.chat-begin {
text-align: center;
position: relative;
margin-top: 12px;
&:before {
content: " ";
height: 1px;
width: 80%;
position: absolute;
left: 10%;
top: 11px;
background-color: #DFDFDF;
}
span {
display: inline-block;
padding: 5px 10px;
background-color: #FFF;
position: relative;
z-index: 1;
font-size: 12px;
font-weight: 600;
color: @secondary-font-color;
}
}
// FLEX-TAB and FLEX-TAB views
Gabriel Engel
committed
.flex-tab {
background-color: @secondary-background-color;
border-left: 1px solid @tertiary-background-color;
overflow-x: visible;
Gabriel Engel
committed
position: fixed;
z-index: 100;
Gabriel Engel
committed
width: 90%;
bottom: 0;
right: 0;
top: 0;
Gabriel Engel
committed
.transform(translateX(100%));
.transition(transform .25s cubic-bezier(.5, 0, .1, 1));
.control {
height: 60px;
position: relative;
text-align: left;
background-color: @secondary-background-color;
Gabriel Engel
committed
> a, > form {
float: left;
}
&:before {
content: " ";
height: 1px;
left: 15px;
position: absolute;
background-color: @tertiary-background-color;
Gabriel Engel
committed
bottom: 0px;
.calc(width, ~'100% - 30px');
}
Gabriel Engel
committed
min-height: 36px;
margin: 0 1px;
}
.more {
position: absolute;
Gabriel Engel
committed
top: 0px;
background-color: @secondary-background-color;
Gabriel Engel
committed
border: none;
height: 60px;
width: 28px;
border-bottom: 1px solid @tertiary-background-color;
Gabriel Engel
committed
color: @secondary-font-color;
.transform(translateX(-27px));
.transition(transform .3s ease-out .4s);
Gabriel Engel
committed
&:hover {
color: @primary-font-color;
}
i {
.transform-origin(50%, 50%, 0);
.transition(transform .3s ease-out);
height: 12.5px;
vertical-align: top;
margin-top: 1px;
}
.flex-opened &{
.transition-delay(0s);
.transform(translateX(0));
Gabriel Engel
committed
}
}
.search-form {
padding: 0 4px 0 0;
width: 100%;
> div {
position: relative;
}
Gabriel Engel
committed
position: absolute;
top: 11px;
left: 8px;
Gabriel Engel
committed
color: @secondary-font-color;
}
}
}
.content {
&:extend(.fill-all);
.custom-scroll(transparent, #DADADA);
margin-top: 60px;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
.calc(height, ~"100% - " @footer-min-height + @header-min-height);
Gabriel Engel
committed
> div {
.transition(transform .45s cubic-bezier(.5, 0, 0, 1), opacity .125s ease-out .1s);
Gabriel Engel
committed
}
> .-hidden {
.transform(translateX(100%));
Gabriel Engel
committed
}
> .animated {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 9px 15px 0px 15px;
z-index: 100;
text-align: right;
height: @footer-min-height;
}
.social{
text-align: center;
h4{
font-weight: 300;
position: absolute;
width: 100%;
top: -12px;
left: 0;
font-size: 13px;
}
.share {
border-radius: 50%;
min-height: 40px;
line-height: 20px;
&:before {
border-radius: 50%;
}
span {
display: none;
}
}
}
Gabriel Engel
committed
}
.list-view {
Gabriel Engel
committed
.list {
Gabriel Engel
committed
position: relative;
width: 100%;
height: 100%;
Gabriel Engel
committed
}
> .status {
margin: 5px 0 15px;
h2 {
font-size: 20px;
line-height: 25px;
font-weight: 300;
}
p {
font-size: 12px;
color: @secondary-font-color;
margin-top: 4px;
}
b {
font-weight: 600;
}
.see-all {
float: right;
color: @secondary-font-color;
Gabriel Engel
committed
border: none;
background-color: transparent;
}
}
}
.user-view {
padding: 20px;
.about {
width: 100%;
margin-bottom: 20px;
}
.thumb {
float: left;
width: 100px;
height: 100px;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
.avatar-initials {
line-height: 100px;
}
Gabriel Engel
committed
}
}
Gabriel Engel
committed
.info {
margin-left: 120px;
white-space: normal;
.calc(width, ~'100% - 120px');
h3 {
font-size: 24px;
margin-bottom: 8px;
Gabriel Engel
committed
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
}
p {
line-height: 18px;
font-size: 12px;
font-weight: 300;
color: @secondary-font-color;
}
}
.stats {
li {
margin-bottom: 3px;
display: inline-block;
padding: 4px 6px;
background-color: #e9e9e9;
border-right: 2px;
border-radius: 2px;
}
}
.box {
position: relative;
margin-bottom: 25px;
font-size: 13px;
h4 {
&:extend(.small-title);
margin-bottom: 6px;
}
&:after {
content: " ";
height: 1px;
width: 100%;
bottom: -10px;
left: 0;
background-color: #CDCDCD;
position: absolute;
}
}
.tags {
li {
display: inline-block;
padding: 4px;
background-color: #CDCDCD;
border-right: 2px;
}
}
.links {
i {
margin-right: 5px;
font-size: 13px;
}
a {
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: block;
border-radius: 2px;
padding: 0 5px;
color: #6f6f6f;
line-height: 22px;
position: relative;
.transition(background .18s ease, colo .18s ease);
&:before {
content: attr(data-stats);
position: absolute;
right: 5px;
top: 0;
font-size: 11px;
opacity: 0;
}
&:hover {
padding-right: 34px;
background-color: #e9e9e9;
text-decoration: none;
color: #333;
&:before {
opacity: 1;
}
}
span {
font-weight: 300;
}
}
}
.contact-code {
margin: -5px 0 10px 0;
font-size: 12px;
}
}
&:after, &:before {
}
}
}
Gabriel Engel
committed
.user-image {
margin: 4px;
height: @user-image-square;
width: @user-image-square;
Gabriel Engel
committed
cursor: pointer;
background-color: @tertiary-background-color;
Gabriel Engel
committed
font-size: 12px;
position: relative;
Gabriel Engel
committed
&:hover,
&.selected {
.avatar{
&:after {
.transform(scaleX(1))
Gabriel Engel
committed
}
.status-offline & {
&:after, &:before {
background-color: @status-offline;
}
Gabriel Engel
committed
}
.status-online & {
&:after, &:before {
background-color: @status-online;
}
Gabriel Engel
committed
}
.status-away & {
&:after, &:before {
background-color: @status-away;
}
}
.status-busy & {
&:after, &:before {
background-color: @status-busy;
}
}
p{
color: @primary-font-color;
Gabriel Engel
committed
}
}
}
overflow: visible;
&:after, &:before {
content: " ";
width: 100%;
height: 2px;
position: absolute;
z-index: 1;
left: 0px;
}
&:after{
bottom: -4px;
.transform(scaleX(0));
.transform-origin(50%, 50%);
.transition(transform .15s ease-out .02s);
}
&:before{
bottom: -3px;
}
Gabriel Engel
committed
}
p{
display: none;
}
.lines &{
Gabriel Engel
committed
width: 100%;
background-color: transparent;
&:after{
display: none;
}
a{
.cf_;
height: auto;
background-color: transparent;
width: @user-image-square;
height: @user-image-square;
}
}
p{
float: left;
display: block;
line-height: @user-image-square;
font-size: 15px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
padding-left: 10px;
color: @secondary-font-color;
.calc(width, ~"100% - 45px");
}
Gabriel Engel
committed
}
Gabriel Engel
committed
display: block;
Gabriel Engel
committed
}
&.status-offline {
.user-image-status(@status-offline);
}
&.status-online {
.user-image-status(@status-online);
}
&.status-away {
.user-image-status(@status-away);
}
&.status-busy {
.user-image-status(@status-busy);
Gabriel Engel
committed
2130
2131
2132
2133
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143
2144
2145
2146
2147
2148
2149
2150
2151
2152
2153
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168
2169
}
}
.user-profile {
white-space: normal;
overflow: hidden;
.thumb {
float: left;
width: 75px;
img {
width: 60px;
height: 60px;
}
}
.info {
display: block;
margin-left: 75px;
h3 {
font-size: 14px;
margin-bottom: 8px;
font-weight: 600;
}
p {
font-size: 12px;
margin-bottom: 6px;
}
a {
color: @primary-font-color;
&:hover {
text-decoration: none;
color: @secondary-font-color;
}
}
}
}
.profile-buttons {
margin-top: 1em;
}
.rocket-modal {
Gabriel Engel
committed
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
visibility: hidden;
&.fluid {
Gabriel Engel
committed
height: 100%;
main {
position: absolute;
overflow-y: scroll;
.custom-scroll(transparent, #CFCFCF);
.calc(height, ~'100% - 112px');
}
}
}
&.opened {
.animation(fadeIn .1s ease-out forwards);
Gabriel Engel
committed
.animation(modalEnter .35s cubic-bezier(.5, 0, .1, 1) forwards .1s);
}
}
&.closed {
.animation(fadeOut .2s ease-out forwards);
Gabriel Engel
committed
.animation(modalExit .25s cubic-bezier(.5, 0, .1, 1) forwards);
}
Gabriel Engel
committed
}
&.overflow {
Gabriel Engel
committed
2204
2205
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239
2240
2241
2242
2243
2244
2245
2246
2247
2248
2249
2250
overflow: visible;
main {
overflow: visible;
position: relative;
}
}
}
.wrapper {
display: table;
height: 100%;
width: 100%;
position: relative;
}
.window {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
height: 100%;
position: relative;
}
fieldset {
margin-bottom: 8px;
}
legend {
position: relative;
z-index: 2;
display: block;
margin-bottom: 18px;
position: relative;
text-transform: uppercase;
font-size: 13px;
color: @secondary-font-color;
i {
margin-right: 4px;
}
&:before {
content: " ";
width: 100%;
height: 1px;
background-color: #dfdfdf;
position: absolute;
top: 19px;
left: 0;
z-index: 1;
}
}
Gabriel Engel
committed
2252
2253
2254
2255
2256
2257
2258
2259
2260
2261
2262
2263
2264
2265
2266
2267
2268
2269
2270
2271
2272
2273
2274
2275
2276
2277
2278
2279
2280
2281
2282
2283
2284
2285
2286
2287
2288
2289
2290
2291
2292
2293
2294
2295
2296
2297
2298
2299
2300
2301
2302
2303
2304
2305
2306
2307
2308
2309
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321
2322
2323
2324
2325
2326
2327
2328
2329
2330
2331
2332
2333
display: block;
max-width: 800px;
margin: 0 auto;
width: 90%;
position: relative;
overflow: hidden;
text-align: left;
border-radius: 4px;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .15);
padding: 56px 0;
opacity: 0;
background-color: #FFF;
header {
height: 55px;
background-color: #DADADA;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
font-size: 14px;
text-align-last: right;
padding: 0 25px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
h3 {
display: inline-block;
margin: 0;
text-align: left;
font-size: 18px;
font-weight: 700;
line-height: 55px;
text-overflow: ellipsis;
overflow: hidden;
}
.close {
position: absolute;
width: 20px;
height: 26px;
right: 20px;
top: 16px;
opacity: 1;
i {
font-size: 24px;
color: @secondary-font-color;
}
&:hover {
i {
color: @primary-font-color;
}
}
}
}
main {
display: block;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: #FFF;
padding: 20px 25px;
}
footer {
height: 55px;
background-color: #eaeaea;
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
padding: 11px 25px 0;
text-align: right;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
}
}
#login-card {
width: 100%;
max-width: 520px;
padding: 22px 30px 30px;
margin: 25px auto;
background-color: #FAFAFA;
box-shadow: 0 0 6px 10px rgba(0, 0, 0, 0.1);
border-radius: 2px;
Gabriel Engel
committed
h2 {
&:extend(.rocket-h2);
color: @primary-font-color;
margin-bottom: 30px;
&.error {
color: #b40202;
}
}
h3 {
&:extend(.rocket-h3);
&.error {
color: #b40202;
}
}
img {
width: 200px;
}
a{
color: @primary-background-color;
margin: 4px 0;
display: inline-block;
&:active{
color: @primary-background-color;
}
&:hover{
color: darken(@primary-background-color, 10%);
}
}
Gabriel Engel
committed
2364
2365
2366
2367
2368
2369
2370
2371
2372
2373
2374
2375
2376
2377
2378
2379
2380
2381
2382
2383
2384
2385
2386
2387
2388
2389
2390
2391
2392
2393
2394
2395
2396
2397
2398
2399
2400
2401
2402
2403
2404
2405
2406
2407
2408
2409
2410
2411
2412
2413
2414
2415
2416
2417
2418
2419
2420
2421
2422
2423
2424
2425
2426
2427
2428
2429
2430
2431
2432
2433
2434
2435
2436
2437
2438
2439
2440
2441
2442
2443
2444
2445
2446
2447
2448
2449
2450
2451
2452
2453
2454
2455
2456
2457
.options {
display: none;
width: 100%;
font-size: 10px;
}
.submit {
margin-bottom: 12px;
padding-top: 4px;
}
.remember {
float: left;
}
.remember input {
margin-right: 4px;
}
.forgot {
float: right;
line-height: 20px;
}
.submit button {}
.fields {
.transform-style(preserve-3d);
.perspective(600px);
margin-bottom: 26px;
label {
font-family: "Roboto";
font-size: 13px;
margin-top: 10px;
color: #AAA;
margin-left: 12px;
}
}
.input-text {
margin: 0 0 14px 0;
position: relative;
&:before {
content: " ";
width: 100%;
height: 40px;
position: absolute;
top: 7px;
left: 0;
cursor: text;
}
&.active {
&:before {
visibility: hidden;
}
.field {
.transform(rotateX(0));
}
}
&:hover {
i {
background-color: #BFBFBF;
}
label {
color: #999;
}
}
}
.field {
display: block;
.transform-origin(50% 100% 0);
.transform(rotateX(100deg));
.transform-style(preserve-3d);
.backface-visibility(hidden);
.transition(transform .38s cubic-bezier(.5, 0, .1, 1));
i {
display: block;
width: 100%;
height: 3px;
background-color: #EAEAEA;
position: absolute;
bottom: 0;
left: 0;
.transform-origin(50% 100% 0);
.transform(rotateX(-90deg) translateY(4px));
.transition(background .2s ease-out);
}
span {
display: block;
.transform-style(flat);
}
input {
box-shadow: 0 0 0;
background-color: transparent;
border-width: 0;
position: relative;
padding: 4px 8px;
font-size: 22px;
border-bottom: 1px solid #DFDFDF;
font-family: "Roboto";
font-weight: 300;
&.error {
border-bottom: 1px solid #b40202;
&::-webkit-input-placeholder {
color: #b40202;
}
&:-moz-placeholder {
color: #b40202;
}
/* Firefox 18- */
&::-moz-placeholder {
color: #b40202;
}
/* Firefox 19+ */
&:-ms-input-placeholder {
color: #b40202;
}
Gabriel Engel
committed
}
input:-webkit-autofill {
color: #fff !important;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #f4f4f4 inset;
background-color: transparent !important;
}
}
}
.social-login {
Gabriel Engel
committed
margin: 35px 0 30px;
text-align: center;
Gabriel Engel
committed
h3 {
&:extend(.rocket-h3);
margin-top: 0;
margin-bottom: 12px;
}
}
.landing-page {
text-align: center;
display: table;
width: 100%;
min-height: 100%;
z-index: 101;
background-color: darken(@primary-background-color, 10%);
.background-image(linear-gradient(darken(@primary-background-color, 10%), @primary-background-color));
.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 45px 0 35px;
z-index: 10;
position: relative;
}
Gabriel Engel
committed
.logo {
display: block;
margin-bottom: 30px;
> img {
display: inline-block;
position: relative;
top: 0;
right: 0;
z-index: 20;
width: 500px;
max-width: 100%;
}
}
a {
font-family: "Roboto";
font-weight: 300;
}
.screen {
display: block;
Gabriel Engel
committed
max-width: 520px;
position: relative;
Gabriel Engel
committed
z-index: 5;
text-decoration: none;
figure {
display: block;
width: 100%;
height: 0;
background-color: #fff;
padding-bottom: 53%;
background: url(/images/screen.jpg) no-repeat 50% 50%;
background-size: 100% auto;
}
> span {
.mac-bar;
}
.button {
display: block;
position: absolute;
.calc(top, ~"50% - 17px");
.calc(left, ~"50% - 94px");
Gabriel Engel
committed
opacity: 0;
.transition(transform .2s cubic-bezier(0, .4, .4, 1.5), opacity .1s ease-out);
}
&:hover {
.button {
.transform(scale(1));
opacity: 1;
}
}
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
header {
display: block;
Gabriel Engel
committed
}
.text {
color: #FFF;
font-weight: 300;
margin-bottom: 25px;
margin: 0 auto 25px;
max-width: 580px;
Gabriel Engel
committed
2587
2588
2589
2590
2591
2592
2593
2594
2595
2596
2597
2598
2599
2600
2601
2602
2603
2604
2605
2606
2607
2608
2609
2610
2611
2612
2613
2614
2615
2616
2617
2618
.button {
background-color: #bc2031;
color: #FFF;
font-weight: 400;
padding: 16px 20px;
margin-top: 20px;
}
h1 {
font-weight: 700;
text-transform: uppercase;
font-size: 24px;
letter-spacing: -0.5px;
margin-bottom: 20px;
display: none;
}
h2 {
&:extend(.rocket-h2);
}
h3 {
&:extend(.rocket-h3);
}
p {
font-family: "Muli";
margin: 18px 0;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
}
footer {
color: #fff;
padding: 20px 0 0;
Gabriel Engel
committed
h4 {
text-transform: uppercase;
margin-bottom: 8px;
font-size: 12px;
Gabriel Engel
committed
}
Marcelo Schmidt
committed
div.switch-language {
margin-top: 20px;
a {
color: @secondary-font-color;
}
}
Gabriel Engel
committed
}
a.meteor {
position: fixed;
right: 30px;
bottom: 20px;
width: 100px;
height: 50px;
background: url(/images/meteor.png) no-repeat center center;
background-size: 100% auto;
text-indent: -9999em;
}
.connect {
&:extend(.fill-all);
position: fixed;
}
.share {
border-radius: 50%;
min-height: 40px;
line-height: 20px;
Gabriel Engel
committed
border-radius: 50%;
}
span {
display: none;
}
}
}
@media all and(max-width: 1100px) {
#rocket-chat {
.flex-opened {
.calc(width, ~'100% - ' @rooms-box-width);
Gabriel Engel
committed
}
}
}
@media all and(max-width: 780px) {
#rocket-chat {
.burger {
visibility: visible;
display: inline-block;
}
.side-nav {
Gabriel Engel
committed
.transform(translateX(-100%));
.transition(transform .3s ease-out);
}
.main-content {
margin-left: 0;
width: 100%;
.transition(transform .3s ease-out);
}
.fixed-title h2 {
margin-left: 45px;
}
.flex-tab {
Gabriel Engel
committed
}
.messages-box {
padding: 0 10px;
Gabriel Engel
committed
2693
2694
2695
2696
2697
2698
2699
2700
2701
2702
2703
2704
2705
2706
2707
2708
2709
2710
2711
2712
2713
2714
2715
2716
2717
2718
2719
2720
2721
2722
2723
2724
2725
2726
2727
2728
2729
2730
2731
2732
2733
2734
2735
2736
2737
2738
2739
}
&.menu-opened {
.side-nav {
.transform(translateX(0));
}
.burger {
.transform(rotate(180deg));
i {
&:nth-child(1) {
opacity: 1;
width: 10px;
.transform-origin(50%, 50%, 0);
.transform(translateY(3px) translateX(10px) rotate(45deg));
}
&:nth-child(2) {
//.transform(rotate(180deg));
}
&:nth-child(3) {
opacity: 1;
width: 10px;
.transform-origin(50%, 50%, 0);
.transform(translateX(10px) translateY(-3px) rotate(-45deg));
}
}
}
.main-content {
.transform(translateX(@rooms-box-width));
}
}
}
}
@media all and(max-width: 500px) {
.user-view {
.thumb {
width: 60px;
height: 60px;
}
.info {
margin-left: 75px;
.calc(width, ~'100% - 120px');
h3 {
font-size: 20px;
}
}
}
}