diff options
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 855 |
1 files changed, 0 insertions, 855 deletions
diff --git a/static/style.css b/static/style.css deleted file mode 100644 index 42a44fa..0000000 --- a/static/style.css +++ /dev/null @@ -1,855 +0,0 @@ -:root { - --theme-main-background: #111; - --theme-lighter-background: #222; - --theme-lightest-background: #333; - - --theme-main-text: #eee; - --theme-darker-text: #999; - --theme-transparent-border: rgba(128,128,128,.3); - - --theme-yellow: #ff0; -} - -/* minecraft font */ -@font-face { - font-family: Minecraft; - src: url(https://cdn.matdoes.dev/fonts/Minecraft.ttf); - font-display: swap; -} - -/* latin-ext */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: italic; - font-weight: 400; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin-ext */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: italic; - font-weight: 700; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic-bold.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - } -/* latin-ext */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; - } -/* latin */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin-ext */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Atkinson Hyperlegible'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - - - - -body { - font-family: Twemoji, 'Atkinson Hyperlegible', sans-serif; - color: var(--theme-main-text); - background-color: var(--theme-main-background); - margin: 0; - overflow-x: hidden; -} -html { - scroll-behavior: smooth -} - -/* content is uglier when its max width */ -main { - margin: 0 auto; - width: 80%; - padding: 1em; -} - -.member-container { - position: relative -} - -/* makes random height and stuff look less broken */ -* { - box-sizing: border-box; - vertical-align: baseline; -} - -/* base styles for inputs */ -input[type=text], input[type=submit] { - -webkit-appearance: none; - background-color: transparent; - color: var(--theme-darker-text); - transition-duration: 250ms; - border: 1px solid var(--theme-transparent-border); - border-radius: 4px; - margin: 0; - height: 2em; - font-size: 1em; -} - -/* base styles for text input boxes */ -input[type=text] { - text-align: left; - padding-left: .5em -} -/* Selecting a text box */ -input[type=text]:focus { - /* make the text lighter */ - color: var(--theme-main-text) -} - - -/* base styles for buttons */ -input[type=submit] { - margin-left: .2em; - cursor: pointer; -} -/* Hovering over a button */ -input[type=submit]:hover { - /* make the text lighter */ - color: var(--theme-main-text) -} - -/* base styles for anchor tags */ -a { - color: #19f; - text-decoration: none; -} - - -h1 { - font-size: 2.5em; - overflow-wrap: anywhere -} -h2, h3 { - margin-top: 0; - margin-bottom: .2em -} -hr { - opacity: .2 -} -button { - outline: none; - font-family: inherit -} - - -.enter-username-button, .view-profiles-button { - /* add a slight shadow on the form in the index page */ - box-shadow: 0 0 1em #000; -} -.enter-username-button { - max-width: calc(90vw - 8em); -} - -/* the main "SkyBlock stats" title */ -#main-title { - text-align: center; - font-size: calc(2em + 1vw); - margin-top: 0; - /*! top: 1em; */ - /*! position: relative; */ - padding-top: .5em; -} - -/* the main "enter username" form */ -.user-form { - text-align: center; - font-size: 1.25rem; - - /* center the forms */ - margin: 0 auto; - width: max-content; -} - -.username { - /* usernames have the minecraft font */ - font-family: Minecraft, sans-serif; - /* rreduce the size of the text because the font is too big */ - font-size: .8em; - overflow-wrap: anywhere -} - -.emoji { - position: relative; - height: 1em; - vertical-align: text-bottom; - bottom: .1em -} - -.username-rank-prefix { - font-family: Minecraft, sans-serif; - font-size: .8em; - overflow-wrap: anywhere -} - -.profile-name { - margin-right: .5em -} - -.profile-members { - color: var(--theme-main-text) -} -.profile-members .username { - margin-right: .35em; -} - -.profile-list, .leaderboard-profile-list { - font-size: 1.5em; -} - -.profile-list-item { - margin-bottom: .5em; - color: var(--theme-darker-text) -} -.profile-list-item-active { - color: #fff -} -.profile-list-item-online { - color: #0e0 -} - -.head { - user-select: none -} - -.head2d { - /* pixelated rendering on 2d heads */ - image-rendering: crisp-edges; - image-rendering: pixelated; - /* make the head centered correctly */ - position: relative; - top: .1em; - /* same size as font */ - height: 1em; - width: 1em; -} - -.head3d { - /* make the head centered correctly */ - position: relative; - top: .2em; - /* same size as font */ - height: 1em; - width: 1em; -} - -.userHead { - /* make the head not be touching the username */ - margin-right: .2em; -} - -/* add a collapsible svg arrow */ -.collapseArrow { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTcuNSA0Ljc1bC03LjUgNy41LTcuNS03LjVMMSA2LjI1bDkgOSA5LTl6IiBmaWxsPSIjYWFhIi8+IDwvc3ZnPg==); - width: 20px; - height: 20px; - display: inline-block; - margin-right: 1em; - /* transition-duration: 100ms */ -} - -.collapsePart:not(.collapsed) .collapseArrow { - transform: rotate(-180deg) -} - -.sectionTitle { - display: inline-block; - margin: 0; - text-shadow: 0 0 .5em #000; -} - -/* hide all elements preceding a collapsed section */ -.collapsePart.collapsed ~ * { - display: none -} -.collapsePart { - cursor: pointer -} - -#categories section { - margin-bottom: .5em -} - -h2.sectionTitle { - font-size: 1.5em -} - -#toc { - border: 1px solid rgba(255,255,255,0.1); - max-width: max-content; - padding: .75em; - border-radius: 1em; - - display: inline-block; - background: rgba(0,0,0,.1); -} -#toc li { - list-style-type: none; -} -.member-leaderboard-item-anchor { - color: inherit -} -.member-leaderboard-item { - list-style-type: none -} - -.item { - display: inline-block; - font-size: 32px; - width: 1.2em; - height: 1.2em; - transition-property: font-size; - transition-duration: 500ms -} -.item-slot { - border: 1px solid #888; - border-radius: .1em -} -.item img { - position: absolute; - margin-top: .075em; - margin-left: .075em; - width: 1em; - height: 1em; -} -/* only pixelate items if they're not a head */ -.item img:not(.item-custom-head) { - image-rendering: crisp-edges; - image-rendering: pixelated; -} - -.item-slot { - margin: .05em -} - -.item-count { - font-size: .45em; - float: right; - position: relative; - top: 1.21em; - right: .1em; - font-family: Minecraft -} - -.inventory-content:not(.inventory-content-active) { - display: none -} - -#inventory-tabs { - margin-bottom: 1em; - margin-bottom: 1em; - overflow: hidden; - border-radius: 1em; - max-width: max-content; - width: min(40em, 100%); -} -.inventory-tab { - background-color: var(--theme-lighter-background); - color: var(--theme-main-text); - border: none; - padding: 1em; - cursor: pointer; - transition-duration: 200ms -} -.inventory-tab:hover, .inventory-tab-active { - background-color: var(--theme-lightest-background) -} - -#global-tooltip { - position: absolute; - user-select: none; - pointer-events: none; - overflow: hidden; - z-index: 100; - background-color: #0a0a0aee; - padding: 0 .25rem; - border-radius: 3px; - box-shadow: 0 0 0 3px #206,0 0 0 6px #000; - font-family: Minecraft; - white-space: nowrap; -} -#global-tooltip p { - margin: 0 -} -#global-tooltip .item-lore-name { - margin-bottom: .5em -} - - -#armor { - margin-right: 2em; - height: 16em; - display: inline-block; -} -#armor.armor-float { - float: left -} - -#inventories { - display: inline-block; - min-height: 16em -} -.inventory-container-armor .item-slot { - display: block; - margin-bottom: .25em -} -img.item-custom-head { - width: .75em; - height: .75em; - margin-top: .1875em; - margin-left: .1875em; -} - -.github-mark { - position: absolute; - top: .75em; - left: .75em; - opacity: .2; - transition-property: opacity; - transition-duration: 200ms; -} -.github-mark:hover { - opacity: .4 -} - -.list-item-with-icon { - list-style: none; - padding-left: 1.2em; - position: relative; - right: 1.2em; - image-rendering: crisp-edges; - image-rendering: pixelated; -} - -tr { - text-align: left -} - -.minions-table-locked { - opacity: .2 -} -.minions-table-unlocked { - color: #3e3 -} - -.darker-text { - color: var(--theme-darker-text) -} -.main-text { - color: var(--theme-main-text) -} - -@media only screen and (max-width: 490px) { - #inventories .item { - font-size: 24px - } -} -@media only screen and (max-width: 370px) { - #inventories .item { - font-size: 16px - } -} - - - -#main-header { - background-color: var(--theme-background); - box-shadow: 0 0 1em rgba(0, 0, 0, .8) -} - -header { - padding: .5rem 10%; -} -header .user-form { - margin: 0; - display: inline-block -} -header .enter-username-button { - box-shadow: none; -} - -.back-arrow { - float: left; - transition: stroke 200ms; - stroke: var(--theme-darker-text); - margin-top: .4em; - margin-right: 1em; -} -.back-arrow:hover { - stroke: var(--theme-main-text) -} - -#infobox { - float: right; - max-width: 95%; - background-color: rgba(20,20,20,.4); - padding: 1em; - margin-top: 2em; - width: 20em; - border-radius: .5em; - box-shadow: 0 0 1em #000; -} - -#infobox p { - margin: 0 0 .25em 0; -} - -@media only screen and (max-width: 600px) { - #infobox { - position: relative; - right: -2em; - margin-top: 0 - } -} -@media only screen and (max-width: 550px) { - #infobox { - position: unset; - box-shadow: none; - float: none; - border: 1px solid var(--theme-lighter-background); - } -} - -#login-button { - position: absolute; - right: .5em; - top: .5em; - border: 1px solid var(--theme-lighter-background); - padding: .5em; - transition-property: border, background-color; - transition-duration: 200ms; - border-radius: .5em; - color: var(--theme-main-text) -} -#login-button:hover { - background-color: var(--theme-lighter-background); - border-color: var(--theme-lightest-background); -} -#edit-profile-things { - margin-top: 2em -} -#edit-profile-title { - margin-bottom: 0 -} -#background-selector { - display: flex; - flex-wrap: wrap -} -#background-selector > span { - display: inline-block; - height: 10em; - width: 18em; - background-position: center; - background-size: 110%; - margin: .5em; - border-radius: 1em; - transition: background-size 500ms; - cursor: pointer -} -#background-selector > span:hover { - background-size: 125%; -} -#profile-emoji-selector { - width: 2em; - padding: 0; - text-align: center; -} - - -.leaderboard-profile-list-item { - overflow-wrap: break-word -} -#leaderboard-profile-list { - margin-top: 1em -} -#leaderboard-title { - margin-bottom: 0 -} -#leaderboard-info { - margin-top: .5em; - display: block -} -.skill-extra-info { - position: absolute; - opacity: .5; - left: 23em -} -.skill-level { - opacity: .9 -} -.skill-maxed { - color: #0e0; - opacity: 1 -} -.tooltip { - position: relative; - cursor: pointer; - /* commented out because idk why this is here */ - /* max-width: max-content */ -} -.tooltip::after { - font-size: 1rem; - display: inline-block; - left: 50%; - opacity: 0; - position: absolute; - z-index: -100; - background: var(--theme-lightest-background); - border-radius: .25em; - bottom: 125%; - color: var(--theme-main-text); - content: attr(data-tooltip); - margin-left: max(calc(-50% - 1em), -5em); - padding: .5em; - transition: all 200ms; - transform: scale(.6) translateY(50%); - width: max-content; - text-align: center; - max-width: 10em; - cursor: auto; - box-shadow: 0 0 1em .5em #0002; - pointer-events: none -} -.tooltip:hover::after, .tooltip:focus::after { - opacity: .9; - transform: scale(1) translateY(0); - z-index: 100; -} -/* hide all the tooltips after if one is selected, unfortunately we can't select all the elements before :( */ -.tooltip:focus ~ .tooltip::after { - transform: scale(.6) translateY(50%); - opacity: 0 -} -.leaderboard-title-with-icon { - padding-left: 1.2em; - position: relative; - image-rendering: crisp-edges; - image-rendering: pixelated; -} - -.item-custom-head { - image-rendering: auto -} - -.total-stat { - font-size: 1.2em; - list-style-type: none; - position: relative; - right: 1em; - bottom: .5em -} - -.profile-skills { - display: inline-block; - position: absolute; - margin: 1em; - margin-top: 1.6em; -} - -.profile-skills > ul { - margin-top: 0; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 2em; -} - -.profile-skills > ul > li { - width: 10em -} - - -#collections ul { - margin: 0; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 0; - width: fit-content -} - -#collections ul > li { - width: 12em; - height: 1.5em; - text-overflow: ellipsis; -} - -#collections h3 { - margin: .5em 0 .5em .5em; -} - -@media only screen and (max-width: 1000px) { - .profile-skills { - position: unset; - display: block; - width: max-content; - } - .blurred-background-container-container { - left: 0!important; - width: 100vw!important; - clip: rect(-1.7em, auto, auto, auto); - } -} - -@media only screen and (max-width: 500px) { - .profile-skills { - margin-left: 0; - margin-right: 0 - } -} -@media only screen and (max-width: 410px) { - .profile-skills > ul { - grid-template-columns: repeat(1, 1fr); - } -} - - -.unvisited-zone { - opacity: .5 -} - -.profile-skills > ul > li { - margin: .25em .25em 0 0; -} - - -.blurred-background-container-container { - position: absolute; - width: 47rem; - height: calc(100% + 1em); - z-index: -9; - overflow: hidden; - clip: rect(-1em, auto, auto, -2em); -} -@media only screen and (max-width: 1400px) { - .blurred-background-container-container { - left: calc(5em + 5%); - width: 90%; - clip: rect(-1.7em, auto, auto, -10em); - } - main { - margin-top: .75em - } -} -.blurred-background { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: -10; - object-fit: cover; - background-blend-mode: overlay; - filter: blur(1em) brightness(.6); -} -.profile-emoji { - margin-left: .25em -} - -.mayor-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 1em; - grid-row-gap: 1em; - margin-top: 1em; - margin-bottom: 1em; -} -.mayor { - display: inline-block; - width: 12em; - margin-right: 1em; - vertical-align: top; -} -.mayor h3 { - filter: brightness(1.5); - text-align: center; -} -.mayor img { - display: block; - width: 5em; - margin: 0 auto; -} -.mayor-vote-count-number { - filter: brightness(1.2); -} -.mayor-vote-count { - text-align: center; - width: 100%; - margin: 0 0 .5em 0; -} -.mayor-perk h4 { - margin-bottom: 0 -} -.mayor-perk p { - margin: 0 -} -.mayor-candidates { - /* display: ; */ - /* everything next to each other */ - /* grid-template-columns: repeat(5, 1fr); */ - max-width: fit-content -} -.mayor-perks { - list-style-type: none; - padding: 0 -} -.candidate-year { - font-weight: normal; - color: var(--theme-darker-text) -} -.mayor-winner { - color: var(--theme-yellow); - font-weight: bold; - margin: 0; - text-align: center; - font-size: 1em -} -.next-special-mayor-time { - color: var(--theme-darker-text) -} |