Orbs category panel

ff_orbs_catlinks.css

/*************************************************
 * FONT
 * -----------------------------------------------
 * This bar was designed to use Cuprum font
 * (imported from Google here). You can remove the
 * import link and set it to some other font here
 *************************************************/

@import url(http://fonts.googleapis.com/css?family=Cuprum&subset=latin,latin-ext);

#list_surround tab\le:first-of-type[align] td:not(fucked) a:before {
    font-family : Cuprum, sans-serif;
}

/*************************************************
 * AFTER-LIST MARGIN
 * -----------------------------------------------
 * Due to fixed positioning of this it may happen
 * that your copyright is covered by the menu.
 * I therefore added this little offset to add
 * some empty space after your list. It may not
 * work even this way or might be unnecessary for
 * your layout. Contact me if any issues arise
 *************************************************/
#list_surround {
    margin-bottom : 57px;
}

/*************************************************
 * HANDLE COLOR
 * -----------------------------------------------
 * Background and border of the handle
 *************************************************/

#inlineContent {
    background    : hsla(260, 50%, 10%, 0.75);
    border        : white solid;
}

/*************************************************
 * HANDLE WIDTH
 * -----------------------------------------------
 * I'm using 1000px. And it has to be replaced in
 * both of these to also affect positioning.
 *************************************************/

#inlineContent {
    left  : calc(50% - 1000px / 2);
    width : 1000px;
}

/*************************************************
 * HEADINGS TEXT
 * -----------------------------------------------
 * This changes text that appears in bubbles on
 * hovering the button. There wasn't a way I
 * could re-use existing code so I had to dup it
 * in my CSS. More flexibility, anyways
 *************************************************/

/* OPTION: ANIME LIST */
#list_surround tab\le:first-of-type[align] td:nth-of-type(1) a:before { content : "Watching" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(2) a:before { content : "Completed" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(3) a:before { content : "On-Hold" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(4) a:before { content : "Dropped" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(5) a:before { content : "Plan to Watch" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(6) a:before { content : "All Anime" }
/* OPTION: MANGA LIST *
#list_surround tab\le:first-of-type[align] td:nth-of-type(1) a:before { content : "Reading" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(2) a:before { content : "Completed" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(3) a:before { content : "On-Hold" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(4) a:before { content : "Dropped" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(5) a:before { content : "Plan to Read" }
#list_surround tab\le:first-of-type[align] td:nth-of-type(6) a:before { content : "All Manga" }
/* END OPTIONS */

/*************************************************
 * HEADINGS THEME
 * -----------------------------------------------
 * Colors to use for bubbles. I suggest trying out
 * black, and if it blends too much, use white.
 * The border code just *has* to be here to work.
 * It doesn't need to be changed. It's for small
 * triangles under the rounded box.
 *************************************************/

/* OPTION: BLACK */
#list_surround tab\le:first-of-type[align] td:not(fucked) a:before {
    background-color : hsla(0, 0%, 10%, 0.8);
    color            : hsla(0, 100%, 100%, 0.8);
}
#list_surround tab\le:first-of-type[align] td:not(fucked) a:after {
    border           : 7px solid;
    border-top-color : hsla(0, 0%, 10%, .8);
}
/* OPTION: WHITE *
#list_surround tab\le:first-of-type[align] td:not(fucked) a:before {
    background-color : hsla(0, 0%, 90%, 0.8);
    color            : hsla(0, 100%, 10%, 0.8);
}
#list_surround tab\le:first-of-type[align] td:not(fucked) a:after {
    border           : 7px solid;
    border-top-color : hsla(0, 0%, 90%, .8);
}
/* END OPTIONS */

/*************************************************
 * ORB ICONS, COLORS, TRANSITIONS
 * -----------------------------------------------
 * Orbs use images as masks, the color transition
 * is actually the background-color switching, not
 * the image swapping, cuz due to standards it can
 * not be animated.
 *************************************************/

/* Icons */
#list_surround tab\le:first-of-type[align] td:not(fucked) a { background-image : url("http://i.imgur.com/uJRss3C.png"); }

/* Normal color*/
#list_surround tab\le:first-of-type[align] td:not(fucked) a {
    background-color : hsl(220, 30%, 50%);
}

/* Hover color */
#list_surround tab\le:first-of-type[align] td:not(fucked) a:hover {
    background-color : hsl(80, 90%, 50%);
}

/* Clicked and current color */
#list_surround tab\le:first-of-type[align] td:not(fucked) a:active, .status_selected a {
    background-color : hsl(110, 100%, 40%) !important;
}

