harmoniousSkeptic

Discord - Darker Search, Datepicker, and Popouts

May 20th, 2017
199
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.63 KB | None | 0 0
  1. /* Dark Search and Datepicker */
  2.  
  3. div.option.search-option.selected,div.option.history.selected, div.option.user.selected, .results-group div.option.selected {
  4.     background-color:#3f3f3f;
  5. }
  6. div.option.search-option:after, div.option.history:after, div.option.user:after, .results-group div.option:after {
  7.     background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#2f2f2f 80%);
  8. }
  9. div.option.search-option.selected:after, div.option.history.selected:after, div.option.user.selected:after, .results-group div.option.selected:after {
  10.     background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#3f3f3f 80%);
  11.     border-top-right-radius: 4px;
  12.     border-bottom-right-radius: 4px;
  13. }
  14.  
  15. .bd-blue .react-datepicker .react-datepicker__day:hover {
  16.     background-color: #3a71c1!important;
  17. }
  18. .search-popout .results-group:before {
  19.     border-top: 1px solid #3f3f3f;
  20. }
  21.  
  22. .theme-light .ui-calendar-picker .react-datepicker, .react-datepicker__current-month, .react-datepicker__day-names, .react-datepicker__header, .react-datepicker__day-name {
  23.     background-color: #2f2f2f!important;
  24.     color:#fff!important;
  25. }
  26.  
  27. .popout.popout-bottom.no-shadow.search-popout {
  28.     float:right!important;
  29.     left:150px!important;
  30.     background-color:#2f2f2f;
  31. }
  32.  
  33. .option.search-query {
  34.     background-color: #2f2f2f!important;
  35.     border-bottom:0px;
  36. }
  37.  
  38. .option.search-option .filter, .option.history .filter, .option.user .displayed-nick, .option strong {
  39.     color:white!important;
  40. }
  41.  
  42. .option.search-option .answer, .option.history .answer, .option.history .non-text {
  43.     color:#9f9f9f!important;
  44. }
  45.  
  46. .search-popout .date-picker {
  47.     border-top:0px;
  48. }
  49.  
  50. .react-datepicker__day {
  51.     color:#fff!important;
  52. }
  53.  
  54. div.react-datepicker__month > div:nth-child(1) > div.react-datepicker__day.react-datepicker__day--weekend.react-datepicker__day--outside-month,
  55. div.react-datepicker__day.react-datepicker__day--outside-month {
  56.     background-color:#2f2f2f!important;
  57.     color:#7f7f7f!important;
  58. }
  59.  
  60. .react-datepicker__day.react-datepicker__day--disabled, .react-datepicker__day.react-datepicker__day--disabled.react-datepicker__day--outside-month {
  61.     color:#4f4f4f!important;
  62. }
  63.  
  64. .theme-dark .ui-calendar-picker .react-datepicker__day.react-datepicker__day--selected:after {
  65.     background-color:#3a71c1!important;
  66. }
  67.  
  68. /* Dark Popouts (status, server options) */
  69.  
  70. .popout-menu-item:not(.leave) {
  71.     color:#fff!important;
  72. }
  73.  
  74. .popout-menu-item:hover {
  75.     background-color:#3f3f3f!important;
  76. }
  77.  
  78. .popout-menu {
  79.     background-color: #2f2f2f!important;
  80. }
  81.  
  82. .status-picker .helper {
  83.     display:none;
  84. }
  85.  
  86. .popout-menu-separator {
  87.     display:none;
  88. }
Advertisement
Add Comment
Please, Sign In to add comment