$win95-window-header: #00007f;
$win95-tooltip-yellow: #ffffcc;
$win95-blue: blue;
+$win95-cyan: #008080;
$ui-base-lighter-color: $win95-dark-grey;
$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,
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;
border-radius:0px;
}
+
@mixin win95-tab() {
box-shadow: inset -1px 0px 0px #000000,
inset 1px 0px 0px #ffffff,
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 {
/* borrowed from cybrespace style: wider columns and full column width images */
@media screen and (min-width: 1300px) {
- .column {
+ .drawer {
+ width: 17%; /* Not part of the flex fun */
+ max-width: 400px;
+ min-width: 330px;
+ }
+ .layout-multiple-columns .column {
flex-grow: 1 !important;
max-width: 400px;
}
+}
- .drawer {
- width: 17%;
- max-width: 400px;
- min-width: 330px;
+/* Don't show outline around statuses if we're in
+ * mouse or touch mode (rather than keyboard) */
+[data-whatinput="mouse"], [data-whatinput="touch"] {
+ .status__content:focus, .status:focus,
+ .status__wrapper:focus, .status__content__text:focus {
+ outline: none;
}
}
-.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);
+/* Less emphatic show more */
+.status__content__read-more-button {
+ font-size: 14px;
+ color: $dark-text-color;
+
+ .status__prepend-icon {
+ padding-right: 4px;
+ }
+}
+
+/* Show a little arrowey thing after the time in a
+ * status to signal that you can click it to see
+ * a detailed view */
+.status time:after,
+.detailed-status__datetime span:after {
+ font: normal normal normal 14px/1 FontAwesome;
+ content: "\00a0\00a0\f08e";
+}
+
+/* Don't display the elephant mascot (we have our
+ * own, thanks) */
+.drawer__inner__mastodon {
+ display: none;
+}
+
+/* Let the compose area/drawer be short, but
+ * expand if necessary */
+.drawer .drawer__inner {
+ overflow: visible;
+ height:inherit;
+ background-image: none;
+}
+.drawer__pager {
+ overflow-y:auto;
+}
+
+/* Put a reasonable background on the single-column compose form */
+.layout-single-column .compose-panel {
+ background-color: $ui-base-color;
+ height: auto;
+ max-height: 100%;
+ overflow-y: visible;
+ margin-top: 65px;
}
-.detailed-status .media-gallery,
-.detailed-status .video-player {
- margin-left:-5px;
- width: calc(100% + 9px);
- max-width: calc(100% + 9px);
+/* Better distinguish the search bar */
+.layout-single-column .compose-panel .search {
+ position:relative;
+ top: -55px;
+ margin-bottom: -55px;
}
-.video-player video {
- transform: unset;
- top: unset;
+/* Use display: none instead of visibility:hidden
+ * to hide the suggested follows list on non-mobile */
+@media screen and (min-width: 630px) {
+ .search-results .trends {
+ display:none;
+ }
}
-.detailed-status .media-spoiler,
-.status .media-spoiler {
- height: 100%!important;
- vertical-align: middle;
+/* Don't display the weird triangles on the modal layout,
+ * because they look strange on cybrespace themes. */
+.modal-layout__mastodon {
+ display:none;
}
/* main win95 style */
+html {
+ scrollbar-color: $win95-mid-grey transparent;
+}
+
body {
font-size:13px;
font-family: "MS Sans Serif", "premillenium", sans-serif;
.ui,
.ui .columns-area,
body.admin {
- background: #008080;
+ background: $win95-cyan;
}
.loading-bar {
background-color: #000080;
}
+.tabs-bar__wrapper {
+ background-color: $win95-cyan;
+}
+
.tabs-bar {
background: $win95-bg;
@include win95-outset();
z-index:2;
}
-.column {
- max-height:100vh;
-}
-
.column > .scrollable {
background: $win95-bg;
@include win95-border-outset();
}
.column-header {
- padding:2px;
+ padding:0px;
font-size:13px;
background:#7f7f7f;
@include win95-border-outset();
color:white;
font-weight:bold;
align-items:baseline;
+ min-height: 24px;
+}
+
+.column-header > button {
+ padding: 0px;
+ min-height: 22px;
}
.column-header__wrapper.active {
.column-header__buttons {
max-height: 20px;
- margin-right:0px;
+ margin: 2px;
+ margin-left: -2px;
+}
+
+.column-header__buttons button {
+ margin-left: 2px;
}
.column-header__button {
background: $win95-bg;
color: black;
+ @include win95-outset();
+
line-height:0px;
font-size:14px;
- max-height:20px;
- padding:0px 2px;
- margin-top:2px;
- @include win95-outset();
+ padding:0px 4px;
&:hover {
color: black;
background-color:#7f7f7f;
}
-.column-header__back-button {
+// selectivity -- needs to override .column-header > button
+.column-header .column-header__back-button {
background: $win95-bg;
color: black;
padding:2px;
- max-height:20px;
- margin-top:2px;
+ padding-right: 4px;
+ max-height: 20px;
+ min-height: unset;
+ margin: 2px;
@include win95-outset();
- font-size:13px;
+ font-size: 13px;
+ line-height: 17px;
font-weight:bold;
}
+.column-header__buttons .column-header__back-button {
+ margin: 0;
+}
+
.column-back-button {
background:$win95-bg;
color:black;
@include win95-outset();
- padding:2px;
font-size:13px;
font-weight:bold;
+
+ padding: 2px;
+ height: 26px;
}
.column-back-button--slim-button {
top:-22px;
right:4px;
max-height:20px;
- max-width:60px;
- padding:0px 2px;
+ padding: 1px 6px 0 2px;
+ box-sizing: border-box;
}
.column-back-button__icon {
}
.column-header__collapsible__extra div[role="group"] {
- border: 2px groove $win95-bg;
- border-radius:4px;
- margin-bottom:8px;
- padding:4px;
+ border: 2px groove #eee;
+ margin-bottom: 11px;
+ padding: 4px;
}
.column-inline-form {
@include win95-border-outset();
border-bottom-width:0px;
border-top-width:0px;
+
+ align-items: baseline;
+}
+
+.column-inline-form .icon-button {
+ font-size: 14px!important;
+ line-height: 17px!important;
+}
+
+.column-inline-form .setting-text {
+ line-height: 17px;
+ padding-left: 4px;
}
.column-settings__section {
color:black;
font-weight:bold;
font-size:11px;
- position:relative;
- top: -12px;
- left:4px;
- background-color:$win95-bg;
+}
+
+[role="group"] .column-settings__section {
display:inline-block;
- padding:0px 4px;
- margin-bottom:0px;
+ background-color:$win95-bg;
+ position:relative;
+
+ top: -14px;
+ top: calc(-1em - 0.5ex);
+ left: 4px;
+
+ padding: 0px 4px;
+ margin-bottom: 0px;
}
.setting-meta__label, .setting-toggle__label {
}
.missing-indicator > div {
- background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC')
- no-repeat;
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC') no-repeat;
background-position:center center;
}
color: black;
}
+.notification__filter-bar {
+ background: $win95-bg;
+ @include win95-border-outset-sides-only();
+ padding-top: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ border-bottom: 2px solid #efefef;
+ overflow-y: visible;
+
+ button {
+ background: transparent;
+ color: black;
+ padding: 8px 0;
+ align-self: end;
+ @include win95-tab();
+
+ &.active {
+ color: black;
+ top: 2px;
+ background-color: $win95-bg;
+
+ &::before, &::after {
+ display:none;
+ }
+ }
+ }
+}
+
.status__wrapper {
border: 2px groove $win95-bg;
margin:4px;
}
.status.status-direct {
- background-color:$win95-bg;
+ background:$win95-bg;
+ &:focus, &:active {
+ background:$win95-bg;
+ }
+
+ &:not(.read) {
+ background: white;
+ }
+}
+.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.status-direct, .detailed-status {
+ &:not(.read) {
+ .status__content:focus {
+ background-color: white;
+ }
+ }
+ }
+}
+
+.status__content, .reply-indicator__content {
font-size:13px;
+ color: black;
}
.status.light .status__relative-time,
justify-items:left;
padding-left:4px;
}
+
.icon-button {
background:$win95-bg;
@include win95-border-outset();
padding-right:25px;
}
-.status-card {
+.status-card, .status-card.compact, a.status-card, a.status-card.compact {
border-radius:0px;
background:white;
border: 1px solid black;
color:black;
-}
-.status-card:hover {
- background-color:white;
+ &:hover {
+ background-color:white;
+ }
}
.status-card__title {
}
.account {
- border-bottom: 2px groove $win95-bg;
+ border-bottom: none;
}
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
font-weight:bold;
}
+
.drawer__header {
background: $win95-bg;
@include win95-border-outset();
color:blue;
}
+.search-results__section h5:before {
+ display: none;
+}
+
+.search-results__section h5 {
+ background: #bfbfbf;
+ span {
+ color: black;
+ padding: 0px 2px;
+ }
+}
+
+.search-results__section {
+ border: 3px groove white;
+ margin: 11px 6px 9px 3px;
+}
+
.search-results__section .account:hover,
.search-results__section .account:hover .account__display-name,
.search-results__section .account:hover .account__display-name strong,
}
}
+.trends__item__name a,
+.trends__item__current {
+ color: black;
+}
+
.drawer__inner,
.drawer__inner.darker {
background-color:$win95-bg;
border-left: 2px groove $win95-bg;
}
+.compose-form__poll-wrapper .icon-button.disabled {
+ color: $win95-mid-grey;
+}
+
.privacy-dropdown.active .privacy-dropdown__value.active,
.advanced-options-dropdown.open .advanced-options-dropdown__value {
background: $win95-bg;
font-weight:bold;
}
-.compose-form__warning::before {
- content:"Tip:";
- font-weight:bold;
- display:block;
- position:absolute;
- top:-10px;
- background-color:$win95-bg;
- font-size:11px;
- padding: 0px 5px;
-}
+.compose-form {
+ .compose-form__warning::before {
+ content:"Tip:";
+ font-weight:bold;
+ display:block;
+ position:absolute;
+ top:-10px;
+ background-color:$win95-bg;
+ font-size:11px;
+ padding: 0px 5px;
+ }
-.compose-form__warning {
- position:relative;
- box-shadow:unset;
- border:2px groove $win95-bg;
- background-color:$win95-bg;
- color:black;
-}
+ .compose-form__warning {
+ position:relative;
+ box-shadow:unset;
+ border:2px groove $win95-bg;
+ background-color:$win95-bg;
+ color:black;
+ }
-.compose-form__warning a {
- color:blue;
-}
+ .compose-form__warning a {
+ color:blue;
+ }
-.compose-form__warning strong {
- color:black;
- text-decoration:underline;
+ .compose-form__warning strong {
+ color:black;
+ text-decoration:underline;
+ }
}
.compose-form__buttons button.active:last-child {
}
-#Getting-started {
- background-color:$win95-bg;
- @include win95-inset();
- border-bottom-width:0px;
+.button.button-secondary {
+ background-color: $win95-bg;
}
-#Getting-started::before {
- content:"Start";
+.column-link {
+ background-color:transparent;
color:black;
- font-weight:bold;
- font-size:15px;
- width:80%;
- text-align:center;
- display:block;
- position:absolute;
- right:2px;
+ &:hover {
+ background-color: $win95-window-header;
+ color:white;
+ }
}
-#Getting-started {
+.column-link__badge {
+ background-image: url('~images/alert_badge.png');
+ background-repeat: no-repeat;
+ background-size:contain;
+ background-color:transparent;
+ border-radius:0;
+ box-sizing: border-box;
+ width: 24px;
+ height:24px;
+ padding-top:4px;
+ padding-left:0px;
+ padding-right:1px;
+ text-align:center;
position:relative;
- padding:5px 15px;
- width:60px;
- font-size:0px;
- color:$win95-bg;
+ top:2px;
+}
- 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%;
+.column-link:hover .column-link__badge {
+ color:black;
}
.column-subheading {
background-color:$win95-bg;
color:black;
- border-bottom: 2px groove $win95-bg;
- text-transform: none;
- font-size: 16px;
+ @include win95-border-outset-sides-only;
}
-.column-link {
- background-color:transparent;
- color:black;
- &:hover {
- background-color: $win95-window-header;
- color:white;
- }
+.column {
+ overflow-y:auto;
+}
+
+.getting-started {
+ background: none;
+ position:relative;
+ 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,
+ inset -2px 0px 0px #808080,
+ inset 2px 2px 0px #dfdfdf;
+ border-radius:0px;
+
+ background-color:$win95-bg;
+ border-bottom: 2px groove $win95-bg;
+
+ height: unset !important;
+
+ .navigation-bar {
+ padding-left: 45px;
+ }
+
.column-subheading {
font-size:0px;
margin:0px;
padding:0px;
+ background-color: transparent;
+ color:black;
+ border-bottom: 2px groove $win95-bg;
+ text-transform: none;
}
- .column-link {
+}
+
+.column-link {
background-size:32px 32px;
background-repeat:no-repeat;
background-position: 36px 50%;
- padding-left:40px;
+ padding-left:45px;
&:hover {
background-size:32px 32px;
width:32px;
}
}
+
+.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();
}
-.column-link[href="/web/timelines/public"] {
- background-image: url("~images/icon_public.png");
- &:hover { background-image: url("~images/icon_public.png"); }
+
+@media screen and (min-width: 360px) {
+ .getting-started__wrapper{
+ margin-bottom:0px;
+ }
}
-.column-link[href="/web/timelines/public/local"] {
- background-image: url("~images/icon_local.png");
- &:hover { background-image: url("~images/icon_local.png"); }
+
+@media screen and (max-width: 360px) {
+ .getting-started {
+ top:0px;
+ padding-top:0px;
+ }
+
+ .getting-started__wrapper::before {
+ display:none;
+ }
}
-.column-link[href="/web/pinned"] {
- background-image: url("~images/icon_pin.png");
+
+.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;
+}
+
+.layout-single-column .getting-started__footer::after {
+ display: none;
+}
+
+.getting-started__wrapper + .flex-spacer {
+ display:none;
+}
+
+.column-link[href="/web/timelines/home"] {
+ background-image: url("~images/icon_home.png");
+ &:hover { background-image: url("~images/icon_home.png"); }
+}
+.column-link[href="/web/notifications"] {
+ background-image: url("~images/icon_notifications.png");
+ &:hover { background-image: url("~images/icon_notifications.png"); }
+}
+.column-link[href="/web/timelines/public"] {
+ background-image: url("~images/icon_public.png");
+ &:hover { background-image: url("~images/icon_public.png"); }
+}
+.column-link[href="/web/timelines/public/local"] {
+ background-image: url("~images/icon_local.png");
+ &:hover { background-image: url("~images/icon_local.png"); }
+}
+.column-link[href="/web/timelines/direct"] {
+ background-image: url("~images/icon_direct.png");
+ &:hover { background-image: url("~images/icon_direct.png"); }
+}
+.column-link[href="/web/pinned"] {
+ background-image: url("~images/icon_pin.png");
&:hover { background-image: url("~images/icon_pin.png"); }
}
.column-link[href="/web/favourites"] {
background-image: url("~images/icon_follow_requests.png");
&:hover { background-image: url("~images/icon_follow_requests.png"); }
}
-.column-link[href="/web/keyboard-shortcuts"] {
- background-image: url("~images/icon_keyboard_shortcuts.png");
- &:hover { background-image: url("~images/icon_keyboard_shortcuts.png"); }
-}
.column-link[href="/web/blocks"] {
background-image: url("~images/icon_blocks.png");
&:hover { background-image: url("~images/icon_blocks.png"); }
}
+.column-link[href="/web/domain_blocks"] {
+ background-image: url("~images/icon_domain_blocks.png");
+ &:hover { background-image: url("~images/icon_domain_blocks.png"); }
+}
.column-link[href="/web/mutes"] {
background-image: url("~images/icon_mutes.png");
&:hover { background-image: url("~images/icon_mutes.png"); }
}
-.column-link[href="/settings/preferences"] {
- background-image: url("~images/icon_settings.png");
- &:hover { background-image: url("~images/icon_settings.png"); }
+.column-link[href="/web/directory"] {
+ background-image: url("~images/icon_profile_directory.png");
+ &:hover { background-image: url("~images/icon_profile_directory.png"); }
+}
+.column-link[href="/web/bookmarks"] {
+ background-image: url("~images/icon_bookmarks.png");
+ &:hover { background-image: url("~images/icon_bookmarks.png"); }
+}
+
+.getting-started__footer ul li a[href="/web/keyboard-shortcuts"] {
+ background-image: url("~images/icon_keyboard_shortcuts.png");
+ &:hover { background-image: url("~images/icon_keyboard_shortcuts.png"); }
}
-.column-link[href="/about/more"] {
+.getting-started__footer ul li a[href="/invites"] {
+ background-image: url("~images/icon_invite.png");
+ &:hover { background-image: url("~images/icon_invite.png"); }
+}
+.getting-started__footer ul li a[href="/terms"] {
+ background-image: url("~images/icon_tos.png");
+ &:hover { background-image: url("~images/icon_tos.png"); }
+}
+.getting-started__footer ul li a[href="https://docs.joinmastodon.org"] {
+ background-image: url("~images/icon_docs.png");
+ &:hover { background-image: url("~images/icon_docs.png"); }
+}
+.getting-started__footer ul li a[href="/about/more"] {
background-image: url("~images/icon_about.png");
&:hover { background-image: url("~images/icon_about.png"); }
}
-.column-link[href="/auth/sign_out"] {
+.getting-started__footer ul li a[href="/auth/sign_out"] {
background-image: url("~images/icon_logout.png");
&:hover { background-image: url("~images/icon_logout.png"); }
}
-
-.getting-started__footer {
- display:none;
+.getting-started__footer ul li a[href="https://joinmastodon.org/apps"] {
+ background-image: url("~images/icon_mobile_apps.png");
+ &:hover { background-image: url("~images/icon_mobile_apps.png"); }
}
-
-.getting-started__wrapper::before {
- content:"Mastodon 95";
- font-weight:bold;
- font-size:23px;
- color:white;
- line-height:30px;
- padding-left:20px;
- padding-right:40px;
-
- left:0px;
- bottom:-30px;
- display:block;
- position:absolute;
- background-color:#7f7f7f;
- width:200%;
- height:30px;
-
- -ms-transform: rotate(-90deg);
-
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
- transform-origin:top left;
+.getting-started__footer ul li a[href="/settings/applications"] {
+ background-image: url("~images/icon_developers.png");
+ &:hover { background-image: url("~images/icon_developers.png"); }
}
-
-.getting-started__wrapper {
- @include win95-border-outset();
- background-color:$win95-bg;
+.getting-started__footer ul li a[href="/auth/edit"] {
+ background-image: url("~images/icon_settings.png");
+ &:hover { background-image: url("~images/icon_settings.png"); }
}
.column .static-content.getting-started {
color:white;
}
+.account__header__fields {
+ border-left: 1px solid black;
+ border-top: 1px solid black;
+
+ dt {
+ background-color:$win95-bg;
+ color:black;
+ border-top: 1px solid #ffffff;
+ border-bottom: 1px solid $win95-mid-grey;
+ border-right: 1px solid $win95-mid-grey;
+ }
+ dd {
+ background-color:white;
+ border: 1px solid $win95-bg;
+ color:black;
+ }
+ dd,dt {
+ padding: 5px 8px;
+ }
+}
+
.account-authorize__wrapper {
border: 2px groove $win95-bg;
margin: 2px;
padding:2px;
}
+.domain .domain__domain-name strong {
+ color: black;
+}
+
.account--panel {
background-color: $win95-bg;
border:0px;
@include win95-inset();
}
+.account__section-headline {
+ background: $win95-bg;
+ margin-top: 5px;
+
+ & > a {
+ @include win95-tab();
+ color: black;
+ padding: 5px;
+
+ &.active {
+ background: $win95-bg;
+ @include win95-inset();
+ color: black;
+
+ &:before, &:after {
+ display: none;
+ }
+ }
+ }
+}
+
.dropdown--active .dropdown__content > ul,
.dropdown-menu {
background:$win95-tooltip-yellow;
border-radius:0px;
border:1px solid black;
box-shadow:unset;
+ margin-top: 6px;
}
.dropdown-menu a {
background-color:transparent;
}
+.dropdown-menu__arrow {
+ &.bottom {
+ border-bottom-color: $win95-tooltip-yellow;
+ }
+
+ &.top {
+ border-top-color: $win95-tooltip-yellow;
+ }
+
+ &:before {
+ position: relative;
+ border: 0 solid transparent;
+ display: block;
+ content: '';
+ left: -8px;
+ z-index: -1;
+ }
+
+ &.bottom::before {
+ border-bottom-color: black;
+ border-width: 0 8px 6px;
+ bottom: 1px;
+ }
+
+ &.top::before {
+ border-top-color: black;
+ border-width: 6px 8px 0;
+ top: -5px;
+ }
+}
+
+.dropdown-menu {
+ margin-top: 6px;
+}
+
.dropdown--active::after {
display:none;
}
}
.detailed-status__action-bar-dropdown .dropdown--active .dropdown__content.dropdown__left {
- left:unset;
+ left: unset;
}
-.dropdown > .icon-button, .detailed-status__button > .icon-button,
-.status__action-bar > .icon-button, .star-icon i {
+.dropdown > .icon-button, .detailed-status__action-bar .icon-button,
+.status__action-bar .icon-button, .star-icon i {
/* i don't know what's going on with the inline
styles someone should look at the react code */
height: 25px !important;
box-sizing: border-box;
}
-.status__action-bar-button .fa-floppy-o {
- padding-top: 2px;
+.icon-button {
+ height: auto!important;
+ width: auto!important;
}
-.status__action-bar-dropdown {
- position: relative;
- top: -3px;
+.status__action-bar-dropdown .icon-button {
+ position: relative;
+ top: -1px;
}
-.detailed-status__action-bar-dropdown .dropdown {
- position: relative;
- top: -4px;
+.fa-user-plus, .fa-user-times {
+ padding: 2px 0px 2px 1px;
+}
+
+.fa-ellipsis-h {
+ padding-top: 3px;
+}
+
+.status__action-bar-button .fa-floppy-o {
+ padding-top: 2px;
}
.notification .status__action-bar {
- border-bottom: none;
+ border-bottom: none;
}
.notification .status {
- margin-bottom: 4px;
+ margin-bottom: 4px;
}
.status__wrapper .status {
- margin-bottom: 3px;
+ margin-bottom: 3px;
}
.status__wrapper {
- margin-bottom: 8px;
+ margin-bottom: 8px;
+}
+
+.status__prepend {
+ color: black;
+ font-size: 13px;
}
.icon-button .fa-retweet {
- position: relative;
- top: -1px;
+ position: relative;
+ top: -1px;
}
.embed-modal, .error-modal, .onboarding-modal,
text-align:left;
}
+.media-modal .media-modal__close {
+ font-size: 14px!important;
+ line-height: 17px!important;
+ margin-right: 4vw;
+ margin-top: 4vh;
+}
+
.confirmation-modal__action-bar {
.confirmation-modal__cancel-button {
color:black;
@include win95-inset();
}
+.report-modal__target .media-modal__close {
+ top: 3px;
+ right: 0px;
+ font-size: 12px!important;
+ line-height: 13px!important;
+}
+
+.report-modal__comment p {
+ font-size: 12px;
+ margin-bottom: 1em;
+ padding-left: 3px;
+}
+
+.report-modal__comment .setting-text.light {
+ border-radius: 0;
+}
+
+.report-modal__container {
+ margin-right: 2px;
+}
+
+.report-modal::before {
+ height: 22px;
+ line-height: 23px;
+}
+
+.status-check-box__status .media-gallery {
+ margin: unset;
+}
+
.modal-root__overlay,
.account__header > div {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFnpUWHRUaXRsZQAACJnLzU9JzElKBwALgwLXaCRlPwAAABd6VFh0QXV0aG9yAAAImUvOKMrPS8wBAAuaAugOwWPyAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII=');
}
+
.admin-wrapper::before {
position:absolute;
top:0px;
@include win95-outset();
width:70vw;
height:80vh;
+ min-height:80vh;
margin:10vh auto;
color: black;
padding-top:24px;
.admin-wrapper .sidebar-wrapper {
position:static;
height:auto;
+ min-height:auto;
flex: 0 0 auto;
margin:2px;
}
.admin-wrapper .content-wrapper {
flex: 1 1 auto;
width:calc(100% - 20px);
+ max-width:calc(100% - 20px);
@include win95-border-outset();
position:relative;
margin-left:10px;
margin-right:10px;
margin-bottom:40px;
box-sizing:border-box;
+ overflow-y:scroll;
+ height: 100%;
}
.admin-wrapper .content {
box-sizing:border-box;
position:relative;
}
+.admin-wrapper .content h4 {
+ color: black;
+}
.admin-wrapper .sidebar {
position:static;
}
}
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
+ background: $win95-bg;
+}
+
@media screen and (max-width: 1520px) {
.admin-wrapper .sidebar > ul > li > ul {
max-width:1000px;
@include win95-border-slight-inset();
}
+.admin-wrapper .table th, .table td {
+ background-color:transparent;
+}
+
+.admin-wrapper button.table-action-link,
+.admin-wrapper a.table-action-link,
+.admin-wrapper button.table-action-link:hover,
+.admin-wrapper a.table-action-link:hover,
+.admin-wrapper a.name-tag,
+.admin-wrapper .name-tag,
+.admin-wrapper a.inline-name-tag,
+.admin-wrapper .inline-name-tag,
.admin-wrapper .content h2,
+.admin-wrapper .content h3,
.simple_form .input.with_label .label_input > label,
.admin-wrapper .content h6,
.admin-wrapper .content > p,
a.table-action-link,
a.table-action-link:hover,
.simple_form .input.with_block_label > label,
-.simple_form p.hint {
+.simple_form p.hint,
+.admin-wrapper .content > p strong,
+.simple_form .input.with_floating_label .label_input > label,
+.admin-wrapper .content .fields-group h6 {
color:black;
}
+.report-card {
+ background: white;
+ border: 1px solid black;
+ border-radius: 0px;
+}
+
+.report-card__summary__item:hover {
+ background: white;
+}
+
+.report-card__summary__item__content a {
+ color: black;
+}
+
+.directory__tag > a, .directory__tag > div,
+.directory__tag > a:hover, .directory__tag > a:active, .directory__tag > a:focus {
+ background: white;
+ border: 1px solid black;
+ border-radius: 0px;
+}
+
+.admin-wrapper .content .directory__tag h4 {
+ color: black;
+}
+
+.simple_form .hint code {
+ background: $win95-bg;
+ border-radius: 0px;
+}
+
+.input-copy {
+ background: transparent;
+ border: 0px solid transparent;
+}
+
.table > tbody > tr:nth-child(2n+1) > td,
.table > tbody > tr:nth-child(2n+1) > th {
background-color:white;
background: $win95-bg;
}
+.simple_form select {
+ background: white;
+ border-radius: 0px;
+ color: black;
+}
+
.filters .filter-subset {
border: 2px groove $win95-bg;
padding:2px;
color:black;
border-bottom: 0px solid transparent;
}
+
+.drawer__inner__mastodon {
+ display: none;
+}
+
+.list-editor h4 {
+ padding: 2px;
+ color: white;
+ font-size: 14px;
+ font-weight: bold;
+ background: #00007f;
+ border-radius: 0;
+}
+
+.list-editor {
+ @include win95-border-outset();
+ box-shadow: unset;
+}
+
+.list-editor .drawer__inner {
+ @include win95-inset();
+ border-radius: 0;
+}
+
+.batch-table__toolbar {
+ border-radius: 0px;
+ background-color:white;
+ border: 1px solid black;
+}
+
+.batch-table__row {
+ border: 1px solid black;
+ background-color: white;
+
+ &:hover {
+ background-color: white;
+ }
+}
+
+.batch-table__row:nth-child(2n) {
+ 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;
+ }
+ .status {
+ padding: 15px 15px 55px 78px;
+ }
+}
+
+@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;
+}
+
+.flash-message.notice {
+ border: 1px solid black;
+ background: $win95-tooltip-yellow;
+ color:black;
+}
+
+.layout-single-column .compose-panel {
+ background: $win95-bg;
+}
+
+.layout-single-column .status__wrapper .status {
+ padding-bottom: 50px;
+}
+
+::-webkit-scrollbar {
+ width: 14px;
+}
+
+::-webkit-scrollbar-track {
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIW2P4f4DhwH8ACoADf0PlskQAAAAASUVORK5CYII=');
+
+ &:hover {
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIW2P4f4DhwH8ACoADf0PlskQAAAAASUVORK5CYII=');
+ }
+}
+
+::-webkit-scrollbar-thumb {
+ background: #bfbfbf;
+ border-color: #efefef #404040 #404040 #efefef;
+ border-style: solid;
+ border-width: 2px;
+
+ &:hover {
+ background: #bfbfbf;
+ border-color: #efefef #404040 #404040 #efefef;
+ border-style: solid;
+ border-width: 2px;
+ }
+
+ &:active {
+ background: #bfbfbf;
+ border-color: #404040 #efefef #efefef #404040;
+ }
+}
+
cat aescling's git repositories / mastodon.git / commitdiff
