forked from treehouse/mastodon
Updates and fixes to win95 theme
Andrew
parent
ed574fbc09
commit
39c0b6ceb3
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue