mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-10 09:39:58 +00:00
Move UI components to ui/ directory
This commit is contained in:
hensm
299
ext/src/ui/options/styles/index.css
Normal file
299
ext/src/ui/options/styles/index.css
Normal file
@@ -0,0 +1,299 @@
|
||||
:root {
|
||||
--border-color: rgb(225, 225, 225);
|
||||
--secondary-color: rgb(125, 125, 125);
|
||||
}
|
||||
|
||||
*:invalid {
|
||||
box-shadow: 0 0 1.5px 1px red;
|
||||
}
|
||||
|
||||
#form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-end;
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
|
||||
#buttons > :not(:last-child) {
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
#status-line {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
|
||||
.bridge {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.bridge,
|
||||
.bridge__loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bridge__loading {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
font-size: 1.25em;
|
||||
font-weight: 300;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.bridge__loading progress {
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bridge__info {
|
||||
display: flex;
|
||||
padding-inline-start: 25px;
|
||||
}
|
||||
|
||||
.bridge__status {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: min-content;
|
||||
flex-direction: column;
|
||||
margin-inline-end: 25px;
|
||||
}
|
||||
|
||||
.bridge__info--not-found {
|
||||
padding-inline-end: 25px;
|
||||
}
|
||||
.bridge__info--found .bridge__status {
|
||||
border-inline-end: 1px solid var(--border-color);
|
||||
padding-inline-end: 25px;
|
||||
}
|
||||
|
||||
.bridge__status-title {
|
||||
margin: initial;
|
||||
font-weight: 500;
|
||||
font-size: 1.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bridge__status-text {
|
||||
margin: initial;
|
||||
margin-top: 5px;
|
||||
font-size: 1.15em;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bridge__info--not-found .bridge__status {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-areas:
|
||||
"status-icon status-title"
|
||||
"status-icon status-text";
|
||||
}
|
||||
.bridge__info--found .bridge__status-icon {
|
||||
margin-block-end: 5px;
|
||||
}
|
||||
.bridge__info--not-found .bridge__status-icon {
|
||||
grid-area: status-icon;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
.bridge__info--not-found .bridge__status-title {
|
||||
grid-area: status-title;
|
||||
font-weight: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
.bridge__info--not-found .bridge__status-text {
|
||||
grid-area: status-text;
|
||||
margin-top: initial;
|
||||
}
|
||||
|
||||
.bridge__stats {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.bridge__stats th {
|
||||
font-weight: 500;
|
||||
padding-inline-end: 10px;
|
||||
text-align: end;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bridge__update-info {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.bridge__update-label {
|
||||
display: inline-block;
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
.bridge__update-options {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bridge__update-start {
|
||||
align-self: flex-end;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.bridge--update-status {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.category {
|
||||
border: initial;
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 5px;
|
||||
margin: initial;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.category:disabled {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
#form > .category:not(:first-child) {
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.category > .category {
|
||||
padding: 5px 0;
|
||||
box-shadow: inset 2px 0 0 0 var(--border-color);
|
||||
}
|
||||
|
||||
.category > .category > .category__name,
|
||||
.category > .category > .category__description {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
|
||||
.category__name {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.category__name > h2 {
|
||||
font-size: 1.15em;
|
||||
font-weight: 500;
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
.category__description {
|
||||
color: var(--secondary-color);
|
||||
margin-top: initial;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.category__name,
|
||||
.category__description,
|
||||
.category .category {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
|
||||
.option {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.option--inline {
|
||||
display: block;
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.option__label {
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.option > input {
|
||||
align-self: center;
|
||||
justify-self: flex-start;
|
||||
margin-inline-start: initial;
|
||||
}
|
||||
|
||||
|
||||
.editable-list {
|
||||
background-color: -moz-field;
|
||||
border: 1px solid var(--border-color);
|
||||
color: -moz-fieldtext;
|
||||
justify-content: end;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.editable-list__view-actions {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.editable-list__view-button,
|
||||
.editable-list__save-raw-button {
|
||||
|
||||
}
|
||||
|
||||
.editable-list hr {
|
||||
border: initial;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.editable-list__items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: initial;
|
||||
margin-inline-start: -5px;
|
||||
padding: initial;
|
||||
width: calc(100% + 10px);
|
||||
}
|
||||
|
||||
.editable-list__item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 2em;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.editable-list__item:nth-child(even):not(:last-child) {
|
||||
background-color: -moz-eventreerow;
|
||||
}
|
||||
.editable-list__item:nth-child(odd):not(:last-child) {
|
||||
background-color: -moz-oddtreerow;
|
||||
}
|
||||
|
||||
.editable-list__item--selected {
|
||||
background-color: -moz-cellhighlight !important;
|
||||
color: -moz-cellhighlighttext !important;
|
||||
}
|
||||
|
||||
.editable-list__title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.editable-list__edit-field {
|
||||
width: -moz-available;
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
|
||||
.editable-list__raw-view {
|
||||
max-height: 300px;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.editable-list__add-button {
|
||||
align-self: end;
|
||||
margin-top: 5px;
|
||||
}
|
||||
24
ext/src/ui/options/styles/mac.css
Normal file
24
ext/src/ui/options/styles/mac.css
Normal file
@@ -0,0 +1,24 @@
|
||||
body {
|
||||
font: menu;
|
||||
}
|
||||
|
||||
button,
|
||||
select,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button:not([disabled]):hover:active {
|
||||
color: -moz-mac-buttonactivetext;
|
||||
}
|
||||
button[default]:not([disabled]):not(:-moz-window-inactive) {
|
||||
color: -moz-mac-defaultbuttontext;
|
||||
}
|
||||
button[default]:not(:hover):active {
|
||||
color: ButtonText;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
height: 22px;
|
||||
}
|
||||
Reference in New Issue
Block a user