diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2016-12-02 22:28:57 +0300 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2016-12-03 10:34:11 +0300 |
commit | f82a40d478a54389f286b1fbf36d5e5f40618388 (patch) | |
tree | 20802f4b06c4a95249acbbc871fff4a7b630c441 /settings/css | |
parent | 214b9b74c43f98a0494666caabb1dec2bc363de5 (diff) |
use flex and specify rows to align everything
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'settings/css')
-rw-r--r-- | settings/css/settings.css | 45 |
1 files changed, 41 insertions, 4 deletions
diff --git a/settings/css/settings.css b/settings/css/settings.css index 1c1e2787810..1cdfcc77515 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -231,7 +231,7 @@ table.nostyle td { padding: 0.2em 0; } text-align: right; } #sessions .token-list td > a.icon, -#apppasswords .token-list td > a.icon { +#apppasswords .token-list td > a.icon { opacity: 0; transition: opacity 0.5s; } @@ -538,13 +538,50 @@ span.version { } #apps-list .section { position: relative; - flex: 0 0 330px; - margin: 0; - padding-right: 50px; + flex: 0 0 auto; + margin-left: 20px; } #apps-list .section.apps-experimental { flex-basis: 90%; } + +@media (min-width: 1601px) { + #apps-list .section { + width: 22%; + box-sizing: border-box; + } + #apps-list .section:nth-child(4n) { + margin-right: 20px; + } +} + +@media (min-width: 1201px) and (max-width: 1600px) { + #apps-list .section { + width: 30%; + box-sizing: border-box; + } + #apps-list .section:nth-child(3n) { + margin-right: 20px; + } +} + +@media (min-width: 901px) and (max-width: 1200px), (min-width: 601px) and (max-width: 770px) { + #apps-list .section { + width: 40%; + box-sizing: border-box; + } + #apps-list .section:nth-child(2n) { + margin-right: 20px; + } +} + +@media (max-width: 600px), (min-width: 771px) and (max-width: 900px) { + #apps-list .section { + width: 100%; + box-sizing: border-box; + } +} + .section h2.app-name { margin-bottom: 8px; display: inline; |