Updates and fixes to win95 theme
This commit is contained in:
parent
120fc4ef61
commit
1d0a72c00b
1 changed files with 206 additions and 13 deletions
|
@ -1,6 +1,12 @@
|
||||||
$win95-bg: #bfbfbf;
|
$win95-bg: #bfbfbf;
|
||||||
|
$win95-dark-grey: #404040;
|
||||||
|
$win95-mid-grey: #808080;
|
||||||
$win95-window-header: #00007f;
|
$win95-window-header: #00007f;
|
||||||
$win95-tooltip-yellow: #ffffcc;
|
$win95-tooltip-yellow: #ffffcc;
|
||||||
|
$win95-blue: blue;
|
||||||
|
|
||||||
|
$ui-base-lighter-color: $win95-dark-grey;
|
||||||
|
$ui-highlight-color: $win95-window-header;
|
||||||
|
|
||||||
@mixin win95-border-outset() {
|
@mixin win95-border-outset() {
|
||||||
border-left: 2px solid #efefef;
|
border-left: 2px solid #efefef;
|
||||||
|
@ -67,6 +73,53 @@ $win95-tooltip-yellow: #ffffcc;
|
||||||
|
|
||||||
@import 'application';
|
@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 {
|
body {
|
||||||
font-size:13px;
|
font-size:13px;
|
||||||
font-family: "MS Sans Serif", "premillenium", sans-serif;
|
font-family: "MS Sans Serif", "premillenium", sans-serif;
|
||||||
|
@ -417,15 +470,35 @@ body.admin {
|
||||||
.status__action-bar-dropdown {
|
.status__action-bar-dropdown {
|
||||||
margin-left:auto;
|
margin-left:auto;
|
||||||
margin-right:10px;
|
margin-right:10px;
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
min-width:28px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.status.light .status__content a {
|
.status.light .status__content a {
|
||||||
color:blue;
|
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 {
|
.dropdown__trigger.icon-button {
|
||||||
padding-right:6px;
|
padding-right:6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detailed-status__action-bar-dropdown .icon-button {
|
||||||
|
min-width:28px;
|
||||||
|
}
|
||||||
|
|
||||||
.detailed-status {
|
.detailed-status {
|
||||||
background:white;
|
background:white;
|
||||||
background-clip:padding-box;
|
background-clip:padding-box;
|
||||||
|
@ -464,12 +537,11 @@ body.admin {
|
||||||
@include win95-border-outset()
|
@include win95-border-outset()
|
||||||
padding:0px 0px 0px 0px;
|
padding:0px 0px 0px 0px;
|
||||||
margin-right:4px;
|
margin-right:4px;
|
||||||
}
|
|
||||||
.icon-button,
|
|
||||||
.icon-button.inverted,
|
|
||||||
.icon-button:hover,
|
|
||||||
.icon-button.inverted:hover {
|
|
||||||
color:#3f3f3f;
|
color:#3f3f3f;
|
||||||
|
&.inverted, &:hover, &.inverted:hover, &:active, &:focus {
|
||||||
|
color:#3f3f3f;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button:active {
|
.icon-button:active {
|
||||||
|
@ -487,6 +559,13 @@ body.admin {
|
||||||
border:none;
|
border:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-button.star-icon.active {
|
||||||
|
color: $gold-star;
|
||||||
|
&:active, &:hover, &:focus {
|
||||||
|
color: $gold-star;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.icon-button.star-icon > i {
|
.icon-button.star-icon > i {
|
||||||
background:$win95-bg;
|
background:$win95-bg;
|
||||||
@include win95-border-outset()
|
@include win95-border-outset()
|
||||||
|
@ -497,6 +576,10 @@ body.admin {
|
||||||
@include win95-border-inset();
|
@include win95-border-inset();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-icon-button {
|
||||||
|
color:$win95-dark-grey;
|
||||||
|
}
|
||||||
|
|
||||||
.detailed-status__action-bar-dropdown {
|
.detailed-status__action-bar-dropdown {
|
||||||
margin-left:auto;
|
margin-left:auto;
|
||||||
justify-content:right;
|
justify-content:right;
|
||||||
|
@ -672,6 +755,20 @@ body.admin {
|
||||||
background-color:white;
|
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 {
|
.search-results__header {
|
||||||
background-color: $win95-bg;
|
background-color: $win95-bg;
|
||||||
color:black;
|
color:black;
|
||||||
|
@ -690,6 +787,18 @@ body.admin {
|
||||||
color:white;
|
color:white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search__icon .fa {
|
||||||
|
color:#808080;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
opacity:1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #808080;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.drawer__inner,
|
.drawer__inner,
|
||||||
.drawer__inner.darker {
|
.drawer__inner.darker {
|
||||||
background-color:$win95-bg;
|
background-color:$win95-bg;
|
||||||
|
@ -857,16 +966,26 @@ body.admin {
|
||||||
border-radius:0px;
|
border-radius:0px;
|
||||||
color:black;
|
color:black;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover, .button:focus {
|
&:hover, &:focus, &:disabled {
|
||||||
background-color:$win95-bg;
|
background-color:$win95-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:active {
|
&:active {
|
||||||
@include win95-inset();
|
@include win95-inset();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: #808080;
|
||||||
|
text-shadow: 1px 1px 0px #efefef;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
@include win95-outset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
#Getting-started {
|
#Getting-started {
|
||||||
background-color:$win95-bg;
|
background-color:$win95-bg;
|
||||||
@include win95-inset();
|
@include win95-inset();
|
||||||
|
@ -1029,13 +1148,18 @@ body.admin {
|
||||||
@include win95-inset();
|
@include win95-inset();
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown--active .dropdown__content > ul {
|
.dropdown--active .dropdown__content > ul,
|
||||||
|
.dropdown-menu {
|
||||||
background:$win95-tooltip-yellow;
|
background:$win95-tooltip-yellow;
|
||||||
border-radius:0px;
|
border-radius:0px;
|
||||||
border:1px solid black;
|
border:1px solid black;
|
||||||
box-shadow:unset;
|
box-shadow:unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-menu a {
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown--active::after {
|
.dropdown--active::after {
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
@ -1055,7 +1179,9 @@ body.admin {
|
||||||
text-decoration:underline;
|
text-decoration:underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown__sep {
|
.dropdown__sep,
|
||||||
|
.dropdown-menu__separator
|
||||||
|
{
|
||||||
border-color:#7f7f7f;
|
border-color:#7f7f7f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1206,6 +1332,23 @@ body.admin {
|
||||||
overflow:hidden;
|
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 {
|
.admin-wrapper .sidebar-wrapper {
|
||||||
position:static;
|
position:static;
|
||||||
height:auto;
|
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 {
|
.flash-message {
|
||||||
background-color:$win95-tooltip-yellow;
|
background-color:$win95-tooltip-yellow;
|
||||||
color:black;
|
color:black;
|
||||||
|
@ -1376,11 +1549,13 @@ body.admin {
|
||||||
.admin-wrapper .content > p,
|
.admin-wrapper .content > p,
|
||||||
.admin-wrapper .content .muted-hint,
|
.admin-wrapper .content .muted-hint,
|
||||||
.simple_form span.hint,
|
.simple_form span.hint,
|
||||||
|
.simple_form h4,
|
||||||
.simple_form .check_boxes .checkbox label,
|
.simple_form .check_boxes .checkbox label,
|
||||||
.simple_form .input.with_label.boolean .label_input > label,
|
.simple_form .input.with_label.boolean .label_input > label,
|
||||||
.filters .filter-subset a,
|
.filters .filter-subset a,
|
||||||
.simple_form .input.radio_buttons .radio label,
|
.simple_form .input.radio_buttons .radio label,
|
||||||
a.table-action-link,
|
a.table-action-link,
|
||||||
|
a.table-action-link:hover,
|
||||||
.simple_form .input.with_block_label > label,
|
.simple_form .input.with_block_label > label,
|
||||||
.simple_form p.hint {
|
.simple_form p.hint {
|
||||||
color:black;
|
color:black;
|
||||||
|
@ -1399,6 +1574,10 @@ a.table-action-link,
|
||||||
color:black;
|
color:black;
|
||||||
background-color:white;
|
background-color:white;
|
||||||
@include win95-border-slight-inset();
|
@include win95-border-slight-inset();
|
||||||
|
|
||||||
|
&:active, &:focus {
|
||||||
|
background-color:white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple_form button,
|
.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 .button.negative,
|
.simple_form .button.negative,
|
||||||
.simple_form .block-button.negative
|
.simple_form .block-button.negative
|
||||||
|
|
Loading…
Reference in a new issue