From 87a793ca8cc871ce46a64f30143e0905fd72edb6 Mon Sep 17 00:00:00 2001 From: RochesterX Date: Sat, 29 Nov 2025 13:05:55 -0500 Subject: [PATCH] Pre-styling --- public/assets/css/oldstyle.css | 485 +++++++++++++++++++++++++++++++++ public/assets/css/style.css | 14 +- public/player.html | 2 +- 3 files changed, 497 insertions(+), 4 deletions(-) create mode 100644 public/assets/css/oldstyle.css diff --git a/public/assets/css/oldstyle.css b/public/assets/css/oldstyle.css new file mode 100644 index 0000000..b2ed60e --- /dev/null +++ b/public/assets/css/oldstyle.css @@ -0,0 +1,485 @@ +html { + height: 100%; + margin: 0; + display: flex; + justify-content: center; +} + +body { + background-color: #0c0c0c; + min-height: 100vh; + width: 100%; + margin-top: 0px; + display: flex; + flex-direction: column; + justify-content: flex-start; + table-layout: auto; +} + +.header { + grid-area: header; + margin-left: 20px; + margin-right: 20px; + display: flex; + flex-direction: row; + height: 100px; + align-items: center; + justify-content: space-between; +} + +.header-left { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 20px; +} + +.header-right { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + gap: 10px; +} + +.nw { + grid-area: nw; +} + +.ne { + grid-area: ne; +} + +.se { + grid-area: se; +} + +.sw { + grid-area: sw; +} + +.cursor-question { + cursor: help; + + position: relative; + display: inline-block; +} + +.cursor-question .tooltip-text { + visibility: hidden; + font: 16px tahoma, sans-serif; + width: 200px; + background-color: #0C0C0C; + border: 2px solid #EEEEEE; + color: #EEEEEE; + text-align: left; + border-radius: 6px; + padding: 5px; + padding-left: 8px; + padding-right: 8px; + z-index: 1; + position: absolute; + top: 110%; + left: 50%; + transform: translate(-50%, 20px); + opacity: 0; + transition: opacity 0.3s ease-out, transform 0.3s ease-out; + font-size: 14px; +} + +.cursor-question:hover { + text-decoration: underline; +} + +.cursor-question:hover .tooltip-text { + visibility: visible; + transform: translate(-50%, 0px); + opacity: 1; +} + +.box { + border: 2px solid #AAAAAA; + border-radius: 16px; + margin: 4px; + padding: 12px; + padding-top: 6px; + display: flex; + flex-direction: column; + justify-content: flex-start; + text-justify: center; + gap: 5px; + overflow: hidden; +} + +.box table { + width: 100%; +} + +.box tbody { + display: block; + overflow-y: auto; + overflow-x: hidden; + max-height: calc((100vh - 100px) / 2 - 100px); +} + +.box thead, +.box tbody tr { + display: table; + width: 100%; + table-layout: fixed; +} + +.box table td:first-child, +.box table th:first-child { + width: 35px; + white-space: nowrap; +} + +.box table thead td { + font-weight: bold; +} + +.box table td:nth-child(2), +.box table th:nth-child(2) { + width: 58px; + white-space: nowrap; +} + +.grid-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + grid-template-areas: + "header header" + "nw ne" + "sw se"; +} + +.center { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin-top: 30px; +} + +.info-container { + display: flex; + flex-direction: row; + gap: 15px +} + +.info { + display: flex; + flex-direction: row; + gap: 5px; +} + +.info p { + min-width: 0px; +} + +form { + display: flex; + flex-direction: column; + align-items: center; + border: 2px solid #AAAAAA; + border-radius: 10px; + padding: 10px; + margin: 20px; + gap: 5px; +} + +.success { + display: none; + filter: hue-rotate(110deg); + flex-direction: column; + align-items: center; + border: 2px solid #a34b4b; + background-color: #3a1414; + border-radius: 10px; + padding: 5px; + padding-left: 10px; + padding-right: 10px; + margin-top: -10px; + gap: 5px; +} + +.success p { + color: #ff7777; +} + +.error { + display: none; + flex-direction: column; + align-items: center; + border: 2px solid #a34b4b; + background-color: #3a1414; + border-radius: 10px; + padding: 5px; + padding-left: 10px; + padding-right: 10px; + margin-top: -10px; + gap: 5px; +} + +.error p { + color: #ff7777; +} + +.loginForm input { + margin: 5px; +} + +a { + background-color: transparent; + border: 2px solid #606060; + max-height: 20px; + border-radius: 5px; + color: white; + padding-left: 5px; + padding-right: 5px; + text-decoration: none; + text-align: center; + align-items: center; + justify-content: center; + color: #eeeeee; + font: 16px tahoma, sans-serif; + transition: transform 0.1s ease-in, border 0.05s ease-in; +} + +button { + background-color: transparent; + border: 2px solid #606060; + border-radius: 5px; + padding: 5px; + gap: 5px; + transition: transform 0.1s ease-in, border 0.1s ease-in; + color: white; + text-decoration: none; + text-align: center; + align-items: center; + justify-content: center; + color: #eeeeee; + font: 16px tahoma, sans-serif; +} + +input { + background-color: black; + border: 2px solid #606060; + margin: 5px; + border-radius: 5px; + padding: 2px; + padding-left: 5px; + gap: 5px; + color: white; + text-decoration: none; + text-align: left; + align-items: flex-start; + justify-content: flex-start; + color: #eeeeee; + font: 16px tahoma, sans-serif; + transition: transform 0.05s ease-out, border 0.1s ease-in; +} + +input:hover { + border: 2px solid #cccccc; +} + +input:focus { + outline: none; +} + +input:focus-visible { + outline: none; + border: 2px solid white; +} + +select { + background-color: black; + border: 2px solid #606060; + margin: 5px; + border-radius: 5px; + padding: 2px; + padding-left: 5px; + gap: 5px; + width: 100%; + color: white; + text-decoration: none; + text-align: left; + align-items: flex-start; + justify-content: flex-start; + color: #eeeeee; + font: 16px tahoma, sans-serif; + transition: transform 0.05s ease-out, border 0.1s ease-in; +} + +select:hover { + border: 2px solid #cccccc; +} + +select:focus { + outline: none; +} + +select:focus-visible { + outline: none; + border: 2px solid white; +} + +button:hover { + transform: translate(0px, -3px); + border: 2px solid white; +} + +button:focus { + transform: translate(0px, 3px); + border: 2px solid white; +} + +a:hover { + border: 2px solid #CCCCCC; +} + +a:focus { + border: 2px solid #00b3ff; + transform: translate(0px, 3px); +} + +.register { + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; +} + +.inputGroup { + display: flex; + flex-direction: row; + gap: 16px; +} + +table { + border-collapse: collapse; + border: 1px solid #CCCCCC; +} + +thead { + color: #FFFFFF; + /*border: 2px solid #CCCCCC;*/ +} + +thead th { + font-weight: bold; + font: 14px tahoma, sans-serif; + border: 1px solid #CCCCCC; + padding: 6px 12px; +} + +td { + font: 14px tahoma, sans-serif; + border: 1px solid #CCCCCC; + padding: 6px 12px; + color: #CCCCCC; +} + +tr:nth-child(even) { + background-color: #2a2a2a; +} + +tr:nth-child(odd) { + background-color: #161616; +} + +h2 { + color: #ffffff; + font: 32px "Verdana"; + margin: 0; +} + +h3 { + color: #CCCCCC; + font: 24px "Verdana"; + margin: 0; +} + +p { + color: #eeeeee; + font: 16px tahoma, sans-serif; + min-width: 50px; + margin-top: 5px; + margin-bottom: 5px; +} + +:focus { + outline: none; +} + + + +.checkbox { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; +} + +.checkbox input { + appearance: none; + position: absolute; + opacity: 0; +} + +.mark { + width: 32px; + height: 24px; + border: 2px solid #606060; + border-radius: 4px; + color: #888888; + font: 16px tahoma, sans-serif; + font-weight: bold; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.1s ease-in, transform 0.1s ease-in; +} + +.checkbox input:hover + .mark { + border: 2px solid #CCCCCC; +} + +.checkbox input:checked + .mark { + border: 2px solid #FFFFFF; + color: #CCCCCC; +} + +.days { + display: flex; + flex-direction: row; + gap: 3px; +} + +.time { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 3px; +} + +.time input { + height: 24px; +} + +.time .dash { + width: 30px; + height: 1px; + background: rgb(255, 255, 255); +} + +.row { + display: flex; + flex-direction: row; +} diff --git a/public/assets/css/style.css b/public/assets/css/style.css index b2ed60e..61ea492 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,3 +1,11 @@ +:root { + --light-blue: #5C9FFE; + --charcoal: #333333; + --dark-grey: #4A4A4A; + --light-grey: #D4D4D4; + --royal-blue: #0047AB; +} + html { height: 100%; margin: 0; @@ -6,7 +14,7 @@ html { } body { - background-color: #0c0c0c; + background-color: var(--light-grey); min-height: 100vh; width: 100%; margin-top: 0px; @@ -250,8 +258,8 @@ a { } button { - background-color: transparent; - border: 2px solid #606060; + background-color: var(--light-blue); + border: 2px solid var(--royal-blue); border-radius: 5px; padding: 5px; gap: 5px; diff --git a/public/player.html b/public/player.html index 4f45a64..6af70f6 100644 --- a/public/player.html +++ b/public/player.html @@ -31,7 +31,7 @@

PayDirt Score:

- A player's PayDirt score is calculated by weighting their offense score by their APY. It is used to evaluate the worth of their contract. + A player's PayDirt score is calculated by weighting their offense score by their annual salary. It is used to evaluate the worth of their contract.