/* Color transition */
#list_surround tab\le:first-of-type[align] td:not(fucked) a {
    transition : background-color .4s linear;
}

/* Bubble transition */
#list_surround tab\le:first-of-type[align] td:not(fucked) a:before, #list_surround tab\le:first-of-type[align] td:not(fucked) a:after {
    transition : bottom .37s ease-in-out, opacity .4s ease-in-out;
}

/*************************************************
 * ORBS POSITION
 * -----------------------------------------------
 * This needs to be changed if your list has
 * all anime category disabled
 *************************************************/

/* OPTION: SIX CATEGORY BUTTONS */
#list_surround tab\le:first-of-type[align] {
    margin-left : -158px;
}
/* OPTION: FIVE CATEGORY BUTTONS *
#list_surround tab\le:first-of-type[align] {
    margin-left : -132px;
}
/* END OPTIONS */


/*************************************************
 * BASIC CODE
 * -----------------------------------------------
 * This is the rest codes that I didn't categorize
 * Feel free to tweak it to your liking.
 *************************************************/

/* Handle */
#inlineContent {
    border-radius : 800px/100px;
    border-width  : 3px 2px 2px;
    bottom        : -35px;
    display       : block !important;
    height        : 57px;
    position      : fixed;
    z-index       : 100;
}

/* Nav panel */
#list_surround tab\le:first-of-type[align] {
    bottom      : 5px;
    display     : block;
    left        : 50%;
    position    : fixed;
    width       : 360px !important;
    z-index     : 120;
}

/* Nav panel items */
#list_surround tab\le:first-of-type[align] td:not(fucked) {
    display : inline-block;
    height  : 42px;
    padding : 5px;
    width   : 42px;
}

/* Nav panel links */
#list_surround tab\le:first-of-type[align] td:not(fucked) a {
    display       : block;
    border-radius : 50%;
    border        : 2px solid white;
    box-shadow    : inset 0 0 2px black, 0 3px 3px black;
    color         : transparent;
    overflow      : hidden;
    height        : 100%;
    width         : 100%;
}

/* Bubbles */
#list_surround tab\le:first-of-type[align] td:not(fucked) a:before {
    -moz-box-sizing : border-box;
    box-sizing      : border-box;
    pointer-events  : none;
    border-radius   : 25px;
    bottom          : 45px;
    content         : "error!";
    display         : block;
    font-size       : small;
    height          : 20px;
    margin-left     : -30px;
    opacity         : 0;
    overflow        : hidden;
    padding-left    : 1px;
    padding-top     : 3px;
    position        : fixed;
    width           : 100px;
}

/* Small triangle below the bubble */
#list_surround tab\le:first-of-type[align] td:not(fucked) a:after {
    bottom        : 45px;
    content       : "";
    display       : block;
    margin-bottom : -14px;
    margin-left   : 13px;
    opacity       : 0;
    position      : fixed;
}
#list_surround tab\le:first-of-type[align] td:not(fucked) a:hover:before, #list_surround tab\le:first-of-type td:not(fucked) a:hover:after {
    bottom  : 60px;
    opacity : 1;
}

/* Forcing overlay behaviour to prevent flicker */
#list_surround tab\le:first-of-type[align] td:nth-of-type(1) a:before { z-index : 121 }
#list_surround tab\le:first-of-type[align] td:nth-of-type(2) a:before { z-index : 122 }
#list_surround tab\le:first-of-type[align] td:nth-of-type(3) a:before { z-index : 123 }
#list_surround tab\le:first-of-type[align] td:nth-of-type(4) a:before { z-index : 124 }
#list_surround tab\le:first-of-type[align] td:nth-of-type(5) a:before { z-index : 125 }
#list_surround tab\le:first-of-type[align] td:nth-of-type(6) a:before { z-index : 126 }
/* Moving the background offset to draw different icons for different categories */
#list_surround tab\le:first-of-type[align] td:nth-of-type(1) a { background-position : 0 0; }
#list_surround tab\le:first-of-type[align] td:nth-of-type(2) a { background-position : -42px 0; }
#list_surround tab\le:first-of-type[align] td:nth-of-type(3) a { background-position : -84px 0; }
#list_surround tab\le:first-of-type[align] td:nth-of-type(4) a { background-position : -126px 0; }
#list_surround tab\le:first-of-type[align] td:nth-of-type(5) a { background-position : -168px 0; }
#list_surround tab\le:first-of-type[align] td:nth-of-type(6) a { background-position : -210px 0; }