forked from cybrespace/mastodon
2414 lines
46 KiB
SCSS
2414 lines
46 KiB
SCSS
$win95-bg: #bfbfbf;
|
|
$win95-dark-grey: #404040;
|
|
$win95-mid-grey: #808080;
|
|
$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;
|
|
|
|
@mixin win95-border-outset() {
|
|
border-left: 2px solid #efefef;
|
|
border-top: 2px solid #efefef;
|
|
border-right: 2px solid #404040;
|
|
border-bottom: 2px solid #404040;
|
|
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,
|
|
inset -2px -2px 0px #808080,
|
|
inset 2px 2px 0px #dfdfdf;
|
|
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-right: 2px solid #efefef;
|
|
border-bottom: 2px solid #efefef;
|
|
border-radius:0px;
|
|
}
|
|
|
|
@mixin win95-border-slight-inset() {
|
|
border-left: 1px solid #404040;
|
|
border-top: 1px solid #404040;
|
|
border-right: 1px solid #efefef;
|
|
border-bottom: 1px solid #efefef;
|
|
border-radius:0px;
|
|
}
|
|
|
|
@mixin win95-inset() {
|
|
box-shadow: inset 1px 1px 0px #000000,
|
|
inset -1px -1px 0px #ffffff,
|
|
inset 2px 2px 0px #808080,
|
|
inset -2px -2px 0px #dfdfdf;
|
|
border-width:0px;
|
|
border-radius:0px;
|
|
}
|
|
|
|
|
|
@mixin win95-tab() {
|
|
box-shadow: inset -1px 0px 0px #000000,
|
|
inset 1px 0px 0px #ffffff,
|
|
inset 0px 1px 0px #ffffff,
|
|
inset 0px 2px 0px #dfdfdf,
|
|
inset -2px 0px 0px #808080,
|
|
inset 2px 0px 0px #dfdfdf;
|
|
border-radius:0px;
|
|
border-top-left-radius: 1px;
|
|
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 {
|
|
font-family:"premillenium";
|
|
src: url('../fonts/premillenium/MSSansSerif.ttf') format('truetype');
|
|
}
|
|
|
|
@import 'cybre-base';
|
|
|
|
|
|
body {
|
|
font-size:13px;
|
|
font-family: "MS Sans Serif", "premillenium", sans-serif;
|
|
color:black;
|
|
}
|
|
|
|
.ui,
|
|
.ui .columns-area,
|
|
body.admin {
|
|
background: #008080;
|
|
}
|
|
|
|
.loading-bar {
|
|
height:5px;
|
|
background-color: #000080;
|
|
}
|
|
|
|
.tabs-bar {
|
|
background: $win95-bg;
|
|
@include win95-outset()
|
|
height: 30px;
|
|
}
|
|
|
|
.tabs-bar__link {
|
|
color:black;
|
|
border:2px outset $win95-bg;
|
|
border-top-width: 1px;
|
|
border-left-width: 1px;
|
|
margin:2px;
|
|
padding:3px;
|
|
}
|
|
|
|
.tabs-bar__link.active {
|
|
@include win95-inset();
|
|
color:black;
|
|
}
|
|
|
|
.tabs-bar__link:last-child::before {
|
|
content:"Start";
|
|
color:black;
|
|
font-weight:bold;
|
|
font-size:15px;
|
|
width:80%;
|
|
display:block;
|
|
position:absolute;
|
|
right:0px;
|
|
}
|
|
|
|
.tabs-bar__link:last-child {
|
|
position:relative;
|
|
flex-basis:60px !important;
|
|
font-size:0px;
|
|
color:$win95-bg;
|
|
|
|
background-image: url("../images/start.png");
|
|
background-repeat:no-repeat;
|
|
background-position:8%;
|
|
background-clip:padding-box;
|
|
background-size:auto 50%;
|
|
}
|
|
|
|
.drawer .drawer__inner {
|
|
overflow: visible;
|
|
height:inherit;
|
|
background:$win95-bg;
|
|
}
|
|
|
|
.drawer:after {
|
|
display:block;
|
|
content: " ";
|
|
|
|
position:absolute;
|
|
bottom:15px;
|
|
left:15px;
|
|
width:132px;
|
|
height:117px;
|
|
background-image:url("../images/clippy_wave.gif"), url("../images/clippy_frame.png");
|
|
background-repeat:no-repeat;
|
|
background-position: 4px 20px, 0px 0px;
|
|
z-index:0;
|
|
}
|
|
|
|
.drawer__pager {
|
|
overflow-y:auto;
|
|
z-index:1;
|
|
}
|
|
|
|
.privacy-dropdown__dropdown {
|
|
z-index:2;
|
|
}
|
|
|
|
.column {
|
|
max-height:100vh;
|
|
}
|
|
|
|
.column > .scrollable {
|
|
background: $win95-bg;
|
|
@include win95-border-outset()
|
|
border-top-width:0px;
|
|
}
|
|
|
|
.column-header__wrapper {
|
|
color:white;
|
|
font-weight:bold;
|
|
background:#7f7f7f;
|
|
}
|
|
|
|
.column-header {
|
|
padding:0px;
|
|
font-size:13px;
|
|
background:#7f7f7f;
|
|
@include win95-border-outset()
|
|
border-bottom-width:0px;
|
|
color:white;
|
|
font-weight:bold;
|
|
align-items:baseline;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.column-header > button {
|
|
padding: 0px;
|
|
min-height: 22px;
|
|
}
|
|
|
|
.column-header__wrapper.active {
|
|
background:$win95-window-header;
|
|
}
|
|
|
|
.column-header__wrapper.active::before {
|
|
display:none;
|
|
}
|
|
.column-header.active {
|
|
box-shadow:unset;
|
|
background:$win95-window-header;
|
|
}
|
|
|
|
.column-header.active .column-header__icon {
|
|
color:white;
|
|
}
|
|
|
|
.column-header__buttons {
|
|
max-height: 20px;
|
|
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;
|
|
padding:0px 4px;
|
|
|
|
&:hover {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.column-header__button.active, .column-header__button.active:hover {
|
|
@include win95-inset();
|
|
background-color:#7f7f7f;
|
|
}
|
|
|
|
// selectivity -- needs to override .column-header > button
|
|
.column-header .column-header__back-button {
|
|
background: $win95-bg;
|
|
color: black;
|
|
padding:2px;
|
|
padding-right: 4px;
|
|
max-height: 20px;
|
|
min-height: unset;
|
|
margin: 2px;
|
|
@include win95-outset()
|
|
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()
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
|
|
padding: 2px;
|
|
height: 26px;
|
|
}
|
|
|
|
.column-back-button--slim-button {
|
|
position:absolute;
|
|
top:-22px;
|
|
right:4px;
|
|
max-height:20px;
|
|
padding: 1px 6px 0 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.column-back-button__icon {
|
|
font-size:11px;
|
|
margin-top:-3px;
|
|
}
|
|
|
|
.column-header__collapsible {
|
|
border-left:2px outset $win95-bg;
|
|
border-right:2px outset $win95-bg;
|
|
}
|
|
|
|
.column-header__collapsible-inner {
|
|
background:$win95-bg;
|
|
color:black;
|
|
}
|
|
|
|
.column-header__collapsible__extra {
|
|
color:black;
|
|
}
|
|
|
|
.column-header__collapsible__extra div[role="group"] {
|
|
border: 2px groove #eee;
|
|
margin-bottom: 11px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.column-inline-form {
|
|
background-color: $win95-bg;
|
|
@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;
|
|
}
|
|
|
|
[role="group"] .column-settings__section {
|
|
display:inline-block;
|
|
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 {
|
|
color:black;
|
|
font-weight:normal;
|
|
}
|
|
|
|
.setting-meta__label span:before {
|
|
content:"(";
|
|
}
|
|
.setting-meta__label span:after {
|
|
content:")";
|
|
}
|
|
|
|
.setting-toggle {
|
|
line-height:13px;
|
|
}
|
|
|
|
.react-toggle .react-toggle-track {
|
|
border-radius:0px;
|
|
background-color:white;
|
|
@include win95-border-inset();
|
|
|
|
width:12px;
|
|
height:12px;
|
|
}
|
|
|
|
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
|
background-color:white;
|
|
}
|
|
|
|
.react-toggle .react-toggle-track-check {
|
|
left:2px;
|
|
transition:unset;
|
|
}
|
|
|
|
.react-toggle .react-toggle-track-check svg path {
|
|
fill: black;
|
|
}
|
|
|
|
.react-toggle .react-toggle-track-x {
|
|
display:none;
|
|
}
|
|
|
|
.react-toggle .react-toggle-thumb {
|
|
border-radius:0px;
|
|
display:none;
|
|
}
|
|
|
|
.text-btn {
|
|
background-color:$win95-bg;
|
|
@include win95-outset()
|
|
padding:4px;
|
|
}
|
|
|
|
.text-btn:hover {
|
|
text-decoration:none;
|
|
color:black;
|
|
}
|
|
|
|
.text-btn:active {
|
|
@include win95-inset();
|
|
}
|
|
|
|
.setting-text {
|
|
color:black;
|
|
background-color:white;
|
|
@include win95-inset();
|
|
font-size:13px;
|
|
padding:2px;
|
|
}
|
|
|
|
.setting-text:active, .setting-text:focus,
|
|
.setting-text.light:active, .setting-text.light:focus {
|
|
color:black;
|
|
border-bottom:2px inset $win95-bg;
|
|
}
|
|
|
|
.column-header__setting-arrows .column-header__setting-btn {
|
|
padding:3px 10px;
|
|
}
|
|
|
|
.column-header__setting-arrows .column-header__setting-btn:last-child {
|
|
padding:3px 10px;
|
|
}
|
|
|
|
.missing-indicator {
|
|
background-color:$win95-bg;
|
|
color:black;
|
|
@include win95-outset()
|
|
}
|
|
|
|
.missing-indicator > div {
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC')
|
|
no-repeat;
|
|
background-position:center center;
|
|
}
|
|
|
|
.empty-column-indicator,
|
|
.error-column {
|
|
background: $win95-bg;
|
|
color: black;
|
|
}
|
|
|
|
.status__wrapper {
|
|
border: 2px groove $win95-bg;
|
|
margin:4px;
|
|
}
|
|
|
|
.status {
|
|
@include win95-border-slight-inset();
|
|
background-color:white;
|
|
margin:4px;
|
|
padding-bottom:40px;
|
|
margin-bottom:8px;
|
|
}
|
|
|
|
.status.status-direct {
|
|
background:$win95-bg;
|
|
&:focus, &:active {
|
|
background:$win95-bg;
|
|
}
|
|
}
|
|
.focusable:focus .status.status-direct {
|
|
background:$win95-bg;
|
|
}
|
|
|
|
[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,
|
|
.status.light .display-name span {
|
|
color: #7f7f7f;
|
|
}
|
|
|
|
.status__action-bar {
|
|
box-sizing:border-box;
|
|
position:absolute;
|
|
bottom:-1px;
|
|
left:-1px;
|
|
background:$win95-bg;
|
|
width:calc(100% + 2px);
|
|
padding-left:10px;
|
|
padding: 4px 2px;
|
|
padding-bottom:4px;
|
|
border-bottom:2px groove $win95-bg;
|
|
border-top:1px outset $win95-bg;
|
|
text-align: right;
|
|
}
|
|
|
|
.status__wrapper .status__action-bar {
|
|
border-bottom-width:0px;
|
|
}
|
|
|
|
.status__action-bar-button {
|
|
float:right;
|
|
}
|
|
|
|
.status__action-bar-dropdown {
|
|
margin-left:auto;
|
|
margin-right:10px;
|
|
|
|
.icon-button {
|
|
min-width:28px;
|
|
}
|
|
}
|
|
.status.light .status__content a {
|
|
color:blue;
|
|
}
|
|
|
|
.status__content {
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.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;
|
|
margin:4px;
|
|
border: 2px groove $win95-bg;
|
|
padding:4px;
|
|
}
|
|
|
|
.detailed-status__display-name {
|
|
color:#7f7f7f;
|
|
}
|
|
|
|
.detailed-status__display-name strong {
|
|
color:black;
|
|
font-weight:bold;
|
|
}
|
|
.account__avatar,
|
|
.account__avatar-overlay-base,
|
|
.account__header__avatar,
|
|
.account__avatar-overlay-overlay {
|
|
@include win95-border-slight-inset();
|
|
clip-path:none;
|
|
filter: saturate(1.8) brightness(1.1);
|
|
}
|
|
|
|
.detailed-status__action-bar {
|
|
background-color:$win95-bg;
|
|
border:0px;
|
|
border-bottom:2px groove $win95-bg;
|
|
margin-bottom:8px;
|
|
justify-items:left;
|
|
padding-left:4px;
|
|
}
|
|
|
|
.icon-button {
|
|
background:$win95-bg;
|
|
@include win95-border-outset()
|
|
padding:0px 0px 0px 0px;
|
|
margin-right:4px;
|
|
|
|
color:#3f3f3f;
|
|
&.inverted, &:hover, &.inverted:hover, &:active, &:focus {
|
|
color:#3f3f3f;
|
|
}
|
|
}
|
|
|
|
.icon-button:active {
|
|
@include win95-border-inset();
|
|
}
|
|
|
|
.status__action-bar > .icon-button {
|
|
padding:0px 15px 0px 0px;
|
|
min-width:25px;
|
|
}
|
|
|
|
.icon-button.star-icon,
|
|
.icon-button.star-icon:active {
|
|
background:transparent;
|
|
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()
|
|
padding-bottom:3px;
|
|
}
|
|
|
|
.icon-button.star-icon:active > i {
|
|
@include win95-border-inset();
|
|
}
|
|
|
|
.text-icon-button {
|
|
color:$win95-dark-grey;
|
|
}
|
|
|
|
.detailed-status__action-bar-dropdown {
|
|
margin-left:auto;
|
|
justify-content:right;
|
|
padding-right:16px;
|
|
}
|
|
|
|
.detailed-status__button {
|
|
flex:0 0 auto;
|
|
}
|
|
|
|
.detailed-status__button .icon-button {
|
|
padding-left:2px;
|
|
padding-right:25px;
|
|
}
|
|
|
|
.status-card {
|
|
border-radius:0px;
|
|
background:white;
|
|
border: 1px solid black;
|
|
color:black;
|
|
}
|
|
|
|
.status-card:hover {
|
|
background-color:white;
|
|
}
|
|
|
|
.status-card__title {
|
|
color:blue;
|
|
text-decoration:underline;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.load-more {
|
|
width:auto;
|
|
margin:5px auto;
|
|
background: $win95-bg;
|
|
@include win95-outset();
|
|
color:black;
|
|
padding: 2px 5px;
|
|
|
|
&:hover {
|
|
background: $win95-bg;
|
|
color:black;
|
|
}
|
|
}
|
|
|
|
.status-card__description {
|
|
color:black;
|
|
}
|
|
|
|
.account__display-name strong, .status__display-name strong {
|
|
color:black;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.account .account__display-name {
|
|
color:black;
|
|
}
|
|
|
|
.account {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
|
|
background:$win95-bg;
|
|
@include win95-outset()
|
|
}
|
|
|
|
.reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover {
|
|
background:$win95-bg;
|
|
}
|
|
|
|
.reply-indicator__content .status__content__spoiler-link:active, .status__content .status__content__spoiler-link:active {
|
|
@include win95-inset();
|
|
}
|
|
|
|
.reply-indicator__content a, .status__content a {
|
|
color:blue;
|
|
}
|
|
|
|
.notification {
|
|
border: 2px groove $win95-bg;
|
|
margin:4px;
|
|
}
|
|
|
|
.notification__message {
|
|
color:black;
|
|
font-size:13px;
|
|
}
|
|
|
|
.notification__display-name {
|
|
font-weight:bold;
|
|
}
|
|
|
|
|
|
.drawer__header {
|
|
background: $win95-bg;
|
|
@include win95-border-outset()
|
|
justify-content:left;
|
|
margin-bottom:0px;
|
|
padding-bottom:2px;
|
|
border-bottom:2px groove $win95-bg;
|
|
}
|
|
|
|
.drawer__tab {
|
|
color:black;
|
|
@include win95-outset()
|
|
padding:5px;
|
|
margin:2px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.drawer__tab:first-child::before {
|
|
content:"Start";
|
|
color:black;
|
|
font-weight:bold;
|
|
font-size:15px;
|
|
width:80%;
|
|
display:block;
|
|
position:absolute;
|
|
right:0px;
|
|
|
|
}
|
|
|
|
.drawer__tab:first-child {
|
|
position:relative;
|
|
padding:5px 15px;
|
|
width:40px;
|
|
font-size:0px;
|
|
color:$win95-bg;
|
|
|
|
background-image: url("../images/start.png");
|
|
background-repeat:no-repeat;
|
|
background-position:8%;
|
|
background-clip:padding-box;
|
|
background-size:auto 50%;
|
|
}
|
|
|
|
.drawer__header a:hover {
|
|
background-color:transparent;
|
|
}
|
|
|
|
.drawer__header a:first-child: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%;
|
|
transition:unset;
|
|
}
|
|
|
|
.drawer__tab:first-child {
|
|
|
|
}
|
|
|
|
.search {
|
|
background:$win95-bg;
|
|
padding-top:2px;
|
|
padding:2px;
|
|
border:2px outset $win95-bg;
|
|
border-top-width:0px;
|
|
border-bottom: 2px groove $win95-bg;
|
|
margin-bottom:0px;
|
|
}
|
|
|
|
.search input {
|
|
background-color:white;
|
|
color:black;
|
|
@include win95-border-slight-inset();
|
|
}
|
|
|
|
.search__input:focus {
|
|
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;
|
|
border-bottom:2px groove $win95-bg;
|
|
}
|
|
|
|
.search-results__hashtag {
|
|
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,
|
|
.search-results__section .search-results__hashtag:hover {
|
|
background-color:$win95-window-header;
|
|
color:white;
|
|
}
|
|
|
|
.search__icon .fa {
|
|
color:#808080;
|
|
|
|
&.active {
|
|
opacity:1.0;
|
|
}
|
|
|
|
&:hover {
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.trends__item__name a,
|
|
.trends__item__current {
|
|
color: black;
|
|
}
|
|
|
|
.drawer__inner,
|
|
.drawer__inner.darker {
|
|
background-color:$win95-bg;
|
|
border: 2px outset $win95-bg;
|
|
border-top-width:0px;
|
|
}
|
|
|
|
.navigation-bar {
|
|
color:black;
|
|
}
|
|
|
|
.navigation-bar strong {
|
|
color:black;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.compose-form .autosuggest-textarea__textarea,
|
|
.compose-form .spoiler-input__input {
|
|
border-radius:0px;
|
|
@include win95-border-slight-inset();
|
|
}
|
|
|
|
.compose-form .autosuggest-textarea__textarea {
|
|
border-bottom:0px;
|
|
}
|
|
|
|
.compose-form__uploads-wrapper {
|
|
border-radius:0px;
|
|
border-bottom:1px inset $win95-bg;
|
|
border-top-width:0px;
|
|
}
|
|
|
|
.compose-form__upload-wrapper {
|
|
border-left:1px inset $win95-bg;
|
|
border-right:1px inset $win95-bg;
|
|
}
|
|
|
|
.compose-form .compose-form__buttons-wrapper {
|
|
background-color: $win95-bg;
|
|
border:2px groove $win95-bg;
|
|
margin-top:4px;
|
|
padding:4px 8px;
|
|
}
|
|
|
|
.compose-form__buttons {
|
|
background-color:$win95-bg;
|
|
border-radius:0px;
|
|
box-shadow:unset;
|
|
}
|
|
|
|
.compose-form__buttons-separator {
|
|
border-left: 2px groove $win95-bg;
|
|
}
|
|
|
|
.privacy-dropdown.active .privacy-dropdown__value.active,
|
|
.advanced-options-dropdown.open .advanced-options-dropdown__value {
|
|
background: $win95-bg;
|
|
}
|
|
|
|
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
|
|
color: $win95-dark-grey;
|
|
}
|
|
|
|
.privacy-dropdown.active
|
|
.privacy-dropdown__value {
|
|
background: $win95-bg;
|
|
box-shadow:unset;
|
|
}
|
|
|
|
.privacy-dropdown__option.active, .privacy-dropdown__option:hover,
|
|
.privacy-dropdown__option.active:hover {
|
|
background:$win95-window-header;
|
|
}
|
|
|
|
.privacy-dropdown__dropdown,
|
|
.privacy-dropdown.active .privacy-dropdown__dropdown,
|
|
.advanced-options-dropdown__dropdown,
|
|
.advanced-options-dropdown.open .advanced-options-dropdown__dropdown
|
|
{
|
|
box-shadow:unset;
|
|
color:black;
|
|
@include win95-outset()
|
|
background: $win95-bg;
|
|
}
|
|
|
|
.privacy-dropdown__option__content {
|
|
color:black;
|
|
}
|
|
|
|
.privacy-dropdown__option__content strong {
|
|
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__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 strong {
|
|
color:black;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.compose-form__buttons button.active:last-child {
|
|
@include win95-border-inset();
|
|
background: #dfdfdf;
|
|
color:#7f7f7f;
|
|
}
|
|
|
|
.compose-form__upload-thumbnail {
|
|
border-radius:0px;
|
|
border:2px groove $win95-bg;
|
|
background-color:$win95-bg;
|
|
padding:2px;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.compose-form__upload-thumbnail .icon-button {
|
|
max-width:20px;
|
|
max-height:20px;
|
|
line-height:10px !important;
|
|
}
|
|
|
|
.compose-form__upload-thumbnail .icon-button::before {
|
|
content:"X";
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
color:black;
|
|
}
|
|
|
|
.compose-form__upload-thumbnail .icon-button i {
|
|
display:none;
|
|
}
|
|
|
|
.emoji-picker-dropdown__menu {
|
|
z-index:2;
|
|
}
|
|
|
|
.emoji-dialog.with-search {
|
|
box-shadow:unset;
|
|
border-radius:0px;
|
|
background-color:$win95-bg;
|
|
border:1px solid black;
|
|
box-sizing:content-box;
|
|
|
|
}
|
|
|
|
.emoji-dialog .emoji-search {
|
|
color:black;
|
|
background-color:white;
|
|
border-radius:0px;
|
|
@include win95-inset();
|
|
}
|
|
|
|
.emoji-dialog .emoji-search-wrapper {
|
|
border-bottom:2px groove $win95-bg;
|
|
}
|
|
|
|
.emoji-dialog .emoji-category-title {
|
|
color:black;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.reply-indicator {
|
|
background-color:$win95-bg;
|
|
border-radius:3px;
|
|
border:2px groove $win95-bg;
|
|
}
|
|
|
|
.button {
|
|
background-color:$win95-bg;
|
|
@include win95-outset()
|
|
border-radius:0px;
|
|
color:black;
|
|
font-weight:bold;
|
|
|
|
&:hover, &:focus, &:disabled {
|
|
background-color:$win95-bg;
|
|
}
|
|
|
|
&:active {
|
|
@include win95-inset();
|
|
}
|
|
|
|
&:disabled {
|
|
color: #808080;
|
|
text-shadow: 1px 1px 0px #efefef;
|
|
|
|
&:active {
|
|
@include win95-outset();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.column-link {
|
|
background-color:transparent;
|
|
color:black;
|
|
&:hover {
|
|
background-color: $win95-window-header;
|
|
color:white;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
top:2px;
|
|
}
|
|
|
|
.column-link:hover .column-link__badge {
|
|
color:black;
|
|
}
|
|
|
|
.column-subheading {
|
|
background-color:$win95-bg;
|
|
color:black;
|
|
@include win95-border-outset-sides-only;
|
|
}
|
|
|
|
.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 {
|
|
background-size:32px 32px;
|
|
background-repeat:no-repeat;
|
|
background-position: 36px 50%;
|
|
padding-left:45px;
|
|
|
|
&:hover {
|
|
background-size:32px 32px;
|
|
background-repeat:no-repeat;
|
|
background-position: 36px 50%;
|
|
}
|
|
|
|
i {
|
|
font-size: 0px;
|
|
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();
|
|
}
|
|
|
|
|
|
@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;
|
|
}
|
|
|
|
.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_likes.png");
|
|
&:hover { background-image: url("../images/icon_likes.png"); }
|
|
}
|
|
.column-link[href="/web/lists"] {
|
|
background-image: url("../images/icon_lists.png");
|
|
&:hover { background-image: url("../images/icon_lists.png"); }
|
|
}
|
|
.column-link[href="/web/follow_requests"] {
|
|
background-image: url("../images/icon_follow_requests.png");
|
|
&:hover { background-image: url("../images/icon_follow_requests.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"); }
|
|
}
|
|
|
|
.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"); }
|
|
}
|
|
.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://github.com/tootsuite/documentation#documentation"] {
|
|
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"); }
|
|
}
|
|
.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"); }
|
|
}
|
|
|
|
.column .static-content.getting-started {
|
|
display:none;
|
|
}
|
|
|
|
.keyboard-shortcuts kbd {
|
|
background-color: $win95-bg;
|
|
}
|
|
|
|
.account__header {
|
|
background-color:#7f7f7f;
|
|
}
|
|
|
|
.account__header .account__header__content {
|
|
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;
|
|
border-top: 2px groove $win95-bg;
|
|
}
|
|
|
|
.account-authorize .account__header__content {
|
|
color:black;
|
|
margin:10px;
|
|
}
|
|
|
|
.account__action-bar__tab > span {
|
|
color:black;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.account__action-bar__tab strong {
|
|
color:black;
|
|
}
|
|
|
|
.account__action-bar {
|
|
border: unset;
|
|
}
|
|
|
|
.account__action-bar__tab {
|
|
border: 1px outset $win95-bg;
|
|
}
|
|
|
|
.account__action-bar__tab:active {
|
|
@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;
|
|
}
|
|
|
|
.dropdown--active .icon-button {
|
|
color:black;
|
|
@include win95-inset();
|
|
}
|
|
|
|
.dropdown--active .dropdown__content > ul > li > a {
|
|
background:transparent;
|
|
}
|
|
|
|
.dropdown--active .dropdown__content > ul > li > a:hover {
|
|
background:transparent;
|
|
color:black;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.dropdown__sep,
|
|
.dropdown-menu__separator
|
|
{
|
|
border-color:#7f7f7f;
|
|
}
|
|
|
|
.detailed-status__action-bar-dropdown .dropdown--active .dropdown__content.dropdown__left {
|
|
left: unset;
|
|
}
|
|
|
|
.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;
|
|
width: 28px !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.icon-button {
|
|
height: auto!important;
|
|
width: auto!important;
|
|
}
|
|
|
|
.status__action-bar-dropdown .icon-button {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.notification .status {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.status__wrapper .status {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.status__wrapper {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.status__prepend {
|
|
color: black;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.icon-button .fa-retweet {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.embed-modal, .error-modal, .onboarding-modal,
|
|
.actions-modal, .boost-modal, .confirmation-modal, .report-modal {
|
|
@include win95-outset()
|
|
background:$win95-bg;
|
|
}
|
|
|
|
.actions-modal::before,
|
|
.boost-modal::before,
|
|
.confirmation-modal::before,
|
|
.report-modal::before {
|
|
content: "Confirmation";
|
|
display:block;
|
|
background:$win95-window-header;
|
|
color:white;
|
|
font-weight:bold;
|
|
padding-left:2px;
|
|
}
|
|
|
|
.boost-modal::before {
|
|
content: "Boost confirmation";
|
|
}
|
|
|
|
.boost-modal__action-bar > div > span:before {
|
|
content: "Tip: ";
|
|
font-weight:bold;
|
|
}
|
|
|
|
.boost-modal__action-bar, .confirmation-modal__action-bar, .report-modal__action-bar {
|
|
background:$win95-bg;
|
|
margin-top:-15px;
|
|
}
|
|
|
|
.embed-modal h4, .error-modal h4, .onboarding-modal h4 {
|
|
background:$win95-window-header;
|
|
color:white;
|
|
font-weight:bold;
|
|
padding:2px;
|
|
font-size:13px;
|
|
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;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
color:black;
|
|
}
|
|
|
|
&:active {
|
|
@include win95-inset();
|
|
}
|
|
}
|
|
}
|
|
|
|
.embed-modal .embed-modal__container .embed-modal__html,
|
|
.embed-modal .embed-modal__container .embed-modal__html:focus {
|
|
background:white;
|
|
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;
|
|
content:"Control Panel";
|
|
color:white;
|
|
background-color:$win95-window-header;
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
width:calc(100%);
|
|
margin: 2px;
|
|
display:block;
|
|
padding:2px;
|
|
padding-left:22px;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.admin-wrapper {
|
|
position:relative;
|
|
background: $win95-bg;
|
|
@include win95-outset()
|
|
width:70vw;
|
|
height:80vh;
|
|
margin:10vh auto;
|
|
color: black;
|
|
padding-top:24px;
|
|
flex-direction:column;
|
|
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;
|
|
flex: 0 0 auto;
|
|
margin:2px;
|
|
}
|
|
|
|
.admin-wrapper .content-wrapper {
|
|
flex: 1 1 auto;
|
|
width:calc(100% - 20px);
|
|
@include win95-border-outset()
|
|
position:relative;
|
|
margin-left:10px;
|
|
margin-right:10px;
|
|
margin-bottom:40px;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.admin-wrapper .content {
|
|
background-color: $win95-bg;
|
|
width: 100%;
|
|
max-width:100%;
|
|
min-height:100%;
|
|
box-sizing:border-box;
|
|
position:relative;
|
|
}
|
|
.admin-wrapper .content h4 {
|
|
color: black;
|
|
}
|
|
|
|
.admin-wrapper .sidebar {
|
|
position:static;
|
|
background: $win95-bg;
|
|
color:black;
|
|
width: 100%;
|
|
height:auto;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.admin-wrapper .sidebar .logo {
|
|
position:absolute;
|
|
top:2px;
|
|
left:4px;
|
|
width:18px;
|
|
height:18px;
|
|
margin:0px;
|
|
}
|
|
|
|
.admin-wrapper .sidebar > ul {
|
|
background: $win95-bg;
|
|
margin:0px;
|
|
margin-left:8px;
|
|
color:black;
|
|
|
|
& > li {
|
|
display:inline-block;
|
|
|
|
&#settings,
|
|
&#admin {
|
|
padding:2px;
|
|
border: 0px solid transparent;
|
|
}
|
|
|
|
&#logout {
|
|
position:absolute;
|
|
@include win95-outset();
|
|
right:12px;
|
|
bottom:10px;
|
|
}
|
|
|
|
&#web {
|
|
display:inline-block;
|
|
@include win95-outset();
|
|
position:absolute;
|
|
left: 12px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
& > a {
|
|
display:inline-block;
|
|
@include win95-tab();
|
|
padding:2px 5px;
|
|
margin:0px;
|
|
color:black;
|
|
vertical-align:baseline;
|
|
|
|
&.selected {
|
|
background: $win95-bg;
|
|
color:black;
|
|
padding-top: 4px;
|
|
padding-bottom:4px;
|
|
}
|
|
|
|
&:hover {
|
|
background: $win95-bg;
|
|
color:black;
|
|
}
|
|
}
|
|
|
|
& > ul {
|
|
width:calc(100% - 20px);
|
|
background: transparent;
|
|
position:absolute;
|
|
left: 10px;
|
|
top:54px;
|
|
z-index:3;
|
|
|
|
& > li {
|
|
background: $win95-bg;
|
|
display: inline-block;
|
|
vertical-align:baseline;
|
|
|
|
& > a {
|
|
background: $win95-bg;
|
|
@include win95-tab();
|
|
color:black;
|
|
padding:2px 5px;
|
|
position:relative;
|
|
z-index:3;
|
|
|
|
&.selected {
|
|
background: $win95-bg;
|
|
color:black;
|
|
padding-bottom:4px;
|
|
padding-top: 4px;
|
|
padding-right:7px;
|
|
margin-left:-2px;
|
|
margin-right:-2px;
|
|
position:relative;
|
|
z-index:4;
|
|
|
|
&:first-child {
|
|
margin-left:0px;
|
|
}
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
color:black;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: $win95-bg;
|
|
color:black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
border:1px solid black;
|
|
border-radius:0px;
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width:100%;
|
|
}
|
|
|
|
.admin-wrapper table {
|
|
background-color: white;
|
|
@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,
|
|
.simple_form .input.with_label .label_input > label,
|
|
.admin-wrapper .content h6,
|
|
.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;
|
|
}
|
|
|
|
.table > tbody > tr:nth-child(2n+1) > td,
|
|
.table > tbody > tr:nth-child(2n+1) > th {
|
|
background-color:white;
|
|
}
|
|
|
|
.simple_form input[type=text],
|
|
.simple_form input[type=number],
|
|
.simple_form input[type=email],
|
|
.simple_form input[type=password],
|
|
.simple_form textarea {
|
|
color:black;
|
|
background-color:white;
|
|
@include win95-border-slight-inset();
|
|
|
|
&:active, &:focus {
|
|
background-color:white;
|
|
}
|
|
}
|
|
|
|
.simple_form button,
|
|
.simple_form .button,
|
|
.simple_form .block-button
|
|
{
|
|
background: $win95-bg;
|
|
@include win95-outset()
|
|
color:black;
|
|
font-weight: normal;
|
|
|
|
&:hover {
|
|
background: $win95-bg;
|
|
}
|
|
}
|
|
|
|
.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
|
|
{
|
|
background: $win95-bg;
|
|
}
|
|
|
|
.filters .filter-subset {
|
|
border: 2px groove $win95-bg;
|
|
padding:2px;
|
|
}
|
|
|
|
.filters .filter-subset a::before {
|
|
content: "";
|
|
background-color:white;
|
|
border-radius:50%;
|
|
border:2px solid black;
|
|
border-top-color:#7f7f7f;
|
|
border-left-color:#7f7f7f;
|
|
border-bottom-color:#f5f5f5;
|
|
border-right-color:#f5f5f5;
|
|
width:12px;
|
|
height:12px;
|
|
display:inline-block;
|
|
vertical-align:middle;
|
|
margin-right:2px;
|
|
}
|
|
|
|
.filters .filter-subset a.selected::before {
|
|
background-color:black;
|
|
box-shadow: inset 0 0 0 3px white;
|
|
}
|
|
|
|
.filters .filter-subset a,
|
|
.filters .filter-subset a:hover,
|
|
.filters .filter-subset a.selected {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|