Newer
Older
.blubber_panel {
display: flex;
align-items: stretch;
height: calc(100vh - 174px);
transition: opacity 100ms, filter 100ms;
&.waiting {
filter: blur(1px);
opacity: 0.5;
}
.context_info {
.followunfollow {
&.loading {
pointer-events: none;
}
> .follow {
display: none;
}
&.unfollowed {
text-decoration: line-through;
}
&.unfollowed > .follow {
display: inline-block;
}
&.unfollowed > .unfollow {
display: none;
}
}
}
}
.blubber_thread {
border: 1px solid var(--content-color-40);
background-color: var(--dark-gray-color-5);
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
width: 100%;
max-width: 100%;
margin-right: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
position: relative;
[v-if],
[v-for],
[v-show] {
display: none;
}
.scrollable_area {
max-height: calc(100vh - 240px);
overflow: auto;
&.scrolled::before {
//the shadow!
content: '';
left: 0px;
right: 0px;
height: 20px;
display: block;
position: absolute;
background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0));
z-index: 10;
}
}
&.dragover {
background-color: var(--yellow-40);
background-color: var(--yellow-40);
}
ol.comments > li.mine > .content::after,
ol.comments > li.theirs > .content::after {
background-color: var(--yellow-40);
border-bottom: 1px solid var(--content-color-40);
text-align: center;
}
.writer {
border-top: 1px solid var(--content-color-40);
}
ol.comments {
list-style-type: none;
margin: 0px;
padding: 0px;
> li {
display: none;
&.new {
Jan-Hendrik Willms
committed
animation: blubber-scaling var(--transition-duration) ease-out;
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
}
align-items: flex-end;
justify-content: flex-start;
margin-top: 20px;
padding-right: 10px;
padding-left: 10px;
&:last-child {
margin-bottom: 10px;
}
> .content {
max-width: 60%;
margin-left: 5px;
margin-right: 5px;
padding: 5px;
> .html {
max-width: 100%;
overflow: hidden;
img {
max-width: 100%;
max-height: 95vh;
}
}
> .edit {
display: none;
}
&.editing {
> .html {
display: none;
}
> .edit {
display: block;
width: 300px;
height: 20px;
}
}
}
&.mine {
display: flex;
flex-direction: row-reverse;
> .content {
background-color: var(--base-color);
color: var(--white);
background-color: var(--base-color-80);
border-color: var(--base-color-60);
}
a.link-extern {
@include icon(before, link-extern, info-alt);
&::before {
opacity: 0.8;
transition: opacity 200ms;
}
}
a.link-intern {
@include icon(before, link-intern, info-alt);
&::before {
opacity: 0.8;
transition: opacity 200ms;
}
}
a,
a:link,
a:visited {
color: var(--white);
opacity: 0.8;
transition: opacity 200ms;
}
a:hover,
a:active,
a:hover.index,
a:active.index,
a:hover.tree {
color: var(--white);
opacity: 1;
transition: opacity 200ms;
}
a.link-extern:hover::before,
a.link-intern:hover::before {
opacity: 1;
transition: opacity 200ms;
}
//Now the small triangular:
@include arrow-right(10px, $base-color);
&::before {
top: 100%;
}
&::after {
content: '';
height: 10px;
width: 10px;
background-color: var(--dark-gray-color-5);
position: absolute;
pointer-events: none;
left: 100%;
top: 100%;
}
> .name {
display: none;
}
}
> .avatar {
display: none;
}
.answer_comment {
display: none;
}
}
&.theirs {
display: flex;
> .content {
background-color: var(--content-color-20);
@include arrow-left(10px, $content-color-20);
&::before {
top: 100%;
}
&::after {
content: '';
height: 10px;
width: 10px;
background-color: var(--dark-gray-color-5);
position: absolute;
pointer-events: none;
left: -10px;
top: 100%;
}
> .name {
color: var(--base-color);
font-size: 0.8em;
display: block;
color: var(--red);
}
}
> .avatar {
min-width: 40px;
min-height: 40px;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-size: 40px auto;
background-position: center center;
margin-right: 10px;
}
.answer_comment > img {
vertical-align: text-bottom;
transform: rotate(180deg);
}
}
&.more {
display: flex;
justify-content: center;
}
> .time {
font-size: 0.8em;
color: var(--black);
time {
@media screen and (max-width: $major-breakpoint-small) {
display: none;
}
}
}
}
}
.writer {
background-color: var(--white);
background-image: linear-gradient(to left, var(--content-color-60), var(--content-color-60));
background-size: 0% 100%;
background-repeat: no-repeat;
padding: 5px;
display: flex;
justify-content: space-around;
align-items: center;
transition: all 0.5s ease-out;
border: 1px solid var(--content-color-40);
background-color: var(--white);
width: calc(100% - 140px);
height: 34px;
resize: none;
padding: 5px;
max-height: 40vh;
overflow: auto !important;
}
.send {
display: none;
cursor: pointer;
}
label {
cursor: pointer;
}
&.filled {
.send {
display: block;
}
label {
display: none;
}
}
}
.thread_posting {
border-bottom: 1px solid var(--content-color-40);
background-color: var(--white);
background-color: var(--content-color-20);
border-bottom: 1px solid var(--content-color-40);
color: var(--dark-gray-color-60);
font-size: 0.8em;
padding: 7px 5px 5px 75px;
position: relative;
a {
color: var(--dark-gray-color-60);
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
}
time {
float: right;
margin-left: 0.5em;
}
.avatar {
position: absolute;
left: 10px;
top: 10px;
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
}
.content {
padding: 10px 10px 10px 75px;
img {
max-width: 100%;
max-height: 95vh;
}
}
}
.empty_blubber_background {
@include empty-placeholder-image('blubber');
background-color: mix($dark-gray-color-5, rgba(255, 255, 255, 0), 70%);
> :first-child {
position: relative;
top: 30vh;
}
}
}
#blubber_stream_container {
display: flex;
align-items: stretch;
width: calc(100% - 270px);
@media screen and (max-width: $major-breakpoint-medium) {
width: 100%;
}
@media screen and (min-width: $major-breakpoint-large) {
max-width: calc(#{$major-breakpoint-large} - 100px);
}
}
.blubber_sideinfo {
width: 270px;
max-width: 270px;
margin-left: 5px;
border: 1px solid var(--content-color-40);
box-sizing: border-box;
max-height: calc(100vh - 140px);
overflow: auto;
.indented {
padding: 10px;
}
.new_section {
border-top: 1px solid var(--content-color-40);
}
.members {
margin-bottom: 10px;
li {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--content-color-40);
border-top: 1px solid var(--content-color-40);
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
}
}
&.topless li:first-child {
padding-top: 0px;
border-top: none;
}
&.bottomless li {
border-bottom: none;
padding-bottom: 0px;
}
}
.headline {
display: flex;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0px;
}
.side {
display: flex;
flex-direction: column;
justify-content: center;
.icons {
margin-top: 5px;
}
}
.avatar {
min-width: 50px;
min-height: 50px;
max-width: 50px;
max-height: 50px;
display: block;
background-size: 100% 100%;
background-position: center;
margin-right: 10px;
}
}
.context_info {
border-bottom: 1px solid var(--content-color-40);
.blubber_course_info {
}
.blubber_private_info {
.icon {
text-align: center;
}
.avatar {
min-width: 50px;
min-height: 50px;
max-width: 50px;
max-height: 50px;
display: block;
background-size: 100% 100%;
background-position: center;
margin-right: 10px;
}
}
}
}
.lowprio_info {
color: var(--black);
}
.studip-dialog {
.blubber_panel {
height: inherit;
}
#blubber_stream_container {
width: 100%;
}
.blubber_thread {
width: 100%;
max-width: 100%;
}
}
#blubber-index {
@media screen and (max-width: $major-breakpoint-small) {
#page-title-container,
#navigation-level-2 {
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
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
display: none;
}
}
}
.blubber_threads_widget {
.sidebar-widget-header {
.actions {
float: right;
}
}
.sidebar-widget-content {
padding: 0px;
max-height: calc(100vh - 359px);
overflow: auto;
.scrollable_area.scrolled::before {
content: '';
width: 100%;
max-width: 540px;
height: 20px;
display: block;
position: absolute;
background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0));
z-index: 10;
}
.scrollable_area.scrolled ol li.active {
&::before {
display: none;
}
&::after {
display: none;
}
}
ol {
list-style-type: none;
padding-left: 0px;
li {
border-bottom: thin solid var(--content-color-40);
height: 50px;
max-height: 50px;
overflow: hidden;
padding: 10px;
cursor: pointer;
color: var(--base-color);
font-weight: bold;
&:last-child {
border-bottom: none;
}
&.unseen {
border-left: 3px solid var(--active-color);
padding-left: 7px;
}
&[v-if],
&[v-for],
&[v-show] {
display: none;
}
&.more {
display: flex;
justify-content: center;
}
&.active {
background-color: var(--yellow-40);
&::before {
content: '';
position: absolute;
height: 0px;
width: 0px;
border-top: 35px transparent solid;
border-bottom: 35px transparent solid;
border-left: 10px var(--content-color-40) solid;
right: -2px;
margin-top: -10px;
}
&::after {
content: '';
position: absolute;
height: 0px;
width: 0px;
border-top: 35px transparent solid;
border-bottom: 35px transparent solid;
border-left: 10px var(--yellow-40) solid;
right: -1px;
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
margin-top: -70px;
}
}
a {
display: flex;
.avatar {
min-width: 50px;
max-width: 50px;
min-height: 50px;
max-height: 50px;
margin-right: 10px;
background-repeat: no-repeat;
background-size: 50px 50px;
background-position: center center;
}
.info {
display: flex;
flex-direction: column;
height: 60px;
max-height: 60px;
overflow: hidden;
.name {
max-height: 40px;
overflow: hidden;
}
time {
font-size: 0.8em;
font-weight: normal;
color: var(--black);
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
}
}
}
}
}
}
}
.center {
display: flex;
justify-content: center;
}
.blubber-edit-icons {
margin-top: 10px;
> * {
margin: 10px;
}
}
form.default {
.blubber_composer_select_container {
input, select, .container {
width: calc(100% - 50px);
display: inline-block;
}
}
}
.float_right {
float: right;
}
ol.tagcloud {
list-style-type: none;
padding: 0px;
margin: 0px;
> li {
display: inline-block;
margin-right: 10px;
&.size10 {
font-size: 1.6em;
}
&.size9 {
font-size: 1.5em;
}
&.size8 {
font-size: 1.4em;
}
&.size7 {
font-size: 1.3em;
}
&.size6 {
font-size: 1.2em;
}
&.size5 {
font-size: 1.1em;
}
&.size4 {
font-size: 1em;
}
&.size3 {
font-size: 0.9em;
}
&.size2 {
font-size: 0.8em;
}
&.size1 {
font-size: 0.7em;
}
}
}
@keyframes blubber-scaling {
from {
opacity: 0.8;
transform: scale(0.8,0.8);
}
to {
opacity: 1;
transform: scale(1,1);
}
}
//Animationen des Widgets:
.blubberthreadwidget-list-move, .blubberthreadwidget-list-enter-active, .blubberthreadwidget-list-leave-active {
transition: transform 0.5s;
}
.blubberthreadwidget-list-enter, .blubberthreadwidget-list-leave-to {
transform: translateY(-70px);
}
.responsive-display {
.blubber_thread {
margin-right: 0;
}
}