Polish launcher main and library flows

app/assets/css/launcher.css

@@ -2470,18 +2470,18 @@ input:checked + .toggleSwitchSlider:before {
 }
 #landingContainer > #upper > #left {
     display: inline-flex;
-    width: 15%;
+    width: 14%;
     height: 100%;
     justify-content: flex-end;
 }
 #landingContainer > #upper > #content {
     display: inline-flex;
-    width: 63%;
+    width: 58%;
     height: 100%;
 }
 #landingContainer > #upper > #right {
     display: inline-flex;
-    width: 22%;
+    width: 28%;
     height: 100%;
     justify-content: flex-end;
 }
@@ -2505,7 +2505,7 @@ input:checked + .toggleSwitchSlider:before {
     position: relative;
     top: 25px;
     display: inline-flex;
-    line-height: 24px;
+    line-height: 28px;
     left: 50px;
 }
 #landingContainer > #lower > #center {
@@ -2991,19 +2991,19 @@ input:checked + .toggleSwitchSlider:before {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    gap: 4px;
-    min-width: 150px;
+    gap: 6px;
+    min-width: 210px;
 }
 
 #accountPreviewLabel {
-    font-size: 11px;
+    font-size: 13px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.58);
 }
 
 #accountPreviewName {
-    font-size: 13px;
+    font-size: 18px;
     font-weight: 800;
     color: #ffffff;
     text-align: right;
@@ -3028,11 +3028,11 @@ input:checked + .toggleSwitchSlider:before {
 /* User profile avatar container. */
 #avatarContainer {
     border-radius: 50%;
-    border: 2px solid #cad7e1;
+    border: 3px solid #cad7e1;
     box-sizing: border-box;
     background: rgba(1, 2, 1, 0.5);
-    height: 70px;
-    width: 70px;
+    height: 88px;
+    width: 88px;
     box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
     overflow: hidden;
     position: relative;
@@ -3049,16 +3049,16 @@ input:checked + .toggleSwitchSlider:before {
 }
 
 #accountMenu {
-    min-width: 190px;
-    padding: 14px;
-    border-radius: 16px;
+    min-width: 220px;
+    padding: 16px;
+    border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     background: rgba(10, 10, 10, 0.9);
     backdrop-filter: blur(12px);
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: 12px;
+    gap: 14px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
 }
 
@@ -3067,7 +3067,7 @@ input:checked + .toggleSwitchSlider:before {
 }
 
 #accountMenuName {
-    font-size: 13px;
+    font-size: 16px;
     font-weight: 800;
     letter-spacing: 0.04em;
     color: #ffffff;
@@ -3083,9 +3083,9 @@ input:checked + .toggleSwitchSlider:before {
     position: relative;
     display: flex;
     flex-direction: column;
-    margin-top: 25px;
-    height: calc(100% - 95px);
-    width: 70px;
+    margin-top: 32px;
+    height: calc(100% - 120px);
+    width: 82px;
     align-items: center;
 }
 
@@ -3100,13 +3100,13 @@ input:checked + .toggleSwitchSlider:before {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 27px;
+    height: 36px;
 }
 
 /* Divider bar between the external and internal icons. */
 .mediaDivider {
     height: 1px;
-    width: 14px;
+    width: 18px;
     background: rgb(255, 255, 255);
     margin: 10px 0px;
 }
@@ -3114,16 +3114,15 @@ input:checked + .toggleSwitchSlider:before {
 /* Social media icon shared styles. */
 .mediaSVG {
     fill: #ffffff;
-    height: 12px;
     transition: 0.25s ease;
     cursor: pointer;
-    height: 12px;
-    width: 25px;
+    height: 16px;
+    width: 32px;
 }
 .mediaSVG:hover,
 .mediaURL:focus .mediaSVG,
 .mediaSVG:active {
-    height: 20px;
+    height: 24px;
 }
 
 /* Social media URL shared styles. */
@@ -3148,28 +3147,28 @@ input:checked + .toggleSwitchSlider:before {
 /* Settings icon colors. */
 #settingsSVG {
     stroke: #ffffff;
-    height: 15px;
+    height: 18px;
 }
 .mediaButton:hover #settingsSVG,
 .mediaButton:focus #settingsSVG,
 .mediaButton:active #settingsSVG {
-    height: 23px;
+    height: 27px;
 }
 
 /* Settings tooltip styles. */
 #settingsTooltip {
     visibility: hidden;
     opacity: 0;
