Update win95 theme for v2.5.0
This commit is contained in:
Andrew
parent
27056ca810
commit
97d5a449f4
|
|
@ -17,6 +17,12 @@ $ui-highlight-color: $win95-window-header;
|
|||
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() {
|
||||
box-shadow: inset -1px -1px 0px #000000,
|
||||
inset 1px 1px 0px #ffffff,
|
||||
|
|
@ -25,6 +31,12 @@ $ui-highlight-color: $win95-window-header;
|
|||
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() {
|
||||
border-left: 2px solid #404040;
|
||||
border-top: 2px solid #404040;
|
||||
|
|
@ -63,8 +75,14 @@ $ui-highlight-color: $win95-window-header;
|
|||
border-top-right-radius: 1px;
|
||||
}
|
||||
|
||||
@mixin win95-border-groove() {
|
||||
border-radius: 0px;
|
||||
border: 2px groove #bfbfbf;
|
||||
}
|
||||
|
||||
@mixin win95-reset() {
|
||||
box-shadow: unset;
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -462,11 +480,25 @@ body.admin {
|
|||
}
|
||||
|
||||
.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;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.status.light .status__relative-time,
|
||||
|
|
@ -509,6 +541,10 @@ body.admin {
|
|||
color:blue;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.focusable:focus {
|
||||
background: $win95-bg;
|
||||
.detailed-status__action-bar {
|
||||
|
|
@ -1096,19 +1132,27 @@ body.admin {
|
|||
}
|
||||
|
||||
.column-subheading {
|
||||
background-color:transparent;
|
||||
background-color:$win95-bg;
|
||||
color:black;
|
||||
@include win95-border-outset-sides-only;
|
||||
}
|
||||
|
||||
.column {
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.getting-started__wrapper {
|
||||
.getting-started {
|
||||
background: none;
|
||||
position:relative;
|
||||
top:-60px;
|
||||
padding-top:0px;
|
||||
top:-30px;
|
||||
padding-top:30px;
|
||||
z-index:10;
|
||||
overflow-y:auto;
|
||||
background-color: $win95-cyan;
|
||||
}
|
||||
|
||||
.getting-started__wrapper {
|
||||
padding-top:0px;
|
||||
|
||||
box-shadow: inset -1px 0px 0px #000000,
|
||||
inset 1px 1px 0px #ffffff,
|
||||
|
|
@ -1117,8 +1161,6 @@ body.admin {
|
|||
border-radius:0px;
|
||||
|
||||
background-color:$win95-bg;
|
||||
|
||||
border-top:60px solid $win95-cyan;
|
||||
border-bottom: 2px groove $win95-bg;
|
||||
|
||||
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) {
|
||||
.getting-started__wrapper{
|
||||
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 {
|
||||
display:none;
|
||||
|
|
@ -1245,108 +1402,6 @@ body.admin {
|
|||
&: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 {
|
||||
display:none;
|
||||
}
|
||||
|
|
@ -1363,7 +1418,7 @@ body.admin {
|
|||
color:white;
|
||||
}
|
||||
|
||||
.account__header .account__header__fields {
|
||||
.account__header__fields {
|
||||
border-left: 1px solid black;
|
||||
border-top: 1px solid black;
|
||||
|
||||
|
|
@ -1436,9 +1491,9 @@ body.admin {
|
|||
padding: 5px;
|
||||
|
||||
&.active {
|
||||
background: $win95-dark-grey;
|
||||
background: $win95-bg;
|
||||
@include win95-inset();
|
||||
color: white;
|
||||
color: black;
|
||||
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
|
|
@ -2085,3 +2140,274 @@ a.table-action-link:hover,
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue