From 97d5a449f46aac6d98942efbdea45fb85793d922 Mon Sep 17 00:00:00 2001
From: Andrew <andrewLchronister@gmail.com>
Date: Fri, 14 Sep 2018 14:10:44 -0700
Subject: [PATCH] Update win95 theme for v2.5.0

---
 app/javascript/styles/win95.scss | 552 ++++++++++++++++++++++++-------
 1 file changed, 439 insertions(+), 113 deletions(-)

diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss
index 1c01259cc..e6e4c2dc0 100644
--- a/app/javascript/styles/win95.scss
+++ b/app/javascript/styles/win95.scss
@@ -17,6 +17,12 @@ $ui-highlight-color: $win95-window-header;
   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,
@@ -25,6 +31,12 @@ $ui-highlight-color: $win95-window-header;
   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;
@@ -63,8 +75,14 @@ $ui-highlight-color: $win95-window-header;
   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 {
@@ -462,11 +480,25 @@ body.admin {
 }
 
 .status.status-direct {
-  background-color:$win95-bg;
+  background:$win95-bg;
+  &:focus, &:active {
+    background:$win95-bg;
+  }
+}
+.focusable:focus .status.status-direct {
+  background:$win95-bg;
 }
 
-.status__content {
+[data-whatinput="mouse"], [data-whatinput="touch"] {
+  .status__content:focus, .status:focus,
+  .status__wrapper:focus, .status__content__text:focus {
+    background-color: $win95-bg;
+  }
+}
+
+.status__content, .reply-indicator__content {
   font-size:13px;
+  color: black;
 }
 
 .status.light .status__relative-time,
@@ -509,6 +541,10 @@ body.admin {
   color:blue;
 }
 
+.status__content {
+  padding-bottom: 40px;
+}
+
 .focusable:focus {
   background: $win95-bg;
   .detailed-status__action-bar {
@@ -1096,19 +1132,27 @@ body.admin {
 }
 
 .column-subheading {
-  background-color:transparent;
+  background-color:$win95-bg;
   color:black;
+  @include win95-border-outset-sides-only;
 }
 
 .column {
   overflow-y:auto;
 }
 
-.getting-started__wrapper {
+.getting-started {
+  background: none;
   position:relative;
-  top:-60px;
-  padding-top:0px;
+  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,
@@ -1117,8 +1161,6 @@ body.admin {
   border-radius:0px;
 
   background-color:$win95-bg;
-
-  border-top:60px solid $win95-cyan;
   border-bottom: 2px groove $win95-bg;
 
   height: unset !important;
@@ -1156,12 +1198,127 @@ body.admin {
   }
 }
 
+.getting-started__wrapper::before {
+  content: "Start";
+  display:block;
+  color:black;
+  font-weight:bold;
+  font-size:15px;
+  position:absolute;
+  top:0px;
+  left:0px;
+  padding:5px 15px;
+  width:50px;
+  font-size:16px;
+  padding-left:25px;
+  background-color:$win95-bg;
+  z-index:12;
+
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
+  background-repeat:no-repeat;
+  background-position:8%;
+  background-clip:padding-box;
+  background-size:auto 50%;
+
+  @include win95-border-inset();
+}
+
+
 @media screen and (min-width: 360px) {
   .getting-started__wrapper{
     margin-bottom:0px;
   }
 }
 
+@media screen and (max-width: 360px) {
+  .getting-started {
+    top:0px;
+    padding-top:0px;
+  }
+
+  .getting-started__wrapper::before {
+    display:none;
+  }
+}
+
+.getting-started__footer {
+  background-color: $win95-bg;
+  padding:0px;
+  padding-bottom:10px;
+  position:relative;
+  top:0px;
+  
+  @include win95-outset-no-highlight();
+  
+  p {
+    margin-left: 45px;
+  }
+
+  ul {
+    display:block;
+    li {
+      cursor:pointer;
+      display:block;
+      font-size:0px;
+      padding:0px;
+      line-height:0;
+      a {
+        padding:15px;
+        padding-left:77px;
+        line-height:1em;
+        font-size:16px;
+        display:block;
+        color:black;
+        background-size:32px 32px;
+        background-repeat:no-repeat;
+        background-position: 36px 50%;
+        &:hover {
+          text-decoration:none;
+        }
+      }
+
+      &:hover {
+        background-color: $win95-window-header;
+        a {
+          color:white;
+        }
+      }
+    }
+  }
+}
+
+.getting-started__footer::after {
+  content:"Mastodon 95";
+  font-weight:bold;
+  font-size:23px;
+  color:white;
+  line-height:30px;
+  padding-left:20px;
+  padding-right:40px;
+
+  left:0px;
+  box-sizing:border-box;
+  bottom:-32px;
+  display:block;
+  position:absolute;
+  background-color:#7f7f7f;
+  width:1000px;
+  height:32px;
+
+  z-index:11;
+
+  border-left: 2px solid #404040;
+  border-top: 2px solid #efefef;
+  border-right: 2px solid #efefef;
+  border-radius:0px;
+
+  -ms-transform: rotate(-90deg);
+
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  transform-origin:top left;
+}
+
 
 .getting-started__wrapper + .flex-spacer {
   display:none;
@@ -1245,108 +1402,6 @@ body.admin {
   &:hover { background-image: url("../images/icon_logout.png"); }
 }
 
-.getting-started__footer {
-  background-color: $win95-bg;
-  padding:0px;
-  position:relative;
-  top:-62px;
-  
-  @include win95-outset();
-  
-  p {
-    margin-left: 45px;
-  }
-
-  ul {
-    display:block;
-    li {
-      cursor:pointer;
-      display:block;
-      font-size:0px;
-      padding:0px;
-      line-height:0;
-      a {
-        padding:15px;
-        padding-left:77px;
-        line-height:1em;
-        font-size:16px;
-        display:block;
-        color:black;
-        background-size:32px 32px;
-        background-repeat:no-repeat;
-        background-position: 36px 50%;
-        &:hover {
-          text-decoration:none;
-        }
-      }
-
-      &:hover {
-        background-color: $win95-window-header;
-        a {
-          color:white;
-        }
-      }
-    }
-  }
-}
-
-.getting-started__wrapper::before {
-  content: "Start";
-  display:block;
-  color:black;
-  font-weight:bold;
-  font-size:15px;
-  position:absolute;
-  top:-32px;
-  left:0px;
-  padding:5px 15px;
-  width:50px;
-  font-size:16px;
-  padding-left:25px;
-  background-color:$win95-bg;
-  z-index:12;
-
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
-  background-repeat:no-repeat;
-  background-position:8%;
-  background-clip:padding-box;
-  background-size:auto 50%;
-
-  @include win95-border-inset();
-}
-
-.getting-started__footer::after {
-  content:"Mastodon 95";
-  font-weight:bold;
-  font-size:23px;
-  color:white;
-  line-height:30px;
-  padding-left:20px;
-  padding-right:40px;
-
-  left:0px;
-  box-sizing:border-box;
-  bottom:-32px;
-  display:block;
-  position:absolute;
-  background-color:#7f7f7f;
-  width:624.5px;
-  height:32px;
-
-  z-index:11;
-
-  border-left: 2px solid #404040;
-  border-top: 2px solid #efefef;
-  border-right: 2px solid #efefef;
-  border-radius:0px;
-
-  -ms-transform: rotate(-90deg);
-
-  -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-  transform-origin:top left;
-}
-
 .column .static-content.getting-started {
   display:none;
 }
@@ -1363,7 +1418,7 @@ body.admin {
   color:white;
 }
 
-.account__header .account__header__fields {
+.account__header__fields {
   border-left: 1px solid black;
   border-top: 1px solid black;
 
@@ -1436,9 +1491,9 @@ body.admin {
     padding: 5px;
 
     &.active {
-      background: $win95-dark-grey;
+      background: $win95-bg;
       @include win95-inset();
-      color: white;
+      color: black;
 
       &:before, &:after {
         display: none;
@@ -2085,3 +2140,274 @@ a.table-action-link:hover,
     background-color: white;
   }
 }
+
+.dashboard__counters > div > div, 
+.dashboard__counters > div > a {
+    background-color: $win95-bg;
+    border: 1px solid black;
+    border-radius: 1px;
+    color:black;
+
+    &:hover {
+      background-color: $win95-bg;
+    }
+}
+
+.dashboard__counters__label, 
+.dashboard__widgets a:not(.name-tag),
+.dashboard__counters__num {
+    color:black;
+}
+
+.card {
+  & > a, & > a:hover {
+    box-shadow: none;
+
+    .card__img {
+      border-radius: 0px;
+      border: 1px solid black;
+    }
+
+    .card__bar {
+      @include win95-outset();
+      background-color: $win95-bg;
+
+      .display-name {
+          strong, span {
+          color:black;
+        }
+      }
+    }
+  }
+}
+
+/* Public layout stuff */
+body {
+  background: $win95-cyan;
+}
+
+.public-layout {
+  max-width: 960px;
+  margin:10px auto;
+  background: $win95-bg;
+  padding:0px;
+  @include win95-outset();
+
+  .header {
+    background: $win95-window-header;
+    @include win95-border-outset();
+    height: 22px;
+    margin: 0px;
+    padding:0px;
+    border-radius: 0px;
+    
+    .brand {
+      padding: 2px;
+    }
+
+    .nav-button {
+      @include win95-outset();
+      background: $win95-bg;
+      color:black;
+      margin: 2px;
+      margin-bottom: 0px;
+      &:hover {
+        background: $win95-bg;
+        color:black;
+      }
+    }
+  }
+  .footer {
+    background: none;
+    &, h4, ul a, .grid .column-2 h4 a {
+      color: black;
+    }
+  }
+
+  .button.logo-button {
+    @include win95-outset();
+    background: $win95-bg;
+    color:black;
+    &:hover {
+      background: $win95-bg;
+      color:black;
+    }
+    svg {
+       visibility:hidden;
+    }
+    &, &:hover {
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
+      background-repeat:no-repeat;
+      background-position:8%;
+      background-clip:padding-box;
+      background-size:auto 50%;
+    }
+  }
+
+  .public-account-header {
+    @include win95-reset();
+    padding: 4px;
+    .public-account-header__image {
+      @include win95-border-slight-inset();
+      border-radius: 0px;
+    }
+  }
+
+  .public-account-header__bar {
+    &, &:before { 
+      background: transparent; 
+    }
+    .avatar img {
+      @include win95-border-slight-inset();
+      filter: saturate(1.8) brightness(1.1);
+      border-radius: 0px;
+      background: darken($win95-bg, 9.09%);
+    }
+  }
+  .public-account-header__extra__links {
+    margin-top: 0px;
+    a, a strong {
+      color: black;
+    }
+  }
+
+  .public-account-header__tabs {
+    position: relative;
+  }
+
+  .public-account-header__tabs__name {
+    display: inline-block;
+    position: relative;
+    background: $win95-tooltip-yellow;
+    border: 1px solid black;
+    padding: 4px;
+
+    h1, h1 small {
+      color:black;
+      text-shadow: unset;
+      text-overflow: unset;
+    }
+
+    margin-bottom: 24px;
+
+    &:after {
+      content: "";
+      display:block;
+      position:absolute;
+      left: 0px;
+      bottom: -20px;
+      width: 0px;
+      height: 0px;
+      border-left: 20px solid $win95-tooltip-yellow;
+      border-bottom: 20px solid transparent;
+    }
+    &:before {
+      content: "";
+      display:block;
+      position:absolute;
+      left: -1px;
+      bottom: -22px;
+      width: 0px;
+      height: 0px;
+      border-left: 22px solid black;
+      border-bottom: 22px solid transparent;
+    }
+  }
+
+  .public-account-header__tabs__tabs {
+    .details-counters {
+      @include win95-border-groove();
+      .counter {
+        .counter-number, .counter-label {
+          color: black;
+        }
+        &:after {
+          border-bottom-width: 0px;
+        }
+        &.active {
+         @include win95-border-slight-inset();
+        }
+      }
+    }
+  }
+
+  .public-account-bio {
+    @include win95-reset();
+    @include win95-border-groove();
+    background: $win95-bg;
+    margin-right: 10px;
+    .account__header__content, .roles {
+      color: black;
+    }
+  }
+  .public-account-bio__extra {
+    color: black;
+  }
+
+  .status__prepend {
+    padding-top:5px;
+  }
+  .status__content ,
+  .reply-indicator__content {
+    .status__content__spoiler-link {
+      color: $win95-dark-grey;
+    }
+  }
+  .account__section-headline {
+    margin-left: 10px;
+  }
+  .card-grid {
+    margin-left: 10px;
+  }
+}
+
+@media screen and (max-width: 1255px) {
+  .container {
+    width: 100%;
+    padding: 0px;
+  } 
+}
+
+.hero-widget {
+  box-shadow: none;
+  @include win95-border-groove();
+  background: $win95-bg;
+  padding: 8px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+.hero-widget__text {
+  background: none;
+  color: black;
+}
+.hero-widget__img {
+  background: none;
+  border-radius: 0px;
+  border: 1px solid black;
+  img {
+    border-radius: 0px;
+  }
+}
+
+.activity-stream {
+  @include win95-reset();
+  @include win95-border-groove();
+
+  background: $win95-bg;
+  margin-top: 10px;
+  margin-left: 10px;
+  .entry {
+    background: none;
+    &:first-child:last-child, &:first-child {
+      .detailed-status, .status, .load-more {
+        border-radius: 0px;
+      }
+    }
+  }
+}
+
+.nothing-here {
+  @include win95-reset();
+  background: transparent;
+  color: black;
+}