Chocobo1
12 months ago
4 changed files with 235 additions and 238 deletions
@ -1,234 +0,0 @@
@@ -1,234 +0,0 @@
|
||||
@import url("../palette.css"); |
||||
|
||||
.hidden-search { |
||||
display: none !important; |
||||
} |
||||
|
||||
li[data-parent].closed{ |
||||
display:none !important; |
||||
} |
||||
|
||||
li[data-parent].open:not(.hidden-search){ |
||||
display:block !important; |
||||
} |
||||
|
||||
.vsb-menu{ |
||||
cursor:pointer; |
||||
z-index:1000; |
||||
display:block; |
||||
visibility: hidden; |
||||
position:absolute;/*Don't change*/ |
||||
background-clip: padding-box; |
||||
font-size : 11px; |
||||
background-color: var(--color-background-default); |
||||
border: 1px solid var(--color-border-default); |
||||
} |
||||
|
||||
.vsb-js-search-zone{ |
||||
position:absolute;/*Don't change*/ |
||||
z-index:1001; |
||||
width: 80%; |
||||
min-height:1.8em; |
||||
padding: 2px;} |
||||
|
||||
.vsb-js-search-zone input{ |
||||
margin-left: 2px; |
||||
width: 96%; |
||||
border-radius: 4px; |
||||
height: 25px !important; |
||||
} |
||||
|
||||
.vsb-main{ |
||||
position: relative;/*Don't change*/ |
||||
display: inline-block; |
||||
vertical-align: top; |
||||
text-align:left; |
||||
} |
||||
|
||||
.vsb-menu ul{ |
||||
user-select:none; |
||||
list-style:none; |
||||
white-space: nowrap; |
||||
margin:0; |
||||
padding:0; |
||||
cursor:pointer; |
||||
overflow-y:auto; |
||||
} |
||||
|
||||
li.disabled{ |
||||
cursor:not-allowed; |
||||
opacity:0.3; |
||||
background-color: #999; |
||||
} |
||||
|
||||
li.overflow{ |
||||
cursor:not-allowed; |
||||
opacity:0.3; |
||||
background-color: #999; |
||||
} |
||||
|
||||
li.short{ |
||||
overflow:hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.vsb-main button{ |
||||
min-width: 120px; |
||||
border: 1px solid var(--color-border-default); |
||||
border-radius: 4px; |
||||
width: 100%; |
||||
text-align: left; |
||||
z-index: 1; |
||||
padding:6px 12px; |
||||
} |
||||
|
||||
.vsb-main button.disabled{ |
||||
cursor:not-allowed; |
||||
opacity:0.65; |
||||
} |
||||
|
||||
.vsb-main .title { |
||||
margin-right: 6px; |
||||
user-select:none; |
||||
} |
||||
|
||||
.vsb-main ul{ |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.vsb-menu li { |
||||
font-size: 12px; |
||||
padding: 4px 26px; |
||||
} |
||||
|
||||
.vsb-menu li:hover { |
||||
background-color: var(--color-background-hover); |
||||
color: var(--color-text-white); |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option b { |
||||
display: inline-block; |
||||
margin-left:10px; |
||||
transform: translate(-18px); |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option.open span { |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
margin-top:-2px; |
||||
height: 8px; |
||||
width: 8px; |
||||
transform: translate(-38px) rotate(45deg); |
||||
border-radius:2px; |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option.closed span { |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
height: 8px; |
||||
width: 8px; |
||||
transform: translate(-38px) rotate(-45deg); |
||||
border-radius:2px; |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option i { |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
float:left; |
||||
font-weight:bold; |
||||
margin-left:22px; |
||||
margin-right:2px; |
||||
height: 11px; |
||||
width: 8px; |
||||
border : 1px solid; |
||||
border-radius : 3px; |
||||
padding: 1px 3px 2px 3px; |
||||
margin-top:0px; |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option.checked i::after { |
||||
content: ""; |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
float:left; |
||||
margin-left:0px; |
||||
display: inline-block; |
||||
transform: rotate(45deg); |
||||
height: 8px; |
||||
width: 5px; |
||||
} |
||||
|
||||
.vsb-menu :not(.multi) li.active { |
||||
margin-left:7px; |
||||
} |
||||
|
||||
.vsb-menu :not(.multi) li.active::before { |
||||
content: ""; |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
margin-left:-18px; |
||||
transform: rotate(45deg); |
||||
height: 10px; |
||||
width: 5px; |
||||
border-radius:2px; |
||||
border-bottom: 3px solid var(--color-border-blue); |
||||
border-right: 3px solid var(--color-border-blue); |
||||
} |
||||
|
||||
.vsb-menu .multi li.grouped-option { |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
|
||||
.vsb-menu .multi li.grouped-option:hover { |
||||
font-weight: bold; |
||||
text-decoration: underline; |
||||
color:rgb(52, 31, 112); |
||||
} |
||||
|
||||
.vsb-menu .multi li:not(.grouped-option)::before{ |
||||
background: var(--color-background-popup); |
||||
content: ""; |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
float:left; |
||||
font-weight:bold; |
||||
margin-left:-22px; |
||||
margin-right:2px; |
||||
border : 1px solid; |
||||
border-radius : 3px; |
||||
padding : 7px; |
||||
margin-top:0px; |
||||
} |
||||
|
||||
.vsb-menu .multi li:not(.grouped-option).active::after { |
||||
content: ""; |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
float:left; |
||||
margin-left:-18px; |
||||
display: inline-block; |
||||
transform: rotate(45deg); |
||||
margin-top:1px; |
||||
height: 8px; |
||||
width: 5px; |
||||
border-bottom: 3px solid var(--color-border-blue); |
||||
border-right: 3px solid var(--color-border-blue); |
||||
} |
||||
|
||||
.caret { |
||||
display: inline-block; |
||||
width: 0; |
||||
height: 0; |
||||
margin-left: 2px; |
||||
vertical-align: middle; |
||||
border-top: 4px dashed; |
||||
border-top: 4px solid; |
||||
border-right: 4px solid transparent; |
||||
border-left: 4px solid transparent; |
||||
} |
||||
|
||||
|
||||
li[data-parent]{ |
||||
padding-left: 50px !important; |
||||
} |
@ -0,0 +1,231 @@
@@ -0,0 +1,231 @@
|
||||
@import url("palette.css"); |
||||
|
||||
.hidden-search { |
||||
display: none !important; |
||||
} |
||||
|
||||
li[data-parent].closed { |
||||
display: none !important; |
||||
} |
||||
|
||||
li[data-parent].open:not(.hidden-search) { |
||||
display: block !important; |
||||
} |
||||
|
||||
.vsb-menu { |
||||
background-clip: padding-box; |
||||
background-color: var(--color-background-default); |
||||
border: 1px solid var(--color-border-default); |
||||
cursor: pointer; |
||||
display: block; |
||||
font-size: 11px; |
||||
position: absolute; |
||||
visibility: hidden; |
||||
z-index: 1000; /*Don't change*/ |
||||
} |
||||
|
||||
.vsb-js-search-zone { |
||||
min-height: 1.8em; |
||||
padding: 2px; |
||||
position: absolute; |
||||
width: 80%; |
||||
z-index: 1001; /*Don't change*/ |
||||
} |
||||
|
||||
.vsb-js-search-zone input { |
||||
border-radius: 4px; |
||||
height: 25px !important; |
||||
margin-left: 2px; |
||||
width: 96%; |
||||
} |
||||
|
||||
.vsb-main { |
||||
display: inline-block; |
||||
position: relative; |
||||
text-align: left; |
||||
vertical-align: top; /*Don't change*/ |
||||
} |
||||
|
||||
.vsb-menu ul { |
||||
cursor: pointer; |
||||
list-style: none; |
||||
margin: 0; |
||||
overflow-y: auto; |
||||
padding: 0; |
||||
user-select: none; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
li.disabled { |
||||
background-color: #999; |
||||
cursor: not-allowed; |
||||
opacity: 0.3; |
||||
} |
||||
|
||||
li.overflow { |
||||
background-color: #999; |
||||
cursor: not-allowed; |
||||
opacity: 0.3; |
||||
} |
||||
|
||||
li.short { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.vsb-main button { |
||||
border: 1px solid var(--color-border-default); |
||||
border-radius: 4px; |
||||
min-width: 120px; |
||||
padding: 6px 12px; |
||||
text-align: left; |
||||
width: 100%; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.vsb-main button.disabled { |
||||
cursor: not-allowed; |
||||
opacity: 0.65; |
||||
} |
||||
|
||||
.vsb-main .title { |
||||
margin-right: 6px; |
||||
user-select: none; |
||||
} |
||||
|
||||
.vsb-main ul { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.vsb-menu li { |
||||
font-size: 12px; |
||||
padding: 4px 26px; |
||||
} |
||||
|
||||
.vsb-menu li:hover { |
||||
background-color: var(--color-background-hover); |
||||
color: var(--color-text-white); |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option b { |
||||
display: inline-block; |
||||
margin-left: 10px; |
||||
transform: translate(-18px); |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option.open span { |
||||
border-radius: 2px; |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
height: 8px; |
||||
margin-top: -2px; |
||||
transform: translate(-38px) rotate(45deg); |
||||
width: 8px; |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option.closed span { |
||||
border-radius: 2px; |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
height: 8px; |
||||
transform: translate(-38px) rotate(-45deg); |
||||
width: 8px; |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option i { |
||||
border: 1px solid; |
||||
border-radius: 3px; |
||||
display: inline-block; |
||||
float: left; |
||||
font-size: inherit; |
||||
font-weight: bold; |
||||
height: 11px; |
||||
margin-left: 22px; |
||||
margin-right: 2px; |
||||
margin-top: 0px; |
||||
padding: 1px 3px 2px; |
||||
width: 8px; |
||||
} |
||||
|
||||
.vsb-menu li.grouped-option.checked i::after { |
||||
content: ""; |
||||
display: inline-block; |
||||
float: left; |
||||
font-size: inherit; |
||||
height: 8px; |
||||
margin-left: 0px; |
||||
transform: rotate(45deg); |
||||
width: 5px; |
||||
} |
||||
|
||||
.vsb-menu :not(.multi) li.active { |
||||
margin-left: 7px; |
||||
} |
||||
|
||||
.vsb-menu :not(.multi) li.active::before { |
||||
border-bottom: 3px solid var(--color-border-blue); |
||||
border-radius: 2px; |
||||
border-right: 3px solid var(--color-border-blue); |
||||
content: ""; |
||||
display: inline-block; |
||||
font-size: inherit; |
||||
height: 10px; |
||||
margin-left: -18px; |
||||
transform: rotate(45deg); |
||||
width: 5px; |
||||
} |
||||
|
||||
.vsb-menu .multi li.grouped-option { |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
.vsb-menu .multi li.grouped-option:hover { |
||||
color: rgb(52 31 112); |
||||
font-weight: bold; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.vsb-menu .multi li:not(.grouped-option)::before { |
||||
background: var(--color-background-popup); |
||||
border: 1px solid; |
||||
border-radius: 3px; |
||||
content: ""; |
||||
display: inline-block; |
||||
float: left; |
||||
font-size: inherit; |
||||
font-weight: bold; |
||||
margin-left: -22px; |
||||
margin-right: 2px; |
||||
margin-top: 0px; |
||||
padding: 7px; |
||||
} |
||||
|
||||
.vsb-menu .multi li:not(.grouped-option).active::after { |
||||
border-bottom: 3px solid var(--color-border-blue); |
||||
border-right: 3px solid var(--color-border-blue); |
||||
content: ""; |
||||
display: inline-block; |
||||
float: left; |
||||
font-size: inherit; |
||||
height: 8px; |
||||
margin-left: -18px; |
||||
margin-top: 1px; |
||||
transform: rotate(45deg); |
||||
width: 5px; |
||||
} |
||||
|
||||
.caret { |
||||
border-left: 4px solid transparent; |
||||
border-right: 4px solid transparent; |
||||
border-top: 4px dashed; |
||||
border-top: 4px solid; |
||||
display: inline-block; |
||||
height: 0; |
||||
margin-left: 2px; |
||||
vertical-align: middle; |
||||
width: 0; |
||||
} |
||||
|
||||
li[data-parent] { |
||||
padding-left: 50px !important; |
||||
} |
Loading…
Reference in new issue