mirror of
https://github.com/clusterio/clusterio.git
synced 2026-11-13 23:14:53 +09:00
Hornwitser
0d28a3ac3c
The handling of exported data such as locales and icons in web_ui was based on a model where there is only one set of data exported per cluster. This model changed to have one set of exports per mod pack when mod packs were introduced, but the existing web_ui code was bodged to use exports from a "default mod pack" on the controller. Refactor the code loading exported data to take the mod pack as an argument for selecting which exported data to load. The different kinds of prototype metadata that can be loaded is consolidated into one `useExportPrototypeMetadata` hook. The logic for displaying icons is put into a `FactorioIcon` component. And the obsolete `useExportManifest` hook is removed. These changes allow the `/icon-reference` page to display exports on a per mod pack basis. Which has now been linked on the bottom of the mod pack view page.
412 lines
6.5 KiB
CSS
412 lines
6.5 KiB
CSS
body {
|
|
margin: 0;
|
|
}
|
|
|
|
[data-theme="compact"] p, p {
|
|
margin: 0;
|
|
}
|
|
|
|
.row-links{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.login-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.site-layout-content {
|
|
background: #141414;
|
|
padding: 24px;
|
|
margin: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.site-layout {
|
|
overflow-x: clip;
|
|
}
|
|
|
|
.site-layout-content-container {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.site-breadcrumb {
|
|
margin: 16px 0 16px 52px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.site-layout-content-container {
|
|
padding: 0 24px 24px;
|
|
}
|
|
|
|
.site-breadcrumb {
|
|
margin-left: 28px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.site-layout {
|
|
overflow-x: initial;
|
|
}
|
|
|
|
.site-layout-content-container {
|
|
min-width: initial;
|
|
}
|
|
}
|
|
|
|
.site-layout-sider {
|
|
z-index: 0;
|
|
}
|
|
|
|
.header {
|
|
padding-left: 250px;
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.page-header {
|
|
padding: 0 0 16px;
|
|
}
|
|
|
|
.site-layout-content > h2:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.section-header, .page-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-header {
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.section-header-title, .page-header-title {
|
|
flex: auto;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.section-header-title {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
line-height: 1.5715;
|
|
}
|
|
|
|
.page-header-title {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.section-header-extra, .page-header-extra {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.site-name {
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 112px;
|
|
font-size: 18pt;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.site-version {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 120px;
|
|
color: #f00;
|
|
}
|
|
|
|
.site-logo {
|
|
position: absolute;
|
|
left: 36px;
|
|
width: 64px;
|
|
height: 64px;
|
|
background-image: url("./images/logo.png");
|
|
background-size: 64px;
|
|
}
|
|
|
|
@media not all and (min-width: 576px) {
|
|
.header {
|
|
padding-left: 88px;
|
|
}
|
|
|
|
.site-logo {
|
|
left: 12px;
|
|
}
|
|
|
|
.site-name {
|
|
display: none;
|
|
}
|
|
|
|
.site-version {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.account-dropdown-header {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 64px;
|
|
height: 64px;
|
|
font-size: 18px;
|
|
line-height: 72px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.account-dropdown-header::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: transparent;
|
|
transition: all 0.3s;
|
|
content: "";
|
|
}
|
|
|
|
.account-dropdown-header:hover::after {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.error-traceback code {
|
|
display: block;
|
|
margin: 0;
|
|
background: #000;
|
|
border-color: #252525;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.save-list-dragger .ant-upload.ant-upload-drag {
|
|
border: none;
|
|
background: none;
|
|
height: auto;
|
|
cursor: inherit;
|
|
}
|
|
|
|
.save-list-dragger .ant-upload.ant-upload-btn {
|
|
padding: 0;
|
|
}
|
|
|
|
.save-list-table .ant-table-pagination.ant-pagination {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rcon-result code {
|
|
display: block;
|
|
background: #000;
|
|
border-color: #252525;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
animation: rcon-highlight 1s ease-out forwards;
|
|
}
|
|
|
|
@keyframes rcon-highlight {
|
|
0% { outline: 3px solid #1668dc; }
|
|
100% { outline: 3px solid transparent; }
|
|
}
|
|
|
|
/* see https://blog.eqrion.net/pin-to-bottom/ for how scroll anchors works */
|
|
.instance-console code * {
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
.instance-console code .scroll-anchor {
|
|
overflow-anchor: auto;
|
|
height: 1px;
|
|
}
|
|
|
|
.instance-console code {
|
|
display: block;
|
|
margin: 0;
|
|
background: #000;
|
|
border-color: #252525;
|
|
height: 300px;
|
|
overflow-y: scroll;
|
|
white-space: pre-wrap;
|
|
|
|
/* Make sure there's at least one pixel of scroll space, this */
|
|
/* is necessary for the view to stick on the scroll anchor. */
|
|
padding-top: 300px;
|
|
}
|
|
|
|
.instance-console .factorio-time {
|
|
color: #afaf1f;
|
|
}
|
|
|
|
.instance-console .factorio-filename {
|
|
color: #808080;
|
|
}
|
|
|
|
.instance-console .factorio-script {
|
|
font-weight: bold;
|
|
color: #49c33c;
|
|
}
|
|
|
|
.instance-console .factorio-verbose {
|
|
font-weight: bold;
|
|
color: #888888;
|
|
}
|
|
|
|
.instance-console .factorio-info {
|
|
font-weight: bold;
|
|
color: #4646ea;
|
|
}
|
|
|
|
.instance-console .factorio-warning {
|
|
font-weight: bold;
|
|
color: #afaf1f;
|
|
}
|
|
|
|
.instance-console .factorio-error {
|
|
font-weight: bold;
|
|
color: #ad3939;
|
|
}
|
|
|
|
.instance-console .factorio-action {
|
|
color: #afaf1f;
|
|
}
|
|
|
|
.log-verbose {
|
|
font-weight: bold;
|
|
color: #888888;
|
|
}
|
|
|
|
.log-info {
|
|
font-weight: bold;
|
|
color: #4646ea;
|
|
}
|
|
|
|
.log-audit {
|
|
font-weight: bold;
|
|
color: #49c33c;
|
|
}
|
|
|
|
.log-warn {
|
|
font-weight: bold;
|
|
color: #afaf1f;
|
|
}
|
|
|
|
.log-error {
|
|
font-weight: bold;
|
|
color: #ad3939;
|
|
}
|
|
|
|
.log-fatal {
|
|
font-weight: bold;
|
|
background-color: #ad3939;
|
|
color: #000;
|
|
}
|
|
|
|
.config-container, .config-container .ant-tree {
|
|
background-color: #111111;
|
|
}
|
|
|
|
.config-container .ant-form-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.config-container .filter-node .ant-tree-node-content-wrapper {
|
|
background: #2a1912;
|
|
}
|
|
|
|
.json-input {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.factorio-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* data-mod-pack might not be present, but we need the specificity to win over it if it is */
|
|
.factorio-icon:is([data-mod-pack],*)[data-unknown="true"] {
|
|
background: url("./images/unknown-item.png");
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
.code > code {
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* Render codeblock with options for syntax highlighting
|
|
* https://user-images.githubusercontent.com/6792749/152066701-21420461-710b-4fae-a80a-89ef90a0b18f.png
|
|
*/
|
|
.codeblock {
|
|
background-color: black;
|
|
padding: 8px;
|
|
padding-right: 5em;
|
|
margin-bottom: 1em;
|
|
min-height: 2.5em;
|
|
line-height: 18px;
|
|
font-family: Courier;
|
|
position: relative;
|
|
}
|
|
.codeblock .highlight {
|
|
color: yellow;
|
|
}
|
|
.codeblock .copy-button {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
|
|
|
|
.ant-descriptions-bordered.borderless > .ant-descriptions-view {
|
|
border: none;
|
|
}
|
|
|
|
div.ant-table tr.no-expanded-padding > td,
|
|
div.ant-table.ant-table-small .ant-table-tbody > tr.no-expanded-padding > td {
|
|
padding: 0;
|
|
}
|
|
|
|
.ant-form-item.changed,
|
|
input.ant-input.changed,
|
|
textarea.ant-input.changed,
|
|
tr.ant-table-row.changed > td {
|
|
background: #2a1912;
|
|
}
|
|
|
|
.ant-table-tbody > tr.ant-table-row.changed:hover > td,
|
|
.ant-table-tbody > tr.changed > td.ant-table-cell-row-hover
|
|
tr.ant-table-row.deleted > td {
|
|
background: #3a2922;
|
|
}
|
|
|
|
tr.ant-table-row.deleted {
|
|
color: rgba(255, 255, 255, 0.45);
|
|
background: #340c08;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.ant-table-tbody > tr.ant-table-row.deleted:hover > td,
|
|
.ant-table-tbody > tr.deleted > td.ant-table-cell-row-hover
|
|
tr.ant-table-row.deleted {
|
|
background: #441c18;
|
|
}
|
|
|
|
.sticky-notice {
|
|
position: sticky;
|
|
inset: auto auto 24px auto;
|
|
background: #1f1f1f;
|
|
padding: 24px;
|
|
width: auto;
|
|
margin: 16px auto 0;
|
|
box-shadow:
|
|
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
border-radius: 8px;
|
|
max-width: 384px;
|
|
}
|