-    width: 75px;
-    height: 20px;
+    width: 88px;
+    height: 24px;
     background-color: rgba(0, 0, 0, 0.75);
     text-align: center;
     border-radius: 4px;
     position: absolute;
     z-index: 1;
     right: 130%;
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 13px;
+    line-height: 24px;
     transition: visibility 0s linear 0.25s, opacity 0.25s ease;
 }
 #settingsTooltip::after {
@@ -3262,19 +3261,19 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Style for a general label on the bottom of the landing view. */
 .bot_label {
-    font-size: 10px;
-    letter-spacing: 1px;
+    font-size: 13px;
+    letter-spacing: 1.2px;
     font-weight: bold;
     text-shadow: 0px 0px 0px #bebcbb;
 }
 
 /* Divider used on the bottom of the landing view. */
 .bot_divider {
-    height: 25px;
+    height: 30px;
     width: 2px;
     background: rgba(107, 105, 105, 0.7);
-    margin-left: 20px;
-    margin-right: 20px;
+    margin-left: 22px;
+    margin-right: 22px;
 }
 
 /* * *
@@ -3284,16 +3283,16 @@ input:checked + .toggleSwitchSlider:before {
 /* Maintains maximum width on the status bar. */
 #server_status_wrapper {
     display: inline-flex;
-    width: 80px;
+    width: 180px;
 }
 
 /* Span which displays the player count of the selected server. */
 #player_count {
     color: #949494;
-    font-size: 9px;
+    font-size: 14px;
     font-weight: 900;
     text-shadow: 0px 0px 20px #949494;
-    margin-left: 10px;
+    margin-left: 12px;
 }
 
 /* Wrapper container for the mojang status bar. */
@@ -3305,9 +3304,9 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Icon which displays the status of the mojang services. */
 #mojang_status_icon {
-    font-size: 30px;
+    font-size: 34px;
     color: #848484;
-    margin-left: 15px;
+    margin-left: 16px;
     font-family: 'sans-serif';
 }
 
