API tools faq
paste
Advertisement
Vaellyth

[V] Matcha Dango CSS

Vaellyth
Aug 29th, 2021 (edited)
399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.99 KB | None | 0 0
raw download clone embed print report
  1. /* Profile Layout - Dango - by Vii */
  2. /** Built and tested in Firefox 91 for Ubuntu **/
  3. /*** free to edit && use as a base <3 ***/
  4. /**** don't be afraid to ask questions or request help! ****/
  5. /*****************************************************************/
  6.  
  7.  
  8. /** Custom Font - Lobster Two **/
  9. /* latin */
  10. @font-face {
  11.   font-family: Lobster Two;
  12.   font-style: normal;
  13.   font-weight: 400;
  14.   src: url(https://fonts.gstatic.com/s/lobstertwo/v13/BngMUXZGTXPUvIoyV6yN5-fN5qU.woff2);
  15.   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;
  16. }
  17.  
  18.  
  19. /* Body */
  20. body {
  21.     background: url(https://starfarer-studio.space/media/backgrounds/isometric-cubes-matcha.png) repeat fixed;
  22. }
  23.  
  24. /* Hidden Items */
  25. .navbar-brand,
  26. header,
  27. #signout,
  28. #fb-root,
  29. .voltie_video p,
  30. .comment_ignore,
  31. .voltie_likes,
  32. .voltie_dislikes,
  33. .voltie_hobbies,
  34. .voltie_comments ul li p:before,
  35. #content .row:nth-of-type(3),
  36. footer { display: none !important; }
  37.  
  38.  
  39. /* Main Structure */
  40. #structure {
  41.     width: 100%;
  42.     height: 100%;
  43.     margin: 0px auto;
  44. }
  45.  
  46.  
  47. /* Navbar */
  48. #navbar {
  49.     background: #9CBB9C !important;
  50.     border-bottom: 2px solid #FFF !important;
  51. }
  52.  
  53. .navbar ul {
  54.     width: 100%;
  55.     margin: 0 auto;
  56.     display: inline-flex !important;
  57.     justify-content: space-evenly;
  58. }
  59.  
  60. .navbar ul li {
  61.  margin: 0 auto;
  62. }
  63.  
  64. .navbar ul li a {
  65.     color: #FFF !important;
  66.     text-transform: lowercase !important;
  67.     font: 15px Lobster Two !important;
  68.     padding-top: 10px !important;
  69.     transition: all 0.1s linear;
  70. }
  71.  
  72. .navbar ul li a:hover {
  73.     background: transparent !important;
  74.     text-shadow: 0 0 1px;
  75. }
  76.  
  77.  
  78. /* Inner Wrapper */
  79. #content {
  80.     margin: 50px auto !important;
  81. }
  82.  
  83.  
  84. /* "User's Profile" Title Box */
  85. .content_header {
  86.     flex-direction: column;
  87.     background: transparent;
  88.     border: 0;
  89.     box-shadow: none;
  90.     padding: 0;
  91.     margin: 0 auto;
  92. }
  93.  
  94.  
  95. /* "User's Profile" Title */
  96. .content_header h1 {
  97.     padding: 50px 0 25px;
  98.     font: 54px Lobster Two;
  99.     text-transform: lowercase;
  100.     color: #FFF !important;
  101.     text-shadow: 0px 0px 5px #9CBB9C;
  102.     opacity: 1;
  103. }
  104.  
  105.  
  106. /* User Actions Links */
  107. .content_navigation {
  108.     max-width: 100%;
  109.     width: 100%;
  110.     padding: 0;
  111.     margin: 0 auto;
  112. }
  113.  
  114. .content_navigation li {
  115.     width: 100%;
  116.     margin: 0 auto;
  117.     border-bottom: 1px solid #F4ACB7;
  118. }
  119.  
  120. .content_navigation li a {
  121.     display: block;
  122.     text-align: center;
  123.     text-transform:lowercase;
  124.     padding: 10px 10px 0;
  125.     color: #9CBB9C !important;
  126.     font-size: 15px;
  127.     font-weight: bold;
  128.     white-space: nowrap;
  129. }
  130.  
  131. .content_navigation li:hover a {
  132.     background: transparent;
  133.     color: #FFF !important;
  134.     text-shadow: 0 0 5px #9CBB9C;
  135. }
  136.  
  137.  
  138. /* Profile Wrapper */
  139. #voltie {
  140.     padding: 0;
  141.     margin: 0 auto;
  142.     width: 100%;
  143.     display: flex;
  144.     flex-direction: column;
  145. }
  146.  
  147.  
  148. /* Primary Sections */
  149. #voltie .col-md-3, #voltie .col-md-6 {
  150.     width: 100%;
  151.     margin: 0;
  152.     padding: 0;
  153. }
  154.  
  155. #voltie > .col-md-3:nth-child(1) {
  156.     order: 1;
  157. }
  158.  
  159. #voltie .col-md-3:nth-child(3) {
  160.     order: 2;
  161.     float: none;
  162.     position: initial;
  163. }
  164.  
  165. #voltie .col-md-6 {
  166.     order: 3;
  167. }
  168.  
  169.  
  170. /* Actual Sections */
  171. #voltie section {
  172.     border-radius: 0;
  173.     margin: 0;
  174.     border: 0;
  175.     padding: 20px 10px 10px;
  176.     background: transparent;
  177. }
  178.  
  179.  
  180. /* Username Heading */
  181. #voltie .voltie_info h2 {
  182.     margin: 0 !important;
  183.     border-radius: 0 !important;
  184.     padding: 20px 0 !important;
  185.     display: flex;
  186.     flex-direction: column;
  187.     background: transparent !important;
  188. }
  189.  
  190. #voltie .voltie_info h2 .voltie_username {
  191.     font: 30px Lobster Two;
  192.     color: #9CBB9C !important;
  193.     margin: 0 auto;
  194.     text-transform: capitalize;
  195. }
  196.  
  197. #voltie .voltie_info h2 .voltie_pronouns {
  198.     text-transform: lowercase;
  199.     color: #FFF !important;
  200.     text-shadow: 0 0 2px #9CBB9C;
  201.     font-size: 14px;
  202. }
  203.  
  204. #voltie .voltie_info h2 .online-orb, #voltie .voltie_info h2 .offline-orb {
  205.     margin: 10px auto;
  206. }
  207.  
  208. #voltie .voltie_info h2 .online-orb {
  209.     animation: glow 1s linear normal infinite;
  210.     border-color: #F4ACB7 !important;
  211. }
  212.  
  213. @keyframes glow {
  214.     0%, 100% { box-shadow: 0 0 1px 1px rgba(225, 185, 185, 0.25); }
  215.     25% { box-shadow: 0 0 2px 1px rgba(225, 185, 185, 0.45);  }
  216.     50% { box-shadow: 0 0 5px 1px rgba(225, 185, 185, 0.65); }
  217. }
  218.  
  219. /* Actual Section Headings */
  220. #voltie section h3 {
  221.     margin: 0px auto 20px;
  222.     background: transparent;
  223.     border-radius: 0;
  224.     padding: 10px 0;
  225.     width: 100%;
  226.     font: 22px Lobster Two;
  227.     color: #FFF !important;
  228.     text-transform: capitalize;
  229. }
  230.  
  231. #voltie section h3:first-letter {
  232.     color: #F4ACB7;
  233. }
  234.  
  235.  
  236. /** Voltie Info **/
  237. #voltie .voltie_info {
  238.     padding: 0;
  239.     background: #FFF;
  240. }
  241.  
  242. #voltie .voltie_avatar {
  243.     margin: 0 auto 10px;
  244.     border-radius: 5px;
  245. }
  246.  
  247. #voltie .voltie_actions {
  248.     background: #9CBB9C;
  249.     width: 100%;
  250.     margin: 0;
  251.     padding: 5px 0;
  252.     display: inline-flex;
  253.     justify-content: space-evenly;
  254. }
  255.  
  256. #voltie .voltie_actions .col-xs-6 {
  257.     float: none;
  258.     padding: 0;
  259.     width: 100%;
  260.     position: initial;
  261.     margin: 0 5px;
  262. }
  263.  
  264. #voltie .voltie_actions .col-xs-6 a {
  265.     display: block;
  266.     margin: 0 auto;
  267.     padding: 5px;
  268.     border-radius: 0px;
  269.     background:transparent;
  270.     color: #FFF !important;
  271.     font-size: 12px;
  272.     text-decoration: underline;
  273.     text-decoration-color: #F4ACB7;
  274.     transition: all 0.1s linear;
  275.    
  276. }
  277.  
  278. #voltie .voltie_actions .col-xs-6 a:hover {
  279.     text-decoration-color: #FFF;
  280.     text-shadow: 0 0 2px #F4ACB7;
  281. }
  282.  
  283.  
  284. /** Equipped Items **/
  285. #voltie .voltie_equipped_items {
  286.     background: #9CBB9C;
  287. }
  288.  
  289. #voltie .equipped-item-poses {
  290.     padding: 0;
  291.     margin: 5px auto 0;
  292.     border: 0;
  293.     display: inline-flex;
  294. }
  295.  
  296. #voltie .equipped-item-poses .equipped-item {
  297.     width: 7%;
  298.     height: auto;
  299.     overflow: hidden;
  300.     padding: 5px;
  301.     border-radius: 50%;
  302.     margin: 0 5px;
  303.     transition: all 0.1s linear;
  304.     background: #FFF !important;
  305.     border: 0;
  306. }
  307.  
  308. #voltie .equipped-item:hover {
  309.     padding: 0;
  310. }
  311.  
  312. #voltie .equipped-item img {
  313.     width: 100%;
  314.     height: 100%;
  315.     margin: 0;
  316.     border-radius: 50%;
  317.     opacity: 0.5;
  318.     transition: all 0.1s linear;
  319. }
  320.  
  321. #voltie .equipped-item:hover img {
  322.     opacity: 1;
  323. }
  324.  
  325.  
  326. /** Video **/
  327. #voltie .voltie_video {
  328.         background: #FFF;
  329. }
  330.  
  331. #voltie .voltie_video h3 {
  332.     color: #9CBB9C !important;
  333. }
  334.  
  335. #voltie .voltie_video .embed-responsive {
  336.     border-radius: 5px;
  337. }
  338.  
  339.  
  340. /** Friends List **/
  341. #voltie .voltie_friends {
  342.     width: 100%;
  343.     background: #9CBB9C;
  344. }
  345.  
  346. #voltie .voltie_friends a {
  347.     width: 7%;
  348.     margin: 5px !important;
  349.     border-radius: 50% !important;
  350.     overflow: hidden;
  351.     display: inline-flex !important;
  352. }
  353.  
  354. #voltie .voltie_friends a:hover {
  355.     animation: wobble 0.75s linear normal 1;
  356.     animation-fill-mode: both;
  357. }
  358.  
  359. @keyframes wobble {
  360.     0%, 100% { transform: rotate(0); }
  361.     20% { transform: rotate(-35deg); }
  362.     40% { transform: rotate(35deg); }
  363.     60% { transform: rotate(-20deg); }
  364.     80% { transform: rotate(20deg); }
  365. }
  366.  
  367.  
  368. /** Bio **/
  369. #voltie .voltie_bio {
  370.     padding: 10px 20px !important;
  371.     font: 12px Roboto;
  372.     background: #FFF;
  373.     text-align: center;
  374.     color: #9CBB9C !important;
  375. }
  376.  
  377. #voltie .voltie_bio h3 {
  378.     color: #9CBB9C !important;
  379. }
  380.  
  381. #voltie .voltie_bio img {
  382.     transform: scale(90%);
  383. }
  384.  
  385.  
  386. /** Comments **/
  387. #voltie .voltie_comments {
  388.     display: flex;
  389.     flex-direction: column;
  390.     background: #9CBB9C;
  391. }
  392.  
  393. #voltie .voltie_comments ul {
  394.     width: 100%;
  395.     margin: 0 auto !important;
  396.     padding: 0;
  397. }
  398.  
  399. #voltie .voltie_comments ul li {
  400.     position: initial;
  401.     display: flex;
  402.     flex-direction: column;
  403.     width: 70%;
  404.     margin: 20px auto !important;
  405.     padding: 20px 10px 10px !important;
  406.     background: rgba(230, 240, 210, 0.3);
  407.     border-radius: 5px;
  408. }
  409.  
  410. #voltie .voltie_comments ul li .comment_username {
  411.     order: 2;
  412.     text-align: center;
  413.     margin: 0 auto !important;
  414.     padding: 5px 0 0 !important;
  415.     font: 16px Lobster Two;
  416.     color: #FFF !important;
  417.     border-bottom: 1px solid #F4ACB7;
  418. }
  419.  
  420. #voltie .voltie_comments ul li a:nth-child(1) {
  421.     width: 100%;
  422.     height: auto;
  423.     margin: 5px auto;
  424.     order: 1;
  425.     text-align: center;
  426. }
  427.  
  428. #voltie .voltie_comments ul li a:nth-child(1) img {
  429.     border-radius: 50%;
  430.   width: 50px !important;
  431.     height: 50px !important;
  432.     border: 1px solid #FFF;
  433. }
  434.  
  435. #voltie .voltie_comments ul li p {
  436.     width: 80%;
  437.     order: 3;
  438.     margin: 10px auto 0;
  439.     border: 0;
  440.     padding: 25px 10px;
  441.     background: transparent;
  442.     box-shadow: none;
  443.     color: #FFF;
  444.     font: 12px Roboto;
  445.     text-align: center;
  446. }
  447.  
  448. #voltie .voltie_comments ul li a img {
  449.     margin: 0 auto !important;
  450.     position: initial !important;
  451. }
  452.  
  453. #voltie .voltie_comments ul li small {
  454.     order: 4;
  455.     width: 90%;
  456.     text-align: center;
  457.     margin: 2.5px auto;
  458.     color: #FFF !important;
  459.     opacity: 0;
  460.     transition: all 0.1s linear;
  461.     font-size: 10px;
  462. }
  463.  
  464. #voltie .voltie_comments ul li .comment_options {
  465.     position: initial;
  466.     order: 5;
  467.     text-align: center;
  468.     text-transform: lowercase !important;
  469.     opacity: 0;
  470.     transition: all 0.3s linear;
  471. }
  472.  
  473. #voltie .voltie_comments ul li > .comment_delete {
  474.     text-align: center;
  475.     order: 5;
  476.     text-transform: lowercase;
  477.     font-size: 10px;
  478.     color: grey;
  479.     opacity: 0;
  480.     transition: all 0.3s linear;
  481. }
  482.  
  483. #voltie .voltie_comments ul li:hover .comment_delete {
  484.     opacity: 1;
  485. }
  486.  
  487. #voltie .voltie_comments ul li > img {
  488.     position: initial;
  489.     border-radius: 50%;
  490.     border: 1px solid #FFF;
  491.     margin: 0 auto;
  492. }
  493.  
  494. #voltie .voltie_comments ul li .comment_options a {
  495.     color: grey !important;
  496. }
  497.  
  498. #voltie .voltie_comments ul li:hover .comment_options {
  499.     opacity: 1;
  500. }
  501.  
  502. #voltie .voltie_comments ul li:hover small {
  503.     opacity: 1;
  504. }
  505.  
  506. #voltie .voltie_comments .comments_load_more {
  507.     width: 100%;
  508.     background: transparent;
  509.     color: #FFF;
  510.     font: 16px Lobster Two;
  511.     transition: all 0.1s linear;
  512.     margin: 25px auto 5px;
  513. }
  514.  
  515. #voltie .voltie_comments .comments_load_more:first-letter {
  516.     color: rgb(225, 235, 215) !important;
  517. }
  518.  
  519. #voltie .voltie_comments .comments_load_more:hover {
  520.     background: #FFF;
  521.     color: #9CBB9C;
  522. }
  523.  
  524. #voltie .voltie_comments #comment-form {
  525.     width: 90%;
  526.     padding: 0;
  527.     margin: 0 auto;
  528.     display: flex;
  529.     flex-direction: column;
  530. }
  531.  
  532. #voltie .voltie_comments #comment-form .row {
  533.     width: 100%;
  534.     margin: 0 auto;
  535.     padding: 0;
  536. }
  537.  
  538. #voltie .voltie_comments #comment-form .row .col-xs-6 {
  539.     width: 100%;
  540.     padding: 0;
  541.     margin:0;
  542.     display: inline-flex;
  543.     justify-content: center;
  544. }
  545.  
  546. #voltie .voltie_comments #comment-form #comment-text {
  547.     background: #FFF;
  548.     border: 0;
  549.     font: 12px Roboto;
  550.     padding: 5px;
  551.     color: #F4ACB7;
  552. }
  553.  
  554. #voltie .voltie_comments #comment-form .col-xs-6:nth-child(1) {
  555.     font: 11px Roboto;
  556.     padding: 5px 0;
  557. }
  558.  
  559. #voltie .voltie_comments #comment-form .col-xs-6:nth-child(1) span {
  560.     color: #FFF;
  561. }
  562.  
  563. #voltie .voltie_comments #comment-form #charsLeft {
  564.     color: #F4ACB7 !important;
  565. }
  566.  
  567. #voltie .voltie_comments #comment-form #comment-button {
  568.     width: 100%;
  569.     background: transparent !important;
  570.     border: 0;
  571.     font: 18px Lobster Two;
  572.     color: #FFF;
  573. }
  574.  
  575. #structure .copyright {
  576.     background: #9CBB9C;
  577.     width: 100%;
  578. }
  579.  
  580. #structure .copyright .container {
  581.     background: transparent;   
  582. }
  583.  
  584. #structure .copyright .container .col-md-6 {
  585.     display: inline-flex;
  586.     font: 14px Lobster Two;
  587.     padding: 0 10px;
  588.     margin: 0;
  589. }
  590.  
  591. #structure .copyright .container .col-md-6 a {
  592.     color: #9CBB9C !important; 
  593.     font-size: 14px;
  594.     text-decoration: underline;
  595. }
  596.  
  597. #structure .copyright .container .col-md-6:nth-child(1) {
  598.     justify-content: end;
  599.     width: 75%;
  600. }
  601.  
  602. #structure .copyright .container .col-md-6:nth-child(2) {
  603.     background: #FFF;
  604.     width: 25%;
  605.     justify-content: space-evenly;
  606. }
  607.  
  608. .bottom_ul {
  609.     padding: 0;
  610.     margin: 0;
  611. }
  612.  
  613. /* Mobile Responsiveness */
  614.  
  615. @media screen and (max-width:764px) {
  616.  
  617.     .navbar-inverse .navbar-collapse {
  618.         border-color: #FFF;
  619.     }
  620.    
  621.     .navbar-header .navbar-toggle {
  622.         border-color: transparent;
  623.         background: rgba(230, 240, 210, 0.3);
  624.     }
  625.    
  626.     .navbar-header .navbar-toggle:hover, .navbar-header .navbar-toggle:focus {
  627.         background: #F4ACB7;
  628.     }
  629.    
  630.     #content {
  631.         width: 100%;
  632.     }
  633.    
  634.     #content .content_navigation {
  635.         margin: 0 auto;
  636.     }
  637.    
  638.     #structure .copyright .container .col-md-6 {
  639.         width: 100% !important;
  640.         justify-content: center !important;
  641.     }
  642.  
  643. }
  644.  
  645. @media screen and (min-width:765px) {
  646.  
  647.     #content {
  648.         width: 600px;
  649.     }
  650.  
  651. }
  652.  
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!