API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 29th, 2020
303
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 34.51 KB | None | 0 0
raw download clone embed print report
  1. body {
  2.   // background: rgba(#fff, 0.4);
  3.   position: relative;
  4.   // background: #222;
  5. }
  6.  
  7. .bg-purple {
  8.   background-color: $purple;
  9. }
  10. .auth {
  11.   position: relative;
  12.   height: 100vh;
  13.   overflow-y: hidden;
  14.   .character {
  15.     position: absolute;
  16.     z-index: 2;
  17.     right: 300px;
  18.     bottom: 0px;
  19.     width: 240px;
  20.     height: 350px;
  21.     background-image: url('/assets/images/modals/franklin_render.png');
  22.     background-repeat: no-repeat;
  23.     background-size: cover;
  24.   }
  25.   .logo {
  26.     position: absolute;
  27.     z-index: 3;
  28.     right: 50px;
  29.     top: 100px;
  30.     width: 300px;
  31.     height: 2500px;
  32.     background-image: url('/assets/images/modals/logo.png');
  33.     background-repeat: no-repeat;
  34.     background-size: contain;
  35.     border-bottom: solid 1px rgba(#000, 0.1);
  36.   }
  37.   .login-box {
  38.     text-align: center;
  39.     z-index: 1;
  40.     height: 100%;
  41.     width: 400px;
  42.     position: absolute;
  43.     right: 0px;
  44.     top: 0px;
  45.     display: flex;
  46.     background-color: rgba($card-bg, 0.8);
  47.     display: flex;
  48.     flex-direction: column;
  49.     align-items: center;
  50.     justify-content: center;
  51.     padding: 10px 15px;
  52.     h1 {
  53.       font-family: 'HouseScript';
  54.       font-size: 50px;
  55.       line-height: 50px;
  56.       color: #fff;
  57.     }
  58.  
  59.   }
  60.   .copyright {
  61.     color: #fff;
  62.     text-shadow: rgba(#000, 0.5) 1px 1px 1px;
  63.     position: absolute;
  64.     top: 10px;
  65.     left: 10px;
  66.   }
  67. }
  68.  
  69. .gui-screen {
  70.   height: 100vh;
  71.   width: 100vw;
  72.   position: relative;
  73.   overflow: hidden;
  74.  
  75.   .gui-chat {
  76.     font-family: 'IBM Plex Sans';
  77.     position: absolute;
  78.     top: 0px;
  79.     left: 0px;
  80.     margin: 2vh 0px 0px 2vw;
  81.  
  82.     .chatWindow {
  83.       width: 34vw;
  84.       .chatEntries {    
  85.         height: 230px;
  86.         min-height: 230px;
  87.         overflow-y: auto;
  88.         p {
  89.           margin: 0;
  90.           font-weight: bold;
  91.           font-size: 15px;
  92.           line-height: 20px;
  93.           color: #fff;
  94.           word-break: break-word;
  95.           text-shadow:
  96.           0.08em 0 black,
  97.           0 0.08em black,
  98.           -0.08em 0 black,
  99.           0 -0.08em black;
  100.           padding-left: 5px;
  101.           letter-spacing: 0.4px;
  102.          
  103.         }
  104.         .global-message {
  105.           color: #fbc531;
  106.         }
  107.         .action-message {
  108.           font-weight: bold;
  109.           color: #c2a2da;
  110.         }
  111.         .premium-message {
  112.           color: #E262F2;
  113.         }
  114.         .server-message {
  115.           font-weight: bold;
  116.           color: $warning;
  117.         }
  118.         .server-error {
  119.           color: darken(#fff, 15%);
  120.           font-weight: bold;
  121.         }
  122.         .error-message {
  123.           color: #fff;
  124.           span {
  125.             color: darken(#fff, 25%);
  126.           }
  127.         }
  128.         .event-message {
  129.           color: #eb4d4b;
  130.           font-weight: bold;
  131.         }
  132.         .admin-message {
  133.           color: #FF6347;
  134.           font-weight: bold;
  135.         }
  136.         .house-message {
  137.           color: #44bd32;
  138.           font-weight: bold;
  139.         }
  140.         .bizz-message {
  141.           color: #fbc531;
  142.           font-weight: bold;
  143.         }
  144.         .group-message {
  145.           color: #EA7667;
  146.           font-weight: bold;
  147.         }
  148.         .trade-message {
  149.           color: #60a3bc;
  150.         }
  151.         .vehicle-message {
  152.           color: #b8bac6;
  153.         }
  154.         .faction-message {
  155.           color: #01fcff;
  156.         }
  157.       }
  158.       .chatEntries::-webkit-scrollbar {
  159.         width: 0%;
  160.       }
  161.       .chatEntries::-webkit-scrollbar-thumb {
  162.         background: rgba(#fff,0.3);
  163.       }
  164.       .chatEntries::-webkit-scrollbar-track {
  165.         background: rgba(0,0,0,0.5);
  166.       }
  167.      
  168.       .chatInputs {
  169.         padding-top: 15px;
  170.         display: none;
  171.         .chatChannel {
  172.           display: flex;
  173.           justify-content: center;
  174.           align-items: center;
  175.           background:rgba(0,0,0,0.8);
  176.           color: #fff;
  177.           font-size: 12px;
  178.           width: 15%;          
  179.         }
  180.         .currentLength {
  181.           display: flex;
  182.           justify-content: center;
  183.           align-items: center;
  184.           background:rgba(0,0,0,0.5);
  185.           color: #fff;
  186.           font-size: 12px;
  187.           width: 10%;
  188.         }
  189.         input {
  190.           color:white;
  191.           background:rgba(0,0,0,0.5);
  192.           outline:none !important;
  193.           border:none !important;
  194.           box-shadow: none !important;
  195.           font-size:14px;
  196.           width:35vw;
  197.           padding:5px 5px 5px 10px;
  198.           width: 100%;
  199.         }
  200.         input::placeholder {
  201.           color: darken(#fff, 20%);
  202.         }
  203.       }
  204.      
  205.     }
  206.     .chatWindow.active {
  207.       .chatEntries::-webkit-scrollbar {
  208.           width: 10px;
  209.       }
  210.       .chatEntries {
  211.         opacity: 1;
  212.       }
  213.     }
  214.   }
  215.  
  216.   .gui-hud {
  217.     .youtube-player {
  218.       position: absolute;
  219.       bottom: 2vh;
  220.       right: 2vw;
  221.       iframe {
  222.         width: 500px;
  223.         height: 300px;
  224.         box-shadow: rgba(#000, 0.3) -15px 15px 5px 5px;
  225.       }
  226.       .close {
  227.         position: absolute;
  228.         right: -10px;
  229.         top: -10px;
  230.         background: $primary;
  231.         width: 40px;
  232.         height: 40px;
  233.         display: flex;
  234.         align-items: center;
  235.         justify-content: center;
  236.         border-radius: 100%;
  237.         i {
  238.           color: #fff;
  239.           font-size: 20px;
  240.         }
  241.       }
  242.       .message {
  243.         height: 40px;
  244.         width: 100%;
  245.         background: rgba($card-bg,0.6);
  246.         display: flex;
  247.         align-items: center;
  248.         justify-content: center;
  249.         font-size: 16px;
  250.         border-radius: 3px;
  251.         border: solid 1px rgba(#fff, 0.1);
  252.         .key {
  253.           background: white;
  254.           color: #000;
  255.           display: block;
  256.           margin: 0px 5px;
  257.           height: 20px;
  258.           width: 25px;
  259.           border-radius: 3px;
  260.           display: flex;
  261.           align-content: center;
  262.           justify-content: center;
  263.           padding: 0px;
  264.           font-weight: bold;
  265.         }
  266.       }
  267.     }  
  268.   }
  269. }
  270.  
  271.  
  272. input[type=range] {
  273.   -webkit-appearance: none;  
  274.   width: 100%;
  275.   background: rgba($primary, 0.5);
  276.   height: 15px;
  277. }
  278.  
  279.  
  280. input[type=range]:focus {
  281.   outline: none;
  282. }
  283.  
  284. /* Special styling for WebKit/Blink */
  285. input[type=range]::-webkit-slider-thumb {
  286.   -webkit-appearance: none;
  287.   height: 25px;
  288.   width: 25px;
  289.   border-radius: 100%;
  290.   background: lighten($primary, 2%);
  291.   cursor: pointer;
  292. }
  293.  
  294. /* All the same stuff for Firefox */
  295. input[type=range]::-moz-range-thumb {
  296.   -webkit-appearance: none;
  297.   border: 1px solid darken($secondary, 3%);
  298.   height: 30px;
  299.   width: 15px;
  300.   border-radius: 0px;
  301.   background: $secondary;
  302.   cursor: pointer;
  303. }
  304.  
  305. /* All the same stuff for IE */
  306. input[type=range]::-ms-thumb {
  307.   -webkit-appearance: none;
  308.   border: 1px solid darken($secondary, 3%);
  309.   height: 30px;
  310.   width: 15px;
  311.   border-radius: 0px;
  312.   background: $secondary;
  313.   cursor: pointer;
  314. }
  315.  
  316.  
  317. ::-webkit-scrollbar {
  318.   width: 10px;
  319. }
  320.  
  321. ::-webkit-scrollbar-thumb {
  322.   background: rgba($primary,0.9);
  323. }
  324.  
  325. ::-webkit-scrollbar-track {
  326.   background: rgba(0,0,0,0.4);
  327. }
  328.  
  329. hr {
  330.   border-color: rgba(#fff, 0.10);
  331. }
  332.  
  333. .noty-container {
  334.   padding: 6px 5px;
  335.   font-size: 16px;
  336.   i {
  337.     font-size: 25px;
  338.     margin-right: 10px;
  339.   }
  340. }
  341.  
  342. .noty_theme__relax.noty_type__error {
  343.   background-color: rgba($danger, 0.85);
  344.   border: solid 1px rgba(#fff, 0.10) !important;
  345.   color: #FFF;
  346. }
  347.  
  348. .noty_theme__relax.noty_type__success {
  349.   background-color: rgba($success, 0.85);
  350.   border: solid 1px rgba(#fff, 0.10) !important;
  351.   color: #FFF;
  352. }
  353.  
  354. .noty_theme__relax.noty_type__information {
  355.   background-color: rgba($info, 0.85);
  356.   border: solid 1px rgba(#fff, 0.10) !important;
  357.   color: #FFF;
  358. }
  359.  
  360. .noty_theme__relax.noty_type__warning {
  361.   background-color: rgba($warning, 0.85);
  362.   border: solid 1px rgba(#fff, 0.10) !important;
  363.   color: #FFF;
  364. }
  365.  
  366.  
  367. #noty_layout__bottomCenter, #noty_layout__topCenter{
  368.   width: 600px;
  369. }
  370. #noty_layout__topLeft, #noty_layout__topRight,
  371. #noty_layout__bottomLeft, #noty_layout__bottomRight,
  372. #noty_layout__centerLeft, #noty_layout__centerRight,
  373. #noty_layout__center{
  374.   width: 450px;
  375. }
  376. .noty_has_timeout.noty_has_progressbar .noty_progressbar {
  377.   opacity: 0.3;
  378.   height: 4px;
  379.   background: #000 !important;
  380. }
  381.  
  382. .card {
  383.   border: none;
  384.   box-shadow: rgba(#000, 0.40) 10px 11px 15px 1px;
  385. }
  386. .card-header-gta {
  387.   background-color: rgba($primary,.8);
  388.   background-image: repeating-linear-gradient(to left top,transparent,transparent 2vh,rgba(195,195,195,.1) 2vh,rgba(195,195,195,.1) 3vh);
  389.   font-family: 'HouseScript';
  390.   padding: 10px 15px;
  391.   text-shadow: #000 1px 1px 1px;
  392.   .modal-title {
  393.     font-size: 40px;
  394.     line-height: 40px;
  395.     font-weight: bold;
  396.   }
  397.   p {
  398.     margin: 0px;
  399.     font-size: 30px;
  400.     line-height: 30px;
  401.     font-weight: bold;
  402.   }
  403.   box-shadow: 0 10px 2px 0px rgba(#000, 0.2);
  404.   margin-bottom: 5px;
  405.   .cancel-button {
  406.     font-size: 30px;
  407.     line-height: 10px;
  408.     color: #fff;
  409.   }
  410. }
  411.  
  412. .gui-modals {
  413.  
  414.   height: 100vh;
  415.   width: 100vw;
  416.   .basic-modal {
  417.     display: flex;
  418.     justify-content: center;
  419.     align-items: center;
  420.     height: 100vh;
  421.     width: 100vw;
  422.     .card {
  423.       min-width: 600px;
  424.     }
  425.   }
  426.  
  427.   .edit-dealership {
  428.     .card {
  429.       max-width: 900px;
  430.       width: 900px;
  431.     }
  432.     .scrollable {
  433.       max-height: 400px;
  434.       min-height: 400px;
  435.       overflow-y: auto;
  436.       margin-bottom: 10px;
  437.       padding-bottom: 10px;
  438.       border-bottom: solid 1px rgba(#fff, 0.05);
  439.     }
  440.   }
  441.  
  442.   .dealership {
  443.     display: flex;
  444.     align-items: center;
  445.     justify-content: flex-end;
  446.     padding-right: 50px;
  447.     .card {
  448.       min-width: 400px;
  449.     }
  450.     .car-info {
  451.       font-family: 'IBM Plex Sans';
  452.       background: rgba(darken($primary, 8%), 0.4);
  453.       padding: 15px 15px 20px 15px;
  454.       .data {
  455.         padding: 10px 10px 20px 10px;
  456.         .title {
  457.           font-size: 30px;
  458.           line-height: 40px;
  459.           text-transform: capitalize;
  460.           color: #fff;
  461.         }
  462.         .price {
  463.           color: darken($success, 6%);
  464.           text-shadow: rgba(#000, 0.2) 1px 1px 1px;
  465.           font-size: 23px;
  466.           line-height: 30px;
  467.           font-weight: bold;
  468.         }
  469.         .stock {
  470.           color: darken(#fff, 15%);
  471.           font-size: 16px;
  472.           line-height: 16px;
  473.           margin-bottom: 5px;
  474.         }
  475.       }
  476.     }
  477.   }
  478.  
  479.   .vehicle-menu {
  480.     .card {
  481.       min-width: 500px;
  482.     }
  483.    
  484.     .entry {
  485.       display: flex;
  486.       padding: 15px 15px;
  487.       margin-bottom: 5px;
  488.       background: rgba(#000, 0.2);
  489.       display: flex;
  490.       align-items: center;
  491.       &:hover {
  492.         background: rgba(#000, 0.3);
  493.       }
  494.       .text {
  495.         font-size: 18px;
  496.         font-weight: bold;
  497.       }
  498.       .icon {
  499.         margin-left: auto;
  500.         color: rgba($primary, 0.8);
  501.         font-size: 25px;
  502.       }
  503.     }
  504.    
  505.   }
  506.  
  507.   .reports-container {
  508.     min-height: 300px;
  509.     max-height: 500px;
  510.     overflow-y: auto;
  511.     padding: 10px 10px;
  512.     .entry {
  513.       background: rgba($secondary, 0.3);
  514.       margin-bottom: 3px;
  515.       padding: 10px 15px;
  516.       .time {
  517.         border-right: solid 1px rgba(#fff, 0.2);
  518.         padding-right: 10px;
  519.         margin-right: 10px;
  520.       }
  521.       .title {
  522.         padding-left: 10px;
  523.       }
  524.       &:hover {
  525.         background: rgba($secondary, 0.5);
  526.       }
  527.     }
  528.   }
  529.  
  530.  
  531.   .modal-menu {
  532.     .card {
  533.       min-width: 400px;
  534.      
  535.     }
  536.     .scrollable {
  537.       min-height: 400px;
  538.       max-height: 400px;
  539.       overflow-y: auto;
  540.       padding-right: 5px;
  541.       margin-bottom: 5px;
  542.       .entry {
  543.         padding: 10px 15px;
  544.         margin-bottom: 5px;
  545.         font-size: 16px;
  546.         background: rgba(#000, 0.2);
  547.       }
  548.       .entry.active {
  549.         background: rgba(#000, 0.4);
  550.       }
  551.     }
  552.   }
  553.  
  554.   .factions {
  555.     min-width: 500px;
  556.     width: 500px;
  557.   }
  558.   .manage-faction {
  559.     min-width: 600px;
  560.     width: 600px;
  561.   }
  562.  
  563.   .gps {
  564.     .card {
  565.       min-width: 500px;
  566.     }
  567.     .gps-locations {
  568.       min-height: 300px;
  569.       max-height: 300px;
  570.       overflow-y: auto;
  571.       padding-right: 10px;
  572.       margin-bottom: 10px;
  573.       .entry {
  574.         padding: 10px 15px;
  575.         margin-bottom: 5px;
  576.         font-size: 16px;
  577.         background: rgba(#000, 0.2);
  578.       }
  579.       .entry.active {
  580.         background: rgba(#000, 0.3);
  581.       }
  582.     }
  583.   }
  584.  
  585.   .customs {
  586.     justify-content: flex-start;
  587.     width: 600px;
  588.     max-width: 60vw;
  589.     margin-left: 2vw;
  590.     .card {
  591.       min-width: 500px;
  592.     }
  593.     .customs-container {
  594.       .entry {
  595.         display: block;
  596.         padding: 10px 12px;
  597.         background: rgba(#000, 0.1);
  598.         margin-bottom: 3px;
  599.         .fields {
  600.           display: flex;
  601.           align-items: center;
  602.           .text {
  603.            margin-right: auto;
  604.           }
  605.           .price {
  606.             // font-family: 'HouseScript';
  607.             // font-size: 30px;
  608.             // line-height: 35px;
  609.             font-weight: bold;
  610.             font-size: 20px;
  611.           }
  612.         }
  613.       }
  614.       .scrollable {
  615.         max-height: 500px;
  616.         overflow-y: auto;
  617.         padding-right: 3px;
  618.       }
  619.     }
  620.   }
  621.  
  622.   .youtube {
  623.     .scrollable {
  624.       min-width: 600px;
  625.       .entry {
  626.         background: rgba(#000, 0.1);
  627.         margin-bottom: 3px;
  628.         padding: 5px 10px;
  629.         .video-thumbnail {
  630.           height: 50px;
  631.           width: 50px;
  632.           background-size: contain;
  633.           background-repeat: no-repeat;
  634.         }
  635.         .title {
  636.           padding-left: 20px;
  637.           font-size: 18px;
  638.           width: 80%;
  639.           margin-right: auto;
  640.         }
  641.        
  642.         .play {
  643.           background: $primary;
  644.           height: 50px;
  645.           width: 50px;
  646.           display: flex;
  647.           align-items: center;
  648.           justify-content: center;
  649.           text-align: center;
  650.           line-height: 40px;
  651.           font-size: 15px;
  652.           padding: 0px;
  653.           margin: 0px;
  654.         }
  655.  
  656.       }
  657.     }
  658.   }
  659.  
  660.   .bizz {
  661.     .coord {
  662.       background: rgba(#000, 0.2);
  663.       padding: 5px;
  664.     }
  665.     .small-scrollable {
  666.       margin: 10px 0px;
  667.       max-height: 400px;
  668.       overflow-y: auto;
  669.       padding: 5px;
  670.       background: rgba($primary, 0.2);
  671.       .entry {
  672.         background: rgba(#000, 0.5);
  673.         width: 100%;
  674.         display: flex;
  675.         margin-bottom: 5px;
  676.       }
  677.     }
  678.     .bizz-creator {
  679.       min-width: 600px;
  680.       min-height: 70vh;
  681.       .bizz-container {
  682.         .scrollable {
  683.           max-height: 70vh;
  684.         }
  685.       }
  686.       .scrollable {
  687.         max-height: 80vh;
  688.       }
  689.     }
  690.     .bizz-container {
  691.       .scrollable {
  692.         max-height: 400px;
  693.         min-height: 300px;
  694.         overflow-y: auto;
  695.         padding-right: 5px;
  696.         margin-bottom: 15px;
  697.         border-bottom: solid 1px rgba(#fff, 0.03);
  698.         padding-bottom: 15px;
  699.       }
  700.       .entry {
  701.         display: flex;
  702.         background: rgba(#000, 0.1);
  703.         margin-bottom: 5px;
  704.         padding: 5px 10px;
  705.         .title {
  706.           font-family: 'IBM Plex Sans';
  707.           font-size: 15px;
  708.           margin-right: auto;
  709.           font-weight: bold;
  710.         }
  711.       }
  712.       .entry.active {
  713.         background: rgba(#000, 0.5);
  714.       }
  715.     }
  716.   }
  717.  
  718.   .clothes {
  719.     position: absolute;
  720.     right: 0px;
  721.     top: 0px;
  722.     height: 100vh;
  723.     width: 100vw;
  724.     display: flex;
  725.     align-items: center;
  726.     justify-content: flex-start;
  727.     padding-left: 3vw;
  728.     .content {
  729.       border: solid 1px rgba(darken(#fff, 20%), 0.12);
  730.       border-radius: 5px;
  731.       background: $card-bg;
  732.       width: 500px;
  733.       max-width: 40vw;
  734.       padding-bottom: 30px;
  735.       .header {
  736.         background-color: rgba($primary,.8);
  737.         background-image: repeating-linear-gradient(to left top,transparent,transparent 2vh,rgba(195,195,195,.1) 2vh,rgba(195,195,195,.1) 3vh);
  738.         font-family: 'HouseScript';
  739.         padding: 10px 15px;
  740.         text-shadow: #000 1px 1px 1px;
  741.         display: flex;
  742.         align-items: center;
  743.         h1 {
  744.           font-size: 40px;
  745.           color: #fff;
  746.           line-height: 45px;
  747.           font-weight: bold;
  748.           margin: 0px;
  749.           padding: 0px;
  750.           display: flex;
  751.           align-items: center;
  752.         }
  753.         p {
  754.           color: darken(#fff, 15%);
  755.           margin: 0px;
  756.           font-size: 28px;
  757.           line-height: 30px;
  758.           font-weight: normal;
  759.           letter-spacing: 1.5px;
  760.         }
  761.         // box-shadow: 0 25px 2px 0px rgba(#000, 0.2);
  762.         // margin-bottom: 10px;
  763.       }
  764.       .scrollable {
  765.         max-height: 60vh;
  766.         overflow-y: auto;
  767.         margin-bottom: 30px;
  768.         padding: 10px 10px;
  769.         background: darken($card-bg, 1%);
  770.         padding: 10px 15px;
  771.       }
  772.       .price {
  773.         // font-family: 'HouseScript';
  774.         font-size: 20px;
  775.         line-height: 20px;
  776.         // font-weight: bold;
  777.         color: #fff;
  778.         text-shadow: rgba(#000, 0.3) 1px 1px 1px;
  779.       }
  780.     }
  781.   }
  782.  
  783.   .trade-screen {
  784.     height: 100vh;
  785.     width: 100vw;
  786.     background: rgba(darken($primary, 4%), 0.8);
  787.     display: flex;
  788.     align-items: center;
  789.     justify-content: flex-start;
  790.     flex-direction: column;
  791.     .offer-instructions {
  792.       margin-top: 10px;
  793.       background: rgba(darken($primary, 5%), 1);
  794.       width: 1500px;
  795.       max-width: 90vw;
  796.       padding: 10px;
  797.       display: flex;
  798.       align-items: center;
  799.       border-radius: 3px;
  800.       background-image: url('/assets/images/modals/trade_render.png');
  801.       background-position: center center;
  802.       background-repeat: no-repeat;
  803.       color: #fff;
  804.       .text {
  805.         width: 70%;
  806.       }
  807.       .buttons {
  808.         width: 30%;
  809.       }
  810.       h1 {
  811.         font-weight: bold;
  812.         font-size: 20px;
  813.         line-height: 20px;
  814.         color: $warning;
  815.         text-shadow: #000 1px 1px 1px;
  816.       }
  817.       h2 {
  818.         font-size: 14px;
  819.         line-height: 14px;
  820.       }
  821.     }
  822.     .trade-center {
  823.       display: flex;
  824.       align-items: flex-start;
  825.       justify-content: center;
  826.       margin-top: 20px;
  827.       width: 1500px;
  828.       max-width: 90vw;
  829.  
  830.       .header {
  831.         font-size: 16px;
  832.         color: #fff;
  833.         line-height: 20px;
  834.         text-shadow: #000 1px 1px 1px;
  835.         border-bottom: solid 1px rgba(#fff, 0.08);
  836.         margin-bottom: 10px;
  837.         background-color: rgba($secondary,0.99);
  838.         padding: 10px 10px;
  839.         text-shadow: #000 1px 1px 1px;
  840.         display: flex;
  841.         align-items: center;
  842.       }
  843.       .cash {
  844.         display: flex;
  845.         align-items: center;
  846.         justify-content: center;
  847.         width: 100%;
  848.         height: 60px;
  849.         padding: 5px;
  850.         background: rgba(darken($secondary, 10%), 0.9);
  851.         input {
  852.           width: 55%;
  853.           background: rgba(darken($primary, 15%), 0.5);
  854.         }
  855.         .text {
  856.           width: 25%;
  857.           margin-left: 10px;
  858.           text-align: center;
  859.           font-size: 16px;
  860.         }
  861.       }
  862.       .items-scrollable {
  863.         height: 100%;
  864.         max-height: 80%;
  865.         overflow-y: auto;
  866.         width: 100%;
  867.         background: rgba(#000, 0.05);
  868.         padding: 3px;
  869.         padding-right: 5px;
  870.         padding-left: 5px;
  871.         .entry {
  872.           position: relative;
  873.           background: rgba(darken($primary, 2%), 0.98);
  874.           height: 100px;
  875.           width: 100px;
  876.           padding: 2px;
  877.           margin: 4px;
  878.           display: inline-flex;
  879.           flex-basis: 25%;
  880.           border-radius: 3px;
  881.           align-items: center;
  882.           justify-content: center;
  883.           .quantity {
  884.             position: absolute;
  885.             bottom: 5px;
  886.             right: 5px;
  887.             background: rgba($secondary, 1);
  888.             height: 30px;
  889.             min-width: 30px;
  890.             padding: 0px 5px;
  891.             font-size: 14px;
  892.             font-weight: bold;
  893.             display: flex;
  894.             align-items: center;
  895.             justify-content: center;
  896.             border-radius: 5px;
  897.           }
  898.         }
  899.         .entry.disabled {
  900.           display: none;
  901.         }
  902.         .entry.traded {
  903.           display: none;
  904.         }
  905.         .item-image {
  906.           background-repeat: no-repeat;
  907.           background-size: contain;
  908.           background-position: center center;
  909.           height: 70%;
  910.           width: 70%;
  911.           opacity: 1;
  912.           background-image: url('/assets/images/inventory/no_image.png');
  913.           background-repeat: no-repeat;
  914.  
  915.         }
  916.       }
  917.       .instruction-offer {
  918.         margin: 0px;
  919.         padding: 0px;
  920.         font-size: 14px;
  921.         font-weight: bold;
  922.         color: darken(#fff, 3%);
  923.         text-shadow: rgba(#000, 0.6) 1px 1px 1px;
  924.       }
  925.       .left-screen {
  926.         width: 50%;
  927.         .your-inventory {
  928.           height: 500px;
  929.           width: 90%;
  930.           background: rgba($primary, 1);
  931.           border-radius: 3px;
  932.           border: solid 2px #333;
  933.         }
  934.         .your-offer {
  935.           margin-top: 10px;
  936.           border-radius: 3px;
  937.           height: 300px;
  938.           width: 90%;
  939.           background: rgba($primary, 0.9);  
  940.           border: solid 2px #333;
  941.         }
  942.       }
  943.       .right-screen {
  944.         width: 50%;
  945.         .his-offer {
  946.           border-radius: 3px;
  947.           height: 500px;
  948.           width: 90%;
  949.           background: rgba($primary, 0.9);
  950.         }
  951.         .offer-chat {
  952.           margin-top: 10px;
  953.           border-radius: 3px;
  954.           height: 300px;
  955.           width: 90%;
  956.           background: rgba($primary, 0.9);
  957.           .chat-entries {
  958.             height: 220px;
  959.             overflow-y: auto;
  960.             max-height: 100%;
  961.             padding-right: 5px;
  962.             padding-bottom: 5px;
  963.             background: rgba($secondary, 0.2);
  964.             padding-left: 5px;
  965.             padding-right: 5px;
  966.             text-shadow: #000 1px 1px 1px;
  967.             p, b {
  968.               font-size: 16px;
  969.               word-break: break-all;
  970.               margin: 0;
  971.               padding: 0;
  972.               line-height: 25px;
  973.             }
  974.             b {
  975.               color: $success;
  976.             }
  977.           }
  978.           .chat-controls {
  979.             height: 60px;
  980.             margin-top: auto;
  981.             display: flex;
  982.             align-items: center;
  983.             input {
  984.               background: darken($primary, 10%);
  985.             }
  986.           }      
  987.         }
  988.       }
  989.     }
  990.   }
  991.  
  992.   .inventory-screen {
  993.     background: rgba($primary, 0.4);
  994.     transition: all 1s ease-out;
  995.     height: 100vh;
  996.     width: 100vw;
  997.     .connected-time {
  998.       position: absolute;
  999.       bottom: 10px;
  1000.       left: 520px;
  1001.       font-size: 16px;
  1002.       color: #fff;
  1003.       text-shadow: #000 1px 1px 1px;
  1004.     }
  1005.     .left-screen {
  1006.       position: absolute;
  1007.       height: 100vh;
  1008.       top: 0px;
  1009.       left: 0px;
  1010.       background: rgba($secondary, 0.98);
  1011.       width: 500px;
  1012.       max-width: 50vw;
  1013.       border-bottom: solid 1px rgba(#fff, 0.08);
  1014.      
  1015.       .page {
  1016.         padding: 0px 0px;
  1017.         .page-subtitle {
  1018.           font-size: 18px;
  1019.           color: #fff;
  1020.           margin-bottom: 10px;
  1021.           display: flex;
  1022.           align-items: center;
  1023.           .text {
  1024.             display: flex;
  1025.             align-items: center;
  1026.             font-size: 18px;
  1027.             margin-left: 10px;
  1028.           }
  1029.           .value {
  1030.             background: $primary;
  1031.             padding: 5px 10px;
  1032.             border-radius: 5px;
  1033.             width: 40px;
  1034.             text-align: center;
  1035.           }
  1036.         }
  1037.         .page-title {
  1038.           position: relative;
  1039.           font-size: 18px;
  1040.           color: #fff;
  1041.           line-height: 20px;
  1042.           text-shadow: #000 1px 1px 1px;
  1043.           margin-bottom: 10px;
  1044.           background-color: rgba($primary,0.99);
  1045.           background: rgba(darken($primary, 0%), 0.98);
  1046.           // background-image: repeating-linear-gradient(to left bottom,transparent,transparent 2vh,rgba(195,195,195,.1) 2vh,rgba(195,195,195,.1) 3vh);
  1047.           padding: 15px 15px;
  1048.           text-shadow: #000 1px 1px 1px;
  1049.           .paycheck {
  1050.             position: absolute;
  1051.             right: 0px;
  1052.             top: 0px;
  1053.             width: 60%;
  1054.             height: 100%;
  1055.             background: darken($primary, 1%);
  1056.             display: flex;
  1057.             align-items: center;
  1058.             justify-content: center;
  1059.             font-size: 16px;
  1060.             color: darken(#44bd32, 15%);
  1061.             font-weight: bold;
  1062.           }
  1063.         }
  1064.         .page-container {
  1065.           display: block;
  1066.           padding: 5px 10px;
  1067.           border-right: solid 1px rgba(#fff, 0.08);
  1068.           border-left: solid 1px rgba(#fff, 0.08);
  1069.           max-height: 90vh;
  1070.           overflow-y: auto;
  1071.           .info-entry {
  1072.             background: rgba(#000, 0.10);
  1073.             border-radius: 3px;
  1074.             margin-bottom: 5px;
  1075.             display: flex;
  1076.             align-items: center;
  1077.             padding: 5px 10px;
  1078.             .text {
  1079.               font-size: 16px;
  1080.               margin-right: auto;
  1081.             }
  1082.             .value {
  1083.               font-size: 16px;
  1084.               background: rgba(darken($primary, 10%), 0.3);
  1085.               padding: 10px 15px;
  1086.               border-radius: 100%;
  1087.             }
  1088.           }
  1089.           .job-entry {
  1090.             background: darken($secondary, 3%);
  1091.             margin-bottom: 10px;
  1092.             .info {
  1093.               display: flex;
  1094.               justify-content: center;
  1095.               flex-direction: column;
  1096.               height: 100px;
  1097.               padding: 10px;
  1098.               position: relative;
  1099.               .job-level {
  1100.                 font-weight: bold;
  1101.               }
  1102.               .job-image {
  1103.                 position: absolute;
  1104.                 right: 0px;
  1105.                 top: 0px;
  1106.                 height: 90%;
  1107.                 width: 30%;
  1108.                 background-size: contain;
  1109.                 background-position: center center;
  1110.                 background-repeat: no-repeat;
  1111.                 opacity: 0.3;
  1112.               }
  1113.             }
  1114.             .progress {
  1115.               width: 100%;
  1116.               position: relative;
  1117.               background-color: darken($primary, 5%);
  1118.               height: 20px;
  1119.               .progress-bar {
  1120.                 background: rgba(lighten($primary, 20%), 1);
  1121.                 .current-skill {
  1122.                   position: absolute;
  1123.                   top: 50%;
  1124.                   left: 50%;
  1125.                   transform: translate(-50%, -50%);
  1126.                   font-weight: bold;
  1127.                   font-size: 14px;
  1128.                   color: #fff;
  1129.                 }
  1130.               }
  1131.             }
  1132.           }
  1133.           .question-entry {
  1134.             background: rgba(#000, 0.10);
  1135.             border-radius: 3px;
  1136.             margin-bottom: 5px;
  1137.             display: flex;
  1138.             align-items: flex-start;
  1139.             justify-content: center;
  1140.             flex-direction: column;
  1141.             padding: 10px 10px;
  1142.             .question {
  1143.               font-size: 18px;
  1144.               margin-bottom: 4px;
  1145.               font-weight: bold;
  1146.               color: #fff;
  1147.             }
  1148.             .answer {
  1149.               font-size: 14px;
  1150.             }
  1151.  
  1152.           }
  1153.           .online-entry {
  1154.             background: rgba(#000, 0.10);
  1155.             border-radius: 3px;
  1156.             margin-bottom: 5px;
  1157.             display: flex;
  1158.             align-items: center;
  1159.             padding: 5px 10px;
  1160.             .text {
  1161.               font-size: 16px;
  1162.               margin-right: auto;
  1163.             }
  1164.             .value {
  1165.               font-size: 16px;
  1166.               background: rgba(darken($primary, 10%), 0.3);
  1167.               padding: 10px 15px;
  1168.               border-radius: 100%;
  1169.             }
  1170.           }
  1171.           .command-title {
  1172.             font-size: 18px;
  1173.             color: darken(#fff, 10%);
  1174.             text-shadow: #000 1px 1px 1px;
  1175.             margin-bottom: 5px;
  1176.             font-weight: bold;
  1177.           }
  1178.           .command {
  1179.             font-size: 14px;
  1180.             margin-bottom: 10px;
  1181.             text-shadow: #000 1px 1px 1px;
  1182.             letter-spacing: 0.2px;
  1183.           }
  1184.         }
  1185.       }
  1186.     }
  1187.     .left-options {
  1188.       display: flex;
  1189.       .entry {
  1190.         height: 80px;
  1191.         background: rgba(darken($primary, 2%), 0.98);
  1192.         width: 100px;
  1193.         display: flex;
  1194.         align-items: center;
  1195.         justify-content: center;
  1196.         font-size: 30px;
  1197.         line-height: 30px;
  1198.         padding: 5px;
  1199.         // border-bottom: solid 1px rgba(darken($primary, 10%), 0.10);
  1200.       }
  1201.       .entry.active {
  1202.         background: rgba(darken($primary, 5%), 0.98);
  1203.       }
  1204.     }
  1205.     .inventory-container {
  1206.       position: absolute;
  1207.       top: 50%;
  1208.       right: 30px;
  1209.       transform: translate(0, -50%);
  1210.       .inventory-header {
  1211.         background-color: rgba($primary,0.98);
  1212.         padding: 10px 15px;
  1213.         text-shadow: rgba(#000, 0.5) 1px 1px 1px;
  1214.         border-top-left-radius: 4px;
  1215.         border-top-right-radius: 4px;
  1216.         display: flex;
  1217.         align-items: center;
  1218.         h1 {
  1219.           font-size: 18px;
  1220.           line-height: 20px;
  1221.         }
  1222.         .cancel-button {
  1223.           font-size: 30px;
  1224.           margin-left: auto;
  1225.         }
  1226.       }
  1227.       .inventory {
  1228.         background: rgba($primary, 0.96);
  1229.         width: 550px;
  1230.         max-height: 90vh;
  1231.         max-width: 50vw;
  1232.         border-bottom-left-radius: 4px;
  1233.         border-bottom-right-radius: 4px;
  1234.         box-shadow: rgba(#000, 0.30) 10px 11px 15px 1px;
  1235.         .items-scrollable {
  1236.           padding: 10px 5px;
  1237.           background: rgba($secondary, 0.50);
  1238.           min-height: 800px;
  1239.           max-height: 800px;
  1240.           overflow-y: auto;
  1241.           margin-bottom: 10px;
  1242.           .entry {
  1243.             position: relative;
  1244.             background-color: rgba(#000, 0.10);
  1245.             height: 100px;
  1246.             width: 100px;
  1247.             padding: 2px;
  1248.             margin: 3px;
  1249.             display: inline-flex;
  1250.             flex-basis: 25%;
  1251.             border-radius: 3px;
  1252.             align-items: center;
  1253.             justify-content: center;
  1254.             .quantity {
  1255.               position: absolute;
  1256.               bottom: 5px;
  1257.               right: 5px;
  1258.               background: rgba($secondary, 1);
  1259.               height: 30px;
  1260.               min-width: 30px;
  1261.               padding: 0px 5px;
  1262.               font-size: 14px;
  1263.               font-weight: bold;
  1264.               display: flex;
  1265.               align-items: center;
  1266.               justify-content: center;
  1267.               border-radius: 5px;
  1268.             }
  1269.           }
  1270.           .entry.active {
  1271.             background-color: rgba(#000, 0.40);
  1272.             .item-image {
  1273.               opacity: 1;
  1274.             }
  1275.           }
  1276.           .item-image {
  1277.             background-repeat: no-repeat;
  1278.             background-size: contain;
  1279.             background-position: center center;
  1280.             height: 70%;
  1281.             width: 70%;
  1282.             opacity: 0.5;
  1283.             background-image: url('/assets/images/inventory/no_image.png');
  1284.             background-repeat: no-repeat;
  1285.  
  1286.           }
  1287.           // .item_0 {
  1288.           //   background-image: url('~@/assets/images/inventory/0.png');
  1289.           // }
  1290.           // .item_1 {
  1291.           //   background-image: url('~@/assets/images/inventory/1.png');
  1292.           // }
  1293.         }
  1294.         .inventory-buttons {
  1295.           height: 80px;
  1296.           background: rgba(#000, 0.2);
  1297.           width: 100%;
  1298.           display: flex;
  1299.           align-items: center;
  1300.           justify-content: center;
  1301.           flex-direction: column;
  1302.         }
  1303.       }
  1304.       .ammo {
  1305.         background: darken($primary, 10%);
  1306.         display: flex;
  1307.         justify-content: center;
  1308.         align-items: center;
  1309.         width: 100%;
  1310.         input {
  1311.           width: 60%;
  1312.           background: darken($secondary, 8%);
  1313.         }
  1314.         padding: 15px 0px;
  1315.       }
  1316.     }
  1317.  
  1318.   }
  1319. }
  1320.  
  1321. .ckeditor {
  1322.   color: #333;
  1323. }
  1324.  
  1325. .tooltip {
  1326.   display: block !important;
  1327.   z-index: 10000;
  1328.  
  1329.   .tooltip-inner {
  1330.     background: black;
  1331.     color: white;
  1332.     border-radius: 16px;
  1333.     padding: 5px 10px 4px;
  1334.   }
  1335.  
  1336.   .tooltip-arrow {
  1337.     width: 0;
  1338.     height: 0;
  1339.     border-style: solid;
  1340.     position: absolute;
  1341.     margin: 5px;
  1342.     border-color: black;
  1343.     z-index: 1;
  1344.   }
  1345.  
  1346.   &[x-placement^="top"] {
  1347.     margin-bottom: 5px;
  1348.  
  1349.     .tooltip-arrow {
  1350.       border-width: 5px 5px 0 5px;
  1351.       border-left-color: transparent !important;
  1352.       border-right-color: transparent !important;
  1353.       border-bottom-color: transparent !important;
  1354.       bottom: -5px;
  1355.       left: calc(50% - 5px);
  1356.       margin-top: 0;
  1357.       margin-bottom: 0;
  1358.     }
  1359.   }
  1360.  
  1361.   &[x-placement^="bottom"] {
  1362.     margin-top: 5px;
  1363.  
  1364.     .tooltip-arrow {
  1365.       border-width: 0 5px 5px 5px;
  1366.       border-left-color: transparent !important;
  1367.       border-right-color: transparent !important;
  1368.       border-top-color: transparent !important;
  1369.       top: -5px;
  1370.       left: calc(50% - 5px);
  1371.       margin-top: 0;
  1372.       margin-bottom: 0;
  1373.     }
  1374.   }
  1375.  
  1376.   &[x-placement^="right"] {
  1377.     margin-left: 5px;
  1378.  
  1379.     .tooltip-arrow {
  1380.       border-width: 5px 5px 5px 0;
  1381.       border-left-color: transparent !important;
  1382.       border-top-color: transparent !important;
  1383.       border-bottom-color: transparent !important;
  1384.       left: -5px;
  1385.       top: calc(50% - 5px);
  1386.       margin-left: 0;
  1387.       margin-right: 0;
  1388.     }
  1389.   }
  1390.  
  1391.   &[x-placement^="left"] {
  1392.     margin-right: 5px;
  1393.  
  1394.     .tooltip-arrow {
  1395.       border-width: 5px 0 5px 5px;
  1396.       border-top-color: transparent !important;
  1397.       border-right-color: transparent !important;
  1398.       border-bottom-color: transparent !important;
  1399.       right: -5px;
  1400.       top: calc(50% - 5px);
  1401.       margin-left: 0;
  1402.       margin-right: 0;
  1403.     }
  1404.   }
  1405.  
  1406.   &.popover {
  1407.     $color: #f9f9f9;
  1408.  
  1409.     .popover-inner {
  1410.       background: $color;
  1411.       color: black;
  1412.       padding: 24px;
  1413.       border-radius: 5px;
  1414.       box-shadow: 0 5px 30px rgba(black, .1);
  1415.     }
  1416.  
  1417.     .popover-arrow {
  1418.       border-color: $color;
  1419.     }
  1420.   }
  1421.  
  1422.   &[aria-hidden='true'] {
  1423.     visibility: hidden;
  1424.     opacity: 0;
  1425.     transition: opacity .15s, visibility .15s;
  1426.   }
  1427.  
  1428.   &[aria-hidden='false'] {
  1429.     visibility: visible;
  1430.     opacity: 1;
  1431.     transition: opacity .15s;
  1432.   }
  1433. }
  1434.  
  1435. input[type=number]::-webkit-inner-spin-button,
  1436. input[type=number]::-webkit-outer-spin-button {
  1437.   -webkit-appearance: none;
  1438.   margin: 0;
  1439. }
  1440.  
  1441. .table th, .table td {
  1442.   border-color: rgba(#fff, 0.1);
  1443. }
  1444.  
  1445. .table thead th {
  1446.   border-color: rgba(#fff, 0.1);
  1447. }
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!