API tools faq
paste
MasterDalK

KiraKiratter.css

MasterDalK
Apr 12th, 2017
2,852
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 65.33 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.   Mastodon: Kirakiratter Custom CSS V9.1
  3.   By Salil Gupta (@MasterDalK)
  4.   Other Contributors: @pomo, @sumire, @bitmap, @hisagi, @lae, @takenoko, @unarist
  5.  
  6.   Instructions: https://github.com/MasterDalK/kktCSS#kktcss
  7.   Feature Requests & Bug Reports: https://github.com/MasterDalK/kktCSS
  8.   Feature Requests & Bug Reports: #kktCSS on https://kirakiratter.com
  9.  
  10.   There are some toggles at the top, if you would like to disable them just comment as needed.
  11.   Toggles:
  12.     Meiryo UI
  13.     Column Resizing based on Browser Width
  14.     Reply Indiciator Colour
  15. */
  16.  
  17. @import url('https://fonts.googleapis.com/css?family=Roboto');
  18.  
  19. /* MEIRYO UI -- Japanese Font Face */
  20. @font-face {
  21.   font-family: 'Meiryo';
  22.   font-style: normal;
  23.   font-weight: normal;
  24. }
  25.  
  26. @media screen and (-webkit-min-device-pixel-ratio: 0) {
  27.   @font-face {
  28.     font-family: 'Meiryo';
  29.   }
  30. }
  31.  
  32. @media screen and (min-width: 320px){
  33.   body {
  34.     font-family: "Roboto", "Meiryo";
  35.     font-style: normal;
  36.     font-weight: normal;
  37.     letter-spacing: 0px;
  38.   }
  39. }
  40.  
  41. @media screen and (min-width: 768px){
  42.   body {
  43.     font-family: "Roboto", "Meiryo";
  44.     font-style: normal;
  45.     font-weight: normal;
  46.     letter-spacing: 0.1px;
  47.   }
  48. }
  49. /* Meiryo UI -- END */
  50.  
  51. /* Column Resizing On Desktop */
  52. @media screen and (min-width: 1025px) and (max-width: 2560px) {
  53.   .column {
  54.     flex-grow: 1;
  55.   }
  56. }
  57.  
  58. @media screen and (min-width: 2560px) {
  59.   .column, .drawer {
  60.     height: auto;
  61.     margin-top: 0;
  62.   }
  63.  
  64.   .column {
  65.     min-width: 736px;
  66.   }
  67. }
  68. /* Column Resizing -- END */
  69.  
  70. /* Reply Indicator Toggle */
  71. .reply-indicator {
  72.   background: #d7e5a3;
  73. } /* Green */
  74. /* .reply-indicator { background: #f5b9c2; } Pink */
  75. /* Reply Indicator -- END */
  76.  
  77.  
  78. /* BACKGROUNDS */
  79. body /* user */,
  80. .about-body /* about */,
  81. .admin-wrapper /* settings */,
  82. .ui /* timeline */ {
  83.   background-color: #ecf5be;
  84.   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiBoZWlnaHQ9IjExNCIgdmlld0JveD0iMCAwIDgwIDExNCIgd2lkdGg9IjgwIiB2ZXJzaW9uPSIxLjEiPgo8cmVjdCBoZWlnaHQ9IjExNCIgd2lkdGg9IjgwIiB5PSIwIiB4PSIwIiBmaWxsPSIjZWNmNWJlIi8+CjxwYXRoIGZpbGw9IiNlMGVhOTUiIGQ9Im0wIDU3IDQwLTU3IDQwIDU3LTQwIDU3eiIvPgo8L3N2Zz4=");
  85.   background-repeat: repeat;
  86.   background-size: auto; /* for user page */
  87. }
  88.  
  89. /* KKT Banner */
  90. .ui::before {
  91.   position: absolute;
  92.   z-index: 100;
  93.   display: inline;
  94.   content: "";
  95.   min-width: 120px;
  96.   max-width: 30%;
  97.   min-height: 50px;
  98.   pointer-events: none;
  99.   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI1NS41IiBoZWlnaHQ9IjExOC40IiB2aWV3Qm94PSIwIDAgMjU1LjUgMTE4LjQiPjxzdHlsZT4uczB7ZmlsbDojZDFiZDNlO30uczF7ZmlsbDpub25lO3N0cm9rZS13aWR0aDowLjM7c3Ryb2tlOiNjOWEwNjM7fS5zMntmaWxsOiNmNWRjNDA7fS5zM3tmaWxsOiM3YTUwM2Y7fTwvc3R5bGU+PGRlZnM+PGNsaXBQYXRoIGNsaXBQYXRoVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNMCAxMTMuNEgyNTUuMVYwSDBaIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLC00Mi42ODQzMTksMTMzLjE1NzQ2KSI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjAuNzc4ODQzLDEyNy44NDU1OCw1Ni4wMTEyNzEpIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcFBhdGg0NTAxKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTk5LjgxNzQsNjQuMTQzNCkiPjxwYXRoIGQ9Ik0wIDBDMS41IDAuNSAzLjcgMS4xIDMuOSAzIDMuOSAzIDMuOSAzIDMuOSAzIDMuOSAzIDMuNyAzLjYgMy40IDMuOSAzLjEgNC4zIDIuOCA0LjUgMi40IDQuNyAyLjEgNC44IDEuOSA0LjkgMS40IDUuMSAxLjIgNS4yIDAuOSA1LjMgMC41IDUuNCAwLjQgNS41IDAuMSA1LjYtMC4yIDUuN2MtMS4zIDAuMy0yLjggMC41LTIuOCAwLjUgMCAwLTEgMC0xLjktMC4xLTAuNCAwLTEtMC4xLTEuNy0wLjIgMCAwLTAuNyAwLjEtMC43IDAuMS0wLjUgMC0xLjEgMC4xLTIgMC4yVi0yLjNjMCAwIDAgMCAwIDBDLTYuMS0xLjctMy0wLjkgMCAwIiBmaWxsPSIjZDFiZDNlIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5OS44MTc0LDY0LjE0MzQpIj48cGF0aCBkPSJNMCAwQzEuNSAwLjUgMy43IDEuMSAzLjkgMyAzLjkgMyAzLjkgMyAzLjkgMyAzLjkgMyAzLjcgMy42IDMuNCAzLjkgMy4xIDQuMyAyLjggNC41IDIuNCA0LjcgMi4xIDQuOCAxLjkgNC45IDEuNCA1LjEgMS4yIDUuMiAwLjkgNS4zIDAuNSA1LjQgMC40IDUuNSAwLjEgNS42LTAuMiA1LjdjLTEuMyAwLjMtMi44IDAuNS0yLjggMC41IDAgMC0xIDAtMS45LTAuMS0wLjQgMC0xLTAuMS0xLjctMC4yIDAgMC0wLjcgMC4xLTAuNyAwLjEtMC41IDAtMS4xIDAuMS0yIDAuMlYtMi4zYzAgMCAwIDAgMCAwQy02LjEtMS43LTMtMC45IDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NS45MDIzLDY0LjIwODgpIj48cGF0aCBkPSJtMCAwYy0xLjUgMC41LTMuNyAxLjEtMy45IDMgMCAwIDAgMCAwIDAgMCAwIDAuMiAwLjUgMC41IDAuOSAwLjMgMC40IDAuNiAwLjUgMS4xIDAuOCAwLjIgMC4xIDAuNSAwLjIgMSAwLjQgMC4xIDAuMSAwLjQgMC4yIDAuOCAwLjMgMC4xIDAgMC40IDAuMiAwLjggMC4yIDEuMyAwLjMgMi44IDAuNSAyLjggMC41IDAgMCAxIDAgMS45LTAuMUM1LjMgNiA1LjkgNiA2LjYgNS45IDYuNiA1LjkgNy4zIDUuOSA3LjMgNS45IDcuOCA2IDguNCA2IDkuMiA2LjFWLTIuM0M5LjItMi4zIDkuMi0yLjMgOS4yLTIuMyA2LjEtMS43IDMtMC45IDAgMCIgZmlsbD0iI2QxYmQzZSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NS45MDIzLDY0LjIwODgpIj48cGF0aCBkPSJtMCAwYy0xLjUgMC41LTMuNyAxLjEtMy45IDMgMCAwIDAgMCAwIDAgMCAwIDAuMiAwLjUgMC41IDAuOSAwLjMgMC40IDAuNiAwLjUgMS4xIDAuOCAwLjIgMC4xIDAuNSAwLjIgMSAwLjQgMC4xIDAuMSAwLjQgMC4yIDAuOCAwLjMgMC4xIDAgMC40IDAuMiAwLjggMC4yIDEuMyAwLjMgMi44IDAuNSAyLjggMC41IDAgMCAxIDAgMS45LTAuMUM1LjMgNiA1LjkgNiA2LjYgNS45IDYuNiA1LjkgNy4zIDUuOSA3LjMgNS45IDcuOCA2IDguNCA2IDkuMiA2LjFWLTIuM0M5LjItMi4zIDkuMi0yLjMgOS4yLTIuMyA2LjEtMS43IDMtMC45IDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTMuMjUyLDcwLjAxODkpIj48cGF0aCBkPSJtMCAwYzEuMyAwLjEgMS44IDAuMyAzLjYgMC4zIDAgMCAyLjMgMCA1LjMtMS41IDAuNS0wLjIgMC44LTAuNSAxLTAuNyAwLjMtMC4zIDAuNC0wLjYgMC41LTEgMCAwIDAgMCAwIDAgMCAwIDAtMC4xIDAuMS0wLjEgMC40LTAuOSAwLjItMi4yIDAuMy0zLjIgMC0wLjQgMC0wLjUgMC0wLjcgMC0wLjIgMC4xLTEgMC4xLTIuMSAwLTAuOS0wLjEtNS41LTAuMi0xMS44IDIuMS0wLjggNC42LTEuNiA3LjMtMi4zIDUuNi0xLjQgMTAuNy0xLjcgMTQuNy0xLjYtMiAzLjMtNC4xIDYuNi02LjEgMTAgMi4yIDMuMyA0LjUgNi42IDYuNyAxMC05LjEgMC41LTEzLjEgMS41LTE0LjcgMi40IDAgMC0wLjIgMC4xLTAuMyAwLjItMC45IDAuNS0zIDEuNy01LjggMy0xIDAuNS0yLjEgMC45LTMuNSAxLjQgMCAwLTYgMS45LTEwLjMgMEMtMi4xIDEuOC0yLjQgMS4zLTIuNCAxLjMtMi41IDEuMS0yLjggMC42LTIuNyAwLjItMi41LTAuMi0xLjUtMC4xIDAgMCIgZmlsbD0iI2Y1ZGM0MCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTMuMjUyLDcwLjAxODkpIj48cGF0aCBkPSJtMCAwYzEuMyAwLjEgMS44IDAuMyAzLjYgMC4zIDAgMCAyLjMgMCA1LjMtMS41IDAuNS0wLjIgMC44LTAuNSAxLTAuNyAwLjMtMC4zIDAuNC0wLjYgMC41LTEgMCAwIDAgMCAwIDAgMCAwIDAtMC4xIDAuMS0wLjEgMC40LTAuOSAwLjItMi4yIDAuMy0zLjIgMC0wLjQgMC0wLjUgMC0wLjcgMC0wLjIgMC4xLTEgMC4xLTIuMSAwLTAuOS0wLjEtNS41LTAuMi0xMS44IDIuMS0wLjggNC42LTEuNiA3LjMtMi4zIDUuNi0xLjQgMTAuNy0xLjcgMTQuNy0xLjYtMiAzLjMtNC4xIDYuNi02LjEgMTAgMi4yIDMuMyA0LjUgNi42IDYuNyAxMC05LjEgMC41LTEzLjEgMS41LTE0LjcgMi40IDAgMC0wLjIgMC4xLTAuMyAwLjItMC45IDAuNS0zIDEuNy01LjggMy0xIDAuNS0yLjEgMC45LTMuNSAxLjQgMCAwLTYgMS45LTEwLjMgMEMtMi4xIDEuOC0yLjQgMS4zLTIuNCAxLjMtMi41IDEuMS0yLjggMC42LTIuNyAwLjItMi41LTAuMi0xLjUtMC4xIDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi40Njc4LDcwLjA4NDMpIj48cGF0aCBkPSJtMCAwYy0xLjMgMC4xLTEuOCAwLjMtMy42IDAuMyAwIDAtMi4zIDAtNS4zLTEuNS0wLjUtMC4yLTAuOC0wLjUtMS0wLjctMC4zLTAuMy0wLjQtMC42LTAuNS0xIDAgMCAwIDAgMCAwIDAgMCAwLTAuMS0wLjEtMC4xLTAuNC0wLjktMC4yLTIuMi0wLjMtMy4yIDAtMC40IDAtMC41IDAtMC43IDAtMC4yLTAuMS0xLTAuMS0yLjEgMC0wLjkgMC4xLTUuNSAwLjItMTEuOC0yLjEtMC44LTQuNi0xLjYtNy4zLTIuMy01LjYtMS40LTEwLjctMS43LTE0LjctMS42IDIgMy4zIDQuMSA2LjYgNi4xIDEwLTIuMiAzLjMtNC41IDYuNy02LjcgMTAgOS4xIDAuNSAxMy4xIDEuNSAxNC43IDIuNCAwIDAgMC4yIDAuMSAwLjMgMC4yIDAuOSAwLjUgMyAxLjcgNS44IDMgMSAwLjUgMi4xIDAuOSAzLjUgMS40IDAgMCA2IDEuOSAxMC4zIDBDMi4xIDEuOCAyLjQgMS4zIDIuNCAxLjMgMi41IDEuMSAyLjggMC42IDIuNyAwLjMgMi41LTAuMiAxLjUtMC4xIDAgMCIgZmlsbD0iI2Y1ZGM0MCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi40Njc4LDcwLjA4NDMpIj48cGF0aCBkPSJtMCAwYy0xLjMgMC4xLTEuOCAwLjMtMy42IDAuMyAwIDAtMi4zIDAtNS4zLTEuNS0wLjUtMC4yLTAuOC0wLjUtMS0wLjctMC4zLTAuMy0wLjQtMC42LTAuNS0xIDAgMCAwIDAgMCAwIDAgMCAwLTAuMS0wLjEtMC4xLTAuNC0wLjktMC4yLTIuMi0wLjMtMy4yIDAtMC40IDAtMC41IDAtMC43IDAtMC4yLTAuMS0xLTAuMS0yLjEgMC0wLjkgMC4xLTUuNSAwLjItMTEuOC0yLjEtMC44LTQuNi0xLjYtNy4zLTIuMy01LjYtMS40LTEwLjctMS43LTE0LjctMS42IDIgMy4zIDQuMSA2LjYgNi4xIDEwLTIuMiAzLjMtNC41IDYuNy02LjcgMTAgOS4xIDAuNSAxMy4xIDEuNSAxNC43IDIuNCAwIDAgMC4yIDAuMSAwLjMgMC4yIDAuOSAwLjUgMyAxLjcgNS44IDMgMSAwLjUgMi4xIDAuOSAzLjUgMS40IDAgMCA2IDEuOSAxMC4zIDBDMi4xIDEuOCAyLjQgMS4zIDIuNCAxLjMgMi41IDEuMSAyLjggMC42IDIuNyAwLjMgMi41LTAuMiAxLjUtMC4xIDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS41NTQ3LDYxLjc2NzQpIj48cGF0aCBkPSJtMCAwYy0wLjEtMi41IDAtNSAwLjEtNy41IDAuMS0yLjEgMC4yLTQuMSAwLjQtNi4yIDAuNi05LjIgNzUuMi05IDc1LjgtOSAwLjYgMCA3NS4yLTAuMiA3NS44IDkgMC4xIDIuMSAwLjMgNC4xIDAuNCA2LjIgMC4xIDIuNSAwLjIgNSAwLjEgNy41IDAgMC44LTAuMSAxLjctMC4xIDIuNS0wLjEgMC45IDAuMiAyLTAuMyAyLjkgMCAwIDAgMC4xLTAuMSAwLjEgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMUMxNTEuOCAzLjggMTQ5LjEgMy4zIDE0Ny4yIDIuOCAxNDMuMyAyIDEzOS41IDEuMyAxMzUuNSAwLjcgMTM1LjUgMC43IDEzNS41IDAuNyAxMzUuNSAwLjcgMTIwLjktMS4zIDc3LjEtMi4yIDc2LjMtMi4yIDc1LjUtMi4yIDMxLjctMS4zIDE3LjEgMC43IDE3LjEgMC43IDE3LjEgMC43IDE3LjEgMC43IDEzLjIgMS4zIDkuMyAyIDUuNSAyLjggMy42IDMuMyAwLjggMy44IDAuNiA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjUgMC41IDUuNCAwLjUgNS40IDAuNSA1LjQtMC4xIDQuNiAwLjIgMy40IDAuMSAyLjUgMC4xIDEuNyAwIDAuOCAwIDAiIGZpbGw9IiNmNWRjNDAiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTEuNTU0Nyw2MS43Njc0KSI+PHBhdGggZD0ibTAgMGMtMC4xLTIuNSAwLTUgMC4xLTcuNSAwLjEtMi4xIDAuMi00LjEgMC40LTYuMiAwLjYtOS4yIDc1LjItOSA3NS44LTkgMC42IDAgNzUuMi0wLjIgNzUuOCA5IDAuMSAyLjEgMC4zIDQuMSAwLjQgNi4yIDAuMSAyLjUgMC4yIDUgMC4xIDcuNSAwIDAuOC0wLjEgMS43LTAuMSAyLjUtMC4xIDAuOSAwLjIgMi0wLjMgMi45IDAgMCAwIDAuMS0wLjEgMC4xIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjFDMTUxLjggMy44IDE0OS4xIDMuMyAxNDcuMiAyLjggMTQzLjMgMiAxMzkuNSAxLjMgMTM1LjUgMC43IDEzNS41IDAuNyAxMzUuNSAwLjcgMTM1LjUgMC43IDEyMC45LTEuMyA3Ny4xLTIuMiA3Ni4zLTIuMiA3NS41LTIuMiAzMS43LTEuMyAxNy4xIDAuNyAxNy4xIDAuNyAxNy4xIDAuNyAxNy4xIDAuNyAxMy4yIDEuMyA5LjMgMiA1LjUgMi44IDMuNiAzLjMgMC44IDMuOCAwLjYgNS41IDAuNSA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjQgMC41IDUuNCAwLjUgNS40LTAuMSA0LjYgMC4yIDMuNCAwLjEgMi41IDAuMSAxLjcgMCAwLjggMCAwWiIgY2xhc3M9InMxIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4Ny44NzQsNDcuNjgzKSI+PHBhdGggZD0ibTAgMGMwLTAuMy0wLjItMC42LTAuNS0wLjYtMC4zIDAtMC42IDAuMS0wLjcgMC41LTAuMyAyLjctMC41IDQuMS0wLjggNi44IDAgMC4zIDAuMiAwLjYgMC41IDAuNiAwLjMgMCAwLjYtMC4xIDAuNy0wLjUgMC0wLjQgMC4xLTAuNSAwLjEtMC45IDAuMSAwLjQgMC4yIDAuNyAwLjYgMSAwLjQgMC4zIDEgMC43IDEuNiAwLjdDMi4yIDcuNyAyLjMgNy4yIDIuMyA3LjEgMi40IDYuNiAxLjkgNi41IDEuMyA2LjUtMC4yIDYuMi0wLjUgNS41LTAuNiA1LjEtMC40IDMtMC4yIDIgMCAwIiBmaWxsPSIjN2E1MDNmIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3NS44MjIzLDUzLjE5MjcpIj48cGF0aCBkPSJNMCAwQzIuMSAwLjIgMi40LTEuOCAyLjQtMi4zIDIuNC0yLjQgMi41LTIuOSAxLjktMi45IDAuMy0zLjEtMC41LTMuMS0yLjEtMy4zLTIuMi0yLTItMC4yIDAgME0zLjEtNC4xQzIuNS00LjIgMi41LTQuNiAyLjUtNC45IDIuNC02LjIgMS41LTYuNiAwLjYtNi43Yy0yLjItMC4yLTIuNSAxLjgtMi43IDIuOSAxLjggMC4yIDIuNiAwLjIgNC40IDAuNCAwLjkgMC4xIDEuNCAwLjMgMS4zIDEuMi0wLjEgMS0xLjIgMy0zLjcgMi44LTIuNS0wLjItMy41LTIuMS0zLjMtNC4zIDAuMS0xLjEgMC42LTMuOSA0LTMuNSAyLjYgMC4zIDMuMiAyLjEgMy4yIDIuNyAwIDAuMy0wLjMgMC41LTAuNyAwLjUiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY0LjY2MTEsNTIuMDk3KSI+PHBhdGggZD0ibTAgMGMwLjItMi4zIDAuMy0zLjQgMC40LTUuNiAwLTAuMyAwLjEtMC45IDAuOS0wLjkgMC4xIDAgMC4zIDAgMC41IDAuMSAwLjEgMC4xIDAuMiAwLjEgMC4zIDAuMiAwLjEgMC4xIDAuMSAwLjEgMC4yIDAuMiAwLjIgMC4zIDAgMC43IDAuMiAwLjkgMC4xIDAuMSAwLjMgMC4xIDAuNCAwLjEgMC4zLTAuMiAwLjMtMSAwLTEuNS0wLjUtMC43LTEuNi0wLjctMS45LTAuNy0wLjQgMC0xIDAtMS40IDAuNC0wLjQgMC40LTAuNCAwLjgtMC40IDEtMC4yIDIuMy0wLjIgMy41LTAuNCA1LjgtMC42IDAtMC45LTAuMS0xLjUtMC4xLTAuMiAwLTAuMyAwLjEtMC4zIDAuMiAwIDAuMSAwLjEgMC4zIDAuMyAwLjMgMC42IDAgMC45IDAuMSAxLjUgMC4xIDAgMC43LTAuMSAxLjEtMC4xIDEuOCAwIDAuMyAwLjMgMC42IDAuNSAwLjYgMC4zIDAgMC42LTAuMiAwLjYtMC41IDAuMS0wLjcgMC4xLTEuMSAwLjEtMS44IDAuNyAwLjEgMSAwLjEgMS43IDAuMSAwIDAgMCAwIDAgMEMyIDAuNyAyLjIgMC43IDIuNiAwLjcgMi43IDAuNyAyLjggMC42IDIuOCAwLjUgMi44IDAuMyAyLjcgMC4yIDIuNiAwLjIgMS42IDAuMSAxIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU0LjU4ODksNTEuNDUyNSkiPjxwYXRoIGQ9Im0wIDBjMC4xLTIuMyAwLjItMy40IDAuMy01LjYgMC0wLjMgMC4xLTAuOSAwLjktMC45IDAuMSAwIDAuMyAwIDAuNSAwLjEgMC4xIDAuMSAwLjIgMC4xIDAuMyAwLjIgMC4xIDAuMSAwLjEgMC4xIDAuMiAwLjIgMC4zIDAuMyAwIDAuNyAwLjIgMC45IDAuMSAwLjEgMC4zIDAuMSAwLjQgMC4xIDAuMy0wLjIgMC4zLTEgMC0xLjUtMC41LTAuNy0xLjYtMC43LTEuOS0wLjctMC40IDAtMSAwLTEuNCAwLjUtMC4zIDAuNC0wLjQgMC44LTAuNCAxLTAuMSAyLjMtMC4yIDMuNS0wLjMgNS44LTAuNiAwLTAuOSAwLTEuNS0wLjEtMC4yIDAtMC4zIDAuMS0wLjMgMC4yIDAgMC4xIDAuMSAwLjMgMC4zIDAuMyAwLjYgMCAwLjkgMCAxLjUgMC4xIDAgMC43LTAuMSAxLjEtMC4xIDEuOCAwIDAuMyAwLjMgMC42IDAuNiAwLjYgMC4zIDAgMC42LTAuMiAwLjYtMC41IDAtMC43IDAuMS0xLjEgMC4xLTEuOCAwLjcgMCAxIDAuMSAxLjcgMC4xIDAgMCAwIDAgMCAwIDAuMyAwIDAuNSAwIDAuOSAwLjFDMi43IDAuNyAyLjggMC41IDIuOCAwLjQgMi44IDAuMyAyLjcgMC4yIDIuNiAwLjEgMS42IDAuMSAxIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQ0LjY1MjMsNDUuMjYzKSI+PHBhdGggZD0ibTAgMGMtMC40LTAuNC0xLjUtMC45LTIuNC0wLjktMC4zIDAtMS44IDAtMS45IDEuMyAwIDIgMi44IDIuMiA0LjEgMi4zek0xLjMtMC42QzEuMy0wLjUgMS4yLTAuMiAxLjItMC4xIDEuMSAxLjUgMS4xIDIuMyAxLjEgNCAxIDQuNSAwLjkgNSAwLjYgNS4zLTAuMiA2LjQtMS42IDYuNC0yLjEgNi40Yy0wLjQgMC0xLjIgMC0yLTAuNS0wLjktMC42LTEuNS0xLjgtMS4yLTIuNCAwLjEtMC4xIDAuMy0wLjQgMC42LTAuNCAwLjIgMCAwLjQgMC4yIDAuNCAwLjIgMC4xIDAuMSAwLjEgMC4xIDAuMSAwLjIgMC4xIDAuMiAwLjEgMC42IDAuMiAwLjggMCAwIDAgMCAwIDAuMSAwLjEgMC4zIDAuNSAxLjMgMS45IDEuNCAxLjIgMCAxLjktMC42IDEuOS0yIDAtMC4yIDAtMC4zIDAtMC42LTIuMS0wLjItNS40LTAuNS01LjQtMi45IDAtMS44IDEuOS0yIDIuOC0xLjkgMS41IDAgMi41IDAuNiAyLjkgMC45IDAuMS0wLjQgMC40LTAuOCAwLjgtMC44IDAuMyAwIDAuNSAwLjIgMC41IDAuNCAwIDAuMS0wLjIgMC40LTAuMiAwLjUiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMwLjQzNTUsNDQuMTA0OCkiPjxwYXRoIGQ9Im0wIDBjMC0wLjMtMC4zLTAuNS0wLjYtMC41LTAuMyAwLTAuNiAwLjItMC42IDAuNSAwIDIuNyAwIDQuMSAwIDYuOCAwIDAuMyAwLjMgMC41IDAuNiAwLjUgMC4zIDAgMC42LTAuMiAwLjYtMC41IDAtMC40IDAtMC41IDAtMC45IDAuMSAwLjQgMC4zIDAuNiAwLjcgMC45IDAuNCAwLjMgMS4xIDAuNSAxLjcgMC41QzMuMSA3LjQgMy4xIDYuOSAzLjEgNi44IDMuMSA2LjMgMi42IDYuMyAyIDYuMyAwLjUgNi4yIDAuMSA1LjUgMCA1LjEgMCAzLjEgMCAyIDAgMCIgZmlsbD0iIzdhNTAzZiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjIuMDY5Myw0NC4xMzEyKSI+PHBhdGggZD0ibTAgMGMwLTAuMy0wLjMtMC41LTAuNi0wLjUtMC4zIDAtMC42IDAuMi0wLjYgMC41IDAgMi43IDAuMSA0LjEgMC4xIDYuOCAwIDAuMyAwLjMgMC41IDAuNiAwLjVDLTAuMiA3LjQgMC4xIDcuMSAwLjEgNi44IDAgNC4xIDAgMi43IDAgME0wLjUgOS44QzAuNCA5LjQgMCA5LTAuNSA5LTEgOS0xLjQgOS40LTEuNCA5LjljMCAwLjUgMC40IDAuOCAwLjkgMC44IDAuNSAwIDAuOS0wLjQgMC45LTAuOCIgZmlsbD0iIzdhNTAzZiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTQuNDU3LDQ0LjI2MjEpIj48cGF0aCBkPSJtMCAwYzAtMC4zLTAuMi0wLjUtMC41LTAuNS0wLjIgMC0wLjMgMC4xLTAuNCAwLjJDLTIuMSAxLjUtMi43IDIuNC0zLjkgNC4yLTQuMiA0LjEtNC4zIDQtNC41IDMuOS00LjUgMi41LTQuNiAxLjgtNC42IDAuNC00LjYgMC4xLTQuNy0wLjEtNC45LTAuMi00LjktMC4yLTQuOS0wLjItNC45LTAuMi01LTAuMy01LTAuMy01LTAuM2MtMC4xIDAtMC4xIDAtMC4yIDAgMCAwIDAgMCAwIDBoMCAwYy0wLjEgMC0wLjEgMC0wLjIgMC4xLTAuMiAwLjEtMC40IDAuNC0wLjQgMC43IDAuMSAzLjkgMC4yIDUuOCAwLjQgOS43IDAgMC40IDAuMiAwLjYgMC40IDAuNyAwIDAgMC4xIDAgMC4xIDAgMCAwIDAgMCAwLjEgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjEgMCAwLjEgMCAwLjItMC4xIDAuMi0wLjEgMC40LTAuNCAwLjQtMC43LTAuMS0yLjItMC4xLTMuMi0wLjItNS40IDEuNiAxLjEgMi40IDEuNiAzLjkgMi43IDAgMCAwLjEgMC4xIDAuMiAwLjFDLTAuMiA3LjQtMC4xIDcuMi0wLjEgNy0wLjEgNi45LTAuMSA2LjgtMC4yIDYuOC0xLjQgNi0yIDUuNi0zLjEgNC44LTEuOSAzLTEuMyAyLjEtMC4xIDAuMyAwIDAuMiAwIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLjUwNzgsNDUuNzI1KSI+PHBhdGggZD0ibTAgMGMtMC41LTAuMy0xLjUtMC43LTIuNC0wLjctMC4zIDAtMS44IDAuMi0xLjcgMS41IDAuMSAyIDMgMiA0LjMgMkMwLjEgMS43IDAuMSAxLjEgMCAwTTEuMi0wLjdDMS4yLTAuNiAxLjItMC4zIDEuMi0wLjIgMS4zIDEuNCAxLjMgMi4yIDEuNCAzLjkgMS40IDQuNCAxLjMgNC45IDEuMSA1LjMgMC40IDYuNC0xLjEgNi41LTEuNSA2LjYtMS45IDYuNi0yLjcgNi43LTMuNSA2LjItNC41IDUuNy01LjIgNC41LTQuOSAzLjktNC44IDMuOC00LjYgMy41LTQuMyAzLjVjMC4yIDAgMC40IDAuMiAwLjQgMC4yIDAuMSAwLjEgMC4xIDAuMSAwLjEgMC4yIDAuMSAwLjIgMC4yIDAuNiAwLjIgMC44IDAgMCAwIDAgMCAwLjEgMC4xIDAuMyAwLjYgMS4zIDIgMS4yQy0wLjMgNS45IDAuMyA1LjIgMC4yIDMuOSAwLjIgMy42IDAuMiAzLjUgMC4yIDMuMy0xLjkgMy4zLTUuMyAzLjMtNS40IDAuOWMtMC4xLTEuOCAxLjctMi4xIDIuNi0yLjIgMS41LTAuMSAyLjUgMC40IDMgMC43IDAuMS0wLjQgMC4zLTAuOSAwLjctMC45IDAuMyAwIDAuNSAwLjEgMC41IDAuMyAwIDAuMS0wLjEgMC40LTAuMSAwLjUiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODYuMjM2OCw0NS44MjA3KSI+PHBhdGggZD0ibTAgMGMwLTAuMy0wLjMtMC41LTAuNi0wLjUtMC4zIDAtMC42IDAuMy0wLjYgMC42IDAuMiAyLjcgMC4zIDQuMSAwLjYgNi44IDAgMC4zIDAuMyAwLjUgMC42IDAuNUMwLjMgNy40IDAuNiA3LjEgMC42IDYuOCAwLjUgNi40IDAuNSA2LjIgMC41IDUuOSAwLjcgNi4yIDAuOCA2LjUgMS4zIDYuNyAxLjcgNyAyLjQgNy4yIDMgNy4xIDMuNyA3LjEgMy43IDYuNiAzLjcgNi41IDMuNiA2IDMuMiA2IDIuNSA2LjEgMSA2LjEgMC42IDUuNCAwLjQgNS4xIDAuMyAzIDAuMiAyIDAgMCIgZmlsbD0iIzdhNTAzZiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3Ny44OTYsNDYuNTgxNCkiPjxwYXRoIGQ9Im0wIDBjMC0wLjMtMC40LTAuNS0wLjYtMC41LTAuMyAwLTAuNiAwLjMtMC41IDAuNiAwLjMgMi43IDAuNCA0LjEgMC43IDYuOCAwIDAuMyAwLjMgMC41IDAuNiAwLjVDMC40IDcuNCAwLjcgNy4xIDAuNyA2LjggMC40IDQuMSAwLjMgMi43IDAgME0xLjMgOS44QzEuMyA5LjMgMC44IDkgMC4zIDljLTAuNSAwLjEtMC45IDAuNS0wLjggMC45IDAgMC41IDAuNSAwLjggMSAwLjcgMC41IDAgMC45LTAuNSAwLjgtMC45IiBmaWxsPSIjN2E1MDNmIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLjQ5NzYsNDcuMzYwNykiPjxwYXRoIGQ9Ik0wIDBDMC0wLjMtMC4zLTAuNS0wLjUtMC41LTAuNy0wLjQtMC44LTAuMy0wLjktMC4yLTIgMS43LTIuNSAyLjYtMy42IDQuNi0zLjggNC40LTMuOSA0LjQtNC4xIDQuMi00LjMgMi45LTQuNCAyLjItNC42IDAuOC00LjYgMC41LTQuNyAwLjMtNC45IDAuMi00LjkgMC4yLTQuOSAwLjItNC45IDAuMi01IDAuMi01IDAuMS01LjEgMC4xLTUuMSAwLjEtNS4yIDAuMS01LjIgMC4xLTUuMyAwLjEtNS4zIDAuMS01LjMgMC4xLTUuMyAwLjEtNS4zIDAuMS01LjMgMC4xaDBjLTAuMSAwLTAuMSAwLTAuMiAwLjEtMC4yIDAuMS0wLjQgMC40LTAuMyAwLjggMC41IDMuOCAwLjcgNS44IDEuMiA5LjYgMCAwLjQgMC4zIDAuNiAwLjUgMC43IDAgMCAwLjEgMCAwLjEgMCAwIDAgMCAwIDAuMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIDAuMSAwIDAuMi0wLjEgMC4yLTAuMSAwLjMtMC40IDAuMy0wLjgtMC4zLTIuMS0wLjQtMy4yLTAuNy01LjQgMS43IDAuOSAyLjUgMS40IDQuMiAyLjNDMC4xIDcuNCAwLjIgNy40IDAuMyA3LjQgMC41IDcuNCAwLjYgNy4yIDAuNiA3IDAuNSA2LjkgMC41IDYuOCAwLjQgNi44LTAuOSA2LjEtMS41IDUuNy0yLjcgNS0xLjcgMy4xLTEuMSAyLjItMC4xIDAuMyAwIDAuMiAwIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PC9nPjwvZz48L2c+PC9zdmc+');
  100.   background-repeat: no-repeat;
  101.   background-size: contain;
  102. }
  103.  
  104. @media screen and (min-width: 768px) {
  105.   .ui::before {
  106.     top: 9px;
  107.     left: 6px;
  108.   }
  109. }
  110.  
  111. @media screen and (min-width: 1025px) {
  112.   .ui::before {
  113.     top: 10px;
  114.     left: 6px;
  115.   }
  116. }
  117.  
  118. /* Banner -- END */
  119.  
  120. .drawer__header,
  121. .drawer__inner,
  122. .drawer__inner.darker,
  123. .tabs-bar,
  124. .onboarding-modal__page .figure {
  125.   background-color: #e46bac;
  126.   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjgiIHdpZHRoPSIyMCI+PHJlY3QgaGVpZ2h0PSIyOCIgd2lkdGg9IjIwIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTQ2YmFjIi8+PHBhdGggZD0ibTAgMTQgMTAtMTQgMTAgMTQtMTAgMTR6IiBmaWxsPSIjZGY1N2E0Ii8+PC9zdmc+');
  127. }
  128.  
  129. .column-header,
  130. .column-icon,
  131. .column-back-button,
  132. .column-link {
  133.   background: #d0e093;
  134. }
  135.  
  136. .column-subheading {
  137.   background: #dced91;
  138. }
  139.  
  140. @media screen and (min-width: 320px) {
  141.     .column-subheading {
  142.       padding: 4px 20px;
  143.   }
  144.  
  145.   .confirmation-modal {
  146.     max-width: 300px;
  147.   }
  148. }
  149.  
  150. @media screen and (min-width: 768px) {
  151.     .column-subheading {
  152.       padding: 7px 20px;
  153.   }
  154.  
  155.   .confirmation-modal {
  156.     max-width: 380px;
  157.   }
  158. }
  159.  
  160. .column > .scrollable,
  161. .empty-column-indicator {
  162.   background: rgba(212, 220, 171, 0.5);
  163. }
  164.  
  165. .media-spoiler {
  166.   background: rgba(0, 0, 0, 0.1);
  167. }
  168.  
  169. .activity-stream .media-spoiler,
  170. .activity-stream .media-spoiler:hover {
  171.   background: #e2e2c9;
  172.   margin-top: 0px;
  173. }
  174.  
  175. .account__header > div {
  176.   background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.8));
  177. }
  178.  
  179. .card:after {
  180.   background:  linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.8));
  181. }
  182.  
  183. .status__content .status__content__spoiler-link,
  184. .reply-indicator__content .status__content__spoiler-link,
  185. .activity-stream .status.light .status__content a.status__content__spoiler-link,
  186. .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link {
  187.   background: rgba(237, 42, 144, 0.6);
  188. }
  189.  
  190. .muted a.status__content__spoiler-link {
  191.   background: #eda1c8;
  192. }
  193.  
  194. .dropdown--active .dropdown__content > ul,
  195. .dropdown--active .dropdown__content > ul > li > a {
  196.   background: #e3a4ad;
  197. }
  198.  
  199. .muted a.status__content__spoiler-link:hover,
  200. .status__content .status__content__spoiler-link:hover,
  201. .reply-indicator__content .status__content__spoiler-link:hover,
  202. .activity-stream .status.light .status__content a.status__content__spoiler-link:hover,
  203. .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link:hover,
  204. .dropdown--active .dropdown__content > ul > li > a:hover {
  205.   background: #f5b9c2;
  206. }
  207.  
  208. .dropdown-active .dropdown__content.dropdown__left > ul {
  209.   left: -14em;
  210.   display: inline-block;
  211. }
  212.  
  213. .dropdown-active .dropdown__content.dropdown__left > ul li {
  214.   width: 16em;
  215. }
  216.  
  217. .dropdown__sep {
  218.   border-color: #e57cb1;
  219. }
  220.  
  221. .dropdown--active .dropdown__content:before {
  222.   border-color: transparent transparent #e3a4ad transparent;
  223. }
  224.  
  225. .scrollable .status:first-child,
  226. .scrollable .notification:first-child,
  227. .account-timeline__header + .status {
  228.   margin-top: 6px;
  229. }
  230.  
  231. .status,
  232. .notification,
  233. .onboarding-modal__pager,
  234. .confirmation-modal,
  235. .boost-modal,
  236. .boost-modal__container .status {
  237.   background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%);
  238.   border-radius: 8px;
  239.   border: solid 2px #e1c152;
  240.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  241. }
  242.  
  243. .status,
  244. .notification {
  245.   margin-left: 64px;
  246.   margin-right: 2px;
  247.   padding-left: 8px;
  248.   margin-bottom: 8px;
  249. }
  250.  
  251. .notification {
  252.   margin-left: 1px;   /* Old browsers */
  253.   background: linear-gradient(to bottom, rgba(252, 252, 225, 0.8) 0%, rgba(252, 252, 225, 0.8) 65%, rgba(252, 252, 225, 0.8) 65%, rgba(249, 240, 174, 0.8) 100%);
  254. }
  255.  
  256. .notification__message {
  257.   margin-left: 25px;
  258.   padding: 6px 0 6px 0;
  259. }
  260.  
  261. .onboarding-modal,
  262. .boost-modal__action-bar,
  263. .confirmation-modal__action-bar {
  264.   background: none;
  265. }
  266.  
  267. .account {
  268.   border: none;
  269. }
  270.  
  271. .detailed-status,
  272. .activity-stream .entry .detailed-status.light,
  273. .status-card, .status-card:hover {
  274.   background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%);
  275.   border-radius: 8px;
  276.   margin-bottom: 8px;
  277.   border: solid 2px #e1c152;
  278.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  279. }
  280.  
  281. /* status balloon tail */
  282.  
  283. .status::before,
  284. .notification::before {
  285.   content: "";
  286.   display: block;
  287.   width: 12px;
  288.   height: 14px;
  289.   position: absolute;
  290.   left: -11px;
  291.   background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxsaW5lIGlkPSJzdmdfMSIgeTI9IjEyLjQxMiIgeDI9IjEwLjAzNTc1IiB5MT0iMC44MzMiIHgxPSIxMC4wMzU3NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI0ZDRkNFMSIgZmlsbD0ibm9uZSIvPg0KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im05Ljc2LDFjMCwwIC00LjgyMzUsMC45MjY3NSAtOCw1LjgzM2M1LjQyNjc1LDEgOCw1LjMzNCA4LDUuMzM0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNFMUMxNTIiIGZpbGw9IiNGQ0ZDRTEiLz4NCjwvc3ZnPg==);
  292. }
  293.  
  294. .status.muted::before,
  295. .boost-modal__container .status::before {
  296.   background:
  297.   url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxsaW5lIGlkPSJzdmdfMSIgeTI9IjEyLjQxMiIgeDI9IjEwLjAzNTc1IiB5MT0iMC44MzMiIHgxPSIxMC4wMzU3NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI0ZDRkNFMSIgZmlsbD0ibm9uZSIvPg0KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im05Ljc2LDFjMCwwIC00LjgyMzUsMC45MjY3NSAtOCw1LjgzM2M1LjQyNjc1LDEgOCw1LjMzNCA4LDUuMzM0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNlOGQxN2YiIGZpbGw9IiNGQ0ZDRTEiLz4NCjwvc3ZnPg==);
  298.   /*url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxsaW5lIGlkPSJzdmdfMSIgeTI9IjEyLjQxMiIgeDI9IjEwLjAzNTc1IiB5MT0iMC44MzMiIHgxPSIxMC4wMzU3NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI0ZDRkNFMSIgZmlsbD0ibm9uZSIvPg0KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im05Ljc2LDFjMCwwIC00LjgyMzUsMC45MjY3NSAtOCw1LjgzM2M1LjQyNjc1LDEgOCw1LjMzNCA4LDUuMzM0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNlYmRjOTMiIGZpbGw9IiNGQ0ZDRTEiLz4NCjwvc3ZnPg==);*/
  299. }
  300.  
  301. .status.muted {
  302.   left: -4px;
  303. }
  304.  
  305. .muted .status__action-bar .fa {
  306.   opacity: 0.75;
  307.   transition: opacity 300ms;
  308. }
  309.  
  310. .muted .status__action-bar .fa:hover {
  311.   opacity: 1;
  312.   transition: opacity 300ms;
  313. }
  314.  
  315. /* avatar */
  316.  
  317. .status .account__avatar,
  318. .notification .account__avatar,
  319. .status .avatar,
  320. .notification .avatar,
  321. .notification-follow .account__avatar {
  322.   border: solid 2px #e1c152;
  323. }
  324.  
  325. .status .avatar,
  326. .status .account__avatar {
  327.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  328. }
  329.  
  330. .status.muted,
  331. .boost-modal__container .status,
  332. .status.muted .status__avatar,
  333. .boost-modal__status-header .status__avatar {
  334.   box-shadow: none;
  335.   border: solid 2px #e8d17f;
  336. }
  337.  
  338. .status.muted .avatar,
  339. .status.muted .account__avatar,
  340. .boost-modal__status-header .account__avatar {
  341.   box-shadow: none;
  342.   opacity: 0.5;
  343.   border: none;
  344. }
  345.  
  346. .status.muted .status__avatar,
  347. .boost-modal__status-header .status__avatar {
  348.   opacity: 1;
  349.   border-radius: 4px;
  350. }
  351.  
  352. .boost-modal__status-header .status__avatar {
  353.   height: auto;
  354. }
  355.  
  356. .status__avatar {
  357.   margin-left: -74px;
  358.   top: 0 !important;
  359. }
  360.  
  361. .notification-follow .avatar,
  362. .notification-follow .account__avatar {
  363.   left: 0;
  364.   top: 0;
  365. }
  366.  
  367. /* COLOUR STYLING */
  368. /* Brown */
  369. p, /* Katswoots -- Posts, Tweets, Katsus, TOOTS, take your pick. */
  370. .status__content,
  371. .status-card__description,
  372. .column-subheading, /* Getting Started */
  373. .confirmation-modal__container, /* Modals */
  374. .onboarding-modal__page p span,
  375. .onboarding-modal__page h1 span,
  376. .simple_form .input.file label, /* Forms */
  377. .simple_form .input.select label,
  378. .simple_form .input.radio_buttons label,
  379. .simple_form .input.radio_buttons .radio label,
  380. .simple_form .input.boolean label,
  381. .simple_form input[type=text],
  382. .simple_form input[type=number],
  383. .simple_form input[type=email],
  384. .simple_form input[type=password],
  385. .simple_form textarea,
  386. .simple_form input[type=file],
  387. .flash-message strong, /* 2FA And Settings */
  388. .recovery-codes,
  389. .oauth-prompt,
  390. .follow-prompt,
  391. .admin-wrapper .table,
  392. .filters .filter-subset strong,
  393. .filters .filter-subset a,
  394. .table a.table-action-link,
  395. .about-body .wrapper, /* Landing Page */
  396. .screenshot-with-signup .simple_form .info a,
  397. .screenshot-with-signup .closed-registrations-message .info a,
  398. .landing-strip, /* Profiles */
  399. .accounts-grid .account-grid-card,
  400. .pagination .prev,
  401. .pagination .next,
  402. .pagination .prev a,
  403. .pagination .next a,
  404. .pagination .page a,
  405. .pagination .page.gap,
  406. .report__target strong, /* User Reports */
  407. .report__textarea,
  408. .account-authorize .account__header__content /* Follow Requests */ {
  409.   color: #7b5d4d;
  410. }
  411.  
  412. /* Lighter Brown */
  413. .muted .status__content p,
  414. .boost-modal__container p,
  415. .loading-indicator {
  416.   color: #ad9588;
  417. }
  418.  
  419. /* Darker Brown */
  420. .icon-button.active:hover,
  421. .drawer__tab:hover,
  422. .icon-button:hover,
  423. .column-icon:hover,
  424. .column-header:hover,
  425. .column-link:hover,
  426. .drawer__tab,
  427. .column-icon,
  428. .column-header,
  429. .column-link,
  430. .column-back-button,
  431. .column-back-button span,
  432. .compose-form__warning span {
  433.   color: #6a4643;
  434. }
  435.  
  436. /* User @ Text & Links */
  437.  
  438. /* a(pink underline) > span(green text) */
  439. /* Pink */
  440. .status__display-name strong, /* Katswoots -- Posts, Tweets, Katsus, TOOTS, take your pick. */
  441. .detailed-status__display-name strong,
  442. .account__display-name strong,
  443. .status__content a,
  444. .status__content .h-card span,
  445. .mention span,
  446. .mention.hashtag span,
  447. .account__header__content a, /* Profile */
  448. .reply-indicator__content a, /* Notifications & Reply Indicator */
  449. .notification__message .fa-user-times,
  450. .fa-user-times,
  451. .compose-form__warning a,
  452. .h-card,
  453. .h-card span,
  454. .h-card .u-url.mention,
  455. .h-card .u-url.mention span,
  456. .status.light .status__content a,
  457. .information-board .section strong, /* Landing Page */
  458. .about-body h1,
  459. .contact-email strong,
  460. .owner .name .display_name,
  461. a[href*='/tags/'] span, /* Hashtag Fix */
  462. .status__prepend .status__display-name strong, /* boost/favourited preprend */
  463. .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong, /* Standalone Pages */
  464. .activity-stream .status.light .display-name strong,
  465. .activity-stream .status.light .status__content a,
  466. .activity-stream .pre-header .status__display-name.muted strong,
  467. .activity-stream .detailed-status.light .status__content a,
  468. .activity-stream .detailed-status.light .status__content a.hashtag,
  469. .activity-stream .detailed-status.light .status__content a.mention,
  470. .accounts-grid .account-grid-card .display_name,
  471. .confirmation-modal__container strong, /* Modals */
  472. .onboarding-modal__page p strong,
  473. .table a, /* Settings */
  474. .compact-header h1 a,
  475. .oauth-prompt strong, /* 2FA */
  476. .follow-prompt strong,
  477. .filters .filter-subset a.selected {
  478.   color: #ed649c;
  479.   text-decoration: none;
  480. }
  481.  
  482. .loading-bar {
  483.   background-color: #ed649c;
  484. }
  485.  
  486. /* Link Underlines on Hover */
  487. .status__display-name strong:hover,
  488. .detailed-status__display-name strong:hover,
  489. .account__display-name strong:hover,
  490. .status__content a:hover,
  491. .reply-indicator__content a:hover,
  492. .h-card.u-url.p-nickname.mention:hover,
  493. .h-card.u-url.p-nickname.mention span:hover,
  494. .status.light .status__content a:hover,
  495. .status__content .h-card span:hover,
  496. .mention span:hover,
  497. .mention.hashtag span:hover,
  498. .account__header__content a:hover,
  499. a[href*='/tags/'] span:hover,
  500. .status__prepend .status__display-name strong:hover,
  501. .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:hover,
  502. .activity-stream .status.light .display-name strong:hover,
  503. .activity-stream .status.light .status__content a:hover,
  504. .activity-stream .detailed-status.light .status__content a:hover,
  505. .activity-stream .pre-header .status__display-name.muted strong:hover,
  506. .activity-stream .detailed-status.light .status__content a.hashtag:hover,
  507. .compose-form__warning a:hover {
  508.   text-decoration: underline;
  509. }
  510.  
  511. /* Lighter Pink */
  512. .muted .status__display-name strong,
  513. .boost-modal__container .status.light .display-name strong,
  514. .compact-header h1 small,
  515. .muted .status__content a,
  516. .muted .status__content .u-url,
  517. .muted .status__content .u-url span,
  518. .muted .status__content .permalink.mention span {
  519.   color: #f086b1;
  520. }
  521.  
  522. /* Green */
  523. a span, /* Toots */
  524. .notification__display-name:hover,
  525. .compose-form__warning span strong,
  526. .status__relative-time:hover,
  527. .notification__message,
  528. .detailed-status__meta,
  529. .status-card__title,
  530. .getting-started p, /* Columns */
  531. .status__prepend,
  532. .empty-column-indicator,
  533. .media-spoiler,
  534. .activity-stream .media-spoiler,
  535. .activity-stream .media-spoiler:hover,
  536. .nothing-here,
  537. .footer,
  538. .column-settings__section,
  539. .setting-toggle,
  540. .boost-modal__action-bar>div, /* Modals */
  541. .confirmation-modal__action-bar>div,
  542. .status.light .display-name span,
  543. .activity-stream .pre-header, /* Standalones */
  544. .activity-stream .detailed-status.light .detailed-status__meta,
  545. .activity-stream .detailed-status.light .detailed-status__meta a,
  546. .activity-stream .detailed-status.light .detailed-status__meta .detailed-status__application,
  547. .activity-stream .status.light .display-name span,
  548. .activity-stream .status.light .status__header .status__meta .status__relative-time,
  549. .activity-stream .detailed-status.light .detailed-status__display-name .display-name span,
  550. .simple_form span.hint, /* Settings */
  551. .report__target {
  552.   color: #8e9956;
  553. }
  554.  
  555. /* Green - Links turned into not so important links */
  556. .about-body p a,
  557. .owner .name .username,
  558. .about-body .actions .info a,
  559. .screenshot-with-signup .simple_form .info a,
  560. .screenshot-with-signup .closed-registrations-message .info a,
  561. .container .form-footer ul.no-list a,
  562. .accounts-grid .account-grid-card .username,
  563. .compose-form__warning a span {
  564.   color: #8e9956;
  565.     text-decoration: none;
  566. }
  567.  
  568. /* White */
  569. .status__content__spoiler-link span,
  570. .activity-stream .status.light .status__content a.status__content__spoiler-link ,
  571. .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link {
  572.   /* "!important" is need for a.status__content__spoiler-link to override ".status__content a { color: !important }" in our CSS */
  573.   color: #fff !important;
  574. }
  575.  
  576. .column-header,
  577. .column-back-button,
  578. .column-link {
  579.   font-family: "Segoe UI", "Roboto";
  580.   font-weight: bold;
  581. }
  582.  
  583. /* Getting Started */
  584. /* span selector overrides `a > span { color: !important; }` */
  585.  
  586. .getting-started a,
  587. .getting-started a span {
  588.   color: #707844; /* darken(#8e9956, 10%) */
  589. }
  590. .getting-started a:hover,
  591. .getting-started a:hover span {
  592.   color: #515831; /* darken(#8e9956, 20%) */
  593. }
  594.  
  595. /* Embed cards */
  596.  
  597. .status-card:hover {
  598.   border: solid 2px #bc9c2b;
  599. }
  600.  
  601. .status-card__image {
  602.   background: none;
  603. }
  604.  
  605. /* ScrollBar -- WebKit only (Chrome/Opera/Vivaldi/Safari) */
  606. ::-webkit-scrollbar-track:active,
  607. ::-webkit-scrollbar-track:hover {
  608.   background: rgba(0, 0, 0, 0.1);
  609. }
  610.  
  611. ::-webkit-scrollbar-thumb,
  612. ::-webkit-scrollbar-thumb:hover {
  613.   background: #6a4643;
  614. }
  615.  
  616. /* KATSU! */
  617. .button {
  618.   background: #9bc430;
  619. }
  620.  
  621. .button:hover,
  622. .button:active,
  623. .button:focus {
  624.   background: #85a13b;
  625. }
  626.  
  627. .button:disabled {
  628.   background: hsla(77, 20%, 60%, 1);
  629. }
  630.  
  631. .button span {
  632.   white-space: nowrap;
  633.   overflow: hidden;
  634. }
  635.  
  636. /* Buttons & Tabs that aren't the KATSU! button */
  637. .icon-button,
  638. .notification__message .fa-user-plus,
  639. .fa-user-plus,
  640. .icon-button:active,
  641. .icon-button:focus,
  642. .status__prepend div i {
  643.   color: #8b6461;
  644. }
  645.  
  646. .drawer__tab,
  647. .icon-button.active:hover,
  648. .icon-button:hover,
  649. button.icon-button i.fa-retweet:hover {
  650.   text-shadow: -1px -1px 0 #f5e33a, 1px -1px 0 #f5e33a, -1px 1px 0 #f5e33a, 1px 1px 0 #f5e33a;
  651. }
  652.  
  653. .icon-button.disabled {
  654.   color: #9c7a78;
  655. }
  656.  
  657. .icon-button.disabled:hover {
  658.   text-shadow: none;
  659. }
  660.  
  661. .status__action-bar .icon-button > i {
  662.   vertical-align: bottom;
  663. }
  664.  
  665. /* Column Update Colours */
  666. .column-header.active {
  667.   box-shadow: 0 1px 0 #ed649c;
  668. }
  669.  
  670. .column-header.active .fa {
  671.   color: #ed649c;
  672.   text-shadow: 0 0 10px #ed649c;
  673. }
  674.  
  675. .status-list__unread-indicator,
  676. .notifications__unread-indicator {
  677.   background: radial-gradient(ellipse, rgba(237, 100, 156,0.23) 0%, rgba(237, 100, 156,0) 60%);
  678.   transform: translate3d(0,0,0);
  679. }
  680.  
  681. /* Katsu Drawer & Search */
  682. .navigation-bar {
  683.   background: hsla(325, 58%, 48%, 0.6);
  684. }
  685.  
  686. .privacy-dropdown.active .privacy-dropdown__value {
  687.   border-radius: 4px 0 0 4px;
  688.   box-shadow: -4px 0 4px rgba(0,0,0,0.1);
  689. }
  690.  
  691. .privacy-dropdown__dropdown {
  692.   bottom: -25px;
  693.   left: 27px;
  694.   top: auto;
  695. }
  696.  
  697. .privacy-dropdown__option__content strong,
  698. .privacy-dropdown__option {
  699.   color: hsl(77, 25%, 20%);
  700. }
  701.  
  702. .privacy-dropdown__option__content {
  703.   color: hsl(77, 25%, 45%);
  704. }
  705.  
  706. .icon-button.inverted.active,
  707. .text-icon-button.active {
  708.   color: #96b34c; /* green */
  709. }
  710.  
  711. .privacy-dropdown__option:hover,
  712. .privacy-dropdown__option.active {
  713.   background: hsla(77, 40%, 50%, 1); /* green */
  714. }
  715. .privacy-dropdown__option.active:hover {
  716.   background: hsla(77, 40%, 55%, 1); /* green */
  717. }
  718.  
  719. .navigation-bar strong {
  720.   color: #efcfcf !important;
  721.   font-weight: 900 !important;
  722. }
  723.  
  724. .navigation-bar a[href='/settings/profile'] span {
  725.   color: #dfafaf !important;
  726.   font-weight: 900;
  727. }
  728.  
  729. .navigation-bar a[href='/settings/profile'] span:hover {
  730.   text-decoration: underline;
  731. }
  732.  
  733. .tabs-bar__link.active,
  734. .column-settings--outer,
  735. .column-settings__outer,
  736. .account__action-bar,
  737. .column-link:hover,
  738. .collapsable:hover,
  739. .load-more:hover {
  740.   background: rgba(255, 255, 255, 0.7);
  741. }
  742.  
  743. .drawer__tab:hover {
  744.   text-shadow: none;
  745. }
  746.  
  747. .column-header:focus,
  748. .column-icon:focus,
  749. .status__content__spoiler-link:focus,
  750. .column-back-button:focus {
  751.   outline: none;
  752. }
  753.  
  754. .search-results__header {
  755.   background: hsla(325, 58%, 48%, 0.6);
  756.   border-bottom: solid 1px #e3a4ad;
  757. }
  758.  
  759. .search-results__section {
  760.   background: hsla(325, 58%, 48%, 0.6);
  761. }
  762.  
  763. .compose-form__buttons .icon-button:hover {
  764.   text-shadow: none;
  765. }
  766.  
  767. .dropdown--active .dropdown__content > ul > li > a:hover {
  768.   color: #fff;
  769. }
  770.  
  771. div.drawer__inner div div div div span[style*="color: rgb(255, 80, 80)"],
  772. .character-counter--over {
  773.   color: #efcfcf !important; /* red character count */
  774. }
  775.  
  776. div.drawer__inner div:not(.navigation-bar) div:last-child div:last-child div:nth-child(n+1) {
  777.   padding-top: 5px !important;
  778. }
  779.  
  780. .search-results__hashtag,
  781. .search-results__hashtag:hover,
  782. .search-results__hashtag:active,
  783. .search-results__hashtag:focus,
  784. .search-results .account__display-name strong,
  785. .search-results__header span {
  786.   color: #efcfcf !important;
  787. }
  788.  
  789. .search-results .display-name span {
  790.   color: #dfafaf;
  791. }
  792.  
  793. .search__icon .fa.active {
  794.   color: #fff;
  795.   opacity: 1;
  796. }
  797.  
  798. .search__icon .fa-times-circle.active {
  799.   color: #fff;
  800.   opacity: 1;
  801. }
  802.  
  803. .search__input {
  804.   background: #d0e093;
  805.   color: #7c8658;
  806. }
  807.  
  808. .search__input::-webkit-input-placeholder {
  809.   color: #7c8658;
  810. }
  811. .search__input::-moz-placeholder {
  812.   color: #7c8658;
  813. }
  814. .search__input:-ms-input-placeholder {
  815.   color: #7c8658;
  816. }
  817. .search__input:-moz-placeholder {
  818.   color: #7c8658;
  819. }
  820.  
  821. .search__input:focus::-webkit-input-placeholder {
  822.   color: #fff;
  823. }
  824. .search__input:focus::-moz-placeholder {
  825.   color: #fff;
  826. }
  827. .search__input:focus:-ms-input-placeholder {
  828.   color: #fff;
  829. }
  830. .search__input:focus:-moz-placeholder {
  831.   color: #fff;
  832. }
  833.  
  834. .search__input:focus {
  835.   background: #7c8658;
  836.   color: #fff;
  837. }
  838.  
  839. .search__input, .autosuggest-textarea__textarea {
  840.     font-size: 16px;
  841. }
  842.  
  843. @media screen and (min-width: 1025px) {
  844.     .search__input, .autosuggest-textarea__textarea {
  845.         font-size: 14px;
  846.     }
  847. }
  848.  
  849. .compose-form__warning {
  850.   background-color: #f5b9c2;
  851.   border: 0;
  852. }
  853.  
  854. /* Apple Device Fixes */
  855.  
  856. .mastodon-column-container {
  857.   height: auto !important;
  858. }
  859.  
  860. .column-collapsable,
  861. .getting-started__wrapper {
  862.   flex-shrink: 0;
  863. }
  864.  
  865. .mastodon-column-container[aria-hidden="true"] {
  866.  display: none;
  867. }
  868.  
  869. .column-collapsable > div:nth-child(2) {
  870.   overflow: auto !important;
  871. }
  872.  
  873. /* Column Settings */
  874.  
  875. .react-toggle-track {
  876.   background: rgba(0, 0, 0, 0.5);
  877. }
  878.  
  879. .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  880.   background: rgba(0, 0, 0, 0.3);
  881. }
  882.  
  883. .react-toggle-thumb {
  884.   border-color: rgba(0, 0, 0, 0.5);
  885. }
  886.  
  887. .react-toggle--checked .react-toggle-track {
  888.   background: #9bc530;
  889. }
  890.  
  891. .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  892.   background: #b4d75b;
  893. }
  894.  
  895. .react-toggle--checked .react-toggle-thumb {
  896.   border-color: #9bc530;
  897. }
  898.  
  899. .setting-text {
  900.   color: #777;
  901.   outline: none;
  902.   border-color: rgba(0, 0, 0, 0.3);
  903.   border-radius: 2px 2px 0 0;
  904.   padding: 7px 4px;
  905. }
  906.  
  907. .setting-text:focus,
  908. .setting-text:active {
  909.   color: #1a1a1a;
  910.   background: rgba(0, 0, 0, 0.05);
  911.   border-color: rgba(0, 0, 0, 0.5);
  912. }
  913.  
  914. /* Profile Column */
  915. .dropdown {
  916.   width: 32px;
  917. }
  918.  
  919. .account__action-bar div:first-child {
  920.   max-width: 32px;
  921. }
  922.  
  923. .account__action-bar div:last-child {
  924.   max-width: calc(86% - 32px);
  925.   justify-content: space-between;
  926. }
  927.  
  928. .account__action-bar {
  929.   border-top: 1px solid rgba(0, 0, 0, 0.6);
  930.   border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  931. }
  932.  
  933. .account__action-bar__tab {
  934.   border-left: 1px solid rgba(0, 0, 0, 0.6);
  935. }
  936.  
  937. .account__header__content a span {
  938.   color: hsl(70, 40%, 55%);
  939. }
  940.  
  941. .account__header__content p {
  942.   color: hsla(53, 40%, 60%, 1);
  943. }
  944.  
  945. .account__header__content .mention.hashtag span,
  946. .account__header__content .h-card .u-url.mention,
  947. .account__header__content .h-card .u-url.mention span{
  948.   color: hsl(335, 65%, 66%);
  949. }
  950.  
  951. /* Follow Requests */
  952. .account--panel {
  953.   background: rgba(255,255,255,0.4);
  954.   border-color: #8b6d5d;
  955. }
  956.  
  957. .account-authorize {
  958.   background: rgba(212, 220, 171, 0.5);
  959. }
  960.  
  961. /* User Report */
  962.  
  963. .scrollable.report {
  964.   background: rgba(212, 220, 171, 0.5); /* transparentize(mix(#ecf5be, black, 90%), 0.5) */
  965. }
  966.  
  967. .status-check-box .status__content {
  968.   background: rgba(255, 255, 255, 0.7);
  969. }
  970.  
  971. .status-check-box, .report__target {
  972.   border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  973. }
  974.  
  975. .report__textarea {
  976.   border-color: rgba(0, 0, 0, 0.3);
  977. }
  978.  
  979. .report__textarea:active,
  980. .report__textarea:focus {
  981.   border-color: rgba(0, 0, 0, 0.5);
  982.   background: rgba(0, 0, 0, 0.05);
  983. }
  984.  
  985. /* Drag and drop to upload */
  986.  
  987. .upload-area {
  988.   background: rgba(0, 0, 0, 0.3);
  989. }
  990.  
  991. .upload-area__background {
  992.   background: #E488B9;
  993. }
  994.  
  995. .upload-area__content {
  996.   color: #FFF;
  997.   border-color: #D84A9D;
  998. }
  999.  
  1000. /* Onboarding Modal */
  1001.  
  1002. .onboarding-modal__pager {
  1003.   border-bottom-left-radius: 0;
  1004.   border-bottom-right-radius: 0;
  1005.   border: none;
  1006. }
  1007.  
  1008. @media screen and (max-width: 550px) {
  1009.   .onboarding-modal__pager {
  1010.     border-radius: 0;
  1011.     border: none;
  1012.     margin-bottom: -1px;
  1013.   }
  1014. }
  1015.  
  1016. .onboarding-modal__page p span a {
  1017.   color: #8e9956 !important;
  1018.   text-decoration: none;
  1019. }
  1020.  
  1021. .onboarding-modal__page p span a:hover {
  1022.   text-decoration: underline;
  1023. }
  1024.  
  1025. .onboarding-modal__page p strong {
  1026.   background: #f5b9c2;
  1027. }
  1028.  
  1029. .onboarding-modal__page .figure .pseudo-drawer {
  1030.   background: none;
  1031. }
  1032.  
  1033. .onboarding-modal__paginator {
  1034.   background: linear-gradient(to bottom, rgba(226,72,152,1) 0%,rgba(229,108,172,1) 100%);
  1035. }
  1036.  
  1037. .onboarding-modal__paginator > div {
  1038.   /* set Japanese prev/next text same width to align dots center */
  1039.   min-width: 5em;
  1040.   text-align: center;
  1041. }
  1042.  
  1043. .onboarding-modal__paginator a span {
  1044.   color: #efcfcf;
  1045. }
  1046.  
  1047. .onboarding-modal__dot {
  1048.   background: #6a4643;
  1049. }
  1050.  
  1051. .onboarding-modal__dot:hover {
  1052.   background: #8b6461;
  1053. }
  1054.  
  1055. .onboarding-modal__dot.active {
  1056.   background: #a07774;
  1057.   box-shadow: #f5e33a 0px 0px 5px 0px;
  1058. }
  1059.  
  1060. /* e.g. Safari on iPhone5 with top/bottom bar (320x460) */
  1061. @media screen and (max-width: 320px) and (max-height: 600px) {
  1062.   .onboarding-modal__page p {
  1063.     font-size: 14px;
  1064.     line-height: 20px;
  1065.   }
  1066.  
  1067.   .onboarding-modal__paginator {
  1068.     padding: 20px 25px;
  1069.   }
  1070.  
  1071.   .onboarding-modal__page-two .figure,
  1072.   .onboarding-modal__page-three .figure,
  1073.   .onboarding-modal__page-four .figure,
  1074.   .onboarding-modal__page-five .figure {
  1075.     font-size: 12px;
  1076.     padding: 5px;
  1077.     margin-bottom: 10px;
  1078.   }
  1079.  
  1080.   .onboarding-modal__page-four__columns .row {
  1081.     margin-bottom: 10px;
  1082.   }
  1083.  
  1084.   .onboarding-modal__page-four__columns .column-header {
  1085.     padding: 5px;
  1086.     font-size: 12px;
  1087.   }
  1088. }
  1089.  
  1090. @media screen and (max-width: 480px) {
  1091.   .onboarding-modal__page-one {
  1092.     flex-direction: column;
  1093.   }
  1094.  
  1095.   .onboarding-modal__page-one__elephant-friend {
  1096.     width: 100%;
  1097.     height: 30vh;
  1098.     max-height: 160px;
  1099.     margin-bottom: 5vh;
  1100.   }
  1101. }
  1102.  
  1103. .onboarding-modal__page-two .non-interactive span {
  1104.   color: #ffffff;
  1105. }
  1106.  
  1107. .onboarding-modal__page-four__columns .column-header {
  1108.   color: #6a4643;
  1109. }
  1110.  
  1111. .onboarding-modal__page-four {
  1112.   line-height: 17px;
  1113. }
  1114.  
  1115. .onboarding-modal__page-six p span a[to] {
  1116.   color: #ed649c !important;
  1117. }
  1118.  
  1119. /* Confirmation Modals */
  1120.  
  1121. .boost-modal__action-bar,
  1122. .confirmation-modal__action-bar {
  1123.   padding-top: 0px;
  1124. }
  1125.  
  1126. .confirmation-modal__container {
  1127.   padding-bottom: 20px;
  1128. }
  1129.  
  1130. .boost-modal__container {
  1131.   overflow-x: auto;
  1132. }
  1133.  
  1134.  
  1135. /* Dropdown Menus */
  1136. .dropdown--active .dropdown__content > ul > li > a {
  1137.   width: unset;
  1138. }
  1139.  
  1140. .detailed-status__action-bar .dropdown--active .dropdown__content {
  1141.   position: relative;
  1142. }
  1143.  
  1144. @media screen and (min-width: 360px) {
  1145.   .status .dropdown--active .dropdown__content.dropdown__right > ul {
  1146.     left: -98px;
  1147.   }
  1148. }
  1149.  
  1150. @media screen and (min-width: 1500px) {
  1151.   .status .dropdown--active .dropdown__content.dropdown__right > ul {
  1152.     left: 0;
  1153.   }
  1154.  
  1155.   .detailed-status__action-bar .dropdown--active .dropdown__content.dropdown__left > ul {
  1156.     margin-left: 0;
  1157.   }
  1158. }
  1159.  
  1160. /* Adjust Drawer/Tab Buttons to fit with banner */
  1161.  
  1162. .drawer__header,
  1163. .tabs-bar {
  1164.   height: 50px;
  1165.   border-bottom: 2px solid #f5e33a;
  1166. }
  1167.  
  1168. @media screen and (min-width: 320px) {
  1169.   .tabs-bar {
  1170.     padding-left: 90px;
  1171.   }
  1172.  
  1173.   .tabs-bar__link {
  1174.     padding: 17px 4px;
  1175.   }
  1176. }
  1177.  
  1178. @media screen and (min-width: 768px) {
  1179.   .tabs-bar {
  1180.     padding-left: 75px;
  1181.   }
  1182.  
  1183.   .tabs-bar:first-child {
  1184.     margin-left: 10px;
  1185.   }
  1186.  
  1187.   .tabs-bar__link {
  1188.     padding: 16px 8px;
  1189.   }
  1190. }
  1191.  
  1192. @media screen and (min-width: 1025px) {
  1193.   .column,
  1194.   .drawer {
  1195.     padding-bottom: 0;
  1196.   }
  1197.  
  1198.   .drawer {
  1199.     width: 320px;
  1200.   }
  1201.  
  1202.   .column:last-child,
  1203.   .drawer:last-child {
  1204.     padding-right: 5px;
  1205.   }
  1206.  
  1207.   .drawer__header {
  1208.     padding-left: 83px;
  1209.   }
  1210.  
  1211.   .drawer__tab {
  1212.     padding: 15px 4px;
  1213.   }
  1214. }
  1215.  
  1216. /* Tab Selection on Mobile */
  1217. .tabs-bar__link {
  1218.   text-shadow: -1px -1px 0 #f5e33a, 1px -1px 0 #f5e33a, -1px 1px 0 #f5e33a, 1px 1px 0 #f5e33a;
  1219. }
  1220.  
  1221. .tabs-bar__link,
  1222. .drawer__tab {
  1223.   border-bottom: none;
  1224. }
  1225.  
  1226. .tabs-bar__link span,
  1227. .tabs-bar__link {
  1228.   color: #6a4643;
  1229.   opacity: 0.9;
  1230. }
  1231.  
  1232. .tabs-bar__link:hover,
  1233. .tabs-bar__link.active:hover {
  1234.   background: rgba(255, 255, 255, 0.7);
  1235.   opacity: 1;
  1236.   text-shadow: none;
  1237. }
  1238.  
  1239. .tabs-bar__link.active {
  1240.   border-bottom: none;
  1241.   text-shadow: none;
  1242. }
  1243.  
  1244. .tabs-bar__link.active span,
  1245. .tabs-bar__link.active {
  1246.   color: #6a4643;
  1247.   text-shadow: none;
  1248. }
  1249.  
  1250. @media screen and (min-width: 320px) {
  1251.   .columns-area {
  1252.     padding: 0;
  1253.   }
  1254.  
  1255.   .tabs-bar {
  1256.     margin: 0;
  1257.   }
  1258.  
  1259.   .search {
  1260.     margin-bottom: 0;
  1261.   }
  1262. }
  1263.  
  1264. @media screen and (min-width: 768px) {
  1265.   .columns-area {
  1266.     padding: 10px 10px 0 10px;
  1267.   }
  1268.  
  1269.   .tabs-bar {
  1270.     margin: 10px 10px 0 10px;
  1271.   }
  1272.  
  1273.   .search {
  1274.     margin-bottom: 10px;
  1275.   }
  1276. }
  1277.  
  1278. @media screen and (min-width: 1025px) {
  1279.   .columns-area {
  1280.     padding: 0;
  1281.   }
  1282. }
  1283. /* MOBILE -- END */
  1284.  
  1285. /* SVG Paths WEW -- only edit the "fill" property with a new colour. Hex should be %23 for firefox support. */
  1286. button.icon-button i.fa-retweet {
  1287.   background-position: 0 0;
  1288.   -webkit-transition: background-position 0.9s steps(10), background-image 100ms ease-in;
  1289.   transition: background-position 0.9s steps(10), background-image 100ms ease-in;
  1290.   background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%238b6461' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%232b90d9' stroke-width='0'/></svg>");
  1291. }
  1292.  
  1293. button.icon-button i.fa-retweet:hover {
  1294.   background-position: 0 0;
  1295.   -webkit-transition-duration: 0s, 100ms;
  1296.   transition-duration: 0s, 100ms;
  1297.   background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23f5e33a' stroke='%23f5e33a' stroke-width='2'/><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%236a4643' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%232b90d9' stroke-width='0'/></svg>");
  1298. }
  1299.  
  1300. .muted .status__action-bar .fa.fa-retweet {
  1301.   -webkit-transition: background-position 0.9s steps(10), background-image 100ms ease-in, opacity 300ms;
  1302.   transition: background-position 0.9s steps(10), background-image 100ms ease-in, opacity 300ms;
  1303. }
  1304.  
  1305. button.icon-button.active i.fa-retweet {
  1306.   background-position: 0 100%;
  1307.   -webkit-transition-duration: 0.9s, 100ms;
  1308.   transition-duration: 0.9s, 100ms;
  1309. }
  1310.  
  1311. .drawer__header a:hover {
  1312.   background: rgba(255, 255, 255, 0.7);
  1313. }
  1314.  
  1315. .detailed-status__action-bar {
  1316.   background: transparent;
  1317.   border: none;
  1318.   padding-top: 0;
  1319. }
  1320.  
  1321. .icon-button.active .fa-star {
  1322.   color: rgb(202, 143, 4);
  1323. }
  1324.  
  1325. /* Video player width hack */
  1326. .status div[style*="width: 239px"] {
  1327.   width: 100% !important;
  1328. }
  1329.  
  1330. /* STANDALONE KKT PAGES */
  1331. .activity-stream {
  1332.   padding-top: 10px;
  1333. }
  1334.  
  1335. .activity-stream .entry .detailed-status.light,
  1336. .activity-stream .entry .status.light,
  1337. .activity-stream .entry:first-child .status.light,
  1338. .activity-stream .entry:last-child .status.light,
  1339. .activity-stream .entry:last-child .detailed-status.light,
  1340. .activity-stream .entry:first-child .status.light,
  1341. .activity-stream .entry:last-child .status.light,
  1342. .activity-stream .entry:last-child .detailed-status.light {
  1343.   border: solid 2px #e1c152;
  1344.   border-radius: 8px
  1345. }
  1346.  
  1347. .activity-stream .entry {
  1348.   background: none;
  1349.   padding: 2px 0 2px 0;
  1350. }
  1351.  
  1352. .activity-stream .status.light {
  1353.   padding: 8px 8px 8px 15px;
  1354. }
  1355.  
  1356. .activity-stream .entry .pre-header {
  1357.   margin-bottom: 0;
  1358.   padding: 0 0 0 76px;
  1359. }
  1360.  
  1361. .activity-stream .entry .status.light .status__avatar {
  1362.   border: none;
  1363.   top: 0;
  1364.   left: 10px;
  1365. }
  1366.  
  1367. .activity-stream .entry .status.light .status__avatar img {
  1368.   border: solid 2px #e1c152;
  1369.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  1370. }
  1371.  
  1372. /* --- admin / settings --- */
  1373.  
  1374. /* background */
  1375. /* We use colors darkened from #ecf5be with medium alpha values, to reduce contrast of background pattern. */
  1376.  
  1377. .admin-wrapper .sidebar-wrapper {
  1378.   background: rgba(173,186,121,0.5);
  1379. }
  1380. .content-wrapper {
  1381.   /* background: rgba(201,216,141,0.8); */
  1382.   background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 25%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%);
  1383. }
  1384.  
  1385. /* sidebar */
  1386.  
  1387. .admin-wrapper .sidebar ul ul,
  1388. .admin-wrapper .sidebar ul a.selected {
  1389.   background: #d0e093;
  1390. }
  1391.  
  1392. .admin-wrapper .sidebar ul a {
  1393.   color: #6a4643;
  1394. }
  1395. .admin-wrapper .sidebar ul a:hover {
  1396.   background: rgba(255, 255, 255, 0.7);
  1397.   color: #8b6461;
  1398. }
  1399.  
  1400. .admin-wrapper .sidebar ul ul a.selected {
  1401.   background: rgba(255,255,255,0.3);
  1402.   color: #6a4643;
  1403. }
  1404. .admin-wrapper .sidebar ul ul a.selected:hover {
  1405.   background: rgba(64,64,64,0.1);
  1406.   color: #6a4643;
  1407. }
  1408.  
  1409. .flash-message {
  1410.     background: rgba(255,255,255,0.7);
  1411. }
  1412.  
  1413. /* content */
  1414.  
  1415. .admin-wrapper .content > p{
  1416.   color: #6a4643;
  1417. }
  1418.  
  1419. .admin-wrapper .content h2 {
  1420.   color: #6a4643;
  1421. }
  1422.  
  1423. /* forms */
  1424. .simple_form input[type=text],
  1425. .simple_form input[type=number],
  1426. .simple_form input[type=email],
  1427. .simple_form input[type=password],
  1428. .simple_form textarea {
  1429.   border-bottom: 2px solid rgba(0,0,0,0.3);
  1430. }
  1431.  
  1432. .simple_form input[type=text]:active, .simple_form input[type=text]:focus,
  1433. .simple_form input[type=number]:active, .simple_form input[type=number]:focus,
  1434. .simple_form input[type=email]:active, .simple_form input[type=email]:focus,
  1435. .simple_form input[type=password]:active, .simple_form input[type=password]:focus,
  1436. .simple_form textarea:active, .simple_form textarea:focus {
  1437.   border-bottom: 2px solid rgba(0,0,0,0.5);
  1438.   background: rgba(0,0,0,0.05);
  1439. }
  1440.  
  1441. .simple_form button,
  1442. .simple_form .block-button {
  1443.   background: #9bc430;
  1444. }
  1445.  
  1446. .simple_form button:hover,
  1447. .simple_form button:active,
  1448. .simple_form button:focus,
  1449. .simple_form .block-button:hover,
  1450. .simple_form .block-button:active,
  1451. .simple_form .block-button:focus {
  1452.   background: #85a13b;
  1453. }
  1454.  
  1455. /* tables (used in authorized_applications, export) */
  1456.  
  1457. .table > tbody > tr:nth-child(odd) > td,
  1458. .table > tbody > tr:nth-child(odd) > th {
  1459.   background: rgba(255,255,255,0.5);
  1460. }
  1461.  
  1462. .table > thead > tr > th {
  1463.   border-bottom: 2px solid rgba(0,0,0,0.6);
  1464. }
  1465.  
  1466. .table th, .table td {
  1467.   border: none;
  1468. }
  1469.  
  1470. .table a:hover {
  1471.     text-decoration: underline;
  1472. }
  1473.  
  1474. a.table-action-link {
  1475.   text-decoration: none;
  1476. }
  1477.  
  1478. a.table-action-link:hover {
  1479.   color: #6c5549;
  1480.   text-decoration: underline;
  1481. }
  1482.  
  1483. /* --- about --- */
  1484.  
  1485. .about-body .wrapper,
  1486. .accounts-grid .account-grid-card,
  1487. .screenshot-with-signup .simple_form,
  1488. .screenshot-with-signup .closed-registrations-message {
  1489.   background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%);
  1490.   border-radius: 8px;
  1491.   border: solid 2px #e1c152;
  1492. }
  1493.  
  1494. .about-body .wrapper,
  1495. .accounts-grid .account-grid-card {
  1496.   border-radius: 8px;
  1497.   border: solid 2px #e1c152;
  1498. }
  1499.  
  1500. .accounts-grid .account-grid-card,
  1501. .screenshot-with-signup .simple_form,
  1502. .screenshot-with-signup .closed-registrations-message {
  1503.   padding: 25px 20px;
  1504.   margin: 25px auto;
  1505. }
  1506.  
  1507. @media screen and (min-width: 320px) {
  1508.   body .about-body {
  1509.     padding: 0;
  1510.   }
  1511.  
  1512.   .about-body .wrapper {
  1513.     margin: 0;
  1514.   }
  1515.  
  1516.   .wrapper h1 {
  1517.     font-size: 39px;
  1518.   }
  1519. }
  1520.  
  1521. @media screen and (min-width: 768px) {
  1522.   body .about-body {
  1523.     padding: 1em;
  1524.   }
  1525.  
  1526.   .about-body .wrapper {
  1527.     padding: 25px 20px;
  1528.     margin: 25px auto;
  1529.   }
  1530.  
  1531.   .wrapper h1 {
  1532.     font-size: 46px;
  1533.   }
  1534. }
  1535.  
  1536. .about-body h2,
  1537. .about-body h3 {
  1538.   color: #8b6461;
  1539. }
  1540.  
  1541. .about-body em {
  1542.   color: #6d4e4c; /* darken(#8b6461, 10%) */
  1543.   background-color: #f292b9; /* lighten(#ed649c, 10%) */
  1544. }
  1545.  
  1546. .screenshot-with-signup .simple_form,
  1547. .screenshot-with-signup .closed-registrations-message {
  1548.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  1549. }
  1550.  
  1551. /* /about/more */
  1552.  
  1553. .sidebar-layout .panel .panel-header {
  1554.   background: #C9D185;
  1555. }
  1556.  
  1557. .sidebar-layout .sidebar,
  1558. .information-board,
  1559. .sidebar-layout hr {
  1560.   border-color: #C9D185;
  1561.   border-top: none;
  1562. }
  1563.  
  1564. .sidebar-layout .panel .panel-list ul li a {
  1565.   color: #6a4643;
  1566. }
  1567.  
  1568. .sidebar-layout .panel .panel-list ul li a:hover {
  1569.   background: rgba(255, 255, 255, 0.7);
  1570.   color: #8b6461;
  1571. }
  1572.  
  1573. .information-board .section span {
  1574.   color: inherit;
  1575. }
  1576.  
  1577. .information-board .section span:last-child {
  1578.   color: inherit;
  1579. }
  1580.  
  1581. .about-body p a:hover,
  1582. .about-body .actions .info a:hover,
  1583. .screenshot-with-signup .simple_form .info a:hover,
  1584. .screenshot-with-signup .closed-registrations-message .info a:hover,
  1585. .container .form-footer ul.no-list a:hover {
  1586.     text-decoration: underline;
  1587. }
  1588.  
  1589. .owner .name .display_name,
  1590. .accounts-grid .account-grid-card .display_name {
  1591.     font-weight: bold;
  1592. }
  1593. /* --- User (/@hogehoge) --- */
  1594.  
  1595. .landing-strip {
  1596.   background: rgba(208,224,147,0.7);
  1597. }
  1598.  
  1599. .card .name span {
  1600.   color: #d9e1e8;
  1601. }
  1602.  
  1603. .card .name small span {
  1604.   color: #2b90d9;
  1605. }
  1606.  
  1607. .account__header__content {
  1608.   color: #d9e1e8;
  1609. }
  1610.  
  1611. .activity-stream {
  1612.   box-shadow: none;
  1613.   background: rgba(0, 0, 0, 0.1);
  1614. }
  1615.  
  1616. .activity-stream:first-child {
  1617.   /* .activity-stream is also used in status page, without account header. */
  1618.   background: none;
  1619. }
  1620.  
  1621. .pagination .page.current {
  1622.   color: #FFF;
  1623.   background: #8b6d5d;
  1624. }
  1625.  
  1626. .pagination .page a:hover,
  1627. .pagination .prev a:hover,
  1628. .pagination .next a:hover {
  1629.   background-color: #fff;
  1630.   border-radius: 100px;
  1631. }
  1632.  
  1633. .card .counter,
  1634. .card .counter::after {
  1635.   border-color: #8b6d5d;
  1636. }
  1637.  
  1638. .card .counter.active:after {
  1639.   border-color: #f5e33a;
  1640. }
  1641.  
  1642. /* Followers & Following */
  1643.  
  1644. .accounts-grid {
  1645.   background: rgba(0,0,0,0.1);
  1646.   box-shadow: none;
  1647. }
  1648.  
  1649. .accounts-grid .account-grid-card {
  1650.   padding: 0;
  1651.   margin: 10px 0;
  1652.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  1653. }
  1654.  
  1655. .accounts-grid .account-grid-card .account-grid-card__header {
  1656.   border-bottom: 1px solid #e3a4ad;
  1657. }
  1658.  
  1659. .accounts-grid .account-grid-card .note {
  1660.     color: #8b6461
  1661. }
  1662.  
  1663. /* OAuth, Remote follow */
  1664.  
  1665. .form-container {
  1666.   background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%);
  1667.   border-radius: 8px;
  1668.   border: solid 2px #e1c152;
  1669. }
  1670.  
  1671. .form-container .flash-message code {
  1672.     word-wrap: break-word;
  1673. }
  1674.  
  1675. /* Admin */
  1676. /* /admin/accounts, etc. */
  1677.  
  1678. .filters .filter-subset a {
  1679.   border-bottom: #fcfce1;
  1680. }
  1681.  
  1682. .filters .filter-subset a:hover {
  1683.   color: #6c5549;
  1684.   border-color: rgba(0, 0, 0, 0.4);
  1685. }
  1686.  
  1687. .filters .filter-subset a.selected {
  1688.   border-color: #ed649c;
  1689. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!