Updates and fixes to win95 theme

1 files changed, 206 insertions, 13 deletions

diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss
index 994fab4bf..885837b53 100644
--- a/app/javascript/styles/win95.scss
+++ b/app/javascript/styles/win95.scss
@@ -1,6 +1,12 @@
 $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;
@@ -67,6 +73,53 @@ $win95-tooltip-yellow: #ffffcc;
 
 @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;
@@ -417,15 +470,35 @@ body.admin {
 .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;
@@ -464,12 +537,11 @@ body.admin {
   @include win95-border-outset()
   padding:0px 0px 0px 0px;
   margin-right:4px;
-}
-.icon-button,
-.icon-button.inverted,
-.icon-button:hover,
-.icon-button.inverted:hover {
+
   color:#3f3f3f;
+  &.inverted, &:hover, &.inverted:hover, &:active, &:focus {
+    color:#3f3f3f;
+  }
 }
 
 .icon-button:active {
@@ -487,6 +559,13 @@ body.admin {
   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()
@@ -497,6 +576,10 @@ body.admin {
   @include win95-border-inset();
 }
 
+.text-icon-button {
+  color:$win95-dark-grey;
+}
+
 .detailed-status__action-bar-dropdown {
   margin-left:auto;
   justify-content:right;
@@ -672,6 +755,20 @@ body.admin {
   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;
@@ -690,6 +787,18 @@ body.admin {
   color:white;
 }
 
+.search__icon .fa {
+  color:#808080;
+
+  &.active {
+    opacity:1.0;
+  }
+
+  &:hover {
+    color: #808080;
+  }
+}
+
 .drawer__inner,
 .drawer__inner.darker {
   background-color:$win95-bg;
@@ -857,14 +966,24 @@ body.admin {
   border-radius:0px;
   color:black;
   font-weight:bold;
-}
 
-.button:hover, .button:focus {
-  background-color:$win95-bg;
-}
+  &: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:active {
-  @include win95-inset();
 }
 
 #Getting-started {
@@ -1029,13 +1148,18 @@ body.admin {
   @include win95-inset();
 }
 
-.dropdown--active .dropdown__content > ul {
+.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;
 }
@@ -1055,7 +1179,9 @@ body.admin {
   text-decoration:underline;
 }
 
-.dropdown__sep {
+.dropdown__sep,
+.dropdown-menu__separator
+{
   border-color:#7f7f7f;
 }
 
@@ -1206,6 +1332,23 @@ body.admin {
   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;
@@ -1354,6 +1497,36 @@ body.admin {
   }
 }
 
+@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;
@@ -1376,11 +1549,13 @@ body.admin {
 .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;
@@ -1399,6 +1574,10 @@ a.table-action-link,
   color:black;
   background-color:white;
   @include win95-border-slight-inset();
+
+  &:active, &:focus {
+    background-color:white;
+  }
 }
 
 .simple_form button, 
@@ -1415,6 +1594,20 @@ a.table-action-link,
   }
 }
 
+.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