mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-08-08 06:08:27 +02:00
Merge Global settings and Stream settings into one dialog
This commit is contained in:
redphx
381
src/assets/css/settings-dialog.styl
Normal file
381
src/assets/css/settings-dialog.styl
Normal file
@@ -0,0 +1,381 @@
|
||||
.bx-settings-dialog {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0.98;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
.bx-focusable {
|
||||
&::after {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:focus::after {
|
||||
offset = 0;
|
||||
|
||||
top: offset;
|
||||
left: offset;
|
||||
right: offset;
|
||||
bottom: offset;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-reload-note {
|
||||
font-size: 0.8rem;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
height: var(--bx-button-height);
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-tabs-container {
|
||||
position: fixed;
|
||||
width: 48px;
|
||||
max-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> div:last-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-top: 8px;
|
||||
height: unset;
|
||||
padding: 8px 10px;
|
||||
|
||||
svg {
|
||||
size = 16px;
|
||||
|
||||
width: size;
|
||||
height: size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0 0 0 8px;
|
||||
box-shadow: 0 0 6px #000;
|
||||
overflow: overlay;
|
||||
flex: 1;
|
||||
|
||||
svg {
|
||||
size = 24px;
|
||||
width: size;
|
||||
height: size;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: content-box;
|
||||
background: #131313;
|
||||
cursor: pointer;
|
||||
border-left: 4px solid #1e1e1e;
|
||||
|
||||
&.bx-active {
|
||||
background: #222;
|
||||
border-color: #008746;
|
||||
}
|
||||
|
||||
&:not(.bx-active):hover {
|
||||
background: #2f2f2f;
|
||||
border-color: #484848;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[data-group=global] {
|
||||
&[data-need-refresh=true] {
|
||||
background: var(--bx-danger-button-color) !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--bx-danger-button-hover-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bx-settings-tab-contents {
|
||||
tabsWidth = 48px;
|
||||
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
margin-left: tabsWidth;
|
||||
width: 450px;
|
||||
max-width: calc(100vw - tabsWidth);
|
||||
background: #1a1b1e;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-family: var(--bx-title-font);
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 6px #000;
|
||||
overflow: overlay;
|
||||
z-index: 1;
|
||||
|
||||
> div[data-tab-group=mkb] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> div[data-tab-group=shortcuts] {
|
||||
> div {
|
||||
&[data-has-gamepad=true] {
|
||||
> div:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> div:last-of-type {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-has-gamepad=false] {
|
||||
> div:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> div:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx-shortcut-profile {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bx-shortcut-note {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bx-shortcut-row {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
label.bx-prompt {
|
||||
flex: 1;
|
||||
font-size: 26px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bx-shortcut-actions {
|
||||
flex: 2;
|
||||
position: relative;
|
||||
|
||||
select {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
&:last-of-type {
|
||||
opacity: 0;
|
||||
z-index: calc(var(--bx-settings-z-index) + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.bx-top-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.bx-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 16px 0 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.bx-settings-tab-contents {
|
||||
width: calc(100vw - 48px);
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid #2c2c2e;
|
||||
padding: 16px 8px;
|
||||
margin: 0;
|
||||
border-left: 2px solid transparent;
|
||||
|
||||
&:hover, &:focus-within {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
&:not(:has(> input[type=checkbox])) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
select {
|
||||
&:focus {
|
||||
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:focus), &:has(select:focus), &:has(button:focus) {
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
> span.bx-settings-label {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
+ * {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
accent-color: var(--bx-primary-button-color);
|
||||
|
||||
&:focus {
|
||||
accent-color: var(--bx-danger-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
select:disabled {
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
text-align-last: right;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
select option:disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-dialog-note {
|
||||
display: block;
|
||||
color: #afafb0;
|
||||
font-size: 12px;
|
||||
font-weight: lighter;
|
||||
font-style: italic;
|
||||
|
||||
&:not(:has(a)) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-custom-user-agent {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.bx-donation-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
color: #5dc21e;
|
||||
|
||||
&:hover {
|
||||
color: #6dd72b;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-debug-info {
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 10px;
|
||||
cursor: copy;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
border: 1px solid #2d2d2d;
|
||||
background: #212121;
|
||||
white-space: break-spaces;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background: #272727;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-app-version {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
color: #747474;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bx-note-unsupported {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
color: #828282;
|
||||
}
|
||||
Reference in New Issue
Block a user