Merge pull request #333 from glitch-soc/win95-update

Update win95 theme from cybrespace/mastodon

app/javascript/styles/win95.scss

@@ -54,7 +54,6 @@ $ui-highlight-color: $win95-window-header;
   border-radius:0px;
 }
 
-
 @mixin win95-tab() {
   box-shadow: inset -1px 0px 0px #000000,
               inset 1px 0px 0px #ffffff,
@@ -122,7 +121,6 @@ $ui-highlight-color: $win95-window-header;
   vertical-align: middle;
 }
 
-
 /* main win95 style */
 
 body {
@@ -189,10 +187,31 @@ body.admin {
 .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 {
@@ -219,6 +238,7 @@ body.admin {
   border-bottom-width:0px;
   color:white;
   font-weight:bold;
+  align-items:baseline;
 }
 
 .column-header__wrapper.active {
@@ -237,6 +257,11 @@ body.admin {
   color:white;
 }
 
+.column-header__buttons {
+  max-height: 20px;
+  margin-right:0px;
+}
+
 .column-header__button {
   background: $win95-bg;
   color: black;
@@ -246,6 +271,10 @@ body.admin {
   padding:0px 2px;
   margin-top:2px;
   @include win95-outset()
+
+  &:hover {
+    color: black;
+  }
 }
 
 .column-header__button.active, .column-header__button.active:hover {
@@ -308,6 +337,13 @@ body.admin {
   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;
@@ -679,7 +715,6 @@ body.admin {
   font-weight:bold;
 }
 
-
 .drawer__header {
   background: $win95-bg;
   @include win95-border-outset()
@@ -820,12 +855,13 @@ body.admin {
   font-weight:bold;
 }
 
-.autosuggest-textarea__textarea, .spoiler-input__input {
+.compose-form .autosuggest-textarea__textarea,
+.compose-form .spoiler-input__input {
   border-radius:0px;
   @include win95-border-slight-inset();
 }
 
-.autosuggest-textarea__textarea {
+.compose-form .autosuggest-textarea__textarea {
   border-bottom:0px;
 }
 
@@ -840,13 +876,30 @@ body.admin {
   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;
-  border:2px groove $win95-bg;
-  margin-top:4px;
-  padding:4px 8px;
+}
+
+.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
@@ -860,7 +913,11 @@ body.admin {
   background:$win95-window-header;
 }
 
-.privacy-dropdown.active .privacy-dropdown__dropdown {
+.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()
@@ -934,6 +991,10 @@ body.admin {
   display:none;
 }
 
+.emoji-picker-dropdown__menu {
+  z-index:2;
+}
+
 .emoji-dialog.with-search {
   box-shadow:unset;
   border-radius:0px;
@@ -1026,31 +1087,43 @@ body.admin {
 .column-subheading {
   background-color:$win95-bg;
   color:black;
-  font-size:0px;
   border-bottom: 2px groove $win95-bg;
-  padding:0px;
-  margin:0px;
+  text-transform: none;
+  font-size: 16px;
 }
 
 .column-link {
   background-color:transparent;
-  background-size:32px 32px;
-  background-repeat:no-repeat;
-  background-position: 36px 50%;
   color:black;
-  padding-left:40px;
-
   &: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%;
-    color:white;
-  }
+    padding-left:40px;
+
+    &:hover {
+      background-size:32px 32px;
+      background-repeat:no-repeat;
+      background-position: 36px 50%;
+    }
 
-  i {
-    font-size: 0px;
-    width:32px;
+    i {
+      font-size: 0px;
+      width:32px;
+    }
   }
 }
 
@@ -1070,6 +1143,18 @@ body.admin {
   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"); }
@@ -1124,6 +1209,14 @@ body.admin {
   background-color:$win95-bg;
 }
 
+.column .static-content.getting-started {
+  display:none;
+}
+
+.keyboard-shortcuts kbd {
+  background-color: $win95-bg;
+}
+
 .account__header {
   background-color:#7f7f7f;
 }
@@ -1132,6 +1225,23 @@ body.admin {
   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;
@@ -1307,7 +1417,6 @@ body.admin {
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFnpUWHRUaXRsZQAACJnLzU9JzElKBwALgwLXaCRlPwAAABd6VFh0QXV0aG9yAAAImUvOKMrPS8wBAAuaAugOwWPyAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII=');
 }
 
-
 .admin-wrapper::before {
   position:absolute;
   top:0px;
@@ -1652,4 +1761,3 @@ a.table-action-link:hover,
   color:black;
   border-bottom: 0px solid transparent;
 }
-