/* ==UserStyle==
@name           Yammer Dark
@namespace      FizzBuzz791
@version        0.1.0
@description    A dark theme for Yammer, heavily based on github.com/StylishThemes/Github-Dark
@author         FizzBuzz791
@license        GPL-3.0-only
@homepageURL    https://github.com/FizzBuzz791/Yammer-Dark
@updateURL      https://raw.githubusercontent.com/FizzBuzz791/Yammer-Dark/master/yammer-dark.user.css
@preprocessor   less
==/UserStyle== */

@-moz-document domain("yammer.com") {
  @font-color: #C0C0C0; /* rgb(192, 192, 192) */
  @font-color-dark: #181818;
  @main-background-color: #181818; /* rgb(24, 24, 24) */
  @secondary-background-color: #242424;
  @main-highlight-color: #242424; /* rgb(36, 36, 36) */
  @input-background-color: #202020; /* rgb(32, 32, 32) */
  @main-border-color: #383838; /* rgb(56, 56, 56) */
  @placeholder-color: #666666;
  @link-color: #386CBB; /* rgb(56, 108, 187) */
  @link-color-light: white;
  @secondary-highlight-color: #4183C4;
  @highlight-border-color: #264C72;
  @button-color-dark: #181818;

  body {
    background-image: url("data:image/png;base64,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");
    background-repeat: repeat;
  }

  .yj-nav-menu .yj-global-sidebar--fixed-content, /* Left column */
    .column-container, /* Main content & right column */
    .main-content, /* Main content & right column */
    #column-two, /* Main content & right column */
	.y-navigationLink__unstyled, /* Group */
    .y-navigationLink__unstyled:hover, /* Hover on a Group */
	.yj-global-sidebar--item--link /* Private messages */ {
    background-color: transparent;
    color: @font-color;
  }

  #column-one.main-nav /* Left column contents */ {
    background-color: @main-background-color;
  }

  #search /* Left column search box */ {
    background-color: @input-background-color;
  }

  .yj-global-sidebar--nav-list-item-navigation-link:hover, /* Left column contents hover */ 
	.yj-global-sidebar--action-list-item-clickable:hover, /* Left column link hover */ 
	.yj-global-sidebar--nav-list-item--selected.yj-global-sidebar--nav-list-item-navigation-link, /* Left column selected item */
	.yj-global-sidebar--nav-list-item--selected.yj-global-sidebar--nav-list-item-navigation-link:hover, /* Left column selected item hover */
	.yj-global-sidebar--nav-list-item--selected.yj-global-sidebar--nav-list-item-navigation-link:active, /* Left column selected item active */
	.yj-global-sidebar--nav-list-item--selected.yj-global-sidebar--nav-list-item-navigation-link:focus, /* Left column selected item focus */
	.yj-nav-menu--primary-actions-item.is-active .yj-nav-menu--primary-actions-link, /* Home/Inbox/Notifications active item */
	.yj-nav-menu--primary-actions-home .yj-nav-menu--primary-actions-link:hover, /* Home hover */
	.yj-nav-menu--primary-actions-inbox .yj-nav-menu--primary-actions-link:hover, /* Inbox hover */
	.yj-nav-menu--primary-actions-notifications .yj-nav-menu--primary-actions-link:hover, /* Notifications hover */ 
	.yj-global-sidebar--item--link:hover, /* Private messages hover */
	.yj-global-sidebar--item--link:hover .yj-global-sidebar--item--text-wrapper {
    background-color: @main-highlight-color;
    color: @font-color;
  }

  .y-icon /* All icons */ {
    color: @font-color;
  }

  .yj-nav-menu--primary-actions-item, /* Home/Inbox/Notifications buttons */
	.yj-nav-menu--primary-actions-item.is-active, /* Home/Inbox/Notifications buttons */ {
    border-color: @main-border-color;
  }

  .yj-selected .yj-global-sidebar--item--link /* Currently selected/open Private message */ {
    background-color: @main-highlight-color;
    color: @font-color;
    &:hover {
      background-color: @main-highlight-color;
      .yj-global-sidebar--item--text-wrapper {
        color: @font-color;
      }
    }
  }

  .page-header {
    border-bottom-color: @main-border-color;
    .header-content, /* "Inbox" */ 
		.yj-inbox-header--tab-link, /* "Unread"/"Private Messages"/"All" */
		.yj-inbox-header--search-link,
		.yj-feed-name /* "Notifications" */ {
      color: @font-color;
    }
  }

  /* 
		END: General content & left sidebar 
		###################################
	   	START: Main content 
	*/

  .unstyle-button-as-link.publisher-placeholder /* "What are you working on?" panel */ {
    background-color: @input-background-color;
    border-color: @main-border-color;
    color: @placeholder-color;
  }

  .yj-global-publisher-switcher .option-arrow::before, /* Arrow above "What are you working on?" panel */
	.yj-global-publisher-switcher .option-arrow::after /* Arrow above "What are you working on?" panel */ {
    border-color: @main-border-color transparent;
  }

  .switcher-option .unstyle-button-as-span, /* Update/Poll/Praise buttons */
	.yj-tabs .yj-filter-tab-link, /* Discovery/All/Following buttons */
	.yj-message-list-item--body-byline-user-link .yj-hovercard-link, /* User names */
	.yj-message-list-item--inline-attributes span, /* Message attributes, such as time posted, "Edited", etc. */
	.yj-message-list-item--inline-attributes a, /* Message attributes, such as time posted, "Edited", etc. */
	.yj-message-list-item--in-reply-to, /* "in reply to" text */
	.yj-message-list-item--in-reply-to-user, /* user being replied to */
	.yj-likes-text, /* "Likes" text */
	.y-text, /* "Seen by X" text */
	.yj-message-list-item--action-list-icon--alt, /* "..." next to "Like/Reply/Share" buttons */
	.yj-media-card--location-name, /* Link preview - link */
	.yj-media-card-menu--trigger, /* Link preview - ellipsis */
	.yj-icon-banner--header, /* "You're all caught up here" */ 
	.yj-thread-share-sender-name .yj-hovercard-link /* Shared thread/post originator name */ {
    color: @font-color;
  }

  .yj-group-unread-header--unread-header /* "New conversations" header */ {
    color: @font-color;
    border-bottom-color: @main-border-color;
  }

  .switcher-option.yj-selected .unstyle-button-as-span /* Update/Poll/Praise buttons - selected button */ {
    color: @link-color;
  }

  .yj-thread-replies-link--container, /* Show X previous reply(ies) */
	.yj-thread-reply-list-item, /* Reply item */
	.yj-global-reply-publisher-with-avatar, /* Reply container */
	.yj-media-card--content, /* Link preview - title */
	.yj-media-card--footer, /* Link preview - link */
	.yj-recipient-list-item /* Group name in notification panel when creating new update */ {
    background-color: @main-background-color;
    border-color: @main-border-color;
  }

  .yj-btn-alt /* "See more..." buttons/links */ {
    background-color: @main-background-color;
    border-color: @main-border-color;
    &:hover {
      background-color: @main-highlight-color;
      border-color: @main-border-color;
    }
  }

  .yj-new-messages-notice--button /* "Click to see X new message(s)" button/link */ {
    background-color: @main-background-color;
    border-color: @main-border-color;
    &:hover {
      background-color: @main-highlight-color;
      border-color: @main-border-color;
    }
  }

  .yj-message-body--byline-follow, /* "Follow" button */
	.yj-groupcallout-join-link--link /* "Join" button */ {
    background-color: @main-background-color;
    border-color: @main-border-color;
    color: @font-color;
    &:hover,
    &:active,
    &:focus {
      background-color: @main-highlight-color;
      border-color: @main-border-color;
    }
  }

  .DraftEditor-editorContainer, /* Reply editor */
	.DraftEditor-editorContainer span, /* Contents of editor */
	.yj-publisher-toolbar, /* GIF/Sharepoint/Yammer/Upload bar */
	.yj-autogrow-textarea /* Poll "What's your question?" */ {
    background-color: @input-background-color;
    color: @font-color;
  }

  .yj-global-publisher {
    .publisher-main, /* Reply container */
		.publisher-recipients, /* Divider between content and recipients */ 
		input, /* Recipients input */ 
		.publisher-body /* Update/Poll/Praise content container */ {
      background-color: @input-background-color;
      border-color: @main-border-color;
      color: @font-color;
      ::placeholder, /* Placeholder text: "Notify additional people..." */ {
        color: @font-color;
      }
    }
    .yj-global-topic-menu.yj-open /* Container for topics */ {
      background-color: @input-background-color;

      .yj-global-tag-selector.yj-global-topic-selector /* Container border */ {
        border-color: @main-border-color;
      }
    }
  }

  .yj-card, /* Link preview - border */
	.yj-card--thumbnail /* Link preview - internal border */ {
    border-color: @main-border-color;
  }

  .yj-metabar, /* CC list */
	.yj-metabar .yj-hovercard-link, /* CC list */
	.yj-metabar .yj-message-others /* CC list */ {
    color: @placeholder-color;
  }

  .yj-thread-list-item--shares-topics-container /* Topics container */ {
    background-color: @main-background-color;
    border-bottom-color: @main-border-color;
  }

  .yj-thread-list-item .yj-thread-share-excerpt /* Shared thread/post snippet */ {
    background-color: @secondary-background-color;
    border-color: @main-border-color;
    color: @font-color;
  }

  .yj-groupcallout-join-link--link /* "Join" button */ {
    background-color: @main-background-color;
    border-color: @main-border-color;
    color: @font-color;
  }

  .yj-normal-text-input, /* Praise content */
	.poll-question .yj-autogrow-textarea textarea, /* Poll question content */
	.yj-global-poll-answer .yj-normal-text-input, /* Poll answers content */ {
    color: @font-color;
  }

  .yj-ta-option {
    background-color: @main-background-color;
    .yj-ta-name /* User's name */ {
      color: @font-color;
    }
    .yj-ta-byline /* User's title */ {
      color: @placeholder-color;
    }
  }

  .yj-ta-results {
    &.yj-menu, /* User popup - left bar/margin */ {
      background-color: @main-background-color;
    }

    .yj-ta-additional /* "Sorry, unlisted groups can't be added..." popup */ {
      background-color: @main-background-color;
    }
  }

  .yj-ta {
    .yj-selected /* User popup - selected item */ {
      background-color: @main-highlight-color;
    }

    .yj-ta-hint /* "Type to search for results" popup/hint */ {
      background-color: @input-background-color;
      border-top-color: @main-border-color;
      color: @placeholder-color;
    }
  }

  .yj-ta-withheaders .yj-ta-option /* User popup - other items */ {
    border-left-color: @main-border-color;
  }

  .yj-tabs /* Disovery/All/Following divider */ {
    border-bottom-color: @main-border-color;
  }

  .yj-message-body--praise-poll /* Praise container */ {
    background-color: @main-background-color;
    .yj-praise-attachment {
      border-color: @main-border-color;

      span /* User(s) being praised */ {
        color: @link-color;
      }

      .yj-praise-attachment--comment /* Praise content */ {
        color: @font-color;
      }
    }
  }

  /* 
		END: Main content
		###################################
	   	START: Right sidebar 
	*/

  #sidebar, /* Home - All the headers ("Invite your coworkers", "App directory", etc.), thier dividers and thier content */
	#group-details /* Specific Group - All the headers ("Members", "Info", "Group Actions", etc.), thier dividers and thier content */ {
    h2,
    p,
    .yj-pinned-content--empty-text {
      color: @font-color;
      border-bottom-color: @main-border-color;
      a {
        color: @font-color;
      }
      &.yj-user-getting-started--header /* "Getting Started" text */ {
        color: @font-color-dark;
      }
    }

    input {
      background-color: @input-background-color;
      border-color: @main-border-color;
    }

    .yj-group-options--settings-option-label, /* "Subscribe to this group by email" */
		.yj-group-options--settings-option-link /* Remaining options for "Access Options" */ {
      color: @link-color;
    }

    .yj-suggestion-link, /* Names of "Suggested People", "Suggested Groups", etc. */
		.position, /* Description / subtext of "Suggested people", "Suggeste groups", etc. */
		.yamicon /* Ellipsis next to "Suggested people", "Suggested groups", etc. */ {
      color: @font-color;
    }
  }

  .yj-header-extra-link /* "Company resources" divider */ {
    border-bottom-color: @main-border-color;
  }

  .yj-user-getting-started /* "Getting Started" panel */ {
    background-color: @secondary-highlight-color;
    .yj-user-getting-started--pm-label /* % complete */ {
      color: @font-color-dark;
    }

    .yj-user-getting-started--link /* "Follow your coworkers" link/text */ {
      color: @link-color-light;
    }
  }

  .ms-Button /* Follow/Join buttons */ {
    background-color: @button-color-dark;
    border-color: @main-border-color;
    color: @font-color;
    &:hover {
      background-color: @main-highlight-color;
      border-color: @main-border-color;
    }
  }

  /*
		END: Right sidebar
		###################################
	   	START: Inbox
	*/

  .yj-inbox-list-item /* Inbox item */ {
    background-color: @main-highlight-color;
    border-color: @main-border-color;
    &:hover /* TODO: Bit of a dirty hack; needs new variables with nicer names */ {
      background-color: @main-border-color;
      border-color: @placeholder-color;
    }
    &.yj-read-item /* Read item */ {
      background-color: @main-background-color;
      border-color: @main-border-color;
      &:hover {
        background-color: @main-highlight-color;
        border-color: @main-border-color;
      }
    }
    .yj-inbox-read-state-button /* Read state button */ {
      border-color: @main-border-color;
      button {
        background-color: @main-background-color;
      }
    }
    .yj-inbox-list-item--message-header, /* Type of inbox item, i.e. "Private message", "Announcement", etc. */
		.yj-inbox-list-item--message-sender-user, /* Uder that sent message */
		.yj-inbox-list-item--message-text, /* Content title/preview */
		.yj-reply-blurb-text /* Content */ {
      color: @font-color;
    }
  }

  .yj-conversation-participants--header /* "Participants" header in open inbox item */ {
    color: @font-color;
    border-bottom-color: @main-border-color;
  }

  .yj-conversation-participants input /* Participants input in open inbox item */ {
    background-color: @input-background-color;
    border-color: @main-border-color;
    &::placeholder {
      color: @placeholder-color;
    }
  }

  .yj-search-controls--input-container /* Search input */ {
    border-color: @main-border-color;
    input {
      background-color: @input-background-color;
      &::placeholder {
        color: @placeholder-color;
      }
    }
  }

  .yj-simple-lightbox--content /* "Create Message" popup */ {
    background-color: @main-background-color;
    color: @font-color; /* This only affects the 'X' */
    #yj-simple-lightbox--title /* Popup title */ {
      color: @font-color;
    }
  }

  .yj-global-split-publisher {
    .yj-global-publisher-switcher .switcher-option /* "Post in a Group"/"Send Private Message" buttons */ {
      background-color: @main-background-color;
      border-color: @main-border-color;
      &.yj-selected {
        background-color: @main-highlight-color;
        border-color: @main-border-color;
        .option-arrow::before,
        .option-arrow::after {
          border-color: @main-border-color transparent;
        }
      }
      .option-label {
        color: @font-color;
      }
      &:first-child {
        border-color: @main-border-color;
      }
    }

    .yj-publisher-lightbox--group, /* Left/right border in line with gif/upload buttons */
		.yj-publisher-lightbox--private /* Left/right/bottom border in line with gif/upload buttons */ {
      border-color: @main-border-color;
    }

    .publisher-recipients {
      border-color: @main-border-color !important; /* This exact selector is used by Yammer CSS with !important, so there's no way to avoid this. */
    }

    .publisher-main /* Area between "Add Participants" and main content */ {
      background-color: @main-background-color;
    }
  }

  .yj-global-group-publisher .publisher-group /* "Select a group" dropdown */ {
    border-color: @main-border-color;
  }

  .yj-global-tag-selector .selector-arrow {
    background-color: @button-color-dark;
    border-color: @main-border-color;
  }

  /*
		END: Inbox
		###################################
	   	START: Notifications
	*/

  .yj-nav-menu--primary-actions-link /* Clicked / open "Notifications" button */ {
    &.yj-open {
      background-color: @main-highlight-color;
      &::after {
        background-color: @main-highlight-color;
      }
    }
  }

  .yj-notifications-menu-contents /* Items container */ {
    background-color: @main-highlight-color;
    color: @font-color;
    .yj-notification-menu-heading /* Popup header */ {
      background-color: @main-highlight-color;
      border-bottom-color: @main-border-color;
      color: @font-color;
    }
  }

  .yj-notifications-menu-see-all /* Bottom bar: "See all notifications" */ {
    border-top-color: @main-border-color !important; /* This exact selector is used by Yammer CSS with !important, so there's no way to avoid this. */
    &.yj-btn {
      background-color: @main-highlight-color;
    }
  }

  .yj-feed-notifications .yj-notification-item > .yamicon /* Item type icon */ {
    color: @font-color;
  }

  .yj-notification-item-thread-link /* Item link, i.e. "View conversation" */ {
    background-color: @main-background-color;
    .yj-notification-attributes /* Item link attributes i.e. "Tuesday at 10:39AM" */ {
      color: @font-color;
    }
  }

  .yj-notification-item /* Divider between items */ {
    border-bottom-color: @main-border-color;
  }

  /*
		END: Notifications
		###################################
	*/
}