diff --git a/app/javascript/flavours/cybrespace/theme.yml b/app/javascript/flavours/cybrespace/theme.yml
index b57fea0..9303fda 100644
--- a/app/javascript/flavours/cybrespace/theme.yml
+++ b/app/javascript/flavours/cybrespace/theme.yml
@@ -1,25 +1,8 @@
pack:
- admin:
- - ../glitch/packs/admin.js
- - ../glitch/packs/public.js
- auth: ../glitch/packs/public.js
common:
- filename: ../glitch/packs/common.js
+ filename: pack/common.js
stylesheet: true
- embed: ../glitch/packs/public.js
- error: ../glitch/packs/error.js
- home:
- filename: ../glitch/packs/home.js
- preload:
- - flavours/glitch/async/compose
- - flavours/glitch/async/getting_started
- - flavours/glitch/async/home_timeline
- - flavours/glitch/async/notifications
- mailer:
- modal:
- public: ../glitch/packs/public.js
- settings: ../glitch/packs/settings.js
- share: ../glitch/packs/share.js
-
locales: locales
+inherit_locales: glitch
+fallback: glitch
diff --git a/app/javascript/flavours/packs/about.js b/app/javascript/flavours/packs/about.js
deleted file mode 100644
index 892d825..0000000
--- a/app/javascript/flavours/packs/about.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
-
-start();
-
-function loaded() {
- const TimelineContainer = require('../mastodon/containers/timeline_container').default;
- const React = require('react');
- const ReactDOM = require('react-dom');
- const mountNode = document.getElementById('mastodon-timeline');
-
- if (mountNode !== null) {
- const props = JSON.parse(mountNode.getAttribute('data-props'));
- ReactDOM.render(, mountNode);
- }
-}
-
-function main() {
- const ready = require('../mastodon/ready').default;
- ready(loaded);
-}
-
-loadPolyfills().then(main).catch(error => {
- console.error(error);
-});
diff --git a/app/javascript/flavours/packs/admin.js b/app/javascript/flavours/packs/admin.js
deleted file mode 100644
index 5990150..0000000
--- a/app/javascript/flavours/packs/admin.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import './public-path';
-import ready from '../mastodon/ready';
-
-ready(() => {
- const React = require('react');
- const ReactDOM = require('react-dom');
-
- [].forEach.call(document.querySelectorAll('[data-admin-component]'), element => {
- const componentName = element.getAttribute('data-admin-component');
- const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));
-
- import('../mastodon/containers/admin_component').then(({ default: AdminComponent }) => {
- return import('../mastodon/components/admin/' + componentName).then(({ default: Component }) => {
- ReactDOM.render((
-
-
-
- ), element);
- });
- }).catch(error => {
- console.error(error);
- });
- });
-});
diff --git a/app/javascript/flavours/packs/application.js b/app/javascript/flavours/packs/application.js
deleted file mode 100644
index 020f2b4..0000000
--- a/app/javascript/flavours/packs/application.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
-
-start();
-
-loadPolyfills().then(async () => {
- const { default: main } = await import('mastodon/main');
-
- return main();
-}).catch(e => {
- console.error(e);
-});
diff --git a/app/javascript/flavours/packs/common.js b/app/javascript/flavours/packs/common.js
deleted file mode 100644
index 05dff8e..0000000
--- a/app/javascript/flavours/packs/common.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './public-path';
-import 'styles/application.scss';
diff --git a/app/javascript/flavours/packs/error.js b/app/javascript/flavours/packs/error.js
deleted file mode 100644
index 6376dc2..0000000
--- a/app/javascript/flavours/packs/error.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import './public-path';
-import ready from '../mastodon/ready';
-
-ready(() => {
- const image = document.querySelector('img');
-
- image.addEventListener('mouseenter', () => {
- image.src = '/oops.gif';
- });
-
- image.addEventListener('mouseleave', () => {
- image.src = '/oops.png';
- });
-});
diff --git a/app/javascript/flavours/packs/public-path.js b/app/javascript/flavours/packs/public-path.js
deleted file mode 100644
index f96109f..0000000
--- a/app/javascript/flavours/packs/public-path.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// Dynamically set webpack's loading path depending on a meta header, in order
-// to share the same assets regardless of instance configuration.
-// See https://webpack.js.org/guides/public-path/#on-the-fly
-
-function removeOuterSlashes(string) {
- return string.replace(/^\/*/, '').replace(/\/*$/, '');
-}
-
-function formatPublicPath(host = '', path = '') {
- let formattedHost = removeOuterSlashes(host);
- if (formattedHost && !/^http/i.test(formattedHost)) {
- formattedHost = `//${formattedHost}`;
- }
- const formattedPath = removeOuterSlashes(path);
- return `${formattedHost}/${formattedPath}/`;
-}
-
-const cdnHost = document.querySelector('meta[name=cdn-host]');
-
-// eslint-disable-next-line camelcase, no-undef, no-unused-vars
-__webpack_public_path__ = formatPublicPath(cdnHost ? cdnHost.content : '', process.env.PUBLIC_OUTPUT_PATH);
diff --git a/app/javascript/flavours/packs/public.js b/app/javascript/flavours/packs/public.js
deleted file mode 100644
index 4f60f04..0000000
--- a/app/javascript/flavours/packs/public.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import ready from '../mastodon/ready';
-import { start } from '../mastodon/common';
-import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
-import 'cocoon-js-vanilla';
-
-start();
-
-function main() {
- const IntlMessageFormat = require('intl-messageformat').default;
- const { timeAgoString } = require('../mastodon/components/relative_timestamp');
- const { delegate } = require('@rails/ujs');
- const emojify = require('../mastodon/features/emoji/emoji').default;
- const { getLocale } = require('../mastodon/locales');
- const { messages } = getLocale();
- const React = require('react');
- const ReactDOM = require('react-dom');
- const Rellax = require('rellax');
- const { createBrowserHistory } = require('history');
-
- const scrollToDetailedStatus = () => {
- const history = createBrowserHistory();
- const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status');
- const location = history.location;
-
- if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) {
- detailedStatuses[0].scrollIntoView();
- history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true });
- }
- };
-
- const getEmojiAnimationHandler = (swapTo) => {
- return ({ target }) => {
- target.src = target.getAttribute(swapTo);
- };
- };
-
- ready(() => {
- const locale = document.documentElement.lang;
-
- const dateTimeFormat = new Intl.DateTimeFormat(locale, {
- year: 'numeric',
- month: 'long',
- day: 'numeric',
- hour: 'numeric',
- minute: 'numeric',
- });
-
- [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
- content.innerHTML = emojify(content.innerHTML);
- });
-
- [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
- const datetime = new Date(content.getAttribute('datetime'));
- const formattedDate = dateTimeFormat.format(datetime);
-
- content.title = formattedDate;
- content.textContent = formattedDate;
- });
-
- [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
- const datetime = new Date(content.getAttribute('datetime'));
- const now = new Date();
-
- content.title = dateTimeFormat.format(datetime);
- content.textContent = timeAgoString({
- formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values),
- formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
- }, datetime, now, now.getFullYear(), content.getAttribute('datetime').includes('T'));
- });
-
- const reactComponents = document.querySelectorAll('[data-component]');
-
- if (reactComponents.length > 0) {
- import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container')
- .then(({ default: MediaContainer }) => {
- [].forEach.call(reactComponents, (component) => {
- [].forEach.call(component.children, (child) => {
- component.removeChild(child);
- });
- });
-
- const content = document.createElement('div');
-
- ReactDOM.render(, content);
- document.body.appendChild(content);
- scrollToDetailedStatus();
- })
- .catch(error => {
- console.error(error);
- scrollToDetailedStatus();
- });
- } else {
- scrollToDetailedStatus();
- }
-
- const parallaxComponents = document.querySelectorAll('.parallax');
-
- if (parallaxComponents.length > 0 ) {
- new Rellax('.parallax', { speed: -1 });
- }
-
- delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => {
- const password = document.getElementById('registration_user_password');
- const confirmation = document.getElementById('registration_user_password_confirmation');
- if (confirmation.value && confirmation.value.length > password.maxLength) {
- confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format());
- } else if (password.value && password.value !== confirmation.value) {
- confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format());
- } else {
- confirmation.setCustomValidity('');
- }
- });
-
- delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
- const password = document.getElementById('user_password');
- const confirmation = document.getElementById('user_password_confirmation');
- if (!confirmation) return;
-
- if (confirmation.value && confirmation.value.length > password.maxLength) {
- confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.exceeds_maxlength'] || 'Password confirmation exceeds the maximum password length', locale)).format());
- } else if (password.value && password.value !== confirmation.value) {
- confirmation.setCustomValidity((new IntlMessageFormat(messages['password_confirmation.mismatching'] || 'Password confirmation does not match', locale)).format());
- } else {
- confirmation.setCustomValidity('');
- }
- });
-
- delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
- delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
-
- delegate(document, '.status__content__spoiler-link', 'click', function() {
- const statusEl = this.parentNode.parentNode;
-
- if (statusEl.dataset.spoiler === 'expanded') {
- statusEl.dataset.spoiler = 'folded';
- this.textContent = (new IntlMessageFormat(messages['status.show_more'] || 'Show more', locale)).format();
- } else {
- statusEl.dataset.spoiler = 'expanded';
- this.textContent = (new IntlMessageFormat(messages['status.show_less'] || 'Show less', locale)).format();
- }
-
- return false;
- });
-
- [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => {
- const statusEl = spoilerLink.parentNode.parentNode;
- const message = (statusEl.dataset.spoiler === 'expanded') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more');
- spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
- });
- });
-
- delegate(document, '.sidebar__toggle__icon', 'click', () => {
- document.querySelector('.sidebar ul').classList.toggle('visible');
- });
-
- // Empty the honeypot fields in JS in case something like an extension
- // automatically filled them.
- delegate(document, '#registration_new_user,#new_user', 'submit', () => {
- ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => {
- const field = document.getElementById(id);
- if (field) {
- field.value = '';
- }
- });
- });
-}
-
-loadPolyfills()
- .then(main)
- .then(loadKeyboardExtensions)
- .catch(error => {
- console.error(error);
- });
diff --git a/app/javascript/flavours/packs/share.js b/app/javascript/flavours/packs/share.js
deleted file mode 100644
index 1225d7b..0000000
--- a/app/javascript/flavours/packs/share.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
-
-start();
-
-function loaded() {
- const ComposeContainer = require('../mastodon/containers/compose_container').default;
- const React = require('react');
- const ReactDOM = require('react-dom');
- const mountNode = document.getElementById('mastodon-compose');
-
- if (mountNode !== null) {
- const props = JSON.parse(mountNode.getAttribute('data-props'));
- ReactDOM.render(, mountNode);
- }
-}
-
-function main() {
- const ready = require('../mastodon/ready').default;
- ready(loaded);
-}
-
-loadPolyfills().then(main).catch(error => {
- console.error(error);
-});
diff --git a/app/javascript/skins/cybrespace/win95/common.scss b/app/javascript/skins/cybrespace/win95/common.scss
new file mode 100644
index 0000000..d3f0c90
--- /dev/null
+++ b/app/javascript/skins/cybrespace/win95/common.scss
@@ -0,0 +1,3 @@
+@import '../cybrespace/components';
+@import '~flavours/glitch/styles/index';
+@import 'win95';
diff --git a/app/javascript/skins/cybrespace/win95/names.yml b/app/javascript/skins/cybrespace/win95/names.yml
new file mode 100644
index 0000000..b809e1e
--- /dev/null
+++ b/app/javascript/skins/cybrespace/win95/names.yml
@@ -0,0 +1,4 @@
+en:
+ skins:
+ cybrespace:
+ win95: "cybre.space Windows 95 theme"
diff --git a/app/javascript/skins/cybrespace/win95/win95.scss b/app/javascript/skins/cybrespace/win95/win95.scss
new file mode 100644
index 0000000..9ca4740
--- /dev/null
+++ b/app/javascript/skins/cybrespace/win95/win95.scss
@@ -0,0 +1,2589 @@
+@import 'styles/application';
+
+$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('flavours/cybrespace/fonts/premillenium/MSSansSerif.ttf') format('truetype');
+}
+
+@import '../cybrespace/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: $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;
+
+ 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;
+ }
+ .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;
+ }
+}