Pokemon Sword and Shield inspired Layout.
Introduced Teambuilder style.
There is a problem with the grid not following the page resize flow.
Pokemon SwSh Layout by harasuke
Details
Authorharasuke
LicenseNo License
Categorypokemonshowdown
Created
Updated
Size136 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Ver 1.7.5:
Fix battle layout for mobile landscape
Ver 1.6.9:
Teambuilder light/dark theme. Set showdown to light or adjust based on system settings.
Ver 1.6.8:
Fix Pokemon layout.
Improved trickroom.
Improved protect animation design.
Ver 1.6.7:
Fix team preview layout
Ver 1.6.6:
New battle background.
Minor fix on sprites position and tooltips position.
Fix enemy protect layout position.
Fix healthbar layout when Pokemon name is too long.
Ver 1.6.5:
Trying to fix name type image. There is a fallback value but doesn't always work.
Ver 1.6.4:
Fix team builder small layout errors.
Teambuilder new visuals for selecting moves/items/ability.
Ver 1.6.3:
Fixed teambuilder view not auto-flow with page
Ver 1.6.2:
Fixed small errors with mobile layout.
Improved Switch Pokemon selection buttons
Ver: 1.6.0:
Fixed Icons url resolution using Safari. All Type icons have been converted to SVG.
Ver: 1.5.0:
Teracristal button fixed
Better support for mobile [testing]
Ver: 1.5.0:
Improved mobile interface [testing]
Ver: 1.3.0:
Improved mobile interface [testing]
Ver: 1.0.2:
Teracrystal button style works only on Chrome. Other browsers does not support checkbox ‘accent-color’ property
credits and extra info on Github
https://github.com/harasuke/SwSh-Showdown-Layout
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name SwSh Pokémon Theme
@namespace pokemonshowdown.com
@version 1.7.5
@description Sword&Shield inspired theme
@author Mirko Spinato
==/UserStyle== */
@-moz-document domain("play.pokemonshowdown.com"), domain("psim.us"), domain("replay.pokemonshowdown.com") {
.ps-room .battle-controls {
top: 420px !important;
}
.battle {
padding-top: 50px;
}
.background {
position: absolute;
top: -80px;
}
/*
Battlefield background image rendered by me.
Battleplane image created by me.
Background Battle Stadium 3d Model Information:
source: https://sketchfab.com/3d-models/pokemon-stadium-c7ae71285d404b9fb390dbe7cd14e57d
author: Tigerar1 (https://sketchfab.com/allanromanreyes)
*/
.backdrop {
background-image: url(https://i.ibb.co/G059m4C/battleground.png) !important;
background-position-x: -60px;
background-position-y: -60px;
width: var(--battlescreen-width) !important;
height: var(--battlescreen-height) !important;
top: -50px !important;
left: 0 !important;
}
:root {
--btnH: 35px;
--whiteHealthWidth: 220px;
--whiteHealthHeight: 55px;
--battlescreen-width: 640px;
--battlescreen-height: 410px;
--bottom-padding-fix: 8px;
/* teambuilder room colors */
--bg_color_teambuilder: rgba(51,51,51,0.1);
/*Colors of types*/
--Bug: rgb(173, 185, 68);
--Dark: rgb(61, 61, 61);
--Dragon: rgb(116, 105, 230);
--Electric: rgb(247, 205, 85);
--Fairy: rgb(243, 175, 250);
--Fighting: rgb(164, 86, 71);
--Fire: rgb(235, 83, 53);
--Flying: rgb(119, 152, 252);
--Ghost: rgb(102, 103, 181);
--Grass: rgb(123, 201, 47);
--Ground: rgb(203, 178, 90);
--Ice: rgb(156, 220, 254);
--Normal: rgb(173, 171, 144);
--Poison: rgb(159, 91, 150);
--Psychic: rgb(230, 100, 152);
--Rock: rgb(184, 170, 111);
--Steel: rgb(166, 168, 196);
--Water: rgb(76, 155, 240);
/*type icon images*/
--type_icon_Bug: url('data:image/svg+xml,<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m342.198.501279c.373-.5317158 1.105-.660937 1.637-.288625l36.354 25.455546c.532.3723.661 1.1051.289 1.6368l-50.599 72.2623c24.599 7.8587 41.358 16.3357 41.358 16.3357s-40.964 70.462-110.443 70.462-118.85-65.672-118.85-65.672 17.506-11.172 43.456-20.7539l-55.5-66.1415c-.417-.4973-.352-1.2386.145-1.6558l33.997-28.52715c.498-.41723 1.239-.35238 1.656.14487l70.272 83.74688c6.017-.6806 12.147-1.061 18.333-1.061 8.891 0 17.771.6759 26.44 1.8229zm13.746 189.200721c18.541-13.242 46.597-47.804 46.597-47.804s71.664 56.79 71.664 177.206c0 120.415-123.896 192.888-123.896 192.888s-59.195-59.781-73.727-135.562c-14.531-75.781 21.496-159.927 21.496-159.927s39.324-13.559 57.866-26.801zm-199.683 0c-18.541-13.242-46.597-47.804-46.597-47.804s-71.664 56.79-71.664 177.206c0 120.415 123.896 192.888 123.896 192.888s59.195-59.781 73.727-135.562c14.531-75.781-21.496-159.927-21.496-159.927s-39.324-13.559-57.866-26.801z" fill="%23fff" fill-rule="evenodd"/></svg>');
--type_icon_Dark: url('data:image/svg+xml,<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M229.379 452.85C239.106 454.339 249.068 455.111 259.212 455.111C367.214 455.111 454.767 367.558 454.767 259.556C454.767 151.553 367.214 64 259.212 64C251.966 64 244.811 64.3941 237.77 65.1621C291.345 105.751 326.767 176.062 326.767 256C326.767 340.04 287.616 413.44 229.379 452.85ZM255.656 512C397.041 512 511.656 397.385 511.656 256C511.656 114.615 397.041 0 255.656 0C114.271 0 -0.34375 114.615 -0.34375 256C-0.34375 397.385 114.271 512 255.656 512Z" fill="white"/></svg>');
--type_icon_Dragon: url('data:image/svg+xml,<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M280.702 254.881C284.172 252.765 287.116 248.331 289.49 243.403C320.735 256.173 342.692 286.349 342.692 321.54C342.692 368.29 303.942 406.189 256.142 406.189C236.52 406.189 218.423 399.802 203.906 389.039C199.144 386.784 195.226 384.618 192.02 382.845C187.047 380.096 183.786 378.293 181.744 378.575C175.775 379.398 177.508 384.89 179.083 389.879C180.152 393.268 181.149 396.425 179.606 397.727C177.992 399.091 172.764 394.106 166.655 388.282C158.339 380.353 148.391 370.868 143.7 373.717C139.991 375.97 143.592 382.081 148 389.561L148.327 390.116C150.189 393.278 152.347 396.498 154.316 399.436C158.319 405.407 161.543 410.219 159.93 411.033C157.98 412.017 144.394 402.847 132.945 390.116C128.526 385.203 124.246 379.877 120.268 374.928L120.268 374.927C111.561 364.093 104.307 355.068 100.235 356.137C95.3365 357.423 99.0421 367.527 104.487 377.25C107.033 381.797 110.028 386.427 112.621 390.436L112.621 390.437C116.654 396.671 119.715 401.402 118.605 401.984C117.107 402.767 103.926 389.914 94.9734 373.717C89.6559 364.096 85.1909 353.464 81.5761 344.857C77.656 335.522 74.7359 328.569 72.8131 327.869C66.1325 325.438 66.1325 339.059 68.8119 358.718C69.1614 361.283 69.6819 363.973 70.3228 366.712C96.307 450.785 176.128 512 270.567 512C386.084 512 479.728 420.412 479.728 307.432C479.728 199.9 394.899 111.747 287.12 103.494C287.256 98.4284 289.9 88.383 289.9 88.383C289.9 88.383 308.927 42.3472 309.933 32.5099C309.999 31.857 310.078 31.1475 310.163 30.3919C311.348 19.7629 313.553 0 296.551 0C287.471 0 283.249 6.75464 278.42 14.4799L278.42 14.48C276.566 17.4457 274.622 20.5545 272.28 23.479C255.412 44.5436 227.048 70.8488 210.965 84.8631C176.971 114.484 143.619 138.828 124.167 153.026L124.167 153.026L124.166 153.027C115.319 159.484 109.348 163.843 107.5 165.644C93.574 179.22 43.6418 269.286 43.6418 269.286C43.6418 269.286 27.4943 298.182 33.2338 304.043C38.9733 309.903 52.8141 308.56 52.8141 308.56C52.8141 308.56 238.755 265.903 255.402 262.539C259.884 261.633 263.048 261.11 265.477 260.709C272.072 259.62 273.256 259.424 280.702 254.881ZM149.235 200.064C139.254 209.551 122.701 232.196 122.701 232.196C122.701 232.196 153.465 234.091 170.408 217.986C187.352 201.88 183.47 174.433 183.47 174.433C183.47 174.433 159.215 190.577 149.235 200.064Z" fill="white"/></svg>');
--type_icon_Electric: url('data:image/svg+xml,<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M152.56 0.583659C152.461 0.29796 152.674 0 152.976 0H332.805C332.998 0 333.169 0.125587 333.226 0.309782L415.824 267.171C415.911 267.454 415.7 267.741 415.403 267.741H295.684C295.538 267.741 295.433 267.88 295.473 268.021L364.135 509.726C364.269 510.195 363.654 510.501 363.361 510.111L96.5295 155.267C96.3115 154.977 96.5184 154.563 96.881 154.563H205.536C205.687 154.563 205.793 154.414 205.743 154.271L152.56 0.583659Z" fill="white"/></svg>');
--type_icon_Fairy: url('data:image/svg+xml,<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M102.726 405.978L184.848 382.166L255.778 511.857C255.871 512.025 256.112 512.025 256.204 511.857L327.134 382.166L409.257 405.978C409.441 406.031 409.612 405.86 409.557 405.676L385.741 325.179L511.856 256.204C512.025 256.112 512.025 255.871 511.857 255.779L384.702 186.235L409.557 102.225C409.612 102.041 409.441 101.87 409.257 101.923L325.208 126.294L256.204 0.126188C256.112 -0.0420597 255.871 -0.0420644 255.779 0.126184L186.775 126.294L102.726 101.923C102.542 101.87 102.371 102.041 102.426 102.225L127.281 186.235L0.126188 255.779C-0.0420597 255.871 -0.0420644 256.112 0.126184 256.204L126.241 325.179L102.426 405.676C102.371 405.86 102.542 406.031 102.726 405.978ZM166.452 256.876L224.631 288.695L256.45 346.873C256.542 347.042 256.784 347.042 256.876 346.873L288.695 288.695L346.873 256.876C347.041 256.784 347.041 256.542 346.873 256.45L288.695 224.631L256.876 166.453C256.784 166.284 256.542 166.284 256.45 166.453L224.631 224.631L166.452 256.45C166.284 256.542 166.284 256.784 166.452 256.876Z" fill="white"/></svg>');
--type_icon_Fighting: url('data:image/svg+xml,<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.2336 42.5656C94.4299 18.1014 116.593 0 142.983 0C162.778 0 180.195 10.1847 190.279 25.6H206.792C217.051 15.0716 231.384 8.53333 247.245 8.53333C270.499 8.53333 290.471 22.5882 299.129 42.6667H312.954C321.617 37.2585 331.853 34.1333 342.818 34.1333C366.073 34.1333 386.044 48.1882 394.702 68.2667H432.297C432.618 68.2667 432.919 68.3532 433.178 68.5041C434.895 68.347 436.634 68.2667 438.391 68.2667C469.582 68.2667 494.866 93.5514 494.866 124.742V294.086L494.867 294.4L494.866 294.714V297.153C494.866 298.186 494.838 299.215 494.782 300.239C491.384 417.717 385.749 512 255.933 512C123.974 512 17 414.577 17 294.4C17 236.391 41.9249 183.683 82.5535 144.675C82.4522 201.228 83.4074 259.694 87.8107 258.691C99.6011 256.003 90.3891 80.8395 88.2336 42.5656Z" fill="white"/></svg>');
--type_icon_Fire: url('data:image/svg+xml,<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M352.258 395.394C358.584 372.263 346.305 324.71 346.305 324.71C346.305 324.71 337.399 363.449 323.483 377.767C311.611 389.98 297.066 398.451 276.206 400.677C293.261 392.393 304.99 375.12 304.99 355.155C304.99 327.129 281.878 304.409 253.368 304.409C224.858 304.409 201.745 327.129 201.745 355.155C201.745 362.809 203.47 370.068 206.557 376.576C188.725 362.37 185.921 339.594 185.921 339.594C185.921 339...