diff --git a/app/javascript/fonts/premillenium/MSSansSerif.ttf b/app/javascript/fonts/premillenium/MSSansSerif.ttf new file mode 100644 index 000000000..3afd76ff2 Binary files /dev/null and b/app/javascript/fonts/premillenium/MSSansSerif.ttf differ diff --git a/app/javascript/images/alert_badge.png b/app/javascript/images/alert_badge.png new file mode 100644 index 000000000..681f6e651 Binary files /dev/null and b/app/javascript/images/alert_badge.png differ diff --git a/app/javascript/images/clippy_frame.png b/app/javascript/images/clippy_frame.png new file mode 100644 index 000000000..7f2cd6a59 Binary files /dev/null and b/app/javascript/images/clippy_frame.png differ diff --git a/app/javascript/images/clippy_wave.gif b/app/javascript/images/clippy_wave.gif new file mode 100644 index 000000000..4d2e38a3d Binary files /dev/null and b/app/javascript/images/clippy_wave.gif differ diff --git a/app/javascript/images/elephant-fren.png b/app/javascript/images/elephant-fren.png index 38b1e3cba..3b64edf08 100644 Binary files a/app/javascript/images/elephant-fren.png and b/app/javascript/images/elephant-fren.png differ diff --git a/app/javascript/images/icon_about.png b/app/javascript/images/icon_about.png new file mode 100644 index 000000000..08b76dcd9 Binary files /dev/null and b/app/javascript/images/icon_about.png differ diff --git a/app/javascript/images/icon_blocks.png b/app/javascript/images/icon_blocks.png new file mode 100644 index 000000000..8b1490875 Binary files /dev/null and b/app/javascript/images/icon_blocks.png differ diff --git a/app/javascript/images/icon_direct.png b/app/javascript/images/icon_direct.png new file mode 100644 index 000000000..71e898a98 Binary files /dev/null and b/app/javascript/images/icon_direct.png differ diff --git a/app/javascript/images/icon_docs.png b/app/javascript/images/icon_docs.png new file mode 100644 index 000000000..6af1c8268 Binary files /dev/null and b/app/javascript/images/icon_docs.png differ diff --git a/app/javascript/images/icon_domain_blocks.png b/app/javascript/images/icon_domain_blocks.png new file mode 100644 index 000000000..ed3750485 Binary files /dev/null and b/app/javascript/images/icon_domain_blocks.png differ diff --git a/app/javascript/images/icon_follow_requests.png b/app/javascript/images/icon_follow_requests.png new file mode 100644 index 000000000..4123e2a69 Binary files /dev/null and b/app/javascript/images/icon_follow_requests.png differ diff --git a/app/javascript/images/icon_home.png b/app/javascript/images/icon_home.png new file mode 100644 index 000000000..66ce779c0 Binary files /dev/null and b/app/javascript/images/icon_home.png differ diff --git a/app/javascript/images/icon_invite.png b/app/javascript/images/icon_invite.png new file mode 100644 index 000000000..21156ec96 Binary files /dev/null and b/app/javascript/images/icon_invite.png differ diff --git a/app/javascript/images/icon_keyboard_shortcuts.png b/app/javascript/images/icon_keyboard_shortcuts.png new file mode 100644 index 000000000..d66f3939e Binary files /dev/null and b/app/javascript/images/icon_keyboard_shortcuts.png differ diff --git a/app/javascript/images/icon_likes.png b/app/javascript/images/icon_likes.png new file mode 100644 index 000000000..17d7a9c59 Binary files /dev/null and b/app/javascript/images/icon_likes.png differ diff --git a/app/javascript/images/icon_lists.png b/app/javascript/images/icon_lists.png new file mode 100644 index 000000000..3828946e8 Binary files /dev/null and b/app/javascript/images/icon_lists.png differ diff --git a/app/javascript/images/icon_local.png b/app/javascript/images/icon_local.png new file mode 100644 index 000000000..5f82df395 Binary files /dev/null and b/app/javascript/images/icon_local.png differ diff --git a/app/javascript/images/icon_logout.png b/app/javascript/images/icon_logout.png new file mode 100644 index 000000000..7ff806f58 Binary files /dev/null and b/app/javascript/images/icon_logout.png differ diff --git a/app/javascript/images/icon_mutes.png b/app/javascript/images/icon_mutes.png new file mode 100644 index 000000000..c2225e966 Binary files /dev/null and b/app/javascript/images/icon_mutes.png differ diff --git a/app/javascript/images/icon_notifications.png b/app/javascript/images/icon_notifications.png new file mode 100644 index 000000000..0aaf5e68d Binary files /dev/null and b/app/javascript/images/icon_notifications.png differ diff --git a/app/javascript/images/icon_pin.png b/app/javascript/images/icon_pin.png new file mode 100644 index 000000000..2329d8c54 Binary files /dev/null and b/app/javascript/images/icon_pin.png differ diff --git a/app/javascript/images/icon_public.png b/app/javascript/images/icon_public.png new file mode 100644 index 000000000..3c09460db Binary files /dev/null and b/app/javascript/images/icon_public.png differ diff --git a/app/javascript/images/icon_settings.png b/app/javascript/images/icon_settings.png new file mode 100644 index 000000000..07f5c4519 Binary files /dev/null and b/app/javascript/images/icon_settings.png differ diff --git a/app/javascript/images/icon_tos.png b/app/javascript/images/icon_tos.png new file mode 100644 index 000000000..d0dbb13f7 Binary files /dev/null and b/app/javascript/images/icon_tos.png differ diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png index 5c993dbee..210833d34 100644 Binary files a/app/javascript/images/mailer/icon_cached.png and b/app/javascript/images/mailer/icon_cached.png differ diff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png index f7f95a0e8..0d2ef0cb8 100644 Binary files a/app/javascript/images/mailer/icon_done.png and b/app/javascript/images/mailer/icon_done.png differ diff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png index 13967009a..aae9d2bb9 100644 Binary files a/app/javascript/images/mailer/icon_email.png and b/app/javascript/images/mailer/icon_email.png differ diff --git a/app/javascript/images/mailer/icon_file_download.png b/app/javascript/images/mailer/icon_file_download.png index 3f7ac429b..8a6a8673b 100644 Binary files a/app/javascript/images/mailer/icon_file_download.png and b/app/javascript/images/mailer/icon_file_download.png differ diff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png index 8c212b7ee..895b57d0a 100644 Binary files a/app/javascript/images/mailer/icon_grade.png and b/app/javascript/images/mailer/icon_grade.png differ diff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png index c854c3bdb..9f62eadc2 100644 Binary files a/app/javascript/images/mailer/icon_lock_open.png and b/app/javascript/images/mailer/icon_lock_open.png differ diff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png index 6290a42ae..3453060ae 100644 Binary files a/app/javascript/images/mailer/icon_person_add.png and b/app/javascript/images/mailer/icon_person_add.png differ diff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png index a70093356..8bce4955c 100644 Binary files a/app/javascript/images/mailer/icon_reply.png and b/app/javascript/images/mailer/icon_reply.png differ diff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png index 82d981fc6..1c4f33287 100644 Binary files a/app/javascript/images/mailer/logo_full.png and b/app/javascript/images/mailer/logo_full.png differ diff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png index 6dbcc2e8d..8fda4f67f 100644 Binary files a/app/javascript/images/mailer/logo_transparent.png and b/app/javascript/images/mailer/logo_transparent.png differ diff --git a/app/javascript/images/reticle.png b/app/javascript/images/reticle.png index 41a5d1c3a..998994f5c 100644 Binary files a/app/javascript/images/reticle.png and b/app/javascript/images/reticle.png differ diff --git a/app/javascript/images/start.png b/app/javascript/images/start.png new file mode 100644 index 000000000..7843455b6 Binary files /dev/null and b/app/javascript/images/start.png differ diff --git a/app/javascript/images/void.png b/app/javascript/images/void.png index d73066688..10b274f18 100644 Binary files a/app/javascript/images/void.png and b/app/javascript/images/void.png differ diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss new file mode 100644 index 000000000..b0b308920 --- /dev/null +++ b/app/javascript/styles/win95.scss @@ -0,0 +1,2086 @@ +$win95-bg: #bfbfbf; +$win95-dark-grey: #404040; +$win95-mid-grey: #808080; +$win95-window-header: #00007f; +$win95-tooltip-yellow: #ffffcc; +$win95-blue: blue; +$win95-cyan: #008080; + +$ui-base-lighter-color: $win95-dark-grey; +$ui-highlight-color: $win95-window-header; + +@mixin win95-border-outset() { + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; +} + +@mixin win95-outset() { + box-shadow: inset -1px -1px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -2px -2px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; +} + +@mixin win95-border-inset() { + border-left: 2px solid #404040; + border-top: 2px solid #404040; + border-right: 2px solid #efefef; + border-bottom: 2px solid #efefef; + border-radius:0px; +} + +@mixin win95-border-slight-inset() { + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; +} + +@mixin win95-inset() { + box-shadow: inset 1px 1px 0px #000000, + inset -1px -1px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -2px -2px 0px #dfdfdf; + border-width:0px; + border-radius:0px; +} + + +@mixin win95-tab() { + box-shadow: inset -1px 0px 0px #000000, + inset 1px 0px 0px #ffffff, + inset 0px 1px 0px #ffffff, + inset 0px 2px 0px #dfdfdf, + inset -2px 0px 0px #808080, + inset 2px 0px 0px #dfdfdf; + border-radius:0px; + border-top-left-radius: 1px; + border-top-right-radius: 1px; +} + +@mixin win95-reset() { + box-shadow: unset; +} + +@font-face { + font-family:"premillenium"; + src: url('../fonts/premillenium/MSSansSerif.ttf') format('truetype'); +} + +@import 'cybre-base'; + + +body { + font-size:13px; + font-family: "MS Sans Serif", "premillenium", sans-serif; + color:black; +} + +.ui, +.ui .columns-area, +body.admin { + background: #008080; +} + +.loading-bar { + height:5px; + background-color: #000080; +} + +.tabs-bar { + background: $win95-bg; + @include win95-outset() + height: 30px; +} + +.tabs-bar__link { + color:black; + border:2px outset $win95-bg; + border-top-width: 1px; + border-left-width: 1px; + margin:2px; + padding:3px; +} + +.tabs-bar__link.active { + @include win95-inset(); + color:black; +} + +.tabs-bar__link:last-child::before { + content:"Start"; + color:black; + font-weight:bold; + font-size:15px; + width:80%; + display:block; + position:absolute; + right:0px; +} + +.tabs-bar__link:last-child { + position:relative; + flex-basis:60px !important; + font-size:0px; + color:$win95-bg; + + background-image: url("../images/start.png"); + background-repeat:no-repeat; + background-position:8%; + background-clip:padding-box; + background-size:auto 50%; +} + +.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; +} + +.privacy-dropdown__dropdown { + z-index:2; +} + +.column { + max-height:100vh; +} + +.column > .scrollable { + background: $win95-bg; + @include win95-border-outset() + border-top-width:0px; +} + +.column-header__wrapper { + color:white; + font-weight:bold; + background:#7f7f7f; +} + +.column-header { + padding:0px; + font-size:13px; + background:#7f7f7f; + @include win95-border-outset() + border-bottom-width:0px; + color:white; + font-weight:bold; + align-items:baseline; + min-height: 24px; +} + +.column-header > button { + padding: 0px; + min-height: 22px; +} + +.column-header__wrapper.active { + background:$win95-window-header; +} + +.column-header__wrapper.active::before { + display:none; +} +.column-header.active { + box-shadow:unset; + background:$win95-window-header; +} + +.column-header.active .column-header__icon { + color:white; +} + +.column-header__buttons { + max-height: 20px; + margin: 2px; + margin-left: -2px; +} + +.column-header__buttons button { + margin-left: 2px; +} + +.column-header__button { + background: $win95-bg; + color: black; + @include win95-outset() + + line-height:0px; + font-size:14px; + padding:0px 4px; + + &:hover { + color: black; + } +} + +.column-header__button.active, .column-header__button.active:hover { + @include win95-inset(); + background-color:#7f7f7f; +} + +// selectivity -- needs to override .column-header > button +.column-header .column-header__back-button { + background: $win95-bg; + color: black; + padding:2px; + padding-right: 4px; + max-height: 20px; + min-height: unset; + margin: 2px; + @include win95-outset() + font-size: 13px; + line-height: 17px; + font-weight:bold; +} + +.column-header__buttons .column-header__back-button { + margin: 0; +} + +.column-back-button { + background:$win95-bg; + color:black; + @include win95-outset() + font-size:13px; + font-weight:bold; + + padding: 2px; + height: 26px; +} + +.column-back-button--slim-button { + position:absolute; + top:-22px; + right:4px; + max-height:20px; + padding: 1px 6px 0 2px; + box-sizing: border-box; +} + +.column-back-button__icon { + font-size:11px; + margin-top:-3px; +} + +.column-header__collapsible { + border-left:2px outset $win95-bg; + border-right:2px outset $win95-bg; +} + +.column-header__collapsible-inner { + background:$win95-bg; + color:black; +} + +.column-header__collapsible__extra { + color:black; +} + +.column-header__collapsible__extra div[role="group"] { + border: 2px groove #eee; + margin-bottom: 11px; + padding: 4px; +} + +.column-inline-form { + background-color: $win95-bg; + @include win95-border-outset(); + border-bottom-width:0px; + border-top-width:0px; + + align-items: baseline; +} + +.column-inline-form .icon-button { + font-size: 14px!important; + line-height: 17px!important; +} + +.column-inline-form .setting-text { + line-height: 17px; + padding-left: 4px; +} + +.column-settings__section { + color:black; + font-weight:bold; + font-size:11px; +} + +[role="group"] .column-settings__section { + display:inline-block; + background-color:$win95-bg; + position:relative; + + top: -14px; + top: calc(-1em - 0.5ex); + left: 4px; + + padding: 0px 4px; + margin-bottom: 0px; +} + +.setting-meta__label, .setting-toggle__label { + color:black; + font-weight:normal; +} + +.setting-meta__label span:before { + content:"("; +} +.setting-meta__label span:after { + content:")"; +} + +.setting-toggle { + line-height:13px; +} + +.react-toggle .react-toggle-track { + border-radius:0px; + background-color:white; + @include win95-border-inset(); + + width:12px; + height:12px; +} + +.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color:white; +} + +.react-toggle .react-toggle-track-check { + left:2px; + transition:unset; +} + +.react-toggle .react-toggle-track-check svg path { + fill: black; +} + +.react-toggle .react-toggle-track-x { + display:none; +} + +.react-toggle .react-toggle-thumb { + border-radius:0px; + display:none; +} + +.text-btn { + background-color:$win95-bg; + @include win95-outset() + padding:4px; +} + +.text-btn:hover { + text-decoration:none; + color:black; +} + +.text-btn:active { + @include win95-inset(); +} + +.setting-text { + color:black; + background-color:white; + @include win95-inset(); + font-size:13px; + padding:2px; +} + +.setting-text:active, .setting-text:focus, +.setting-text.light:active, .setting-text.light:focus { + color:black; + border-bottom:2px inset $win95-bg; +} + +.column-header__setting-arrows .column-header__setting-btn { + padding:3px 10px; +} + +.column-header__setting-arrows .column-header__setting-btn:last-child { + padding:3px 10px; +} + +.missing-indicator { + background-color:$win95-bg; + color:black; + @include win95-outset() +} + +.missing-indicator > div { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC') + no-repeat; + background-position:center center; +} + +.empty-column-indicator, +.error-column { + background: $win95-bg; + color: black; +} + +.status__wrapper { + border: 2px groove $win95-bg; + margin:4px; +} + +.status { + @include win95-border-slight-inset(); + background-color:white; + margin:4px; + padding-bottom:40px; + margin-bottom:8px; +} + +.status.status-direct { + background-color:$win95-bg; +} + +.status__content { + font-size:13px; +} + +.status.light .status__relative-time, +.status.light .display-name span { + color: #7f7f7f; +} + +.status__action-bar { + box-sizing:border-box; + position:absolute; + bottom:-1px; + left:-1px; + background:$win95-bg; + width:calc(100% + 2px); + padding-left:10px; + padding: 4px 2px; + padding-bottom:4px; + border-bottom:2px groove $win95-bg; + border-top:1px outset $win95-bg; + text-align: right; +} + +.status__wrapper .status__action-bar { + border-bottom-width:0px; +} + +.status__action-bar-button { + float:right; +} + +.status__action-bar-dropdown { + margin-left:auto; + margin-right:10px; + + .icon-button { + min-width:28px; + } +} +.status.light .status__content a { + color:blue; +} + +.focusable:focus { + background: $win95-bg; + .detailed-status__action-bar { + background: $win95-bg; + } + + .status, .detailed-status { + background: white; + outline:2px dotted $win95-mid-grey; + } +} + +.dropdown__trigger.icon-button { + padding-right:6px; +} + +.detailed-status__action-bar-dropdown .icon-button { + min-width:28px; +} + +.detailed-status { + background:white; + background-clip:padding-box; + margin:4px; + border: 2px groove $win95-bg; + padding:4px; +} + +.detailed-status__display-name { + color:#7f7f7f; +} + +.detailed-status__display-name strong { + color:black; + font-weight:bold; +} +.account__avatar, +.account__avatar-overlay-base, +.account__header__avatar, +.account__avatar-overlay-overlay { + @include win95-border-slight-inset(); + clip-path:none; + filter: saturate(1.8) brightness(1.1); +} + +.detailed-status__action-bar { + background-color:$win95-bg; + border:0px; + border-bottom:2px groove $win95-bg; + margin-bottom:8px; + justify-items:left; + padding-left:4px; +} + +.icon-button { + background:$win95-bg; + @include win95-border-outset() + padding:0px 0px 0px 0px; + margin-right:4px; + + color:#3f3f3f; + &.inverted, &:hover, &.inverted:hover, &:active, &:focus { + color:#3f3f3f; + } +} + +.icon-button:active { + @include win95-border-inset(); +} + +.status__action-bar > .icon-button { + padding:0px 15px 0px 0px; + min-width:25px; +} + +.icon-button.star-icon, +.icon-button.star-icon:active { + background:transparent; + border:none; +} + +.icon-button.star-icon.active { + color: $gold-star; + &:active, &:hover, &:focus { + color: $gold-star; + } +} + +.icon-button.star-icon > i { + background:$win95-bg; + @include win95-border-outset() + padding-bottom:3px; +} + +.icon-button.star-icon:active > i { + @include win95-border-inset(); +} + +.text-icon-button { + color:$win95-dark-grey; +} + +.detailed-status__action-bar-dropdown { + margin-left:auto; + justify-content:right; + padding-right:16px; +} + +.detailed-status__button { + flex:0 0 auto; +} + +.detailed-status__button .icon-button { + padding-left:2px; + padding-right:25px; +} + +.status-card { + border-radius:0px; + background:white; + border: 1px solid black; + color:black; +} + +.status-card:hover { + background-color:white; +} + +.status-card__title { + color:blue; + text-decoration:underline; + font-weight:bold; +} + +.load-more { + width:auto; + margin:5px auto; + background: $win95-bg; + @include win95-outset(); + color:black; + padding: 2px 5px; + + &:hover { + background: $win95-bg; + color:black; + } +} + +.status-card__description { + color:black; +} + +.account__display-name strong, .status__display-name strong { + color:black; + font-weight:bold; +} + +.account .account__display-name { + color:black; +} + +.account { + border-bottom: none; +} + +.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { + background:$win95-bg; + @include win95-outset() +} + +.reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover { + background:$win95-bg; +} + +.reply-indicator__content .status__content__spoiler-link:active, .status__content .status__content__spoiler-link:active { + @include win95-inset(); +} + +.reply-indicator__content a, .status__content a { + color:blue; +} + +.notification { + border: 2px groove $win95-bg; + margin:4px; +} + +.notification__message { + color:black; + font-size:13px; +} + +.notification__display-name { + font-weight:bold; +} + + +.drawer__header { + background: $win95-bg; + @include win95-border-outset() + justify-content:left; + margin-bottom:0px; + padding-bottom:2px; + border-bottom:2px groove $win95-bg; +} + +.drawer__tab { + color:black; + @include win95-outset() + padding:5px; + margin:2px; + flex: 0 0 auto; +} + +.drawer__tab:first-child::before { + content:"Start"; + color:black; + font-weight:bold; + font-size:15px; + width:80%; + display:block; + position:absolute; + right:0px; + +} + +.drawer__tab:first-child { + position:relative; + padding:5px 15px; + width:40px; + font-size:0px; + color:$win95-bg; + + background-image: url("../images/start.png"); + background-repeat:no-repeat; + background-position:8%; + background-clip:padding-box; + background-size:auto 50%; +} + +.drawer__header a:hover { + background-color:transparent; +} + +.drawer__header a:first-child:hover { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII="); + background-repeat:no-repeat; + background-position:8%; + background-clip:padding-box; + background-size:auto 50%; + transition:unset; +} + +.drawer__tab:first-child { + +} + +.search { + background:$win95-bg; + padding-top:2px; + padding:2px; + border:2px outset $win95-bg; + border-top-width:0px; + border-bottom: 2px groove $win95-bg; + margin-bottom:0px; +} + +.search input { + background-color:white; + color:black; + @include win95-border-slight-inset(); +} + +.search__input:focus { + background-color:white; +} + +.search-popout { + box-shadow: unset; + color:black; + border-radius:0px; + background-color:$win95-tooltip-yellow; + border:1px solid black; + + h4 { + color:black; + text-transform: none; + font-weight:bold; + } +} + +.search-results__header { + background-color: $win95-bg; + color:black; + border-bottom:2px groove $win95-bg; +} + +.search-results__hashtag { + color:blue; +} + +.search-results__section h5:before { + display: none; +} + +.search-results__section h5 { + background: #bfbfbf; + span { + color: black; + padding: 0px 2px; + } +} + +.search-results__section { + border: 3px groove white; + margin: 11px 6px 9px 3px; +} + +.search-results__section .account:hover, +.search-results__section .account:hover .account__display-name, +.search-results__section .account:hover .account__display-name strong, +.search-results__section .search-results__hashtag:hover { + background-color:$win95-window-header; + color:white; +} + +.search__icon .fa { + color:#808080; + + &.active { + opacity:1.0; + } + + &:hover { + color: #808080; + } +} + +.trends__item__name a, +.trends__item__current { + color: black; +} + +.drawer__inner, +.drawer__inner.darker { + background-color:$win95-bg; + border: 2px outset $win95-bg; + border-top-width:0px; +} + +.navigation-bar { + color:black; +} + +.navigation-bar strong { + color:black; + font-weight:bold; +} + +.compose-form .autosuggest-textarea__textarea, +.compose-form .spoiler-input__input { + border-radius:0px; + @include win95-border-slight-inset(); +} + +.compose-form .autosuggest-textarea__textarea { + border-bottom:0px; +} + +.compose-form__uploads-wrapper { + border-radius:0px; + border-bottom:1px inset $win95-bg; + border-top-width:0px; +} + +.compose-form__upload-wrapper { + border-left:1px inset $win95-bg; + 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; +} + +.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 +.privacy-dropdown__value { + background: $win95-bg; + box-shadow:unset; +} + +.privacy-dropdown__option.active, .privacy-dropdown__option:hover, +.privacy-dropdown__option.active:hover { + background:$win95-window-header; +} + +.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() + background: $win95-bg; +} + +.privacy-dropdown__option__content { + color:black; +} + +.privacy-dropdown__option__content strong { + font-weight:bold; +} + +.compose-form__warning::before { + content:"Tip:"; + font-weight:bold; + display:block; + position:absolute; + top:-10px; + background-color:$win95-bg; + font-size:11px; + padding: 0px 5px; +} + +.compose-form__warning { + position:relative; + box-shadow:unset; + border:2px groove $win95-bg; + background-color:$win95-bg; + color:black; +} + +.compose-form__warning a { + color:blue; +} + +.compose-form__warning strong { + color:black; + text-decoration:underline; +} + +.compose-form__buttons button.active:last-child { + @include win95-border-inset(); + background: #dfdfdf; + color:#7f7f7f; +} + +.compose-form__upload-thumbnail { + border-radius:0px; + border:2px groove $win95-bg; + background-color:$win95-bg; + padding:2px; + box-sizing:border-box; +} + +.compose-form__upload-thumbnail .icon-button { + max-width:20px; + max-height:20px; + line-height:10px !important; +} + +.compose-form__upload-thumbnail .icon-button::before { + content:"X"; + font-size:13px; + font-weight:bold; + color:black; +} + +.compose-form__upload-thumbnail .icon-button i { + display:none; +} + +.emoji-picker-dropdown__menu { + z-index:2; +} + +.emoji-dialog.with-search { + box-shadow:unset; + border-radius:0px; + background-color:$win95-bg; + border:1px solid black; + box-sizing:content-box; + +} + +.emoji-dialog .emoji-search { + color:black; + background-color:white; + border-radius:0px; + @include win95-inset(); +} + +.emoji-dialog .emoji-search-wrapper { + border-bottom:2px groove $win95-bg; +} + +.emoji-dialog .emoji-category-title { + color:black; + font-weight:bold; +} + +.reply-indicator { + background-color:$win95-bg; + border-radius:3px; + border:2px groove $win95-bg; +} + +.button { + background-color:$win95-bg; + @include win95-outset() + border-radius:0px; + color:black; + font-weight:bold; + + &:hover, &:focus, &:disabled { + background-color:$win95-bg; + } + + &:active { + @include win95-inset(); + } + + &:disabled { + color: #808080; + text-shadow: 1px 1px 0px #efefef; + + &:active { + @include win95-outset(); + } + } + +} + +.column-link { + background-color:transparent; + color:black; + &:hover { + background-color: $win95-window-header; + color:white; + } +} + +.column-link__badge { + background-image: url('../images/alert_badge.png'); + background-repeat: no-repeat; + background-size:contain; + background-color:transparent; + border-radius:0; + box-sizing: border-box; + width: 24px; + height:24px; + padding-top:4px; + padding-left:0px; + padding-right:1px; + text-align:center; + position:relative; + top:2px; +} + +.column-link:hover .column-link__badge { + color:black; +} + +.column-subheading { + background-color:transparent; + color:black; +} + +.column { + overflow-y:auto; +} + +.getting-started__wrapper { + position:relative; + top:-60px; + padding-top:0px; + z-index:10; + + box-shadow: inset -1px 0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -2px 0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; + + background-color:$win95-bg; + + border-top:60px solid $win95-cyan; + border-bottom: 2px groove $win95-bg; + + height: unset !important; + + .navigation-bar { + padding-left: 45px; + } + + .column-subheading { + font-size:0px; + margin:0px; + padding:0px; + background-color: transparent; + color:black; + border-bottom: 2px groove $win95-bg; + text-transform: none; + } + + .column-link { + background-size:32px 32px; + background-repeat:no-repeat; + background-position: 36px 50%; + padding-left:45px; + + &:hover { + background-size:32px 32px; + background-repeat:no-repeat; + background-position: 36px 50%; + } + + i { + font-size: 0px; + width:32px; + } + } +} + +@media screen and (min-width: 360px) { + .getting-started__wrapper{ + margin-bottom:0px; + } +} + + +.getting-started__wrapper + .flex-spacer { + display:none; +} + +.column-link[href="/web/timelines/home"] { + background-image: url("../images/icon_home.png"); + &:hover { background-image: url("../images/icon_home.png"); } +} +.column-link[href="/web/notifications"] { + background-image: url("../images/icon_notifications.png"); + &:hover { background-image: url("../images/icon_notifications.png"); } +} +.column-link[href="/web/timelines/public"] { + background-image: url("../images/icon_public.png"); + &:hover { background-image: url("../images/icon_public.png"); } +} +.column-link[href="/web/timelines/public/local"] { + background-image: url("../images/icon_local.png"); + &:hover { background-image: url("../images/icon_local.png"); } +} +.column-link[href="/web/timelines/direct"] { + background-image: url("../images/icon_direct.png"); + &:hover { background-image: url("../images/icon_direct.png"); } +} +.column-link[href="/web/pinned"] { + background-image: url("../images/icon_pin.png"); + &:hover { background-image: url("../images/icon_pin.png"); } +} +.column-link[href="/web/favourites"] { + 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/blocks"] { + background-image: url("../images/icon_blocks.png"); + &:hover { background-image: url("../images/icon_blocks.png"); } +} +.column-link[href="/web/domain_blocks"] { + background-image: url("../images/icon_domain_blocks.png"); + &:hover { background-image: url("../images/icon_domain_blocks.png"); } +} +.column-link[href="/web/mutes"] { + background-image: url("../images/icon_mutes.png"); + &:hover { background-image: url("../images/icon_mutes.png"); } +} +.column-link[href="/settings/preferences"] { + background-image: url("../images/icon_settings.png"); + &:hover { background-image: url("../images/icon_settings.png"); } +} + +.getting-started__footer ul li a[href="/web/keyboard-shortcuts"] { + background-image: url("../images/icon_keyboard_shortcuts.png"); + &:hover { background-image: url("../images/icon_keyboard_shortcuts.png"); } +} +.getting-started__footer ul li a[href="/invites"] { + background-image: url("../images/icon_invite.png"); + &:hover { background-image: url("../images/icon_invite.png"); } +} +.getting-started__footer ul li a[href="/terms"] { + background-image: url("../images/icon_tos.png"); + &:hover { background-image: url("../images/icon_tos.png"); } +} +.getting-started__footer ul li a[href="https://github.com/tootsuite/documentation#documentation"] { + background-image: url("../images/icon_docs.png"); + &:hover { background-image: url("../images/icon_docs.png"); } +} +.getting-started__footer ul li a[href="/about/more"] { + background-image: url("../images/icon_about.png"); + &:hover { background-image: url("../images/icon_about.png"); } +} +.getting-started__footer ul li a[href="/auth/sign_out"] { + background-image: url("../images/icon_logout.png"); + &:hover { background-image: url("../images/icon_logout.png"); } +} + +.getting-started__footer { + background-color: $win95-bg; + padding:0px; + position:relative; + top:-62px; + + @include win95-outset(); + + p { + margin-left: 45px; + } + + ul { + display:block; + li { + cursor:pointer; + display:block; + font-size:0px; + padding:0px; + line-height:0; + a { + padding:15px; + padding-left:77px; + line-height:1em; + font-size:16px; + display:block; + color:black; + background-size:32px 32px; + background-repeat:no-repeat; + background-position: 36px 50%; + &:hover { + text-decoration:none; + } + } + + &:hover { + background-color: $win95-window-header; + a { + color:white; + } + } + } + } +} + +.getting-started__wrapper::before { + content: "Start"; + display:block; + color:black; + font-weight:bold; + font-size:15px; + position:absolute; + top:-32px; + left:0px; + padding:5px 15px; + width:50px; + font-size:16px; + padding-left:25px; + background-color:$win95-bg; + z-index:12; + + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII="); + background-repeat:no-repeat; + background-position:8%; + background-clip:padding-box; + background-size:auto 50%; + + @include win95-border-inset(); +} + +.getting-started__footer::after { + content:"Mastodon 95"; + font-weight:bold; + font-size:23px; + color:white; + line-height:30px; + padding-left:20px; + padding-right:40px; + + left:0px; + box-sizing:border-box; + bottom:-32px; + display:block; + position:absolute; + background-color:#7f7f7f; + width:624.5px; + height:32px; + + z-index:11; + + border-left: 2px solid #404040; + border-top: 2px solid #efefef; + border-right: 2px solid #efefef; + border-radius:0px; + + -ms-transform: rotate(-90deg); + + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + transform-origin:top left; +} + +.column .static-content.getting-started { + display:none; +} + +.keyboard-shortcuts kbd { + background-color: $win95-bg; +} + +.account__header { + background-color:#7f7f7f; +} + +.account__header .account__header__content { + color:white; +} + +.account__header .account__header__fields { + border-left: 1px solid black; + border-top: 1px solid black; + + dt { + background-color:$win95-bg; + color:black; + border-top: 1px solid #ffffff; + border-bottom: 1px solid $win95-mid-grey; + border-right: 1px solid $win95-mid-grey; + } + dd { + background-color:white; + border: 1px solid $win95-bg; + color:black; + } + dd,dt { + padding: 5px 8px; + } +} + +.account-authorize__wrapper { + border: 2px groove $win95-bg; + margin: 2px; + padding:2px; +} + +.domain .domain__domain-name strong { + color: black; +} + +.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; +} + +.account__action-bar__tab strong { + color:black; +} + +.account__action-bar { + border: unset; +} + +.account__action-bar__tab { + border: 1px outset $win95-bg; +} + +.account__action-bar__tab:active { + @include win95-inset(); +} + +.account__section-headline { + background: $win95-bg; + margin-top: 5px; + + & > a { + @include win95-tab(); + color: black; + padding: 5px; + + &.active { + background: $win95-dark-grey; + @include win95-inset(); + color: white; + + &:before, &:after { + display: none; + } + } + } +} + +.dropdown--active .dropdown__content > ul, +.dropdown-menu { + background:$win95-tooltip-yellow; + border-radius:0px; + border:1px solid black; + box-shadow:unset; + margin-top: 6px; +} + +.dropdown-menu a { + background-color:transparent; +} + +.dropdown-menu__arrow { + &.bottom { + border-bottom-color: $win95-tooltip-yellow; + } + + &.top { + border-top-color: $win95-tooltip-yellow; + } + + &:before { + position: relative; + border: 0 solid transparent; + display: block; + content: ''; + left: -8px; + z-index: -1; + } + + &.bottom::before { + border-bottom-color: black; + border-width: 0 8px 6px; + bottom: 1px; + } + + &.top::before { + border-top-color: black; + border-width: 6px 8px 0; + top: -5px; + } +} + +.dropdown-menu { + margin-top: 6px; +} + +.dropdown--active::after { + display:none; +} + +.dropdown--active .icon-button { + color:black; + @include win95-inset(); +} + +.dropdown--active .dropdown__content > ul > li > a { + background:transparent; +} + +.dropdown--active .dropdown__content > ul > li > a:hover { + background:transparent; + color:black; + text-decoration:underline; +} + +.dropdown__sep, +.dropdown-menu__separator +{ + border-color:#7f7f7f; +} + +.detailed-status__action-bar-dropdown .dropdown--active .dropdown__content.dropdown__left { + left: unset; +} + +.dropdown > .icon-button, .detailed-status__action-bar .icon-button, +.status__action-bar .icon-button, .star-icon i { + /* i don't know what's going on with the inline + styles someone should look at the react code */ + height: 25px !important; + width: 28px !important; + box-sizing: border-box; +} + +.icon-button { + height: auto!important; + width: auto!important; +} + +.status__action-bar-dropdown .icon-button { + position: relative; + top: -1px; +} + +.fa-user-plus, .fa-user-times { + padding: 2px 0px 2px 1px; +} + +.fa-ellipsis-h { + padding-top: 3px; +} + +.status__action-bar-button .fa-floppy-o { + padding-top: 2px; +} + +.notification .status__action-bar { + border-bottom: none; +} + +.notification .status { + margin-bottom: 4px; +} + +.status__wrapper .status { + margin-bottom: 3px; +} + +.status__wrapper { + margin-bottom: 8px; +} + +.status__prepend { + color: black; + font-size: 13px; +} + +.icon-button .fa-retweet { + position: relative; + top: -1px; +} + +.embed-modal, .error-modal, .onboarding-modal, +.actions-modal, .boost-modal, .confirmation-modal, .report-modal { + @include win95-outset() + background:$win95-bg; +} + +.actions-modal::before, +.boost-modal::before, +.confirmation-modal::before, +.report-modal::before { + content: "Confirmation"; + display:block; + background:$win95-window-header; + color:white; + font-weight:bold; + padding-left:2px; +} + +.boost-modal::before { + content: "Boost confirmation"; +} + +.boost-modal__action-bar > div > span:before { + content: "Tip: "; + font-weight:bold; +} + +.boost-modal__action-bar, .confirmation-modal__action-bar, .report-modal__action-bar { + background:$win95-bg; + margin-top:-15px; +} + +.embed-modal h4, .error-modal h4, .onboarding-modal h4 { + background:$win95-window-header; + color:white; + font-weight:bold; + padding:2px; + font-size:13px; + text-align:left; +} + +.media-modal .media-modal__close { + font-size: 14px!important; + line-height: 17px!important; + margin-right: 4vw; + margin-top: 4vh; +} + +.confirmation-modal__action-bar { + .confirmation-modal__cancel-button { + color:black; + + &:active, + &:focus, + &:hover { + color:black; + } + + &:active { + @include win95-inset(); + } + } +} + +.embed-modal .embed-modal__container .embed-modal__html, +.embed-modal .embed-modal__container .embed-modal__html:focus { + background:white; + color:black; + @include win95-inset(); +} + +.report-modal__target .media-modal__close { + top: 3px; + right: 0px; + font-size: 12px!important; + line-height: 13px!important; +} + +.report-modal__comment p { + font-size: 12px; + margin-bottom: 1em; + padding-left: 3px; +} + +.report-modal__comment .setting-text.light { + border-radius: 0; +} + +.report-modal__container { + margin-right: 2px; +} + +.report-modal::before { + height: 22px; + line-height: 23px; +} + +.status-check-box__status .media-gallery { + margin: unset; +} + +.modal-root__overlay, +.account__header > div { + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFnpUWHRUaXRsZQAACJnLzU9JzElKBwALgwLXaCRlPwAAABd6VFh0QXV0aG9yAAAImUvOKMrPS8wBAAuaAugOwWPyAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII='); +} + + +.admin-wrapper::before { + position:absolute; + top:0px; + content:"Control Panel"; + color:white; + background-color:$win95-window-header; + font-size:13px; + font-weight:bold; + width:calc(100%); + margin: 2px; + display:block; + padding:2px; + padding-left:22px; + box-sizing:border-box; +} + +.admin-wrapper { + position:relative; + background: $win95-bg; + @include win95-outset() + width:70vw; + height:80vh; + margin:10vh auto; + color: black; + padding-top:24px; + flex-direction:column; + overflow:hidden; +} + +@media screen and (max-width: 1120px) { + .admin-wrapper { + width:90vw; + height:95vh; + margin:2.5vh auto; + } +} + +@media screen and (max-width: 740px) { + .admin-wrapper { + width:100vw; + height:95vh; + height:calc(100vh - 24px); + margin:0px 0px 0px 0px; + } +} + +.admin-wrapper .sidebar-wrapper { + position:static; + height:auto; + flex: 0 0 auto; + margin:2px; +} + +.admin-wrapper .content-wrapper { + flex: 1 1 auto; + width:calc(100% - 20px); + @include win95-border-outset() + position:relative; + margin-left:10px; + margin-right:10px; + margin-bottom:40px; + box-sizing:border-box; +} + +.admin-wrapper .content { + background-color: $win95-bg; + width: 100%; + max-width:100%; + min-height:100%; + box-sizing:border-box; + position:relative; +} +.admin-wrapper .content h4 { + color: black; +} + +.admin-wrapper .sidebar { + position:static; + background: $win95-bg; + color:black; + width: 100%; + height:auto; + padding-bottom: 20px; +} + +.admin-wrapper .sidebar .logo { + position:absolute; + top:2px; + left:4px; + width:18px; + height:18px; + margin:0px; +} + +.admin-wrapper .sidebar > ul { + background: $win95-bg; + margin:0px; + margin-left:8px; + color:black; + + & > li { + display:inline-block; + + &#settings, + &#admin { + padding:2px; + border: 0px solid transparent; + } + + &#logout { + position:absolute; + @include win95-outset(); + right:12px; + bottom:10px; + } + + &#web { + display:inline-block; + @include win95-outset(); + position:absolute; + left: 12px; + bottom: 10px; + } + + & > a { + display:inline-block; + @include win95-tab(); + padding:2px 5px; + margin:0px; + color:black; + vertical-align:baseline; + + &.selected { + background: $win95-bg; + color:black; + padding-top: 4px; + padding-bottom:4px; + } + + &:hover { + background: $win95-bg; + color:black; + } + } + + & > ul { + width:calc(100% - 20px); + background: transparent; + position:absolute; + left: 10px; + top:54px; + z-index:3; + + & > li { + background: $win95-bg; + display: inline-block; + vertical-align:baseline; + + & > a { + background: $win95-bg; + @include win95-tab(); + color:black; + padding:2px 5px; + position:relative; + z-index:3; + + &.selected { + background: $win95-bg; + color:black; + padding-bottom:4px; + padding-top: 4px; + padding-right:7px; + margin-left:-2px; + margin-right:-2px; + position:relative; + z-index:4; + + &:first-child { + margin-left:0px; + } + + &:hover { + background: transparent; + color:black; + } + } + + &:hover { + background: $win95-bg; + color:black; + } + } + } + } + } +} + +@media screen and (max-width: 1520px) { + .admin-wrapper .sidebar > ul > li > ul { + max-width:1000px; + } + + .admin-wrapper .sidebar { + padding-bottom: 45px; + } +} + +@media screen and (max-width: 600px) { + .admin-wrapper .sidebar > ul > li > ul { + max-width:500px; + } + + .admin-wrapper { + .sidebar { + padding:0px; + padding-bottom: 70px; + width: 100%; + height: auto; + } + .content-wrapper { + overflow:auto; + height:80%; + height:calc(100% - 150px); + } + } +} + +.flash-message { + background-color:$win95-tooltip-yellow; + color:black; + border:1px solid black; + border-radius:0px; + position:absolute; + top:0px; + left:0px; + width:100%; +} + +.admin-wrapper table { + background-color: white; + @include win95-border-slight-inset(); +} + +.admin-wrapper .table th, .table td { + background-color:transparent; +} + +.admin-wrapper button.table-action-link, +.admin-wrapper a.table-action-link, +.admin-wrapper button.table-action-link:hover, +.admin-wrapper a.table-action-link:hover, +.admin-wrapper a.name-tag, +.admin-wrapper .name-tag, +.admin-wrapper a.inline-name-tag, +.admin-wrapper .inline-name-tag, +.admin-wrapper .content h2, +.simple_form .input.with_label .label_input > label, +.admin-wrapper .content h6, +.admin-wrapper .content > p, +.admin-wrapper .content .muted-hint, +.simple_form span.hint, +.simple_form h4, +.simple_form .check_boxes .checkbox label, +.simple_form .input.with_label.boolean .label_input > label, +.filters .filter-subset a, +.simple_form .input.radio_buttons .radio label, +a.table-action-link, +a.table-action-link:hover, +.simple_form .input.with_block_label > label, +.simple_form p.hint { + color:black; +} + +.table > tbody > tr:nth-child(2n+1) > td, +.table > tbody > tr:nth-child(2n+1) > th { + background-color:white; +} + +.simple_form input[type=text], +.simple_form input[type=number], +.simple_form input[type=email], +.simple_form input[type=password], +.simple_form textarea { + color:black; + background-color:white; + @include win95-border-slight-inset(); + + &:active, &:focus { + background-color:white; + } +} + +.simple_form button, +.simple_form .button, +.simple_form .block-button +{ + background: $win95-bg; + @include win95-outset() + color:black; + font-weight: normal; + + &:hover { + background: $win95-bg; + } +} + +.simple_form .warning, .table-form .warning +{ + background: $win95-tooltip-yellow; + color:black; + box-shadow: unset; + text-shadow:unset; + border:1px solid black; + + a { + color: blue; + text-decoration:underline; + } +} + +.simple_form button.negative, +.simple_form .button.negative, +.simple_form .block-button.negative +{ + background: $win95-bg; +} + +.filters .filter-subset { + border: 2px groove $win95-bg; + padding:2px; +} + +.filters .filter-subset a::before { + content: ""; + background-color:white; + border-radius:50%; + border:2px solid black; + border-top-color:#7f7f7f; + border-left-color:#7f7f7f; + border-bottom-color:#f5f5f5; + border-right-color:#f5f5f5; + width:12px; + height:12px; + display:inline-block; + vertical-align:middle; + margin-right:2px; +} + +.filters .filter-subset a.selected::before { + background-color:black; + box-shadow: inset 0 0 0 3px white; +} + +.filters .filter-subset a, +.filters .filter-subset a:hover, +.filters .filter-subset a.selected { + color:black; + border-bottom: 0px solid transparent; +} + +.drawer__inner__mastodon { + display: none; +} + +.list-editor h4 { + padding: 2px; + color: white; + font-size: 14px; + font-weight: bold; + background: #00007f; + border-radius: 0; +} + +.list-editor { + @include win95-border-outset(); + box-shadow: unset; +} + +.list-editor .drawer__inner { + @include win95-inset(); + border-radius: 0; +} + +.batch-table__toolbar { + border-radius: 0px; + background-color:white; + border: 1px solid black; +} + +.batch-table__row { + border: 1px solid black; + background-color: white; + + &:hover { + background-color: white; + } +} diff --git a/config/locales/en.yml b/config/locales/en.yml index 501694eac..1cb9d2011 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -366,9 +366,6 @@ en: peers_api_enabled: desc_html: Domain names this instance has encountered in the fediverse title: Publish list of discovered instances - preview_sensitive_media: - desc_html: Link previews on other websites will display a thumbnail even if the media is marked as sensitive - title: Show sensitive media in OpenGraph previews registrations: closed_message: desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags @@ -537,22 +534,6 @@ en: follows: You follow mutes: You mute storage: Media storage - filters: - contexts: - home: Home timeline - notifications: Notifications - public: Public timelines - thread: Conversations - edit: - title: Edit filter - errors: - invalid_context: None or invalid context supplied - invalid_irreversible: Irreversible filtering only works with home or notifications context - index: - delete: Delete - title: Filters - new: - title: Add new filter followers: domain: Domain explanation_html: If you want to ensure the privacy of your statuses, you must be aware of who is following you. Your private statuses are delivered to all instances where you have followers. You may wish to review them, and remove followers if you do not trust your privacy to be respected by the staff or software of those instances. @@ -596,7 +577,6 @@ en: '86400': 1 day expires_in_prompt: Never generate: Generate - invited_by: 'You were invited by:' max_uses: one: 1 use other: "%{count} uses" @@ -679,7 +659,6 @@ en: remote_follow: acct: Enter your username@domain you want to act from missing_resource: Could not find the required redirect URL for your account - no_account_html: Don't have an account? You can sign up here proceed: Proceed to follow prompt: 'You are going to follow:' remote_interaction: @@ -759,7 +738,6 @@ en: disallowed_hashtags: one: 'contained a disallowed hashtag: %{tags}' other: 'contained the disallowed hashtags: %{tags}' - language_detection: Automatically detect language open_in_web: Open in web over_character_limit: character limit of %{max} exceeded pin_errors: @@ -868,6 +846,7 @@ en: contrast: High contrast default: Mastodon mastodon-light: Mastodon (light) + win95: Windows 95 time: formats: default: "%b %d, %Y, %H:%M" diff --git a/config/themes.yml b/config/themes.yml index 9c21c9459..2da392eda 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,3 +1,4 @@ default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss +win95: styles/win95.scss