Danbooru: collapsed sidebar

@-moz-document domain("donmai.us") {
/* This style changes the Danbooru image sidebar from a regular block on the left of  */
/*  the page to a small handle, similar to the header icon; hovering over this handle */
/*  will pop up the sidebar as an overlay.                                            */
/* It has been designed to work with the Small Mode base style; it's mostly untested  */
/*  as a standalone style alteration.  In particular, sizes may need adjustment if    */
/*  Small Mode's font reductions are not in effect.                                   */

/* This style works very nicely in conjunction with the "floating sidebar" option.    */

/* Last updated 2013-03-19 by kounishin                           */
/* May break if/when Danbooru page styles change after that date. */
/* 2013-03-19: section#content now uses primarily margin, only a little */
/*   padding; this style and the collapsed sidebar updated accordingly. */

/* absolute positioning is overridable by the floating-sidebar style, so less specific */
#sidebar {
  position: absolute !important;
  z-index: 1800 !important;   /* translation notes are z-index: 1500 under Danbooru 2 */
}

/* The width/position in this section is the collapsed state. */
#page aside#sidebar {
  width: 12px !important;  /* match width of navicon, allowing for r/l padding below */
  top: 22px !important;   /* allow for height of navicon, borders for that and this, and any space desired */
  left: 0px !important;
  overflow: hidden !important;
  white-space: nowrap !important;

  background: rgba(232,232,255,0.8) !important;
  padding: 3px !important;
  border: 2px solid #006FFA !important;
  border-left-width: 0px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  opacity: 0.5 !important;
}

#page aside#sidebar:hover {
  width: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;

  opacity: 1 !important;
}

/* to have the edges of the content ("?" wiki links for tags, etc) visible */
/*  when the sidebar is collapsed, comment out these two rules.              */
aside#sidebar > * {
  padding-left: 38px !important; /* pad far enough to push content out of sight */
}
aside#sidebar:hover > * {
  padding-left: 0 !important;
}

/* reduce top margin for search box */
#search-box {
  margin-top: 0.5em !important;
}

/* make post counts more visible against grayish background */
aside#sidebar .post-count {
  color: #888 !important;
}

/* On pages with sidebar: reduce left-padding and allow further widening  */
/*  for main content div (but don't use 100%, owing to padding).          */
/* Make sure this selector is more specific than the one in the "floating */
/*  sidebar" style, so as to override it.                                 */
aside#sidebar + section#content {
  margin-left: 1.2em !important;
  padding-left: 0.3em !important;
  max-width: 97% !important;
}

}