API tools faq
paste
Advertisement
MatthiasProgrammiert

Cyber CSS Animated

MatthiasProgrammiert
Jun 6th, 2020
29
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.92 KB | None | 0 0
raw download clone embed print report
  1. body {
  2.     /*Bright Design*/
  3.     --accent-color-main: rgb(255, 153, 0);
  4.     --accent-color-sub: rgba(255, 153, 0, 0.4);
  5.  
  6.     --base-color-main:rgb(240,240,240);
  7.     --base-color-sub:rgb(220,220,220);
  8.  
  9.     --controls-color-main:rgb(210,210,210);
  10.     --controls-color-sub:rgb(190,190,190);
  11.  
  12.     --text-color-heading:rgba(20,20,20);
  13.     --text-color-subheading:rgba(50,50,50);
  14.     --text-color-normal:rgba(10,10,10);
  15.     --text-color-controls:rgba(30,30,20);
  16.     --text-color-link:var(--accent-color-main);
  17.  
  18.     --negative-color-main:rgb(200,50,50);
  19.     --negative-color-sub:rgb(230,70,70);
  20.  
  21.     --positive-color-main:rgb(50,200,50);
  22.     --positive-color-sub:rgb(70,230,70);
  23.  
  24.     /*Dark Design*/
  25.     /*--accent-color-main: rgb(255, 153, 0);
  26.     --accent-color-sub: rgba(255, 153, 0, 0.4);
  27.  
  28.     --base-color-main:rgb(15,15,15);
  29.     --base-color-sub:rgb(35,35,35);
  30.  
  31.     --controls-color-main:rgb(35,40,45);
  32.     --controls-color-sub:rgb(45,50,55);
  33.  
  34.     --text-color-heading:rgba(230,230,230);
  35.     --text-color-subheading:rgba(150,150,150);
  36.     --text-color-normal:rgba(200,200,210);
  37.     --text-color-controls:rgba(200,200,210);
  38.     --text-color-link:var(--accent-color-main);
  39.  
  40.     --negative-color-main:rgb(200,50,50);
  41.     --negative-color-sub:rgb(230,70,70);
  42.  
  43.     --positive-color-main:rgb(40,160,40);
  44.     --positive-color-sub:rgb(60,180,60);*/
  45.  
  46.     background-color: var(--base-color-main) !important;
  47.  
  48.     --animation-speed: 0.1s;
  49. }
  50. a {
  51.     color: var(--text-color-link);
  52. }
  53. h1 {
  54.     color: var(--text-color-heading) !important;
  55. }
  56. .subheader {
  57.     color: var(--text-color-subheading) !important;
  58. }
  59. /*Style for topbar*/
  60. #mainmenu > li {
  61.     background-color: var(--base-color-main) !important;
  62. }
  63. #mainmenu > li:after {
  64.     content: "";
  65.     position: absolute;
  66.     background: var(--controls-color-sub);
  67.     left: 0;
  68.     width: 100%;
  69.     height: 0%;
  70.     bottom: 0;
  71.     z-index: 0;
  72.     transition: height var(--animation-speed);
  73. }
  74. #mainmenu > li.active {
  75.     border-bottom: 2px solid var(--accent-color-main) !important;
  76. }
  77. #mainmenu > li.active:after {
  78.     background: var(--accent-color-sub);
  79. }
  80. #mainmenu > li.hover {
  81.     box-shadow: none !important;
  82.     background-color: var(--controls-color-main) !important;
  83. }
  84. #mainmenu > li.hover:after {
  85.     height: 100%;
  86. }
  87. #mainmenu > li > a {
  88.     position: relative;
  89.     z-index: 1;
  90. }
  91. #mainmenu a {
  92.     color: var(--text-color-heading) !important;
  93. }
  94. #mainmenu a > span {
  95.     color: var(--text-color-subheading) !important;
  96. }
  97. #mainmenu > li > ul {
  98.     background-color: var(--base-color-main) !important;
  99. }
  100. #mainmenu > li > ul > li:hover {
  101.     background-color: var(--controls-color-main) !important;
  102. }
  103. #mainnav {
  104.     background-color: var(--base-color-main) !important;
  105. }
  106. #avatar > #avatarmenu {
  107.     border: none !important;
  108.     outline: none !important;
  109. }
  110. #avatar > #avatarmenu > li {
  111.     background-color: var(--base-color-main) !important;
  112. }
  113. #avatar > #avatarmenu > li:hover {
  114.     background-color: var(--controls-color-main) !important;
  115. }
  116. #avatar > #avatarmenu > li > a {
  117.     color: var(--text-color-heading) !important;
  118. }
  119. #avatar > #avatarmenu > li > a > span {
  120.     color: var(--text-color-subheading) !important;
  121. }
  122. #mylists.hover {
  123.     background-color: var(--controls-color-main) !important;
  124.     box-shadow: none !important;
  125. }
  126. #mylists > #mylistsmenu {
  127.     border: none !important;
  128.     outline: none !important;
  129. }
  130. #mylists > #mylistsmenu > li {
  131.     background-color: var(--base-color-main) !important;
  132. }
  133. #mylists > #mylistsmenu > li > a {
  134.     color: var(--text-color-heading) !important;
  135. }
  136. #mylists > #mylistsmenu > li > a > span {
  137.     color: var(--text-color-subheading) !important;
  138. }
  139. #mylists > #mylistsmenu > li:hover {
  140.     background-color: var(--controls-color-main) !important;
  141. }
  142. #header {
  143.     border-bottom-color: var(--controls-color-main) !important;
  144. }
  145. #searchbox {
  146.     background-color: var(--base-color-main) !important;
  147.     border-bottom-color: var(--base-color-sub) !important;
  148. }
  149. #searchbar {
  150.     border: none !important;
  151.     margin: 6px !important;
  152. }
  153. #searchbar input {
  154.     color: var(--text-color-controls) !important;
  155. }
  156. #searchbar > form > #sb1 > #qsearch {
  157.     background-color: var(--controls-color-main) !important;
  158. }
  159. #searchbar > form > #sb2 #qselect {
  160.     background-color: var(--controls-color-main) !important;
  161.     border-color: var(--controls-color-main) !important;
  162. }
  163. #searchbar > form > #sb3 button {
  164.     background-color: var(--controls-color-main) !important;
  165.     border-color: var(--controls-color-main) !important;
  166. }
  167. /*breadcrump style*/
  168. #breadcrumb-home:before {
  169.     color: var(--text-color-controls) !important;
  170. }
  171. #breadcrumb > li {
  172.     margin-left: 5px;
  173. }
  174. #breadcrumb > li > a {
  175.     background-color: var(--controls-color-main) !important;
  176.     color: var(--text-color-controls) !important;
  177. }
  178. #breadcrumb > li > a > span {
  179.     transition: max-width var(--animation-speed) !important;
  180. }
  181. #breadcrumb > li > a::after {
  182.     border-top-color: var(--controls-color-main) !important;
  183.     border-left-color: var(--controls-color-main) !important;
  184. }
  185. #breadcrumb > li > a::before {
  186.     left: -14px !important;
  187.     border-top-color: transparent !important;
  188.     border-right-color: var(--controls-color-main) !important;
  189.     border-bottom-color: var(--controls-color-main) !important;
  190. }
  191. #breadcrumb > li > a:hover {
  192.     background-color: var(--controls-color-sub) !important;
  193. }
  194. #breadcrumb > li > a:hover > span {
  195.     max-width: 30vw !important;
  196. }
  197. #breadcrumb > li > a:hover::after {
  198.     border-top-color: var(--controls-color-sub) !important;
  199.     border-left-color: var(--controls-color-sub) !important;
  200. }
  201. #breadcrumb > li > a:hover::before {
  202.     left: -14px !important;
  203.     border-top-color: transparent !important;
  204.     border-right-color: var(--controls-color-sub) !important;
  205.     border-bottom-color: var(--controls-color-sub) !important;
  206. }
  207. /*top part style*/
  208. #htitle {
  209.     display: inline-block !important;
  210.     color: var(--text-color-heading) !important;
  211. }
  212. #htitle > .subheader {
  213.     color: var(--text-color-subheading) !important;
  214. }
  215. #page-action {
  216.     display: inline-flex !important;
  217.     margin-left: 10px !important;
  218.     color: var(--text-color-controls) !important;
  219. }
  220. #page-action > #page-action-deluser.active {
  221.     background-color: var(--negative-color-main) !important;
  222. }
  223. #page-action > #page-action-deluser.active:hover {
  224.     background-color: var(--negative-color-sub) !important;
  225. }
  226. #page-action > li {
  227.     background-color: var(--controls-color-main) !important;
  228.     color: var(--text-color-controls) !important;
  229. }
  230. #page-action > li > span {
  231.     z-index: 1 !important;
  232.     position: relative !important;
  233. }
  234. #page-action > li:before {
  235.     z-index: 1 !important;
  236. }
  237. #page-action > li:after {
  238.     content: "";
  239.     position: absolute;
  240.     background: var(--controls-color-sub);
  241.     left: 0;
  242.     width: 0%;
  243.     height: 100%;
  244.     top: 0;
  245.     z-index: 0;
  246.     transition: width var(--animation-speed);
  247. }
  248. #page-action > li:hover {
  249. }
  250. #page-action > li:hover:after {
  251.     width: 100%;
  252. }
  253. #details-subs > li {
  254.     background-color: var(--controls-color-main) !important;
  255.     border-color: var(--controls-color-main) !important;
  256.     border-bottom-color: var(--controls-color-sub) !important;
  257. }
  258. #details-subs > li.active:after {
  259.     background: var(--accent-color-sub);
  260. }
  261. #details-subs > li:after {
  262.     content: "";
  263.     position: absolute;
  264.     background: var(--controls-color-sub);
  265.     left: 0;
  266.     width: 100%;
  267.     height: 0%;
  268.     bottom: 0;
  269.     z-index: 0;
  270.     transition: height var(--animation-speed);
  271. }
  272. #details-subs > li:hover:after {
  273.     height: 100%;
  274. }
  275. #details-subs > li > a {
  276.     position: relative;
  277.     color: var(--text-color-controls) !important;
  278.     z-index: 1;
  279. }
  280. #details-subs > li.active {
  281.     border-bottom-color: var(--accent-color-main) !important;
  282. }
  283. #start {
  284.     background-color: var(--base-color-main) !important;
  285.     border-bottom-color: var(--controls-color-sub) !important;
  286. }
  287. .contentbg {
  288.     background-color: var(--base-color-main) !important;
  289. }
  290. #infodetails li {
  291.     color: var(--text-color-subheading) !important;
  292. }
  293. #infodetails  li>span {
  294.     color: var(--text-color-heading) !important;
  295. }
  296. #content-outer {
  297.     background-color: transparent !important;
  298. }
  299. #content-sidebar {
  300.     background-color: transparent !important;
  301. }
  302. #content-sidebar > section {
  303.     margin: 0px 0px 5px 0px !important;
  304. }
  305. /*main section style*/
  306. section {
  307.     border-top: 2px solid var(--accent-color-main) !important;
  308.     border-left: 2px solid var(--base-color-sub) !important;
  309.     background-color: transparent !important;
  310. }
  311. section > h2 {
  312.     border-top: none !important;
  313.     background-color: var(--base-color-main) !important;
  314.     color: var(--text-color-heading) !important;
  315. }
  316. section > h2 > a {
  317.     color: var(--text-color-heading) !important;
  318. }
  319. /*forum specific style*/
  320. div.pagenav-info {
  321.     display: none;
  322. }
  323. .newreply {
  324.     padding: 3px 6px !important;
  325.     background-color: var(--controls-color-main) !important;
  326.     color: var(--text-color-controls) !important;
  327. }
  328. .pagenav > li > a {
  329.     background-color: var(--controls-color-main) !important;
  330.     color: var(--text-color-controls) !important;
  331. }
  332. .pagenav > li > a.pagenav-current {
  333.     background-color: var(--controls-color-sub) !important;
  334.     color: var(--text-color-controls) !important;
  335. }
  336. #thread-controls {
  337.     position: absolute !important;
  338.     width: 70% !important;
  339.     right: 0px !important;
  340.     top: -30px !important;
  341.     background-color: var(--base-color-main) !important;
  342. }
  343. #thread-controls > a {
  344.     color: var(--text-color-link);
  345. }
  346. #threadid .rpopup-button {
  347.     top: 24px !important;
  348.     left: 0px !important;
  349.     width: 80px;
  350. }
  351. #threadid > h2 {
  352.     max-width: 100%;
  353. }
  354. #threadid > h2 > a {
  355.     max-width: 95% !important;
  356.     text-overflow: ellipsis !important;
  357.     overflow: hidden !important;
  358.     white-space: nowrap !important;
  359. }
  360. #threadid > div {
  361.     position: relative !important;
  362.     top:20px !important;
  363. }
  364. .textblock {
  365.     color: var(--text-color-normal) !important;
  366. }
  367. #posts > article {
  368.     background-color: var(--base-color-sub)  !important;
  369.     border: none !important;
  370.     margin: 0px !important;
  371.     border-bottom: 5px solid var(--base-color-main) !important;
  372.     overflow: hidden !important;
  373. }
  374. #posts > article > header {
  375.     background-color: var(--base-color-sub)  !important;
  376.     border-bottom: 1px solid var(--controls-color-main) !important;
  377. }
  378. #posts > article > header > .page-share {
  379.     background-color: var(--base-color-sub)  !important;
  380. }
  381. #posts > article > .textblock {
  382. }
  383. #posts > article > footer {
  384.     overflow: hidden !important;
  385.     position: relative !important;
  386.     height: 0px !important;
  387.     transition: height var(--animation-speed) !important;
  388. }
  389. #posts > article:hover > footer {
  390.     height: 60px !important;
  391. }
  392. #threads-navigation {
  393.     position: relative !important;
  394.     top: -36px !important;
  395. }
  396. .xlist>li:nth-child(odd):not(:only-child) {
  397.     background-color: var(--base-color-main) !important;
  398. }
  399. .xlist>li:nth-child(even):not(:only-child) {
  400.     background-color: var(--base-color-sub) !important;
  401. }
  402. #details-subsB > li {
  403.     border-bottom: none !important;
  404. }
  405. #details-subsB > li:after {
  406.     content: "";
  407.     position: absolute;
  408.     background: var(--base-color-sub);
  409.     left: 0;
  410.     width: 100%;
  411.     height: 0%;
  412.     bottom: 0;
  413.     z-index: 0;
  414.     transition: height var(--animation-speed);
  415. }
  416. #details-subsB > li:hover {
  417.     background-color: transparent !important;
  418. }
  419. #details-subsB > li:hover:after {
  420.     height: 100%;
  421. }
  422. #details-subsB > li.active {
  423.     border-bottom: 2px solid var(--accent-color-main) !important;
  424.     background-color: transparent !important;
  425. }
  426. #details-subsB > li.active:after {
  427.     background: var(--accent-color-sub);
  428. }
  429. #details-subsB > li > a {
  430.     position: relative;
  431.     color: var(--text-color-controls) !important;
  432.     z-index: 1;
  433. }
  434. #footer {
  435.     background-color: var(--base-color-main) !important;
  436.     border-top-color: var(--base-color-sub) !important;
  437. }
  438. #footer .footer-heading {
  439.     color: var(--text-color-heading) !important;
  440. }
  441. #footer .footer-boxes {
  442.     color: var(--text-color-normal) !important;
  443. }
  444. .ibox {
  445.     border-radius: 0px !important;
  446.     background-color: var(--base-color-sub) !important;
  447.     border: none !important;
  448. }
  449. .responsive-table tbody tr:nth-of-type(odd) > td, .responsive-table tbody tr:nth-of-type(odd) > th {
  450.     background-color: var(--base-color-sub) !important;
  451. }
  452. .responsive-table tbody tr:nth-of-type(even) > td, .responsive-table tbody tr:nth-of-type(even) > th {
  453.     background-color: var(--base-color-main) !important;
  454. }
  455. .sbuttonA, .sbuttonB, .sbuttonC {
  456.     background-color: var(--controls-color-main) !important;
  457.     color: var(--text-color-controls) !important;
  458. }
  459. .sbuttonA:hover, .sbuttonB:hover, .sbuttonC:hover {
  460.     background-color: var(--controls-color-sub) !important;
  461. }
  462. button[type=submit].button-delete, button[type=button].button-delete {
  463.     background-color: var(--negative-color-main) !important;
  464.     color: var(--text-color-controls) !important;
  465. }
  466. button[type=submit].button-delete:hover, button[type=button].button-delete:hover {
  467.     background-color: var(--negative-color-sub) !important;
  468. }
  469. .msgBox>div.notice {
  470.     background-color: var(--base-color-sub) !important;
  471.     border: none !important;
  472.     color: var(--text-color-normal) !important;
  473. }
  474. button[type=submit], .button-submit {
  475.     background-color: var(--positive-color-main) !important;
  476.     color: var(--text-color-controls) !important;
  477. }
  478. button[type=submit]:hover, .button-submit:hover {
  479.     background-color: var(--positive-color-sub) !important;
  480. }
  481. .statslist > li {
  482.     border-bottom: 1px solid var(--base-color-sub) !important;
  483. }
  484. #tooltip {
  485.     transition: all var(--animation-speed) !important;
  486. }
  487.  
  488. /*search filters*/
  489. #search-button {
  490.     background-color: var(--controls-color-main) !important;
  491.     color: var(--text-color-controls) !important;
  492. }
  493. #search-container {
  494.     border: none !important;
  495. }
  496. #search-tabs {
  497.     background-color: var(--controls-color-main) !important;
  498. }
  499. #search-tabs > li {
  500.     color: var(--text-color-controls) !important;
  501.     z-index: 1;
  502.     position: relative;
  503. }
  504. #search-tabs > li:after {
  505.     content: "";
  506.     position: absolute;
  507.     background: var(--controls-color-sub);
  508.     left: 0;
  509.     width: 100%;
  510.     height: 0%;
  511.     bottom: -5px;
  512.     z-index: -1;
  513.     transition: height var(--animation-speed);
  514. }
  515. #search-tabs > li:hover:after {
  516.     height: 120%;
  517. }
  518. #search-tabs > li.hover {
  519.     background-color: var(--controls-color-main) !important;
  520.     border-bottom: 2px solid var(--accent-color-main) !important;
  521. }
  522. #search-tabs > li.hover:after {
  523.     background: var(--accent-color-sub);
  524. }
  525. #search-tabs-content {
  526.     background-color: var(--base-color-sub) !important;
  527.     color: var(--text-color-normal) !important;
  528.     border-bottom: 2px solid var(--base-color-main) !important;
  529. }
  530. #search-filters {
  531.     background-color: var(--base-color-sub) !important;
  532. }
  533. /*sorting options*/
  534. #table-menu > li {
  535.     background-color: var(--controls-color-main) !important;
  536.     color: var(--text-color-controls) !important;
  537. }
  538. #table-menu > li.hover {
  539.     border-bottom: 2px solid var(--accent-color-main) !important;
  540. }
  541. #table-menu > li > div {
  542.     color: var(--text-color-controls) !important;
  543. }
  544. #table-menu-content .table {
  545.     color: var(--text-color-normal) !important;
  546. }
  547. #table-menu-content .control {
  548.     color: var(--text-color-normal) !important;
  549. }
  550. #table-menu-content > div {
  551.     background-color: var(--base-color-sub) !important;
  552. }
  553. button, input[type=button], input[type=submit] {
  554.     background-color: var(--controls-color-main) !important;
  555. }
  556. button:hover, input[type=button]:hover, input[type=submit]:hover {
  557.     background-color:var(--controls-color-sub) !important;
  558. }
  559. /*rating box*/
  560. #ratingBox > div {
  561.     background-color: var(--base-color-main) !important;
  562.     border: none !important;
  563. }
  564. #ratingBox > div > header {
  565.     background-color: var(--base-color-sub) !important;
  566.     color: var(--text-color-heading) !important;
  567. }
  568. #ratingBox > div > header > div {
  569.     color: var(--text-color-subheading) !important;
  570. }
  571. #ratingSettings tr {
  572.     color: var(--text-color-normal) !important;
  573. }
  574. #submit-button label {
  575.     color:var(--text-color-normal) !important;
  576. }
  577. .plain-infobox {
  578.     background-color: var(--controls-color-main) !important;
  579.     border: none !important;
  580.     color: var(--text-color-normal) !important;
  581. }
  582. #footer-links > a {
  583.     color: var(--text-color-controls) !important;
  584. }
  585. #cstar-rating {
  586.     transition: color var(--animation-speed) !important;
  587. }
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!