sakuravixen

rainbow [post]

Jan 17th, 2022 (edited)
238
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.68 KB | None | 0 0
  1. [sc=bkg][sc=box]text here
  2.  
  3. [sc=tabbed_interface horizontal][ul]
  4.     [li]tab[/li]
  5.     [li]tab[/li]
  6.     [li]tab[/li]
  7.     [li]tab[/li]
  8.     [li]tab[/li]
  9.     [li]tab[/li]
  10. [/ul][
  11. ][sc=tab-active]content[/sc][
  12. ][sc=tab]content[/sc][
  13. ][sc=tab]content[/sc][
  14. ][sc=tab]content[/sc][
  15. ][sc=tab]content[/sc][
  16. ][sc=tab]content[/sc][/sc][/sc][sc=snek][/sc][/sc][sc=credit][url=https://pfq.link/~LDxq]coding[/url] | [url=https://www.deviantart.com/huniitea/gallery/66575999/pride-snakes]pixel[/url][/sc]
  17.  
  18. [style]
  19. .bkg {
  20.     background: url('https://i.imgur.com/q4oltzC.png');
  21.     border-radius: 7px;
  22.     min-height: 150px;
  23.     padding: 1%;
  24.     }
  25. .box {
  26.     margin: 2%;
  27.     padding: 3%;
  28.     background: rgba(0,0,0,0.60);
  29.     border: 1.5px solid black;
  30.     border-radius: 7px;
  31.     color: white;
  32.     font-size: 10pt;
  33.     }
  34.  
  35. hr {
  36.     border: 1px dashed white;
  37.     width: 70%;
  38.     }
  39. h1 {
  40.     font-family: 'Amatic SC';
  41.     font-size: 30pt;
  42.     background: rgba(255,255,255,0.75);
  43.     border-radius: 7px;
  44.     color: black;
  45.     letter-spacing: 0px;
  46.     transition: 1s ease-in-out;
  47.     width: fit-content;
  48.     margin: auto;
  49.     }
  50. h1:hover {
  51.     background: rgba(255,255,255,0.95);
  52.     }
  53. h2 {
  54.     font-family: 'Amatic SC';
  55.     font-size: 25pt;
  56.     letter-spacing: 0px;
  57.     transition: 1s ease-in-out;
  58.     }
  59. h1:hover, h2:hover {
  60.     letter-spacing: 5px;
  61.     transition: 1s ease-in-out;
  62.     }
  63.  
  64. a, a:visited {
  65.     color: white;
  66.     font-family: 'Indie Flower';
  67.     letter-spacing: 0px;
  68.     transition: 1s ease-in-out;
  69.     font-size: 12pt;
  70.     }
  71. a:hover {
  72.     letter-spacing: 2px;
  73.     transition: 1s ease-in-out;
  74.     }
  75.    
  76. .tooltip_content {
  77.     border: 1px solid black;
  78.     background: rgba(0,0,0,0.85);
  79.     max-width: fit-content;
  80.     color: white;
  81.     font-size: 10pt;
  82.     padding: 5px;
  83.     }
  84. .bbcode_tooltip {
  85.     border-bottom: 1px dashed rgba(255,255,255,0.75);
  86.     }
  87.    
  88. table {
  89.     margin: 0px auto;
  90.     border: 0px;
  91.     border-collapse: separate;
  92.     }
  93.     table th{
  94.         text-align: center;
  95.         vertical-align: middle;
  96.         padding: 5px;
  97.         border: 1px solid black;
  98.         background: rgba(0,0,0,0.5);
  99.         color: white;
  100.         border-radius: 5px;
  101.         }
  102.     table td {
  103.         text-align: center;
  104.         vertical-align: middle;
  105.         padding: 3px;
  106.         border: 1px solid black;
  107.         background: none;
  108.         color: white;
  109.         border-radius: 5px;
  110.         }
  111.    
  112. .panel {
  113.     box-shadow: none;
  114.     background: none;
  115.     border: 1px solid black;
  116.     border-radius: 7px;
  117.     margin: 1% 0% 1% 0%;
  118.     >h3 {
  119.         background: rgba(0, 0, 0, 0.35);
  120.         color: white;
  121.         border: none;
  122.         padding: 1.5%;
  123.         font-size: 10pt;
  124.         a,a:visited {color:white}
  125.         }
  126.     >div {
  127.         color: white;
  128.         border: none;
  129.         font-size: 10pt;
  130.         }
  131.     }
  132.    
  133. .tabbed_interface {
  134.     border-collapse: separate;
  135.     >ul {
  136.         background: none;
  137.     >li {
  138.         border: 1px solid transparent;
  139.         border-radius: 6px;
  140.         font-size: 10pt;
  141.         margin: 1%;
  142.         min-width: fit-content;
  143.         text-align: center;
  144.         padding: 5px;
  145.        
  146.         &.tab-active {
  147.             border: 1px solid #000000;
  148.             border-radius: 6px;
  149.             padding: 5px;
  150.             }
  151.         }
  152.     >li:nth-child(1) {
  153.         background: #F18080;
  154.         color: black;
  155.         }
  156.     >li:nth-child(2) {
  157.         background: #FFC57F;
  158.         color: black;
  159.         }
  160.     >li:nth-child(3) {
  161.         background: #FFF67F;
  162.         color: black;
  163.         }
  164.     >li:nth-child(4) {
  165.         background: #7FBF92;
  166.         color: black;
  167.         }
  168.     >li:nth-child(5) {
  169.         background: #7FA5FF;
  170.         color: black;
  171.         }
  172.     >li:nth-child(6) {
  173.         background: #BA83C3;
  174.         color: black;
  175.         }
  176.  
  177.         }
  178.     .tab, .tab-active {
  179.         background: rgba(0,0,0,0.25);
  180.         margin: 1%;
  181.         color: white;
  182.         border: 1px solid black;
  183.         padding: 10px;
  184.         box-shadow: none;
  185.         border-radius: 6px;
  186.         font-size: 10pt;
  187.         }
  188.     }
  189.    
  190. .expbar {
  191.     background: none;
  192.     border-radius: 7px;
  193.     width: 66%;
  194.     border: 1px solid black;
  195.     color: white;
  196.     >div {
  197.         background: rgba(0,0,0,0.65);
  198.         border-right: 1px solid black;
  199.         }
  200.     }
  201.    
  202. .party > div {
  203.     background: rgba(0,0,0,0.25);
  204.     color: white;
  205.     border: 1px solid black;
  206.     font-size: 10pt;
  207.     box-shadow: none;
  208.     .happy {display: none;}
  209.     .nature {display: none;}
  210.     .type {display: none;}
  211.     .berrybuttons {filter: brightness(75%);}
  212.     a:link, a:visited {
  213.         color: white;
  214.         font-family: 'Arial';
  215.         }
  216.     div.tooltip_content {
  217.     min-width: fit-content;
  218.     }
  219. .bbcode_tooltip {
  220.     border-bottom: 1px solid black;
  221.     }
  222.     }
  223.     .party > div > .pkmn:before {
  224.         border: solid white;
  225.         background-color: black;
  226.     }
  227.    
  228. .snek {
  229.     content: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c27d45ff-20a1-4fb8-b888-3b8561ff2db8/dd7xw27-9a6fd8ca-a3d1-49af-99b5-63c85db5392b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2MyN2Q0NWZmLTIwYTEtNGZiOC1iODg4LTNiODU2MWZmMmRiOFwvZGQ3eHcyNy05YTZmZDhjYS1hM2QxLTQ5YWYtOTliNS02M2M4NWRiNTM5MmIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.DpHARWdjq10iYAxlfy1xOkY6cYZHoicfRlQZqgbTPHs');
  230.     float: right;
  231.     width: 20%;
  232.     margin-top: -10%;
  233.     }
  234.  
  235. .credit {
  236.     padding: 0.5% 0% 0% 0.5%;
  237.     font-size: 10pt;
  238.     font-family: 'Arial';
  239.     >a, a:visited, a:hover {
  240.         letter-spacing: 0px;
  241.         color: var(--col-link1);
  242.         font-family: 'Arial';
  243.         font-size: 10pt;
  244.         }
  245.     }
  246.    
  247. /* latin */
  248. @font-face {
  249.   font-family: 'Amatic SC';
  250.   font-style: normal;
  251.   font-weight: 400;
  252.   font-display: swap;
  253.   src: url(https://fonts.gstatic.com/s/amaticsc/v16/TUZyzwprpvBS1izr_vOECuSfU5cP1Q.woff2) format('woff2');
  254.   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;
  255. }
  256.  
  257. /* latin */
  258. @font-face {
  259.   font-family: 'Indie Flower';
  260.   font-style: normal;
  261.   font-weight: 400;
  262.   font-display: swap;
  263.   src: url(https://fonts.gstatic.com/s/indieflower/v12/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2) format('woff2');
  264.   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;
  265. }
  266. [/style]
Add Comment
Please, Sign In to add comment