z.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. .z {
  2. font-size: 0.81em;
  3. } .z button:not(.btn) {
  4. background: #efefef;
  5. border: 1px solid #767676;
  6. font-size: 0.9em;
  7. min-width: 92px;
  8. white-space: nowrap;
  9. } .z form input {
  10. display: block;
  11. margin-bottom: 3px;
  12. } .z h4 {
  13. display: inline-block;
  14. margin: 0;
  15. } .z label {
  16. font-weight: 500;
  17. margin-bottom: 0;
  18. } .z ul {
  19. margin: 0;
  20. padding: 0;
  21. list-style-type: none;
  22. }
  23. .z .hbox {
  24. align-items: center;
  25. display: flex;
  26. } .z .hbox > *:not(:first-child) {
  27. margin-left: 10px;
  28. }
  29. .z .vbox {
  30. display: flex;
  31. flex-direction: column;
  32. } .z .vbox > *:not(:first-child) {
  33. margin-top: 2px;
  34. }
  35. .z .separators {
  36. display: flex;
  37. } .z .separators > *:empty {
  38. display: none;
  39. } .z .separators > *:not(:first-child):before {
  40. content: '|';
  41. font-weight: bold;
  42. margin: 0 5px;
  43. }
  44. .z .header {}
  45. .z .thumbnail {
  46. --shadow-color: #aaa;
  47. --size: 64px;
  48. align-items: center;
  49. background: #ccc;
  50. box-shadow: 0 0 20px var(--shadow-color);
  51. border-radius: 50%;
  52. display: flex;
  53. flex-shrink: 0;
  54. justify-content: center;
  55. font-size: 18px;
  56. height: var(--size);
  57. width: var(--size);
  58. } .z .thumbnail.online {
  59. --shadow-color: #50a746;
  60. }