diff options
Diffstat (limited to 'app/javascript/styles')
| -rw-r--r-- | app/javascript/styles/application.scss | 3 | ||||
| -rw-r--r-- | app/javascript/styles/mailer.scss | 78 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/components.scss | 189 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/modal.scss | 4 | ||||
| -rw-r--r-- | app/javascript/styles/win95.scss | 156 |
5 files changed, 360 insertions, 70 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 71bffdaa6..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); @@ -2303,7 +2304,7 @@ } } -.missing-indicator { +.regeneration-indicator { text-align: center; font-size: 16px; font-weight: 500; @@ -2314,11 +2315,46 @@ flex: 1 1 auto; align-items: center; justify-content: center; + padding: 20px; & > div { - background: url('~images/mastodon-not-found.png') no-repeat center -50px; - padding-top: 210px; width: 100%; + background: transparent; + padding-top: 0; + } + + &__figure { + background: url('~images/elephant_ui_working.svg') no-repeat center 0; + width: 100%; + height: 160px; + background-size: contain; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &.missing-indicator { + padding-top: 20px + 48px; + + .regeneration-indicator__figure { + background-image: url('~images/elephant_ui_disappointed.svg'); + } + } + + &__label { + margin-top: 200px; + + strong { + display: block; + margin-bottom: 10px; + color: lighten($ui-base-color, 34%); + } + + span { + font-size: 15px; + font-weight: 400; + } } } @@ -2728,6 +2764,7 @@ flex: 1 1 auto; align-items: center; justify-content: center; + @supports(display: grid) { // hack to fix Chrome <57 contain: strict; } @@ -2749,7 +2786,6 @@ @keyframes heartbeat { from { transform: scale(1); - transform-origin: center center; animation-timing-function: ease-out; } @@ -2774,10 +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; @@ -3283,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; @@ -3362,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%); + } } } } @@ -3414,6 +3496,8 @@ .onboarding-modal__page__wrapper { pointer-events: none; + padding: 25px; + padding-bottom: 0; &.onboarding-modal__page__wrapper--active { pointer-events: auto; @@ -3441,6 +3525,10 @@ } } + .navigation-bar a { + color: inherit; + } + p { font-size: 16px; color: lighten($ui-base-color, 8%); @@ -3468,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; } } @@ -3580,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; } } diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss index d683218b0..c1058af29 100644 --- a/app/javascript/styles/win95.scss +++ b/app/javascript/styles/win95.scss @@ -54,7 +54,6 @@ $ui-highlight-color: $win95-window-header; border-radius:0px; } - @mixin win95-tab() { box-shadow: inset -1px 0px 0px #000000, inset 1px 0px 0px #ffffff, @@ -122,7 +121,6 @@ $ui-highlight-color: $win95-window-header; vertical-align: middle; } - /* main win95 style */ body { @@ -189,10 +187,31 @@ body.admin { .drawer .drawer__inner { overflow: visible; height:inherit; + background:$win95-bg; +} + +.drawer:after { + display:block; + content: " "; + + position:absolute; + bottom:15px; + left:15px; + width:132px; + height:117px; + background-image:url("~images/clippy_wave.gif"), url("~images/clippy_frame.png"); + background-repeat:no-repeat; + background-position: 4px 20px, 0px 0px; + z-index:0; } .drawer__pager { overflow-y:auto; + z-index:1; +} + +.privacy-dropdown__dropdown { + z-index:2; } .column { @@ -219,6 +238,7 @@ body.admin { border-bottom-width:0px; color:white; font-weight:bold; + align-items:baseline; } .column-header__wrapper.active { @@ -237,6 +257,11 @@ body.admin { color:white; } +.column-header__buttons { + max-height: 20px; + margin-right:0px; +} + .column-header__button { background: $win95-bg; color: black; @@ -246,6 +271,10 @@ body.admin { padding:0px 2px; margin-top:2px; @include win95-outset() + + &:hover { + color: black; + } } .column-header__button.active, .column-header__button.active:hover { @@ -308,6 +337,13 @@ body.admin { padding:4px; } +.column-inline-form { + background-color: $win95-bg; + @include win95-border-outset(); + border-bottom-width:0px; + border-top-width:0px; +} + .column-settings__section { color:black; font-weight:bold; @@ -679,7 +715,6 @@ body.admin { font-weight:bold; } - .drawer__header { background: $win95-bg; @include win95-border-outset() @@ -820,12 +855,13 @@ body.admin { font-weight:bold; } -.autosuggest-textarea__textarea, .spoiler-input__input { +.compose-form .autosuggest-textarea__textarea, +.compose-form .spoiler-input__input { border-radius:0px; @include win95-border-slight-inset(); } -.autosuggest-textarea__textarea { +.compose-form .autosuggest-textarea__textarea { border-bottom:0px; } @@ -840,13 +876,30 @@ body.admin { border-right:1px inset $win95-bg; } +.compose-form .compose-form__buttons-wrapper { + background-color: $win95-bg; + border:2px groove $win95-bg; + margin-top:4px; + padding:4px 8px; +} + .compose-form__buttons { background-color:$win95-bg; border-radius:0px; box-shadow:unset; - border:2px groove $win95-bg; - margin-top:4px; - padding:4px 8px; +} + +.compose-form__buttons-separator { + border-left: 2px groove $win95-bg; +} + +.privacy-dropdown.active .privacy-dropdown__value.active, +.advanced-options-dropdown.open .advanced-options-dropdown__value { + background: $win95-bg; +} + +.privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: $win95-dark-grey; } .privacy-dropdown.active @@ -860,7 +913,11 @@ body.admin { background:$win95-window-header; } -.privacy-dropdown.active .privacy-dropdown__dropdown { +.privacy-dropdown__dropdown, +.privacy-dropdown.active .privacy-dropdown__dropdown, +.advanced-options-dropdown__dropdown, +.advanced-options-dropdown.open .advanced-options-dropdown__dropdown +{ box-shadow:unset; color:black; @include win95-outset() @@ -934,6 +991,10 @@ body.admin { display:none; } +.emoji-picker-dropdown__menu { + z-index:2; +} + .emoji-dialog.with-search { box-shadow:unset; border-radius:0px; @@ -1026,31 +1087,43 @@ body.admin { .column-subheading { background-color:$win95-bg; color:black; - font-size:0px; border-bottom: 2px groove $win95-bg; - padding:0px; - margin:0px; + text-transform: none; + font-size: 16px; } .column-link { background-color:transparent; - background-size:32px 32px; - background-repeat:no-repeat; - background-position: 36px 50%; color:black; - padding-left:40px; - &:hover { background-color: $win95-window-header; + color:white; + } +} + +.getting-started__wrapper { + .column-subheading { + font-size:0px; + margin:0px; + padding:0px; + } + + .column-link { background-size:32px 32px; background-repeat:no-repeat; background-position: 36px 50%; - color:white; - } + padding-left:40px; + + &:hover { + background-size:32px 32px; + background-repeat:no-repeat; + background-position: 36px 50%; + } - i { - font-size: 0px; - width:32px; + i { + font-size: 0px; + width:32px; + } } } @@ -1070,6 +1143,18 @@ body.admin { background-image: url("~images/icon_likes.png"); &:hover { background-image: url("~images/icon_likes.png"); } } +.column-link[href="/web/lists"] { + background-image: url("~images/icon_lists.png"); + &:hover { background-image: url("~images/icon_lists.png"); } +} +.column-link[href="/web/follow_requests"] { + background-image: url("~images/icon_follow_requests.png"); + &:hover { background-image: url("~images/icon_follow_requests.png"); } +} +.column-link[href="/web/keyboard-shortcuts"] { + background-image: url("~images/icon_keyboard_shortcuts.png"); + &:hover { background-image: url("~images/icon_keyboard_shortcuts.png"); } +} .column-link[href="/web/blocks"] { background-image: url("~images/icon_blocks.png"); &:hover { background-image: url("~images/icon_blocks.png"); } @@ -1124,6 +1209,14 @@ body.admin { background-color:$win95-bg; } +.column .static-content.getting-started { + display:none; +} + +.keyboard-shortcuts kbd { + background-color: $win95-bg; +} + .account__header { background-color:#7f7f7f; } @@ -1132,6 +1225,23 @@ body.admin { color:white; } +.account-authorize__wrapper { + border: 2px groove $win95-bg; + margin: 2px; + padding:2px; +} + +.account--panel { + background-color: $win95-bg; + border:0px; + border-top: 2px groove $win95-bg; +} + +.account-authorize .account__header__content { + color:black; + margin:10px; +} + .account__action-bar__tab > span { color:black; font-weight:bold; @@ -1307,7 +1417,6 @@ body.admin { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFnpUWHRUaXRsZQAACJnLzU9JzElKBwALgwLXaCRlPwAAABd6VFh0QXV0aG9yAAAImUvOKMrPS8wBAAuaAugOwWPyAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII='); } - .admin-wrapper::before { position:absolute; top:0px; @@ -1652,4 +1761,3 @@ a.table-action-link:hover, color:black; border-bottom: 0px solid transparent; } - |