style.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. #tabs-wrapper {
  2. position: relative;
  3. display: flex;
  4. align-items: center;
  5. padding: 25px 0 0 32px;
  6. margin-bottom: 24px;
  7. .scroll-arrow {
  8. display: none;
  9. }
  10. }
  11. #tabs {
  12. display: flex;
  13. flex-wrap: nowrap;
  14. align-items: center;
  15. justify-content: start;
  16. overflow-x: scroll;
  17. cursor: grab;
  18. gap: 4px;
  19. touch-action: pan-y;
  20. scrollbar-width: none;
  21. -ms-overflow-style: none;
  22. &::-webkit-scrollbar {
  23. display: none;
  24. }
  25. a {
  26. color: var(--text-link);
  27. white-space: nowrap;
  28. border-radius: 4px;
  29. flex-shrink: 0;
  30. padding: 0 12px 0 0;
  31. -webkit-user-select: none;
  32. user-select: none;
  33. -webkit-user-drag: none;
  34. -webkit-tap-highlight-color: transparent;
  35. outline: none;
  36. &:hover {
  37. color: var(--brand-orange);
  38. text-decoration: underline;
  39. }
  40. &.active {
  41. color: var(--brand-orange);
  42. font-weight: 600;
  43. }
  44. }
  45. }
  46. @media (max-width: 576px) {
  47. #tabs-wrapper {
  48. padding: 15px 0 0 0;
  49. margin-bottom: 0;
  50. gap: 0;
  51. .scroll-arrow {
  52. display: flex;
  53. align-items: center;
  54. justify-content: center;
  55. flex-shrink: 0;
  56. width: 28px;
  57. height: 28px;
  58. border: none;
  59. background: transparent;
  60. color: var(--text-secondary);
  61. font-size: 0.75rem;
  62. cursor: pointer;
  63. &:active {
  64. color: var(--brand-orange);
  65. }
  66. }
  67. }
  68. #tabs {
  69. flex: 1;
  70. min-width: 0;
  71. }
  72. main {
  73. #changeApprove, #changeEmail, #changeIntro, #changeName, #changePassword,
  74. #changeSummary, #changeThumb, #profile, #verifyEmail, #withdraw, #loginLog,
  75. #myPosts, #myComments, #expLogs {
  76. padding: 15px 10px 22px 10px;
  77. }
  78. }
  79. }