summaryrefslogtreecommitdiffstats
path: root/webapp/sass
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass')
-rw-r--r--webapp/sass/components/_emoticons.scss9
-rw-r--r--webapp/sass/components/_inputs.scss7
-rw-r--r--webapp/sass/components/_scrollbar.scss16
-rw-r--r--webapp/sass/components/_tooltip.scss6
-rw-r--r--webapp/sass/components/_webrtc.scss11
-rw-r--r--webapp/sass/responsive/_mobile.scss160
-rw-r--r--webapp/sass/responsive/_tablet.scss4
-rw-r--r--webapp/sass/routes/_admin-console.scss6
-rw-r--r--webapp/sass/routes/_settings.scss4
-rw-r--r--webapp/sass/routes/_signup.scss2
-rw-r--r--webapp/sass/utils/_mixins.scss61
11 files changed, 183 insertions, 103 deletions
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 80a800863..0e6ce6041 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,11 +1,14 @@
@charset 'UTF-8';
.emoticon {
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
background-size: contain;
display: inline-block;
- height: 1.5em;
- margin-bottom: .25em;
- width: 1.5em;
+ font-size: 19px;
+ height: 1em;
+ vertical-align: text-top;
+ width: 1em;
}
.emoticon-suggestion {
diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss
index c34d0d2d4..75e5ff9e6 100644
--- a/webapp/sass/components/_inputs.scss
+++ b/webapp/sass/components/_inputs.scss
@@ -37,3 +37,10 @@ fieldset {
.admin-textarea {
resize: none;
}
+
+input {
+ &[type='radio'],
+ &[type='checkbox'] {
+ margin-top: 1px;
+ }
+}
diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss
index a4df8230d..66b476166 100644
--- a/webapp/sass/components/_scrollbar.scss
+++ b/webapp/sass/components/_scrollbar.scss
@@ -15,13 +15,15 @@
}
body {
- scrollbar-3dlight-color: #7D7E94;
- 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);
+ &.app__body {
+ scrollbar-3dlight-color: #7D7E94;
+ 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);
+ }
}
.scrollbar--horizontal,
diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss
index 5e71e3a7b..0049fe1b8 100644
--- a/webapp/sass/components/_tooltip.scss
+++ b/webapp/sass/components/_tooltip.scss
@@ -8,3 +8,9 @@
word-break: break-word;
}
}
+
+#webrtcTooltip {
+ .tooltip-inner {
+ word-break: normal;
+ }
+}
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index b025ab00c..c9deada26 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -2,10 +2,14 @@
.webrtc__user-profile {
@include webrtc-button;
+ position: absolute;
+ right: 7px;
text-align: center;
+ top: 5px;
#webrtc-btn {
- display: inherit;
+ height: 23px;
+ width: 23px;
}
}
@@ -15,6 +19,11 @@
margin-right: 10px;
position: relative;
top: 13px;
+
+ svg {
+ position: relative;
+ width: 20px;
+ }
}
.webrtc__notification--rhs {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 708fa4fca..25d95df46 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,27 @@
@charset 'UTF-8';
@media screen and (max-width: 768px) {
+ .suggestion-list__content {
+ max-height: 145px;
+ }
+
+ .modal {
+ .modal-dialog {
+ &.new-channel__modal {
+ position: fixed;
+ @include translate3d(0, 100%, 0);
+ }
+ }
+
+ &.in {
+ .modal-dialog {
+ &.new-channel__modal {
+ @include translate3d(0, 0, 0);
+ }
+ }
+ }
+ }
+
.webrtc__notification--rhs {
left: auto;
right: 0;
@@ -17,15 +38,21 @@
}
#header-popover {
+ @include single-transition(all, .35s, ease);
+ @include translate3d(0, 100%, 0);
@include box-shadow(none);
background: alpha-color($black, .8);
border: none;
- height: 100%;
+ height: calc(100% - 45px);
max-width: 100%;
position: fixed;
top: 47px;
width: 100%;
+ &.in {
+ @include translate3d(0, 0, 0);
+ }
+
.arrow {
display: none;
}
@@ -37,23 +64,23 @@
}
.close {
- font-family: 'Open Sans', sans-serif;
- display: block;
- position: fixed;
+ @include border-radius(50%);
+ border: 1px solid $white;
bottom: 25px;
+ color: $white;
+ display: block;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 23px;
+ font-weight: 200;
height: 30px;
- width: 30px;
- margin-left: -15px;
left: 50%;
- font-size: 23px;
line-height: 27px;
- border-radius: 50%;
- border: 1px solid $white;
- text-align: center;
+ margin-left: -15px;
opacity: 1;
+ position: fixed;
+ text-align: center;
text-shadow: none;
- color: white;
- font-weight: 200;
+ width: 30px;
}
}
@@ -183,6 +210,11 @@
}
}
+ .post__remove {
+ margin-right: 10px;
+ visibility: visible;
+ }
+
&.post--compact {
.status-wrapper {
&:after {
@@ -315,6 +347,24 @@
}
&.same--user {
+ &.post--compact {
+ .status-wrapper {
+ &:after {
+ bottom: -2px;
+ }
+ }
+ }
+
+ .post__img {
+ .status-wrapper {
+ display: inline-block;
+ }
+
+ img {
+ display: block;
+ }
+ }
+
.post__header {
height: auto;
margin-top: 5px;
@@ -743,34 +793,47 @@
white-space: nowrap;
}
+ .dropdown {
+ &.open {
+ .dropdown-menu {
+ @include translate3d(0, 0, 0);
+ visibility: visible;
+ }
+ }
+ }
+
.dropdown-menu {
+ @include single-transition(all, .35s, ease);
+ @include translate3d(0, 100%, 0);
background: alpha-color($black, .9);
- height: 100%;
+ display: block;
+ height: calc(100% - 45px);
left: 0;
overflow: auto;
- padding: 1.4em 0 140px;
+ padding: 1.4em 0 0;
position: fixed;
top: 42px;
+ visibility: hidden;
width: 100%;
.close {
- font-family: 'Open Sans', sans-serif;
- display: block;
- position: fixed;
+ @include border-radius(50%);
+ border: 1px solid $white;
bottom: 25px;
+ color: $white;
+ display: block;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 23px;
+ font-weight: 200;
height: 30px;
- width: 30px;
- margin-left: -15px;
left: 50%;
- font-size: 23px;
line-height: 27px;
- border-radius: 50%;
- border: 1px solid $white;
- text-align: center;
+ margin-left: -15px;
opacity: 1;
+ position: fixed;
+ text-align: center;
text-shadow: none;
- color: white;
- font-weight: 200;
+ width: 30px;
}
> li {
@@ -1056,7 +1119,7 @@
}
&.move--right {
- @include translate3d(290px, 0, 0);
+ @include translate3d(0, 0, 0);
&:before {
@include single-transition(all, .35s, ease);
@@ -1281,11 +1344,7 @@
}
.post__header {
- .col__name {
- .user-popover {
- max-width: 100%;
- }
- }
+ padding-right: 50px;
}
}
}
@@ -1337,7 +1396,6 @@
.modal-body {
padding-bottom: 35px;
}
-
}
.settings-modal {
@@ -1395,7 +1453,7 @@
.inner-wrap {
&.move--right {
- @include translate3d(260px, 0, 0);
+ @include translate3d(0, 0, 0);
}
}
@@ -1416,26 +1474,41 @@
}
@media screen and (max-width: 320px) {
+ .post {
+ .post__header {
+ .col__name {
+ .user-popover {
+ max-width: 105px;
+ }
+ }
+ }
+ }
+
.tutorial-steps__container {
.tutorial__content {
.tutorial__steps {
padding: 0 20px;
width: 100%;
+
h1 {
font-size: 35px;
margin: -5px 0 20px;
}
+
h3 {
margin-bottom: 10px;
}
+
.tutorial__app-icons {
margin: 10px 0;
}
+
.tutorial__circles {
- margin: 0 0 15px;
bottom: 60px;
+ margin: 0 0 15px;
position: absolute;
}
+
.tutorial__footer {
bottom: 30px;
position: absolute;
@@ -1451,13 +1524,30 @@
}
}
+@media screen and (max-width: 320px) and (max-height: 560px) {
+ #navbar {
+ .navbar-default {
+ .dropdown-menu {
+ padding-top: 1em;
+
+ > li {
+ > a {
+ border: none;
+ line-height: 28px;
+ }
+ }
+ }
+ }
+ }
+}
+
// on iOS, allow clicks within an input's label to actually propagate through to the input itself
// http://stackoverflow.com/a/34810294/6325807
label span {
pointer-events: none;
}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
select,
textarea,
input {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 52d7a6a77..f9cd0869d 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -9,7 +9,7 @@
}
.heading {
- width: 130px;
+ max-width: 150px;
}
}
@@ -73,7 +73,7 @@
}
.sidebar--right {
- @include single-transition(all, .5s, ease);
+ @include single-transition(all, .35s, ease);
@include translateX(100%);
&.move--left,
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index aa90a7eaf..5107cff3d 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -56,12 +56,16 @@
&.btn-spacing--right {
margin-right: 10px;
}
+
+ .fa {
+ margin-right: 5px;
+ }
}
.log__panel {
background-color: white;
border: 1px solid #ddd;
- height: 800px;
+ height: calc(100vh - 200px);
margin-top: 10px;
overflow: scroll;
padding: 5px;
diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss
index 6fa8c26a7..6b7f8a5f1 100644
--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -236,12 +236,12 @@
}
.theme-elements__header {
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid;
cursor: pointer;
font-size: em(13.5px);
font-weight: 600;
margin: 10px 20px 0 0;
- padding: 5px 0 10px;
+ padding: 1px 0 10px;
.fa-minus {
display: none;
diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss
index d9aa171a9..30e80cccb 100644
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -13,7 +13,7 @@
.signup-team__container {
margin: 0 auto;
- max-width: 380px;
+ max-width: 400px;
padding: 100px 0 50px;
position: relative;
diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss
index e252086ae..6a041d6ec 100644
--- a/webapp/sass/utils/_mixins.scss
+++ b/webapp/sass/utils/_mixins.scss
@@ -32,68 +32,27 @@
@mixin webrtc-button {
.webrtc__button {
@include border-radius(50px);
+ background: $button--ready;
display: block;
- height: 32px;
- width: 32px;
+ height: 33px;
+ text-align: center;
+ width: 33px;
&.on,
&:hover {
background: darken($button--ready, 5%);
}
- &:hover circle {
- fill: darken($button--ready, 5%);
- }
-
- circle {
- fill: $button--ready;
-
- &.offline {
- fill: $video-circle-offline;
- }
- }
-
- path {
- .on {
- display: none;
- }
-
- .off {
- display: block;
- }
- }
-
- &.on {
- path {
- .on {
- display: block;
- }
-
- .off {
- display: none;
- }
- }
+ &.offline {
+ background: $video-circle-offline;
- circle {
- fill-opacity: 0;
+ &:hover {
+ background: $video-circle-offline;
}
}
- }
- a {
- &[disabled] {
- .webrtc__button {
- &:hover {
- background: none;
- box-shadow: none;
- }
-
- &:hover {
- circle {
- fill: $video-circle-offline;
- }
- }
- }
+ svg {
+ fill: $white;
}
}
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-06 15:07:19 +0000