Updates and fixes to win95 theme

This commit is contained in:
Andrew 2017-11-14 01:22:48 -08:00
parent 2827f852c0
commit c238444188
1 changed files with 206 additions and 13 deletions

View File

@ -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