From f03689bc81b59c0ae66a5818915a4489bac6f1f8 Mon Sep 17 00:00:00 2001 From: Christopher Serr Date: Mon, 31 Mar 2025 20:42:11 +0200 Subject: [PATCH] Convert Everything to CSS Modules (#1032) This converts the remainder of the CSS files to CSS modules. The following are not converted: 1. `variables.scss`: I'm not entirely sure if variables can be converted to CSS modules. The documentation states you might need PostCSS for it. However, we probably may want to look into CSS variables anyway. So this would be done in a subsequent PR. 2. `main.scss`: This declares global styles. I'm not sure if it's possible to convert this as this is needed from the very beginning, before any React is even loaded. --- src/api/LiveSplitServer.ts | 2 +- src/css/About.module.scss | 14 +- src/css/ButtonGroup.module.scss | 45 ++ src/css/Dialog.module.scss | 2 +- src/css/Font.scss | 20 - src/css/Layout.module.scss | 2 - src/css/LayoutEditor.module.scss | 69 ++++ src/css/LayoutEditor.scss | 77 ---- src/css/Leaderboard.module.scss | 106 +++++ src/css/LiveSplit.module.scss | 33 ++ src/css/LiveSplit.scss | 36 -- ...scss => LiveSplitServerButton.module.scss} | 2 +- .../{Markdown.scss => Markdown.module.scss} | 28 +- src/css/RunEditor.module.scss | 267 ++++++++++++ src/css/RunEditor.scss | 384 ------------------ src/css/SettingsEditor.scss | 16 - src/css/Sidebar.module.scss | 50 +++ src/css/Sidebar.scss | 105 ----- src/css/SplitsSelection.module.scss | 115 ++++++ src/css/SplitsSelection.scss | 118 ------ src/css/Table.module.scss | 163 ++++++++ src/css/Table.scss | 176 -------- src/css/TimerView.module.scss | 82 ++++ src/css/TimerView.scss | 46 --- src/css/Toast.module.scss | 28 ++ src/css/Toggle.scss | 28 -- src/css/Tooltip.module.scss | 45 ++ src/css/Tooltip.scss | 45 -- src/css/browser_source.scss | 17 - src/css/main.scss | 89 +--- src/css/mobile.scss | 5 - src/index.html | 2 +- src/index.tsx | 1 + src/ui/Embed.tsx | 9 +- src/ui/LiveSplit.tsx | 31 +- src/ui/components/Settings/Accuracy.tsx | 4 +- src/ui/components/Settings/Alignment.tsx | 4 +- src/ui/components/Settings/Color.tsx | 8 +- src/ui/components/Settings/Column.tsx | 10 +- src/ui/components/Settings/DigitsFormat.tsx | 4 +- src/ui/components/Settings/Font.tsx | 12 +- src/ui/components/Settings/Gradient.tsx | 56 ++- .../{ => Settings}/HotkeyButton.tsx | 11 +- .../components/Settings/LayoutBackground.tsx | 23 +- .../components/Settings/LayoutDirection.tsx | 4 +- .../Settings/ServerConnectionButton.tsx | 7 +- src/ui/components/Settings/String.tsx | 38 +- src/ui/components/Settings/TimingMethod.tsx | 10 +- src/ui/components/Settings/index.tsx | 33 +- src/ui/views/About.tsx | 8 +- src/ui/views/LayoutEditor.tsx | 137 ++++--- src/ui/views/LayoutView.tsx | 10 +- src/ui/views/MainSettings.tsx | 14 +- src/ui/views/RunEditor.tsx | 258 ++++++------ src/ui/views/SplitsSelection.tsx | 50 ++- src/ui/views/TimerView.tsx | 50 +-- src/{ui => util}/LSOCommandSink.ts | 4 +- src/util/Markdown.tsx | 4 +- src/util/OptionUtil.tsx | 8 +- webpack.config.js | 233 +++++++---- 60 files changed, 1657 insertions(+), 1601 deletions(-) create mode 100644 src/css/ButtonGroup.module.scss delete mode 100644 src/css/Font.scss create mode 100644 src/css/LayoutEditor.module.scss delete mode 100644 src/css/LayoutEditor.scss create mode 100644 src/css/Leaderboard.module.scss create mode 100644 src/css/LiveSplit.module.scss delete mode 100644 src/css/LiveSplit.scss rename src/css/{LiveSplitServerButton.scss => LiveSplitServerButton.module.scss} (86%) rename src/css/{Markdown.scss => Markdown.module.scss} (64%) create mode 100644 src/css/RunEditor.module.scss delete mode 100644 src/css/RunEditor.scss delete mode 100644 src/css/SettingsEditor.scss create mode 100644 src/css/Sidebar.module.scss delete mode 100644 src/css/Sidebar.scss create mode 100644 src/css/SplitsSelection.module.scss delete mode 100644 src/css/SplitsSelection.scss create mode 100644 src/css/Table.module.scss delete mode 100644 src/css/Table.scss create mode 100644 src/css/TimerView.module.scss delete mode 100644 src/css/TimerView.scss create mode 100644 src/css/Toast.module.scss delete mode 100644 src/css/Toggle.scss create mode 100644 src/css/Tooltip.module.scss delete mode 100644 src/css/Tooltip.scss delete mode 100644 src/css/browser_source.scss delete mode 100644 src/css/mobile.scss rename src/ui/components/{ => Settings}/HotkeyButton.tsx (93%) rename src/{ui => util}/LSOCommandSink.ts (99%) diff --git a/src/api/LiveSplitServer.ts b/src/api/LiveSplitServer.ts index f5b66b4..9623178 100644 --- a/src/api/LiveSplitServer.ts +++ b/src/api/LiveSplitServer.ts @@ -1,5 +1,5 @@ import { toast } from "react-toastify"; -import { LSOCommandSink } from "../ui/LSOCommandSink"; +import { LSOCommandSink } from "../util/LSOCommandSink"; import { ServerProtocol } from "../livesplit-core/livesplit_core"; import { Event } from "../livesplit-core"; diff --git a/src/css/About.module.scss b/src/css/About.module.scss index 343ec18..6d81313 100644 --- a/src/css/About.module.scss +++ b/src/css/About.module.scss @@ -4,7 +4,6 @@ $icon-size: 40px; $title-font-size: 40px; $build-version-font-size: 12px; -$link-color: #56b0ff; .about { max-width: 700px; @@ -24,22 +23,18 @@ $link-color: #56b0ff; margin-bottom: variables.$ui-large-margin; } - a { - color: $link-color; - } - @include mobile.mobile { box-sizing: border-box; } } -.livesplitTitle { +.liveSplitTitle { display: flex; align-items: center; gap: variables.$ui-margin; } -.livesplitIcon { +.liveSplitIcon { height: $icon-size; } @@ -55,8 +50,9 @@ $link-color: #56b0ff; .changelog { margin-left: variables.$ui-large-margin; - >div { - margin: variables.$ui-large-margin 0 variables.$ui-large-margin variables.$ui-large-margin; + > div { + margin: variables.$ui-large-margin 0 variables.$ui-large-margin + variables.$ui-large-margin; } } diff --git a/src/css/ButtonGroup.module.scss b/src/css/ButtonGroup.module.scss new file mode 100644 index 0000000..f0ca002 --- /dev/null +++ b/src/css/ButtonGroup.module.scss @@ -0,0 +1,45 @@ +@use "variables.icss"; + +// FIXME: This should be a component. +.group { + display: flex; + + > * { + font-size: 18px; + border-radius: 0; + } + + > :first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + > :last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + + .pressed, + .pressed:hover { + background: variables.$button-active-color; + } + + .pressed.disabled { + background: variables.$button-disabled-color; + color: variables.$button-disabled-text-color; + cursor: default; + } +} + +.tabBar { + composes: group; + display: flex; + + > button { + font-size: 15px; + min-height: 30px; + border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; + border-bottom: 0; + } +} diff --git a/src/css/Dialog.module.scss b/src/css/Dialog.module.scss index ff7b71b..e07556a 100644 --- a/src/css/Dialog.module.scss +++ b/src/css/Dialog.module.scss @@ -31,7 +31,7 @@ dialog { font-size: larger; } - >* { + > * { margin: 0; } diff --git a/src/css/Font.scss b/src/css/Font.scss deleted file mode 100644 index c8bbd55..0000000 --- a/src/css/Font.scss +++ /dev/null @@ -1,20 +0,0 @@ -.text-font { - font-family: var(--text-font-family); - font-style: var(--text-font-style); - font-weight: var(--text-font-weight); - font-stretch: var(--text-font-stretch); -} - -.times-font { - font-family: var(--times-font-family); - font-style: var(--times-font-style); - font-weight: var(--times-font-weight); - font-stretch: var(--times-font-stretch); -} - -.timer-font { - font-family: var(--timer-font-family); - font-style: var(--timer-font-style); - font-weight: var(--timer-font-weight); - font-stretch: var(--timer-font-stretch); -} diff --git a/src/css/Layout.module.scss b/src/css/Layout.module.scss index 2f475b6..e2a3544 100644 --- a/src/css/Layout.module.scss +++ b/src/css/Layout.module.scss @@ -1,5 +1,3 @@ -@use "Font"; - .resizableLayout { position: absolute; top: 0; diff --git a/src/css/LayoutEditor.module.scss b/src/css/LayoutEditor.module.scss new file mode 100644 index 0000000..1c5fec6 --- /dev/null +++ b/src/css/LayoutEditor.module.scss @@ -0,0 +1,69 @@ +@use "mobile.module.scss"; +@use "variables.icss"; + +.layoutEditorOuter { + display: inline-flex; + + @include mobile.mobile { + flex-wrap: wrap; + + .layoutEditorInnerContainer { + width: 100%; + } + } +} + +.layoutEditorInner { + width: variables.$settings-table-width; + display: inline-flex; + margin-bottom: variables.$ui-large-margin; + + table { + width: 100%; + } + + @include mobile.mobile { + flex-wrap: wrap; + width: 100%; + margin-bottom: 0; + } +} + +.btnGroup { + display: flex; + flex-direction: column; + gap: variables.$ui-margin; + + button { + width: 40px; + font-size: 15px; + } + + @include mobile.mobile { + flex-direction: row; + margin: variables.$ui-large-margin; + } +} + +.layoutEditorComponentList { + composes: table from "Table.module.scss"; + margin-left: variables.$ui-large-margin; + + @include mobile.mobile { + margin-left: 0; + margin-bottom: variables.$ui-large-margin; + } +} + +.layoutEditorComponent { + cursor: pointer; +} + +.layoutContainer { + margin-left: variables.$ui-large-margin; + + @include mobile.mobile { + margin-left: 0; + margin-top: variables.$ui-large-margin; + } +} diff --git a/src/css/LayoutEditor.scss b/src/css/LayoutEditor.scss deleted file mode 100644 index 12b5a65..0000000 --- a/src/css/LayoutEditor.scss +++ /dev/null @@ -1,77 +0,0 @@ -@use "mobile"; -@use "Table"; -@use "Toggle"; -@use "variables.icss"; - -.layout-editor-outer { - display: inline-flex; - - @include Table.table; - @include Toggle.toggle; - - .layout-editor-inner { - width: variables.$settings-table-width; - display: inline-flex; - margin-bottom: variables.$ui-large-margin; - - table { - width: 100%; - } - - .btn-group { - display: flex; - flex-direction: column; - gap: variables.$ui-margin; - - button { - width: 40px; - font-size: 15px; - } - - @include mobile.mobile { - flex-direction: row; - margin: variables.$ui-large-margin; - } - } - - @include mobile.mobile { - flex-wrap: wrap; - width: 100%; - margin-bottom: 0; - } - } - - .layout-editor-component-list { - margin-left: variables.$ui-large-margin; - - @include mobile.mobile { - margin-left: 0; - margin-bottom: variables.$ui-large-margin; - } - } - - .layout-editor-component { - cursor: pointer; - } - - .layout-container { - margin-left: variables.$ui-large-margin; - - @include mobile.mobile { - margin-left: 0; - margin-top: variables.$ui-large-margin; - } - } - - @include mobile.mobile { - flex-wrap: wrap; - - .layout-editor-inner-container { - width: 100%; - } - - .layout-editor-tabs button { - margin-top: 0; - } - } -} diff --git a/src/css/Leaderboard.module.scss b/src/css/Leaderboard.module.scss new file mode 100644 index 0000000..0c75731 --- /dev/null +++ b/src/css/Leaderboard.module.scss @@ -0,0 +1,106 @@ +@use "sass:math"; + +@use "mobile.module.scss"; +@use "variables.icss"; + +$small-font-size: 13px; + +.leaderboardTable { + composes: table from "Table.module.scss"; + + @include mobile.mobile { + font-size: $small-font-size; + } +} + +.leaderboardRow:hover { + background: variables.$hover-row-color !important; +} + +.leaderboardRankColumn { + width: 36px; +} + +.leaderboardTimeColumn, +.variableColumn { + width: 100px; +} + +.variableColumn { + text-align: center; +} + +.leaderboardExpandedRow { + & > td { + max-width: 0; + } + + .runMetaTable { + border-spacing: variables.$ui-margin 2px; + margin-left: -(variables.$ui-margin); + } +} + +.unregisteredUser { + font-style: italic; + color: silver; +} + +.filterTable { + composes: table from "Table.module.scss"; + width: 100%; + + td { + padding: math.div(variables.$ui-margin, 2) variables.$ui-margin; + background: variables.$light-row-color; + } + + tr:first-child > td { + padding-top: variables.$ui-margin; + } + + tr:last-child > td { + padding-bottom: variables.$ui-margin; + } + + > tbody.tableBody > tr { + background-color: variables.$light-row-color; + } + + > thead.tableHeader > tr { + background-color: variables.$header-row-color; + } + + @include mobile.mobile { + margin: 0 0 variables.$ui-margin (-(variables.$ui-margin)); + width: calc(100% + #{variables.$ui-margin}); + } +} + +.subcategoryTable { + composes: filterTable; + > tbody > tr { + border: 1px solid variables.$border-color; + text-align: center; + cursor: pointer; + + > td:hover { + background: variables.$hover-row-color; + } + } + + tr:first-child > td { + padding-top: math.div(variables.$ui-margin, 2); + } + + tr:last-child > td { + padding-bottom: math.div(variables.$ui-margin, 2); + } +} + +.selected { + composes: selected from "Table.module.scss"; + &:hover { + background: variables.$selected-row-hover-color !important; + } +} diff --git a/src/css/LiveSplit.module.scss b/src/css/LiveSplit.module.scss new file mode 100644 index 0000000..b93971d --- /dev/null +++ b/src/css/LiveSplit.module.scss @@ -0,0 +1,33 @@ +@use "mobile.module.scss"; +@use "variables.icss"; + +$sidebar-button-size: 40px; + +.openSidebarButton { + position: fixed; + bottom: variables.$ui-margin; + left: variables.$ui-margin; + z-index: 10; + font-size: 24px; + padding: 0; + width: $sidebar-button-size; + height: $sidebar-button-size; +} + +.viewContainer { + position: relative; + display: inline-block; + vertical-align: top; + min-width: calc(100% - 2 * #{variables.$main-content-margin}); + min-height: calc(100% - 2 * #{variables.$main-content-margin}); + margin: variables.$main-content-margin; + + @include mobile.mobile { + display: block; + margin: 0 0 ($sidebar-button-size + 2 * variables.$ui-margin) 0; + min-width: 100%; + min-height: calc( + 100% - #{$sidebar-button-size + 2 * variables.$ui-margin} + ); + } +} diff --git a/src/css/LiveSplit.scss b/src/css/LiveSplit.scss deleted file mode 100644 index 49df7f9..0000000 --- a/src/css/LiveSplit.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use "mobile"; -@use "Sidebar"; -@use "variables.icss"; - -$sidebar-button-size: 40px; - -.livesplit-container { - .open-sidebar-button { - position: fixed; - bottom: variables.$ui-margin; - left: variables.$ui-margin; - z-index: 10; - font-size: 24px; - padding: 0; - width: $sidebar-button-size; - height: $sidebar-button-size; - } - - .view-container { - position: relative; - display: inline-block; - vertical-align: top; - min-width: calc(100% - 2 * #{variables.$main-content-margin}); - min-height: calc(100% - 2 * #{variables.$main-content-margin}); - margin: variables.$main-content-margin; - - @include mobile.mobile { - display: block; - margin: 0 0 ($sidebar-button-size + 2 * variables.$ui-margin) 0; - min-width: 100%; - min-height: calc( - 100% - #{$sidebar-button-size + 2 * variables.$ui-margin} - ); - } - } -} diff --git a/src/css/LiveSplitServerButton.scss b/src/css/LiveSplitServerButton.module.scss similarity index 86% rename from src/css/LiveSplitServerButton.scss rename to src/css/LiveSplitServerButton.module.scss index ccf948c..55d30f2 100644 --- a/src/css/LiveSplitServerButton.scss +++ b/src/css/LiveSplitServerButton.module.scss @@ -1,6 +1,6 @@ @use "variables.icss"; -.livesplit-server-button { +.liveSplitServerButton { margin: 0; font-size: 16px; min-height: 22px; diff --git a/src/css/Markdown.scss b/src/css/Markdown.module.scss similarity index 64% rename from src/css/Markdown.scss rename to src/css/Markdown.module.scss index a16e51c..0f94ff1 100644 --- a/src/css/Markdown.scss +++ b/src/css/Markdown.module.scss @@ -1,22 +1,12 @@ @use "variables.icss"; -@mixin markdown { - .flag { - padding-right: 4px; - height: 14px; - width: 18px; - object-fit: contain; - vertical-align: middle; +.markdown { + span { + line-height: 125%; } - .markdown { - span { - line-height: 125%; - } - - img { - vertical-align: middle; - } + img { + vertical-align: middle; } code { @@ -40,3 +30,11 @@ font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } } + +.flag { + padding-right: 4px; + height: 14px; + width: 18px; + object-fit: contain; + vertical-align: middle; +} diff --git a/src/css/RunEditor.module.scss b/src/css/RunEditor.module.scss new file mode 100644 index 0000000..346fd1b --- /dev/null +++ b/src/css/RunEditor.module.scss @@ -0,0 +1,267 @@ +@use "sass:math"; + +@use "mobile.module.scss"; +@use "variables.icss"; + +$tab-bar-height: 30px; +$tab-width: 625px; +$button-width: 160px; +$segment-icon-size: 19px; + +$mobile-game-icon-size: 100px; +$small-font-size: 13px; +$small-button-padding: 1px 3px 1px 3px; + +.tableHeader { + border-bottom: solid 1px variables.$border-color; + + > tr { + display: table-row; + background: variables.$header-row-color; + + > th { + font-weight: bold; + text-align: center; + padding: math.div(variables.$ui-margin, 2) + math.div(variables.$ui-margin, 2); + display: table-cell; + + &:first-child { + padding-left: variables.$ui-margin; + } + + &:last-child { + padding-right: variables.$ui-margin; + } + + &:nth-child(1):after { + margin: 0; + margin-left: -4px; + margin-right: 7px; + } + } + } +} + +.rulesOuter { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + background-color: variables.$light-row-color; + width: $tab-width; +} + +.rulesInner { + padding-left: variables.$ui-margin; + padding-right: variables.$ui-margin; + border: 1px solid variables.$border-color; + border-collapse: collapse; +} + +.runEditorTab { + margin-left: math.div(variables.$ui-large-margin, 2); + min-width: $tab-width; + box-sizing: border-box; + + @include mobile.mobile { + width: 100%; + min-width: 0; + margin-left: 0; + } +} + +.videoOuterContainer { + width: 100%; + padding-top: calc(100% * 9 / 16); + margin-top: math.div(variables.$ui-margin, 2); + position: relative; +} + +.videoInnerContainer { + width: 100%; + height: 100%; + position: absolute; + top: 0; + + iframe { + width: 100%; + height: 100%; + } +} + +.runEditorInfo { + display: inline-flex; + align-items: flex-start; + margin-bottom: variables.$ui-large-margin - math.div( + variables.$ui-margin, + 2 + ); + + @include mobile.mobile { + margin: variables.$ui-margin 0 0 variables.$ui-margin; + } +} + +.gameIconContainer { + background-color: variables.$light-row-color; + border: 1px solid variables.$border-color; + cursor: pointer; + box-sizing: border-box; + width: $button-width; + height: $button-width; + padding: variables.$ui-margin; + + @include mobile.mobile { + width: $mobile-game-icon-size; + height: $mobile-game-icon-size; + flex-shrink: 0; + } +} + +.gameIconImage { + object-fit: contain; + width: $button-width - 2 * variables.$ui-margin; + height: $button-width - 2 * variables.$ui-margin; + + @include mobile.mobile { + width: $mobile-game-icon-size - 2 * variables.$ui-margin; + height: $mobile-game-icon-size - 2 * variables.$ui-margin; + } +} + +.runEditorInfoTable { + margin-left: variables.$ui-large-margin; + width: $tab-width; + display: flex; + flex-wrap: wrap; + + @include mobile.mobile { + width: 100%; + margin-left: variables.$ui-margin; + margin-bottom: variables.$ui-large-margin - variables.$ui-margin; + } +} + +.infoTableRow { + flex-grow: 1; + width: 100%; + display: flex; + + &:last-child .infoTableCell { + padding-bottom: 0; + + @include mobile.mobile { + padding-bottom: variables.$ui-margin; + } + } + + .infoTableCell { + padding: 0 variables.$ui-margin variables.$ui-margin 0; + flex-grow: 1; + + &:last-child { + padding-right: 0; + + @include mobile.mobile { + padding-right: variables.$ui-margin; + } + } + } + + @include mobile.mobile { + flex-wrap: wrap; + } +} + +.runEditorTable { + composes: table from "Table.module.scss"; + td { + overflow: hidden; + + > input { + width: 100%; + text-overflow: ellipsis; + + @include mobile.mobile { + font-size: $small-font-size; + } + } + } + + @include mobile.mobile { + font-size: $small-font-size; + } +} + +tbody > tr > .segmentIconContainer { + height: $segment-icon-size; + cursor: pointer; + display: flex; + justify-content: center; +} + +.bottomSection { + display: flex; + flex-wrap: wrap; +} + +.editorGroup { + @include mobile.mobile { + min-width: 100%; + margin-top: variables.$ui-large-margin - variables.$ui-margin; + } +} + +.sideButtonsOuter { + margin-bottom: variables.$ui-margin; + @include mobile.mobile { + width: 100%; + } +} + +.tabBar { + composes: tabBar from "ButtonGroup.module.scss"; + margin-left: math.div(variables.$ui-large-margin, 2); + height: $tab-bar-height; + + @include mobile.mobile { + height: inherit; + margin-left: 0; + + button { + font-size: $small-font-size; + padding: $small-button-padding; + margin-top: 0; + } + } +} + +.sideButtonsInner { + display: flex; + flex-direction: column; + gap: variables.$ui-margin; + margin-top: $tab-bar-height; + margin-right: math.div(variables.$ui-large-margin, 2); + width: $button-width; + + button { + font-size: 15px; + width: $button-width; + min-height: 30px; + + @include mobile.mobile { + width: 100%; + } + } + + @include mobile.mobile { + width: calc(100% - 2 * #{variables.$ui-margin}); + display: grid; + grid-template-columns: 1fr 1fr; + margin-top: 0; + margin-left: variables.$ui-margin; + } +} + +.bestSegmentTime { + // FIXME: important + color: hsla(50, 100%, 50%, 1) !important; +} diff --git a/src/css/RunEditor.scss b/src/css/RunEditor.scss deleted file mode 100644 index f5135b5..0000000 --- a/src/css/RunEditor.scss +++ /dev/null @@ -1,384 +0,0 @@ -@use "sass:math"; - -@use "Markdown"; -@use "mobile"; -@use "Table"; -@use "Toggle"; -@use "variables.icss"; - -$tab-bar-height: 30px; -$tab-width: 625px; -$button-width: 160px; -$segment-icon-size: 19px; - -$mobile-game-icon-size: 100px; -$small-font-size: 13px; -$small-button-padding: 1px 3px 1px 3px; - -.run-editor { - @include Markdown.markdown; - @include Table.table; - @include Toggle.toggle; - - thead.table-header { - border-bottom: solid 1px variables.$border-color; - } - - .table-header { - > tr > th { - font-weight: bold; - text-align: center; - } - - > tr > th:nth-child(1):after { - margin: 0; - margin-left: -4px; - margin-right: 7px; - } - } - - .table > .table-header > tr { - display: table-row; - background: variables.$header-row-color; - - > th { - padding: math.div(variables.$ui-margin, 2) - math.div(variables.$ui-margin, 2); - display: table-cell; - - &:first-child { - padding-left: variables.$ui-margin; - } - - &:last-child { - padding-right: variables.$ui-margin; - } - } - } - - .run-editor-additional-info { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - background-color: variables.$light-row-color; - width: $tab-width; - - .run-editor-rules { - padding-left: variables.$ui-margin; - padding-right: variables.$ui-margin; - border: 1px solid variables.$border-color; - border-collapse: collapse; - } - } - - .run-editor-tab { - margin-left: math.div(variables.$ui-large-margin, 2); - min-width: $tab-width; - box-sizing: border-box; - - .settings-table { - width: 100%; - } - - @include mobile.mobile { - width: 100%; - min-width: 0; - margin-left: 0; - } - } - - .video-outer-container { - width: 100%; - padding-top: calc(100% * 9 / 16); - margin-top: math.div(variables.$ui-margin, 2); - position: relative; - - .video-inner-container { - width: 100%; - height: 100%; - position: absolute; - top: 0; - - iframe { - width: 100%; - height: 100%; - } - } - } - - .run-editor-info { - display: inline-flex; - align-items: flex-start; - margin-bottom: variables.$ui-large-margin - math.div( - variables.$ui-margin, - 2 - ); - - .game-icon-container { - background-color: variables.$light-row-color; - border: 1px solid variables.$border-color; - cursor: pointer; - box-sizing: border-box; - width: $button-width; - height: $button-width; - padding: variables.$ui-margin; - - .game-icon-image { - object-fit: contain; - width: $button-width - 2 * variables.$ui-margin; - height: $button-width - 2 * variables.$ui-margin; - - @include mobile.mobile { - width: $mobile-game-icon-size - 2 * variables.$ui-margin; - height: $mobile-game-icon-size - 2 * variables.$ui-margin; - } - } - - @include mobile.mobile { - width: $mobile-game-icon-size; - height: $mobile-game-icon-size; - flex-shrink: 0; - } - } - - .run-editor-info-table { - margin-left: variables.$ui-large-margin; - width: $tab-width; - display: flex; - flex-wrap: wrap; - - .info-table-row { - flex-grow: 1; - width: 100%; - display: flex; - - .info-table-cell { - padding: 0 variables.$ui-margin variables.$ui-margin 0; - flex-grow: 1; - } - - .info-table-cell:last-child { - padding-right: 0; - - @include mobile.mobile { - padding-right: variables.$ui-margin; - } - } - - @include mobile.mobile { - flex-wrap: wrap; - } - } - - .info-table-row:last-child .info-table-cell { - padding-bottom: 0; - - @include mobile.mobile { - padding-bottom: variables.$ui-margin; - } - } - - @include mobile.mobile { - width: 100%; - margin-left: variables.$ui-margin; - margin-bottom: variables.$ui-large-margin - variables.$ui-margin; - } - } - - @include mobile.mobile { - margin: variables.$ui-margin 0 0 variables.$ui-margin; - } - } - - table.run-editor-table { - .number { - font-family: inherit; - } - - td { - overflow: hidden; - - > input { - width: 100%; - text-overflow: ellipsis; - - @include mobile.mobile { - font-size: $small-font-size; - } - } - - &.segment-icon-container { - height: $segment-icon-size; - cursor: pointer; - display: flex; - justify-content: center; - } - } - - @include mobile.mobile { - font-size: $small-font-size; - } - } - - .bottom-section { - display: flex; - flex-wrap: wrap; - - .editor-group { - .tab-bar { - margin-left: math.div(variables.$ui-large-margin, 2); - height: $tab-bar-height; - - @include mobile.mobile { - height: inherit; - margin-left: 0; - - button { - font-size: $small-font-size; - padding: $small-button-padding; - margin-top: 0; - } - } - } - - @include mobile.mobile { - min-width: 100%; - margin-top: variables.$ui-large-margin - variables.$ui-margin; - } - } - - .side-buttons { - margin-bottom: variables.$ui-margin; - @include mobile.mobile { - width: 100%; - } - } - } - - .btn-group { - display: flex; - flex-direction: column; - gap: variables.$ui-margin; - margin-top: $tab-bar-height; - margin-right: math.div(variables.$ui-large-margin, 2); - width: $button-width; - - button { - font-size: 15px; - width: $button-width; - min-height: 30px; - - @include mobile.mobile { - width: 100%; - } - } - - @include mobile.mobile { - width: calc(100% - 2 * #{variables.$ui-margin}); - display: grid; - grid-template-columns: 1fr 1fr; - margin-top: 0; - margin-left: variables.$ui-margin; - } - } - - .best-segment-time { - color: hsla(50, 100%, 50%, 1); - } - - .leaderboard-table { - .leaderboard-row:hover { - background: variables.$hover-row-color !important; - } - - .leaderboard-rank-column, - .splits-download-column { - width: 36px; - } - - .leaderboard-time-column, - .variable-column { - width: 100px; - } - - .variable-column, - .splits-download-column { - text-align: center; - } - - .leaderboard-expanded-row { - & > td { - max-width: 0; - } - - .run-meta-table { - border-spacing: variables.$ui-margin 2px; - margin-left: -(variables.$ui-margin); - } - } - - .unregistered-user { - font-style: italic; - color: silver; - } - - @include mobile.mobile { - font-size: $small-font-size; - } - } - - .filter-table { - width: 100%; - - &.table { - td { - padding: math.div(variables.$ui-margin, 2) variables.$ui-margin; - } - - tr:first-child > td { - padding-top: variables.$ui-margin; - } - - tr:last-child > td { - padding-bottom: variables.$ui-margin; - } - - > tbody.table-body > tr { - background-color: variables.$light-row-color; - } - - > thead.table-header > tr { - background-color: variables.$header-row-color; - } - - &.subcategory-table { - > tbody > tr { - border: 1px solid variables.$border-color; - text-align: center; - cursor: pointer; - } - - tr:first-child > td { - padding-top: math.div(variables.$ui-margin, 2); - } - - tr:last-child > td { - padding-bottom: math.div(variables.$ui-margin, 2); - } - - > tbody.table-body > tr { - > td:hover { - background: variables.$hover-row-color; - } - - > td.selected:hover { - background: variables.$selected-row-hover-color !important; - } - } - } - } - - @include mobile.mobile { - margin: 0 0 variables.$ui-margin (-(variables.$ui-margin)); - width: calc(100% + #{variables.$ui-margin}); - } - } -} diff --git a/src/css/SettingsEditor.scss b/src/css/SettingsEditor.scss deleted file mode 100644 index f8f63bd..0000000 --- a/src/css/SettingsEditor.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "mobile"; -@use "Table"; - -.settings-editor { - @include Table.table; - - @include mobile.mobile { - .settings-table { - width: 100%; - - & > tbody > tr > td:nth-child(1) { - width: 50%; - } - } - } -} diff --git a/src/css/Sidebar.module.scss b/src/css/Sidebar.module.scss new file mode 100644 index 0000000..91dd556 --- /dev/null +++ b/src/css/Sidebar.module.scss @@ -0,0 +1,50 @@ +@use "sass:math"; + +@use "variables.icss"; + +$h1-font-size: 24px; +$h2-font-size: 22px; + +.sidebarOverlay { + z-index: 3 !important; +} + +.sidebar { + display: flex; + flex-direction: column; + gap: variables.$ui-margin; + background: variables.$sidebar-background-color; + padding: variables.$ui-margin; + width: 250px; + z-index: 4 !important; + + hr { + border-color: variables.$border-color; + margin: variables.$ui-margin 0; + } + + h1, + h2 { + text-align: center; + margin: 0; + } + + h1 { + font-size: $h1-font-size; + margin-top: variables.$ui-large-margin; + } + + h2 { + font-size: $h2-font-size; + } + + button { + width: 100%; + } +} + +.modifiedIcon { + position: absolute; + padding-bottom: 10px; + padding-left: 5px; +} diff --git a/src/css/Sidebar.scss b/src/css/Sidebar.scss deleted file mode 100644 index 317836b..0000000 --- a/src/css/Sidebar.scss +++ /dev/null @@ -1,105 +0,0 @@ -@use "sass:math"; - -@use "Toggle"; -@use "variables.icss"; - -$h1-font-size: 24px; -$h2-font-size: 22px; - -.sidebar-overlay { - z-index: 3 !important; -} - -.sidebar { - display: flex; - flex-direction: column; - gap: variables.$ui-margin; - background: variables.$sidebar-background-color; - padding: variables.$ui-margin; - width: 250px; - z-index: 4 !important; - - @include Toggle.toggle; - - > div > div.small { - display: flex; - - > button { - width: 50%; - font-size: 18px; - } - } - - .sidebar-buttons { - display: contents; - hr { - border-color: variables.$border-color; - margin: variables.$ui-margin 0; - - &.livesplit-title-separator { - margin-top: 0; - } - } - - h1, - h2 { - text-align: center; - margin: 0; - } - - h1 { - font-size: $h1-font-size; - margin-top: variables.$ui-large-margin; - } - - h2 { - font-size: $h2-font-size; - } - - button { - width: 100%; - } - - .livesplit-title { - display: flex; - justify-content: center; - align-items: center; - gap: variables.$ui-margin; - margin-top: variables.$ui-margin; - - h1 { - margin: 0; - } - - .livesplit-icon { - height: 40px; - - img { - height: 100%; - } - } - } - - .modified-icon { - position: absolute; - padding-bottom: 10px; - padding-left: 5px; - } - } - - .choose-comparison { - padding: 0 6px 0 6px; - width: 100%; - height: 40px; - appearance: none; - background: variables.$button-middle-color; - border: 1px solid variables.$border-color; - border-radius: 5px; - color: white; - cursor: pointer; - font-family: "fira", sans-serif; - font-size: 20px; - text-align: center; - text-overflow: ellipsis; - } -} diff --git a/src/css/SplitsSelection.module.scss b/src/css/SplitsSelection.module.scss new file mode 100644 index 0000000..ecd1ec7 --- /dev/null +++ b/src/css/SplitsSelection.module.scss @@ -0,0 +1,115 @@ +@use "sass:math"; + +@use "mobile.module.scss"; +@use "variables.icss"; + +$loading-text-font-size: 40px; +$splits-row-width: 500px; +$splits-row-height: 40px; + +.loading { + display: flex; + width: fit-content; + font-size: $loading-text-font-size; +} + +.loadingText { + margin-left: variables.$ui-margin; +} + +.splitsSelectionContainer { + display: flex; + flex-wrap: nowrap; + flex-direction: column; +} + +.mainActions { + display: flex; + justify-content: flex-start; + + button { + margin-top: 0; + margin-bottom: math.div(variables.$ui-large-margin, 2); + margin-right: variables.$ui-margin; + } + + @include mobile.mobile { + margin-top: variables.$ui-margin; + margin-left: variables.$ui-margin; + } +} + +.splitsTable { + background-color: variables.$dark-row-color; + border: 1px solid variables.$border-color; + margin: math.div(variables.$ui-large-margin, 2) 0; + width: fit-content; + + @include mobile.mobile { + width: 100%; + box-sizing: border-box; + } +} + +.splitsRow { + display: flex; + gap: variables.$ui-large-margin; + flex-wrap: nowrap; + align-items: center; + padding: variables.$ui-margin; + height: $splits-row-height; + width: $splits-row-width; + + &:nth-of-type(odd) { + background-color: variables.$light-row-color; + } + + &.selected { + background: variables.$selected-row-color; + } + + &.selected .splitsRowButtons button { + opacity: 70%; + } + + @include mobile.mobile { + width: 100%; + box-sizing: border-box; + height: $splits-row-height + 2 * variables.$ui-margin; + } +} + +.splitsRowButtons { + display: contents; + flex-shrink: 0; + margin-left: variables.$ui-large-margin; + + button { + background: transparent; + border: 0; + opacity: 50%; + margin: 0; + transition: 0.3s; + color: white; + padding: 0; + + &:hover { + opacity: 100%; + } + } +} + +.splitsTitleText { + flex-grow: 1; + overflow: hidden; +} + +.splitsText { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + &.splitsGame { + margin-bottom: variables.$ui-margin; + } +} diff --git a/src/css/SplitsSelection.scss b/src/css/SplitsSelection.scss deleted file mode 100644 index d9a4904..0000000 --- a/src/css/SplitsSelection.scss +++ /dev/null @@ -1,118 +0,0 @@ -@use "sass:math"; - -@use "mobile"; -@use "variables.icss"; -@use "Table"; - -$loading-text-font-size: 40px; -$splits-row-width: 500px; -$splits-row-height: 40px; - -.splits-selection { - .loading { - display: flex; - width: fit-content; - font-size: $loading-text-font-size; - - .loading-text { - margin-left: variables.$ui-margin; - } - } - - .splits-selection-container { - display: flex; - flex-wrap: nowrap; - flex-direction: column; - - .main-actions { - display: flex; - justify-content: flex-start; - - button { - margin-top: 0; - margin-bottom: math.div(variables.$ui-large-margin, 2); - margin-right: variables.$ui-margin; - } - - @include mobile.mobile { - margin-top: variables.$ui-margin; - margin-left: variables.$ui-margin; - } - } - - .splits-table { - background-color: variables.$dark-row-color; - border: 1px solid variables.$border-color; - margin: math.div(variables.$ui-large-margin, 2) 0; - width: fit-content; - - .splits-row { - display: flex; - gap: variables.$ui-large-margin; - flex-wrap: nowrap; - align-items: center; - padding: variables.$ui-margin; - height: $splits-row-height; - width: $splits-row-width; - - &:nth-of-type(odd) { - background-color: variables.$light-row-color; - } - - &.selected { - background: variables.$selected-row-color; - } - - .splits-title-text { - flex-grow: 1; - overflow: hidden; - - .splits-text { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - &.splits-game { - margin-bottom: variables.$ui-margin; - } - } - } - - &.selected .splits-row-buttons button { - opacity: 70%; - } - - .splits-row-buttons { - display: contents; - flex-shrink: 0; - margin-left: variables.$ui-large-margin; - - button { - background: transparent; - border: 0; - opacity: 50%; - margin: 0; - transition: 0.3s; - color: white; - padding: 0; - - &:hover { - opacity: 100%; - } - } - } - - @include mobile.mobile { - width: 100%; - box-sizing: border-box; - height: $splits-row-height + 2 * variables.$ui-margin; - } - } - - @include mobile.mobile { - width: 100%; - box-sizing: border-box; - } - } - } -} diff --git a/src/css/Table.module.scss b/src/css/Table.module.scss new file mode 100644 index 0000000..fc31680 --- /dev/null +++ b/src/css/Table.module.scss @@ -0,0 +1,163 @@ +@use "sass:math"; + +@use "mobile.module.scss"; +@use "variables.icss"; + +.table { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + display: table; + border: 1px solid variables.$border-color; + border-collapse: collapse; + + > tbody { + > tr.explicitEven, + > :nth-child(even) { + display: table-row; + background: variables.$dark-row-color; + } + + > tr.explicitOdd, + > :nth-child(odd) { + display: table-row; + background: variables.$light-row-color; + } + } +} + +.tableBody { + display: table-row-group; + + > tr { + display: table-row; + background: variables.$dark-row-color; + + > td { + padding: math.div(variables.$ui-margin, 2) + math.div(variables.$ui-margin, 2); + display: table-cell; + + &:first-child { + padding-left: variables.$ui-margin; + } + + &:last-child { + padding-right: variables.$ui-margin; + } + } + } + + tr > td > input { + margin-right: -40px; + + &:focus { + outline: 0; + } + } + + input.textBox { + font-family: inherit; + background: transparent; + color: white; + text-overflow: ellipsis; + font-size: 15px; + border: none; + border-bottom: 1px solid hsla(0, 0%, 100%, 0.25); + } + + input[Type="text"] { + font-family: inherit; + } + + select { + background: variables.$dark-row-color + url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,4 2,4 5,7 8,4 10,4 5,9' fill='%23fff'/%3E%3C/svg%3E") + no-repeat right 4px center; + font-size: 15px; + border: 1px solid variables.$border-color; + color: white; + text-overflow: ellipsis; + font-family: inherit; + padding-left: 4px; + padding-right: 20px; + border-radius: 0; + appearance: none; + } +} + +.number { + text-align: right; + font-weight: bold; + font-variant-numeric: tabular-nums; +} + +.selected { + background: variables.$selected-row-color !important; +} + +.settingsTable { + width: variables.$settings-table-width; + + tr { + height: 30px; + + td:first-child { + width: 100%; + } + + .settingsValueBox { + width: math.div(variables.$settings-table-width, 2) - 2 * + variables.$ui-margin; + display: grid; + column-gap: variables.$ui-margin; + row-gap: variables.$ui-margin; + grid-template-columns: 100%; + + input { + height: variables.$settings-row-height; + box-sizing: border-box; + + &:focus { + outline: 0; + } + } + + select { + height: variables.$settings-row-height; + min-width: 80px; + } + + &.optionalValue { + grid-template-columns: max-content 1fr; + } + + &.twoColors { + grid-template-columns: 1fr 45px 45px; + } + + &.oneColor { + grid-template-columns: 1fr 45px; + } + + &.removableString { + grid-template-columns: 1fr 20px; + + .trash { + // FIXME: Deduplicate + cursor: pointer; + } + + button { + margin: 0; + font-size: 12px; + min-height: variables.$settings-row-height; + padding-top: 0; + padding-bottom: 0; + } + } + } + } + + @include mobile.mobile { + width: 100%; + } +} diff --git a/src/css/Table.scss b/src/css/Table.scss deleted file mode 100644 index 4654148..0000000 --- a/src/css/Table.scss +++ /dev/null @@ -1,176 +0,0 @@ -@use "sass:math"; - -@use "mobile"; -@use "variables.icss"; - -@mixin table { - .table { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - display: table; - border: 1px solid variables.$border-color; - border-collapse: collapse; - - .table-row-even { - display: table-row; - background: variables.$dark-row-color !important; - } - - .table-row-odd { - display: table-row; - background: variables.$light-row-color !important; - } - } - - .table-body { - display: table-row-group; - - > tr { - display: table-row; - background: variables.$dark-row-color; - - > td { - padding: math.div(variables.$ui-margin, 2) - math.div(variables.$ui-margin, 2); - display: table-cell; - - &:first-child { - padding-left: variables.$ui-margin; - } - - &:last-child { - padding-right: variables.$ui-margin; - } - } - - &:nth-of-type(odd) { - background: variables.$light-row-color; - } - } - } - - .number { - text-align: right; - font-weight: bold; - font-variant-numeric: tabular-nums; - } - - .selected { - background: variables.$selected-row-color !important; - } - - .tab-bar { - display: flex; - - > button { - font-size: 15px; - min-height: 30px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-bottom: 0; - } - } - - tr > td > input { - margin-right: -40px; - - &:focus { - outline: 0; - } - } - - input.text-box { - font-family: inherit; - background: transparent; - color: white; - text-overflow: ellipsis; - font-size: 15px; - border: none; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.25); - } - - input[Type="text"] { - font-family: inherit; - } - - select { - background: variables.$dark-row-color - url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,4 2,4 5,7 8,4 10,4 5,9' fill='%23fff'/%3E%3C/svg%3E") - no-repeat right 4px center; - font-size: 15px; - border: 1px solid variables.$border-color; - color: white; - text-overflow: ellipsis; - font-family: inherit; - padding-left: 4px; - padding-right: 20px; - border-radius: 0; - appearance: none; - } - - .settings-table { - width: variables.$settings-table-width; - - tr { - height: 30px; - - td:first-child { - width: 100%; - } - - .settings-value-box { - width: math.div(variables.$settings-table-width, 2) - 2 * - variables.$ui-margin; - display: grid; - column-gap: variables.$ui-margin; - row-gap: variables.$ui-margin; - grid-template-columns: 100%; - - input { - height: variables.$settings-row-height; - box-sizing: border-box; - - &:focus { - outline: 0; - } - } - - select { - height: variables.$settings-row-height; - min-width: 80px; - } - - &.optional-value { - grid-template-columns: max-content 1fr; - } - - &.two-colors { - grid-template-columns: 1fr 45px 45px; - } - - &.one-color { - grid-template-columns: 1fr 45px; - } - - &.removable-string { - grid-template-columns: 1fr 20px; - - .trash { - cursor: pointer; - } - - button { - margin: 0; - font-size: 12px; - min-height: variables.$settings-row-height; - padding-top: 0; - padding-bottom: 0; - } - } - } - } - - @include mobile.mobile { - width: 100%; - } - } -} diff --git a/src/css/TimerView.module.scss b/src/css/TimerView.module.scss new file mode 100644 index 0000000..43b5e10 --- /dev/null +++ b/src/css/TimerView.module.scss @@ -0,0 +1,82 @@ +@use "sass:math"; + +@use "mobile.module.scss"; +@use "variables.icss"; + +.buttons { + margin-top: variables.$ui-large-margin - math.div(variables.$ui-margin, 2); + max-width: 2 * variables.$button-max-width + + math.div(variables.$ui-margin, 2); + + @include mobile.mobile { + padding: 0 variables.$ui-margin; + width: calc(100% - #{2 * variables.$ui-margin}) !important; + } +} + +.controlButtons { + display: grid; + grid-template-columns: 1fr 1fr; + gap: variables.$ui-margin; + + button { + width: 100%; + } +} + +.manualGameTime { + width: calc(100% - math.div(variables.$ui-margin, 2)); + color: variables.$button-text-color; + background-color: transparent; + border: none; + border-bottom: 2px solid #aaa; + text-align: right; + font-family: "fira", sans-serif; + font-weight: bold; + font-size: 25px; + height: variables.$manual-game-time-height; + + &:focus { + outline: none; + } + + &::placeholder { + font-size: 15px; + } +} + +.liveSplitTitle { + display: flex; + justify-content: center; + align-items: center; + gap: variables.$ui-margin; + margin-top: variables.$ui-margin; + + h1 { + margin: 0 !important; + } + + + hr { + margin-top: 0 !important; + } +} + +.liveSplitIcon { + height: 40px; +} + +.chooseComparison { + padding: 0 6px 0 6px; + width: 100%; + height: 40px; + appearance: none; + background: variables.$button-middle-color; + border: 1px solid variables.$border-color; + border-radius: 5px; + color: white; + cursor: pointer; + font-family: "fira", sans-serif; + font-size: 20px; + text-align: center; + text-overflow: ellipsis; +} diff --git a/src/css/TimerView.scss b/src/css/TimerView.scss deleted file mode 100644 index 35502e2..0000000 --- a/src/css/TimerView.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use "sass:math"; - -@use "mobile"; -@use "variables.icss"; - -.buttons { - margin-top: variables.$ui-large-margin - math.div(variables.$ui-margin, 2); - max-width: 2 * variables.$button-max-width + - math.div(variables.$ui-margin, 2); - - .control-buttons { - display: grid; - grid-template-columns: 1fr 1fr; - gap: variables.$ui-margin; - - button { - width: 100%; - } - } - - .manual-game-time { - width: calc(100% - math.div(variables.$ui-margin, 2)); - color: variables.$button-text-color; - background-color: transparent; - border: none; - border-bottom: 2px solid #aaa; - text-align: right; - font-family: "fira", sans-serif; - font-weight: bold; - font-size: 25px; - height: variables.$manual-game-time-height; - } - - .manual-game-time:focus { - outline: none; - } - - .manual-game-time::placeholder { - font-size: 15px; - } - - @include mobile.mobile { - padding: 0 variables.$ui-margin; - width: calc(100% - #{2 * variables.$ui-margin}) !important; - } -} diff --git a/src/css/Toast.module.scss b/src/css/Toast.module.scss new file mode 100644 index 0000000..a7267e2 --- /dev/null +++ b/src/css/Toast.module.scss @@ -0,0 +1,28 @@ +:global(.Toastify) { + .toastClass { + font-family: "fira", sans-serif; + background: rgba(28, 28, 28, 0.8) !important; + backdrop-filter: blur(5px); + border: 2px solid rgba(255, 255, 255, 0.25) !important; + border-radius: 10px !important; + min-height: 48px !important; + padding-right: 28px; + + &.toastBug { + border-color: red !important; + + a { + color: red; + } + } + + > button { + margin-bottom: initial; + margin-top: initial; + } + } + + .toastBody { + margin: 5px 5px 5px 5px !important; + } +} diff --git a/src/css/Toggle.scss b/src/css/Toggle.scss deleted file mode 100644 index 3ef8616..0000000 --- a/src/css/Toggle.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use "variables.icss"; - -@mixin toggle { - .toggle-left { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .toggle-right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .toggle-middle { - border-radius: 0; - } - - .button-pressed, - .button-pressed:hover { - background: variables.$button-active-color; - } - - .button-pressed.disabled { - background: variables.$button-disabled-color; - color: variables.$button-disabled-text-color; - cursor: default; - } -} diff --git a/src/css/Tooltip.module.scss b/src/css/Tooltip.module.scss new file mode 100644 index 0000000..502dc1c --- /dev/null +++ b/src/css/Tooltip.module.scss @@ -0,0 +1,45 @@ +@use "mobile.module.scss"; +@use "variables.icss"; + +.tooltip { + position: relative; + + .tooltipText { + visibility: hidden; + width: 300px; + background-color: rgba(28, 28, 28, 0.8); + backdrop-filter: blur(5px); + border: 1px solid rgba(255, 255, 255, 0.25); + color: #fff; + text-align: center; + border-radius: 6px; + padding: variables.$ui-margin; + position: absolute; + z-index: 1; + bottom: calc(100% + variables.$ui-margin); + left: 50%; + margin-left: -150px; + opacity: 0; + transition: opacity 0.25s; + transition-delay: 0.25s; + text-wrap: initial; + font-weight: initial; + + @include mobile.mobile { + left: 0; + margin-left: 0; + } + } + + &:hover .tooltipText { + visibility: visible; + opacity: 1; + } + + &.contextMenuItem .tooltipText { + bottom: initial; + left: calc(100% + variables.$ui-margin); + margin-left: 0; + top: 0; + } +} diff --git a/src/css/Tooltip.scss b/src/css/Tooltip.scss deleted file mode 100644 index a4395a4..0000000 --- a/src/css/Tooltip.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use "mobile"; -@use "variables.icss"; - -.tooltip { - position: relative; -} - -.tooltip .tooltip-text { - visibility: hidden; - width: 300px; - background-color: rgba(28, 28, 28, 0.8); - backdrop-filter: blur(5px); - border: 1px solid rgba(255, 255, 255, 0.25); - color: #fff; - text-align: center; - border-radius: 6px; - padding: variables.$ui-margin; - position: absolute; - z-index: 1; - bottom: calc(100% + variables.$ui-margin); - left: 50%; - margin-left: -150px; - opacity: 0; - transition: opacity 0.25s; - transition-delay: 0.25s; - text-wrap: initial; - font-weight: initial; - - @include mobile.mobile { - left: 0; - margin-left: 0; - } -} - -.contextmenu-item.tooltip .tooltip-text { - bottom: initial; - left: calc(100% + variables.$ui-margin); - margin-left: 0; - top: 0; -} - -.tooltip:hover .tooltip-text { - visibility: visible; - opacity: 1; -} diff --git a/src/css/browser_source.scss b/src/css/browser_source.scss deleted file mode 100644 index 527f903..0000000 --- a/src/css/browser_source.scss +++ /dev/null @@ -1,17 +0,0 @@ -body.browser-source { - &, - .livesplit-container, - .buttons { - background-color: rgba(0, 0, 0, 0); - overflow: hidden !important; - } - - .sidebar { - box-shadow: none !important; - } - - .buttons, - .sidebar-button { - visibility: hidden; - } -} diff --git a/src/css/main.scss b/src/css/main.scss index 3acde7f..2875725 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,6 +1,5 @@ @use "sass:math"; -@use "browser_source"; @use "variables.icss"; @font-face { @@ -22,61 +21,15 @@ body { background: variables.$main-background-color; } -.Toastify { - .toast-class { - font-family: "fira", sans-serif; - background: rgba(28, 28, 28, 0.8) !important; - backdrop-filter: blur(5px); - border: 2px solid rgba(255, 255, 255, 0.25) !important; - border-radius: 10px !important; - min-height: 48px !important; - - &.toast-bug { - border-color: red !important; - - a { - color: red; - } - } - } -} - -.toast-body { - margin: 5px 5px 5px 5px !important; -} - -.toast-class > button { - margin-bottom: initial; - margin-top: initial; -} - -#wrapper { - transition: all 0.5s ease; -} - -td#dif { - border-right: 10px solid transparent; - text-align: right; -} - table { border-spacing: 0 2px; } -button:active, -button:active:hover { - background: variables.$button-active-color; -} - button:focus, div:focus { outline: 0; } -button:hover { - background: variables.$button-hover-color; -} - button { display: flex; align-items: center; @@ -97,28 +50,30 @@ button { font-family: "fira", sans-serif; min-height: variables.$button-height; padding: 5px variables.$ui-margin; + + &:disabled, + &:disabled:active { + background: variables.$button-disabled-color; + color: variables.$button-disabled-text-color; + cursor: default; + } + + &:hover { + background: variables.$button-hover-color; + } + + &:active, + &:active:hover { + background: variables.$button-active-color; + } } a { - color: hsla(50, 100%, 50%, 1); + color: #56b0ff; text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -button:disabled, -button:disabled:active { - background: variables.$button-disabled-color; - color: variables.$button-disabled-text-color; - cursor: default; -} - -.chrome-picker { - font-family: inherit !important; - margin-top: 5px; - margin-left: -50%; + &:hover { + text-decoration: underline; + } } /* WebKit Scrollbars */ @@ -152,8 +107,4 @@ button:disabled:active { justify-content: center; align-items: center; font-size: 50px; - - .initial-load-text { - margin-left: 10px; - } } diff --git a/src/css/mobile.scss b/src/css/mobile.scss deleted file mode 100644 index dd92f81..0000000 --- a/src/css/mobile.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin mobile { - .is-mobile & { - @content; - } -} diff --git a/src/index.html b/src/index.html index e8c46f4..17fd8bf 100644 --- a/src/index.html +++ b/src/index.html @@ -16,7 +16,7 @@
-
Loading...
+ Loading...
diff --git a/src/index.tsx b/src/index.tsx index 6e7c152..0099cc3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ import { preloadWasm } from "./livesplit-core/preload"; // FIXME: Remove the polyfill later. +// https://caniuse.com/mdn-javascript_statements_using if (typeof Symbol.dispose !== "symbol") { Object.defineProperty(Symbol, "dispose", { diff --git a/src/ui/Embed.tsx b/src/ui/Embed.tsx index e640f31..83b50b3 100644 --- a/src/ui/Embed.tsx +++ b/src/ui/Embed.tsx @@ -1,6 +1,8 @@ import * as React from "react"; import { Option } from "../util/OptionUtil"; +import * as runEditorClasses from "../css/RunEditor.module.scss"; + export function resolveEmbed(uri: string): Option { const youtube = tryYoutubeFromUri(uri); if (youtube != null) { @@ -47,14 +49,13 @@ function tryTwitchFromUri(uri: string): Option { function videoIframe(videoSource: string): React.JSX.Element { return ( -
-
+
+