mobile.css 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. header h3 a, header .brand {
  2. display:none !important;
  3. }
  4. @media screen and (max-device-width: 600px) {
  5. .modal {
  6. margin: 1.5em auto;
  7. }
  8. .tabs, .cbi-tabmenu {
  9. background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%);
  10. background-size: 1px 34px;
  11. margin-bottom: 10px;
  12. }
  13. .tabs > li, .cbi-tabmenu > li {
  14. height: 30px;
  15. }
  16. .tabs > li > a, .cbi-tabmenu > li > a {
  17. padding: 0 8px;
  18. line-height: 30px;
  19. }
  20. .table {
  21. display: flex;
  22. flex-direction: column;
  23. width: 100%;
  24. }
  25. .tr {
  26. display: flex;
  27. flex-direction: row;
  28. flex-wrap: wrap;
  29. align-items: flex-end;
  30. border-top: 1px solid var(--border-color-medium);
  31. padding: 5px 0;
  32. margin: 0 -3px;
  33. }
  34. .table .th,
  35. .table .td,
  36. .table .tr::before {
  37. flex: 1 1 50%;
  38. align-self: flex-start;
  39. overflow: hidden;
  40. text-overflow: ellipsis;
  41. word-wrap: break-word;
  42. display: inline-block;
  43. border-top: none;
  44. padding: 3px;
  45. box-sizing: border-box;
  46. }
  47. .table .td.cbi-dropdown-open {
  48. overflow: visible;
  49. }
  50. .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
  51. .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
  52. .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
  53. .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
  54. .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
  55. .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
  56. .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
  57. .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
  58. .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
  59. .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
  60. .td select {
  61. word-wrap: normal;
  62. }
  63. .td[data-widget="button"],
  64. .td[data-widget="fvalue"] {
  65. flex: 1 1 17%;
  66. text-align: left;
  67. }
  68. .td.cbi-value-field {
  69. align-self: flex-start;
  70. flex-basis: 100%;
  71. margin-bottom: .3em;
  72. }
  73. .td.cbi-value-field .cbi-button {
  74. width: 100%;
  75. }
  76. .table.cbi-section-table {
  77. border: none;
  78. background: none;
  79. margin: 0;
  80. }
  81. .tr.table-titles,
  82. .cbi-section-table-titles,
  83. .cbi-section-table-descr {
  84. display: none;
  85. }
  86. .cbi-section-table-row {
  87. display: flex;
  88. flex-direction: row;
  89. flex-wrap: wrap;
  90. margin: 0 0 .5em 0;
  91. }
  92. .cbi-section-table + .cbi-section-create {
  93. padding-top: 0;
  94. }
  95. .tr[data-title]::before {
  96. display: block;
  97. flex: 1 1 100%;
  98. background: var(--background-color-low) !important;
  99. font-size: 16px;
  100. border-bottom: 1px solid var(--border-color-medium);
  101. }
  102. .td[data-title]::before {
  103. content: attr(data-title);
  104. font-weight: bold;
  105. display: block;
  106. overflow: hidden;
  107. text-overflow: ellipsis;
  108. white-space: pre-line;
  109. }
  110. .td[data-description]::after {
  111. display: block;
  112. }
  113. .td[data-title] ~ .td.cbi-section-actions {
  114. align-self: flex-start;
  115. }
  116. .td.cbi-section-actions {
  117. overflow: initial;
  118. max-width: 100%;
  119. padding: 3px 2px;
  120. flex-basis: 100%;
  121. }
  122. .hide-sm,
  123. .hide-xs {
  124. display: none !important;
  125. }
  126. .td.cbi-value-field[data-widget="CBI.DummyValue"],
  127. .td.cbi-value-field[data-widget="CBI.Button"],
  128. .td.cbi-value-field[data-widget="CBI.FlagValue"],
  129. .td.cbi-value-field[data-widget="dvalue"],
  130. .td.cbi-value-field[data-widget="button"],
  131. .td.cbi-value-field[data-widget="fvalue"] {
  132. flex-basis: 50%;
  133. text-align: left;
  134. }
  135. .cbi-section-table .tr:hover .td,
  136. .cbi-section-table .tr:hover .th,
  137. .cbi-section-table .tr:hover::before {
  138. background-color: transparent;
  139. }
  140. .cbi-tab-descr {
  141. margin: 0 0 .5em 0;
  142. }
  143. .cbi-value {
  144. padding-bottom: .5em;
  145. border-bottom: 1px solid var(--border-color-high);
  146. margin-bottom: .5em;
  147. display: block;
  148. }
  149. .cbi-value.hidden {
  150. display: none;
  151. }
  152. .cbi-value .cbi-value:last-child {
  153. border-bottom: none;
  154. padding-bottom: inherit;
  155. margin-bottom: inherit;
  156. }
  157. .cbi-value label.cbi-value-title {
  158. font-weight: bold;
  159. }
  160. .cbi-value-field, .cbi-select, .cbi-dynlist, .cbi-dropdown:not(.btn):not(.cbi-button) {
  161. width: 100%;
  162. margin: 0;
  163. }
  164. .cbi-dynlist > .item {
  165. min-height: 30px;
  166. display: flex;
  167. align-items: center;
  168. }
  169. input, textarea, select,
  170. .cbi-dropdown > ul > li {
  171. font-size: 16px !important;
  172. height: auto;
  173. }
  174. .cbi-dropdown > ul > li input[type="text"] {
  175. line-height: 28px;
  176. }
  177. select, input[type="text"], input[type="password"],
  178. .cbi-dropdown > ul > li input[type="text"],
  179. .cbi-value-field .control-group {
  180. width: 100%;
  181. height: 30px;
  182. }
  183. input.cbi-input-password {
  184. width: calc(100% - 25px);
  185. }
  186. input[type="text"] + .cbi-button,
  187. input[type="password"] + .cbi-button,
  188. select + .cbi-button {
  189. overflow: hidden;
  190. text-overflow: ellipsis;
  191. }
  192. .cbi-value-field input[type="checkbox"],
  193. .cbi-value-field input[type="radio"] {
  194. margin: 0;
  195. }
  196. button, .btn, .cbi-button {
  197. font-size: 14px !important;
  198. padding: 0 8px;
  199. }
  200. .actions,
  201. .cbi-page-actions {
  202. border-top: none;
  203. margin-top: -.5em;
  204. padding: 8px;
  205. }
  206. [data-page="admin-status-overview"] .td[width="33%"] {
  207. flex-basis: 33%;
  208. }
  209. header .pull-right .label {
  210. white-space: normal;
  211. display: inline-block;
  212. text-align: center;
  213. line-height: 12px;
  214. margin: 1px 0;
  215. }
  216. header > .fill {
  217. padding: 1px;
  218. }
  219. header > .fill > .container {
  220. display: flex;
  221. flex-direction: row;
  222. }
  223. header .nav {
  224. flex: 3 3 80%;
  225. margin: 2px 5px 2px 0;
  226. display: flex;
  227. flex-wrap: wrap;
  228. justify-content: flex-start;
  229. }
  230. header .nav a {
  231. padding: 2px 6px;
  232. }
  233. header .pull-right {
  234. flex: 0 1 20%;
  235. display: flex;
  236. flex-direction: column;
  237. padding: 0;
  238. justify-content: space-around;
  239. margin: .2em 5px .2em auto;
  240. }
  241. .menu-dropdown, .dropdown-menu {
  242. top: 23px;
  243. }
  244. .cbi-optionals,
  245. .cbi-section-create {
  246. padding: 0 0 14px 0;
  247. }
  248. #cbi-network-switch_vlan .th,
  249. #cbi-network-switch_vlan .td {
  250. flex-basis: 12%;
  251. }
  252. #cbi-network-switch_vlan .td.cbi-section-actions > * {
  253. width: auto;
  254. display: block;
  255. }
  256. #wifi_assoclist_table .td,
  257. [data-page="admin-status-processes"] .td {
  258. flex-basis: 50% !important;
  259. }
  260. [data-page="admin-status-processes"] .td[data-widget="button"] {
  261. flex-basis: 33% !important;
  262. }
  263. [data-page="admin-status-processes"] .td[data-name="PID"],
  264. [data-page="admin-status-processes"] .td[data-name="USER"] {
  265. flex-basis: 25% !important;
  266. }
  267. [data-page="admin-system-fstab"] .td[data-widget="button"]::before,
  268. [data-page="admin-system-startup"] .td[data-widget="button"]::before,
  269. [data-page="admin-status-processes"] .td[data-widget="button"]::before {
  270. display: none;
  271. }
  272. [data-name="bridge-vlan"] > div {
  273. overflow: visible !important;
  274. }
  275. [data-name="bridge-vlan"] .td[data-title] {
  276. flex-basis: 33%;
  277. }
  278. [data-name="bridge-vlan"] .td[data-title]::before {
  279. content: attr(data-title);
  280. }
  281. [data-page="admin-network-network"] .td[data-name="_ifacebox"] {
  282. flex-basis: 40%;
  283. }
  284. [data-page="admin-network-network"] .td[data-name="_ifacestat"] {
  285. flex-basis: 60%;
  286. }
  287. }
  288. @media screen and (max-device-width: 375px) {
  289. .cbi-page-actions {
  290. display: flex;
  291. justify-content: space-between;
  292. margin: 0 -1px;
  293. padding: 0;
  294. }
  295. .cbi-page-actions button {
  296. overflow: hidden;
  297. text-overflow: ellipsis;
  298. }
  299. .cbi-page-actions .cbi-button {
  300. flex: 1;
  301. margin: 1px !important;
  302. line-height: 2em;
  303. }
  304. .cbi-page-actions .cbi-button-negative,
  305. .cbi-page-actions .cbi-button-primary,
  306. .cbi-page-actions .cbi-button-apply {
  307. flex: 3;
  308. }
  309. .cbi-section-actions .cbi-button {
  310. overflow: hidden;
  311. text-overflow: ellipsis;
  312. margin: 1px !important;
  313. }
  314. body[data-page="admin-network-wireless"] .td[data-name="_badge"] {
  315. max-width: 50px;
  316. align-self: center;
  317. }
  318. body[data-page="admin-network-wireless"] .td[data-name="_badge"] .ifacebadge {
  319. display: flex;
  320. align-items: center;
  321. flex-direction: column;
  322. }
  323. body[data-page="admin-network-wireless"] .td[data-name="_stat"] {
  324. flex-basis: 60%;
  325. }
  326. body[data-page="admin-network-network"] .td.cbi-section-actions::before,
  327. body[data-page="admin-network-wireless"] .td.cbi-section-actions::before {
  328. content: none !important;
  329. }
  330. [data-page="admin-network-network"] .td[data-name="_ifacebox"],
  331. [data-page="admin-network-network"] .td[data-name="_ifacestat"] {
  332. flex-basis: 100%;
  333. }
  334. .td .ifacebox {
  335. width: 100%;
  336. margin: 0 !important;
  337. flex-direction: row;
  338. }
  339. .td .ifacebox .ifacebox-head {
  340. min-width: 25%;
  341. justify-content: space-around;
  342. border-radius: 4px 0 0 4px;
  343. }
  344. .td .ifacebox .ifacebox-head,
  345. .td .ifacebox .ifacebox-body {
  346. display: flex;
  347. border-bottom: none;
  348. align-items: center;
  349. }
  350. .td .ifacebox .ifacebox-head > *,
  351. .ifacebox .ifacebox-body > * {
  352. margin: .125em;
  353. }
  354. }