Compact FilterBlade UI intended for computer screens
/* ==UserStyle==
@name FilterBlade shrinkUI
@namespace github.com/openstyles/stylus
@version 2024.07.25
@description Compact FilterBlade UI intended for computer screens
@author afkoncore
@license MIT
==/UserStyle== */
@-moz-document domain("filterblade.xyz") {
#leftSideContainer{
display: none;
}
/*Font Size*/
.AccordionLabel, .smallSubTitle, .VisualUtilityDescription{
font-size: .95em;
}
.CustomizeTitle{
font-size: 1.1em;
}
label{
font-size: .95em!important;
}
button, .ui-checkboxradio-label, button, select{
font-size: 1em!important;
}
#visual .BroadTitle{
font-size: 1.2em;
letter-spacing: 1px;
padding: 5px 0;
width: 103.5%;
}
#hoverBox{
font-size: 0.7em!important;
line-height: 1;
padding: 5px 0;
}
/**/
*{
font-size: .95em;
}
.myBody{
width:auto;
margin: 0;
margin-right: 230px;
padding: 0 4px;
}
.myBody.customizerBodyBlob.ChangedAccordion{
padding-top: 20px
}
#leftSideAd, #footerAdContainer, .Title_Wide{
display:none;
}
.VisualControlSortableListElement{
margin: .05em;
}
.ShowAccordion {
padding: 8px;
margin-bottom: 12px;
display: block;
}
.myBody.customizerBodyBlob{
margin-top: 5px;
}
/*item preview*/
.VisualEditor_Container{
width: calc(100% - 145px);
}
.VC_CombiBoxDisableColor{
margin-top: 5px;
width: 25px;
height: 18px;
left: 68px;
}
.sp-replacer {
padding: 2px;
}
.sp-preview {
position: relative;
width: 20px;
height: 18px;
}
.VC_CombiBoxColorPickerLabel {
display: inline-block;
width: auto;
font-size: .95em;
padding-right: .5em;
}
.VC_CombiBoxColorPickersDiv, .VC_CombiBoxColorPickerDiv {
width: 90px;
height: auto;
padding: auto 3px;
}
.VC_CombiBoxColorPickerDiv{
margin:5px 0;
}
.VC_CombiBoxColorPickersDiv{
margin-right: 5px;
}
.CombiBoxShowcaseDiv{
height: auto;
width: auto;
font-size: 3em;
top: 50%;
}
.VC_CombiBoxRightDiv{
min-width: 165px;
}
.CustomizeItemShowcase_Inner{
margin: auto;
padding: 0;
}
/*item accordion preview*/
.accordion.AccordionBtnStep2>span>.VisualItem_OuterContainer>.VisualUtilityItemDiv{
font-size: 1.5em;
width: fit-content;
height: 12px;
line-height: 0;
margin-left:auto;
}
.accordion.AccordionBtnStep2>span>.VisualItem_OuterContainer>.VisualUtilityItemDiv>.VisualUtilityItemLabel{
line-height: 1;
}
/* */
.VisualEditor_Container{
margin-bottom: 5px;
}
.VC_CombiBoxSizeSlider {
width: 143px;
margin: 5px 13px 0px 6px!important;
}
.VC_CombiBoxRightDiv button{
margin-top: 4px;
margin-left: 4px;
}
[id^=OperatorSliderInputField]{
font-size: 1.1em!important;
padding: 2px!important;
padding-left: 5px!important;
width: auto!important;
}
.CustomizeGroupBox.ChangedAccordion>select.TTTrigger{
width: auto!important;
}
/**/
.CustomizeGroupBox[style="height: 40px; overflow: hidden;"]{
height: 11px!important;
margin: 5px 20px;;
}
.VisualDivMinimizeButton.iconButton >svg{
width: 19px;
height: 19px;
}
.VisualDivMinimizeButton {
top: -32px;
left: 0px;
}
button[style="display: inline-block; height: 32px; width: 32px; padding: 0px;"]{
height: 20px!important;
width: 20px!important;
font-size: 1.8em!important;
line-height: 0;
font-weight: normal;
}
.CustomizeTitle{
margin-bottom: 1px;
}
.VisualUtilityDescriptionBox{
padding:0;
}
.VC_SortableListTextInput{
font-size: 1.5em;
padding: 3px;
}
.VC_SortableListAddButton{
height: auto;
}
.VisualControlSortableList,.SortableListElement_Movable.grabbable{
margin: .14em .12em;
padding:.05em;
min-width: 50px;
}
.SortableListElementLabel{
font-size: 1.5em!important;
}
.sortableListDeleteElementBtn{
padding: 2px;;
}
.CustomizerUiDivider{
display: none;
}
.sortableListTitle{
line-height: 1em;
}
.ScreenDescription{
text-align: left;
padding-bottom: 5px;
}
.operatorSliderTitle{
width: auto;
margin-right: 3px;
}
.CustomizeGroupBox{
padding: 4px;
}
.AccordionIcon {
width: 30px!important;
height: 30px!important;
}
.accordion{
padding: 4px 8px;
}
.accordion.AccordionBtnStep2, .accordion.AccordionBtnStep1{
height: auto!important;
}
.accordion.AccordionBtnStep2.ChangedAccordion.AccordionOpen{
margin-top: 8px;
padding-bottom: 2px;
padding-right: 2px;
}
.VisualEditorSHDButtonDiv{
width: 80px;
height:auto;
padding-right:.3em;
}
.VisualEditorSHDButton{
margin: 2px 0!important;
width: 65px;
}
.smallSubTitle, .VisualEditorSHDButtonDiv{
width: 70px;
}
.AccordionCounterContainer{
margin-right:0;
margin-top:1px;
}
.ResetButton {
padding:3px 15px;
}
.CheckBoxButtons.CheckBoxButtonContainer{
margin-top: 5px;
}
[id^=EntrySelectorElementAdderChildElement]{
width: auto;
margin-bottom: 4px;
}
.TTTrigger[src="assets/img/Icons/AccordionIcons/Chaos.png"]{
top: 0px!important;
margin-right:10px;
height: 20px!important;
}
.TTTrigger_Interactive+div {
margin-left: 1em;
margin-top: 1em;
width: auto;
}
.LootSimulatorSettingsButtonDiv{
left:-10px;
}
/*_____________*/
/*save & presets*/
/*_____________*/
.tabSelectionButton{
max-width: 315px;
line-height: 0.5;
}
.myFiltersScreenTab>div[style="text-align: center"]{
width: 630px!important;
}
.saveLoadTabButton {
width: 40%;
}
.CustomizeGroupBox, .CustomizeGroupBox>ul{
margin:0;
}
.saveStateLowerHalf > div{
padding:0 30px!important;
margin-bottom: 5px;
font-size: 1.2em!important;
}
.saveStateUpperHalf > div{
padding:10px 38px 5px 38px!important;
}
.saveStateLowerHalf, .saveStateUpperHalf{
height:auto!important;
}
[id^=profileSaveStateName]{
font-size: 1.4em!important;
}
[id^=profileSaveStateChangeCount]{
margin:0!important;
}
[id^=ProfileSaveStateTimesLoaded]{
margin-top: -5px!important;
}
.saveState{
margin-bottom:3px;
}
[style="position:absolute; top:16px; font-size:38px; text-align:center; width:32px; left: -55px; display: "], [style="position:absolute;top:16px;font-size:38px;text-align:center;width:32px;left: -55px;"]{
top: 2px!important;
width: 16px!important;
left: -33px!important;
border: 1px!important;
}
.DL_ListNumber{
font-size: .55em;
width: 25px!important;
padding:0 2px!important;
border: 1px solid;
}
/*left size icon container*/
[style="width: 150px; display: flex; height: 100px; margin-left: -90px; align-items: flex-start; flex-flow: column wrap; place-content: flex-start center;"]{
height: 60%!important;
}
.keepImgRatio{
height: 45px!important;
width: 45px!important;
}
.rhombusContainer{
height: auto;
width: auto;
}
#profileSaveStateList, #myUserPresetList{
width: 650px;
}
[id^=poeProfileSaveStateContainerOuter]{
margin: 0px 25px!important;
}
/*ProfileSaveStateContainer inner div*/
[style="display: flex; height: 100px; color: white; width: 700px; margin: 4px auto; justify-content: space-around; align-items: flex-start; border: 1px solid rgb(89, 89, 89); background-color: rgb(29, 36, 49);"]{
height: 60px!important;
width:550px!important;
}
/*inner middle block*/
[style="width: 510px; display: flex; height: 100px; flex-direction: column;"]{
margin-left: -38px;
width:95%!important;
}
/*load button on the right*/
[style="width: 120px; display: flex; height: 100px; flex-direction: column; justify-content: space-evenly;"]{
height: fit-content!important;
margin: auto 5px;
}
/*top side of save*/
[style="flex: 1 1 0%; display: flex; align-items: center; border-bottom: 2px solid gray; padding-left: 24px;"]{
flex: none!important;
}
[id^=profileSaveStateName]{
padding: 10px 0;
}
/*bottom side of save*/
[style="flex: 1 1 0%; display: flex; justify-content: space-between; align-items: center; padding-left: 24px;"]{
flex: none!important;
}
/*_____________*/
/*Nav*/
/*_____________*/
.SelectionButtonsDivFixed>.SelectionButton{
height: auto;
margin-left: 0;
padding: 0 8px;
}
.SelectionButtonsDivFixed{
left: 1em!important;
font-size: .9em!important;
}
nav#SelectionButtonsDiv{
margin-left: 1em;
}
/*Right side floating box*/
#CustomizerToolBoxContainer{
right:.2em;
}
[id^=ItemcustSearchRes]{
font-size: .95em!important;
}
[src="assets/img/ItemHoverBox/ItemHoverBoxDivider_Unique.png"]{
display: none;
height: 0!important;
margin: 0!important;
}
#CustomizerToolBoxSearchJumpBarContent>br{
display:none;
}
#CustomizerToolBoxSearchJumpBarContent>div{
margin: 0 0 2px 10px;
}
.CustomizerToolBox_TabButton{
height: auto;
padding: 5px 0;
}
/*scrollbar*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #080808;
}
::-webkit-scrollbar-thumb {
background-color: #323333;
}
}