_mobile.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /*=== MOBILE */
  2. /*===========*/
  3. @media (max-width: 840px) {
  4. .aside {
  5. transition: all 0.2s ease-in-out;
  6. &.aside_feed {
  7. padding: 0;
  8. }
  9. .tree .tree-folder .tree-folder-items .item a {
  10. padding: 0.5rem 1rem;
  11. }
  12. }
  13. .aside .toggle_aside,
  14. #overlay .close,
  15. .dropdown-menu .toggle_aside,
  16. #slider .toggle_aside {
  17. background-color: var(--main-first);
  18. &:hover {
  19. background-color: var(--main-first-alt);
  20. }
  21. .icon {
  22. filter: grayscale(100%) brightness(2.5);
  23. }
  24. }
  25. .header {
  26. .item {
  27. &.search {
  28. display: none;
  29. }
  30. &.configure {
  31. position: absolute;
  32. top: 0;
  33. right: 0;
  34. }
  35. }
  36. }
  37. #global {
  38. height: calc(100% - 8rem);
  39. }
  40. #panel {
  41. top: 0;
  42. right: 0;
  43. bottom: 0;
  44. left: 0;
  45. }
  46. .post {
  47. padding-left: 1rem;
  48. padding-right: 1rem;
  49. }
  50. .nav_menu {
  51. .btn {
  52. margin: 0;
  53. padding: 0.85rem 1.25rem;
  54. }
  55. .stick,
  56. .group {
  57. margin: 0.5rem 0.5rem;
  58. .btn {
  59. margin: 0;
  60. padding: 0.85rem 1.25rem;
  61. &.read_all {
  62. padding: 0.85rem 1.25rem;
  63. }
  64. }
  65. }
  66. .search {
  67. .input {
  68. max-width: 97%;
  69. width: 90px;
  70. &:focus {
  71. width: 400px;
  72. }
  73. }
  74. }
  75. }
  76. #nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
  77. background-image: none;
  78. }
  79. #stream {
  80. .flux {
  81. .flux_header {
  82. padding: 0.5rem 0;
  83. }
  84. }
  85. }
  86. .dropdown-target:target {
  87. & ~ .dropdown-toggle::after {
  88. background-color: var(--grey-lighter);
  89. border-top: 1px solid var(--grey-light);
  90. border-left: 1px solid var(--grey-light);
  91. right: 21px;
  92. bottom: -14px;
  93. }
  94. & ~ a.dropdown-toggle {
  95. &:not(.btn) {
  96. &::after {
  97. bottom: -17px;
  98. }
  99. }
  100. }
  101. }
  102. .transition {
  103. text-align: center;
  104. padding: 1rem 0;
  105. .name {
  106. padding: 0;
  107. display: block;
  108. width: 100%;
  109. line-height: 1.5rem;
  110. margin-bottom: 1rem;
  111. }
  112. }
  113. #nav_entries button {
  114. height: 4.5rem;
  115. }
  116. .notification {
  117. border-radius: 0;
  118. a.close {
  119. background: transparent;
  120. display: block;
  121. left: 0;
  122. }
  123. a.close:hover {
  124. opacity: 0.5;
  125. }
  126. a.close .icon {
  127. display: none;
  128. }
  129. }
  130. }