about summary refs log tree commit diff
path: root/app/javascript/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/styles')
-rw-r--r--app/javascript/styles/application.scss3
-rw-r--r--app/javascript/styles/mailer.scss78
-rw-r--r--app/javascript/styles/mastodon/components.scss146
-rw-r--r--app/javascript/styles/mastodon/modal.scss4
4 files changed, 189 insertions, 42 deletions
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index fd6665f65..300040173 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -6,7 +6,6 @@
 
 @import 'mastodon/reset';
 @import 'mastodon/basics';
-@import 'mastodon/modal';
 @import 'mastodon/containers';
 @import 'mastodon/lists';
 @import 'mastodon/footer';
@@ -15,7 +14,9 @@
 @import 'mastodon/forms';
 @import 'mastodon/accounts';
 @import 'mastodon/stream_entries';
+@import 'mastodon/boost';
 @import 'mastodon/components';
+@import 'mastodon/modal';
 @import 'mastodon/emoji_picker';
 @import 'mastodon/about';
 @import 'mastodon/tables';
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index e6422b2ea..dbe070f9a 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -17,7 +17,7 @@ body {
   -ms-text-size-adjust: 100%;
 }
 
-.email_body {
+.email-body {
   td,
   div,
   a,
@@ -228,6 +228,19 @@ h3 {
   line-height: 25px;
 }
 
+h5 {
+  font-size: 16px;
+  line-height: 21px;
+  font-weight: 700;
+  color: lighten($ui-base-color, 34%);
+}
+
+.input-cell {
+  h5 {
+    margin-top: 4px;
+  }
+}
+
 .input {
   td {
     background: darken($ui-base-color, 8%);
@@ -356,6 +369,19 @@ h3 {
       font-weight: 500 !important;
     }
   }
+
+  &.button-small {
+    td {
+      border-radius: 4px;
+      font-size: 14px;
+      padding: 8px 16px;
+
+      a {
+        padding: 5px 16px !important;
+        line-height: 26px !important;
+      }
+    }
+  }
 }
 
 .button-default {
@@ -379,6 +405,14 @@ h3 {
   padding-right: 16px;
 }
 
+.padded-bottom {
+  padding-bottom: 32px;
+}
+
+.margin-bottom {
+  margin-bottom: 20px;
+}
+
 .hero-icon {
   width: 64px;
 
@@ -463,8 +497,50 @@ h3 {
   border-top: 1px solid lighten($ui-base-color, 8%);
 }
 
+ul {
+  padding-left: 15px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 16px;
+
+  li {
+    margin-bottom: 16px;
+    color: lighten($ui-base-color, 26%);
+
+    span {
+      color: $ui-primary-color;
+    }
+  }
+}
+
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
   body {
     min-height: 1024px !important;
   }
 }
+
+@media (max-width: 697px) {
+  .email-container,
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6 {
+    width: 100% !important;
+    max-width: none !important;
+  }
+
+  .email-start {
+    padding-top: 16px !important;
+  }
+
+  .email-end {
+    padding-bottom: 16px !important;
+  }
+
+  .padded {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d13a18ad7..75e37237b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1419,6 +1419,10 @@
     color: $primary-text-color;
   }
 
+  a {
+    color: inherit;
+  }
+
   .permalink {
     text-decoration: none;
   }
@@ -1762,7 +1766,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto;
+  background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -1777,7 +1781,7 @@
   }
 
   > .mastodon {
-    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
     flex: 1;
   }
 }
@@ -2154,10 +2158,7 @@
   }
 }
 
-@import 'boost';
-
 .no-reduce-motion button.icon-button i.fa-retweet {
-
   background-position: 0 0;
   height: 19px;
   transition: background-position 0.9s steps(10);
@@ -2763,6 +2764,7 @@
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
+
   @supports(display: grid) { // hack to fix Chrome <57
     contain: strict;
   }
@@ -2808,11 +2810,48 @@
   }
 }
 
