about summary refs log tree commit diff
path: root/app/javascript/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/styles')
-rw-r--r--app/javascript/styles/fonts/montserrat.scss8
-rw-r--r--app/javascript/styles/fonts/roboto-mono.scss8
-rw-r--r--app/javascript/styles/fonts/roboto.scss32
-rw-r--r--app/javascript/styles/mastodon-light.scss228
-rw-r--r--app/javascript/styles/mastodon/components.scss10
-rw-r--r--app/javascript/styles/mastodon/modal.scss2
-rw-r--r--app/javascript/styles/win95.scss1763
7 files changed, 2021 insertions, 30 deletions
diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss
index 206f1865e..3d2b5a93f 100644
--- a/app/javascript/styles/fonts/montserrat.scss
+++ b/app/javascript/styles/fonts/montserrat.scss
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'mastodon-font-display';
   src: local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
-    url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
-    url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
+    url('~fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
+    url('~fonts/montserrat/Montserrat-Regular.woff') format('woff'),
+    url('~fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
@@ -11,7 +11,7 @@
 @font-face {
   font-family: 'mastodon-font-display';
   src: local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
+    url('~fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss
index 2a1f74e16..c793aa6ed 100644
--- a/app/javascript/styles/fonts/roboto-mono.scss
+++ b/app/javascript/styles/fonts/roboto-mono.scss
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'mastodon-font-monospace';
   src: local('Roboto Mono'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
+    url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
   font-weight: 400;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss
index 345d9ad50..79034c018 100644
--- a/app/javascript/styles/fonts/roboto.scss
+++ b/app/javascript/styles/fonts/roboto.scss
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
+    url('~fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-italic-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
   font-weight: normal;
   font-style: italic;
 }
@@ -12,10 +12,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
+    url('~fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-bold-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
   font-weight: bold;
   font-style: normal;
 }
@@ -23,10 +23,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
+    url('~fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-medium-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
   font-weight: 500;
   font-style: normal;
 }
@@ -34,10 +34,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
+    url('~fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-regular-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss
new file mode 100644
index 000000000..6a22a7822
--- /dev/null
+++ b/app/javascript/styles/mastodon-light.scss
@@ -0,0 +1,228 @@
+// Set variables
+$ui-base-color: #d9e1e8;
+$ui-base-lighter-color: darken($ui-base-color, 57%);
+$ui-highlight-color: #2b90d9;
+$ui-primary-color: darken($ui-highlight-color, 28%);
+$ui-secondary-color: #282c37;
+
+$primary-text-color: black;
+$base-overlay-background: $ui-base-color;
+
+$login-button-color: white;
+$account-background-color: white;
+
+// Import defaults
+@import 'application';
+
+// Change the color of the log in button
+.button {
+  &.button-alternative-2 {
+    color: $login-button-color;
+  }
+}
+
+// Change columns' default background colors
+.column {
+  > .scrollable {
+    background: lighten($ui-base-color, 13%);
+  }
+}
+
+.drawer__inner {
+  background: $ui-base-color;
+}
+
+.drawer__inner__mastodon {
+  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(lighten($ui-base-color, 13%))}"/></svg>') no-repeat bottom / 100% auto;
+}
+
+// Change the default appearance of the content warning button
+.status__content,
+.reply-indicator__content {
+
+  .status__content__spoiler-link {
+
+    background: darken($ui-base-color, 30%);
+
+    &:hover {
+      background: darken($ui-base-color, 35%);
+      text-decoration: none;
+    }
+
+  }
+
+}
+
+// Change the default appearance of the action buttons
+.icon-button {
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: darken($ui-base-color, 40%);
+    transition: color 200ms ease-out;
+  }
+
+  &.disabled {
+    color: darken($ui-base-color, 30%);
+  }
+
+}
+
+.status {
+  &.status-direct {
+    .icon-button.disabled {
+      color: darken($ui-base-color, 30%);
+    }
+  }
+}
+
+button.icon-button i.fa-retweet {
+  &:hover {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(darken($ui-base-color, 30%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($ui-highlight-color)}' stroke-width='0'/></svg>");
+  }
+}
+
+button.icon-button.disabled i.fa-retweet {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(darken($ui-base-color, 30%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($ui-highlight-color)}' stroke-width='0'/></svg>");
+}
+
+// Change the colors used in the dropdown menu
+.dropdown-menu {
+  background: $ui-base-color;
+}
+
+.dropdown-menu__arrow {
+
+  &.left {
+    border-left-color: $ui-base-color;
+  }
+
+  &.top {
+    border-top-color: $ui-base-color;
+  }
+
+  &.bottom {
+    border-bottom-color: $ui-base-color;
+  }
+
+  &.right {
+    border-right-color: $ui-base-color;
+  }
+
+}
+
+.dropdown-menu__item {
+  a {
+    background: $ui-base-color;
+    color: $ui-secondary-color;
+  }
+}
+
+// Change the default color of several parts of the compose form
+.compose-form {
+
+  .compose-form__warning {
+    color: lighten($ui-secondary-color, 65%);
+  }
+
+  strong {
+    color: lighten($ui-secondary-color, 65%);
+  }
+
+  .autosuggest-textarea__textarea,
+  .spoiler-input__input {
+
+    color: darken($ui-base-color, 80%);
+
+    &::placeholder {
+      color: darken($ui-base-color, 70%);
+    }
+
+  }
+
+  .compose-form__buttons-wrapper {
+    background: darken($ui-base-color, 10%);
+  }
+
+  .privacy-dropdown__option {
+    color: $ui-primary-color;
+  }
+
+  .privacy-dropdown__option__content {
+
+    strong {
+      color: $ui-primary-color;
+    }
+
+  }
+
+}
+
+// Change the default color used for the text in an empty column or on the error column
+.empty-column-indicator,
+.error-column {
+  color: darken($ui-base-color, 60%);
+}
+
+// Change the default colors used on some parts of the profile pages
+.activity-stream-tabs {
+
+  background: $account-background-color;
+
+  a {
+    &.active {
+      color: $ui-primary-color;
+      }
+  }
+
+}
+
+.activity-stream {
+
+  .entry {
+    background: $account-background-color;
+  }
+
+  .status.light {
+
+    .status__content {
+      color: $primary-text-color;
+    }
+
+    .display-name {
+      strong {
+        color: $primary-text-color;
+      }
+    }
+
+  }
+
+}
+
+.accounts-grid {
+  .account-grid-card {
+
+    .controls {
+      .icon-button {
+        color: $ui-secondary-color;
+      }
+    }
+
+    .name {
+      a {
+        color: $primary-text-color;
+      }
+    }
+
+    .username {
+      color: $ui-secondary-color;
+    }
+
+    .account__header__content {
+      color: $primary-text-color;
+    }
+
+  }
+}
+
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 61c38ce80..9f0a7a058 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1450,7 +1450,7 @@ a.account__display-name {
   .image-loader__preview-canvas {
     max-width: $media-modal-media-max-width;
     max-height: $media-modal-media-max-height;
-    background: url('../images/void.png') repeat;
+    background: url('~images/void.png') repeat;
     object-fit: contain;
   }
 
@@ -2452,7 +2452,7 @@ a.status-card {
   }
 
   &__figure {
-    background: url('../images/elephant_ui_working.svg') no-repeat center 0;
+    background: url('~images/elephant_ui_working.svg') no-repeat center 0;
     width: 100%;
     height: 160px;
     background-size: contain;
@@ -2466,7 +2466,7 @@ a.status-card {
     padding-top: 20px + 48px;
 
     .regeneration-indicator__figure {
-      background-image: url('../images/elephant_ui_disappointed.svg');
+      background-image: url('~images/elephant_ui_disappointed.svg');
     }
   }
 
@@ -3758,7 +3758,7 @@ a.status-card {
 }
 
 .onboarding-modal__page__wrapper-0 {
-  background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
+  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
   height: 100%;
   padding: 0;
 }
@@ -5125,7 +5125,7 @@ noscript {
     width: 100px;
     height: 100px;
     transform: translate(-50%, -50%);
-    background: url('../images/reticle.png') no-repeat 0 0;
+    background: url('~/images/reticle.png') no-repeat 0 0;
     border-radius: 50%;
     box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
   }
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index f9fad732e..ceb79bbb9 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -15,6 +15,6 @@
   > * {
     flex: 1;
     max-height: 235px;
-    background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain;
+    background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain;
   }
 }
diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss
new file mode 100644
index 000000000..c1058af29
--- /dev/null
+++ b/app/javascript/styles/win95.scss
@@ -0,0 +1,1763 @@
+//  win95 theme from cybrespace.
+
+//  Modified by kibi! to use webpack package syntax for urls (eg,
+//  `url(~images/…)`) for easy importing into skins.
+
+$win95-bg: #bfbfbf;
+$win95-dark-grey: #404040;
+$win95-mid-grey: #808080;
+$win95-window-header: #00007f;
+$win95-tooltip-yellow: #ffffcc;
+$win95-blue: blue;
+
+$ui-base-lighter-color: $win95-dark-grey;
+$ui-highlight-color: $win95-window-header;
+
+@mixin win95-border-outset() {
+  border-left: 2px solid #efefef;
+  border-top: 2px solid #efefef;
+  border-right: 2px solid #404040;
+  border-bottom: 2px solid #404040;
+  border-radius:0px;
+}
+
+@mixin win95-outset() {
+  box-shadow: inset -1px -1px 0px #000000,
+              inset 1px 1px 0px #ffffff,
+              inset -2px -2px 0px #808080,
+              inset 2px 2px 0px #dfdfdf;
+  border-radius:0px;
+}
+
+@mixin win95-border-inset() {
+  border-left: 2px solid #404040;
+  border-top: 2px solid #404040;
+  border-right: 2px solid #efefef;
+  border-bottom: 2px solid #efefef;
+  border-radius:0px;
+}
+
+@mixin win95-border-slight-inset() {
+  border-left: 1px solid #404040;
+  border-top: 1px solid #404040;
+  border-right: 1px solid #efefef;
+  border-bottom: 1px solid #efefef;
+  border-radius:0px;
+}
+
+@mixin win95-inset() {
+  box-shadow: inset 1px 1px 0px #000000,
+              inset -1px -1px 0px #ffffff,
+              inset 2px 2px 0px #808080,
+              inset -2px -2px 0px #dfdfdf;
+  border-width:0px;
+  border-radius:0px;
+}
+
+@mixin win95-tab() {
+  box-shadow: inset -1px 0px 0px #000000,
+              inset 1px 0px 0px #ffffff,
+              inset 0px 1px 0px #ffffff,
+              inset 0px 2px 0px #dfdfdf,
+              inset -2px 0px 0px #808080,
+              inset 2px 0px 0px #dfdfdf;
+  border-radius:0px;
+  border-top-left-radius: 1px;
+  border-top-right-radius: 1px;
+}
+
+@mixin win95-reset() {
+  box-shadow: unset;
+}
+
+@font-face {
+  font-family:"premillenium";
+  src: url('~fonts/premillenium/MSSansSerif.ttf') format('truetype');
+}
+
+@import 'application';
+
+/* borrowed from cybrespace style: wider columns and full column width images */
+
+@media screen and (min-width: 1300px) {
+  .column {
+    flex-grow: 1 !important;
+    max-width: 400px;
+  }
+
+  .drawer {
+    width: 17%;
+    max-width: 400px;
+    min-width: 330px;
+  }
+}
+
+.media-gallery,
+.video-player {
+  max-height:30vh;
+  height:30vh !important;
+  position:relative;
+  margin-top:20px;
+  margin-left:-68px;
+  width: calc(100% + 80px) !important;
+  max-width: calc(100% + 80px);
+}
+
+.detailed-status .media-gallery,
+.detailed-status .video-player {
+  margin-left:-5px;
+  width: calc(100% + 9px);
+  max-width: calc(100% + 9px);
+}
+
+.video-player video {
+  transform: unset;
+  top: unset;
+}
+
+.detailed-status .media-spoiler,
+.status .media-spoiler {
+  height: 100%!important;
+  vertical-align: middle;
+}
+
+/* main win95 style */
+
+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:2px;
+  font-size:13px;
+  background:#7f7f7f;
+  @include win95-border-outset()
+  border-bottom-width:0px;
+  color:white;
+  font-weight:bold;
+  align-items:baseline;
+}
+
+.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-right:0px;
+}
+
+.column-header__button {
+  background: $win95-bg;
+  color: black;
+  line-height:0px;
+  font-size:14px;
+  max-height:20px;
+  padding:0px 2px;
+  margin-top:2px;
+  @include win95-outset()
+
+  &:hover {
+    color: black;
+  }
+}
+
+.column-header__button.active, .column-header__button.active:hover {
+  @include win95-inset();
+  background-color:#7f7f7f;
+}
+
+.column-header__back-button {
+  background: $win95-bg;
+  color: black;
+  padding:2px;
+  max-height:20px;
+  margin-top:2px;
+  @include win95-outset()
+  font-size:13px;
+  font-weight:bold;
+}
+
+.column-back-button {
+  background:$win95-bg;
+  color:black;
+  @include win95-outset()
+  padding:2px;
+  font-size:13px;
+  font-weight:bold;
+}
+
+.column-back-button--slim-button {
+  position:absolute;
+  top:-22px;
+  right:4px;
+  max-height:20px;
+  max-width:60px;
+  padding:0px 2px;
+}
+
+.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 $win95-bg;
+  border-radius:4px;
+  margin-bottom:8px;
+  padding:4px;
+}
+
+.column-inline-form {
+  background-color: $win95-bg;
+  @include win95-border-outset();
+  border-bottom-width:0px;
+  border-top-width:0px;
+}
+
+.column-settings__section {
+  color:black;
+  font-weight:bold;
+  font-size:11px;
+  position:relative;
+  top: -12px;
+  left:4px;
+  background-color:$win95-bg;
+  display:inline-block;
+  padding:0px 4px;
+  margin-bottom:0px;
+}
+
+.setting-meta__label, .setting-toggle__label {
+  color:black;
+  font-weight:normal;
+}
+
+.setting-meta__label span:before {
+  content:"(";
+}
+.setting-meta__label span:after {
+  content:")";
+}
+
+.setting-toggle {
+  line-height:13px;
+}
+
+.react-toggle .react-toggle-track {
+  border-radius:0px;
+  background-color:white;
+  @include win95-border-inset();
+
+  width:12px;
+  height:12px;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color:white;
+}
+
+.react-toggle .react-toggle-track-check {
+  left:2px;
+  transition:unset;
+}
+
+.react-toggle .react-toggle-track-check svg path {
+  fill: black;
+}
+
+.react-toggle .react-toggle-track-x {
+  display:none;
+}
+
+.react-toggle .react-toggle-thumb {
+  border-radius:0px;
+  display:none;
+}
+
+.text-btn {
+  background-color:$win95-bg;
+  @include win95-outset()
+  padding:4px;
+}
+
+.text-btn:hover {
+  text-decoration:none;
+  color:black;
+}
+
+.text-btn:active {
+  @include win95-inset();
+}
+
+.setting-text {
+  color:black;
+  background-color:white;
+  @include win95-inset();
+  font-size:13px;
+  padding:2px;
+}
+
+.setting-text:active, .setting-text:focus,
+.setting-text.light:active, .setting-text.light:focus {
+  color:black;
+  border-bottom:2px inset $win95-bg;
+}
+
+.column-header__setting-arrows .column-header__setting-btn {
+  padding:3px 10px;
+}
+
+.column-header__setting-arrows .column-header__setting-btn:last-child {
+  padding:3px 10px;
+}
+
+.missing-indicator {
+  background-color:$win95-bg;
+  color:black;
+  @include win95-outset()
+}
+
+.missing-indicator > div {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC')
+    no-repeat;
+  background-position:center center;
+}
+
+.empty-column-indicator,
+.error-column {
+  background: $win95-bg;
+  color: black;
+}
+
+.status__wrapper {
+  border: 2px groove $win95-bg;
+  margin:4px;
+}
+
+.status {
+  @include win95-border-slight-inset();
+  background-color:white;
+  margin:4px;
+  padding-bottom:40px;
+  margin-bottom:8px;
+}
+
+.status.status-direct {
+  background-color:$win95-bg;
+}
+
+.status__content {
+  font-size:13px;
+}
+
+.status.light .status__relative-time,
+.status.light .display-name span {
+  color: #7f7f7f;
+}
+
+.status__action-bar {
+  box-sizing:border-box;
+  position:absolute;
+  bottom:-1px;
+  left:-1px;
+  background:$win95-bg;
+  width:calc(100% + 2px);
+  padding-left:10px;
+  padding: 4px 2px;
+  padding-bottom:4px;
+  border-bottom:2px groove $win95-bg;
+  border-top:1px outset $win95-bg;
+  text-align: right;
+}
+
+.status__wrapper .status__action-bar {
+  border-bottom-width:0px;
+}
+
+.status__action-bar-button {
+  float:right;
+}
+
+.status__action-bar-dropdown {
+  margin-left:auto;
+  margin-right:10px;
+
+  .icon-button {
+    min-width:28px;
+  }
+}
+.status.light .status__content a {
+  color:blue;
+}
+
+.focusable:focus {
+  background: $win95-bg;
+  .detailed-status__action-bar {
+    background: $win95-bg;
+  }
+
+  .status, .detailed-status {
+    background: white;
+    outline:2px dotted $win95-mid-grey;
+  }
+}
+
+.dropdown__trigger.icon-button {
+  padding-right:6px;
+}
+
+.detailed-status__action-bar-dropdown .icon-button {
+  min-width:28px;
+}
+
+.detailed-status {
+  background:white;
+  background-clip:padding-box;
+  margin:4px;
+  border: 2px groove $win95-bg;
+  padding:4px;
+}
+
+.detailed-status__display-name {
+  color:#7f7f7f;
+}
+
+.detailed-status__display-name strong {
+  color:black;
+  font-weight:bold;
+}
+.account__avatar,
+.account__avatar-overlay-base,
+.account__header__avatar,
+.account__avatar-overlay-overlay {
+  @include win95-border-slight-inset();
+  clip-path:none;
+  filter: saturate(1.8) brightness(1.1);
+}
+
+.detailed-status__action-bar {
+  background-color:$win95-bg;
+  border:0px;
+  border-bottom:2px groove $win95-bg;
+  margin-bottom:8px;
+  justify-items:left;
+  padding-left:4px;
+}
+.icon-button {
+  background:$win95-bg;
+  @include win95-border-outset()
+  padding:0px 0px 0px 0px;
+  margin-right:4px;
+
+  color:#3f3f3f;
+  &.inverted, &:hover, &.inverted:hover, &:active, &:focus {
+    color:#3f3f3f;
+  }
+}
+
+.icon-button:active {
+  @include win95-border-inset();
+}
+
+.status__action-bar > .icon-button {
+  padding:0px 15px 0px 0px;
+  min-width:25px;
+}
+
+.icon-button.star-icon,
+.icon-button.star-icon:active {
+  background:transparent;
+  border:none;
+}
+
+.icon-button.star-icon.active {
+  color: $gold-star;
+  &:active,  &:hover, &:focus {
+    color: $gold-star;
+  }
+}
+
+.icon-button.star-icon > i {
+  background:$win95-bg;
+  @include win95-border-outset()
+  padding-bottom:3px;
+}
+
+.icon-button.star-icon:active > i {
+  @include win95-border-inset();
+}
+
+.text-icon-button {
+  color:$win95-dark-grey;
+}
+
+.detailed-status__action-bar-dropdown {
+  margin-left:auto;
+  justify-content:right;
+  padding-right:16px;
+}
+
+.detailed-status__button {
+  flex:0 0 auto;
+}
+
+.detailed-status__button .icon-button {
+  padding-left:2px;
+  padding-right:25px;
+}
+
+.status-card {
+  border-radius:0px;
+  background:white;
+  border: 1px solid black;
+  color:black;
+}
+
+.status-card:hover {
+  background-color:white;
+}
+
+.status-card__title {
+  color:blue;
+  text-decoration:underline;
+  font-weight:bold;
+}
+
+.load-more {
+  width:auto;
+  margin:5px auto;
+  background: $win95-bg;
+  @include win95-outset();
+  color:black;
+  padding: 2px 5px;
+
+  &:hover {
+    background: $win95-bg;
+    color:black;
+  }
+}
+
+.status-card__description {
+ color:black;
+}
+
+.account__display-name strong, .status__display-name strong {
+  color:black;
+  font-weight:bold;
+}
+
+.account .account__display-name {
+  color:black;
+}
+
+.account {
+  border-bottom: 2px groove $win95-bg;
+}
+
+.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 .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;
+  }
+}
+
+.drawer__inner,
+.drawer__inner.darker {
+  background-color:$win95-bg;
+  border: 2px outset $win95-bg;
+  border-top-width:0px;
+}
+
+.navigation-bar {
+  color:black;
+}
+
+.navigation-bar strong {
+  color:black;
+  font-weight:bold;
+}
+
+.compose-form .autosuggest-textarea__textarea,
+.compose-form .spoiler-input__input {
+  border-radius:0px;
+  @include win95-border-slight-inset();
+}
+
+.compose-form .autosuggest-textarea__textarea {
+  border-bottom:0px;
+}
+
+.compose-form__uploads-wrapper {
+  border-radius:0px;
+  border-bottom:1px inset $win95-bg;
+  border-top-width:0px;
+}
+
+.compose-form__upload-wrapper {
+  border-left:1px inset $win95-bg;
+  border-right:1px inset $win95-bg;
+}
+
+.compose-form .compose-form__buttons-wrapper {
+  background-color: $win95-bg;
+  border:2px groove $win95-bg;
+  margin-top:4px;
+  padding:4px 8px;
+}
+
+.compose-form__buttons {
+  background-color:$win95-bg;
+  border-radius:0px;
+  box-shadow:unset;
+}
+
+.compose-form__buttons-separator {
+  border-left: 2px groove $win95-bg;
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active,
+.advanced-options-dropdown.open .advanced-options-dropdown__value {
+  background: $win95-bg;
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+  color: $win95-dark-grey;
+}
+
+.privacy-dropdown.active
+.privacy-dropdown__value {
+  background: $win95-bg;
+  box-shadow:unset;
+}
+
+.privacy-dropdown__option.active, .privacy-dropdown__option:hover,
+.privacy-dropdown__option.active:hover {
+  background:$win95-window-header;
+}
+
+.privacy-dropdown__dropdown,
+.privacy-dropdown.active .privacy-dropdown__dropdown,
+.advanced-options-dropdown__dropdown,
+.advanced-options-dropdown.open .advanced-options-dropdown__dropdown
+{
+  box-shadow:unset;
+  color:black;
+  @include win95-outset()
+  background: $win95-bg;
+}
+
+.privacy-dropdown__option__content {
+  color:black;
+}
+
+.privacy-dropdown__option__content strong {
+  font-weight:bold;
+}
+
+.compose-form__warning::before {
+  content:"Tip:";
+  font-weight:bold;
+  display:block;
+  position:absolute;
+  top:-10px;
+  background-color:$win95-bg;
+  font-size:11px;
+  padding: 0px 5px;
+}
+
+.compose-form__warning {
+  position:relative;
+  box-shadow:unset;
+  border:2px groove $win95-bg;
+  background-color:$win95-bg;
+  color:black;
+}
+
+.compose-form__warning a {
+  color:blue;
+}
+
+.compose-form__warning strong {
+  color:black;
+  text-decoration:underline;
+}
+
+.compose-form__buttons button.active:last-child {
+  @include win95-border-inset();
+  background: #dfdfdf;
+  color:#7f7f7f;
+}
+
+.compose-form__upload-thumbnail {
+  border-radius:0px;
+  border:2px groove $win95-bg;
+  background-color:$win95-bg;
+  padding:2px;
+  box-sizing:border-box;
+}
+
+.compose-form__upload-thumbnail .icon-button {
+  max-width:20px;
+  max-height:20px;
+  line-height:10px !important;
+}
+
+.compose-form__upload-thumbnail .icon-button::before {
+  content:"X";
+  font-size:13px;
+  font-weight:bold;
+  color:black;
+}
+
+.compose-form__upload-thumbnail .icon-button i {
+  display:none;
+}
+
+.emoji-picker-dropdown__menu {
+  z-index:2;
+}
+
+.emoji-dialog.with-search {
+  box-shadow:unset;
+  border-radius:0px;
+  background-color:$win95-bg;
+  border:1px solid black;
+  box-sizing:content-box;
+
+}
+
+.emoji-dialog .emoji-search {
+  color:black;
+  background-color:white;
+  border-radius:0px;
+  @include win95-inset();
+}
+
+.emoji-dialog .emoji-search-wrapper {
+  border-bottom:2px groove $win95-bg;
+}
+
+.emoji-dialog .emoji-category-title {
+  color:black;
+  font-weight:bold;
+}
+
+.reply-indicator {
+  background-color:$win95-bg;
+  border-radius:3px;
+  border:2px groove $win95-bg;
+}
+
+.button {
+  background-color:$win95-bg;
+  @include win95-outset()
+  border-radius:0px;
+  color:black;
+  font-weight:bold;
+
+  &:hover, &:focus, &:disabled {
+    background-color:$win95-bg;
+  }
+
+  &:active {
+    @include win95-inset();
+  }
+
+  &:disabled {
+    color: #808080;
+    text-shadow: 1px 1px 0px #efefef;
+
+    &:active {
+      @include win95-outset();
+    }
+  }
+
+}
+
+#Getting-started {
+  background-color:$win95-bg;
+  @include win95-inset();
+  border-bottom-width:0px;
+}
+
+#Getting-started::before {
+  content:"Start";
+  color:black;
+  font-weight:bold;
+  font-size:15px;
+  width:80%;
+  text-align:center;
+  display:block;
+  position:absolute;
+  right:2px;
+}
+
+#Getting-started {
+  position:relative;
+  padding:5px 15px;
+  width:60px;
+  font-size:0px;
+  color:$win95-bg;
+
+  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%;
+}
+
+.column-subheading {
+  background-color:$win95-bg;
+  color:black;
+  border-bottom: 2px groove $win95-bg;
+  text-transform: none;
+  font-size: 16px;
+}
+
+.column-link {
+  background-color:transparent;
+  color:black;
+  &:hover {
+    background-color: $win95-window-header;
+    color:white;
+  }
+}
+
+.getting-started__wrapper {
+  .column-subheading {
+    font-size:0px;
+    margin:0px;
+    padding:0px;
+  }
+
+  .column-link {
+    background-size:32px 32px;
+    background-repeat:no-repeat;
+    background-position: 36px 50%;
+    padding-left:40px;
+
+    &:hover {
+      background-size:32px 32px;
+      background-repeat:no-repeat;
+      background-position: 36px 50%;
+    }
+
+    i {
+      font-size: 0px;
+      width:32px;
+    }
+  }
+}
+
+.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/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/keyboard-shortcuts"] {
+  background-image: url("~images/icon_keyboard_shortcuts.png");
+  &:hover { background-image: url("~images/icon_keyboard_shortcuts.png"); }
+}
+.column-link[href="/web/blocks"] {
+  background-image: url("~images/icon_blocks.png");
+  &:hover { background-image: url("~images/icon_blocks.png"); }
+}
+.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"); }
+}
+.column-link[href="/about/more"] {
+  background-image: url("~images/icon_about.png");
+  &:hover { background-image: url("~images/icon_about.png"); }
+}
+.column-link[href="/auth/sign_out"] {
+  background-image: url("~images/icon_logout.png");
+  &:hover { background-image: url("~images/icon_logout.png"); }
+}
+
+.getting-started__footer {
+  display:none;
+}
+
+.getting-started__wrapper::before {
+  content:"Mastodon 95";
+  font-weight:bold;
+  font-size:23px;
+  color:white;
+  line-height:30px;
+  padding-left:20px;
+  padding-right:40px;
+
+  left:0px;
+  bottom:-30px;
+  display:block;
+  position:absolute;
+  background-color:#7f7f7f;
+  width:200%;
+  height:30px;
+
+  -ms-transform: rotate(-90deg);
+
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  transform-origin:top left;
+}
+
+.getting-started__wrapper {
+  @include win95-border-outset()
+  background-color:$win95-bg;
+}
+
+.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-authorize__wrapper {
+  border: 2px groove $win95-bg;
+  margin: 2px;
+  padding:2px;
+}
+
+.account--panel {
+  background-color: $win95-bg;
+  border:0px;
+  border-top: 2px groove $win95-bg;
+}
+
+.account-authorize .account__header__content {
+  color:black;
+  margin:10px;
+}
+
+.account__action-bar__tab > span {
+  color:black;
+  font-weight:bold;
+}
+
+.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();
+}
+
+.dropdown--active .dropdown__content > ul,
+.dropdown-menu {
+  background:$win95-tooltip-yellow;
+  border-radius:0px;
+  border:1px solid black;
+  box-shadow:unset;
+}
+
+.dropdown-menu a {
+  background-color:transparent;
+}
+
+.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__button > .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;
+}
+
+.status__action-bar-button .fa-floppy-o {
+    padding-top: 2px;
+}
+
+.status__action-bar-dropdown {
+    position: relative;
+    top: -3px;
+}
+
+.detailed-status__action-bar-dropdown .dropdown {
+    position: relative;
+    top: -4px;
+}
+
+.notification .status__action-bar {
+    border-bottom: none;
+}
+
+.notification .status {
+    margin-bottom: 4px;
+}
+
+.status__wrapper .status {
+    margin-bottom: 3px;
+}
+
+.status__wrapper {
+    margin-bottom: 8px;
+}
+
+.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;
+}
+
+.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();
+}
+
+.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 .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 .content h2,
+.simple_form .input.with_label .label_input > label,
+.admin-wrapper .content h6,
+.admin-wrapper .content > p,
+.admin-wrapper .content .muted-hint,
+.simple_form span.hint,
+.simple_form h4,
+.simple_form .check_boxes .checkbox label,
+.simple_form .input.with_label.boolean .label_input > label,
+.filters .filter-subset a,
+.simple_form .input.radio_buttons .radio label,
+a.table-action-link,
+a.table-action-link:hover,
+.simple_form .input.with_block_label > label,
+.simple_form p.hint {
+  color:black;
+}
+
+.table > tbody > tr:nth-child(2n+1) > td,
+.table > tbody > tr:nth-child(2n+1) > th {
+  background-color:white;
+}
+
+.simple_form input[type=text],
+.simple_form input[type=number],
+.simple_form input[type=email],
+.simple_form input[type=password],
+.simple_form textarea {
+  color:black;
+  background-color:white;
+  @include win95-border-slight-inset();
+
+  &:active, &:focus {
+    background-color:white;
+  }
+}
+
+.simple_form button,
+.simple_form .button,
+.simple_form .block-button
+{
+  background: $win95-bg;
+  @include win95-outset()
+  color:black;
+  font-weight: normal;
+
+  &:hover {
+    background: $win95-bg;
+  }
+}
+
+.simple_form .warning, .table-form .warning
+{
+  background: $win95-tooltip-yellow;
+  color:black;
+  box-shadow: unset;
+  text-shadow:unset;
+  border:1px solid black;
+
+  a {
+    color: blue;
+    text-decoration:underline;
+  }
+}
+
+.simple_form button.negative,
+.simple_form .button.negative,
+.simple_form .block-button.negative
+{
+  background: $win95-bg;
+}
+
+.filters .filter-subset  {
+  border: 2px groove $win95-bg;
+  padding:2px;
+}
+
+.filters .filter-subset a::before {
+  content: "";
+  background-color:white;
+  border-radius:50%;
+  border:2px solid black;
+  border-top-color:#7f7f7f;
+  border-left-color:#7f7f7f;
+  border-bottom-color:#f5f5f5;
+  border-right-color:#f5f5f5;
+  width:12px;
+  height:12px;
+  display:inline-block;
+  vertical-align:middle;
+  margin-right:2px;
+}
+
+.filters .filter-subset a.selected::before {
+  background-color:black;
+  box-shadow: inset 0 0 0 3px white;
+}
+
+.filters .filter-subset a,
+.filters .filter-subset a:hover,
+.filters .filter-subset a.selected {
+  color:black;
+  border-bottom: 0px solid transparent;
+}