summaryrefslogtreecommitdiffstats
path: root/webapp/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass/components')
-rw-r--r--webapp/sass/components/_alerts.scss6
-rw-r--r--webapp/sass/components/_buttons.scss8
-rw-r--r--webapp/sass/components/_emoticons.scss12
-rw-r--r--webapp/sass/components/_error-bar.scss23
-rw-r--r--webapp/sass/components/_files.scss154
-rw-r--r--webapp/sass/components/_inputs.scss21
-rw-r--r--webapp/sass/components/_links.scss17
-rw-r--r--webapp/sass/components/_mentions.scss38
-rw-r--r--webapp/sass/components/_modal.scss257
-rw-r--r--webapp/sass/components/_oauth.scss14
-rw-r--r--webapp/sass/components/_popover.scss99
-rw-r--r--webapp/sass/components/_scrollbar.scss29
-rw-r--r--webapp/sass/components/_search.scss107
-rw-r--r--webapp/sass/components/_suggestion-list.scss20
-rw-r--r--webapp/sass/components/_tooltip.scss4
-rw-r--r--webapp/sass/components/_tutorial.scss115
-rw-r--r--webapp/sass/components/_videos.scss61
17 files changed, 506 insertions, 479 deletions
diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss
index 49ca3e8af..cb4c9c9e1 100644
--- a/webapp/sass/components/_alerts.scss
+++ b/webapp/sass/components/_alerts.scss
@@ -1,13 +1,13 @@
@charset 'UTF-8';
.alert {
- padding: 8px 12px;
@include border-radius($border-rad);
+ padding: 8px 12px;
}
.alert--confirm {
display: inline-block;
float: left;
- padding: 4px 10px;
margin: 1px 0 0 10px;
-} \ No newline at end of file
+ padding: 4px 10px;
+}
diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index bb8efbb14..efef11ce9 100644
--- a/webapp/sass/components/_buttons.scss
+++ b/webapp/sass/components/_buttons.scss
@@ -5,19 +5,19 @@
@include border-radius($border-rad);
&.btn-primary {
+ background: $primary-color;
border-color: transparent;
- background: $color--primary;
&:hover,
&:focus,
&:active {
- background: $color--primary--hover;
+ background: $primary-color--hover;
}
}
&.btn-inactive {
+ background: $light-gray;
border-color: transparent;
- background: #707070;
- color: #fff;
+ color: $white;
}
}
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 661b25d94..80a800863 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,27 +1,27 @@
@charset 'UTF-8';
.emoticon {
- width: 1.5em;
- height: 1.5em;
+ background-size: contain;
display: inline-block;
+ height: 1.5em;
margin-bottom: .25em;
- background-size: contain;
+ width: 1.5em;
}
.emoticon-suggestion {
@include clearfix;
- width: 100%;
- height: 30px;
cursor: pointer;
font-size: 13px;
+ height: 30px;
line-height: 30px;
+ width: 100%;
}
.emoticon-suggestion__image {
- width: 20px;
height: 20px;
margin: 6px 6px 0 5px;
padding: 0;
text-align: center;
vertical-align: top;
+ width: 20px;
}
diff --git a/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss
index 2b74a33ae..cda7d25bd 100644
--- a/webapp/sass/components/_error-bar.scss
+++ b/webapp/sass/components/_error-bar.scss
@@ -1,29 +1,28 @@
@charset 'UTF-8';
.error-bar {
- background-color: #09f;
- text-align: center;
- position: relative;
- color: #fff;
+ background-color: darken($primary-color, 5%);
+ color: $white;
+ padding: 5px 30px;
position: absolute;
+ text-align: center;
top: 0;
width: 100%;
z-index: 9999;
- padding: 5px 30px;
&__close {
- position: absolute;
- right: 0;
- top: 0;
- color: #fff;
+ color: $white;
+ font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 600;
- text-decoration: none;
padding: 0 10px;
- font-family: 'Open Sans', sans-serif;
+ position: absolute;
+ right: 0;
+ text-decoration: none;
+ top: 0;
&:hover {
- color: #fff;
+ color: $white;
text-decoration: none;
}
}
diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
index b9e2b5f7d..b854312c1 100644
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -1,27 +1,31 @@
@charset 'UTF-8';
.file-preview__container {
- position: relative;
+ height: 100px;
margin: 1px 0 10px;
- width: 100%;
max-height: 100px;
- height: 100px;
- white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
+ position: relative;
+ white-space: nowrap;
+ width: 100%;
}
.file-preview {
+ @include clearfix;
+ border: 1px solid $light-gray;
display: inline-block;
- width: 120px;
height: 100px;
margin: 0 0 0 10px;
position: relative;
- border: 1px solid #ddd;
- @include clearfix;
+ width: 120px;
- &:hover .file-preview__remove:after {
- @include opacity(1);
+ &:hover {
+ .file-preview__remove {
+ &:after {
+ @include opacity(1);
+ }
+ }
}
&:first-child {
@@ -29,13 +33,13 @@
}
.spinner {
- position: absolute;
- top: 50%;
+ height: 32px;
left: 50%;
margin-left: -16px;
margin-top: -16px;
+ position: absolute;
+ top: 50%;
width: 32px;
- height: 32px;
}
}
@@ -46,14 +50,15 @@
}
.file-preview__remove {
- position: absolute;
- width: 100%;
height: 100%;
left: 0;
+ position: absolute;
top: 0;
+ width: 100%;
&:after {
- background: rgba(0, 0, 0, .4);
+ @include opacity(0);
+ @include alpha-property(background, $black, .4);
content: '';
height: 100%;
left: 0;
@@ -61,33 +66,31 @@
position: absolute;
top: 0;
width: 100%;
- @include opacity(0);
}
i {
- top: 5px;
- right: 5px;
- position: absolute;
- color: #fff;
+ color: $white;
cursor: pointer;
- z-index: 5;
opacity: inherit;
- text-shadow: 0 0px 3px #444;
- text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
+ position: absolute;
+ right: 5px;
+ text-shadow: 0 0 3px alpha-color($black, .7);
+ top: 5px;
+ z-index: 5;
}
}
.image-comment {
background-position: left top;
background-repeat: no-repeat;
- width: 300px;
height: 300px;
+ width: 300px;
}
.file-icon {
- width: 100%;
height: 100%;
+ width: 100%;
&.audio {
@include file-icon('../images/icons/audio.png');
@@ -131,36 +134,30 @@
}
.post-image__column {
- position: relative;
- width: 240px;
- height: 100px;
+ border: 1px solid alpha-color($black, .2);
float: left;
+ height: 100px;
margin: 5px 10px 5px 0;
- border: 1px solid lightgrey;
-
- a {
- text-decoration: none;
- color: grey;
- }
+ position: relative;
+ width: 240px;
}
.post-image__load {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
height: 100%;
width: 100%;
- background-size: 20px 20px;
- background-repeat: no-repeat;
- background-position: center;
- background-image: url('~images/load.gif');
}
.post-image {
- width: 100%;
- height: 100%;
- background-color: #fff;
+ background-color: $white;
background-repeat: no-repeat;
+ height: 100%;
overflow: hidden;
position: relative;
text-align: center;
+ width: 100%;
&.small {
background-position: center;
@@ -170,60 +167,59 @@
background-position: top left;
}
- .spinner.file__loading {
- position: absolute;
- left: 50%;
- margin-left: -16px;
- top: 50%;
- margin-top: -16px;
+ .spinner {
+ .file__loading {
+ left: 50%;
+ margin-left: -16px;
+ margin-top: -16px;
+ position: absolute;
+ top: 50%;
+ }
}
.file__loaded {
max-width: initial;
+
&.landscape,
&.quadrat {
height: 100px;
}
+
&.portrait {
width: 120px;
}
}
-
- &:hover .file-playback__controls.stop {
- @include opacity(1);
- }
}
.post-image__thumbnail {
+ @include cursor(zoom-in);
float: left;
- width: 50%;
height: 100%;
- cursor: zoom-in;
- cursor: -webkit-zoom-in;
+ width: 50%;
}
.post-image__details {
- float: left;
@include clearfix;
- word-break: break-word;
- width: 50%;
- height: 100%;
- background: white;
- border-left: 1px solid #ddd;
+ background: $white;
+ border-left: 1px solid $light-gray;
+ color: alpha-color($black, .8);
+ float: left;
font-size: 13px;
+ height: 100%;
padding: 7px;
- color: #333;
+ width: 50%;
+ word-break: break-word;
.post-image__name {
- margin-bottom: 3px;
display: block;
+ margin-bottom: 3px;
}
.post-image__download {
+ @include opacity(.7);
+ cursor: pointer;
display: inline-block;
padding-right: 7px;
- cursor: pointer;
- @include opacity(.7);
}
.post-image__type {
@@ -231,57 +227,55 @@
}
.post-image__size {
- margin-left: 4px;
@include opacity(.6);
+ margin-left: 4px;
}
}
.file-details__container {
@include display-flex;
- display: -ms-flexbox;
.file-details {
- width: 320px;
height: 270px;
padding: 14px;
text-align: left;
vertical-align: top;
+ width: 320px;
.file-details__name {
- color: #333;
+ color: alpha-color($black, .9);
font-size: 16px;
}
.file-details__info {
- color: grey;
+ color: alpha-color($black, .5);
}
}
+
.file-details__preview {
- width: 320px;
+ border-right: 1px solid $light-gray;
height: 270px;
- border-right: 1px solid #ddd;
vertical-align: center;
+ width: 320px;
// helper to center the image icon in the preview window
.file-details__preview-helper {
- height: 100%;
display: inline-block;
+ height: 100%;
vertical-align: middle;
}
}
}
.file-playback__controls {
- position: absolute;
- right: 5px;
+ @include single-transition(opacity, .6s);
bottom: 0;
- font-size: 22px;
cursor: pointer;
- z-index: 2;
- -webkit-transition: opacity .6s;
- -moz-transition: opacity .6s;
- -o-transition: opacity .6s;
+ font-size: 22px;
+ position: absolute;
+ right: 5px;
transition: opacity .6s;
+ z-index: 2;
&.stop {
@include opacity(0);
@@ -289,6 +283,6 @@
}
.view-image__loading {
- background: black;
+ background: $black;
min-height: 100px;
}
diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss
index 5e3311182..42ab56128 100644
--- a/webapp/sass/components/_inputs.scss
+++ b/webapp/sass/components/_inputs.scss
@@ -15,12 +15,21 @@
&.no-resize {
resize: none;
}
+
+ &[disabled],
+ [readonly] {
+ @include alpha-property(background, $white, .1);
+ color: inherit;
+ cursor: auto;
+ }
}
-.form-control[disabled],
-.form-control[readonly],
-fieldset[disabled] .form-control {
- cursor: auto;
- background: rgba(#fff, .1);
- color: inherit;
+fieldset {
+ &[disabled] {
+ .form-control {
+ @include alpha-property(background, $white, .1);
+ color: inherit;
+ cursor: auto;
+ }
+ }
}
diff --git a/webapp/sass/components/_links.scss b/webapp/sass/components/_links.scss
index f31008b4f..3d7472670 100644
--- a/webapp/sass/components/_links.scss
+++ b/webapp/sass/components/_links.scss
@@ -1,23 +1,22 @@
@charset 'UTF-8';
a {
+ color: $primary-color;
cursor: pointer;
text-decoration: none;
word-break: break-word;
- color: $color--primary;
-}
-a:focus,
-a:hover {
- color: $color--primary--hover;
+ &:hover,
+ &:focus {
+ color: $primary-color--hover;
+ }
}
-.text-danger,
-a.text-danger {
- color: #e05f5d;
+.text-danger {
+ color: desaturate($red, 20%);
&:hover,
&:focus {
- color: #e05f5d;
+ color: desaturate($red, 20%);
}
}
diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 98efc599d..98ae7d320 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -1,24 +1,24 @@
@charset 'UTF-8';
.mention {
- color: #fff;
- background: $color--primary;
+ @include border-radius(3px);
+ background: $primary-color;
+ color: $white;
+ padding-bottom: 2px;
position: relative;
z-index: 10;
- padding-bottom: 2px;
- @include border-radius(3px);
}
.mentions__name {
- position: relative;
- width: 100%;
+ cursor: pointer;
+ font-size: 13px;
height: 36px;
- padding: 2px;
- z-index: 101;
line-height: 36px;
- font-size: 13px;
- cursor: pointer;
+ padding: 2px;
+ position: relative;
white-space: nowrap;
+ width: 100%;
+ z-index: 101;
.mention-align {
@include clearfix;
@@ -28,29 +28,29 @@
}
.mention__image {
- margin-right: 6px;
- height: 32px;
- width: 32px;
- line-height: 36px;
+ @include border-radius(32px);
display: block;
font-size: 20px;
+ height: 32px;
+ line-height: 36px;
+ margin-right: 6px;
text-align: center;
- @include border-radius(32px);
+ width: 32px;
.mention--align {
+ display: inline-block;
max-width: 80%;
overflow: hidden;
- display: inline-block;
- white-space: nowrap;
text-overflow: ellipsis;
+ white-space: nowrap;
}
}
.mention__fullname {
- color: grey;
+ color: $dark-gray;
padding-left: 10px;
}
.mention--highlight {
- background-color: #fff2bb;
+ background-color: $yellow;
}
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index a8e8a99f7..601aa33ab 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -1,12 +1,24 @@
@charset 'UTF-8';
-#channel_members_modal .modal-body {
- min-height: 110px;
+.browser--ie {
+ .modal {
+ .modal-dialog {
+ @include translateY(0);
+ }
+ }
}
.modal-body {
- padding: 20px 15px;
overflow: auto;
+ padding: 20px 15px;
+
+ .edit-modal-body {
+ overflow: visible;
+
+ .suggestion-list__content {
+ max-height: 150px;
+ }
+ }
}
.more-table {
@@ -15,27 +27,23 @@
}
.modal {
+ color: alpha-color($black, .9);
width: 100%;
- color: #333;
- body.browser--IE & {
- .modal-dialog {
- @include translateY(0);
- }
- }
-
- &.image_modal {
- .modal-backdrop.in {
- @include opacity(.7);
+ &.modal-image {
+ .modal-backdrop {
+ &.in {
+ @include opacity(.7);
+ }
}
}
.custom-textarea {
+ border-color: $light-gray;
color: inherit;
- border-color: #ccc;
&:focus {
- border-color: #ccc;
+ border-color: $light-gray;
box-shadow: none;
}
}
@@ -44,15 +52,15 @@
font-size: 13px;
&.btn-default {
- border: none;
background: transparent;
+ border: none;
}
}
.info__label {
font-weight: 600;
- text-align: right;
padding-right: 0;
+ text-align: right;
}
.team-member-list {
@@ -60,21 +68,21 @@
}
.remove__member {
+ color: $dark-gray;
float: right;
- color: #999;
font-size: 20px;
line-height: 0;
padding: 6px;
&:hover {
- color: #e56565;
+ color: $red;
}
}
.modal-dialog {
- max-width: 95%;
margin-left: auto;
margin-right: auto;
+ max-width: 95%;
}
.modal-push-down {
@@ -82,51 +90,51 @@
}
.modal-next-bar {
+ height: 100%;
position: absolute;
- top: 0px;
right: 0;
- height: 100%;
+ top: 0;
}
.modal-header {
- border-radius: 0;
- background: $color--primary;
- color: #fff;
- padding: 15px 15px 11px;
- border: 1px solid #ddd;
- min-height: 56px;
+ @include border-radius(0);
@include clearfix;
+ background: $primary-color;
+ border: 1px solid $light-gray;
+ color: $white;
+ min-height: 56px;
+ padding: 15px 15px 11px;
.modal-title {
+ color: $bg--gray;
float: left;
font-size: 17px;
line-height: 27px;
- color: #f4f4f4;
.name {
+ color: $white;
font-weight: 600;
- color: #fff;
}
}
.modal-action {
- padding: 0;
margin: 0;
+ padding: 0;
}
- button.close {
- color: #fff;
+ .close {
@include opacity(1);
- z-index: 5;
- width: 30px;
+ @include single-transition(all, .25s, ease-in);
+ color: $white;
height: 30px;
line-height: 30px;
- @include single-transition(all, .25s, ease-in);
position: absolute;
right: 10px;
+ width: 30px;
+ z-index: 5;
&:hover {
- background: rgba(0, 0, 0, .1);
+ @include alpha-property(background, $black, .1);
}
span {
@@ -149,8 +157,8 @@
}
.no-channel-message {
- text-align: center;
padding: 2em 1em;
+ text-align: center;
.primary-message {
font-size: 1.25em;
@@ -168,46 +176,46 @@
}
.modal-chevron-icon {
- top: 50%;
font-size: 120%;
+ top: 50%;
}
.modal-prev-bar {
- position: absolute;
- top: 0px;
- left: 0;
height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
}
- &#more_channels {
+ &.more-channel__modal {
.modal-body {
padding: 0;
}
}
.modal-image {
- position: relative;
- width: 100%;
height: 100%;
margin: 0 auto;
max-width: 100%;
+ position: relative;
+ width: 100%;
.modal-body {
@include clearfix;
- height: 100%;
display: table;
+ height: 100%;
+ max-height: 100%;
table-layout: fixed;
width: 100%;
- max-height: 100%;
}
- .image-wrapper {
- position: relative;
- max-width: 90%;
+ .modal-image__wrapper {
@include border-radius(3px);
display: table-cell;
- vertical-align: middle;
+ max-width: 90%;
+ position: relative;
text-align: center;
+ vertical-align: middle;
width: 100%;
&:hover {
@@ -215,33 +223,31 @@
}
&.default {
- width: 100%;
height: 80%;
+ width: 100%;
}
audio,
canvas,
progress,
video {
- max-width: 100%;
- height: auto;
display: block;
+ height: auto;
+ max-width: 100%;
}
.modal-close {
- background: url('../images/close.png') no-repeat;
+ @include single-transition(opacity, .6s);
@include background-size(100% 100%);
- width: 37px;
+ @include opacity(0);
+ background-image: url('../images/close.png');
+ cursor: pointer;
height: 37px;
position: absolute;
right: -13px;
top: -13px;
- @include opacity(0);
- -webkit-transition: opacity .6s;
- -moz-transition: opacity .6s;
- -o-transition: opacity .6s;
transition: opacity .6s;
- cursor: pointer;
+ width: 37px;
z-index: 9999;
&.modal-close--show {
@@ -250,99 +256,95 @@
}
> div {
+ background: $white;
+ display: inline-block;
min-height: 100px;
min-width: 320px;
- background: #fff;
- display: inline-block;
position: relative;
-
- &:hover .file-playback__controls.stop {
- @include opacity(1);
- }
}
img {
- max-width: 100%;
max-height: 100%;
+ max-width: 100%;
}
- .spinner.file__loading {
- z-index: 2;
- position: absolute;
- left: 50%;
- margin-left: -16px;
- top: 50%;
- margin-top: -16px;
+ .spinner {
+ .file__loading {
+ left: 50%;
+ margin-left: -16px;
+ margin-top: -16px;
+ position: absolute;
+ top: 50%;
+ z-index: 2;
+ }
}
}
.modal-content {
+ background: alpha-color($black, 0);
+ border: none;
box-shadow: none;
- background: rgba(0, 0, 0, 0);
- width: 100%;
height: 100%;
padding: 0;
- border: none;
+ width: 100%;
}
- .image-body {
- vertical-align: middle;
+ .modal-image__body {
display: table-cell;
- text-align: center;
height: 100%;
+ overflow: visible;
padding: 0;
position: relative;
- overflow: visible;
+ text-align: center;
+ vertical-align: middle;
}
.image-control {
- width: 50px;
- height: 45px;
+ background: url('../images/prev.png') left no-repeat;
float: left;
- background: url(../images/prev.png) left no-repeat;
- top: 50%;
- position: relative;
+ height: 45px;
margin-top: -23px;
+ position: relative;
+ top: 50%;
+ width: 50px;
+
&.image-next {
+ background: url('../images/next.png') left no-repeat;
float: right;
- background: url(../images/next.png) left no-repeat;
}
}
.loader-image {
- position: absolute;
- top: 0;
bottom: 0;
left: 0;
- right: 0;
margin: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
}
.loader-percent {
- position: absolute;
- top: 55px;
bottom: 0;
+ color: $dark-gray;
+ height: 20px;
left: 0;
- right: 0;
margin: auto;
- color: grey;
- height: 20px;
+ position: absolute;
+ right: 0;
+ top: 55px;
}
.modal-button-bar {
- position: absolute;
- bottom: -40px;
- left: 0px;
- right: 0px;
- background-color: #222;
+ @include single-transition(opacity, .6s);
@include border-radius(0 0 3px 3px);
@include opacity(0);
- -webkit-transition: opacity .6s;
- -moz-transition: opacity .6s;
- -o-transition: opacity .6s;
- transition: opacity .6s;
+ background-color: $black;
+ bottom: -40px;
+ left: 0;
line-height: 40px;
padding: 0 10px;
+ position: absolute;
+ right: 0;
&.footer--show {
@include opacity(1);
@@ -356,10 +358,10 @@
}
.text {
- vertical-align: middle;
bottom: 0;
- color: white;
+ color: $white;
margin-left: 5px;
+ vertical-align: middle;
}
.public-link {
@@ -376,11 +378,12 @@
}
.row--invite {
- margin-right: 40px;
@include clearfix;
+ margin-right: 40px;
.col-sm-6 {
padding: 0 0 0 15px;
+
&:first-child {
padding-left: 0;
}
@@ -389,26 +392,26 @@
.more-modal {
.user-list {
- overflow-y: auto;
- overflow-x: hidden;
margin-top: 10px;
+ overflow-x: hidden;
+ overflow-y: auto;
position: relative;
}
.modal-body {
- padding: 10px 0 20px;
overflow-x: hidden;
+ padding: 10px 0 20px;
}
.filter-row {
- margin: 10px 0;
@include clearfix;
+ margin: 10px 0;
}
.member-count {
- margin-top: 5px;
- float: right;
@include opacity(.8);
+ float: right;
+ margin-top: 5px;
}
.more-purpose {
@@ -416,21 +419,13 @@
}
}
-.modal-body.edit-modal-body {
- overflow: visible;
-
- .suggestion-list__content {
- max-height: 150px;
- }
-}
-
.more-modal__list {
- overflow: auto;
display: flex;
flex-direction: column;
+ overflow: auto;
.popover & {
- font-size: 0.95em;
+ font-size: .95em;
.more-modal__row {
padding: 5px 10px;
@@ -442,9 +437,9 @@
}
.more-modal__image {
+ @include border-radius(60px);
flex-grow: 0;
flex-shrink: 0;
- @include border-radius(60px);
margin-right: 8px;
}
@@ -462,33 +457,33 @@
}
.more-modal__name {
- font-weight: 600;
font-size: .95em;
- white-space: nowrap;
+ font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: nowrap;
}
.more-modal__description {
@include opacity(.7);
display: block;
- white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ white-space: nowrap;
}
.more-modal__row {
+ border-bottom: 1px solid;
display: flex;
padding: 8px 15px;
- border-bottom: 1px solid;
}
p {
+ @include opacity(.8);
font-size: .9em;
+ margin: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
- @include opacity(.8);
- margin: 5px 0;
}
}
diff --git a/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss
index cd8382a5c..04840457c 100644
--- a/webapp/sass/components/_oauth.scss
+++ b/webapp/sass/components/_oauth.scss
@@ -1,18 +1,18 @@
@charset 'UTF-8';
.prompt {
- background: #fff;
- border: 1px solid #ddd;
- padding: 1em 2em 0;
+ background: $white;
+ border: 1px solid $light-gray;
margin: 50px auto;
max-width: 90%;
+ padding: 1em 2em 0;
width: 600px;
.prompt__heading {
+ display: table;
font-size: em(20px);
line-height: normal;
margin: 1em 0;
- display: table;
width: 100%;
> div {
@@ -26,13 +26,13 @@
}
.prompt__allow {
- margin: 1em 0;
font-size: em(24px);
+ margin: 1em 0;
}
.prompt__buttons {
- text-align: right;
- border-top: 1px solid #ddd;
+ border-top: 1px solid $dark-gray;
padding: 1.5em 0;
+ text-align: right;
}
}
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index de66b67a7..0b2769f77 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -3,32 +3,38 @@
.popover {
@include border-radius($border-rad);
- color: #333;
+ color: lighten($black, 25%);
&.bottom,
&.right,
&.top,
&.left {
- > .arrow:after {
- border-color: transparent;
+ > .arrow {
+ &:after {
+ border-color: transparent;
+ }
}
}
.popover-title {
- background: rgba(black, .05);
+ background: alpha-color($black, .05);
padding: 8px 10px;
}
.popover-content {
- p:last-child {
- margin-bottom: 5px;
+ p {
+ &:last-child {
+ margin-bottom: 5px;
+ }
}
}
}
-.channel-header__info .popover-content {
- max-height: 250px;
- overflow: auto;
+.channel-header__info {
+ .popover-content {
+ max-height: 250px;
+ overflow: auto;
+ }
}
.user-popover {
@@ -36,32 +42,35 @@
display: inline-block;
}
-.code-popover .popover-content {
- padding: 5px;
+.code-popover {
+ .popover-content {
+ padding: 5px;
+ }
}
.user-popover__image {
- margin: 0 0 10px;
@include border-radius(128px);
+ margin: 0 0 10px;
}
.user-popover__email {
+ display: block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
- display: block;
}
.search-help-popover {
- visibility: hidden;
- max-width: none;
- width: 100%;
- top: 36px;
@include single-transition(opacity, .3s, ease-in);
font-size: em(13px);
+ max-width: none;
+ top: 36px;
+ visibility: hidden;
+ width: 100%;
&.autocomplete {
display: block;
+
.popover-content {
padding: 10px;
position: relative;
@@ -69,65 +78,68 @@
}
.search-autocomplete__divider {
- margin: 10px 0 5px;
line-height: 21px;
+ margin: 10px 0 5px;
position: relative;
+
&:first-child {
margin-top: 5px;
}
- span {
+
+ > span {
+ background: $white;
display: inline-block;
padding-right: 10px;
- background: #fff;
- z-index: 5;
position: relative;
+ z-index: 5;
}
+
&:before {
+ @include opacity(.2);
+ background: $dark-gray;
content: '';
- position: absolute;
- width: 100%;
height: 1px;
- background: #ddd;
- top: 10px;
left: 0;
- @include opacity(.2);
+ position: absolute;
+ top: 10px;
+ width: 100%;
}
}
.search-autocomplete__item {
+ @include border-radius(2px);
cursor: pointer;
- padding: 6px 8px;
margin: 3px 0 0 5px;
- @include border-radius(2px);
- white-space: nowrap;
overflow: hidden;
+ padding: 6px 8px;
text-overflow: ellipsis;
+ white-space: nowrap;
&:hover {
- background: rgba(black, .1);
+ background: alpha-color($black, .1);
}
&.selected {
- background: rgba(black, .2);
+ background: alpha-color($black, .2);
}
.fa {
- margin-right: 5px;
@include opacity(.5);
+ margin-right: 5px;
}
.profile-img {
- margin-top: -1px;
height: 16px;
margin-right: 6px;
+ margin-top: -1px;
width: 16px;
}
}
&.bottom > .arrow {
- top: -18px;
border-width: 9px;
left: 30px;
+ top: -18px;
}
.popover-content {
@@ -142,9 +154,11 @@
ul {
padding-left: 17px;
+
span {
@include opacity(.8);
}
+
strong,
b {
@include opacity(1);
@@ -156,25 +170,28 @@
}
&.visible {
- visibility: visible;
@include opacity(1);
+ visibility: visible;
}
}
-#member-list-popover {
+.member-list__popover {
max-width: initial;
+
.popover-content {
- position: relative;
+ max-height: 350px;
padding: 0;
+ position: relative;
width: 260px;
- max-height: 350px;
+
.text-nowrap {
+ font-size: 13px;
+ line-height: 26px;
+ overflow: hidden;
padding: 6px 10px;
width: 100%;
- overflow: hidden;
- line-height: 26px;
- font-size: 13px;
}
+
.more__name {
margin-left: 6px;
max-width: 140px;
diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss
index 4ecb38b1f..0bb0e7e21 100644
--- a/webapp/sass/components/_scrollbar.scss
+++ b/webapp/sass/components/_scrollbar.scss
@@ -1,28 +1,25 @@
@charset 'UTF-8';
-::-webkit-scrollbar
-{
- width: 8px; /* for vertical scrollbars */
- height: 8px; /* for horizontal scrollbars */
+::-webkit-scrollbar {
+ height: 8px; // for horizontal scrollbars
+ width: 8px; // for vertical scrollbars
}
-::-webkit-scrollbar-track
-{
- background: rgba(0, 0, 0, 0.1);
+::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, .1);
}
-::-webkit-scrollbar-thumb
-{
+::-webkit-scrollbar-thumb {
@include border-radius($border-rad * 2);
- background: rgba(0, 0, 0, 0.4);
+ background: rgba(0, 0, 0, .4);
}
-body{
- scrollbar-face-color: rgba(0, 0, 0, 0.1);
- scrollbar-shadow-color: #2D2C4D;
- scrollbar-highlight-color:#7D7E94;
+body {
scrollbar-3dlight-color: #7D7E94;
- scrollbar-darkshadow-color: #2D2C4D;
- scrollbar-track-color: rgba(0, 0, 0, 0.1);
scrollbar-arrow-color: #C1C1D1;
+ scrollbar-darkshadow-color: #2D2C4D;
+ scrollbar-face-color: rgba(0, 0, 0, .1);
+ scrollbar-highlight-color: #7D7E94;
+ scrollbar-shadow-color: #2D2C4D;
+ scrollbar-track-color: rgba(0, 0, 0, .1);
} \ No newline at end of file
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index faf0b8177..499c4fad4 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -1,15 +1,19 @@
@charset 'UTF-8';
-#channel-header .search-bar__container {
- padding: 0 9px 0 3px;
+.channel-header {
+ .search-bar__container {
+ padding: 0 9px 0 3px;
+ }
}
.search-bar__container {
- padding: 12px 8px 0 0;
@include flex(0 0 56px);
+ padding: 12px 8px 0 0;
- .sidebar--right.move--left & {
- padding-right: 42px;
+ .sidebar--right {
+ &.move--left & {
+ padding-right: 42px;
+ }
}
}
@@ -18,62 +22,60 @@
}
.search__clear {
+ @include single-transition(all, .2s, linear);
+ @include translateX(60px);
+ cursor: pointer;
display: none;
- position: absolute;
- right: 0;
line-height: 45px;
margin-right: 13px;
- @include single-transition(all, .2s, linear);
- @include translateX(60px);
+ position: absolute;
+ right: 0;
z-index: 5;
- cursor: pointer;
}
.search-item-snippet {
@include clearfix;
text-overflow: ellipsis;
+
+ ul,
+ ol {
+ padding-left: 20px;
+ }
}
.sidebar__collapse {
+ @include single-transition(all, .2s, linear);
+ @include translateX(0);
cursor: pointer;
- z-index: 5;
- fill: #fff;
- position: absolute;
- left: 0;
+ display: none;
+ fill: $white;
font-size: 35px;
- width: 49px;
- @include single-transition(all, .2s, linear);
- @include translateX(0px);
- text-align: center;
- padding-left: 1px;
+ left: 0;
line-height: 40px;
- display: none;
-}
-
-.search-item-snippet {
- ul,
- ol {
- padding-left: 20px;
- }
+ padding-left: 1px;
+ position: absolute;
+ text-align: center;
+ width: 49px;
+ z-index: 5;
}
.sidebar__search-icon {
- position: absolute;
- top: 15px;
- margin-left: 10px;
- font-size: 14px;
@include opacity(.5);
+ color: $dark-gray;
display: none;
- color: #777;
+ font-size: 14px;
+ margin-left: 10px;
+ position: absolute;
+ top: 15px;
}
.search__form {
position: relative;
.search-bar__container & {
- margin: 0;
- border: 1px solid #ddd;
@include border-radius(2px);
+ border: 1px solid $light-gray;
+ margin: 0;
width: 300px;
}
@@ -82,21 +84,21 @@
}
.search-bar {
+ box-shadow: none;
height: 40px;
padding-right: 30px;
- box-shadow: none;
.search-bar__container & {
- height: 30px;
border: none;
+ height: 30px;
}
}
.glyphicon-refresh-animate {
- top: 27px;
+ color: $dark-gray;
position: absolute;
right: 27px;
- color: #999;
+ top: 27px;
.search-bar__container & {
right: 7px;
@@ -106,30 +108,29 @@
}
.search-items-container {
- position: relative;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
@include flex(1 1 auto);
+ -webkit-overflow-scrolling: touch;
height: calc(100% - 56px);
+ overflow: auto;
padding-top: 10px;
+ position: relative;
}
.search-results-header {
+ border-bottom: $border-gray;
+ color: #999999;
font-size: 1em;
- text-transform: uppercase;
- color: #999;
font-weight: 400;
- color: #888;
height: 44px;
line-height: 44px;
- padding: 0 10px 0 10px;
- border-bottom: $border-gray;
+ padding: 0 10px;
+ text-transform: uppercase;
}
.search-item__container {
.post {
- padding: 0 1em 1em;
margin: 0;
+ padding: 0 1em 1em;
&:first-child {
border: none;
@@ -137,17 +138,17 @@
.search-channel__name {
font-weight: 600;
- margin: 0 0 10px 0;
+ margin: 0 0 10px;
}
}
}
.search-item__jump {
+ @include opacity(.8);
+ font-size: 13px;
position: absolute;
right: 0;
- top: 0px;
- font-size: 13px;
- @include opacity(.8);
+ top: 0;
&:hover {
@include opacity(1);
@@ -155,9 +156,9 @@
}
.search-item__comment {
+ margin-right: 35px;
position: absolute;
right: 0;
- margin-right: 35px;
top: 0;
}
@@ -171,5 +172,5 @@
}
.search-highlight {
- background-color: #fff2bb;
+ background-color: $yellow;
}
diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss
index 125a3cf32..0100026ca 100644
--- a/webapp/sass/components/_suggestion-list.scss
+++ b/webapp/sass/components/_suggestion-list.scss
@@ -1,9 +1,9 @@
@charset 'UTF-8';
.suggestion-list {
+ @extend %popover-box-shadow;
width: 100%;
z-index: 100;
- @extend %popover-box-shadow;
}
.suggestion-list--top {
@@ -11,31 +11,31 @@
}
.suggestion-list__content {
- width: 100%;
- max-height: 292px;
- background-color: #fff;
+ background-color: $white;
border: $border-gray;
+ max-height: 292px;
overflow-x: hidden;
overflow-y: scroll;
+ width: 100%;
.command {
- position: relative;
- width: 100%;
+ border-bottom: 1px solid $light-gray;
+ font-size: .95em;
line-height: 24px;
padding: 5px 10px 8px;
+ position: relative;
+ width: 100%;
z-index: 101;
- font-size: .95em;
- border-bottom: 1px solid #ddd;
.command__desc {
- margin-left: 5px;
@include opacity(.5);
line-height: normal;
+ margin-left: 5px;
}
}
}
.suggestion-list__content--top {
- position: absolute;
bottom: 0;
+ position: absolute;
}
diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss
index 44c10edb9..5e71e3a7b 100644
--- a/webapp/sass/components/_tooltip.scss
+++ b/webapp/sass/components/_tooltip.scss
@@ -2,9 +2,9 @@
.tooltip {
.tooltip-inner {
- word-break: break-word;
font-size: 13px;
- padding: 3px 10px 4px;
font-weight: 500;
+ padding: 3px 10px 4px;
+ word-break: break-word;
}
}
diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss
index f15919009..6545d7764 100644
--- a/webapp/sass/components/_tutorial.scss
+++ b/webapp/sass/components/_tutorial.scss
@@ -1,72 +1,76 @@
@charset 'UTF-8';
.tip-backdrop {
- background: rgba(black, .5);
+ background: alpha-color($black, .5);
+ height: 100%;
+ left: 0;
position: absolute;
top: 0;
- left: 0;
width: 100%;
- height: 100%;
z-index: 999;
}
.tip-overlay {
- width: 350px;
- max-width: 90%;
- position: absolute;
- background-color: #fff;
@include border-radius(3px);
+ background-color: $white;
+ max-width: 90%;
padding: 20px;
+ position: absolute;
+ width: 350px;
z-index: 1000;
.arrow {
+ border-color: transparent;
+ border-style: solid;
border-width: 10px;
- position: absolute;
display: block;
- width: 0;
height: 0;
- border-color: transparent;
- border-style: solid;
+ position: absolute;
+ width: 0;
}
&.tip-overlay--sidebar {
- max-width: 75%;
margin: 50px 0 0 10px;
+ max-width: 75%;
min-height: 330px;
+
.tutorial__footer {
- position: absolute;
- width: 100%;
bottom: 20px;
left: 0;
padding: 0 20px;
+ position: absolute;
+ width: 100%;
}
+
.arrow {
- top: 80px;
+ border-left-width: 0;
+ border-right-color: $white;
left: -10px;
margin-top: -10px;
- border-left-width: 0;
- border-right-color: #fff;
+ top: 80px;
}
}
&.tip-overlay--header {
margin: 10px 0 0 10px;
+
.arrow {
- top: 15px;
- left: -10px;
border-left-width: 0;
- border-right-color: #fff;
+ border-right-color: $white;
+ left: -10px;
+ top: 15px;
}
}
&.tip-overlay--chat {
margin-top: -10px;
+
.arrow {
- left: 50%;
- margin-left: -10px;
border-bottom-width: 0;
- border-top-color: #fff;
+ border-top-color: $white;
bottom: -10px;
+ left: 50%;
+ margin-left: -10px;
}
}
@@ -86,18 +90,18 @@
}
.btn {
- background: #ccc;
- color: #fff;
@include border-radius(3px);
+ background: alpha-color($black, .3);
border: none;
+ color: $white;
margin: 10px 0;
&:hover,
&:active,
&:focus {
- color: #fff;
+ background: alpha-color($black, .4);
border: none;
- background: #bbb;
+ color: $white;
}
}
@@ -110,81 +114,88 @@
}
.tutorial__circles {
- margin: 1.5em 0px -1.7em -4px;
+ margin: 1.5em 0 -1.7em -4px;
.circle {
- width: 7px;
height: 7px;
margin: 0 4px;
+ width: 7px;
}
}
}
.tip-button {
- z-index: 998;
+ cursor: pointer;
+ position: relative;
right: -10px;
top: -10px;
- position: relative;
- cursor: pointer;
+ z-index: 998;
}
.tip-div {
position: absolute;
- top: 0px;
- right: 0px;
+ right: 0;
+ top: 0;
&.tip-overlay--header {
- top: 21px;
right: 2px;
+ top: 21px;
+
.tip-button {
@include opacity(.8);
}
}
&.tip-overlay--sidebar {
- left: 0;
@include opacity(.8);
+ left: 0;
top: -9px;
}
}
.tutorial-steps__container {
- text-align: center;
- width: 100%;
display: table;
height: 100%;
+ text-align: center;
+ width: 100%;
+
.tutorial__content {
display: table-cell;
- vertical-align: middle;
- padding-bottom: 100px;
padding: 20px 40px 40px;
+ vertical-align: middle;
+
.tutorial__steps {
- position: relative;
+ display: inline-block;
+ margin-bottom: 50px;
max-width: 310px;
min-height: 370px;
- margin-bottom: 50px;
+ position: relative;
text-align: left;
- display: inline-block;
}
}
+
.tutorial__footer {
- position: absolute;
bottom: 0;
+ position: absolute;
}
+
h1 {
font-size: em(40px);
- margin: -20px 0 30px;
font-weight: 600;
+ margin: -20px 0 30px;
}
+
h3 {
font-size: em(24px);
- margin-bottom: 30px;
font-weight: 600;
+ margin-bottom: 30px;
}
+
.tutorial__circles {
- position: absolute;
bottom: 40px;
+ position: absolute;
}
+
.tutorial-skip {
margin-left: 13px;
}
@@ -192,17 +203,19 @@
.tutorial__circles {
margin: 2em 0;
+
.circle {
- width: 9px;
- height: 9px;
@include border-radius(9px);
@include opacity(.2);
- background: #000;
+ background: $black;
display: inline-block;
+ height: 9px;
margin: 0 5px;
+ width: 9px;
+
&.active {
- background: $color--primary;
@include opacity(1);
+ background: $primary-color;
}
}
}
diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss
index 91db750bd..e009e6538 100644
--- a/webapp/sass/components/_videos.scss
+++ b/webapp/sass/components/_videos.scss
@@ -1,65 +1,68 @@
@charset 'UTF-8';
.video-div {
- position: relative;
- max-width: 480px;
margin-bottom: 8px;
+ max-width: 480px;
+ position: relative;
+
.video-thumbnail {
- max-width: 100%;
height: auto;
+ max-width: 100%;
}
+
.block {
- background-color: rgba(0,0,0,.5);
+ background-color: alpha-color($black, .5);
border-radius: 10px;
+ height: 150px;
+ left: 50%;
+ margin: -75px 0 0 -100px;
position: absolute;
top: 50%;
- left: 50%;
- margin-top: -100px;
width: 200px;
- margin: -75px 0 0 -100px;
- height: 150px;
}
}
.video-type {
@include opacity(.8);
font-size: 15px;
- margin: 0px;
- padding: 0px;
+ margin: 0;
+ padding: 0;
}
.video-title {
font-size: 15px;
margin-top: 3px;
}
+
.play-button {
- width: 100px;
+ @include border-radius(14px);
+ border: 4px solid alpha-color($white, .4);
height: 100px;
position: absolute;
- top: 26px;
right: 51px;
- border: 4px solid;
- border-color: rgba(255,255,255,.4);
- border-radius: 14px;
-}
-.play-button span {
- position: absolute;
- top: 10px;
- left: 20px;
- width: 0;
- height: 0;
- border-top: 36px solid transparent;
- border-bottom: 36px solid transparent;
- border-left: 60px solid rgba(255,255,255,.4);
+ top: 26px;
+ width: 100px;
+
+ span {
+ border-bottom: 36px solid transparent;
+ border-left: 60px solid alpha-color($white, .4);
+ border-top: 36px solid transparent;
+ height: 0;
+ left: 20px;
+ position: absolute;
+ top: 10px;
+ width: 0;
+ }
}
.img-div {
-moz-force-broken-image-icon: 1;
- position: relative;
- max-width: 450px;
- max-height: 500px;
- margin-bottom: 8px;
border-radius: 5px;
+ margin-bottom: 8px;
+ max-height: 500px;
+ max-width: 450px;
+ position: relative;
+
&.placeholder {
height: 500px;
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-26 15:04:15 +0000