-.pulse-loading {
+.no-reduce-motion .pulse-loading {
   transform-origin: center center;
   animation: heartbeat 1.5s ease-in-out infinite both;
 }
 
+@keyframes shake-bottom {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 50% 100%;
+  }
+
+  10% {
+    transform: rotate(2deg);
+  }
+
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+
+  80% {
+    transform: rotate(-2deg);
+  }
+
+  90% {
+    transform: rotate(2deg);
+  }
+}
+
+.no-reduce-motion .shake-bottom {
+  transform-origin: 50% 100%;
+  animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
+}
+
 .emoji-picker-dropdown__menu {
   background: $simple-background-color;
   position: absolute;
@@ -3318,13 +3357,12 @@
   height: 80vh;
   width: 80vw;
   max-width: 520px;
-  max-height: 420px;
+  max-height: 470px;
 
   .react-swipeable-view-container > div {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    padding: 25px;
     display: none;
     flex-direction: column;
     align-items: center;
@@ -3397,23 +3435,32 @@
   .onboarding-modal__nav,
   .error-modal__nav {
     color: darken($ui-secondary-color, 34%);
-    background-color: transparent;
     border: 0;
     font-size: 14px;
     font-weight: 500;
-    padding: 0;
+    padding: 10px 25px;
     line-height: inherit;
     height: auto;
+    margin: -10px;
+    border-radius: 4px;
+    background-color: transparent;
 
     &:hover,
     &:focus,
     &:active {
       color: darken($ui-secondary-color, 38%);
+      background-color: darken($ui-secondary-color, 16%);
     }
 
     &.onboarding-modal__done,
     &.onboarding-modal__next {
-      color: $ui-highlight-color;
+      color: $ui-base-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: darken($ui-base-color, 4%);
+      }
     }
   }
 }
@@ -3449,6 +3496,8 @@
 
 .onboarding-modal__page__wrapper {
   pointer-events: none;
+  padding: 25px;
+  padding-bottom: 0;
 
   &.onboarding-modal__page__wrapper--active {
     pointer-events: auto;
@@ -3476,6 +3525,10 @@
     }
   }
 
+  .navigation-bar a {
+    color: inherit;
+  }
+
   p {
     font-size: 16px;
     color: lighten($ui-base-color, 8%);
@@ -3503,29 +3556,56 @@
   }
 }
 
-.onboarding-modal__page-one {
-  display: flex;
-  align-items: center;
+.onboarding-modal__page__wrapper-0 {
+  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
+  height: 100%;
+  padding: 0;
 }
 
-.onboarding-modal__page-one__elephant-friend {
-  background: url('~images/elephant-friend-1.png') no-repeat center center / contain;
-  width: 155px;
-  height: 193px;
-  margin-right: 15px;
+.onboarding-modal__page-one {
+  &__lead {
+    padding: 65px;
+    padding-top: 45px;
+    padding-bottom: 0;
+    margin-bottom: 10px;
+
+    h1 {
+      font-size: 26px;
+      line-height: 36px;
+      margin-bottom: 8px;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  &__extra {
+    padding-right: 65px;
+    padding-left: 185px;
+    text-align: center;
+  }
 }
 
-@media screen and (max-width: 400px) {
-  .onboarding-modal__page-one {
-    flex-direction: column;
-    align-items: normal;
+.display-case {
+  text-align: center;
+  font-size: 15px;
+  margin-bottom: 15px;
+
+  &__label {
+    font-weight: 500;
+    color: $ui-base-color;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    font-size: 12px;
   }
 
-  .onboarding-modal__page-one__elephant-friend {
-    width: 100%;
-    height: 30vh;
-    max-height: 160px;
-    margin-bottom: 5vh;
+  &__case {
+    background: $ui-base-color;
+    color: $ui-secondary-color;
+    font-weight: 500;
+    padding: 10px;
+    border-radius: 4px;
   }
 }
 
@@ -3615,16 +3695,6 @@
   }
 }
 
-.onboarding-modal__image {
-  border-radius: 8px;
-  width: 70vw;
-  max-width: 450px;
-  max-height: auto;
-  display: block;
-  margin: auto;
-  margin-bottom: 20px;
-}
-
 .onboard-sliders {
   display: inline-block;
   max-width: 30px;
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index a17476ccb..ceb79bbb9 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -1,5 +1,5 @@
 .modal-layout {
-  background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed;
+  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -15,6 +15,6 @@
   > * {
     flex: 1;
     max-height: 235px;
-    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
   }
 }
generated by cgit-pink (git 2.37.1) at 2024-11-02 21:01:29 +0000