API tools faq
paste
Advertisement
the_unknown_282283

Dark - Free Purple

the_unknown_282283
Aug 7th, 2024
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.75 KB | None | 0 0
raw download clone embed print report
  1. /*Makes all borders sharp*/
  2. * {
  3.    border-radius: 0 !important;
  4. }
  5.  
  6. /*Change website background and colour*/
  7. body {
  8.     background-image: none;
  9.     background-color: var(--dark);
  10. }
  11.  
  12. /*Remove border on featured horse scrollbox*/
  13. div.featuredscroll {
  14.     border: none !important;
  15. }
  16.  
  17. /*Makes up and downvote images in the suggestion forum more visible*/
  18. tr.quatro td font img, tr.forumalt td font img, td.forumpost table tbody tr td div font img {
  19.     filter: saturate(5);
  20. }
  21.  
  22. /*Character count under messages that you are typing in the mailbox*/
  23. .counter {
  24.     background-color: var(--dark);
  25. }
  26.  
  27. /*--------------------------------------------------
  28.   Variables <-- CHANGE COLOURS HERE. Do not change colours elsewhere or you will break the code! Only mess with these if you know what you are doing. Each variable is defined with a comment ABOVE it. Send me a PM or post in my guide (linked in the post this code is found in) for help.
  29.  --------------------------------------------------*/
  30.  
  31. :root {
  32.  
  33. /*Changes the font used for the navigation*/
  34.     --font: Ink Free, times;
  35.  
  36. /*Page, barn symbol and forum quote background colour*/
  37.     --light: #790F83;
  38.  
  39. /*Table and status bar background colour*/
  40.     --medium: #5C0B64;
  41.  
  42. /*Website and text field background colour*/
  43.     --dark: #3B0641;
  44.  
  45. /*Colour for site borders, dropdown selection background and navigation text*/
  46.     --borderColor: #B81EC6;
  47.  
  48. /*Forums container colour (changes the edges and the header)*/
  49.     --forums: #3B0641;
  50.  
  51. /*Forum main colour*/
  52.     --forumMain: #5C0B64;
  53.  
  54. /*Forum alternate colour*/
  55.     --forumAlt: #790F83;
  56.  
  57. /*Sales chat posts*/
  58.     --sales: #93169E;
  59.  
  60. /*Forum post body colour*/
  61.     --forumPost: #93169E;
  62.  
  63. /*Light text, like on the navbar and inside buttons*/
  64.     --lightText: #B81EC6;
  65.  
  66. /*Main page text*/
  67.     --pageText: #000;
  68.  
  69. /*Links*/
  70.     --link: #000;
  71.  
  72. /*Links on hover*/
  73.     --linkHov: #B81EC6;
  74.  
  75. /*Scrollbar track*/
  76.     --scrollTrack: #2A042E;
  77.  
  78. /*Scrollbar handle, dropdown background colour and selected tab at bottom of barn page*/
  79.     --scrollHandle: #790F83;
  80.  
  81. /*Glowing effect on page*/
  82.     --glowShadow: 0 0 5px 5px rgba(184, 30, 198, 0.6);
  83.  
  84. /*Page headers*/
  85.     --header: #000;
  86.  
  87. /*Inactive tabs on horse info panels (Managed Shows and Associations for example)*/
  88.     --horseInactive: #2A042E;
  89.  
  90. /*Loss in the accountant*/
  91.     --loss: #6F0707;
  92.  
  93. /*Online text on stable pages*/
  94.     --online: #E992F1;
  95.  
  96. /*Form field text colour*/
  97.     --formText: #ffffff;
  98.  
  99. /*Dropdown content background colour*/
  100.     --dropCont: 42, 4, 46;
  101.  
  102. }
  103.  
  104. /*--------------------------------------------------
  105.   Overall Site Colors
  106.  --------------------------------------------------*/
  107.  
  108. /*Forums container*/
  109. .secondary {
  110.     background-color: var(--forums);
  111. }
  112.  
  113. /*Symbols in barn pages (like E for entered into regular show)*/
  114. .tertiary {
  115.     background-color: var(--light);
  116. }
  117.  
  118. /*Success messages*/
  119. .validmsg {
  120.    border: 1px dashed var(--borderColor);
  121. }
  122.  
  123. /*--------------------------------------------------
  124.   Set the quote colors for the forum
  125.  --------------------------------------------------*/
  126.  
  127. blockquote {
  128.     background-color: var(--light);
  129.     border-left: 10px double var(--dark);
  130.     border-radius: 20px 0px 0px 20px !important;
  131.     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
  132. }
  133.  
  134. /*--------------------------------------------------
  135.   Set the forum colors
  136.  --------------------------------------------------*/
  137.  
  138. /*Forum main colour*/
  139. .quatro {
  140.     background-color: var(--forumMain);
  141. }
  142.  
  143. /*Forum alternate colour*/
  144. .forumalt {
  145.     background-color: var(--forumAlt);
  146. }
  147.  
  148. /*Forum post body colour*/
  149. .forumpost {
  150.     background: var(--forumPost);
  151. }
  152.  
  153. .anycolorsmall.primary.whitefont {
  154.     color: var(--lightText);
  155.     background: var(--light);
  156.     box-shadow: none;
  157.     text-decoration: none;
  158.     margin: 0 !important;
  159. }
  160.  
  161. .anycolorsmall.primary.whitefont:hover {
  162.     text-decoration: underline;
  163. }
  164.  
  165. /*Selected page on forum posts*/
  166. .anycolorsmall.tertiary.blackfont {
  167.     color: var(--lightText);
  168.     background: var(--forumPost);
  169.     box-shadow: none;
  170.     margin: 0 !important;
  171.     border: 1px dashed var(--borderColor);
  172. }
  173.  
  174. a.noline {
  175.     text-decoration: none !Important;
  176. }
  177.  
  178. /*--------------------------------------------------
  179.   Change the scrollbars
  180.  --------------------------------------------------*/
  181.  
  182. /*Width*/
  183. ::-webkit-scrollbar {
  184.    width: 15px;
  185. }
  186.  
  187. /*Track*/
  188. ::-webkit-scrollbar-track {
  189.    background: var(--scrollTrack);
  190. }
  191.  
  192. /*Handle*/
  193. ::-webkit-scrollbar-thumb {
  194.    background: var(--scrollHandle);
  195.    border-radius: 0;
  196. }
  197.  
  198. /*Handle on hover*/
  199. ::-webkit-scrollbar-thumb:hover {
  200.    background: var(--borderColor);
  201. }
  202.  
  203. /*--------------------------------------------------
  204.   Set the page background color
  205.  --------------------------------------------------*/
  206.  
  207. /*Add spacing between chatbox and main page*/
  208. .primary {
  209.     margin-right: 15px !important;
  210. }
  211.  
  212. /*Page and chatbox background*/
  213. .pgbg, .primary {
  214.     background: var(--light);
  215.     box-shadow: var(--glowShadow);
  216.     border: 1px solid var(--borderColor) !important;
  217. }
  218.  
  219. /*Game header image, set to 880px wide by 210px high by default*/
  220. .gameheader {
  221.     background-color: transparent;
  222.     border: none !important;
  223.     background-image: url(https://i.postimg.cc/2jnF3PBg/purplefreeheader.png);
  224. }
  225.  
  226. /*Change header height*/
  227. div.gameheader div[style]:first-child {
  228.     height: 200px !important;
  229. }
  230.  
  231. /*Make navbar transparent*/
  232. .gameheader div[style]:nth-child(2) {
  233.     border: 0 !important;
  234.     background: transparent !important;
  235. }
  236.  
  237. /*Navbar width*/
  238. div.gameheader {
  239.     width: 880px !important;
  240. }
  241.  
  242. /*Add space between navbar and header*/
  243. div.gameheader div {
  244.     margin-bottom: 20px;
  245.     background: none;
  246. }
  247.  
  248. .divheader2 {
  249.     color: var(--lightText);
  250.     text-shadow: 3px 3px 5px black;
  251. }
  252.  
  253. /*Remove borders from news page*/
  254. div.newsdiv td.tablebg {
  255.     border: none !important;
  256. }
  257.  
  258. /*--------------------------------------------------
  259.   Set the table background color
  260.  --------------------------------------------------*/
  261.  
  262. /*Table background colour*/
  263. .tablebg {
  264.     background-color: var(--medium);
  265.     border: 1px dashed var(--borderColor) !important;
  266. }
  267.  
  268. /*Table headers on barn pages*/
  269. .brownbox2 {
  270.     border: 1px dashed var(--borderColor) !important;
  271.     background-color: var(--light);
  272.     margin-bottom: 10px;
  273. }
  274.  
  275. /*Dividers in header*/
  276. .bgtableheader {
  277.     background: var(--dark);
  278. }
  279.  
  280. /*--------------------------------------------------
  281.    Page Name text
  282.  --------------------------------------------------*/
  283.  
  284. .headline {
  285.     color: var(--header);
  286. }
  287.  
  288. .greybox {
  289.     background-color: var(--horseInactive);
  290. }
  291.  
  292. /*--------------------------------------------------
  293.   Other site text
  294.  --------------------------------------------------*/
  295.  
  296. /*Red text in accountant*/
  297. .loss {
  298.    color: var(--loss);
  299. }
  300.  
  301. /*Easy show enter highlight*/
  302. .easyshow {
  303.     border: 1px solid var(--borderColor);
  304.     background: var(--dark);
  305.     padding-right: 7px;
  306.     padding-top: 1px;
  307.     padding-bottom: 1px;
  308. }
  309.  
  310. /*Online text on stable pages*/
  311. .mainlinegreen {
  312.     color: var(--online);
  313. }
  314.  
  315. /*--------------------------------------------------
  316.   Set the chatbox color
  317.  --------------------------------------------------*/
  318.  
  319. /*Both of the chat posts*/
  320. .sales, .main {
  321.     border: none !important;
  322.     margin-bottom: 5px;
  323. }
  324.  
  325. /*Sales chat only*/
  326. .sales {
  327.     background-color: var(--sales);
  328. }
  329.  
  330. /*Main chat only*/
  331. .main {
  332.     background-color: var(--medium);
  333. }
  334.  
  335. /*Remove season chatbox image*/
  336. div.primary div img:first-child {
  337.     display: none;
  338. }
  339.  
  340. /*Force quest images to appear*/
  341. tr.mainlineblack td img {
  342.     display: inline !important;
  343. }
  344.  
  345. /*--------------------------------------------------
  346.   Set the form field color
  347.  --------------------------------------------------*/
  348.  
  349. .iclass {
  350.     background-color:var(--dark);
  351.     color: var(--formText);
  352.     border: 1px solid var(--borderColor);
  353. }
  354.  
  355. /*--------------------------------------------------
  356.   Tabs on Stable Page
  357.   --------------------------------------------------*/
  358.  
  359. /*Tabs on hover*/
  360. .tab button:hover {
  361.     background-color: var(--medium);
  362. }
  363.  
  364. /*Selected tab*/
  365. .tab button.active {
  366.     background: var(--scrollHandle);
  367. }
  368.  
  369. /*--------------------------------------------------
  370.   Tabs on Mail Page, Blogs
  371.   --------------------------------------------------*/
  372.  
  373. ul.tabbernav li a {
  374.     background: var(--forums);
  375. }
  376.  
  377. .tabberlive .tabbertab {
  378.     background-color: var(--medium);
  379.  }
  380.  
  381. ul.tabbernav li a:hover {
  382.     color: var(--pageText);
  383.     background: var(--medium);
  384. }
  385.  
  386. ul.tabbernav li.tabberactive a {
  387.     background: var(--medium);
  388. }
  389.  
  390. ul.tabbernav li.tabberactive a:hover {
  391.     color: var(--pageText);
  392.     background: var(--medium);
  393. }
  394.  
  395. /*New message marker in mailbox*/
  396. .new {
  397.     background: var(--dark);
  398.     border: 1px solid var(--borderColor);
  399. }
  400.  
  401. /*--------------------------------------------------
  402.   Set the color and font of the button text, currently in Art Editor
  403.  --------------------------------------------------*/
  404.  
  405. /*Buttons*/
  406. .heebutton {
  407.     font-family: arial, sans-serif;
  408.     font-size: 15px;
  409.     color: var(--lightText) !important;
  410.     background-color: var(--dark);
  411.     padding: 4px;
  412.     border: 1px solid var(--borderColor);
  413.     border-radius: 0;
  414.     text-decoration: none;
  415. }
  416.  
  417. /*Buttons on hover*/
  418. .heebutton:hover {
  419.     border: 1px outset var(--borderColor);
  420.     color: var(--linkHov);
  421.     background-color: var(--medium);
  422. }
  423.  
  424. /*Links in buttons*/
  425. .heebutton a:visited, .heebutton a:link, .heebutton a {
  426.     font-family: arial, sans-serif;
  427.     font-size: 15px;
  428.     color: var(--lightText) !important;
  429.     background-color: transparent;
  430.     padding:4px;
  431. }
  432.  
  433. .heebutton a:hover {
  434.     font-family:arial,sans-serif;
  435.     font-size:15px;
  436.     background: none;
  437. }
  438.  
  439. /*Small buttons*/
  440. .heebuttonsmall {
  441.     font-family: arial, sans-serif;
  442.     font-size: 15px;
  443.     color: var(--lightText);
  444.     background-color: var(--dark);
  445.     padding: 0;
  446.     border: 1px solid var(--borderColor);
  447.     border-radius: 0;
  448.     text-decoration: none;
  449. }
  450.  
  451. /*Small button links*/
  452. .heebuttonsmall a:visited, .heebuttonsmall a:link {
  453.     font-family: arial, sans-serif;
  454.     font-size: 12px;
  455.     color: var(--lightText);
  456.     background-color: transparent;
  457.     padding: 5px;
  458. }
  459.  
  460. /*Small buttons on hover*/
  461. .heebuttonsmall a:hover {
  462.     font-family: arial, sans-serif;
  463.     font-size: 12px;
  464.     color: var(--lightText);
  465.     text-decoration: underline;
  466.     background-color: transparent;
  467.     padding: 5px;
  468. }
  469.  
  470.  
  471.  
  472. /*--------------------------------------------------
  473.   Set the color of the side bar Header text (Chatbox/Quests)
  474.  --------------------------------------------------*/
  475.  
  476. .sidebar {
  477.     color: var(--lightText);
  478.     font-family: var(--font);
  479.     padding: 0;
  480. }
  481.  
  482. /*--------------------------------------------------
  483.   Set the color of the side bar header
  484.  --------------------------------------------------*/
  485.  
  486. .sidebarheader {
  487.     margin-top: 0 !important;
  488.     background: var(--dark);
  489.     border: 0 !important;
  490. }
  491.  
  492. /*--------------------------------------------------
  493.   Set the color and font of the status bar text
  494.  --------------------------------------------------*/
  495.  
  496. .statusbar {
  497.     background-color: var(--medium);
  498.     border-bottom: 1px dashed var(--borderColor) !important;
  499. }
  500.  
  501. /*--------------------------------------------------
  502.   Set the color of the text on the site
  503.  --------------------------------------------------*/
  504.  
  505. .mainlineblack {
  506.     font-family:arial,sans-serif;
  507.     font-size:15px;
  508.     color: var(--pageText);
  509. }
  510.  
  511. .mainlineblack a:visited, .mainlineblack a:link {
  512.     font-family: arial,sans-serif;
  513.     font-size: 15px;
  514.     color: var(--link);
  515.     text-decoration: underline;
  516. }
  517.  
  518. .mainlineblack a:hover {
  519.     font-family: arial, sans-serif;
  520.     font-size: 15px;
  521.     color: var(--linkHov);
  522. }
  523.  
  524. .mainlineblacksmall {
  525.     font-family: arial,sans-serif;
  526.     font-size: 13px;
  527.     color: var(--pageText);
  528. }
  529.  
  530. .mainlineblacksmall a:visited, .mainlineblacksmall a:link {
  531.     font-family: arial, sans-serif;
  532.     font-size: 13px;
  533.     color: var(--link);
  534.     text-decoration: underline;
  535. }
  536.  
  537. .mainlineblacksmall a:hover {
  538.     font-family: arial, sans-serif;
  539.     font-size: 13px;
  540.     color: var(--linkHov);
  541. }
  542.  
  543. .smalltextblack {
  544.     font-family:arial,sans-serif;
  545.     font-size:12px;
  546.     color: var(--pageText);
  547. }
  548.  
  549. .smalltextblack a:visited, .smalltextblack a:link {
  550.     font-family: arial, sans-serif;
  551.     font-size: 12px;
  552.     color: var(--link);
  553.     text-decoration: underline;
  554. }
  555.  
  556. .smalltextblack a:hover {
  557.     font-family: arial, sans-serif;
  558.     font-size: 12px;
  559.     color: var(--linkHov);
  560. }
  561.  
  562. .veryblack {
  563.     font-family: arial,sans-serif;
  564.     font-size: 15px;
  565.     color: var(--pageText);
  566. }
  567.  
  568. .veryblack a:link, .veryblack a:visited {
  569.     font-family:arial,sans-serif;
  570.     font-size:15px;
  571.     color: var(--link);
  572.     text-decoration: underline;
  573. }
  574.  
  575. .veryblack a:hover {
  576.     font-family: arial, sans-serif;
  577.     font-size: 15px;
  578.     color: var(--linkHov);
  579. }
  580.  
  581. /*--------------------------------------------------
  582.   Set the alternate color of the text on the site
  583.  --------------------------------------------------*/
  584.  
  585. .mainline {
  586.     font-family: arial, sans-serif;
  587.     font-size: 15px;
  588.     color: var(--pageText);
  589. }
  590.  
  591. .mainline a, .mainline a:visited, .mainline a:link {
  592.     font-family: arial, sans-serif;
  593.     font-size:15px;
  594.     color: var(--link);
  595.     text-decoration: underline;
  596. }
  597.  
  598. .mainline a:hover {
  599.     font-family: arial, sans-serif;
  600.     font-size: 15px;
  601.     color: var(--linkHov);
  602.     text-decoration: underline;
  603. }
  604.  
  605. /*--------------------------------------------------
  606.   Set the small text color in chat (time)
  607.  --------------------------------------------------*/
  608.  
  609. .bsmalltext a:link, .bsmalltext a:visited, .bsmalltext a {
  610.     text-decoration: underline !important;
  611.     font-family:arial,sans-serif;
  612.     font-size:12px;
  613.     color: var(--link);
  614. }
  615.  
  616. .bsmalltext {
  617.     color: var(--dark);
  618. }
  619.  
  620. .bsmalltext a:hover { font-family:arial,sans-serif; font-size:12px; color: var(--linkHov);}
  621.  
  622. /*--------------------------------------------------
  623.   Set the small text color in chat (posts)
  624.  --------------------------------------------------*/
  625.  
  626. .smalltext {
  627.     font-family: arial, sans-serif;
  628.     font-size: 12px;
  629.     color: var(--pageText);
  630. }
  631.  
  632. .smalltext a:visited, .smalltext a:link {
  633.     font-family: arial, sans-serif;
  634.     font-size: 12px;
  635.     color: var(--link);
  636.     text-decoration: underline;
  637. }
  638.  
  639. .smalltext a:hover {
  640.     font-family: arial,sans-serif;
  641.     font-size: 12px;
  642.     color: var(--linkHov);
  643. }
  644.  
  645. /*--------------------------------------------------
  646.   Settings for the Select/Search dropdown menu
  647.  --------------------------------------------------*/
  648.  
  649. /*Dropdown background colour*/
  650.  .select2-container--default .select2-selection--single {
  651.     background-color: var(--scrollHandle);
  652.     border: 1px solid var(--borderColor);
  653.  }
  654.  
  655. /*Dropdown List background and unselected item color*/
  656.  .select2-dropdown {
  657.     background-color: var(--medium);
  658.     font-family: arial, sans-serif;
  659.     border: 1px solid var(--borderColor);
  660. }
  661.  
  662. /*Selected option in list*/
  663. .select2-container--default .select2-results__option--selected {
  664.     background-color: var(--medium);
  665. }
  666.  
  667. /* Highlighted option in list */
  668.  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  669.     background-color: var(--borderColor);  
  670.     color: black;
  671. }
  672.  
  673. /*Change dropdown text input border*/
  674. .select2-container--default .select2-search--dropdown .select2-search__field {
  675.     border: 1px solid var(--borderColor);
  676. }
  677.  
  678.  
  679. /*--------------------------------------------------
  680.   Set the color and font of the menu bar text
  681.  --------------------------------------------------*/
  682. .navbar {
  683.     background: transparent;
  684. }
  685.  
  686. /*Navbar content text colour*/
  687. .navbar a {
  688.     color: var(--lightText);
  689.     background: transparent;
  690. }
  691.  
  692. .dropdown:hover .dropbtn {
  693.     background: transparent;
  694. }
  695.  
  696. /*Navbar header text*/
  697. .dropdown .dropbtn {
  698.     font-weight: bold;
  699.     color: var(--borderColor);
  700.     font-family: var(--font);
  701.     background: transparent;
  702. }
  703.  
  704. /*Dropdown content links*/
  705. .dropdown-content a {
  706.     color: var(--borderColor);
  707.     font-family: var(--font);
  708.     padding: 5px 10px;
  709.     margin-top: 0 !important; /*Prevent content from moving*/
  710. }
  711.  
  712. /*Dropdown content background*/
  713. .dropdown-content {
  714.     background: rgba(var(--dropCont), 0.7) !Important;
  715.     box-shadow: none;
  716. }
  717.  
  718. .dropdown-content a:hover {
  719.     background: rgba(var(--dropCont), 1) !Important;
  720. }
  721.  
  722. /*Make navbar headers move when hovered*/
  723. .navbar a:hover, .dropdown:hover .dropbtn {
  724.     margin-top: 5px;
  725. }
  726.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!