@@ -3316,7 +3315,7 @@ input:checked + .toggleSwitchSlider:before {
     position: absolute;
     visibility: hidden;
     opacity: 0;
-    width: 145px;
+    width: 175px;
     min-height: 150px;
     background-color: rgba(0, 0, 0, 0.75);
     color: #fff;
@@ -3324,7 +3323,7 @@ input:checked + .toggleSwitchSlider:before {
     padding: 5px 10px;
     z-index: 1;
     font-family: 'Pretendard Medium';
-    font-size: 12px;
+    font-size: 13px;
     transition: visibility 0s linear 0.25s, opacity 0.25s ease;
     bottom: calc(100% + 15px);
     transform: translateX(-50%);
@@ -3372,7 +3371,7 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Non essential service title text. */
 #mojangStatusNETitle {
-    font-size: 10px;
+    font-size: 11px;
     padding: 0px 3px;
     text-align: center;
     letter-spacing: 1px;
@@ -3386,16 +3385,16 @@ input:checked + .toggleSwitchSlider:before {
 /* Displays the name of the mojang service. */
 .mojangStatusName {
     width: 100%;
-    font-size: 10px;
+    font-size: 12px;
     letter-spacing: 1px;
-    line-height: 12px;
-    padding: 6px 0px;
+    line-height: 14px;
+    padding: 7px 0px;
 }
 
 /* Displays the status of the mojang service. */
 .mojangStatusIcon {
     margin-right: 10px;
-    font-size: 18.5px;
+    font-size: 20px;
     color: #848484;
 }
 
@@ -3409,6 +3408,9 @@ input:checked + .toggleSwitchSlider:before {
     border: none;
     cursor: pointer;
     outline: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 #newsButton:hover #newsButtonText,
 #newsButton:focus #newsButtonText {
@@ -3455,10 +3457,10 @@ input:checked + .toggleSwitchSlider:before {
 #newsButtonText {
     color: white;
     font-weight: 900;
-    letter-spacing: 2px;
+    letter-spacing: 2.5px;
     text-shadow: 0px 0px 0px #bebcbb;
-    font-size: 11px;
-    line-height: 30px;
+    font-size: 16px;
+    line-height: 36px;
     display: flex;
     transition: 0.25s ease;
 }
@@ -3482,7 +3484,7 @@ input:checked + .toggleSwitchSlider:before {
     font-weight: 900;
     letter-spacing: 2px;
     text-shadow: 0px 0px 0px #bebcbb;
-    font-size: 20px;
+    font-size: 28px;
     padding: 0px;
     transition: 0.25s ease;
     outline: none;
@@ -3518,9 +3520,9 @@ input:checked + .toggleSwitchSlider:before {
     font-weight: 900;
     letter-spacing: 1px;
     text-shadow: 0px 0px 0px #bebcbb;
-    font-size: 20px;
-    min-width: 53.21px;
-    max-width: 53.21px;
+    font-size: 24px;
+    min-width: 64px;
+    max-width: 64px;
     text-align: right;
 }
 
@@ -3537,7 +3539,8 @@ input:checked + .toggleSwitchSlider:before {
     border: none;
     outline: none;
     cursor: pointer;
-    line-height: 24px;
+    font-size: 15px;
+    line-height: 30px;
     padding: 0px;
     transition: 0.25s ease;
 }
@@ -3552,8 +3555,8 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Progress bar styles. */
 #launch_progress[value] {
-    height: 3px;
-    width: 265px;
+    height: 4px;
+    width: 320px;
     -webkit-appearance: none;
 }
 #launch_progress[value]::-webkit-progress-bar {
@@ -3565,7 +3568,7 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Span which displays information about the status of the launch process. */
 #launch_details_text {
-    font-size: 11px;
+    font-size: 13px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -4079,8 +4082,8 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherPageEyebrow {
     display: inline-block;
-    margin-bottom: 8px;
-    font-size: 12px;
+    margin-bottom: 10px;
+    font-size: 13px;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.65);
@@ -4088,14 +4091,15 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherPageTitle {
     margin: 0;
-    font-size: 32px;
+    font-size: 38px;
     font-weight: 700;
     color: #ffffff;
 }
 
 .launcherPageSubtitle {
-    max-width: 680px;
-    margin: 10px 0 0;
+    max-width: 760px;
+    margin: 12px 0 0;
+    font-size: 16px;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.74);
 }
@@ -4103,12 +4107,12 @@ input:checked + .toggleSwitchSlider:before {
 .launcherBackButton {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     padding: 0;
     border: none;
     background: none;
     color: rgba(255, 255, 255, 0.88);
-    font-size: 13px;
+    font-size: 16px;
     font-weight: 700;
     letter-spacing: 0.04em;
     cursor: pointer;
@@ -4116,7 +4120,7 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherBackButton::before {
     content: '←';
-    font-size: 16px;
+    font-size: 20px;
 }
 
 .launcherBackButton:hover,
@@ -4135,7 +4139,7 @@ input:checked + .toggleSwitchSlider:before {
 #landingNavButtons {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     flex-wrap: wrap;
 }
 
@@ -4154,17 +4158,17 @@ input:checked + .toggleSwitchSlider:before {
 .launcherListContainer {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 14px;
 }
 
 .launcherListItem {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 16px;
-    padding: 18px 20px;
+    gap: 20px;
+    padding: 22px 24px;
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 18px;
+    border-radius: 20px;
     background: rgba(15, 15, 15, 0.56);
     backdrop-filter: blur(10px);
     box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
@@ -4200,7 +4204,7 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherListTitle {
     margin: 0;
-    font-size: 20px;
+    font-size: 24px;
     color: #ffffff;
 }
 
@@ -4213,6 +4217,7 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherListDescription {
     margin: 0;
+    font-size: 15px;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.76);
 }
@@ -4228,11 +4233,11 @@ input:checked + .toggleSwitchSlider:before {
 .launcherCard {
     display: flex;
     flex-direction: column;
-    gap: 14px;
-    min-height: 220px;
-    padding: 18px;
+    gap: 16px;
+    min-height: 240px;
+    padding: 22px;
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 18px;
+    border-radius: 20px;
     background: rgba(15, 15, 15, 0.56);
     backdrop-filter: blur(10px);
     box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
@@ -4257,7 +4262,7 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherCardTitle {
     margin: 0;
-    font-size: 22px;
+    font-size: 26px;
     color: #ffffff;
 }
 
@@ -4271,10 +4276,10 @@ input:checked + .toggleSwitchSlider:before {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 4px 10px;
+    padding: 5px 12px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.12);
-    font-size: 11px;
+    font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: rgba(255, 255, 255, 0.8);
@@ -4283,6 +4288,7 @@ input:checked + .toggleSwitchSlider:before {
 .launcherCardDescription,
 .launcherNotice span,
 .launcherEmptyDescription {
+    font-size: 15px;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.76);
 }
@@ -4296,7 +4302,7 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherEditorTitle {
     display: block;
-    font-size: 18px;
+    font-size: 22px;
     font-weight: 700;
     color: #ffffff;
 }
@@ -4304,17 +4310,19 @@ input:checked + .toggleSwitchSlider:before {
 .launcherEditorDescription {
     display: block;
     margin-top: 6px;
+    font-size: 15px;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.72);
 }
 
 .launcherDetailBody {
     box-sizing: border-box;
-    min-height: 140px;
-    padding: 14px 16px;
+    min-height: 180px;
+    padding: 16px 18px;
     border-radius: 14px;
     background: rgba(255, 255, 255, 0.04);
     color: rgba(255, 255, 255, 0.84);
+    font-size: 15px;
     line-height: 1.6;
     white-space: pre-wrap;
 }
@@ -4322,8 +4330,8 @@ input:checked + .toggleSwitchSlider:before {
 .launcherInfoBlock {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    padding: 12px 14px;
+    gap: 10px;
+    padding: 14px 16px;
     border-radius: 14px;
     background: rgba(255, 255, 255, 0.04);
 }
@@ -4335,7 +4343,7 @@ input:checked + .toggleSwitchSlider:before {
 }
 
 .launcherInfoLabel {
-    font-size: 12px;
+    font-size: 13px;
     color: rgba(255, 255, 255, 0.58);
     letter-spacing: 0.05em;
     text-transform: uppercase;
@@ -4343,6 +4351,7 @@ input:checked + .toggleSwitchSlider:before {
 
 .launcherInfoValue {
     text-align: right;
+    font-size: 15px;
     color: rgba(255, 255, 255, 0.88);
 }
 
@@ -4373,7 +4382,7 @@ input:checked + .toggleSwitchSlider:before {
 }
 
 .launcherFieldLabel {
-    font-size: 12px;
+    font-size: 13px;
     color: rgba(255, 255, 255, 0.65);
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -4412,10 +4421,10 @@ input:checked + .toggleSwitchSlider:before {
 .launcherPrimaryButton,
 .launcherSecondaryButton,
 .launcherGhostButton {
-    padding: 11px 16px;
-    border-radius: 12px;
+    padding: 13px 18px;
+    border-radius: 14px;
     border: 1px solid transparent;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
@@ -4456,9 +4465,9 @@ input:checked + .toggleSwitchSlider:before {
 .launcherNotice {
     display: flex;
     flex-direction: column;
-    gap: 6px;
-    padding: 18px;
-    border-radius: 18px;
+    gap: 8px;
+    padding: 20px;
+    border-radius: 20px;
     background: rgba(8, 8, 8, 0.42);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }