diff options
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/css/base.css | 186 | ||||
| -rw-r--r-- | web_src/css/index.css | 1 | ||||
| -rw-r--r-- | web_src/css/modules/menu.css | 802 | ||||
| -rw-r--r-- | web_src/css/repo.css | 5 | ||||
| -rw-r--r-- | web_src/fomantic/build/semantic.css | 2010 | ||||
| -rw-r--r-- | web_src/fomantic/semantic.json | 1 |
6 files changed, 804 insertions, 2201 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index 02067971a0..20f3616177 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -319,27 +319,6 @@ a.label, background-color: var(--color-label-bg); } -.ui.menu { - display: flex; -} - -.ui.menu, -.ui.vertical.menu { - background: var(--color-menu); - border-color: var(--color-secondary); - box-shadow: none; -} - -.ui.menu .item { - color: var(--color-text); - user-select: auto; - line-height: var(--line-height-default); /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */ -} - -.ui.menu .item > .svg { - margin-right: 0.35em; -} - .ui.menu .dropdown.item:hover, .ui.menu a.item:hover, .ui.menu details.item summary:hover { @@ -347,42 +326,6 @@ a.label, background: var(--color-hover); } -.ui.menu .active.item, -.ui.menu .active.item:hover, -.ui.vertical.menu .active.item, -.ui.vertical.menu .active.item:hover { - color: var(--color-text); - background: var(--color-active); -} - -.ui.menu a.item:active { - color: var(--color-text); - background: none; -} - -.ui.ui.menu .item.disabled { - color: var(--color-text-light-3); -} - -.ui.menu .item::before, .ui.vertical.menu .item::before { - background: var(--color-secondary); -} - -/* sub menu of vertical menu */ -.ui.vertical.menu .item .menu .item { - color: var(--color-text-light-2); - text-indent: 16px; -} - -.ui.vertical.menu .item .menu .item:hover, -.ui.vertical.menu .item .menu a.item:hover { - color: var(--color-text-light-1); -} - -.ui.vertical.menu .item .menu .active.item { - color: var(--color-text); -} - /* slightly more contrast for filters on issue list */ .ui.ui.menu .dropdown.item.disabled { color: var(--color-text-light-2); @@ -441,11 +384,6 @@ a.label, background: var(--color-hover); } -.ui.menu .ui.dropdown .menu > .selected.item { - color: var(--color-text) !important; - background: var(--color-hover) !important; -} - .ui.dropdown .menu > .message:not(.ui) { color: var(--color-text-light-2); } @@ -462,58 +400,6 @@ a.label, color: var(--color-text-light-2); } -/* replace item margin on secondary menu items with gap and remove both the - negative margins on the menu as well as margin on the items */ -.ui.secondary.menu { - margin-left: 0; - margin-right: 0; - gap: .35714286em; -} -.ui.secondary.menu .item { - margin-left: 0; - margin-right: 0; -} - -.ui.secondary.menu .dropdown.item:hover, -.ui.secondary.menu a.item:hover { - color: var(--color-text); - background: var(--color-hover); -} - -.ui.secondary.menu .active.item, -.ui.secondary.menu .active.item:hover { - color: var(--color-text); - background: var(--color-active); -} - -.ui.secondary.menu.tight .item { - padding-left: 0.85714286em; - padding-right: 0.85714286em; -} - -/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */ -.ui.menu::after { - content: normal; -} - -.ui.menu .dropdown.item .menu { - background: var(--color-body); -} - -.ui.menu .ui.dropdown .menu > .item { - color: var(--color-text) !important; -} - -.ui.menu .ui.dropdown .menu > .item:hover { - color: var(--color-text) !important; - background: var(--color-hover) !important; -} - -.ui.menu .ui.dropdown .menu > .active.item { - color: var(--color-text) !important; - background: var(--color-active) !important; -} - .ui.form textarea:not([rows]) { height: var(--min-height-textarea); /* override fomantic default 12em */ min-height: var(--min-height-textarea); /* override fomantic default 8em */ @@ -606,11 +492,6 @@ img.ui.avatar, margin-top: calc(var(--page-spacing) - 1rem); } -.ui.pagination.menu .active.item { - color: var(--color-text); - background: var(--color-active); -} - .ui.form .fields.error .field textarea, .ui.form .fields.error .field select, .ui.form .fields.error .field input:not([type]), @@ -786,7 +667,7 @@ input:-webkit-autofill:active, font-weight: var(--font-weight-normal); } -/* replace fomantic popover box shadows */ +/* popover box shadows */ .ui.dropdown .menu, .ui.upward.dropdown > .menu, .ui.menu .dropdown.item .menu, @@ -804,22 +685,6 @@ input:-webkit-autofill:active, background: var(--color-overlay-backdrop); } -/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */ -/* This fixes the commit graph button on the commits page */ -/* modal svg icons, copied from fomantic except width and height */ -/* center text in fomantic modal dialogs */ -.ui .menu:not(.vertical) .item > .button.compact { - padding: 0.58928571em 1.125em; -} - -.ui .menu:not(.vertical) .item > .button.small { - font-size: 0.92857143rem; -} - -.ui.menu .ui.dropdown.item .menu .item { - width: 100%; -} - .ui.dropdown .menu > .header { font-size: 0.8em; } @@ -1010,24 +875,6 @@ input:-webkit-autofill:active, border-color: var(--color-gold) !important; } -@media (max-width: 767.98px) { - .ui.pagination.menu .item:not(.active,.navigation), - .ui.pagination.menu .item.navigation span.navigation_label { - display: none; - } -} - -.ui.pagination.menu.narrow .item { - padding-left: 8px; - padding-right: 8px; - min-width: 1em; - text-align: center; -} - -.ui.pagination.menu.narrow .item .icon { - margin-right: 0; -} - .ui.floating.dropdown .overflow.menu .scrolling.menu.items { border-radius: 0 !important; box-shadow: none !important; @@ -1149,11 +996,6 @@ overflow-menu .ui.label { margin-top: 1px; } -.ui.menu .item > .label { - background: var(--color-label-bg); - color: var(--color-label-text); -} - .lines-blame-btn { padding: 0 0 0 5px; display: flex; @@ -1382,26 +1224,6 @@ table th[data-sortt-desc] .svg { vertical-align: -0.15em; } -.ui.tabular.menu { - border-color: var(--color-secondary); -} - -.ui.tabular.menu .active.item, -.ui.tabular.menu .active.item:hover { - background: var(--color-body); - border-color: var(--color-secondary); - color: var(--color-text); -} - -.ui.segment .ui.tabular.menu .active.item, -.ui.segment .ui.tabular.menu .active.item:hover { - background: var(--color-box-body); -} - -.ui.secondary.pointing.menu { - border-color: var(--color-secondary); -} - .ui.tabular.menu .item, .ui.secondary.pointing.menu .item { padding: 11.55px 12px !important; /* match .dashboard-navbar in height */ @@ -1413,12 +1235,6 @@ table th[data-sortt-desc] .svg { color: var(--color-text); } -.ui.secondary.pointing.menu .active.item, -.ui.secondary.pointing.menu .active.item:hover, -.ui.secondary.pointing.menu .dropdown.item:hover { - color: var(--color-text-dark); -} - .ui.tabular.menu .active.item, .ui.secondary.pointing.menu .active.item, .resize-for-semibold::before { diff --git a/web_src/css/index.css b/web_src/css/index.css index 73e10eedcb..edd6cdca8b 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -11,6 +11,7 @@ @import "./modules/list.css"; @import "./modules/segment.css"; @import "./modules/grid.css"; +@import "./modules/menu.css"; @import "./modules/message.css"; @import "./modules/table.css"; @import "./modules/card.css"; diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css new file mode 100644 index 0000000000..2581d8fab2 --- /dev/null +++ b/web_src/css/modules/menu.css @@ -0,0 +1,802 @@ +.ui.menu { + display: flex; + margin: 1rem 0; + font-family: var(--fonts-regular); + font-weight: var(--font-weight-normal); + background: var(--color-menu); + border: 1px solid var(--color-secondary); + border-radius: 0.28571429rem; + min-height: 2.85714286em; + font-size: 1rem; +} +.ui.menu:first-child { + margin-top: 0; +} +.ui.menu:last-child { + margin-bottom: 0; +} + +.ui.menu .menu { + margin: 0; +} +.ui.menu:not(.vertical) > .menu { + display: flex; +} + +.ui.menu:not(.vertical) .item { + display: flex; + align-items: center; +} + +.ui.menu .item { + position: relative; + vertical-align: middle; + line-height: var(--line-height-default); + text-decoration: none; + flex: 0 0 auto; + background: none; + padding: 0.92857143em 1.14285714em; + color: var(--color-text); + font-weight: var(--font-weight-normal); +} +.ui.menu > .item:first-child { + border-radius: 0.28571429rem 0 0 0.28571429rem; +} + +.ui.menu .item::before { + position: absolute; + content: ""; + top: 0; + right: 0; + height: 100%; + width: 1px; + background: var(--color-secondary); +} + +.ui.menu .item > .svg { + margin-right: 0.35em; +} + +.ui.menu .item > a:not(.ui), +.ui.menu .item > p:only-child { + line-height: 1.3; +} +.ui.menu .item > p:first-child { + margin-top: 0; +} +.ui.menu .item > p:last-child { + margin-bottom: 0; +} + +.ui.menu .item > i.icon { + opacity: 0.9; + float: none; + margin: 0 0.35714286em 0 0; +} + +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: 0; + margin: -0.5em 0; + padding: 0.58928571em 1.125em; + font-size: 1em; +} + +.ui.menu > .grid, +.ui.menu > .container { + display: flex; + align-items: inherit; + flex-direction: inherit; +} + +.ui.menu .item > .input { + width: 100%; +} +.ui.menu:not(.vertical) .item > .input { + position: relative; + top: 0; + margin: -0.5em 0; +} +.ui.menu .item > .input input { + font-size: 1em; + padding-top: 0.57142857em; + padding-bottom: 0.57142857em; +} + +.ui.menu .header.item, +.ui.vertical.menu .header.item { + margin: 0; + font-size: 1.1em; + background: var(--color-box-header); + font-weight: var(--font-weight-medium); +} +.ui.vertical.menu .item > .header:not(.ui) { + margin: 0 0 0.5em; + font-size: 1em; + font-weight: var(--font-weight-medium); +} + +.ui.menu .item > i.dropdown.icon { + padding: 0; + float: right; + margin: 0 0 0 1em; +} + +.ui.menu .dropdown.item .menu { + min-width: calc(100% - 1px); + border-radius: 0 0 0.28571429rem 0.28571429rem; + background: var(--color-body); + margin: 0; + flex-direction: column !important; +} + +.ui.menu .ui.dropdown .menu > .item { + margin: 0; + text-align: left; + font-size: 1em !important; + padding: 0.78571429em 1.14285714em !important; + background: transparent !important; + color: var(--color-text) !important; + font-weight: var(--font-weight-normal) !important; +} +.ui.menu .ui.dropdown .menu > .item:hover { + color: var(--color-text) !important; + background: var(--color-hover) !important; +} +.ui.menu .ui.dropdown .menu > .selected.item { + color: var(--color-text) !important; + background: var(--color-hover) !important; +} +.ui.menu .ui.dropdown .menu > .active.item { + color: var(--color-text) !important; + background: var(--color-active) !important; + font-weight: var(--font-weight-medium) !important; +} + +.ui.menu .ui.dropdown.item .menu .item { + width: 100%; +} + +.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { + display: block; +} +.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { + display: inline-block; + font-size: 1em !important; + float: none; + margin: 0 0.75em 0 0 !important; +} + +.ui.secondary.menu .dropdown.item > .menu { + border-radius: 0.28571429rem; + margin-top: 0.35714286em; +} + +.ui.menu .pointing.dropdown.item .menu { + margin-top: 0.75em; +} + +.ui.menu .item > .label:not(.floating) { + margin-left: 1em; + padding: 0.3em 0.78571429em; +} +.ui.vertical.menu .item > .label { + margin-top: -0.15em; + margin-bottom: -0.15em; + padding: 0.3em 0.78571429em; + float: right; + text-align: center; +} +.ui.menu .item > .floating.label { + padding: 0.3em 0.78571429em; +} +.ui.menu .item > .label { + background: var(--color-label-bg); + color: var(--color-label-text); +} +.ui.menu .item > .image.label img { + margin: -0.2833em 0.8em -0.2833em -0.8em; + height: 1.5666em; +} + +.ui.menu .item > img:not(.ui) { + display: inline-block; + vertical-align: middle; + margin: -0.3em 0; + width: 2.5em; +} +.ui.vertical.menu .item > img:not(.ui):only-child { + display: block; + max-width: 100%; + width: auto; +} + +.ui.menu .list .item::before { + background: none !important; +} + +@media only screen and (max-width: 767.98px) { + .ui.menu > .ui.container { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } +} + +.ui.menu .dropdown.item:hover, +.ui.menu a.item:hover { + cursor: pointer; +} + +.ui.menu a.item:active { + color: var(--color-text); + background: none; +} + +.ui.menu .active.item { + color: var(--color-text); + background: var(--color-active); + font-weight: var(--font-weight-normal); +} +.ui.menu .active.item > i.icon { + opacity: 1; +} + +.ui.ui.menu .item.disabled { + cursor: default; + background-color: transparent; + pointer-events: none; + opacity: var(--opacity-disabled); +} + +.ui.menu:not(.vertical) .left.item, +.ui.menu:not(.vertical) .left.menu { + display: flex; + margin-right: auto !important; +} + +.ui.menu:not(.vertical) .right.item, +.ui.menu:not(.vertical) .right.menu { + display: flex; + margin-left: auto !important; +} +.ui.menu:not(.vertical) :not(.dropdown) > .left.menu, +.ui.menu:not(.vertical) :not(.dropdown) > .right.menu { + display: inherit; +} + +.ui.menu:not(.vertical) .center.item { + display: flex; + margin-left: auto !important; + margin-right: auto !important; +} + +.ui.menu .right.item::before, +.ui.menu .right.menu > .item::before { + right: auto; + left: 0; +} + +.ui.menu .center.item:last-child::before { + display: none; +} + +.ui.vertical.menu { + display: block; + flex-direction: column; + background: var(--color-menu); + width: 15rem; +} + +.ui.vertical.menu .item { + display: block; + background: none; + border-top: none; + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: 0.28571429rem 0.28571429rem 0 0; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0 0 0.28571429rem 0.28571429rem; +} + +.ui.vertical.menu .item > i.icon { + width: 1.18em; + float: right; + margin: 0 0 0 0.5em; +} +.ui.vertical.menu .item > .label + i.icon { + float: none; + margin: 0 0.5em 0 0; +} + +.ui.vertical.menu .item::before { + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 1px; + background: var(--color-secondary); +} +.ui.vertical.menu .item:first-child::before { + display: none !important; +} + +.ui.vertical.menu .item > .menu { + margin: 0.5em -1.14285714em 0; +} +.ui.vertical.menu .menu .item { + background: none; + padding: 0.5em 1.33333333em; + font-size: 0.85714286em; + color: var(--color-text-light-2); +} + +.ui.vertical.menu .item .menu .item { + color: var(--color-text-light-2); + text-indent: 16px; +} + +.ui.vertical.menu .item .menu .item:hover, +.ui.vertical.menu .item .menu a.item:hover { + color: var(--color-text-light-1); +} + +.ui.vertical.menu .item .menu .active.item { + background-color: transparent; + font-weight: var(--font-weight-medium); + color: var(--color-text); +} + +.ui.vertical.menu .item .menu a.item:hover { + color: var(--color-text); +} +.ui.vertical.menu .menu .item::before { + display: none; +} + +.ui.vertical.menu .active.item { + border-radius: 0; +} +.ui.vertical.menu > .active.item:first-child { + border-radius: 0.28571429rem 0.28571429rem 0 0; +} +.ui.vertical.menu > .active.item:last-child { + border-radius: 0 0 0.28571429rem 0.28571429rem; +} +.ui.vertical.menu > .active.item:only-child { + border-radius: 0.28571429rem; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; +} + +.ui.tabular.menu { + border-radius: 0; + border: none; + background: none transparent; + border-bottom: 1px solid var(--color-secondary); +} +.ui.tabular.fluid.menu { + width: calc(100% + 2px) !important; +} +.ui.tabular.menu .item { + background: transparent; + border-bottom: none; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 2px solid transparent; + color: var(--color-text-light-2); +} +.ui.tabular.menu .item::before { + display: none; +} + +.ui.tabular.menu .item:hover { + background-color: transparent; +} + +.ui.tabular.menu .active.item, +.ui.tabular.menu .active.item:hover { + background: var(--color-body); + border-top-width: 1px; + border-color: var(--color-secondary); + font-weight: var(--font-weight-medium); + margin-bottom: -1px; + border-radius: 0.28571429rem 0.28571429rem 0 0 !important; +} + +.ui.tabular.menu + .attached:not(.top).segment, +.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { + border-top: none; + margin-left: 0; + margin-top: 0; + margin-right: 0; + width: 100%; +} + +.ui.tabular.menu .active.dropdown.item { + margin-bottom: 0; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 2px solid transparent; + border-bottom: none; +} + +.ui.pagination.menu { + margin: 0; + display: inline-flex; + vertical-align: middle; +} +.ui.pagination.menu .item:last-child { + border-radius: 0 0.28571429rem 0.28571429rem 0; +} +.ui.compact.menu .item:last-child { + border-radius: 0 0.28571429rem 0.28571429rem 0; +} +.ui.pagination.menu .item:last-child::before { + display: none; +} +.ui.pagination.menu .item { + min-width: 3em; + text-align: center; +} +.ui.pagination.menu .icon.item i.icon { + vertical-align: top; +} + +.ui.pagination.menu .active.item, +.ui.pagination.menu .active.item:hover { + border-top: none; + padding-top: 0.92857143em; + color: var(--color-text); + background: var(--color-active); +} + +@media (max-width: 767.98px) { + .ui.pagination.menu .item:not(.active,.navigation), + .ui.pagination.menu .item.navigation span.navigation_label { + display: none; + } +} + +.ui.pagination.menu.narrow .item { + padding-left: 8px; + padding-right: 8px; + min-width: 1em; + text-align: center; +} + +.ui.pagination.menu.narrow .item .icon { + margin-right: 0; +} + +.ui.secondary.menu { + background: none; + margin-left: 0; + margin-right: 0; + gap: .35714286em; + border-radius: 0; + border: none; +} + +.ui.secondary.menu .item { + align-self: center; + border: none; + padding: 0.78571429em 0.92857143em; + margin: 0; + background: none; + border-radius: 0.28571429rem; +} + +.ui.secondary.menu .item::before { + display: none !important; +} + +.ui.secondary.menu .header.item { + border-radius: 0; + border-right: none; + background: none transparent; +} + +.ui.secondary.menu .item > img:not(.ui) { + margin: 0; +} + +.ui.secondary.menu .dropdown.item:hover, +.ui.secondary.menu a.item:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.secondary.menu .active.item, +.ui.secondary.menu .active.item:hover { + color: var(--color-text-dark); + background: var(--color-active); + border-radius: 0.28571429rem; +} + +.ui.secondary.item.menu { + margin-left: 0; + margin-right: 0; +} +.ui.secondary.item.menu .item:last-child { + margin-right: 0; +} + +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu { + margin: 0 -0.92857143em; +} +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { + margin: 0; + padding: 0.5em 1.33333333em; +} +.ui.secondary.vertical.menu > .item { + border: none; + margin: 0 0 0.35714286em; + border-radius: 0.28571429rem !important; +} +.ui.secondary.vertical.menu > .header.item { + border-radius: 0; +} + +.ui.vertical.secondary.menu .item > .menu .item { + background-color: transparent; +} + +.ui.secondary.pointing.menu { + margin-left: 0; + margin-right: 0; + border-bottom: 2px solid var(--color-secondary); +} +.ui.secondary.pointing.menu .item { + border-bottom-color: transparent; + border-bottom-style: solid; + border-radius: 0; + align-self: flex-end; + margin: 0 0 -2px; + padding: 0.85714286em 1.14285714em; + border-bottom-width: 2px; +} +.ui.secondary.pointing.menu .ui.dropdown .menu .item { + border-bottom-width: 0; +} +.ui.secondary.pointing.menu .item > .label:not(.floating) { + margin-top: -0.3em; + margin-bottom: -0.3em; +} +.ui.secondary.pointing.menu .item > .circular.label { + margin-top: -0.5em; + margin-bottom: -0.5em; +} + +.ui.secondary.pointing.menu .header.item { + color: var(--color-text) !important; +} +.ui.secondary.pointing.menu .item::after { + display: none; +} + +.ui.secondary.pointing.menu .dropdown.item:hover, +.ui.secondary.pointing.menu a.item:hover { + background-color: transparent; + color: var(--color-text); +} + +.ui.secondary.pointing.menu .dropdown.item:active, +.ui.secondary.pointing.menu a.item:active { + background-color: transparent; + border-color: var(--color-secondary); +} + +.ui.secondary.pointing.menu .active.item { + background-color: transparent; + border-color: currentcolor; + font-weight: var(--font-weight-medium); +} + +.ui.secondary.pointing.menu .active.item, +.ui.secondary.pointing.menu .active.item:hover, +.ui.secondary.pointing.menu .dropdown.item:hover { + color: var(--color-text-dark); +} + +.ui.secondary.pointing.menu .active.dropdown.item { + border-color: transparent; +} + +@media only screen and (max-width: 767.98px) { + .ui.stackable.menu { + flex-direction: column; + } + .ui.stackable.menu .item { + width: 100% !important; + } + .ui.stackable.menu .left.menu, + .ui.stackable.menu .left.item { + margin-right: 0 !important; + } + .ui.stackable.menu .right.menu, + .ui.stackable.menu .right.item { + margin-left: 0 !important; + } + .ui.stackable.menu .center.item { + margin-left: 0 !important; + margin-right: 0 !important; + } + .ui.stackable.menu .right.menu, + .ui.stackable.menu .left.menu { + flex-direction: column; + } +} + +.ui.floated.menu { + float: left; + margin: 0 0.5rem 0 0; +} +.ui.floated.menu .item:last-child::before { + display: none; +} +.ui.right.floated.menu { + float: right; + margin: 0 0 0 0.5rem; +} + +.ui.borderless.menu .item::before, +.ui.borderless.menu .item .menu .item::before, +.ui.menu .borderless.item::before { + background: none !important; +} + +.ui.compact.menu { + display: inline-flex; + margin: 0; + vertical-align: middle; +} +.ui.compact.vertical.menu { + display: inline-block; + width: auto !important; +} +.ui.compact.menu:not(.secondary) .item:last-child { + border-radius: 0 0.28571429rem 0.28571429rem 0; +} +.ui.compact.menu .item:last-child::before { + display: none; +} +.ui.compact.vertical.menu .item:last-child::before { + display: block; +} + +.ui.menu.fluid, +.ui.vertical.menu.fluid { + width: 100% !important; +} + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + text-align: center; + justify-content: center; +} +.ui.attached.item.menu:not(.tabular) { + margin: 0 -1px !important; +} +.ui.item.menu .item:last-child::before { + display: none; +} +.ui.menu.two.item .item { + width: 50%; +} + +.ui.pointing.menu .item::after { + visibility: hidden; + position: absolute; + content: ""; + top: 100%; + left: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + background: none; + margin: 0.5px 0 0; + width: 0.57142857em; + height: 0.57142857em; + border: none; + border-bottom: 1px solid var(--color-secondary); + border-right: 1px solid var(--color-secondary); + z-index: 2; +} +.ui.pointing.menu .ui.dropdown .menu .item::after { + display: none; +} + +.ui.pointing.menu .active.item::after { + visibility: visible; +} +.ui.pointing.menu .active.dropdown.item::after { + visibility: hidden; +} + +.ui.pointing.menu .dropdown.active.item::after, +.ui.pointing.menu .active.item .menu .active.item::after { + display: none; +} + +.ui.pointing.menu .active.item::after, +.ui.pointing.menu .active.item:hover::after { + background-color: var(--color-active); +} + +.ui.attached.menu { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 -1px; + width: calc(100% + 2px); + max-width: calc(100% + 2px); +} +.ui.attached + .ui.attached.menu:not(.top) { + border-top: none; +} + +.ui[class*="top attached"].menu { + bottom: 0; + margin-bottom: 0; + top: 0; + margin-top: 1rem; + border-radius: 0.28571429rem 0.28571429rem 0 0; +} +.ui.menu[class*="top attached"]:first-child { + margin-top: 0; +} + +.ui.top.attached.menu > .item:first-child { + border-radius: 0.28571429rem 0 0; +} + +.ui.attached.menu:not(.tabular) { + border: 1px solid var(--color-secondary); +} +.ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; +} + +.ui.mini.menu, +.ui.mini.menu .dropdown, +.ui.mini.menu .dropdown .menu > .item { + font-size: 0.78571429rem; +} +.ui.mini.vertical.menu:not(.icon) { + width: 9rem; +} +.ui.tiny.menu, +.ui.tiny.menu .dropdown, +.ui.tiny.menu .dropdown .menu > .item { + font-size: 0.85714286rem; +} +.ui.tiny.vertical.menu:not(.icon) { + width: 11rem; +} +.ui.small.menu, +.ui.small.menu .dropdown, +.ui.small.menu .dropdown .menu > .item { + font-size: 0.92857143rem; +} +.ui.small.vertical.menu:not(.icon) { + width: 13rem; +} + +.ui .menu:not(.vertical) .item > .button.small { + font-size: 0.92857143rem; +} + +.ui.segment .ui.tabular.menu .active.item, +.ui.segment .ui.tabular.menu .active.item:hover { + background: var(--color-box-body); +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4b7ad49677..52f9d5a6ca 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2079,11 +2079,6 @@ td .commit-summary { padding: 10px 0 0; } -.ui.vertical.menu .header.item { - font-size: 1.1em; - background: var(--color-box-header); -} - .comment:target .comment-container { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 49c00c4dad..8ce9ee24ea 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -6477,2016 +6477,6 @@ select.ui.dropdown { /******************************* Site Overrides *******************************/ -/* - * # Fomantic - Menu - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Copyright 2015 Contributor - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Standard -*******************************/ - -/*-------------- - Menu ----------------*/ - -.ui.menu { - display: flex; - margin: 1rem 0; - font-family: var(--fonts-regular); - background: #FFFFFF; - font-weight: normal; - border: 1px solid rgba(34, 36, 38, 0.15); - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); - border-radius: 0.28571429rem; - min-height: 2.85714286em; -} - -.ui.menu:after { - content: ''; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.ui.menu:first-child { - margin-top: 0; -} - -.ui.menu:last-child { - margin-bottom: 0; -} - -/*-------------- - Sub-Menu ----------------*/ - -.ui.menu .menu { - margin: 0; -} - -.ui.menu:not(.vertical) > .menu { - display: flex; -} - -/*-------------- - Item ----------------*/ - -.ui.menu:not(.vertical) .item { - display: flex; - align-items: center; -} - -.ui.menu .item { - position: relative; - vertical-align: middle; - line-height: 1; - text-decoration: none; - -webkit-tap-highlight-color: transparent; - flex: 0 0 auto; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - background: none; - padding: 0.92857143em 1.14285714em; - text-transform: none; - color: rgba(0, 0, 0, 0.87); - font-weight: normal; - transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; -} - -.ui.menu > .item:first-child { - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -/* Border */ - -.ui.menu .item:before { - position: absolute; - content: ''; - top: 0; - right: 0; - height: 100%; - width: 1px; - background: rgba(34, 36, 38, 0.1); -} - -/*-------------- - Text Content ----------------*/ - -.ui.menu .text.item > *, -.ui.menu .item > a:not(.ui), -.ui.menu .item > p:only-child { - -webkit-user-select: text; - -moz-user-select: text; - user-select: text; - line-height: 1.3; -} - -.ui.menu .item > p:first-child { - margin-top: 0; -} - -.ui.menu .item > p:last-child { - margin-bottom: 0; -} - -/*-------------- - Icons ----------------*/ - -.ui.menu .item > i.icon { - opacity: 0.9; - float: none; - margin: 0 0.35714286em 0 0; -} - -/*-------------- - Button ----------------*/ - -.ui.menu:not(.vertical) .item > .button { - position: relative; - top: 0; - margin: -0.5em 0; - padding-bottom: 0.78571429em; - padding-top: 0.78571429em; - font-size: 1em; -} - -/*---------------- - Grid / Container ------------------*/ - -.ui.menu > .grid, -.ui.menu > .container { - display: flex; - align-items: inherit; - flex-direction: inherit; -} - -/*-------------- - Inputs ----------------*/ - -.ui.menu .item > .input { - width: 100%; -} - -.ui.menu:not(.vertical) .item > .input { - position: relative; - top: 0; - margin: -0.5em 0; -} - -.ui.menu .item > .input input { - font-size: 1em; - padding-top: 0.57142857em; - padding-bottom: 0.57142857em; -} - -/*-------------- - Header ----------------*/ - -.ui.menu .header.item, -.ui.vertical.menu .header.item { - margin: 0; - background: ''; - text-transform: normal; - font-weight: 500; -} - -.ui.vertical.menu .item > .header:not(.ui) { - margin: 0 0 0.5em; - font-size: 1em; - font-weight: 500; -} - -/*-------------- - Dropdowns ----------------*/ - -/* Dropdown Icon */ - -.ui.menu .item > i.dropdown.icon { - padding: 0; - float: right; - margin: 0 0 0 1em; -} - -/* Menu */ - -.ui.menu .dropdown.item .menu { - min-width: calc(100% - 1px); - border-radius: 0 0 0.28571429rem 0.28571429rem; - background: #FFFFFF; - margin: 0 0 0; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); - flex-direction: column !important; -} - -/* Menu Items */ - -.ui.menu .ui.dropdown .menu > .item { - margin: 0; - text-align: left; - font-size: 1em !important; - padding: 0.78571429em 1.14285714em !important; - background: transparent !important; - color: rgba(0, 0, 0, 0.87) !important; - text-transform: none !important; - font-weight: normal !important; - box-shadow: none !important; - transition: none !important; -} - -.ui.menu .ui.dropdown .menu > .item:hover { - background: rgba(0, 0, 0, 0.05) !important; - color: rgba(0, 0, 0, 0.95) !important; -} - -.ui.menu .ui.dropdown .menu > .selected.item { - background: rgba(0, 0, 0, 0.05) !important; - color: rgba(0, 0, 0, 0.95) !important; -} - -.ui.menu .ui.dropdown .menu > .active.item { - background: rgba(0, 0, 0, 0.03) !important; - font-weight: 500 !important; - color: rgba(0, 0, 0, 0.95) !important; -} - -.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { - display: block; -} - -.ui.menu .ui.dropdown .menu > .item > .icons, -.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { - display: inline-block; - font-size: 1em !important; - float: none; - margin: 0 0.75em 0 0 !important; -} - -/* Secondary */ - -.ui.secondary.menu .dropdown.item > .menu, -.ui.text.menu .dropdown.item > .menu { - border-radius: 0.28571429rem; - margin-top: 0.35714286em; -} - -/* Pointing */ - -.ui.menu .pointing.dropdown.item .menu { - margin-top: 0.75em; -} - -/* Vertical */ - -.ui.vertical.menu .dropdown.item > i.icon { - float: right; - content: "\f0da"; - margin-left: 1em; -} - -.ui.vertical.menu .dropdown.item .menu { - left: 100%; - /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */ - min-width: 0; - min-width: -moz-max-content; - min-width: max-content; - margin: 0 0 0 0; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); - border-radius: 0 0.28571429rem 0.28571429rem 0.28571429rem; -} - -.ui.vertical.menu .dropdown.item.upward .menu { - bottom: 0; -} - -.ui.vertical.menu .dropdown.item:not(.upward) .menu { - top: 0; -} - -.ui.vertical.menu .active.dropdown.item { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.ui.vertical.menu .dropdown.active.item { - box-shadow: none; -} - -/* Evenly Divided */ - -.ui.item.menu .dropdown .menu .item { - width: 100%; -} - -/*-------------- - Labels ----------------*/ - -.ui.menu .item > .label:not(.floating) { - margin-left: 1em; - padding: 0.3em 0.78571429em; -} - -.ui.vertical.menu .item > .label { - margin-top: -0.15em; - margin-bottom: -0.15em; - padding: 0.3em 0.78571429em; -} - -.ui.menu .item > .floating.label { - padding: 0.3em 0.78571429em; -} - -.ui.menu .item > .label { - background: #999999; - color: #FFFFFF; -} - -.ui.menu .item > .image.label img { - margin: -0.2833em 0.8em -0.2833em -0.8em; - height: 1.5666em; -} - -/*-------------- - Images ----------------*/ - -.ui.menu .item > img:not(.ui) { - display: inline-block; - vertical-align: middle; - margin: -0.3em 0; - width: 2.5em; -} - -.ui.vertical.menu .item > img:not(.ui):only-child { - display: block; - max-width: 100%; - width: auto; -} - -/******************************* - Coupling -*******************************/ - -/*-------------- - List ----------------*/ - -/* Menu divider shouldnt apply */ - -.ui.menu .list .item:before { - background: none !important; -} - -/*-------------- - Sidebar - ---------------*/ - -/* Show vertical dividers below last */ - -.ui.vertical.sidebar.menu > .item:first-child:before { - display: block !important; -} - -.ui.vertical.sidebar.menu > .item::before { - top: auto; - bottom: 0; -} - -/*-------------- - Container ----------------*/ - -@media only screen and (max-width: 767.98px) { - .ui.menu > .ui.container { - width: 100% !important; - margin-left: 0 !important; - margin-right: 0 !important; - } -} - -@media only screen and (min-width: 768px) { - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { - border-left: 1px solid rgba(34, 36, 38, 0.1); - } - - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { - border-right: 1px solid rgba(34, 36, 38, 0.1); - } -} - -/******************************* - States -*******************************/ - -/*-------------- - Hover ----------------*/ - -.ui.link.menu .item:hover, -.ui.menu .dropdown.item:hover, -.ui.menu .link.item:hover, -.ui.menu a.item:hover { - cursor: pointer; - background: rgba(0, 0, 0, 0.03); - color: rgba(0, 0, 0, 0.95); -} - -/*-------------- - Pressed ----------------*/ - -.ui.link.menu .item:active, -.ui.menu .link.item:active, -.ui.menu a.item:active { - background: rgba(0, 0, 0, 0.03); - color: rgba(0, 0, 0, 0.95); -} - -/*-------------- - Active ----------------*/ - -.ui.menu .active.item { - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); - font-weight: normal; - box-shadow: none; -} - -.ui.menu .active.item > i.icon { - opacity: 1; -} - -/*-------------- - Active Hover ----------------*/ - -.ui.menu .active.item:hover, -.ui.vertical.menu .active.item:hover { - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); -} - -/*-------------- - Disabled ----------------*/ - -.ui.ui.menu .item.disabled { - cursor: default; - background-color: transparent; - color: rgba(40, 40, 40, 0.3); - pointer-events: none; -} - -/******************************* - Types -*******************************/ - -/*------------------ -Floated Menu / Item --------------------*/ - -/* Left Floated */ - -.ui.menu:not(.vertical) .left.item, -.ui.menu:not(.vertical) .left.menu { - display: flex; - margin-right: auto !important; -} - -/* Right Floated */ - -.ui.menu:not(.vertical) .right.item, -.ui.menu:not(.vertical) .right.menu { - display: flex; - margin-left: auto !important; -} - -.ui.menu:not(.vertical) :not(.dropdown) > .left.menu, -.ui.menu:not(.vertical) :not(.dropdown) > .right.menu { - display: inherit; -} - -/* Center */ - -.ui.menu:not(.vertical) .center.item, -.ui.menu:not(.vertical) .center.menu { - display: flex; - margin-left: auto !important; - margin-right: auto !important; -} - -/* Swapped Borders */ - -.ui.menu .right.item::before, -.ui.menu .right.menu > .item::before { - right: auto; - left: 0; -} - -/* Remove Outer Borders */ - -.ui.menu .center.item:last-child::before, -.ui.menu .center.menu > .item:last-child::before { - display: none; -} - -/*-------------- - Vertical - ---------------*/ - -.ui.vertical.menu { - display: block; - flex-direction: column; - background: #FFFFFF; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); -} - -/*--- Item ---*/ - -.ui.vertical.menu .item { - display: block; - background: none; - border-top: none; - border-right: none; -} - -.ui.vertical.menu > .item:first-child { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.vertical.menu > .item:last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -/*--- Label ---*/ - -.ui.vertical.menu .item > .label { - float: right; - text-align: center; -} - -/*--- Icon ---*/ - -.ui.vertical.menu .item > i.icon, -.ui.vertical.menu .item > i.icons { - width: 1.18em; - float: right; - margin: 0 0 0 0.5em; -} - -.ui.vertical.menu .item > .label + i.icon { - float: none; - margin: 0 0.5em 0 0; -} - -/*--- Border ---*/ - -.ui.vertical.menu .item:before { - position: absolute; - content: ''; - top: 0; - left: 0; - width: 100%; - height: 1px; - background: rgba(34, 36, 38, 0.1); -} - -.ui.vertical.menu .item:first-child:before { - display: none !important; -} - -/*--- Sub Menu ---*/ - -.ui.vertical.menu .item > .menu { - margin: 0.5em -1.14285714em 0; -} - -.ui.vertical.menu .menu .item { - background: none; - padding: 0.5em 1.33333333em; - font-size: 0.85714286em; - color: rgba(0, 0, 0, 0.5); -} - -.ui.vertical.menu .item .menu a.item:hover, -.ui.vertical.menu .item .menu .link.item:hover { - color: rgba(0, 0, 0, 0.85); -} - -.ui.vertical.menu .menu .item:before { - display: none; -} - -/* Vertical Active */ - -.ui.vertical.menu .active.item { - background: rgba(0, 0, 0, 0.05); - border-radius: 0; - box-shadow: none; -} - -.ui.vertical.menu > .active.item:first-child { - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.vertical.menu > .active.item:last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui.vertical.menu > .active.item:only-child { - border-radius: 0.28571429rem; -} - -.ui.vertical.menu .active.item .menu .active.item { - border-left: none; -} - -.ui.vertical.menu .item .menu .active.item { - background-color: transparent; - font-weight: 500; - color: rgba(0, 0, 0, 0.95); -} - -/*-------------- - Tabular - ---------------*/ - -.ui.tabular.menu { - border-radius: 0; - box-shadow: none !important; - border: none; - background: none transparent; - border-bottom: 1px solid #D4D4D5; -} - -.ui.tabular.fluid.menu { - width: calc(100% + 2px) !important; -} - -.ui.tabular.menu .item { - background: transparent; - border-bottom: none; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-top: 2px solid transparent; - padding: 0.92857143em 1.42857143em; - color: rgba(0, 0, 0, 0.87); -} - -.ui.tabular.menu .item:before { - display: none; -} - -/* Hover */ - -.ui.tabular.menu .item:hover { - background-color: transparent; - color: rgba(0, 0, 0, 0.8); -} - -/* Active */ - -.ui.tabular.menu .active.item { - background: none #FFFFFF; - color: rgba(0, 0, 0, 0.95); - border-top-width: 1px; - border-color: #D4D4D5; - font-weight: 500; - margin-bottom: -1px; - box-shadow: none; - border-radius: 0.28571429rem 0.28571429rem 0 0 !important; -} - -/* Coupling with segment for attachment */ - -.ui.tabular.menu + .attached:not(.top).segment, -.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { - border-top: none; - margin-left: 0; - margin-top: 0; - margin-right: 0; - width: 100%; -} - -.top.attached.segment + .ui.bottom.tabular.menu { - position: relative; - width: calc(100% + 2px); - left: -1px; -} - -/* Bottom Vertical Tabular */ - -.ui.bottom.tabular.menu { - background: none transparent; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-top: 1px solid #D4D4D5; -} - -.ui.bottom.tabular.menu .item { - background: none; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - border-top: none; -} - -.ui.bottom.tabular.menu .active.item { - background: none #FFFFFF; - color: rgba(0, 0, 0, 0.95); - border-color: #D4D4D5; - margin: -1px 0 0 0; - border-radius: 0 0 0.28571429rem 0.28571429rem !important; -} - -/* Vertical Tabular (Left) */ - -.ui.vertical.tabular.menu { - background: none transparent; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-right: 1px solid #D4D4D5; -} - -.ui.vertical.tabular.menu .item { - background: none; - border-left: 1px solid transparent; - border-bottom: 1px solid transparent; - border-top: 1px solid transparent; - border-right: none; -} - -.ui.vertical.tabular.menu .active.item { - background: none #FFFFFF; - color: rgba(0, 0, 0, 0.95); - border-color: #D4D4D5; - margin: 0 -1px 0 0; - border-radius: 0.28571429rem 0 0 0.28571429rem !important; -} - -/* Vertical Right Tabular */ - -.ui.vertical.right.tabular.menu { - background: none transparent; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-right: none; - border-left: 1px solid #D4D4D5; -} - -.ui.vertical.right.tabular.menu .item { - background: none; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - border-top: 1px solid transparent; - border-left: none; -} - -.ui.vertical.right.tabular.menu .active.item { - background: none #FFFFFF; - color: rgba(0, 0, 0, 0.95); - border-color: #D4D4D5; - margin: 0 0 0 -1px; - border-radius: 0 0.28571429rem 0.28571429rem 0 !important; -} - -/* Dropdown */ - -.ui.tabular.menu .active.dropdown.item { - margin-bottom: 0; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - border-top: 2px solid transparent; - border-bottom: none; -} - -/*-------------- - Pagination - ---------------*/ - -.ui.pagination.menu { - margin: 0; - display: inline-flex; - vertical-align: middle; -} - -.ui.pagination.menu .item:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.compact.menu .item:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.pagination.menu .item:last-child:before { - display: none; -} - -.ui.pagination.menu .item { - min-width: 3em; - text-align: center; -} - -.ui.pagination.menu .icon.item i.icon { - vertical-align: top; -} - -/* Active */ - -.ui.pagination.menu .active.item { - border-top: none; - padding-top: 0.92857143em; - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); - box-shadow: none; -} - -/*-------------- - Secondary - ---------------*/ - -.ui.secondary.menu { - background: none; - margin-left: -0.35714286em; - margin-right: -0.35714286em; - border-radius: 0; - border: none; - box-shadow: none; -} - -/* Item */ - -.ui.secondary.menu .item { - align-self: center; - box-shadow: none; - border: none; - padding: 0.78571429em 0.92857143em; - margin: 0 0.35714286em; - background: none; - transition: color 0.1s ease; - border-radius: 0.28571429rem; -} - -/* No Divider */ - -.ui.secondary.menu .item:before { - display: none !important; -} - -/* Header */ - -.ui.secondary.menu .header.item { - border-radius: 0; - border-right: none; - background: none transparent; -} - -/* Image */ - -.ui.secondary.menu .item > img:not(.ui) { - margin: 0; -} - -/* Hover */ - -.ui.secondary.menu .dropdown.item:hover, -.ui.secondary.menu .link.item:hover, -.ui.secondary.menu a.item:hover { - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); -} - -/* Active */ - -.ui.secondary.menu .active.item { - box-shadow: none; - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); - border-radius: 0.28571429rem; -} - -/* Active Hover */ - -.ui.secondary.menu .active.item:hover { - box-shadow: none; - background: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.95); -} - -/* Fix item margins */ - -.ui.secondary.item.menu { - margin-left: 0; - margin-right: 0; -} - -.ui.secondary.item.menu .item:last-child { - margin-right: 0; -} - -.ui.secondary.attached.menu { - box-shadow: none; -} - -/*--------------------- - Secondary Vertical - -----------------------*/ - -/* Sub Menu */ - -.ui.vertical.secondary.menu .item:not(.dropdown) > .menu { - margin: 0 -0.92857143em; -} - -.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { - margin: 0; - padding: 0.5em 1.33333333em; -} - -.ui.secondary.vertical.menu > .item { - border: none; - margin: 0 0 0.35714286em; - border-radius: 0.28571429rem !important; -} - -.ui.secondary.vertical.menu > .header.item { - border-radius: 0; -} - -/* Sub Menu */ - -.ui.vertical.secondary.menu .item > .menu .item { - background-color: transparent; -} - -/* Inverted */ - -.ui.secondary.inverted.menu { - background-color: transparent; -} - -/*--------------------- - Secondary Pointing - -----------------------*/ - -.ui.secondary.pointing.menu { - margin-left: 0; - margin-right: 0; - border-bottom: 2px solid rgba(34, 36, 38, 0.15); -} - -.ui.secondary.pointing.menu .item { - border-bottom-color: transparent; - border-bottom-style: solid; - border-radius: 0; - align-self: flex-end; - margin: 0 0 -2px; - padding: 0.85714286em 1.14285714em; - border-bottom-width: 2px; - transition: color 0.1s ease; -} - -.ui.secondary.pointing.menu .ui.dropdown .menu .item { - border-bottom-width: 0; -} - -.ui.secondary.pointing.menu .item > .label:not(.floating) { - margin-top: -0.3em; - margin-bottom: -0.3em; -} - -.ui.secondary.pointing.menu .item > .circular.label { - margin-top: -0.5em; - margin-bottom: -0.5em; -} - -/* Item Types */ - -.ui.secondary.pointing.menu .header.item { - color: rgba(0, 0, 0, 0.85) !important; -} - -.ui.secondary.pointing.menu .text.item { - box-shadow: none !important; -} - -.ui.secondary.pointing.menu .item:after { - display: none; -} - -/* Hover */ - -.ui.secondary.pointing.menu .dropdown.item:hover, -.ui.secondary.pointing.menu .link.item:hover, -.ui.secondary.pointing.menu a.item:hover { - background-color: transparent; - color: rgba(0, 0, 0, 0.87); -} - -/* Pressed */ - -.ui.secondary.pointing.menu .dropdown.item:active, -.ui.secondary.pointing.menu .link.item:active, -.ui.secondary.pointing.menu a.item:active { - background-color: transparent; - border-color: rgba(34, 36, 38, 0.15); -} - -/* Active */ - -.ui.secondary.pointing.menu .active.item { - background-color: transparent; - box-shadow: none; - border-color: currentColor; - font-weight: 500; - color: rgba(0, 0, 0, 0.95); -} - -/* Active Hover */ - -.ui.secondary.pointing.menu .active.item:hover { - border-color: currentColor; - color: rgba(0, 0, 0, 0.95); -} - -/* Active Dropdown */ - -.ui.secondary.pointing.menu .active.dropdown.item { - border-color: transparent; -} - -/* Vertical Pointing */ - -.ui.secondary.vertical.pointing.menu { - border-bottom-width: 0; - border-right-width: 2px; - border-right-style: solid; - border-right-color: rgba(34, 36, 38, 0.15); -} - -.ui.secondary.vertical.pointing.menu .item { - border-bottom: none; - border-right-style: solid; - border-right-color: transparent; - border-radius: 0 !important; - margin: 0 -2px 0 0; - border-right-width: 2px; -} - -/* Vertical Active */ - -.ui.secondary.vertical.pointing.menu .active.item { - border-color: currentColor; -} - -/*-------------- - Text Menu - ---------------*/ - -.ui.text.menu { - background: none transparent; - border-radius: 0; - box-shadow: none; - border: none; - margin: 1em -0.5em; -} - -.ui.text.menu .item { - border-radius: 0; - box-shadow: none; - align-self: center; - margin: 0 0; - padding: 0.35714286em 0.5em; - font-weight: normal; - color: rgba(0, 0, 0, 0.6); - transition: opacity 0.1s ease; -} - -/* Border */ - -.ui.text.menu .item:before, -.ui.text.menu .menu .item:before { - display: none !important; -} - -/* Header */ - -.ui.text.menu .header.item { - background-color: transparent; - opacity: 1; - color: rgba(0, 0, 0, 0.85); - font-size: 0.92857143em; - text-transform: uppercase; - font-weight: 500; -} - -/* Image */ - -.ui.text.menu .item > img:not(.ui) { - margin: 0; -} - -/*--- fluid text ---*/ - -.ui.text.item.menu .item { - margin: 0; -} - -/*--- vertical text ---*/ - -.ui.vertical.text.menu { - margin: 1em 0; -} - -.ui.vertical.text.menu:first-child { - margin-top: 0; -} - -.ui.vertical.text.menu:last-child { - margin-bottom: 0; -} - -.ui.vertical.text.menu .item { - margin: 0.57142857em 0; - padding-left: 0; - padding-right: 0; -} - -.ui.vertical.text.menu .item > i.icon { - float: none; - margin: 0 0.35714286em 0 0; -} - -.ui.vertical.text.menu .header.item { - margin: 0.57142857em 0 0.71428571em; -} - -/* Vertical Sub Menu */ - -.ui.vertical.text.menu .item:not(.dropdown) > .menu { - margin: 0; -} - -.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { - margin: 0; - padding: 0.5em 0; -} - -/*--- hover ---*/ - -.ui.text.menu .item:hover { - opacity: 1; - background-color: transparent; -} - -/*--- active ---*/ - -.ui.text.menu .active.item { - background-color: transparent; - border: none; - box-shadow: none; - font-weight: normal; - color: rgba(0, 0, 0, 0.95); -} - -/*--- active hover ---*/ - -.ui.text.menu .active.item:hover { - background-color: transparent; -} - -/* Disable Bariations */ - -.ui.text.pointing.menu .active.item:after { - box-shadow: none; -} - -.ui.text.attached.menu { - box-shadow: none; -} - -/* Fluid */ - -.ui.fluid.text.menu { - margin-left: 0; - margin-right: 0; -} - -/*-------------- - Icon Only ----------------*/ - -/* Vertical Menu */ - -.ui.vertical.icon.menu { - display: inline-block; - width: auto; -} - -/* Item */ - -.ui.icon.menu .item { - height: auto; - text-align: center; - color: #1B1C1D; -} - -/* Icon */ - -.ui.icon.menu .item > i.icon:not(.dropdown) { - margin: 0; - opacity: 1; -} - -/* Icon Gylph */ - -.ui.icon.menu i.icon:before { - opacity: 1; -} - -/* (x) Item Icon */ - -.ui.menu .icon.item > i.icon { - width: auto; - margin: 0 auto; -} - -/* Vertical Icon */ - -.ui.vertical.icon.menu .item > i.icon:not(.dropdown) { - display: block; - opacity: 1; - margin: 0 auto; - float: none; -} - -/* Inverted */ - -.ui.inverted.icon.menu .item { - color: #FFFFFF; -} - -/*-------------- - Labeled Icon - ---------------*/ - -/* Menu */ - -.ui.labeled.icon.menu { - text-align: center; -} - -/* Item */ - -.ui.labeled.icon.menu .item { - min-width: 6em; - flex-direction: column; -} - -/* Icon */ - -.ui.labeled.icon.menu > .item > i.icon:not(.dropdown) { - height: 1em; - display: block; - font-size: 1.71428571em !important; - margin: 0 auto 0.5rem !important; -} - -/* Fluid */ - -.ui.fluid.labeled.icon.menu > .item { - min-width: 0; -} - -/******************************* - Variations -*******************************/ - -/*-------------- - Stackable - ---------------*/ - -@media only screen and (max-width: 767.98px) { - .ui.stackable.menu { - flex-direction: column; - } - - .ui.stackable.menu .item { - width: 100% !important; - } - - .ui.stackable.menu .item:before { - position: absolute; - content: ''; - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: 1px; - background: rgba(34, 36, 38, 0.1); - } - - .ui.stackable.menu .left.menu, - .ui.stackable.menu .left.item { - margin-right: 0 !important; - } - - .ui.stackable.menu .right.menu, - .ui.stackable.menu .right.item { - margin-left: 0 !important; - } - - .ui.stackable.menu .center.menu, - .ui.stackable.menu .center.item { - margin-left: 0 !important; - margin-right: 0 !important; - } - - .ui.stackable.menu .right.menu, - .ui.stackable.menu .center.menu, - .ui.stackable.menu .left.menu { - flex-direction: column; - } -} - -/*-------------- - Colors ----------------*/ - -.ui.ui.ui.menu .primary.active.item, -.ui.ui.primary.menu .active.item:hover, -.ui.ui.primary.menu .active.item { - color: #2185D0; -} - -.ui.ui.ui.menu .red.active.item, -.ui.ui.red.menu .active.item:hover, -.ui.ui.red.menu .active.item { - color: #DB2828; -} - -.ui.ui.ui.menu .orange.active.item, -.ui.ui.orange.menu .active.item:hover, -.ui.ui.orange.menu .active.item { - color: #F2711C; -} - -.ui.ui.ui.menu .yellow.active.item, -.ui.ui.yellow.menu .active.item:hover, -.ui.ui.yellow.menu .active.item { - color: #FBBD08; -} - -.ui.ui.ui.menu .olive.active.item, -.ui.ui.olive.menu .active.item:hover, -.ui.ui.olive.menu .active.item { - color: #B5CC18; -} - -.ui.ui.ui.menu .green.active.item, -.ui.ui.green.menu .active.item:hover, -.ui.ui.green.menu .active.item { - color: #21BA45; -} - -.ui.ui.ui.menu .teal.active.item, -.ui.ui.teal.menu .active.item:hover, -.ui.ui.teal.menu .active.item { - color: #00B5AD; -} - -.ui.ui.ui.menu .blue.active.item, -.ui.ui.blue.menu .active.item:hover, -.ui.ui.blue.menu .active.item { - color: #2185D0; -} - -.ui.ui.ui.menu .violet.active.item, -.ui.ui.violet.menu .active.item:hover, -.ui.ui.violet.menu .active.item { - color: #6435C9; -} - -.ui.ui.ui.menu .purple.active.item, -.ui.ui.purple.menu .active.item:hover, -.ui.ui.purple.menu .active.item { - color: #A333C8; -} - -.ui.ui.ui.menu .pink.active.item, -.ui.ui.pink.menu .active.item:hover, -.ui.ui.pink.menu .active.item { - color: #E03997; -} - -.ui.ui.ui.menu .brown.active.item, -.ui.ui.brown.menu .active.item:hover, -.ui.ui.brown.menu .active.item { - color: #A5673F; -} - -.ui.ui.ui.menu .grey.active.item, -.ui.ui.grey.menu .active.item:hover, -.ui.ui.grey.menu .active.item { - color: #767676; -} - -.ui.ui.ui.menu .black.active.item, -.ui.ui.black.menu .active.item:hover, -.ui.ui.black.menu .active.item { - color: #1B1C1D; -} - -/*-------------- - Floated - ---------------*/ - -.ui.floated.menu { - float: left; - margin: 0 0.5rem 0 0; -} - -.ui.floated.menu .item:last-child:before { - display: none; -} - -.ui.right.floated.menu { - float: right; - margin: 0 0 0 0.5rem; -} - -/*-------------- - Fitted - ---------------*/ - -.ui.fitted.menu .item, -.ui.fitted.menu .item .menu .item, -.ui.menu .fitted.item { - padding: 0; -} - -.ui.horizontally.fitted.menu .item, -.ui.horizontally.fitted.menu .item .menu .item, -.ui.menu .horizontally.fitted.item { - padding-top: 0.92857143em; - padding-bottom: 0.92857143em; -} - -.ui.vertically.fitted.menu .item, -.ui.vertically.fitted.menu .item .menu .item, -.ui.menu .vertically.fitted.item { - padding-left: 1.14285714em; - padding-right: 1.14285714em; -} - -/*-------------- - Borderless - ---------------*/ - -.ui.borderless.menu .item:before, -.ui.borderless.menu .item .menu .item:before, -.ui.menu .borderless.item:before { - background: none !important; -} - -/*------------------- - Compact - --------------------*/ - -.ui.compact.menu { - display: inline-flex; - margin: 0; - vertical-align: middle; -} - -.ui.compact.vertical.menu { - /* IE hack to make dropdown icons appear inline */ - display: -ms-inline-flexbox !important; - display: inline-block; -} - -.ui.compact.menu:not(.secondary) .item:last-child { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.compact.menu .item:last-child:before { - display: none; -} - -.ui.compact.vertical.menu { - width: auto !important; -} - -.ui.compact.vertical.menu .item:last-child::before { - display: block; -} - -/*------------------- - Fluid - --------------------*/ - -.ui.menu.fluid, -.ui.vertical.menu.fluid { - width: 100% !important; -} - -/*------------------- - Evenly Sized ---------------------*/ - -.ui.item.menu, -.ui.item.menu .item { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; - text-align: center; - justify-content: center; -} - -.ui.attached.item.menu:not(.tabular) { - margin: 0 -1px !important; -} - -.ui.item.menu .item:last-child:before { - display: none; -} - -.ui.menu.two.item .item { - width: 50%; -} - -.ui.menu.three.item .item { - width: 33.333%; -} - -.ui.menu.four.item .item { - width: 25%; -} - -.ui.menu.five.item .item { - width: 20%; -} - -.ui.menu.six.item .item { - width: 16.666%; -} - -.ui.menu.seven.item .item { - width: 14.285%; -} - -.ui.menu.eight.item .item { - width: 12.5%; -} - -.ui.menu.nine.item .item { - width: 11.11%; -} - -.ui.menu.ten.item .item { - width: 10%; -} - -.ui.menu.eleven.item .item { - width: 9.09%; -} - -.ui.menu.twelve.item .item { - width: 8.333%; -} - -/*-------------- - Fixed - ---------------*/ - -.ui.menu.fixed { - position: fixed; - z-index: 101; - margin: 0; - width: 100%; -} - -.ui.menu.fixed, -.ui.menu.fixed .item:first-child, -.ui.menu.fixed .item:last-child { - border-radius: 0 !important; -} - -.ui.fixed.menu, -.ui[class*="top fixed"].menu { - top: 0; - left: 0; - right: auto; - bottom: auto; -} - -.ui[class*="top fixed"].menu { - border-top: none; - border-left: none; - border-right: none; -} - -.ui[class*="right fixed"].menu { - border-top: none; - border-bottom: none; - border-right: none; - top: 0; - right: 0; - left: auto; - bottom: auto; - width: auto; - height: 100%; -} - -.ui[class*="bottom fixed"].menu { - border-bottom: none; - border-left: none; - border-right: none; - bottom: 0; - left: 0; - top: auto; - right: auto; -} - -.ui[class*="left fixed"].menu { - border-top: none; - border-bottom: none; - border-left: none; - top: 0; - left: 0; - right: auto; - bottom: auto; - width: auto; - height: 100%; -} - -/* Coupling with Grid */ - -.ui.fixed.menu + .ui.grid { - padding-top: 2.75rem; -} - -/*------------------- - Pointing - --------------------*/ - -.ui.pointing.menu .item:after { - visibility: hidden; - position: absolute; - content: ''; - top: 100%; - left: 50%; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - background: none; - margin: 0.5px 0 0; - width: 0.57142857em; - height: 0.57142857em; - border: none; - border-bottom: 1px solid #D4D4D5; - border-right: 1px solid #D4D4D5; - z-index: 2; - transition: background 0.1s ease; -} - -.ui.vertical.pointing.menu .item:after { - position: absolute; - top: 50%; - right: 0; - bottom: auto; - left: auto; - transform: translateX(50%) translateY(-50%) rotate(45deg); - margin: 0 -0.5px 0 0; - border: none; - border-top: 1px solid #D4D4D5; - border-right: 1px solid #D4D4D5; -} - -.ui.pointing.menu .ui.dropdown .menu .item:after, -.ui.vertical.pointing.menu .ui.dropdown .menu .item:after { - display: none; -} - -/* Active */ - -.ui.pointing.menu .active.item:after { - visibility: visible; -} - -.ui.pointing.menu .active.dropdown.item:after { - visibility: hidden; -} - -/* Don't double up pointers */ - -.ui.pointing.menu .dropdown.active.item:after, -.ui.pointing.menu .active.item .menu .active.item:after { - display: none; -} - -/* Colors */ - -.ui.pointing.menu .active.item:hover:after { - background-color: #F2F2F2; -} - -.ui.pointing.menu .active.item:after { - background-color: #F2F2F2; -} - -.ui.pointing.menu .active.item:hover:after { - background-color: #F2F2F2; -} - -.ui.vertical.pointing.menu .active.item:hover:after { - background-color: #F2F2F2; -} - -.ui.vertical.pointing.menu .active.item:after { - background-color: #F2F2F2; -} - -.ui.vertical.pointing.menu .menu .active.item:after { - background-color: #FFFFFF; -} - -.ui.inverted.pointing.menu .primary.active.item:after { - background-color: #2185D0; -} - -.ui.inverted.pointing.menu .secondary.active.item:after { - background-color: #1B1C1D; -} - -.ui.inverted.pointing.menu .red.active.item:after { - background-color: #DB2828; -} - -.ui.inverted.pointing.menu .orange.active.item:after { - background-color: #F2711C; -} - -.ui.inverted.pointing.menu .yellow.active.item:after { - background-color: #FBBD08; -} - -.ui.inverted.pointing.menu .olive.active.item:after { - background-color: #B5CC18; -} - -.ui.inverted.pointing.menu .green.active.item:after { - background-color: #21BA45; -} - -.ui.inverted.pointing.menu .teal.active.item:after { - background-color: #00B5AD; -} - -.ui.inverted.pointing.menu .blue.active.item:after { - background-color: #2185D0; -} - -.ui.inverted.pointing.menu .violet.active.item:after { - background-color: #6435C9; -} - -.ui.inverted.pointing.menu .purple.active.item:after { - background-color: #A333C8; -} - -.ui.inverted.pointing.menu .pink.active.item:after { - background-color: #E03997; -} - -.ui.inverted.pointing.menu .brown.active.item:after { - background-color: #A5673F; -} - -.ui.inverted.pointing.menu .grey.active.item:after { - background-color: #767676; -} - -.ui.inverted.pointing.menu .black.active.item:after { - background-color: #1B1C1D; -} - -/*-------------- - Attached - ---------------*/ - -/* Middle */ - -.ui.attached.menu { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0 -1px; - width: calc(100% + 2px); - max-width: calc(100% + 2px); - box-shadow: none; -} - -.ui.attached + .ui.attached.menu:not(.top) { - border-top: none; -} - -/* Top */ - -.ui[class*="top attached"].menu { - bottom: 0; - margin-bottom: 0; - top: 0; - margin-top: 1rem; - border-radius: 0.28571429rem 0.28571429rem 0 0; -} - -.ui.menu[class*="top attached"]:first-child { - margin-top: 0; -} - -/* Bottom */ - -.ui[class*="bottom attached"].menu { - bottom: 0; - margin-top: 0; - top: 0; - margin-bottom: 1rem; - box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none; - border-radius: 0 0 0.28571429rem 0.28571429rem; -} - -.ui[class*="bottom attached"].menu:last-child { - margin-bottom: 0; -} - -/* Attached Menu Item */ - -.ui.top.attached.menu > .item:first-child { - border-radius: 0.28571429rem 0 0 0; -} - -.ui.bottom.attached.menu > .item:first-child { - border-radius: 0 0 0 0.28571429rem; -} - -/* Tabular Attached */ - -.ui.attached.menu:not(.tabular) { - border: 1px solid #D4D4D5; -} - -.ui.attached.tabular.menu { - margin-left: 0; - margin-right: 0; - width: 100%; -} - -/*-------------- - Sizes ----------------*/ - -.ui.menu { - font-size: 1rem; -} - -.ui.vertical.menu { - width: 15rem; -} - -.ui.mini.menu, -.ui.mini.menu .dropdown, -.ui.mini.menu .dropdown .menu > .item { - font-size: 0.78571429rem; -} - -.ui.mini.vertical.menu:not(.icon) { - width: 9rem; -} - -.ui.tiny.menu, -.ui.tiny.menu .dropdown, -.ui.tiny.menu .dropdown .menu > .item { - font-size: 0.85714286rem; -} - -.ui.tiny.vertical.menu:not(.icon) { - width: 11rem; -} - -.ui.small.menu, -.ui.small.menu .dropdown, -.ui.small.menu .dropdown .menu > .item { - font-size: 0.92857143rem; -} - -.ui.small.vertical.menu:not(.icon) { - width: 13rem; -} - -.ui.large.menu, -.ui.large.menu .dropdown, -.ui.large.menu .dropdown .menu > .item { - font-size: 1.07142857rem; -} - -.ui.large.vertical.menu:not(.icon) { - width: 18rem; -} - -.ui.big.menu, -.ui.big.menu .dropdown, -.ui.big.menu .dropdown .menu > .item { - font-size: 1.14285714rem; -} - -.ui.big.vertical.menu:not(.icon) { - width: 20rem; -} - -.ui.huge.menu, -.ui.huge.menu .dropdown, -.ui.huge.menu .dropdown .menu > .item { - font-size: 1.21428571rem; -} - -.ui.huge.vertical.menu:not(.icon) { - width: 22rem; -} - -.ui.massive.menu, -.ui.massive.menu .dropdown, -.ui.massive.menu .dropdown .menu > .item { - font-size: 1.28571429rem; -} - -.ui.massive.vertical.menu:not(.icon) { - width: 25rem; -} - -/*------------------- - Inverted dropdowns ---------------------*/ - -.ui.menu .ui.inverted.inverted.dropdown.item .menu { - background: #1B1C1D; - box-shadow: none; -} - -.ui.menu .ui.inverted.dropdown .menu > .item { - color: rgba(255, 255, 255, 0.8) !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .active.item { - background: transparent !important; - color: rgba(255, 255, 255, 0.8) !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .item:hover { - background: rgba(255, 255, 255, 0.08) !important; - color: rgba(255, 255, 255, 0.8) !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .selected.item { - background: rgba(255, 255, 255, 0.15) !important; - color: rgba(255, 255, 255, 0.8) !important; -} - -/* Vertical */ - -.ui.vertical.menu .inverted.dropdown.item .menu { - box-shadow: none; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - Site Overrides -*******************************/ /*! * # Fomantic-UI - Modal * http://github.com/fomantic/Fomantic-UI/ diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 5db57bc8d4..5b3a480d53 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -26,7 +26,6 @@ "dimmer", "dropdown", "form", - "menu", "modal", "search", "tab" |