summaryrefslogtreecommitdiff
path: root/data
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2019-11-27 11:10:23 +0100
committerYorhel <git@yorhel.nl>2019-11-27 11:23:48 +0100
commit7cb953265e54a731eb8a5c6bb0d4a45ea337fa80 (patch)
tree0d66fa4bbd92b464f3b5fad75fcea981e8198473 /data
parent09c967c73c473d0bfbeacdb712d3b5158c0757c6 (diff)
CSS: Less hacky .maintabs
Flexbox instead of floats. Apart from that, it's still very hacky. Uses relative positioning in order to overlay 1px over the .mainbox. This should fix the ages-old 'bottom tabs overlay next mainbox' bug and provide more flexibility with adding a top-level <fieldset> or centered buttons.
Diffstat (limited to 'data')
-rw-r--r--data/style.css49
1 files changed, 17 insertions, 32 deletions
diff --git a/data/style.css b/data/style.css
index 7f00f5e8..37adbb63 100644
--- a/data/style.css
+++ b/data/style.css
@@ -238,7 +238,7 @@ div.mainbox, table.mainbox td {
padding: 5px;
background: $boxbg$;
}
-div.mainbox-overflow-hack { overflow: hidden; width: 100% }
+div.mainbox-overflow-hack { overflow: hidden; width: 100%; box-sizing: border-box }
.mainbox h1 { color: $boxtitle$; font-size: 24px; margin: -5px 0 15px 0; }
.mainbox h2.alttitle { color: $alttitle$; margin: -17px 0 15px 15px; font-weight: normal; }
.mainbox p { margin: 3px 20px; }
@@ -259,37 +259,22 @@ a.addnew, p.addnew { float: right; margin: 0 }
/***** main tabs *****/
-ul.maintabs { display: inline; margin: 0; }
-ul.maintabs.notfirst { display: block; height: 20px }
-ul.maintabs li { display: inline; list-style-type: none }
-ul.maintabs li a, ul.maintabs li b {
- float: right;
- display: block;
- height: 14px;
- padding: 1px 7px 5px 7px;
- margin: 0 0 0 10px;
-}
-ul.maintabs li a {
- border: 1px solid $border$;
- border-bottom: none;
- background-color: $tabbg$;
- color: $grayedout$;
-}
-ul.maintabs.notfirst li a,
-ul.maintabs.notfirst li b { margin-top: 20px }
-ul.maintabs.bottom li a,
-ul.maintabs.bottom li b { margin-top: 10px; padding: 4px 7px 2px 7px }
-ul.maintabs.bottom li a { border-bottom: 1px solid $border$; border-top: none }
-ul.maintabs li.left a,
-ul.maintabs li.left b { float: left; margin-left: 0; margin-right: 10px }
-ul.maintabs li b { margin-left: -2px; margin-right: -7px }
-ul.maintabs li.left b { margin-left: -7px; margin-right: -2px }
-ul.maintabs li.tabselected a,
-ul.maintabs li a:hover { background: $_blendbg$; color: $maintext$; padding-bottom: 6px }
-ul.maintabs.bottom li.tabselected a,
-ul.maintabs.bottom li a:hover { padding-bottom: 2px; padding-top: 5px; margin-top: 9px }
-ul.maintabs.browsetabs li a { margin-left: 5px; color: $maintext$ }
-ul.maintabs.browsetabs li.left a { margin-left: 0; margin-right: 5px }
+div.maintabs { display: flex; justify-content: space-between; position: relative; width: 100%; height: 22px; margin: 20px 0 -22px 0; padding: 0 }
+#maincontent div:nth-child(1).maintabs { margin-top: 0 }
+div.maintabs.right { justify-content: flex-end }
+div.maintabs.left { justify-content: flex-start }
+div.maintabs ul { margin: 0; padding: 0; list-style-type: none }
+div.maintabs li { display: inline-block; margin: 0 0 0 10px }
+div.maintabs ul li:nth-child(1) { margin-left: 0!important }
+div.maintabs li a { display: inline-block; box-sizing: border-box; height: 21px; padding: 1px 7px 0 7px; border: 1px solid $border$; border-bottom: none; background-color: $tabbg$; color: $grayedout$; }
+div.maintabs li.tabselected a,
+div.maintabs li a:hover { background: $_blendbg$; color: $maintext$; height: 22px }
+div.maintabs.browsetabs li a { color: $maintext$ }
+div.maintabs.browsetabs li { margin-left: 5px }
+div.maintabs.bottom { margin-top: 10px; /* WHY!? */ margin-bottom: -10px }
+div.maintabs.bottom li a { padding: 4px 7px 2px 7px; border-bottom: 1px solid $border$; border-top: none }
+div.maintabs.bottom li.tabselected a,
+div.maintabs.bottom li a:hover { padding-top: 5px; height: 22px; margin-top: -1px }