From 6a9d1549484a6fb02d7d01e884577a7185302046 Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 27 Apr 2022 21:55:29 +0200 Subject: [PATCH] Update win95 style from cybre.space https://cybre.tech/cybrespace/mastodon/raw/branch/cybrespace-3.3/app/javascript/styles/win95.scss --- app/javascript/images/alert_badge.png | Bin 0 -> 622 bytes app/javascript/images/icon_bookmarks.png | Bin 0 -> 418 bytes app/javascript/images/icon_developers.png | Bin 0 -> 488 bytes app/javascript/images/icon_direct.png | Bin 0 -> 390 bytes app/javascript/images/icon_docs.png | Bin 0 -> 452 bytes app/javascript/images/icon_domain_blocks.png | Bin 0 -> 589 bytes app/javascript/images/icon_invite.png | Bin 0 -> 457 bytes app/javascript/images/icon_mobile_apps.png | Bin 0 -> 650 bytes app/javascript/images/icon_notifications.png | Bin 0 -> 282 bytes .../images/icon_profile_directory.png | Bin 0 -> 340 bytes app/javascript/images/icon_tos.png | Bin 0 -> 498 bytes app/javascript/styles/win95.scss | 1297 ++++++++++++++--- 12 files changed, 1109 insertions(+), 188 deletions(-) create mode 100644 app/javascript/images/alert_badge.png create mode 100644 app/javascript/images/icon_bookmarks.png create mode 100644 app/javascript/images/icon_developers.png create mode 100644 app/javascript/images/icon_direct.png create mode 100644 app/javascript/images/icon_docs.png create mode 100644 app/javascript/images/icon_domain_blocks.png create mode 100644 app/javascript/images/icon_invite.png create mode 100644 app/javascript/images/icon_mobile_apps.png create mode 100644 app/javascript/images/icon_notifications.png create mode 100644 app/javascript/images/icon_profile_directory.png create mode 100644 app/javascript/images/icon_tos.png diff --git a/app/javascript/images/alert_badge.png b/app/javascript/images/alert_badge.png new file mode 100644 index 0000000000000000000000000000000000000000..681f6e6516e9afd0682f8297c06ae47605d9c248 GIT binary patch literal 622 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSoCO|{#S9F3${@^GvDCf{C@57G z5>XP8S(1~=z`!xn`;4cqR;Rz0kEcH?gVa8j>_vK7)<9L_AXSc~B^mieU}fhtPM!BY z!^prri|Ga5!Q@X242;)3T^vIyZoR$jn0LrP!X;667>#)eG-iYn6S`?hC? zt_-rC_4DtlYehy?`lpYrU#~jD+fk5#gTZL$yxh<4zrTN;qR{>9}i`AU{GLq!1(NWS+;ckgne^fs$F1E1FDr%czU;fi};TM zUZygF%>qk%9lg-T8184$FY{ft_+- zw>?}%gOC0KMjr+i2AhWRdbkRPnQ-U4{|8sWU<7y0y}t+*FbALb%5d-RO}IvwZ~?PI z^S$4T7!`n?-NE=Q`A@WirY|^{ez5-+H@NvM|L^bpYz+(!3?E+eZYUFeGe_pl68S&e z5XYJy=<|*GBe8s!;-7e+E14Rc^BBwz#>`$1Hg8WQBa82xlBqZ5RsmB1gQu&X%Q~lo FCIEZu(X;>n literal 0 HcmV?d00001 diff --git a/app/javascript/images/icon_bookmarks.png b/app/javascript/images/icon_bookmarks.png new file mode 100644 index 0000000000000000000000000000000000000000..b0cff134425027d75188de49038f0f4e8d657020 GIT binary patch literal 418 zcmV;T0bTxyP))-;l>o|)#(%kdc&t_B74&# zy#sJ;CdV$PX>OrA!pb=~Ow0s4$%ieB-bkPV3n1Xost<`z3V3s^ND02KE55LzHXW8h z3c!qU9PxK(C^oE5d%o;h*uHG#0N-~M_cSYeRv-q<^PGvq4Tf4d2QM1=cf89a98x%3 zTb5;?;z}&t^V-V&YN$>ae`th?;6&nVm%@t?NcL4MvTYkas)0)cyiZjG1hjCCKve{D zg30!*WZZ@7+mLuLk4OWYlG0qq4^dY+>JL&4s5bYj@S5Cp|FP)Ws(Z2k`JA5wWMhMFbN7 zF!Sx;DJ1|X1PY0CbM#mf7#khKmGwxscc3tMJ#E6TDA0Q9=)NQ1vJFbY=O*+Acbry< zRSIH^w-CrV*Zbc#p{ib1Z@L2RpgCs{5zOqn1XRiUSOsp)TNDuh(yhq!33!YKfB*?)BfBC8xf6BphSiy1;G0T zCIAc}Fw6{Q=Om^c=^fO45F>%8EEMYwm*)HfA~e1VoJ@=*xW1*bS}TUT`Jv0O_dYrh$iqt(Ldn89 zIB*zaJ_TT+wQ-WQt|~FG_wIu@5fCRr2n($v1jKX37jmu5GB!=q)&aRN5T6kui4j`s zq%H~$l!S1N9&s0nt%?F!*j`-OZQM{%>#`3D_fa%^JX#5p07Se`nr zr{5jGrnwWOLUP0y*Lv?(eQ_X?ms4X*tYk?n=X2GM>wb9$&=QGAQHT_CoWpZHtoud` zCHOnoO9%2fQ>QT;LYia?-qb)T=e4k`iA^g$lJgok)C8{RyE7m+xgLFWfD=E*UG{GL kDHZ|k!=wpl0`3;@0+|A4#_cAlWdHyG07*qoM6N<$f)L)J!2kdN literal 0 HcmV?d00001 diff --git a/app/javascript/images/icon_docs.png b/app/javascript/images/icon_docs.png new file mode 100644 index 0000000000000000000000000000000000000000..6af1c8268914c1f52bb9ad6e19ba44dec55e0e78 GIT binary patch literal 452 zcmV;#0XzPQP)do+Etj%o4f;?Iv*==Gnj?(`t zr4%uQ09rfGv-uImEty$PlYz``}rl1Z2v2mt^Aq}OpA z;dT&4jeL-=oW?isocL_}$S43>;uH~$$X%@&%Rxi{T5%~f3h@QdgLojw z7G9Csl}-y6P1XJwYsk`G>4r+J$Ee(Hx27>vp1*nofr~bJ@2}Ty=i+giO*Pe8Ez|c1 zY_I4IJ9=abbefF5S9}N{mzqBTu=a^8z$c$JfBDmRXPs zFfBz>^p;-GyZx4;&vrvldh1C+DqcJffF-2P$g2PhG3!KB60ZUe6#I+n|}DtAG8b_<%n5t`jFaTLMij`Y@#lWGbY)2CYLtrT=OquT*u u@7ZitH=F@6+>S>fR+wM}(fV@!xAp_DNTai8XU8D`0000ZaX;M|?8}WV;`${j<#xGt97n!VEpbD0&kkcP+ylb3onq$=a`qJOwsv9&vJIex zkvJ4J;-YMaSf(H+F(s)Fzu)gOsaINGM33)Bw)MYj{F{sCXT0_7Hy(mo9AX zSqLw#BcTDpaLZKOOydZ^iVqMgkBL->C*mLiE&NV=74Bv!uKEiQ7WM_<#jD4=5PCfT zIS*%*0Z`%YdAcW_BWW)7j=vWdKo!?BL1ePRIZL511nJ@zfD$h_#aiOP^OmR5qmR}E zVj?bs__z)X;DrcYT;RG z^U_P7)%eE2PoIj6=Q!8iE4}fwn@|+`gaGsbWjS}6_xmj=-6?eLR;< b;o5!x9Z9qV8p~9%00000NkvXXu0mjfVch{{ literal 0 HcmV?d00001 diff --git a/app/javascript/images/icon_invite.png b/app/javascript/images/icon_invite.png new file mode 100644 index 0000000000000000000000000000000000000000..21156ec96ba6b4d589f1c865116c1f08230a34ad GIT binary patch literal 457 zcmV;)0XF`LP)Pu zYelU{DT`ma&X>#?Ld`Uc-=To0(Z+J;VGs+qakO#Hsb#j;Iay{JKaRr(xEr0OqSOx~ z^)l$bcQoFntOz;;05lMcJch_M62Js6KWo_d5CEK)&}f)H&oATM05~sWHY^6y4}dZX zy`+E*i2?3l>?O4)n+3Ijmh-X{L=k{e} z|1Zw-6zjT@W03HS$L!%PWtZ|Y!JeQPknm2({f^zQ6npAq+qUleNmLpEvTWspanT~M zG?M^QbQ@#5)&ekKe-=RQo7Vzx#)BpS+zZBQ3dAS|)b~zkL6Ge(1fM_@QR-25JQ$=n zXx&_M4bb0no6wsTj)A}qT<7L218LC@OFO#*r)fzMdh5Wq2IOw&4v2|r`o90cX{|qV z+!y+RYfejhgqFq@0#LOb?dV2Eb=OiUyWal+)Z)5(1*>8o00000NkvXXu0mjf>V(F2 literal 0 HcmV?d00001 diff --git a/app/javascript/images/icon_mobile_apps.png b/app/javascript/images/icon_mobile_apps.png new file mode 100644 index 0000000000000000000000000000000000000000..a7cbd78c189708a00aa599a0a0f0f74a1d89792f GIT binary patch literal 650 zcmV;50(Jd~P)L(*8M`&(b;#vF~+hlBB9q73CWQ zMrO{yNz%*+g3!qW5^(HfAU1F_V>t?{qP^dWyadvLgA;Hzo2xgnZ5zz&TcQfDkSX^P zPz4Z?CnBH%Xve@TdSyA!d(nfFX#JyY-ptAxurNRXg4c@(p&6ZK%6lPP_^Sd7hG3!n zwd@%5SmK_Wz*3$xnM{Cc27iSi&pQ#`ReWz`Kf)>fGjWz9SX3b??Fti-m|ur14su7h2#`E%@^V=!%)w z#cp@)n~pH|fTo30CZm;hi zLjBF+6o_=p+-dbp>3Y#J`*YhiSD1*Dq|sPg_Py?yqgBNd$9;Pyy*QtC$fLMtdzLfL zLkNY5a;=cs9~4h6D0P2I_$a;G#l)rMC-s46Of2tQuSF^sh=*r6+&wdsZ_@CZ#t4^o`jAHMf`qFRJBTV|23mW~@d!Q{^jEo~z{dAZbi@yj k6K8%G^wOC>4f^koFX{W?Bs?lfg8%>k07*qoM6N<$g0pTLxc~qF literal 0 HcmV?d00001 diff --git a/app/javascript/images/icon_notifications.png b/app/javascript/images/icon_notifications.png new file mode 100644 index 0000000000000000000000000000000000000000..0aaf5e68d2f77159ca55f2343897fc30ed1f5780 GIT binary patch literal 282 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?31We{epSZZGe6g=bU z;usQf_-&XY-w_3lDZc;L?wR9de)mF{c9_|>11fT}7W4#5@EkOhRIu-OVJ0Ei&8Vq* zkNee<0M1mVa&7fRLi?gMGo~Lg(u#JnSs|RWZ2l|0_<1 z_eac2QD6BNnJEeK9TV5b?Y|K!yJ01x>!<&s3mrc_(m!GJS4CSf`mN))l$)&8Tie(g zKc9`RzQR&5A%`g1*p6jgDKz}iKy85}Sb4q9e07ZanCjbBd literal 0 HcmV?d00001 diff --git a/app/javascript/images/icon_profile_directory.png b/app/javascript/images/icon_profile_directory.png new file mode 100644 index 0000000000000000000000000000000000000000..05a94213a2b172bc75f568fc5c84526892118c03 GIT binary patch literal 340 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzwj^(N7a$D;Kb?2i11Zh|kH}&M z20djEW~^9hUj`IpFY)wsWq-^i%%USuKK+9iQ0Sqji(^Q{;iJ<6`3@`aIC~!5`ylOX z9-I2@3}81~zwrCKthGi?HLs_d{>%H_^Thw{ zOeRh?uKUW9s>N1G|413vWd*>XR3nJ?dX1_UUxi6}#S~ zLSIJCqim`!fnGPK1x_*Amde$o%&~ldMN$+og`YWU-7o6{G6`J@$Mba OvkacDelF{r5}E)WA%M>S literal 0 HcmV?d00001 diff --git a/app/javascript/images/icon_tos.png b/app/javascript/images/icon_tos.png new file mode 100644 index 0000000000000000000000000000000000000000..d0dbb13f771b1b3b4d4f4b614df0e5a8b9b7cdce GIT binary patch literal 498 zcmVb7mG*r*IhgFEOV literal 0 HcmV?d00001 diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss index fdf2e59b6..66d451303 100644 --- a/app/javascript/styles/win95.scss +++ b/app/javascript/styles/win95.scss @@ -9,6 +9,7 @@ $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; @@ -21,6 +22,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, @@ -29,6 +36,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; @@ -54,6 +67,7 @@ $ui-highlight-color: $win95-window-header; border-radius:0px; } + @mixin win95-tab() { box-shadow: inset -1px 0px 0px #000000, inset 1px 0px 0px #ffffff, @@ -66,8 +80,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 { @@ -80,49 +100,98 @@ $ui-highlight-color: $win95-window-header; /* borrowed from cybrespace style: wider columns and full column width images */ @media screen and (min-width: 1300px) { - .column { - flex-grow: 1 !important; - max-width: 400px; - } - .drawer { - width: 17%; + 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; + } } -.media-gallery, -.video-player { - max-height:30vh; - height:30vh !important; +/* 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; + } +} + +/* 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; +} + +/* Better distinguish the search bar */ +.layout-single-column .compose-panel .search { position:relative; - margin-top:20px; - margin-left:-68px; - width: calc(100% + 80px) !important; - max-width: calc(100% + 80px); + top: -55px; + margin-bottom: -55px; } -.detailed-status .media-gallery, -.detailed-status .video-player { - margin-left:-5px; - width: calc(100% + 9px); - max-width: calc(100% + 9px); +/* 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; + } } -.video-player video { - transform: unset; - top: unset; -} - -.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; @@ -132,7 +201,7 @@ body { .ui, .ui .columns-area, body.admin { - background: #008080; + background: $win95-cyan; } .loading-bar { @@ -140,6 +209,10 @@ body.admin { background-color: #000080; } +.tabs-bar__wrapper { + background-color: $win95-cyan; +} + .tabs-bar { background: $win95-bg; @include win95-outset(); @@ -214,10 +287,6 @@ body.admin { z-index:2; } -.column { - max-height:100vh; -} - .column > .scrollable { background: $win95-bg; @include win95-border-outset(); @@ -231,7 +300,7 @@ body.admin { } .column-header { - padding:2px; + padding:0px; font-size:13px; background:#7f7f7f; @include win95-border-outset(); @@ -239,6 +308,12 @@ body.admin { color:white; font-weight:bold; align-items:baseline; + min-height: 24px; +} + +.column-header > button { + padding: 0px; + min-height: 22px; } .column-header__wrapper.active { @@ -259,18 +334,22 @@ body.admin { .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; @@ -282,24 +361,34 @@ body.admin { 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 { @@ -307,8 +396,8 @@ body.admin { 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 { @@ -331,10 +420,9 @@ body.admin { } .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 { @@ -342,19 +430,37 @@ body.admin { @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 { @@ -448,8 +554,7 @@ body.admin { } .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; } @@ -459,6 +564,34 @@ body.admin { 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; @@ -473,11 +606,37 @@ body.admin { } .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, @@ -573,6 +732,7 @@ body.admin { justify-items:left; padding-left:4px; } + .icon-button { background:$win95-bg; @include win95-border-outset(); @@ -636,15 +796,15 @@ body.admin { 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 { @@ -681,7 +841,7 @@ body.admin { } .account { - border-bottom: 2px groove $win95-bg; + border-bottom: none; } .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { @@ -715,6 +875,7 @@ body.admin { font-weight:bold; } + .drawer__header { background: $win95-bg; @include win95-border-outset(); @@ -819,6 +980,23 @@ body.admin { 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, @@ -839,6 +1017,11 @@ body.admin { } } +.trends__item__name a, +.trends__item__current { + color: black; +} + .drawer__inner, .drawer__inner.darker { background-color:$win95-bg; @@ -893,6 +1076,10 @@ body.admin { 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; @@ -932,32 +1119,34 @@ body.admin { 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 { @@ -1052,44 +1241,8 @@ body.admin { } -#Getting-started { - background-color:$win95-bg; - @include win95-inset(); - border-bottom-width:0px; -} - -#Getting-started::before { - content:"Start"; - color:black; - font-weight:bold; - font-size:15px; - width:80%; - text-align:center; - display:block; - position:absolute; - right:2px; -} - -#Getting-started { - position:relative; - padding:5px 15px; - width:60px; - font-size:0px; - color:$win95-bg; - - 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-subheading { - background-color:$win95-bg; - color:black; - border-bottom: 2px groove $win95-bg; - text-transform: none; - font-size: 16px; +.button.button-secondary { + background-color: $win95-bg; } .column-link { @@ -1101,18 +1254,82 @@ body.admin { } } +.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 { +} + +.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; @@ -1125,8 +1342,144 @@ body.admin { 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; +} + +.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"); } @@ -1135,6 +1488,10 @@ body.admin { 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"); } @@ -1151,62 +1508,62 @@ body.admin { 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="/about/more"] { +.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"); } +} +.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 { @@ -1225,12 +1582,37 @@ body.admin { 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; @@ -1263,18 +1645,75 @@ body.admin { @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; } @@ -1301,11 +1740,11 @@ body.admin { } .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; @@ -1313,39 +1752,52 @@ body.admin { 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; -} - -.status__action-bar-dropdown { - position: relative; - top: -3px; -} - -.detailed-status__action-bar-dropdown .dropdown { - position: relative; - top: -4px; + 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, @@ -1389,6 +1841,13 @@ body.admin { 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; @@ -1412,11 +1871,42 @@ body.admin { @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; @@ -1439,6 +1929,7 @@ body.admin { @include win95-outset(); width:70vw; height:80vh; + min-height:80vh; margin:10vh auto; color: black; padding-top:24px; @@ -1466,6 +1957,7 @@ body.admin { .admin-wrapper .sidebar-wrapper { position:static; height:auto; + min-height:auto; flex: 0 0 auto; margin:2px; } @@ -1473,12 +1965,15 @@ body.admin { .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 { @@ -1489,6 +1984,9 @@ body.admin { box-sizing:border-box; position:relative; } +.admin-wrapper .content h4 { + color: black; +} .admin-wrapper .sidebar { position:static; @@ -1611,6 +2109,10 @@ body.admin { } } +.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; @@ -1657,7 +2159,20 @@ body.admin { @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, @@ -1671,10 +2186,48 @@ body.admin { 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; @@ -1729,6 +2282,12 @@ a.table-action-link:hover, background: $win95-bg; } +.simple_form select { + background: white; + border-radius: 0px; + color: black; +} + .filters .filter-subset { border: 2px groove $win95-bg; padding:2px; @@ -1761,3 +2320,365 @@ a.table-action-link:hover, 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; + } +} +