API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 26th, 2018
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.93 KB | None | 0 0
raw download clone embed print report
  1. /* CLASSES */
  2. .d-flex { display: flex; } .wrap { flex-flow: row wrap; } .justify-content-center { justify-content: center; } .justify-content-around { justify-content: space-around; } .justify-content-between { justify-content: space-between; } .justify-content-left { justify-content: flex-start; } .justify-content-right { justify-content: flex-end; } .align-items-center { align-items: center; } .align-items-bottom { align-items: flex-end; } .direction-column { flex-direction: column; } .pointer { cursor: pointer; transition: 0.7s; } .hover-color:hover { color: #c45858; } .popUp { transition: 0.7s; background-color: #f9f9f9; box-shadow: 5px 7px 17px -10px rgba(0,0,0,0.75); display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } .overlayPage { position: absolute; bottom: 100%; left: 0; right: 0; width: 100%; height: 0; transition: 0.6s ease-in; background-color: rgba(0,0,0,0.6); z-index: 2; padding: 0px 0px !important; } .overlayOn { height: 100%; bottom: 0; }
  3. /* CLASSES */
  4.  
  5. * { box-sizing: border-box; margin: 0px; padding: 0px; }
  6. a { text-decoration: none; }
  7. body, html { width: 100%; height: 100%; font-family: 'Abel', sans-serif; }
  8. button { display: block; transition: 1s; font-variant: small-caps; font-size: 18px; letter-spacing: 1px; color: #ffffff; border: none; background-color: #28394a; box-shadow: -1px 16px 40px -20px rgba(0, 0, 0, 0.8); }
  9. button:hover { background-color: #000000; }
  10. .buttonSquare { padding: 12px 15px; }
  11. .buttonFullWidth { width: 100%; margin-top: 10px; }
  12. input, textarea, select { width: 100%; padding: 20px 5px; border: none; color: #282828; transition: 0.6s; border-bottom: 1px solid #d2d2d2a6; background-color: transparent; }
  13. .inputBorder { border: 1px solid #d2d2d2a6; background-color: white; padding-left: 10px; }
  14. .inputBorder:focus { box-shadow: 0 0 0 1px #c45858; }
  15. .inputBorder option { margin: 6px 0px; }
  16. textarea { height: 250px; font-family: 'Abel', sans-serif; resize: vertical; }
  17. input:focus, textarea:focus, select:focus, button:focus { outline: none; }
  18. input:focus ~ .bar:before, textarea:focus ~ .bar:before { width: 100%; }
  19. .bar { position: relative; display: block; width: 100%; }
  20. .bar:before { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #cc5959; transition: all 0.4s ease; }
  21. h1 { font-family: 'Montserrat', sans-serif; font-variant: small-caps; font-weight: bold; }
  22. table { text-align: center; border-collapse: collapse; width: 100%; }
  23. tr { border-bottom: 1px solid #ecececd1; }
  24.  
  25. /* LOGIN PAGE */ /* LOGIN PAGE */
  26. #loginSite { background: url("../images/bg.jpg") center/cover; }
  27. #loginContainer { flex: 0 0 100%; max-width: 800px; position: relative; }
  28. #placeHeader { border-bottom: 1px solid #c1bcbc57; width: 100%; max-width: 500px; position: relative; overflow: hidden; padding: 15px 0px; }
  29. #placeHeader h1 { width: 100%; font-size: 45px; letter-spacing: 4px; color: #f9f9f9; }
  30. #placeHeader img { position: absolute; width: auto; height: 150%; top: 25%; right: 0; opacity: 0.6; }
  31. #loginButton { width: 100px; height: 80px; border-radius: 50px; }
  32. #contentLogin { width: 100%; padding: 20px 0px; }
  33. #contentLogin input { max-width: 300px; margin: 30px 0px; background-color: #ffffffab; border-radius: 30px; text-align: center; box-shadow: -1px 16px 40px -20px rgba(0, 0, 0, 0.8); }
  34. #contentLogin input:focus { background-color: #f9f9f9; }
  35. /* LOGIN PAGE */ /* LOGIN PAGE */
  36.  
  37.  
  38. /* USER SITE */
  39. #userSite { background: url("../images/bg.jpg") center/cover; overflow-x: hidden; }
  40. #userOptions { width: 100%; max-width: 1140px; transition: 1.3s; padding-top: 30px; }
  41. #writeTicket, #userTickets { width: 50%; margin: 0px 50px; box-shadow: 9px 12px 17px -10px rgba(0,0,0,0.75); padding: 0px 25px 20px; }
  42. #writeTicket > div > div:nth-child(1), #userTickets > div:nth-child(1) { color: white; padding: 20px 0px; }
  43. #writeTicket { background-color: #fbfbfb8c; }
  44. #writeStickyTicket { position: sticky; top: 80px; }
  45. #writeTicket input, #writeTicket select, #writeTicket textarea { margin: 10px 0px; background-color: #f9f9f9; border-radius: 3px; }
  46. #writeTicket input::placeholder, #writeTicket input, #writeTicket select { color: #676767; }
  47. #userTickets { background-color: #809cb7c2; padding-bottom: 15px; }
  48. #userTicketContainer { width: 60%; height: 80%; background-color: #f9f9f9e3; position: absolute; top: 75%; left: 80%; transform: translate(-80%, -75%); margin-left: 120vw; transition: 1.2s; box-shadow: 9px 12px 17px -10px rgba(0,0,0,0.75); z-index: 1; display: grid; grid: 1fr / repeat(2, 1fr); }
  49. #userTicketContainer i { position: absolute; top: 20px; right: 30px; }
  50. #userTicketContainer > div { padding: 10px 30px; }
  51. .userTicket { height: 130px; background-color: #f4f4f4; box-shadow: 9px 12px 17px -10px rgba(0,0,0,0.75); display: grid; grid: 60% 40% / 70% 30%; color: black; border-radius: 9px; margin: 8px 0px; width: 100%; max-width: 360px; }
  52. .userTicketTitle { color: #424242; font-size: 20px; text-indent: 20px; }
  53. .userTicketDate { text-indent: 60px; }
  54. .buttonContainerUser { grid-row: 1 / 3; grid-column: 2 / 2; justify-self: center; align-self: center; }
  55. .buttonContainerUser button { width: 80px; height: 80px; border-radius: 50px; background-color: #202f3e; }
  56. .buttonContainerUser button:hover { background-color: #000000; }
  57. #userTicketContainer > #ticketInfoContent { background-color: #28394a; }
  58. #userTicketContainer > #ticketInfoContent div:nth-child(1) { color: #f9f9f991; }
  59. #userTicketContainer > #ticketInfoContent div:nth-child(2) { color: #d0d0d0; }
  60. #userTicketContainer .userFieldTicket { margin: 10px 0px; }
  61. #userTicketContainer .fieldContainer > div:nth-child(2) { padding: 10px 12px; border-bottom: 1px solid #9898983b; }
  62. /* USER SITE */
  63.  
  64. /* MAIN PAGE */ /* MAIN PAGE */
  65. #mainPage { overflow: hidden; display: grid; grid: 80px 1fr / 270px 1fr;
  66. grid-template-areas:
  67. "logoPlace userBar"
  68. "leftMenu mainContainer";
  69. }
  70.  
  71. #logoPlace { grid-area: logoPlace; border-bottom: 1px solid #c1bcbc1c; background-color: #202f3e; }
  72. #logoPlace h1 { font-size: 30px; color: #f9f9f9; }
  73.  
  74. /* ARROW FOR DROPDOWNS */
  75. .arrowBox { position: relative; }
  76. .arrowBox:after, .arrowBox:before { position: absolute; border: solid transparent; content: " "; height: 0; width: 0; }
  77. /* ARROW FOR DROPDOWNS */
  78. /* TICKET INFO CONTAINER */
  79. #ticketInfoContent { padding: 10px 20px; }
  80. .fieldContainer { padding: 5px 15px; margin: 20px 0px; line-height: 30px; text-align: justify; }
  81. .fieldContainer:last-child div:nth-child(2) { border-bottom: none !important; }
  82. .fieldContainer > div:nth-child(1) { font-size: 11px; letter-spacing: 1px; font-weight: bold; color: #8f8f8f; line-height: 1; }
  83. .fieldContainer > div:nth-child(2) { font-size: 17px; padding-left: 10px; }
  84. /* TICKET INFO CONTAINER */
  85.  
  86. /* USER BAR */
  87. #userBar { padding: 0px 50px; color: #e2e2e2; font-family: 'Francois One', sans-serif; background-color: #17242f; }
  88. #mainPage > #userBar { grid-area: userBar; position: relative; }
  89. #userSite > #userBar { position: sticky; top: 0; width: 75vw; height: 80px; box-shadow: 0px 17px 49px -10px rgba(0,0,0,0.75); z-index: 4; }
  90. #userBar p { padding: 0px 25px; }
  91. #logo { position: absolute; left: 5%; height: 80%; max-width: 100%; }
  92. #userAvatar { width: 45px; height: 45px; }
  93. #userAvatar:hover { margin-bottom: 15px; }
  94. #userBar i { font-size: 22px; position: relative; }
  95. #dropdownUserBar { position: absolute; right: 50%; transform: translate(50%, 7%); width: 340px; height: 0px; background-color: #ffffff; box-shadow: 0px 11px 20px -10px rgba(0,0,0,0.75); transition: 0.5s; display: grid; grid: 0% 100% / 1fr; overflow: hidden; font-family: 'Abel', sans-serif; z-index: 5; }
  96. .arrowTop:after, .arrowTop:before { bottom: 100%; left: 50%; border-bottom-color: #ffffff; }
  97. .arrowTop:after { border-width: 15px; margin-left: -15px; }
  98. .arrowTop:before { border-width: 18px; margin-left: -18px; }
  99. #alertsList { border-bottom: 1px solid #c1bcbc61; color: #222; overflow: auto; }
  100. .alertContainer { border-bottom: 1px solid #c1bcbc61; padding: 10px 20px; display: grid; grid: 1fr / 15% 85%; }
  101. .alertContainer:hover { background-color: #e2e2e2; }
  102. .alertContainer:nth-child(1) { margin-top: 10px; }
  103. .alertTitle { font-size: 18px; }
  104. .alertTime { font-size: 13px; padding: 5px 0px; }
  105. /* USER BAR */
  106.  
  107. /* LEFT MENU */
  108. #leftMenu { grid-area: leftMenu; font-variant: small-caps; transition: 2.5s; z-index: 3; background-color: #202f3e; }
  109. #menuExpand { position: fixed; left: 15px; top: 25px; font-size: 25px; z-index: 30; color: #f9f9f9; display: none; }
  110. .menuTitle { padding: 20px 30px; font-family: 'Comfortaa', cursive; color: #969696; }
  111. .menuField { color: #c5c5c5; font-family: 'Francois One', sans-serif; border-bottom: 1px solid #c1bcbc1c; letter-spacing: 1px; display: grid; grid: 1fr / 40% 60%; position: relative; }
  112. .menuField:hover { text-indent: -30px; background-color: #17242f; }
  113. .menuField i { padding: 0 10px; font-size: 15px; }
  114. .main { padding: 20px 30px; font-size: 20px; }
  115. .sub { padding: 10px 30px; font-size: 16px; }
  116. .moreDropdown { position: absolute; left: 100%; width: 0; bottom: -100%; height: 160px; transition: 0.8s; text-indent: 0; overflow: hidden; display: grid; grid: 1fr / 40px 1fr; z-index: 5; }
  117. .arrowLeft { left: 10%; background: #e5fbfd57; }
  118. .arrowLeft:after, .arrowLeft:before { right: 100%; top: 50%; border-color: rgba(229, 251, 253, 0); border-right-color: #202f3e; }
  119. .arrowLeft:after { border-width: 29px; margin-top: -29px; }
  120. .arrowLeft:before { border-width: 35px; margin-top: -35px; }
  121. .moreDropdown > div { height: 120px; }
  122. .dropdownIconsContainer { background-color: #202f3e; border-radius: 3px; padding: 10px; box-shadow: 0px 11px 20px -10px rgba(0,0,0,0.75); }
  123. .dropdownIconsContainer a { font-size: 16px; height: 100%; width: 100%; transition: 1s; border-radius: 13px; }
  124. .dropdownIconsContainer a:hover { background-color: #17242f; }
  125. .moreDropdown i { font-size: 40px; }
  126. /* LEFT MENU */
  127.  
  128. /* MAIN BOX */
  129. #mainContainer { background-color: #f9f9f9; position: relative; overflow: auto; }
  130. #mainContainer > div { padding: 30px 45px; }
  131.  
  132. #mainDashboard { height: 100%; display: grid; grid: 150px 1fr / repeat(2, 1fr); }
  133. #ticketStatus { grid-column: 1 / 3; width: 100%; max-width: 1250px; justify-self: center; }
  134. #ticketStatus > div { box-shadow: 0px 11px 20px -10px rgba(0,0,0,0.75); height: 100%; width: 100%; max-width: 200px; min-height: 130px; display: grid; grid: 75% 25% / 1fr; }
  135. .numberBox h1 { color: #f3f3f3; font-size: 95px; }
  136. .textBoxTicket { font-family: 'Francois One', sans-serif; color: #5d5d5d; font-variant: small-caps; letter-spacing: 1px; font-size: 20px; padding: 0px 20px; }
  137. #ticketsActive { background-color: #7fe854e0; }
  138. #ticketsDedicated { background-color: #f75555f0; }
  139. #ticketsTaken { background-color: #599bded6; }
  140. #ticketClosed { background-color: #c17a94d6; }
  141. #recentTickets, #takenTicketsList { padding: 50px 10px; }
  142. #recentTickets h1, #takenTicketsList h1 { font-size: 22px; padding-bottom: 20px; width: 100%; }
  143. #takenTicketsList { }
  144. .latestTicket { width: 100%; max-width: 180px; height: 200px; background-color: #f4f4f4; box-shadow: 0px 11px 20px -10px rgba(0,0,0,0.75); margin: 10px 0px; padding-top: 8px; display: grid; grid: repeat(4, 1fr) / 1fr; border: 1px solid #bdb8b82e; border-bottom: none; }
  145. .latestTicket > div:nth-child(1), .latestTicket > div:nth-child(2), .latestTicket > div:nth-child(3) { padding: 0px 8px; }
  146. .latestTicket h1 { font-size: 28px !important; }
  147. #recentTickets { }
  148. #recentTickets table { margin: 15px 0px; border: 1px solid #bdb8b82e; }
  149. #recentTickets tr:nth-child(1) { background-color: #28394a; color: white; }
  150. #recentTickets td, #recentTickets th { padding: 10px 0px; }
  151.  
  152. #mainTicket { display: grid; grid: 80px 1fr / 1fr; }
  153. #optionsAndSearch { width: 100%; justify-self: center; }
  154. #optionsAndSearch { border-bottom: 1px solid #c1bcbc57; display: grid; grid: 1fr / 75% 25%; }
  155. #searchTicketContainer { }
  156. #searchTicketContainer input { border-bottom: none; }
  157. #mainTicketOptions { display: grid; grid: 1fr / repeat(4, 1fr); }
  158. #mainTicketOptions h1 { font-size: 25px; }
  159. #mainTicketOptions > .active, #mainTicketOptions div:hover { background-color: #202f3e; color: #f9f9f9; }
  160. #mainTicketContainer { margin-top: 30px; }
  161. .ticketContainer { box-shadow: 5px 7px 17px -10px rgba(0,0,0,0.75); height: 180px; background-color: #ffffff; display: grid; grid: 1fr / 1fr 40px; margin: 15px 10px; min-width: 280px; width: auto; position: relative; }
  162. .ticketContainer > div:nth-child(1) { padding: 15px 20px 0px; }
  163. .ticketContainer > div:nth-child(2) { background-color: #202f3ed1; color: #efefef; }
  164. .topicTicket { font-size: 25px; font-weight: bold; font-family: 'Montserrat', sans-serif; padding-bottom: 10px; position: relative; border-bottom: 1px solid #c1bcbc57; text-align: center; }
  165. .statusTicket { width: 15px; height: 15px; position: absolute; left: -10px; top: -20px; border-radius: 50%; background-color: rgba(77, 207, 77, 0.76); }
  166. .nameTicket, .placeTicket, .dateTicket { padding: 5px 0px; }
  167.  
  168. #editTicketContainer { max-width: 1040px; justify-self: center; }
  169. #editTicketContainer > .popUp { width: 150px; height: 150px; border-radius: 50%; text-align: center; }
  170. #editTicketContainer > .popUp:hover { background-color: #c45858; color: white; }
  171. #editTicket { box-shadow: 5px 7px 17px -10px rgba(0,0,0,0.75); }
  172. #ticketInfo, #ticketReply { width: 50%; display: grid; }
  173. .ticketContainerTitle { background-color: #202f3e; color: white; }
  174. #ticketInfo { background-color: #ffffff; grid: 70px 1fr / 1fr; border-right: 1px solid #202f3e; }
  175. #ticketInfo .fieldContainer > div:nth-child(2) { border-bottom: 1px solid #d2d2d2a6; }
  176. #ticketReply { position: relative; grid: 1fr 70px 70px / 1fr; background-color: #ffffff8a; font-size: 14px; }
  177. #ticketReply > div:nth-child(1) { padding: 20px 25px; }
  178. #ticketReply textarea { font-size: 20px; line-height: 30px; }
  179. #replyOptions { border-top: 1px solid #d2d2d2a6; }
  180. #replyOptions div { padding: 0px 15px; width: 70px; }
  181. #replyOptions span { text-indent: -20px; margin-bottom: 7px; color: #8f8f8f; }
  182. #replyOptions i { font-size: 25px; }
  183.  
  184. #editUsers { height: inherit; display: grid; grid: 1fr / 55% 45%; width: 100%; max-width: 1140px; }
  185. #editUsers #userPopUp { width: 100%; max-width: 500px; overflow: auto; }
  186. #userPopUp span { color: red; position: relative; left: -20px; }
  187. #editUsers .popUp form { padding: 10px 30px; }
  188. #editUsers .popUp input, #editUsers .popUp select { margin: 10px 0px; }
  189. #mobileOptions { display: none; position: absolute; width: 200px; height: 90px; z-index: 3; }
  190. #mobileOptions > div { width: 50%; position: relative; transition: 0.7s; }
  191. #mobileOptions img { position: absolute; width: auto; height: 80%; }
  192. #mobileOptionsUser { background-color: #c3434385; }
  193. #mobileOptionsGroup { background-color: #73d073a6; }
  194. #userList, #groupList { padding: 30px 15px; box-shadow: 0px 11px 20px -10px rgba(0,0,0,0.75); }
  195. #userList img, #groupList img { position: absolute; border-radius: 50%; box-shadow: 5px 7px 17px -10px rgba(0,0,0,0.75); }
  196. .userListTitle { width: 80%; height: 50px; padding-bottom: 10px; border-bottom: 1px solid #d2d2d2a6; margin-bottom: 20px; }
  197. .userListTitle i { padding: 0px 15px; font-size: 20px; color: #8e8e8e; }
  198. #userList /* LEFT SIDE */ { background-color: white; }
  199. .userContainer { width: 140px; height: 140px; position: relative; margin: 10px 0px; transition: 0.7s; }
  200. .userHoverUp:hover { margin-bottom: 20px; margin-top: -20px; }
  201. .userStandUp { margin-bottom: 20px; margin-top: -20px; }
  202. .imageContainer { border-radius: 50%; width: 140px; height: 140px; display: grid; grid: 80% 20%/ 1fr; transition: 0.7s; }
  203. .imageContainer > div:nth-child(1) { position: relative; }
  204. .userContainer img { transition: 0.7s; width: 100px; height: 100px; }
  205. .userContainer span { transition: 0.7s; letter-spacing: 1px; line-height: 30px; font-variant: small-caps; font-weight: bold; font-size: 25px; z-index: 2; }
  206. .userInformationExpand { background-color: #f3f3f3; width: 0px; overflow: hidden; transition: 0.6s; display: grid; grid: 1fr / 85% 15%; position: absolute; margin-left: 140px; z-index: 3; height: 140px; box-shadow: 5px 7px 17px -10px rgba(0,0,0,0.75); }
  207. .userInformationExpand > div:nth-child(2) { background-color: #202f3e; color: #f2f2f2; }
  208. #groupList { background-color: #445f79; padding: 30px 25px; }
  209. #groupList .userListTitle h1 { color: white; }
  210. #stickyContainer { position: sticky; top: 0; width: 100%; }
  211. .groupContainer { margin: 15px 0px; width: 100%; max-width: 400px; }
  212. .groupInfoContainer { display: grid; grid: 1fr / 30% 60% 10%; width: 100%; height: 140px; background-color: #efefef; border-radius: 15px; box-shadow: 5px 7px 17px -10px rgba(0,0,0,0.75); }
  213. .groupInfoContainer > div:nth-child(1) { position: relative; }
  214. .groupInfoContainer img { width: 80px; height: 80px; }
  215. .groupInfoContainer > div:nth-child(3) { background-color: #f9f9f9; }
  216. .groupUsersContainer { background-color: white; grid: 50px 1fr / 1fr; display: grid; width: 90%; box-shadow: 5px 7px 17px -10px rgba(0,0,0,0.75); transition: 0.9s; overflow: hidden; max-height: 0; font-size: 0px; }
  217. #addUserToGroup { width: 350px; border-radius: 10px; }
  218. .groupUsersContainer > div:nth-child(1), .groupUsersContainer > div:nth-child(1) i { padding: 0px 10px; }
  219. .groupUsersContainer tr:nth-child(even) { background-color: #f9f9f9; }
  220. .groupUsersContainer th { padding-bottom: 5px; }
  221. .groupUsersContainer td { padding: 6px 0px; }
  222. /* MAIN BOX */
  223. /* MAIN PAGE */ /* MAIN PAGE */
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!