From 56f5841d4b9c12296cdfcaeff174b2627d59afc8 Mon Sep 17 00:00:00 2001 From: Star Rauchenberger Date: Sat, 7 Dec 2024 11:49:49 -0500 Subject: Migrate to full rails app --- app/assets/stylesheets/pokemon.css.scss | 674 ++++++++++++++++++++++++++++++++ 1 file changed, 674 insertions(+) create mode 100644 app/assets/stylesheets/pokemon.css.scss (limited to 'app/assets/stylesheets/pokemon.css.scss') diff --git a/app/assets/stylesheets/pokemon.css.scss b/app/assets/stylesheets/pokemon.css.scss new file mode 100644 index 0000000..df2a184 --- /dev/null +++ b/app/assets/stylesheets/pokemon.css.scss @@ -0,0 +1,674 @@ +/* + Place all the styles related to the matching controller here. + They will automatically be included in application.css. +*/ + +#banner { + box-sizing: border-box; + height: 2em; + margin: 0 auto; + width: 60%; +} + +#content { + margin: 2em; +} + +.trainer { + margin: 1em auto; + width: 48em; + font-family: 'Power Green'; + box-sizing: border-box; + background-color: #f7f7f7; + border: 1px solid #999; + -webkit-border-top-left-radius: 6px; + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topleft: 6px; + -moz-border-radius-topright: 6px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + + .trainer-info { + padding: .5em .75em .25em .75em; + -webkit-border-top-left-radius: 6px; + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topleft: 6px; + -moz-border-radius-topright: 6px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border-bottom: 1px solid #888; + + &.ruby { + background-color: #D67873; + } + + &.sapphire { + background-color: #445E9C; + } + + &.firered { + background-color: #F5AC78; + } + + &.leafgreen { + background-color: #A7DB8D; + } + + &.emerald { + background-color: #4E8234; + } + + &.unaccounted { + background-color: black; + + h2 { + color: white; + } + } + + h2 { + margin: 0; + display: inline-block; + font-size: 24px; + } + + .tid { + display: inline-block; + font-size: 13px; + } + } + + .pc-boxes { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .party { + margin: 0; + + li { + display: block; + margin: -5px 0; + + .party-icon { + display: inline-block; + vertical-align: middle; + + img { + image-rendering: pixelated; + } + } + + .party-name { + vertical-align: sub; + display: inline-block; + margin-left: .25em; + white-space: pre; + } + + a { + color: black; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + } + + .pc-box { + margin: .5em; + padding: .5em; + border: 1px solid #ccc; + border-radius: 4px; + width: 236px; + box-sizing: border-box; + + h3 { + margin: 0; + text-align: center; + } + + .pc-contents { + margin: 0; + + .spacer { + display: block; + width: 32px; + height: 32px; + } + + img { + image-rendering: pixelated; + } + } + } + } +} + +.pkv-hover { + display: none; + background-color: #111; + color: #fff; + z-index: 1; + padding: .5em; + box-shadow: 0px 0px 2px 1px #B3B3B3; + border-radius: 4px; + position: absolute; + max-width: 45ch; + text-align: left; + + .pc-data-name { + font-weight: bold; + white-space: pre; + } +} + +.pokemon-list { + display: flex; + flex-wrap: wrap; + padding: 0 1em; + + li { + display: block; + + img { + image-rendering: pixelated; + } + } +} + +.pokemon { + font-family: 'Power Green'; + display: flex; + margin: 1em 0; + background-color: #c0c8c4; + border: 1px solid #888; + overflow: hidden; + + .ot-gender { + &.male { + color: blue; + } + + &.female { + color: red; + } + } + + .pokemon-name { + font-weight: bold; + white-space: pre; + + a { + color: blue; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + &.in-emerald { + .pokemon-image { + .pokemon-sprite { + margin: -14px; + } + } + } + + .pokemon-basics { + width: 8.5em; + + .pokemon-nameline { + background-color: #dcb880; + padding: 6px 6px 0 6px; + border-top: 1px solid #d8a878; + border-left: 1px solid #d8a878; + border-right: 1px solid #d8a878; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + margin: .25em .25em 0; + } + + .pokemon-ball { + margin: -8px; + image-rendering: pixelated; + } + + .pokemon-name { + margin-left: 3px; + } + + .pokemon-gender { + float: right; + + &.female { + color: #ff6363; + } + + &.male { + color: #00a2ff; + } + } + + .pokemon-level { + padding: 4px 8px 0px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + background-color: white; + margin: 0 .25em; + } + + .pokemon-image { + text-align: center; + + .pokemon-image-wrap { + margin: 1em auto; + border: 10px solid #e0e0c8; + background-color: white; + border-radius: 10px; + display: inline-block; + padding: 4px; + position: relative; + + img { + image-rendering: pixelated; + } + + .pkv-shiny-star { + position: absolute; + top: 0; + right: -1.5em; + image-rendering: pixelated; + } + } + } + + .pokemon-item-label { + background-color: #dcb880; + color: white; + border-top: 1px solid #d8a878; + padding: .25em .25em 0 0.5em; + + &.with-item { + padding-left: 30px; + } + + &:not(.with-item) { + margin-top: .25em; + } + } + + .pokemon-item { + background-color: white; + padding: .25em .25em .25em .5em; + + img { + vertical-align: bottom; + margin: -4px -4px -4px -8px; + image-rendering: pixelated; + } + } + } + + .pkv-type { + image-rendering: pixelated; + } + + table { + border-spacing: 0; + width: 100%; + + th { + text-align: left; + color: white; + font-weight: normal; + white-space: nowrap; + } + + .table-bubble { + background-color: #e4f0f0; + text-align: center; + padding: 4px 1em 0 1em; + height: 100%; + + &.tb-top { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + + &.tb-bottom { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } + } + + .tb-only { + text-align: center; + background-color: #e4f0f0; + border-radius: 6px; + padding: 3px 3px 0 3px; + height: 100%; + } + + tr:nth-child(odd) { + .table-bubble { + background-color: #e4e8d0; + } + } + } + + .pokemon-tab { + border-left: 1px solid #585450; + flex: 1 0px; + } + + .pokemon-details { + background-color: #94c49c; + + table { + padding-top: .75em; + + th { + padding: .25em 1em 0 .5em; + } + + td { + padding: 0 .5em 0 0; + } + + tr:nth-child(odd) { + background-color: #84ac88; + } + } + } + + .pokemon-stats { + background-color: #6870d8; + + table { + padding-top: .5em; + + tr:nth-child(even) { + background-color: #8890f8; + } + + th { + padding: .25em .5em 0 1.5em; + } + + td { + padding: 0 1em 0 0; + } + + .pokemon-nature-label th { + padding-top: .75em; + } + + .nature-benefit { + color: #99ff00; + } + + .nature-hinder { + color: red; + } + } + } + + .pokemon-moves { + background-color: #ff847c; + + table { + padding-top: .75em; + + tr:nth-child(even) { + background-color: #f7aca6; + + .tb-only { + color: black; + } + } + + tr:nth-child(odd) { + td { + padding-top: .25em; + color: white; + } + } + + th { + padding: .25em 0.25em 0 .25em; + text-align: right; + } + + td { + padding-right: .5em; + } + + .pp-label { + display: block; + position: absolute; + padding-left: .125em; + } + + .pp-value { + display: block; + margin-left: 2em; + text-align: right; + } + } + } + + .pokemon-met-label { + background-color: #84ac88; + padding: .75em 0 0 .5em; + overflow: hidden; + color: white; + } + + .pokemon-description { + background: linear-gradient( + to bottom, + #e4f0f0, + #e4f0f0 50%, + #e4e8d0 50%, + #e4e8d0 + ); + + background-size: 100% 3em; + padding: 0 .5em; + height: 100%; + line-height: 1.5em; + border-top: 1px solid #888; + } + + .pokemon-ribbons { + background-color: #f8d8f8; + + ul { + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0.5em; + + li { + display: block; + + img { + image-rendering: pixelated; + } + } + } + } + + .pokemon-contest { + background-color: #b9d7f2; + + .pokemon-condition { + display: block; + + .pkcv-cool-circle { + fill: #f59a55; + } + + .pkcv-beauty-circle { + fill: #8095ff; + } + + .pkcv-cute-circle { + fill: #f5a8d3; + } + + .pkcv-smart-circle { + fill: #79e15c; + } + + .pkcv-tough-circle { + fill: #f7f100; + } + + .pkcv-outline { + stroke: gray; + stroke-width: 5; + stroke-linejoin: round; + fill: white; + fill-opacity: 0.3; + } + + .pkcv-line { + stroke: gray; + stroke-width: 2; + } + + .pkcv-data { + fill: #4ee100; + fill-opacity: 0.9; + } + + .pkcv-label, .pkcv-label-outline { + font-family: "Power Green"; + font-size: 50px; + text-anchor: middle; + } + + .pkcv-label-outline { + stroke: #f0f8f8; + stroke-width: 6; + stroke-linejoin: butt; + } + + .pkcv-sheen-bg { + fill: #706860; + } + + .pkcv-sheen-data { + fill: #a048c8; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + } + + .pkcv-sheen-border { + fill-opacity: 0; + stroke-width: 5; + stroke: gray; + } + + .pkcv-sheen-label { + fill: white; + font-size: 40px; + } + } + } +} + +.clear { + clear: both; +} + +#pokemon-embed { + width: 350px; + margin: 1em; + + #pokemon-embed-tabs { + margin: 0; + padding: 0; + text-align: right; + + li { + display: inline-block; + padding: 3px; + border-width: 1px 1px 0 1px; + border-style: solid; + border-color: #888; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + + a { + font-family: 'Power Green'; + color: white; + text-decoration: none; + text-transform: uppercase; + } + + &.ptabe-details { + background-color: #94c49c; + + &.active, &:hover { + background-color: #84ac88; + } + } + + &.ptabe-stats { + background-color: #8890f8; + + &.active, &:hover { + background-color: #6870d8; + } + } + + &.ptabe-moves { + background-color: #f7aca6; + + &.active, &:hover { + background-color: #ff847c; + } + } + + &.ptabe-contest { + background-color: #b9d7f2; + + &.active, &:hover { + background-color: #63aef2; + } + } + + &.ptabe-ribbons { + background-color: #f8d8f8; + + &.active, &:hover { + background-color: #f8a0f8; + } + } + } + } + + .pokemon { + margin: 0; + } + + .pokemon-tab { + display: none; + } +} + +#pk-embed-code { + width: 50%; + + textarea { + width: 100%; + height: 4em; + } +} -- cgit 1.4.1