Update win95 theme for v2.5.0

This commit is contained in:
Andrew 2018-09-14 14:10:44 -07:00
parent 27056ca810
commit 97d5a449f4
1 changed files with 439 additions and 113 deletions

View File

@ -17,6 +17,12 @@ $ui-highlight-color: $win95-window-header;
border-radius:0px; border-radius:0px;
} }
@mixin win95-border-outset-sides-only() {
border-left: 2px solid #efefef;
border-right: 2px solid #404040;
border-radius:0px;
}
@mixin win95-outset() { @mixin win95-outset() {
box-shadow: inset -1px -1px 0px #000000, box-shadow: inset -1px -1px 0px #000000,
inset 1px 1px 0px #ffffff, inset 1px 1px 0px #ffffff,
@ -25,6 +31,12 @@ $ui-highlight-color: $win95-window-header;
border-radius:0px; border-radius:0px;
} }
@mixin win95-outset-no-highlight() {
box-shadow: inset -1px -1px 0px #000000,
inset -2px -2px 0px #808080;
border-radius:0px;
}
@mixin win95-border-inset() { @mixin win95-border-inset() {
border-left: 2px solid #404040; border-left: 2px solid #404040;
border-top: 2px solid #404040; border-top: 2px solid #404040;
@ -63,8 +75,14 @@ $ui-highlight-color: $win95-window-header;
border-top-right-radius: 1px; border-top-right-radius: 1px;
} }
@mixin win95-border-groove() {
border-radius: 0px;
border: 2px groove #bfbfbf;
}
@mixin win95-reset() { @mixin win95-reset() {
box-shadow: unset; box-shadow: unset;
border: 0px solid transparent;
} }
@font-face { @font-face {
@ -462,11 +480,25 @@ body.admin {
} }
.status.status-direct { .status.status-direct {
background-color:$win95-bg; background:$win95-bg;
&:focus, &:active {
background:$win95-bg;
}
}
.focusable:focus .status.status-direct {
background:$win95-bg;
} }
.status__content { [data-whatinput="mouse"], [data-whatinput="touch"] {
.status__content:focus, .status:focus,
.status__wrapper:focus, .status__content__text:focus {
background-color: $win95-bg;
}
}
.status__content, .reply-indicator__content {
font-size:13px; font-size:13px;
color: black;
} }
.status.light .status__relative-time, .status.light .status__relative-time,
@ -509,6 +541,10 @@ body.admin {
color:blue; color:blue;
} }
.status__content {
padding-bottom: 40px;
}
.focusable:focus { .focusable:focus {
background: $win95-bg; background: $win95-bg;
.detailed-status__action-bar { .detailed-status__action-bar {
@ -1096,19 +1132,27 @@ body.admin {
} }
.column-subheading { .column-subheading {
background-color:transparent; background-color:$win95-bg;
color:black; color:black;
@include win95-border-outset-sides-only;
} }
.column { .column {
overflow-y:auto; overflow-y:auto;
} }
.getting-started__wrapper { .getting-started {
background: none;
position:relative; position:relative;
top:-60px; top:-30px;
padding-top:0px; padding-top:30px;
z-index:10; z-index:10;
overflow-y:auto;
background-color: $win95-cyan;
}
.getting-started__wrapper {
padding-top:0px;
box-shadow: inset -1px 0px 0px #000000, box-shadow: inset -1px 0px 0px #000000,
inset 1px 1px 0px #ffffff, inset 1px 1px 0px #ffffff,
@ -1117,8 +1161,6 @@ body.admin {
border-radius:0px; border-radius:0px;
background-color:$win95-bg; background-color:$win95-bg;
border-top:60px solid $win95-cyan;
border-bottom: 2px groove $win95-bg; border-bottom: 2px groove $win95-bg;
height: unset !important; height: unset !important;
@ -1156,12 +1198,127 @@ body.admin {
} }
} }
.getting-started__wrapper::before {
content: "Start";
display:block;
color:black;
font-weight:bold;
font-size:15px;
position:absolute;
top:0px;
left:0px;
padding:5px 15px;
width:50px;
font-size:16px;
padding-left:25px;
background-color:$win95-bg;
z-index:12;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
background-repeat:no-repeat;
background-position:8%;
background-clip:padding-box;
background-size:auto 50%;
@include win95-border-inset();
}
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {
.getting-started__wrapper{ .getting-started__wrapper{
margin-bottom:0px; margin-bottom:0px;
} }
} }
@media screen and (max-width: 360px) {
.getting-started {
top:0px;
padding-top:0px;
}
.getting-started__wrapper::before {
display:none;
}
}
.getting-started__footer {
background-color: $win95-bg;
padding:0px;
padding-bottom:10px;
position:relative;
top:0px;
@include win95-outset-no-highlight();
p {
margin-left: 45px;
}
ul {
display:block;
li {
cursor:pointer;
display:block;
font-size:0px;
padding:0px;
line-height:0;
a {
padding:15px;
padding-left:77px;
line-height:1em;
font-size:16px;
display:block;
color:black;
background-size:32px 32px;
background-repeat:no-repeat;
background-position: 36px 50%;
&:hover {
text-decoration:none;
}
}
&:hover {
background-color: $win95-window-header;
a {
color:white;
}
}
}
}
}
.getting-started__footer::after {
content:"Mastodon 95";
font-weight:bold;
font-size:23px;
color:white;
line-height:30px;
padding-left:20px;
padding-right:40px;
left:0px;
box-sizing:border-box;
bottom:-32px;
display:block;
position:absolute;
background-color:#7f7f7f;
width:1000px;
height:32px;
z-index:11;
border-left: 2px solid #404040;
border-top: 2px solid #efefef;
border-right: 2px solid #efefef;
border-radius:0px;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin:top left;
}
.getting-started__wrapper + .flex-spacer { .getting-started__wrapper + .flex-spacer {
display:none; display:none;
@ -1245,108 +1402,6 @@ body.admin {
&:hover { background-image: url("../images/icon_logout.png"); } &:hover { background-image: url("../images/icon_logout.png"); }
} }
.getting-started__footer {
background-color: $win95-bg;
padding:0px;
position:relative;
top:-62px;
@include win95-outset();
p {
margin-left: 45px;
}
ul {
display:block;
li {
cursor:pointer;
display:block;
font-size:0px;
padding:0px;
line-height:0;
a {
padding:15px;
padding-left:77px;
line-height:1em;
font-size:16px;
display:block;
color:black;
background-size:32px 32px;
background-repeat:no-repeat;
background-position: 36px 50%;
&:hover {
text-decoration:none;
}
}
&:hover {
background-color: $win95-window-header;
a {
color:white;
}
}
}
}
}
.getting-started__wrapper::before {
content: "Start";
display:block;
color:black;
font-weight:bold;
font-size:15px;
position:absolute;
top:-32px;
left:0px;
padding:5px 15px;
width:50px;
font-size:16px;
padding-left:25px;
background-color:$win95-bg;
z-index:12;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
background-repeat:no-repeat;
background-position:8%;
background-clip:padding-box;
background-size:auto 50%;
@include win95-border-inset();
}
.getting-started__footer::after {
content:"Mastodon 95";
font-weight:bold;
font-size:23px;
color:white;
line-height:30px;
padding-left:20px;
padding-right:40px;
left:0px;
box-sizing:border-box;
bottom:-32px;
display:block;
position:absolute;
background-color:#7f7f7f;
width:624.5px;
height:32px;
z-index:11;
border-left: 2px solid #404040;
border-top: 2px solid #efefef;
border-right: 2px solid #efefef;
border-radius:0px;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin:top left;
}
.column .static-content.getting-started { .column .static-content.getting-started {
display:none; display:none;
} }
@ -1363,7 +1418,7 @@ body.admin {
color:white; color:white;
} }
.account__header .account__header__fields { .account__header__fields {
border-left: 1px solid black; border-left: 1px solid black;
border-top: 1px solid black; border-top: 1px solid black;
@ -1436,9 +1491,9 @@ body.admin {
padding: 5px; padding: 5px;
&.active { &.active {
background: $win95-dark-grey; background: $win95-bg;
@include win95-inset(); @include win95-inset();
color: white; color: black;
&:before, &:after { &:before, &:after {
display: none; display: none;
@ -2085,3 +2140,274 @@ a.table-action-link:hover,
background-color: white; background-color: white;
} }
} }
.dashboard__counters > div > div,
.dashboard__counters > div > a {
background-color: $win95-bg;
border: 1px solid black;
border-radius: 1px;
color:black;
&:hover {
background-color: $win95-bg;
}
}
.dashboard__counters__label,
.dashboard__widgets a:not(.name-tag),
.dashboard__counters__num {
color:black;
}
.card {
& > a, & > a:hover {
box-shadow: none;
.card__img {
border-radius: 0px;
border: 1px solid black;
}
.card__bar {
@include win95-outset();
background-color: $win95-bg;
.display-name {
strong, span {
color:black;
}
}
}
}
}
/* Public layout stuff */
body {
background: $win95-cyan;
}
.public-layout {
max-width: 960px;
margin:10px auto;
background: $win95-bg;
padding:0px;
@include win95-outset();
.header {
background: $win95-window-header;
@include win95-border-outset();
height: 22px;
margin: 0px;
padding:0px;
border-radius: 0px;
.brand {
padding: 2px;
}
.nav-button {
@include win95-outset();
background: $win95-bg;
color:black;
margin: 2px;
margin-bottom: 0px;
&:hover {
background: $win95-bg;
color:black;
}
}
}
.footer {
background: none;
&, h4, ul a, .grid .column-2 h4 a {
color: black;
}
}
.button.logo-button {
@include win95-outset();
background: $win95-bg;
color:black;
&:hover {
background: $win95-bg;
color:black;
}
svg {
visibility:hidden;
}
&, &:hover {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
background-repeat:no-repeat;
background-position:8%;
background-clip:padding-box;
background-size:auto 50%;
}
}
.public-account-header {
@include win95-reset();
padding: 4px;
.public-account-header__image {
@include win95-border-slight-inset();
border-radius: 0px;
}
}
.public-account-header__bar {
&, &:before {
background: transparent;
}
.avatar img {
@include win95-border-slight-inset();
filter: saturate(1.8) brightness(1.1);
border-radius: 0px;
background: darken($win95-bg, 9.09%);
}
}
.public-account-header__extra__links {
margin-top: 0px;
a, a strong {
color: black;
}
}
.public-account-header__tabs {
position: relative;
}
.public-account-header__tabs__name {
display: inline-block;
position: relative;
background: $win95-tooltip-yellow;
border: 1px solid black;
padding: 4px;
h1, h1 small {
color:black;
text-shadow: unset;
text-overflow: unset;
}
margin-bottom: 24px;
&:after {
content: "";
display:block;
position:absolute;
left: 0px;
bottom: -20px;
width: 0px;
height: 0px;
border-left: 20px solid $win95-tooltip-yellow;
border-bottom: 20px solid transparent;
}
&:before {
content: "";
display:block;
position:absolute;
left: -1px;
bottom: -22px;
width: 0px;
height: 0px;
border-left: 22px solid black;
border-bottom: 22px solid transparent;
}
}
.public-account-header__tabs__tabs {
.details-counters {
@include win95-border-groove();
.counter {
.counter-number, .counter-label {
color: black;
}
&:after {
border-bottom-width: 0px;
}
&.active {
@include win95-border-slight-inset();
}
}
}
}
.public-account-bio {
@include win95-reset();
@include win95-border-groove();
background: $win95-bg;
margin-right: 10px;
.account__header__content, .roles {
color: black;
}
}
.public-account-bio__extra {
color: black;
}
.status__prepend {
padding-top:5px;
}
.status__content ,
.reply-indicator__content {
.status__content__spoiler-link {
color: $win95-dark-grey;
}
}
.account__section-headline {
margin-left: 10px;
}
.card-grid {
margin-left: 10px;
}
}
@media screen and (max-width: 1255px) {
.container {
width: 100%;
padding: 0px;
}
}
.hero-widget {
box-shadow: none;
@include win95-border-groove();
background: $win95-bg;
padding: 8px;
margin-right: 10px;
margin-top: 10px;
}
.hero-widget__text {
background: none;
color: black;
}
.hero-widget__img {
background: none;
border-radius: 0px;
border: 1px solid black;
img {
border-radius: 0px;
}
}
.activity-stream {
@include win95-reset();
@include win95-border-groove();
background: $win95-bg;
margin-top: 10px;
margin-left: 10px;
.entry {
background: none;
&:first-child:last-child, &:first-child {
.detailed-status, .status, .load-more {
border-radius: 0px;
}
}
}
}
.nothing-here {
@include win95-reset();
background: transparent;
color: black;
}