SHARE
TWEET

Journal CSS

Spinnando Jan 28th, 2020 (edited) 104 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [style]// For the overall post:
  2. @border: #C09C6E; // The border around the post.
  3. @title: #C09C6E; // The title under the banner.
  4. @titleglow: #A31D0C; // The glow around the title.
  5. @background: #3A2B26; // The overall background.
  6. @link: #D6B284; // Links.
  7. @linkh: #EA9998; // When hovering over a link.
  8. @linka: #FFFFFF; // Active link.
  9. @text: #f2DBD1; // Overall text colour.
  10.  
  11. // For boxes, tables and tooltips:
  12. @border2: #C09C6E; // Borders.
  13. @background2: #3A2B26; // Header backgrounds.
  14. @background3: #574843; // Content backgrounds.
  15. @link2: #C1DCE6; // Secondary link colour.
  16. @linkh2: #FCC7B9; // Secondary hover link colour.
  17. @linka2: #FFFFFF; // Secondary active link colour.
  18. @title2: #C09C6E; // Header titles.
  19. @titleh: #F2DBD1; // Header titles when hovering.
  20. @text2: #F2DBD1; // Content text color.
  21.  
  22. // For the exp bars:
  23. @expimage: url("");
  24. @expimage2: url("");
  25. @background4: #3A2B26;
  26. @background5: #574843;
  27. @border3: #C09C6E;
  28.  
  29. // For the bottom navigation links:
  30. @link3: #C09C6E; // Nav link.
  31. @linkh3: #EA9998; // Nav hover.
  32. @nav: #C09C6E; // Nav text color.
  33. @navglow: #A31D0C; // The glow.
  34.  
  35. // Background images:
  36. @backimage: url("");
  37. @backimage2: url("");
  38. @backimage3: url("");
  39.  
  40. // Region flag:
  41. @flag: url("https://pfq-static.com/img/dex/flags/all.svg/t=1576842644#pfq");
  42.  
  43. // This font is for the post title and the bottom navigation links.
  44. @font-face {
  45.         font-family: 'acme';
  46.         src: url(https://fonts.gstatic.com/s/acme/v7/RrQfboBx-C5_XxrBaA.woff) format('woff');
  47.         }
  48.  
  49. a { // URL BBCode.
  50.         color: @link;
  51.         text-decoration: none;
  52.         }
  53.         a:hover {
  54.         color: @linkh;
  55.         text-decoration: underline;
  56.         }
  57.         a:active {
  58.         color: @linka;
  59.         }
  60.  
  61. .border { // The border around the entire post.
  62.         border: 5px solid @border;
  63.         }
  64.        
  65. .banner { // The glowy text banner.
  66.         color: @title;
  67.         font-family: 'acme', Times New Roman;
  68.         letter-spacing: 3px;
  69.         line-height: 25px;
  70.         padding: 2% 1% 2% 1%;
  71.         text-shadow: 0 0 3px @titleglow, 0 0 5px @titleglow;
  72.         text-transform: uppercase;
  73.         }
  74.        
  75. .background {
  76.         background-image: @backimage;
  77.         background-repeat: repeat;
  78.         background-attachment: fixed;
  79.         background-color: @background;
  80.         color: @text;
  81.         font-family: 'calibri light', calibri;
  82.         font-size: 15px;
  83.         padding: 2% 5% 0% 5%;
  84.         }
  85.  
  86. .flag { // The flags used on my dexing posts.
  87.         background-image: @flag;
  88.         background-position: center;
  89.         background-repeat: no-repeat;
  90.         background-size: 50%;
  91.         padding: 18%;
  92.         }
  93.  
  94. .scarab_head { // My boy.
  95.         position: absolute;
  96.         right: 15px;
  97.         width: 80px;
  98.             span.bbcode_tooltip {
  99.             border-bottom: 0px;
  100.             }}
  101.  
  102. h1 {
  103.         margin: 0;
  104.         font-size: 25px;
  105.         font-weight: normal;
  106.         text-align: center;
  107.         }
  108.  
  109. h2 {
  110.         margin: 0;
  111.         font-size: 20px;
  112.         font-weight: normal;
  113.         text-align: left;
  114.         }
  115.  
  116. hr { // Horizontal rule, [hr].
  117.         border: 2px solid @border;
  118.         margin: 0;
  119.         }  
  120.  
  121. span.bbcode_tooltip { // Tool tip BBCode.
  122.         border-bottom: 1px solid @border2;
  123.         }
  124.         .tooltip_content {
  125.             background-color: @background2;
  126.             background-image: @backimage2;
  127.             background-repeat: repeat;
  128.             border: 2px solid @border2;
  129.             border-radius: 0;
  130.             color: @text2;
  131.             font-family: 'calibri light', calibri;
  132.             font-size: 14px;
  133.             padding: 10px;
  134.             text-align: center;
  135.             }
  136.  
  137. .tabbed_interface { // Tabs BBCode.
  138.         border-radius: 0px;
  139.         box-shadow: 0 0 0 transparent;
  140.         ul {
  141.             background-color: @background2;
  142.             background-image: @backimage2;
  143.             background-repeat: repeat;
  144.             border-bottom: 0;
  145.             border-radius: 0px;
  146.             border-top: 2px solid @border2;
  147.             box-shadow: 0 0 0 transparent;
  148.             color: text2;
  149.             }
  150.         li {
  151.             background-color: transparent;
  152.             border: 2px solid @border2;
  153.             border-top: 0;
  154.             color: @title2;
  155.             font-size: 20px;
  156.             font-family: 'calibri light', calibri;
  157.             font-weight: bold;
  158.             padding: 3px;
  159.             text-align: center;
  160.             }
  161.             li:before {
  162.             display:none;
  163.             }
  164.             li:hover {
  165.             color: @titleh;
  166.             cursor: pointer;
  167.             }
  168.         li.tab-active {
  169.             background-image: @backimage3;
  170.             background-repeat: repeat;
  171.             background-color: @background3;
  172.             border-bottom: 0px;
  173.             color: @text2;
  174.             }
  175.         .tab {
  176.                 background-image: @backimage3;
  177.                 background-repeat: repeat;
  178.                 background-color: @background3;
  179.                 border-radius: 0px;
  180.                 border: 2px solid @border2;
  181.                 border-top: 0px;
  182.                 box-shadow: 0 0 0 transparent;
  183.                 color: @text2;
  184.                 font-size: 15px;
  185.                 padding: 3%;
  186.                     a { // URL BBCode inside tabs.
  187.                     color: @link2;
  188.                     }
  189.                     a:hover {
  190.                     color: @linkh2;
  191.                     text-decoration: underline;
  192.                     }
  193.                     a:active {
  194.                     color: @linka2;
  195.                     }
  196.                     }}
  197.            
  198. .panel { // Accordion, A-section, Display, Hide, Stackbox BBCode.
  199.         border: 1px solid @border2;
  200.         border-radius: 0px;
  201.         box-shadow: 0 0 0 transparent;
  202.             &>h3 {
  203.             background-image: @backimage2;
  204.             background-repeat: repeat;
  205.             background-color: @background2;
  206.             border-radius: 0px;
  207.             border: 1px solid @border2;
  208.             color: @title2;
  209.             font-size: 20px;
  210.             font-family: 'calibri light', calibri;
  211.             font-weight: bold;
  212.             padding: 3px;
  213.             a {
  214.                 color: @title2!important;
  215.                 }
  216.                 a:hover {
  217.                 color: @titleh!important;
  218.                 text-decoration: none!important;
  219.                 }}
  220.                 &>div {
  221.                 background-color: @background3;
  222.                 background-image: @backimage3;
  223.                 background-repeat: repeat;
  224.                 border: 1px solid @border2;
  225.                 border-radius: 0px;
  226.                 border-top: 1px solid @border2;
  227.                 color: @text2;
  228.                 font-size: 15px;
  229.                 padding: 3%;
  230.                     a { // Links inside panels.
  231.                     color: @link2;
  232.                     }
  233.                     a:hover {
  234.                     color: @linkh2;
  235.                     text-decoration: underline;
  236.                     }
  237.                     a:active {
  238.                     color: @linka2;
  239.                     }
  240.                     }}
  241.                
  242. table { // Table BBCode.
  243.         border: 2px solid @border2;
  244.         margin: 0px auto;
  245.         }
  246.         td { // Table cell.
  247.             background-color: @background3;
  248.             background-image: @backimage3;
  249.             background-repeat: repeat;
  250.             border: 2px solid @border2;
  251.             color: @text2;
  252.             padding: 1px 5px 1px 5px;
  253.             text-align: left;
  254.             }
  255.         th { // Table heading.
  256.             background-color: @background2;
  257.             background-image: @backimage2;
  258.             background-repeat: repeat;
  259.             border: 2px solid @border2;
  260.             color: @text2;
  261.             padding: 1px 5px 1px 5px;
  262.             text-align: center;
  263.             text-transform: uppercase;
  264.             }
  265.  
  266. .expbar { // The main part of an exp bar.
  267.         background-color: @background4;
  268.         background-image: @expimage;
  269.         background-repeat: repeat;
  270.         border: 2px solid @border3;
  271.         border-radius: 0;
  272.         color: #C1DCE6;
  273.         margin: 1px;
  274.         padding: 3px;
  275.             &>div { // The part that fills in as you progress.
  276.             background-color: @background5;
  277.             background-image: @expimage2;
  278.             background-repeat: repeat;
  279.             border-right: 2px solid @border3;
  280.             }
  281.         }
  282.  
  283. ul { // Default list.
  284.                     font-size: 15px;
  285.                     list-style: none;
  286.                     margin: 0;
  287.                     padding: 0;
  288.                     text-align: left;
  289.                     }
  290.                     ul li:before { // The arrow in front of a list.
  291.                     content: '► ';
  292.                     font-size: 10px;
  293.                     font-weight: bold;
  294.                     }
  295.  
  296. .list { // A custom list style for use inside the tab BBCode.
  297.                     font-size: 15px;
  298.                     list-style: none;
  299.                     margin: 0;
  300.                     padding: 0;
  301.                     text-align: left;
  302.                     }
  303.                     .list:before { // The arrow in front of my custom list.
  304.                     content: '► ';
  305.                     font-size: 10px;
  306.                     font-weight: bold;
  307.                     }
  308.  
  309. .box { // A custom box. Looks like a Display box without the header bit.
  310.         background-color: @background3;
  311.         background-image: @backimage3;
  312.         background-repeat: repeat;
  313.         border: 2px solid @border2;
  314.         border-radius: 0px;
  315.         color: @text2;
  316.         font-size: 15px;
  317.         padding: 3%;
  318.         }
  319.  
  320. .new { // The blinking news alert.
  321.         animation: pulse 4s infinite;
  322.         display: inline-block;
  323.         border-radius: 50%;
  324.         height: 10px;
  325.         vertical-align: middle;
  326.         width: 10px;
  327.         }
  328.  
  329. .nav { // Navigation links at the bottom.
  330.         color: @nav;
  331.         font-family: 'acme', Times New Roman;
  332.         font-size: 13px;
  333.         letter-spacing: 3px;
  334.         line-height: 25px;
  335.         text-align: center;
  336.         text-shadow: 0 0 3px @navglow, 0 0 5px @navglow;
  337.         text-transform: uppercase;
  338.         a {
  339.         color: @link3;
  340.         text-decoration: none;
  341.         }
  342.         a:hover {
  343.         color: @linkh3;
  344.         }}
  345.  
  346. .tabbed_interface::after { // Removes some weird spacing that happens on Firefox.
  347.        display: none;
  348.        }[/style]
RAW Paste Data
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
Top