☰

2016 ROBLOX Avatar Customizer for RLOT

It took me 3 days to make this

/* ==UserStyle==
@name           2016 ROBLOX Avatar Customizer for RLOT
@namespace      https://codepen.io/210/pen/NjxOaO?editors=1000
@version        1.3
@description    It took me 3 days to make this
@author         Goolbob2
==/UserStyle== */

@-moz-document url-prefix("https://www.roblox.com/my/avatar") {
  [data-internal-page-name="Avatar"] .breadcrumb-container {
    display: none!important;
}
}

  [data-internal-page-name="Avatar"] #wrap.pinned .left-wrapper, [data-internal-page-name="Avatar"] #wrap.pinned .right-wrapper {
    position: relative!important;
    top: 0px;
}

  .avatar-editor-header .btn-primary-md {
    padding: 7px 7px;
    display: inline-block;
}

  .avatar-editor-header .catalog-header div:nth-child(n+1)::after {
    width: 150px;
    display: inline-block;
    position: relative;
    text-align: right;
    font-size: 14px!important;
    line-height: 1.5em!important;
    font-weight: 400!important;
    left: 6px;
    top: 4px;
}

  .avatar-editor-header::before {
    content: "Avatar Customizer";
    font-size: 32px;
    font-weight: bold;
    margin: 12px;
    color: #343434;
    letter-spacing: -1px;
    position: relative!important;
    left: 1px;
    top: -20px;
}

  .avatar-editor-header h1 {
    font-size: 0px!important;
}

  #content #avatar-web-app .right-panel.six-column {
    width: 570px!important;
}

  #avatar-web-app .left-wrapper, .left-wrapper-placeholder {
    margin-top: 10px;
    width: 375px;
    float: left;
    height: 600px;
}

  #avatar-web-app .avatar-back {
    width: 375px;
    background: none;
}

  #avatar-web-app .avatar-thumbnail {
    width: 352px;
    height: 352px;
    left: -0px;
    margin: 0 auto;
}

  .section-sliders {
    position: relative;
    left: 50px;
    width: 250px;
    display: none;
}

  .redraw-avatar {
    position: relative;
    left: 50px;
    width: 250px;
}

  #avatar-items-container {
    min-width: 675px;
}

  #avatar-web-app .items-list.avatar-item-list .item-card .item-card-container {
    float: left;
    margin: 5px 7px 5px 0;
    vertical-align: top;
    width: 130px!important;
    min-height: 181px!important;
}

  #avatar-web-app .items-list .item-card .item-card-thumb-container {
    height: 110px;
    text-align: center;
    width: 128px;
}

  #avatar-web-app .items-list .item-card .item-card-caption {
    overflow: visible;
    padding: 2px 0 6px 0!important;
    width: 125px!important;
    text-align: center;
    height: auto!important;
    display: block;
}

  .items-list .item-card .item-card-caption .item-card-name-link {
    display: inline-block!important;
    max-width: 100%!important;
}

  #avatar-web-app .item-card-thumb .thumbnail-2d-container img {
    width: 90%;
    position: relative;
    top: -5px;
}

  #avatar-web-app .item-card-container .item-card-name {
    font-weight: bold;
    line-height: 1.5em;
    vertical-align: top;
    color: #0055B3!important;
    font-size: 14px!important;
    font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif!important;
}
   
  #avatar-web-app .items-list.avatar-item-list .item-card-container .item-card-thumb-container .item-card-thumb {
    border: none!important;
}

  #avatar-web-app .items-list.avatar-item-list .item-card .item-card-container .item-card-thumb::before {
    content: "Wear";
    border-color: #0852b7;
    background-color: #0852b7;
    background-image: url(/images/Buttons/StyleGuide/bg-btn-blue.png);
    color: white;
    padding: 1px 7px 0 12px;
    height: 22px;
    width: 56px;
    font-size: 14px;
    line-height: 17px;
    background-position: left -160px;
    margin: 0;
    display: flex;
    zoom: 1;
    text-align: center;
    font-weight: normal;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    position: relative;
    left: 74px;
    z-index: 2;
}

  #avatar-web-app .items-list.avatar-item-list .item-card .item-card-container .item-card-equipped::before {
    content: "Wearing";
    border-color: #0852b7;
    background-color: #0852b7;
    background-image: url(/images/Buttons/StyleGuide/bg-btn-blue.png);
    color: white;
    padding: 1px 7px 0 7px;
    height: 22px;
    width: 64px;
    font-size: 14px;
    line-height: 17px;
    background-position: left -160px;
    margin: 0;
    display: flex;
    zoom: 1;
    text-align: center;
    font-weight: normal;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    position: relative;
    left: 66px;
    z-index: 4;
}

  #avatar-web-app .item-card-equipped-label {
    visibility: hidden;
}

  #avatar-web-app .item-card-container .item-card-equipped {
    border: none!important;
}

  #avatar-web-app .item-card-container .thumbnail-2d-container {
    position: relative;
    top: -20px;
}

  #costumes:has(.btn-secondary-xs.btn-float-right) .item-card-caption {
    text-align: left!important;
    float: left;
    width: 100px!important;
    height: 170px;
    position: relative;
} 

  #costumes:has(.btn-secondary-xs.btn-float-right) .items-list.avatar-item-list .item-card .item-card-container .item-card-thumb::before {
    visibility: hidden;
}

  #costumes:has(.btn-secondary-xs.btn-float-right) .item-card-container .item-card-name {
    color: #343434!important;
}

  #avatar-web-app .section-content.remove-panel {
    box-shadow: none!important;
}

  #avatar-web-app .item-card-container.remove-panel {
    box-shadow: none!important;
}

  #avatar-web-app .nav-tabs {
    box-shadow: none!important;
}

  #avatar-web-app .tab-horizontal-submenu.six-column {
    display: inline-block;
    border: none;
    z-index: 6!important;
    box-shadow: none!important;
    text-align: center;
}
    

  #avatar-items-container {
    position: relative;
    top: 80px;
}

  #avatar-web-app .tab-horizontal-submenu li {
    padding: 3px 6px!important;
    margin: 0px;
    color: #0055B3;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400 !important;
    border-radius: 0px;
    height: 25px;  
}

  #avatar-web-app .tab-horizontal-submenu li.active {
    color: #0055B3;
    background-color: #dedede;
}

  #avatar-web-app .tab-horizontal-submenu li:hover {
    background-color: #efefef;
}

  #costumes:has(.btn-secondary-xs.btn-float-right) .items-list.avatar-item-list .item-card .item-card-container {
    float: left;
    margin: 10px;
    width: 100px!important;
    height: 170px;
    position: relative;
} 

  #costumes:has(.btn-secondary-xs.btn-float-right) .items-list .item-card .item-card-thumb-container {
    float: left;
    width: 100px!important;
    height: 100px;
    position: relative;
} 

  #costumes:has(.btn-secondary-xs.btn-float-right) .item-card-thumb .thumbnail-2d-container img {
    width: 115%!important;
}

  #avatar-web-app .items-list .item-card .icon-settings-16x16.edit-outfit {
    position: absolute;
    top: -100px;
    right: -8px;
    background-image: url(/images/BuildPage/btn-gear_sprite_27px.png);
    height: 21.5px;
    width: 40px;
    font-size: 13px;
    color: #000;
    text-align: center;
    display: block;
    z-index: 2;
    background-position: 0 0px;
}

  #avatar-web-app .items-list .item-card .icon-settings-16x16.edit-outfit:hover {
    background-position: 0 -21.5px;
}

  #avatar-web-app .items-list.avatar-item-list .item-card.six-column {
    width: 21.6%;
    left: -3px;
    position: relative;
}

  #avatar-web-app .items-list .item-card .item-card-menu {
    background-color: #efefef!important;
    border: 1px solid #777!important;
    color: #343434!important;
    border-radius: 0px!important;
    position: absolute;
    top: -79px;
    width: 120px;
    left: 68px;
    font-size: 12px;
    font-weight: normal;
    padding: revert!important;
    height: 100px!important;
    z-index: 1;
}

  #avatar-web-app .item-card-menu.active .btn-secondary-xs {
    box-shadow: none!important;
    text-align: left!important;
}

  #avatar-web-app:has(.item-card-menu.active) .items-list .item-card .icon-settings-16x16.edit-outfit {
    background-position: 0 -43px;
}

  #avatar-web-app .item-card-menu.active .btn-secondary-xs:hover {
    background: #0055B3;
    margin: revert;
    border: none;
    border-radius: 0px;
    width: 118px;
}

  #avatar-web-app .right-wrapper-placeholder-six-column, .right-wrapper-six-column {
    width: 567px!important;
    position: relative;
    left: 1px;
}

  #avatar-web-app .right-wrapper-six-column .rbx-tab .text-lead .icon-down {
    display: none!important;
}

  #avatar-web-app .tab-horizontal-submenu.six-column {
    width: 550px!important;
    position: relative;
    left: 10px;
}

  #avatar-web-app .right-panel.six-column .btn-secondary-xs.btn-float-right {
    position: relative;
    top: 40px;
    height: 26px;
    line-height: 25px;
    font-size: 13px;
    padding: 0 7px;
    background-image: url(/images/StyleGuide/btn-control-large-tile.png);
    border: 1px solid #777;
    color: #000;
    text-decoration: none;
    background-color: #ccc;
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    background-position: top;
    display: block;
    border-radius: 0px;
    box-shadow: none!important;
}

  #avatar-web-app .right-panel.six-column .btn-secondary-xs.btn-float-right:hover {
    background-position: bottom;
}

  #avatar-web-app #costumes .btn-secondary-xs.btn-float-right {
    font-size: 0px !important;
}

  #costumes:has(.btn-secondary-xs.btn-float-right) .btn-secondary-xs.btn-float-right::before {
    content: "Create New Outfit";
    font-size: 13px;
}

  #costumes:has(.btn-secondary-xs.btn-float-right) .items-list .item-card .item-card-caption::after {
    display: flex;
    content: "Created: 1/1/1970";
    color: #343434;
    font-size: 14px;
    line-height: 1.428;
    font-weight: 400;
    position: relative;
    top: -10px;
}

  #avatar-web-app .container-list.layer.recommendations-container {
    display: none;
}

  #avatar-react-container button.rbx-tab-heading {
    background-color: #D6D6D6;
    border: 1px solid #9e9e9e;
    border-bottom-width: 0;
    position: relative;
    width: auto;
    height: 36px;
    padding: 7px;
    margin: 4px 2px 0 0px;
    box-shadow:none!important;
    top: 2px;
}

  #avatar-web-app .rbx-tabs-horizontal .rbx-tab {
    width: auto;
    box-shadow:none!important;
}

  #avatar-web-app .rbx-tabs-horizontal .rbx-tab:first-child {
    margin-left: 5px;
}

  #avatar-web-app .rbx-tabs-horizontal-six-column .nav-tabs {
    border-bottom: 1px solid #ccc;
}

  #avatar-web-app .rbx-tabs-horizontal .rbx-tab.six-tab.active .rbx-tab-heading {
    background-color: #fff!important;
    border-color: #ccc!important;
    height: 38px;
    top: 0px;
}

  #avatar-web-app .rbx-tabs-horizontal .rbx-tab.six-tab.active .rbx-tab-heading:hover {
    background-color: #fff!important;
    border-color: #ccc!important;
}

  #avatar-web-app .rbx-tabs-horizontal .rbx-tab.six-tab .rbx-tab-heading:hover {
    background-color: #e9e9e9!important;
}

  #avatar-web-app .rbx-tab .rbx-tab-heading span {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.428;
    color: #343434;
}

  #avatar-web-app .avatar-editor-header .catalog-header {
    position: relative!important;
    left: -13px;
    top: -5px;
}

  #avatar-web-app .rbx-tab.six-tab:nth-child(1) .text-lead {
    font-size: 0px!important;
}

  #avatar-web-app .rbx-tab.six-tab:nth-child(1) .text-lead::before {
    content: "Wardrobe";
    font-size: 15px;
}

  #avatar-web-app .rbx-tab.six-tab:nth-child(2) .text-lead {
    font-size: 0px!important;
}

  #avatar-web-app .rbx-tab.six-tab:nth-child(2) .text-lead::before {
    content: "Outfits";
    font-size: 15px;
}

  #avatar-web-app .rbx-tab.six-tab:nth-child(5),   #avatar-web-app .rbx-tab.six-tab:nth-child(4) {
    display: block;
}

  [data-internal-page-name="Avatar"] .content.six-column {
    width: 970px!important;
    max-width: 970px!important;
}

  #avatar-web-app .redraw-avatar::before {
    content: "Something wrong with your avatar?";
    color: #343434!important;
    font-size: 14px !important;
    line-height: 1.428 !important;
    font-weight: 400 !important;
}

  #avatar-web-app .redraw-avatar .text-link::before {
    content: "Click here to re-draw it!";
    color: #0055b3!important;
    font-size: 14px !important;
    line-height: 1.428 !important;
    font-weight: 400 !important;
    position: relative;
    left: -114px;
}

  #avatar-web-app .redraw-avatar .text-link {
    font-size: 0px !important;
}

  #avatar-web-app .redraw-avatar .text-link:hover {
    font-size: 0px !important;
    text-decoration: none!important;
}

  #avatar-web-app .redraw-avatar {
    font-size: 0px !important;
    position: relative;
    left: 70px;
    top: -13px;
}
    
  #avatar-web-app .left-wrapper .toggle-three-dee.btn-control.btn-control-small {
    height: 20px!important;
    line-height: 18px;
    font-size: 11px;
    background-image: url(/images/StyleGuide/btn-control-small-tile.png);
    border: 1px solid #777;
    padding: 0 6px;
    color: #000;
    text-decoration: none;
    background-color: #ccc;
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    background-position: top;
    display: inline-block;
    border-radius: 0px;
    box-shadow: none!important;
    min-height: 20px!important;
    position: relative;
    left: 245px;
    top: -23px;
}

  #avatar-web-app .left-wrapper .toggle-three-dee.btn-control.btn-control-small:hover {
    background-position: bottom;
}

  #avatar-web-app {
    margin-top: 50px;
    width: auto!important;
}

  [data-internal-page-name="Avatar"] .rbx-left-col {
    background-color: #f2f2f2;
}


  [data-internal-page-name="Avatar"].light-theme {
    background: #fff !important;
}

  [data-internal-page-name="Avatar"].light-theme .content {
    background: #fff !important;
}    

  #avatar-web-app .color-dot {
    transition: none;
    margin: 6px;
    box-shadow: 0 0 0 1px #fff;
    border-radius: 0px;
}

  #avatar-web-app .color-dot:hover {
    box-shadow: 0 0 0 2px #e1e1e1!important;
}

  #bodyColors .section-content {
    box-shadow: none!important;
    position: relative;
    top: 80px;
}

  #avatar-web-app .text-link.advanced-link {
    color: #0055b3!important;
    font-size: 14px !important;
    line-height: 1.428 !important;
    font-weight: 400 !important;
    text-decoration: none!important;
}

  #classic-heads-scrollbar-container, .hat-slots {
    display: none!important;
}

  #advanced-body-colors.MuiDialog-root .MuiDialog-container [class*="-Dialog-paper"] > [class*="-root"],   #advanced-body-colors.MuiModal-root .MuiDialog-container [class*="-Dialog-paper"] > [class*="-root"] {
    box-shadow: none!important;
    padding: 0px!important;
}

  #advanced-body-colors.MuiDialog-root:has([class*="-DialogContent-dividers"]) .MuiDialog-container [class*="-Dialog-paper"],   #advanced-body-colors.MuiModal-root:has([class*="-DialogContent-dividers"]) .MuiDialog-container [class*="-Dialog-paper"] {
    border: 2px solid #888!important;
}

  #mui-7.MuiTypography-root.MuiTypography-h6.MuiDialogTitle-root  {
    font-weight: bold!important;
    font-size: 27px!important;
    color: #343434!important;
    text-align: center!important;
    height: 40px;
    padding-top: 2px;
    line-height: 40px;
}

  .bodycolors-list-sm .color-dot {
    margin: 2px;
    height: 45px!important;
    width: 45px!important;
    border-radius: 0px;
    border: 2px solid #fff;
    box-shadow: none!important;
    transition: none!important;
}
  .bodycolors-list-sm .color-dot:hover {
    border: 2px solid #e1e1e1;
}

  #advanced-body-colors .bodycolors-radio-list {
    position: relative;
    left: 15px;
}
 
  [data-internal-page-name="Avatar"] div.MuiDialog-root:not(:first-of-type) .MuiDialog-container {
    background-color: rgba(0, 0, 0, 0) !important;
}

  #advanced-body-colors .modal-body {
    height: 398px!important;
    padding: 0px!important;
}

  #advanced-body-colors .bodycolors-list-sm {
    width: 400px;
}

  .color-dot.active::after {
    display: none;
}

  #advanced-body-colors .web-blox-css-tss-1283320-Button-textContainer {
    display: none;
}

  #advanced-body-colors .web-blox-css-tss-lo77dr-Button-contained {
    display: inline-block;
    position: relative;
    top: -438px;
    box-shadow: none!important;
    transform: none!important;
    width: 20px;
    height: 20px!important;
    min-height: 20px!important;
    cursor: pointer;
    left: 274px;
    background: url(/images/Buttons/btn-x.png);
    background-repeat: no-repeat;
}

  #advanced-body-colors .web-blox-css-tss-lo77dr-Button-contained:hover {
    background-position: 0 -21px;
}