$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-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'); } @import 'cybre-base'; 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: #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; z-index:1; } .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; } .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: 4px 0; align-self: end; @include win95-tab(); &.active { color: black; top: 2px; padding:8px 0; 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; } .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(); } } } .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; } .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://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"); } } .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; 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, .admin-wrapper .content > p strong, .simple_form .input.with_floating_label .label_input > label, .admin-wrapper .content .fields-group h6 { 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; } } .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; h1, h1 small { color:black; text-shadow: unset; text-overflow: unset; } margin-bottom: 24px; &: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; } } @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; }