diff --git a/app/javascript/skins/vanilla/win95/common.scss b/app/javascript/skins/vanilla/win95/common.scss deleted file mode 100644 index 3eb1dd903c..0000000000 --- a/app/javascript/skins/vanilla/win95/common.scss +++ /dev/null @@ -1 +0,0 @@ -@use '@/styles/win95'; diff --git a/app/javascript/skins/vanilla/win95/names.yml b/app/javascript/skins/vanilla/win95/names.yml deleted file mode 100644 index 53b771c5e4..0000000000 --- a/app/javascript/skins/vanilla/win95/names.yml +++ /dev/null @@ -1,8 +0,0 @@ -en: - skins: - vanilla: - win95: Masto95 -cs: - skins: - vanilla: - win95: Windows 95 diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss deleted file mode 100644 index 0a58604de0..0000000000 --- a/app/javascript/styles/win95.scss +++ /dev/null @@ -1,2687 +0,0 @@ -// win95 theme from cybrespace. - -// Modified by kibi! to use webpack package syntax for urls (eg, -// `url(@/images/…)`) for easy importing into skins. - -@use 'mastodon/functions' as *; - -$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; - -@use 'mastodon/variables' as * with ( - $ui-base-lighter-color: $win95-dark-grey, - $ui-highlight-color: $win95-window-header -); - -@use 'application'; - -@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-border-outset-sides-only() { - border-left: 2px solid #efefef; - border-right: 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-outset-no-highlight() { - box-shadow: inset -1px -1px 0px #000000, - inset -2px -2px 0px #808080; - 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-border-groove() { - border-radius: 0px; - border: 2px groove #bfbfbf; -} - -@mixin win95-reset() { - box-shadow: unset; - border: 0px solid transparent; -} - -@font-face { - font-family:"premillenium"; - src: url('@/fonts/premillenium/MSSansSerif.ttf') format('truetype'); -} - -/* borrowed from cybrespace style: wider columns and full column width images */ - -@media screen and (min-width: 1300px) { - .drawer { - width: 17%; /* Not part of the flex fun */ - max-width: 400px; - min-width: 330px; - } - .layout-multiple-columns .column { - flex-grow: 1 !important; - max-width: 400px; - } -} - -/* Don't show outline around statuses if we're in - * mouse or touch mode (rather than keyboard) */ -[data-whatinput="mouse"], [data-whatinput="touch"] { - .status__content:focus, .status:focus, - .status__wrapper:focus, .status__content__text:focus { - outline: none; - } -} - -/* Less emphatic show more */ -.status__content__read-more-button { - font-size: 14px; - color: $dark-text-color; - - .status__prepend-icon { - padding-right: 4px; - } -} - -/* Show a little arrowey thing after the time in a - * status to signal that you can click it to see - * a detailed view */ -.status time:after, -.detailed-status__datetime span:after { - font: normal normal normal 14px/1 FontAwesome; - content: "\00a0\00a0\f08e"; -} - -/* Don't display the elephant mascot (we have our - * own, thanks) */ -.drawer__inner__mastodon { - display: none; -} - -/* Let the compose area/drawer be short, but - * expand if necessary */ -.drawer .drawer__inner { - overflow: visible; - height:inherit; - background-image: none; -} -.drawer__pager { - overflow-y:auto; -} - -/* Put a reasonable background on the single-column compose form */ -.layout-single-column .compose-panel { - background-color: $ui-base-color; - height: auto; - max-height: 100%; - overflow-y: visible; - margin-top: 65px; -} - -/* Better distinguish the search bar */ -.layout-single-column .compose-panel .search { - position:relative; - top: -55px; - margin-bottom: -55px; -} - -/* Use display: none instead of visibility:hidden - * to hide the suggested follows list on non-mobile */ -@media screen and (min-width: 630px) { - .search-results .trends { - display:none; - } -} - -/* Don't display the weird triangles on the modal layout, - * because they look strange on cybrespace themes. */ -.modal-layout__mastodon { - display:none; -} - -/* main win95 style */ - -html { - scrollbar-color: $win95-mid-grey transparent; -} - -body { - font-size:13px; - font-family: "MS Sans Serif", "premillenium", sans-serif; - color:black; -} - -.ui, -.ui .columns-area, -body.admin { - background: $win95-cyan; -} - -.loading-bar { - height:5px; - background-color: #000080; -} - -.tabs-bar__wrapper { - background-color: $win95-cyan; -} - -.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; - z-index:1; -} - -.privacy-dropdown__dropdown { - z-index:2; -} - -.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; -} - -.notification__filter-bar { - background: $win95-bg; - @include win95-border-outset-sides-only(); - padding-top: 10px; - padding-left: 10px; - padding-right: 10px; - border-bottom: 2px solid #efefef; - overflow-y: visible; - - button { - background: transparent; - color: black; - padding: 8px 0; - align-self: end; - @include win95-tab(); - - &.active { - color: black; - top: 2px; - background-color: $win95-bg; - - &::before, &::after { - display:none; - } - } - } -} - -.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:$win95-bg; - &:focus, &:active { - background:$win95-bg; - } - - &:not(.read) { - background: white; - } -} -.focusable:focus .status.status-direct { - background:$win95-bg; -} - -[data-whatinput="mouse"], [data-whatinput="touch"] { - .status__content:focus, .status:focus, - .status__wrapper:focus, .status__content__text:focus { - background-color: $win95-bg; - } - - .status.status-direct, .detailed-status { - &:not(.read) { - .status__content:focus { - background-color: white; - } - } - } -} - -.status__content, .reply-indicator__content { - font-size:13px; - color: black; -} - -.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, .status-card.compact, a.status-card, a.status-card.compact { - border-radius:0px; - background:white; - border: 1px solid black; - color:black; - - &: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; -} - -.compose-form__poll-wrapper .icon-button.disabled { - color: $win95-mid-grey; -} - -.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 { - .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(); - } - } - -} - -.button.button-secondary { - background-color: $win95-bg; -} - -.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:$win95-bg; - color:black; - @include win95-border-outset-sides-only; -} - -.column { - overflow-y:auto; -} - -.getting-started { - background: none; - position:relative; - top:-30px; - padding-top:30px; - z-index:10; - overflow-y:auto; - background-color: $win95-cyan; -} - -.getting-started__wrapper { - padding-top:0px; - - 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-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; - } - } - -.getting-started__wrapper::before { - content: "Start"; - display:block; - color:black; - font-weight:bold; - font-size:15px; - position:absolute; - top:0px; - 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(); -} - - -@media screen and (min-width: 360px) { - .getting-started__wrapper{ - margin-bottom:0px; - } -} - -@media screen and (max-width: 360px) { - .getting-started { - top:0px; - padding-top:0px; - } - - .getting-started__wrapper::before { - display:none; - } -} - -.getting-started__footer { - background-color: $win95-bg; - padding:0px; - padding-bottom:10px; - position:relative; - top:0px; - - @include win95-outset-no-highlight(); - - 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__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:1000px; - 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; -} - -.layout-single-column .getting-started__footer::after { - display: none; -} - -.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="/web/directory"] { - background-image: url("@/images/icon_profile_directory.png"); - &:hover { background-image: url("@/images/icon_profile_directory.png"); } -} -.column-link[href="/web/bookmarks"] { - background-image: url("@/images/icon_bookmarks.png"); - &:hover { background-image: url("@/images/icon_bookmarks.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://docs.joinmastodon.org"] { - 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 ul li a[href="https://joinmastodon.org/apps"] { - background-image: url("@/images/icon_mobile_apps.png"); - &:hover { background-image: url("@/images/icon_mobile_apps.png"); } -} -.getting-started__footer ul li a[href="/settings/applications"] { - background-image: url("@/images/icon_developers.png"); - &:hover { background-image: url("@/images/icon_developers.png"); } -} -.getting-started__footer ul li a[href="/auth/edit"] { - background-image: url("@/images/icon_settings.png"); - &:hover { background-image: url("@/images/icon_settings.png"); } -} - -.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__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-bg; - @include win95-inset(); - color: black; - - &: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; - min-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; - min-height:auto; - flex: 0 0 auto; - margin:2px; -} - -.admin-wrapper .content-wrapper { - flex: 1 1 auto; - width:calc(100% - 20px); - max-width:calc(100% - 20px); - @include win95-border-outset(); - position:relative; - margin-left:10px; - margin-right:10px; - margin-bottom:40px; - box-sizing:border-box; - overflow-y:scroll; - height: 100%; -} - -.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; - } - } - } - } - } -} - -.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { - background: $win95-bg; -} - -@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, -.admin-wrapper .content h3, -.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, -.admin-wrapper .content > p strong, -.simple_form .input.with_floating_label .label_input > label, -.admin-wrapper .content .fields-group h6 { - color:black; -} - -.report-card { - background: white; - border: 1px solid black; - border-radius: 0px; -} - -.report-card__summary__item:hover { - background: white; -} - -.report-card__summary__item__content a { - color: black; -} - -.directory__tag > a, .directory__tag > div, -.directory__tag > a:hover, .directory__tag > a:active, .directory__tag > a:focus { - background: white; - border: 1px solid black; - border-radius: 0px; -} - -.admin-wrapper .content .directory__tag h4 { - color: black; -} - -.simple_form .hint code { - background: $win95-bg; - border-radius: 0px; -} - -.input-copy { - background: transparent; - border: 0px solid transparent; -} - -.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; -} - -.simple_form select { - background: white; - border-radius: 0px; - color: black; -} - -.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; - } -} - -.batch-table__row:nth-child(2n) { - background-color: white; -} - -.dashboard__counters > div > div, -.dashboard__counters > div > a { - background-color: $win95-bg; - border: 1px solid black; - border-radius: 1px; - color:black; - - &:hover { - background-color: $win95-bg; - } -} - -.dashboard__counters__label, -.dashboard__widgets a:not(.name-tag), -.dashboard__counters__num { - color:black; -} - -.card { - & > a, & > a:hover { - box-shadow: none; - - .card__img { - border-radius: 0px; - border: 1px solid black; - } - - .card__bar { - @include win95-outset(); - background-color: $win95-bg; - - .display-name { - strong, span { - color:black; - } - } - } - } -} - -/* Public layout stuff */ -body { - background: $win95-cyan; -} - -.public-layout { - max-width: 960px; - margin:10px auto; - background: $win95-bg; - padding:0px; - @include win95-outset(); - - .header { - background: $win95-window-header; - @include win95-border-outset(); - height: 22px; - margin: 0px; - padding:0px; - border-radius: 0px; - - .brand { - padding: 2px; - } - - .nav-button { - @include win95-outset(); - background: $win95-bg; - color:black; - margin: 2px; - margin-bottom: 0px; - &:hover { - background: $win95-bg; - color:black; - } - } - } - .footer { - background: none; - &, h4, ul a, .grid .column-2 h4 a { - color: black; - } - } - - .button.logo-button { - @include win95-outset(); - background: $win95-bg; - color:black; - &:hover { - background: $win95-bg; - color:black; - } - svg { - visibility:hidden; - } - &, &: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%; - } - } - - .public-account-header { - @include win95-reset(); - padding: 4px; - .public-account-header__image { - @include win95-border-slight-inset(); - border-radius: 0px; - } - } - - .public-account-header__bar { - &, &:before { - background: transparent; - } - .avatar img { - @include win95-border-slight-inset(); - filter: saturate(1.8) brightness(1.1); - border-radius: 0px; - background: darken($win95-bg, 9.09%); - } - } - .public-account-header__extra__links { - margin-top: 0px; - a, a strong { - color: black; - } - } - - .public-account-header__tabs { - position: relative; - } - - .public-account-header__tabs__name { - display: inline-block; - position: relative; - background: $win95-tooltip-yellow; - border: 1px solid black; - padding: 4px; - margin-bottom: 24px; - - h1, h1 small { - color:black; - text-shadow: unset; - text-overflow: unset; - } - - &:after { - content: ""; - display:block; - position:absolute; - left: 0px; - bottom: -20px; - width: 0px; - height: 0px; - border-left: 20px solid $win95-tooltip-yellow; - border-bottom: 20px solid transparent; - } - &:before { - content: ""; - display:block; - position:absolute; - left: -1px; - bottom: -22px; - width: 0px; - height: 0px; - border-left: 22px solid black; - border-bottom: 22px solid transparent; - } - } - - .public-account-header__tabs__tabs { - .details-counters { - @include win95-border-groove(); - .counter { - .counter-number, .counter-label { - color: black; - } - &:after { - border-bottom-width: 0px; - } - &.active { - @include win95-border-slight-inset(); - } - } - } - } - - .public-account-bio { - @include win95-reset(); - @include win95-border-groove(); - background: $win95-bg; - margin-right: 10px; - .account__header__content, .roles { - color: black; - } - } - .public-account-bio__extra { - color: black; - } - - .status__prepend { - padding-top:5px; - } - .status__content , - .reply-indicator__content { - .status__content__spoiler-link { - color: $win95-dark-grey; - } - } - .account__section-headline { - margin-left: 10px; - } - .card-grid { - margin-left: 10px; - } - .status { - padding: 15px 15px 55px 78px; - } -} - -@media screen and (max-width: 1255px) { - .container { - width: 100%; - padding: 0px; - } -} - -.hero-widget { - box-shadow: none; - @include win95-border-groove(); - background: $win95-bg; - padding: 8px; - margin-right: 10px; - margin-top: 10px; -} -.hero-widget__text { - background: none; - color: black; -} -.hero-widget__img { - background: none; - border-radius: 0px; - border: 1px solid black; - img { - border-radius: 0px; - } -} - -.activity-stream { - @include win95-reset(); - @include win95-border-groove(); - - background: $win95-bg; - margin-top: 10px; - margin-left: 10px; - .entry { - background: none; - &:first-child:last-child, &:first-child { - .detailed-status, .status, .load-more { - border-radius: 0px; - } - } - } -} - -.nothing-here { - @include win95-reset(); - background: transparent; - color: black; -} - -.flash-message.notice { - border: 1px solid black; - background: $win95-tooltip-yellow; - color:black; -} - -.layout-single-column .compose-panel { - background: $win95-bg; -} - -.layout-single-column .status__wrapper .status { - padding-bottom: 50px; -} - -::-webkit-scrollbar { - width: 14px; -} - -::-webkit-scrollbar-track { - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIW2P4f4DhwH8ACoADf0PlskQAAAAASUVORK5CYII='); - - &:hover { - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIW2P4f4DhwH8ACoADf0PlskQAAAAASUVORK5CYII='); - } -} - -::-webkit-scrollbar-thumb { - background: #bfbfbf; - border-color: #efefef #404040 #404040 #efefef; - border-style: solid; - border-width: 2px; - - &:hover { - background: #bfbfbf; - border-color: #efefef #404040 #404040 #efefef; - border-style: solid; - border-width: 2px; - } - - &:active { - background: #bfbfbf; - border-color: #404040 #efefef #efefef #404040; - } -} -