diff options
Diffstat (limited to 'src/app/main.css')
| -rw-r--r-- | src/app/main.css | 427 |
1 files changed, 351 insertions, 76 deletions
diff --git a/src/app/main.css b/src/app/main.css index 69b10ad..30f462e 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -1,116 +1,391 @@ :root { - --padding: 15px; - --disabled: #656E7F; - --foreground: #DDE2EB; - --background: #4C515B; - --boxbackground: #666E7F; - --subforeground: #AFAFAF; - --btnforeground: var(--foreground); - --red: #C7777F; --blue: #81A1C1; - --yellow: #ECD19A; + --orange: #D59783; + + --padding: 25px; + + --bg: rgba(0, 0, 0, 0.5); + --selbg: rgba(80, 80, 80, 0.5); + --redbg: linear-gradient(45deg, var(--red), #FA4343); + --bluebg: linear-gradient(45deg, var(--blue), #7380ED); + } -@media (prefers-color-scheme: light) { - :root { - --background: #FFFFFF; - --foreground: #4C566A; - --boxbackground: #EEF0F4; - --btnforeground: var(--background); - } +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + border-radius: 10px; + background: transparent; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + background: var(--red); } -@font-face { - font-family: "Roboto Mono"; - src: url("roboto.ttf"); +.playBtn, .gamesContainer button, #close { + cursor: pointer; } -::-webkit-scrollbar {display: none} +#close { + z-index: 1; + width: 25px; + opacity: 0.6; + height: 25px; + position: fixed; + top: var(--padding); + right: var(--padding); + background-size: contain; + transition: 0.25s ease-in-out; + background-image: url("icons/close.png"); +} -body, button, input { - font-size: 18px; - font-weight: 700; +#close:hover {opacity: 1.0} +#close:active {transform: scale(0.98)} + +body { + margin: 0; overflow: hidden; - -webkit-app-region: drag; - color: var(--foreground); - text-transform: uppercase; - background: var(--background); - font-family: "Roboto Mono", monospace; + user-select: none; + font-family: "Roboto", sans-serif; } -nobr {white-space: nowrap} +button {outline: none} +b, strong {font-weight: 700} +body, input, button {font-weight: 500} -.versions { - height: 15px; - font-size: 12px; - color: var(--subforeground); +button { + border: none; + color: white; + outline: none; + font-weight: 700; + padding: 5px 10px; + border-radius: 5px; + transition: 0.2s ease-in-out; } -.line { +button:hover {filter: brightness(110%)} +button:active {filter: brightness(90%)} + +img {pointer-events: none} + +#bgHolder { + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + position: fixed; + transform: scale(1.1); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + transition: background-image 0.5s ease-in-out; + filter: brightness(0.4) blur(2px) grayscale(0.6); +} + +#bgHolder[bg="0"] {background-image: url("../assets/bg/viper.jpg")} +#bgHolder[bg="1"] {background-image: url("../assets/bg/northstar.jpg")} +#bgHolder[bg="2"] {background-image: url("../assets/bg/tf2.jpg")} + +.gamesContainer { + width: 10%; + height: 100%; + min-width: 95px; + max-width: 120px; + + float: left; display: flex; - margin-top: var(--padding); + flex-wrap: wrap; + align-content: center; } -#modsdiv { - padding: 1px; - height: 125px; - overflow-y: scroll; - border-radius: var(--padding); - background: var(--boxbackground); - margin: calc(var(--padding) / 3) var(--padding); +.mainContainer { + height: 100%; + flex-grow: 1; + display: flex; + position: relative; } -.mod { - margin: calc(var(--padding) / 3); - border-radius: calc(var(--padding) / 2) !important; + +/* nav bar buttons */ +.gamesContainer button { + background-size: 90%; + background-position: center; + background-repeat: no-repeat; + + border: none; + transition: 0.3s ease-in-out; + background-color: transparent; + + + margin: 20px; + position: relative; + box-sizing: border-box; + flex-basis: calc(100% - 10px); } -.mod.selected {background: var(--background)} +.gamesContainer button.inactive { + opacity: 0.5; + transform: scale(0.9); +} -.mod .disabled { - color: var(--red); - position: relative; - left: var(--padding); +.gamesContainer button::before { + content: ""; + display: block; + padding-top: 100%; } -.buttons { - text-align: right; - margin-left: auto; - user-select: none; - margin-right: calc(var(--padding) / 1.9); +.gamesContainer button .content { + width: 100%; + height: 100%; + top: 0; left: 0; + position: absolute; } -.text {max-width: 38vw} -.buttons {max-width: 55vw} +#vpBtn {background-image: url("icons/viper.png")} +#nsBtn {background-image: url("icons/northstar.png")} +#tfBtn { + background-image: url("icons/titanfall2.png"); + background-size: 69%; /* nice */ +} -button, .text, .mod { - border: none; - outline: none; - user-select: none; +.contentContainer { + width: 90%; + color: white; + flex-grow: 1; + opacity: 1.0; + margin-left: 5%; + position: absolute; + transition: 0.15s ease-in-out; +} + +.contentContainer.hidden { + opacity: 0.0; + pointer-events: none; +} + +.contentMenu { + padding: 0; + flex-grow: 1; + display: flex; + font-size: 20px; + list-style: none; + margin-bottom: 0; + align-items: center; + justify-content: center; + margin-top: var(--padding); +} + +/* some sections do not need space between them and menu */ +#nsMain, #nsRelease, #vpReleaseNotes, .playBtnContainer { + margin-top: 0 !important; +} + +.contentMenu li { + opacity: 0.6; + margin: 0 26px; + cursor: pointer; + font-weight: 700; + text-align: center; + height: fit-content; + transition: opacity 0.3s ease-in-out; +} + +.contentMenu li:last-child {margin-right: 0px} +.contentMenu li:first-child {margin-left: 0px} + +.contentMenu li:hover {opacity: 0.7} + +.contentMenu li[active] { + opacity: 1.0; + pointer-events: none; +} + +.contentMenu li::after { + top: 10px; + width: 30px; + height: 5px; + opacity: 0.0; + content: " "; + display: block; + text-align: center; + position: relative; border-radius: 50px; + background: var(--red); + left: calc(50% - 15px); transition: 0.2s ease-in-out; - padding: calc(var(--padding) / 3) var(--padding); } -#welcome {padding: 0px} +.contentMenu li[active]::after { + top: 5px; + opacity: 1.0; +} -button { - color: var(--btnforeground); - -webkit-app-region: no-drag; - margin-bottom: calc(var(--padding) / 1.5); +.section { + opacity: 1.0; + position: fixed; + right: calc(var(--padding) * 2); + left: calc(100px + var(--padding)); + transition: opacity 0.15s ease-in-out; } -button:hover {opacity: 0.9} -button:active { - opacity: 0.7; - transform: scale(0.95); +.section.hidden { + opacity: 0.0; + pointer-events: none; } +.contentBody img {max-width: 100%} +.contentBody .img {text-align: center} -#setpath {background: #5E81AC} -#vanilla, #exit {background: #656E7F} -#updateBtn, #installmod {background: var(--blue)} -#togglemod, #toggleall {background: var(--yellow)} +.contentBody .section > :first-child:not(.img) { + margin-top: 35px; +} + +.contentContainer .playBtnContainer { + text-align: center; +} + +.contentContainer .playBtn { + width: 27%; + height: 11%; + border: none; + color: white; + padding: 20px; + font-size: 24px; + font-weight: bold; + margin-top: 100px; + margin-bottom: 10px; + border-radius: 10px; + background: var(--redbg); + transition: 0.3s ease-in-out; + filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1)); +} + +.contentContainer .playBtn:hover { + transform: scale(1.05); + filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.3)) brightness(110%); +} + +.contentContainer .playBtn:active { + opacity: 0.7;transform: scale(0.98); + filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.4)); +} + +.contentContainer #nsMain .playBtn { + background: var(--bluebg); +} + +a { + color: var(--red); + text-decoration: none; + transition: filter 0.2s ease-in; +} + +a:hover { + filter: brightness(80%); +} + +#nsContent .contentMenu { + margin-bottom: 0; +} + +.contentBody .img img { + transform: scale(0.85); +} + +.contentBody .img { + width: 100%; + text-align: center; +} + +#nsRelease, #vpReleaseNotes { + height: 80vh; + overflow-y: scroll; + flex-direction: column; + margin-top: 10px !important; +} + +.inline * { + display: inline-block; +} + +#vpMain { + margin-top: 140px; + text-align: center; +} + +#vpMain img { + width: 20%; +} + +#vpVersion { + font-size: 16px; +} + +.simplebar-scrollbar:before { + background: var(--red) !important; +} + +#installmod {background: var(--blue)} +#togglemod, #toggleall {background: var(--orange)} #northstar, #removeall, #removemod {background: var(--red)} -button:disabled {background: var(--disabled) !important; opacity: 0.5} +button:disabled { + opacity: 0.5; + pointer-events: none; +} + +code { + font-size: 16px; + padding: 2px 5px; + border-radius: 3px; + background-color: #00000070; +} + +#nsMods .line { + display: flex; + align-items: center; + margin-top: calc(var(--padding) / 2); +} + +#modsdiv { + height: 50vh; + border-radius: 5px; + background: var(--bg); + backdrop-filter: blur(15px); + padding: calc(var(--padding) / 4); +} + +#modsdiv .mod { + display: flex; + border-radius: 5px; + transition: 0.1s ease-in-out; + margin: calc(var(--padding) / 3); + padding: calc(var(--padding) / 3); +} + +#modsdiv .mod.selected { + background: var(--selbg); +} + +#modsdiv .mod .disabled, .modbtns { + margin-left: auto; +} + +.modbtns button { + margin-left: calc(var(--padding) / 3); +} + +/* drag control */ + +#bgHolder { + user-select: none; + -webkit-app-region: drag; +} + +a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod { + -webkit-app-region: no-drag; +} |