diff options
Diffstat (limited to 'app/javascript/styles')
| -rw-r--r-- | app/javascript/styles/mastodon/components.scss | 43 | ||||
| -rw-r--r-- | app/javascript/styles/win95.scss | 156 |
2 files changed, 171 insertions, 28 deletions
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 71bffdaa6..d13a18ad7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2303,7 +2303,7 @@ } } -.missing-indicator { +.regeneration-indicator { text-align: center; font-size: 16px; font-weight: 500; @@ -2314,11 +2314,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; + } } } @@ -2749,7 +2784,6 @@ @keyframes heartbeat { from { transform: scale(1); - transform-origin: center center; animation-timing-function: ease-out; } @@ -2775,6 +2809,7 @@ } .pulse-loading { + transform-origin: center center; animation: heartbeat 1.5s ease-in-out infinite both; } 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; } - |