API tools faq
paste
dotunion

win98 but with prettier tabs

dotunion
Mar 14th, 2025 (edited)
380
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.29 KB | None | 0 0
raw download clone embed print report
  1. [sc=win][sc=tb][sc=tbt]user.exe[/sc][sc=bu][/sc][/sc][sc=b][sc=tabbed_interface horizontal]
  2. [ul]
  3. [li]tab 1[/li]
  4. [li]tab 2[/li]
  5. [li]tab 3[/li]
  6. [li]tab 4[/li]
  7. [li]tab 5[/li]
  8. [li]tab 6[/li]
  9. [/ul][
  10. ][sc=tab-active]tab 1
  11. [/sc][
  12. ][sc=tab]tab 2
  13. [/sc][
  14. ][sc=tab]tab 3
  15. [/sc][
  16. ][sc=tab]tab 4
  17. [/sc][
  18. ][sc=tab]tab 5
  19. [/sc][
  20. ][sc=tab]tab 6
  21. [/sc][/sc][/sc][sc=sb][sc=sbf][url=https://pfq.link/@J3dF]code[/url][/sc][/sc][/sc]
  22.  
  23. [style]
  24.  
  25. @font-face {
  26. font-family: "Pixelated MS Sans Serif";
  27. src: url(https://unpkg.com/[email protected]/dist/ms_sans_serif.woff) format("woff");
  28. }
  29.  
  30. /* tabbed ui */
  31.  
  32. .tabbed_interface>ul {
  33. background-color: inherit;
  34. padding: 5px;
  35. margin-top: -15px;
  36. }
  37.  
  38. .tabbed_interface>ul li {
  39. cursor: pointer;
  40. background-color: silver;
  41. padding-left: 5px;
  42. margin-bottom: -4px;
  43. padding-top: 3px;
  44. border: none;
  45. font-size: 14px;
  46. color: #222;
  47. display: block;
  48. text-decoration: none;
  49. border-top-left-radius: 3px;
  50. border-top-right-radius: 3px;
  51. box-shadow: inset -1px 0 #0a0a0a, inset 1px 1px #dfdfdf, inset -2px 0 #808080, inset 2px 2px #fff;
  52. z-index: 1;
  53. }
  54.  
  55. .tabbed_interface>ul>li.tab-active {
  56. background-color: silver;
  57. border-bottom: 1px solid #dfdfdf;
  58. margin-left: -5px;
  59. margin-top: -2px;
  60. padding-bottom: 2px;
  61. position: relative;
  62. z-index: 8;
  63. }
  64.  
  65. .tabbed_interface>div {
  66. color: #000;
  67. font-size: 13px;
  68. background: silver;
  69. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  70. padding: 10px;
  71. border: none;
  72. }
  73.  
  74. .win {
  75. width: 305px;
  76. height: auto;
  77. background: silver;
  78. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  79. padding: 3px;
  80. }
  81.  
  82. .tb {
  83. align-items: center;
  84. background: linear-gradient(90deg, navy, #1084d0);
  85. display: flex;
  86. justify-content: space-between;
  87. padding: 3px 2px 3px 3px;
  88. }
  89.  
  90. .tbt {
  91. font-family: "Pixelated MS Sans Serif";
  92. color: #fff;
  93. font-weight: 700;
  94. letter-spacing: 0;
  95. margin-right: 24px;
  96. font-size: 11px;
  97. }
  98.  
  99. .bu {
  100. display: block;
  101. min-height: 14px;
  102. min-width: 16px;
  103. background-color: silver;
  104. background-image: url("https://i.imgur.com/ZgM2cE6.png");
  105. background-position: top 3px left 4px;
  106. background-repeat: no-repeat;
  107. margin-left: 2px;
  108. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  109. }
  110.  
  111. .b {
  112. margin: 8px;
  113. color: #222;
  114. font-family: "Pixelated MS Sans Serif";
  115. font-size: 12px;
  116. }
  117.  
  118. .sb {
  119. gap: 1px;
  120. display: flex;
  121. margin: 0 1px;
  122. }
  123.  
  124. .sbf {
  125. box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
  126. flex-grow: 1;
  127. margin: 0;
  128. padding: 2px 3px;
  129. color: #222;
  130. font-family: "Pixelated MS Sans Serif";
  131. font-size: 12px;
  132. text-align: center;
  133. }
  134.  
  135. /* links */
  136.  
  137. a {
  138. display: inline-block;
  139. transition: .2s ease;
  140. text-decoration: underline;
  141. color: #222;
  142. }
  143.  
  144. a:hover {
  145. transform: translateY(-20%);
  146. }
  147.  
  148. /* tooltip */
  149.  
  150. div.tooltip_content {
  151. background: rgba(0, 0, 0, 00);
  152. color: #fff;
  153. border: solid 1px #000;
  154. }
  155.  
  156. div.tooltip_content {
  157. width: auto;
  158. margin: auto;
  159. position: absolute;
  160. z-index: 1;
  161. font-size: 13px;
  162. letter-spacing: 1px;
  163. word-spacing: 2px;
  164. background: silver;
  165. color: #222;
  166. border: none;
  167. border-radius: 0px;
  168. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  169. text-align: center;
  170. }
  171.  
  172. .bbcode_tooltip {
  173. border-bottom: #222 underline dotted;
  174. }
  175.  
  176. /* progress bar */
  177.  
  178. .expbar {
  179. background: none;
  180. border-radius: 1px;
  181. width: 96%;
  182. height: 10px;
  183. border: none;
  184. overflow: hidden;
  185. color: #000;
  186. box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
  187. background: silver;
  188. >div {
  189. background-image: url("https://i.postimg.cc/hjDsHt0f/mmm.png");
  190. background-color: silver;
  191. background-size: 14px;
  192. border: none;
  193. border-right: 1px solid #000099;
  194. }
  195. }
  196.  
  197. /* table */
  198.  
  199. table {
  200. border: none;
  201. padding: 4px;
  202. border-collapse: separate;
  203. width: auto;
  204.  
  205. th, td {
  206. text-align: center;
  207. padding: 5px;
  208. border-radius: 0px;
  209. border: none;
  210. color: #fff;
  211.  
  212. }
  213. th {
  214. background-color: silver;
  215. color: #222;
  216. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  217. }
  218. td {
  219. color: #222;
  220. background-color: #dfdfdf;
  221. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  222. }
  223. }
  224. table {
  225. margin: 0 auto;
  226. }
  227.  
  228. .panel {
  229. Width: 90%;
  230. margin: auto;
  231. border-radius: 0px;
  232. box-shadow: none;
  233. border: none;
  234. &>h3 {
  235. color: #fff;
  236. &>a {
  237. color: #fff;
  238. }
  239. text-align: center;
  240. background: linear-gradient(90deg, navy, #1084d0);
  241. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  242. font-size: 12px;
  243. border-radius: 0px;
  244. border: none;
  245. a:hover {
  246. transform: none;
  247. }
  248. }
  249. &>div {
  250. background-color: #dfdfdf;
  251. box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  252. display: block;
  253. margin: 0;
  254. padding: 6px;
  255. color: #222;
  256. border: none;
  257. }
  258. }
  259.  
  260. /* These default to the VIEWER's skin colors */
  261. /* To customize them, just set hex color codes instead */
  262. @platform-base: silver;
  263. @platform-border: #222;
  264. @name-color: #222;
  265. @name-background: silver;
  266. @name-border: #222;
  267. @berry-background: @col-flavour-up;
  268. @berry-border: @col-fg1;
  269. /* Set to "block" to show, "none" to hide */
  270. @display-item: block;
  271. @display-berries: block;
  272.  
  273. .party {
  274. display: inline-block;
  275. &,>div {
  276. padding: 0;
  277. margin: 0;
  278. background: transparent;
  279. width: 120px !important;
  280. height: 120px;
  281. overflow: hidden;
  282. border: none;
  283. border-radius: 0;
  284. box-shadow: none;
  285. }
  286. >div {
  287. &::after {
  288. display: none;
  289. }
  290. .pkmn {
  291. margin: 0 10px;
  292. float: unset;
  293. &::before {
  294. background-color: @platform-base;
  295. border-color: @platform-border;
  296. }
  297. .helditem {
  298. display: @display-item;
  299. .itemsprite {
  300. cursor: unset;
  301. }
  302. .tooltip_content {
  303. display: none;
  304. }
  305. }
  306. }
  307. .name {
  308. background-color: @name-background;
  309. border: 1px solid @name-border;
  310. border-radius: 0px;
  311. margin-top: 1px;
  312. height: 16px;
  313. display: flex;
  314. flex-wrap: nowrap;
  315. a {
  316. color: @name-color;
  317. font-weight: normal;
  318. margin: 0 2px;
  319. width: 80px !important;
  320. flex-grow: 99;
  321. font-size: 12px;
  322. }
  323. img {
  324. display: none;
  325. }
  326. img:nth-last-of-type(-n+2) {
  327. display: inline;
  328. margin: 0;
  329. }
  330. }
  331. .action {
  332. display: @display-berries;
  333. position: absolute;
  334. left: 88px;
  335. top: 70px;
  336. height: unset;
  337. width: unset;
  338. .berrybuttons[data-up="any"]>a[data-berry="aspear"],
  339. .berrybuttons[data-up="sour"]>a[data-berry="aspear"],
  340. .berrybuttons[data-up="spicy"]>a[data-berry="cheri"],
  341. .berrybuttons[data-up="dry"]>a[data-berry="chesto"],
  342. .berrybuttons[data-up="sweet"]>a[data-berry="pecha"],
  343. .berrybuttons[data-up="bitter"]>a[data-berry="rawst"] {
  344. display: inline-block;
  345. }
  346. .berrybuttons {
  347. >a {
  348. display: none;
  349. width: 20px;
  350. height: 20px;
  351. line-height: 20px;
  352. padding: 5px;
  353. background-color: @berry-background;
  354. border-radius: 20px;
  355. >img {
  356. vertical-align: top;
  357. max-height: 20px;
  358. max-width: 20px;
  359. }
  360. }
  361. >a[data-berry="pecha"] img {
  362. /* this berry is short */
  363. margin-top: 1px;
  364. }
  365. }
  366. &.working {
  367. opacity: 0.5;
  368. }
  369. table, a[data-evolve] {
  370. /* "thank you" message and evolve button */
  371. display: none;
  372. }
  373. }
  374. .expbar, .taste, .extra {
  375. display: none;
  376. }
  377. }
  378. >div:hover>.action a[data-berry]:after {
  379. border-color: @berry-border;
  380. }
  381. }
  382.  
  383. [/style]
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!