left.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. .navbar {
  2. display: flex;
  3. flex-direction: column;
  4. width: var(--nav-size);
  5. height: calc(100vh - (3 * var(--unit-size)));
  6. position: fixed;
  7. background-color: rgba(0, 0, 0, 0.40);
  8. margin-top: calc(3 * var(--main-size));
  9. }
  10. .navbar .left-nav {
  11. flex: 1;
  12. }
  13. .navbar .left-nav a {
  14. margin-left: var(--unit-size);
  15. }
  16. .navbar .footer {
  17. display: flex;
  18. flex-wrap: wrap;
  19. flex-direction: row;
  20. font-size: var(--medium-size);
  21. padding: var(--unit-size);
  22. margin-bottom: var(--unit-size);
  23. }
  24. .navbar .footer a {
  25. margin-right: var(--unit-size);
  26. }
  27. .navbar {
  28. left: -15em;
  29. top: 0;
  30. transition: 0.3s ease;
  31. left: 0;
  32. top: 0;
  33. transition: 0.3s ease;
  34. }
  35. .navbar a {
  36. display: block;
  37. color: #91B9D0;
  38. font-size: var(--medium-size);
  39. }
  40. .navbar .left-nav a {
  41. margin-bottom: var(--unit-size);
  42. }
  43. .navbar .left-nav a:last-child {
  44. margin-bottom: 0;
  45. }
  46. .navbar .left-nav a:nth-child(1) {
  47. margin-top: var(--unit-size);
  48. }
  49. .navbar a:hover {
  50. color: #F6F6F6;
  51. transition: all 0.8s ease;
  52. }
  53. .icon-menu label {
  54. display: none;
  55. cursor: pointer
  56. }
  57. #toggle {
  58. display: none;
  59. }
  60. #toggle:checked+.navbar {
  61. display: block;
  62. left: 0;
  63. top: 0;
  64. transition: 0.3s ease;
  65. }
  66. .profile {
  67. display: flex;
  68. flex-wrap: wrap;
  69. background-color: rgba(0, 0, 0, 0.20);
  70. padding: var(--unit-size);
  71. font-size: var(--small-size);
  72. margin-bottom: var(--unit-size);
  73. vertical-align: middle;
  74. }
  75. .icon-avatar {
  76. order: 1;
  77. height: calc(5 * var(--unit-size));
  78. weight: auto;
  79. width: 25%;
  80. margin-right: var(--small-size);
  81. }
  82. .info {
  83. order: 2;
  84. }
  85. .info #nick {
  86. order: 1;
  87. margin-bottom: var(--small-size);
  88. }
  89. .info .tags {
  90. order: 2;
  91. margin-bottom: var(--small-size);
  92. }
  93. .info .stats {
  94. order: 3;
  95. }
  96. .info .tags i {
  97. color: #91B9D0;
  98. }
  99. .info .tags i:last-child {
  100. margin-left: var(--small-size);
  101. }
  102. .stats span:last-child {
  103. margin-left: var(--small-size);
  104. }