From bf906ce578d8e1e0aaa16b4bed425cbba8517418 Mon Sep 17 00:00:00 2001 From: Jean Will Date: Wed, 27 Apr 2022 18:03:37 +0200 Subject: [PATCH] Add files via upload --- LSOlayout.ls1l | 156 +++++++++++++++++++++++++++++++++++++++++ style.css | 187 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 343 insertions(+) create mode 100644 LSOlayout.ls1l create mode 100644 style.css diff --git a/LSOlayout.ls1l b/LSOlayout.ls1l new file mode 100644 index 0000000..8efa54c --- /dev/null +++ b/LSOlayout.ls1l @@ -0,0 +1,156 @@ +{ + "components": [ + { + "Splits": { + "background": { + "Same": "Transparent" + }, + "visual_split_count": 20, + "split_preview_count": 0, + "show_thin_separators": false, + "separator_last_split": false, + "always_show_last_split": false, + "fill_with_blank_space": false, + "display_two_rows": false, + "current_split_gradient": "Transparent", + "split_time_accuracy": "Seconds", + "segment_time_accuracy": "Seconds", + "delta_time_accuracy": "Seconds", + "delta_drop_decimals": false, + "show_column_labels": false, + "columns": [ + { + "name": "", + "start_with": "ComparisonTime", + "update_with": "DeltaWithFallback", + "update_trigger": "Contextual", + "comparison_override": null, + "timing_method": "GameTime" + } + ] + } + }, + { + "Timer": { + "background": "Transparent", + "timing_method": "GameTime", + "height": 76, + "color_override": null, + "show_gradient": false, + "digits_format": "DoubleDigitMinutes", + "accuracy": "Seconds", + "is_segment_timer": false + } + }, + { + "SumOfBest": { + "background": "Transparent", + "display_two_rows": false, + "label_color": null, + "value_color": null, + "accuracy": "Seconds" + } + }, + { + "Text": { + "background": "Transparent", + "display_two_rows": false, + "left_center_color": null, + "right_color": null, + "text": { + "Split": [ + "PB", + "24:56" + ] + } + } + }, + { + "Text": { + "background": "Transparent", + "display_two_rows": false, + "left_center_color": null, + "right_color": null, + "text": { + "Split": [ + "WR", + "21:56" + ] + } + } + } + ], + "general": { + "direction": "Vertical", + "timer_font": null, + "times_font": null, + "text_font": null, + "background": "Transparent", + "best_segment_color": [ + 1, + 0.8333334, + 0, + 1 + ], + "ahead_gaining_time_color": [ + 0, + 0.8, + 0.21333352, + 1 + ], + "ahead_losing_time_color": [ + 0.38000003, + 0.82000005, + 0.49733347, + 1 + ], + "behind_gaining_time_color": [ + 0.82000005, + 0.38000003, + 0.38000003, + 1 + ], + "behind_losing_time_color": [ + 0.8, + 0, + 0, + 1 + ], + "not_running_color": [ + 0.67, + 0.67, + 0.67, + 1 + ], + "personal_best_color": [ + 0.08000004, + 0.64733326, + 1, + 1 + ], + "paused_color": [ + 0.48, + 0.48, + 0.48, + 1 + ], + "thin_separators_color": [ + 1, + 1, + 1, + 0.09 + ], + "separators_color": [ + 1, + 1, + 1, + 0.35 + ], + "text_color": [ + 1, + 1, + 1, + 1 + ] + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a373e2f --- /dev/null +++ b/style.css @@ -0,0 +1,187 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400'); + +:root { + --bottom: 290; + --right: 50; + --scale: 100; + --max-visible-splits: 20; + --show-sob: 1; + --show-pb: 1; + --show-wr: 1; + --appearance-duration: 20; +} + +.Toastify { + display: none; +} + +.layout-editor-inner-container+.layout-container { + display: none !important; +} + +.layout { + --total: calc(calc(var(--show-sob) + var(--show-pb)) + var(--show-wr)); + position: fixed; + bottom: calc(var(--bottom) * 1px); + right: calc(var(--right) * 1px); + text-shadow: none !important; + transform-origin: bottom right; + transform: scale(calc(var(--scale) / 100)); +} + +.splits { + display: flex; + flex-direction: column; + justify-content: flex-end; + position: absolute; + bottom: 108px; + right: 0; + height: calc(var(--max-visible-splits) * 46px); + overflow: hidden; +} + +.split { + height: 46px !important; + font-size: 24px; + transition: 0.6s; +} + +.split-rows { + height: 44px !important; + margin-top: 2px; +} + +.current-split~.split { + height: 0 !important; + transition: none; +} + +.split-row { + position: absolute !important; +} + +.split-first-row { + right: 92px; + background: rgba(0, 0, 0, 0.8); + border-radius: 12px 0 0 12px; +} + +.split-second-row { + right: 0; + width: 92px !important; + height: 100% !important; + justify-content: center !important; + background: rgba(0, 0, 0, 0.95); +} + +.split:first-of-type .split-second-row { + border-radius: 0 12px 0 0; +} + +.split-name { + padding: 8px 16px !important; +} + +.split-time { + padding: 0 !important; +} + +.split-name, +.timer-time { + font-family: Roboto; + font-weight: 300; +} + +.split-time, +.key-value-key, +.key-value-value { + font-family: Roboto; + font-weight: 400; +} + +.timer { + position: absolute; + bottom: 30px; + right: 0; +} + +.timer:before { + --radius: calc(calc(calc(var(--total) * -1) + 1) * 12px); + content: ''; + position: absolute; + right: 0; + width: 157px; + height: 100%; + background: rgba(0, 0, 0, 0.95); + border-radius: 12px 0 0 0; + border-bottom-right-radius: var(--radius); + border-bottom-left-radius: var(--radius); + z-index: -1; +} + +.Timer0 { + filter: none !important; +} + +.timer-time { + font-size: 48px !important; + transform: translate(-11px, -7px); +} + +.layout:before { + content: ''; + position: absolute; + bottom: -7px; + right: 0; + width: 157px; + height: 37px; + background: rgba(0, 0, 0, 0.8) !important; + border-radius: 0 0 12px 12px; + z-index: -1; + opacity: var(--total); +} + +.key-value { + position: absolute; + bottom: 0px; + right: 6px; + width: 125px; + font-size: 20px; + opacity: 0; + animation: cycle infinite; + animation-duration: calc(calc(var(--appearance-duration) * var(--total)) * 1s); +} + +.key-value:nth-child(4) { + animation-delay: calc(var(--appearance-duration) * 1s); + height: calc(24px * var(--show-sob)); +} + +.key-value:nth-child(5) { + animation-delay: calc(calc(calc(var(--appearance-duration) * calc(var(--show-sob) + 1))) * 1s); + height: calc(24px * var(--show-pb)); +} + +.key-value:nth-child(6) { + animation-delay: calc(calc(calc(var(--appearance-duration) * calc(calc(var(--show-sob) + var(--show-pb)) + 1))) * 1s); + height: calc(24px * var(--show-wr)); +} + +@keyframes cycle { + + 0%, + 52%, + 100% { + opacity: calc(2 - var(--total)); + } + + 2%, + 33% { + opacity: 1; + } + + 35%, + 50% { + opacity: calc(3 - var(--total)); + } +} \ No newline at end of file