snapshot of https://github.com/go-gitea/gitea.git (main, 2026-09-15; blobs > 131072B omitted)
Some checks failed
cache-seeder / prune (push) Has been skipped
cache-seeder / frontend (push) Failing after 3s
cache-seeder / python (push) Failing after 3s
cache-seeder / gobuild (push) Failing after 4s
cache-seeder / lint (bindata, lint-backend) (push) Failing after 3s
giteabot backport / giteabot (push) Has been skipped
giteabot / giteabot (push) Has been skipped
cache-prune / prune (push) Has been skipped
release-nightly-snapcraft / build-and-publish (ubuntu-24.04) (push) Has been cancelled
release-nightly-snapcraft / build-and-publish (ubuntu-24.04-arm) (push) Has been cancelled
release-nightly / nightly-binary (push) Has been cancelled
release-nightly / nightly-container (push) Has been cancelled
cron-renovate / cron-renovate (push) Has been skipped
Some checks failed
cache-seeder / prune (push) Has been skipped
cache-seeder / frontend (push) Failing after 3s
cache-seeder / python (push) Failing after 3s
cache-seeder / gobuild (push) Failing after 4s
cache-seeder / lint (bindata, lint-backend) (push) Failing after 3s
giteabot backport / giteabot (push) Has been skipped
giteabot / giteabot (push) Has been skipped
cache-prune / prune (push) Has been skipped
release-nightly-snapcraft / build-and-publish (ubuntu-24.04) (push) Has been cancelled
release-nightly-snapcraft / build-and-publish (ubuntu-24.04-arm) (push) Has been cancelled
release-nightly / nightly-binary (push) Has been cancelled
release-nightly / nightly-container (push) Has been cancelled
cron-renovate / cron-renovate (push) Has been skipped
This commit is contained in:
upstream-mirror
112
web_src/css/modules/animations.css
Normal file
112
web_src/css/modules/animations.css
Normal file
@@ -0,0 +1,112 @@
|
||||
@keyframes isloadingspin {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
pointer-events: none !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.is-loading > * {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.btn.is-loading > *,
|
||||
.btn-octicon.is-loading > *,
|
||||
.button.is-loading > * {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.is-loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: var(--loading-size, min(4em, 66.6%));
|
||||
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: isloadingspin 1000ms infinite linear;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
|
||||
border-radius: var(--border-radius-full);
|
||||
}
|
||||
|
||||
.is-loading.loading-icon-2px::after {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.is-loading.loading-icon-3px::after {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
|
||||
form.single-button-form.is-loading > * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
form.single-button-form.is-loading .button {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.markup pre.is-loading,
|
||||
.editor-loading.is-loading {
|
||||
height: var(--height-loading);
|
||||
}
|
||||
|
||||
.markup .is-loading > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markup .is-loading {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* TODO: not needed, use "is-loading loading-icon-2px" instead */
|
||||
code.language-math.is-loading::after {
|
||||
padding: 0;
|
||||
border-width: 2px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
|
||||
@keyframes pulse-1p5 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* pulse animation for scale(1.5) in 200ms */
|
||||
.pulse-1p5-200 {
|
||||
animation: pulse-1p5 200ms linear;
|
||||
}
|
||||
|
||||
.rotate-clockwise {
|
||||
animation: rotate-clockwise-keyframes 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate-clockwise-keyframes {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
11
web_src/css/modules/breadcrumb.css
Normal file
11
web_src/css/modules/breadcrumb.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumb-divider {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
358
web_src/css/modules/button.css
Normal file
358
web_src/css/modules/button.css
Normal file
@@ -0,0 +1,358 @@
|
||||
.ui.button {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
outline: none;
|
||||
font-family: var(--fonts-regular);
|
||||
margin: 0 0.25em 0 0;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: var(--border-radius);
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
justify-content: center;
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.button {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.button.hover-opaque:hover {
|
||||
/* ".ui.button:hover" uses alpha channel to "highlight", it doesn't work when the background is not body: the inherited color is not right
|
||||
for such case, use this opaque color */
|
||||
background: var(--color-hover-opaque);
|
||||
}
|
||||
|
||||
.ui.active.button,
|
||||
.ui.button:active,
|
||||
.ui.active.button:active,
|
||||
.ui.active.button:hover {
|
||||
background: var(--color-active);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.buttons .disabled.button:not(.basic),
|
||||
.ui.disabled.button,
|
||||
.ui.button:disabled,
|
||||
.ui.disabled.button:hover,
|
||||
.ui.disabled.active.button {
|
||||
cursor: default;
|
||||
opacity: var(--opacity-disabled) !important;
|
||||
background-image: none;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* there is no "ui labeled icon button" support" because it is not used */
|
||||
.ui.labeled.button:not(.icon) {
|
||||
flex-direction: row;
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
min-height: unset;
|
||||
}
|
||||
.ui.labeled.button > .button {
|
||||
margin: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.ui.labeled.button > .label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 -1px !important;
|
||||
font-size: 1em;
|
||||
border-color: var(--color-light-border);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.ui.labeled.button > .label:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
.ui.labeled.button > .button:hover + .label {
|
||||
border-left-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.button > .icon:not(.button) {
|
||||
height: auto;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
|
||||
margin: 0 0.42857143em 0 -0.21428571em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
|
||||
.ui.button { /* stylelint-disable-line no-duplicate-selectors -- deliberate second block for the reference sizes */
|
||||
gap: var(--gap-block);
|
||||
min-height: 38px;
|
||||
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
|
||||
}
|
||||
.ui.compact.buttons .button,
|
||||
.ui.compact.button {
|
||||
gap: var(--gap-inline);
|
||||
padding: 6px 15px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.compact.icon.buttons .button,
|
||||
.ui.compact.icon.button {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
|
||||
.ui.ui.ui.ui.mini.button {
|
||||
gap: var(--gap-inline);
|
||||
font-size: 11px;
|
||||
min-height: 30px;
|
||||
}
|
||||
.ui.ui.ui.ui.mini.button.compact {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
|
||||
.ui.tiny.buttons .dropdown,
|
||||
.ui.tiny.buttons .dropdown .menu > .item,
|
||||
.ui.tiny.buttons .button,
|
||||
.ui.ui.ui.ui.tiny.button {
|
||||
gap: var(--gap-inline);
|
||||
font-size: 12px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.ui.ui.ui.tiny.button.compact {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
|
||||
.ui.small.buttons .dropdown,
|
||||
.ui.small.buttons .dropdown .menu > .item,
|
||||
.ui.small.buttons .button,
|
||||
.ui.ui.ui.ui.small.button {
|
||||
font-size: 13px;
|
||||
min-height: 34px;
|
||||
}
|
||||
.ui.ui.ui.ui.small.button.compact {
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.ui.icon.buttons .button,
|
||||
.ui.icon.button:not(.compact) {
|
||||
padding: 0.57em;
|
||||
}
|
||||
.ui.icon.buttons .button > .icon,
|
||||
.ui.icon.button > .icon {
|
||||
margin: 0 !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.basic.button {
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text-light);
|
||||
background: var(--color-button);
|
||||
}
|
||||
|
||||
.ui.basic.button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.button:active,
|
||||
.ui.basic.active.button,
|
||||
.ui.basic.active.button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.fluid.button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.ui.primary.button:active,
|
||||
.ui.primary.buttons .button:active {
|
||||
background: var(--color-primary-active);
|
||||
}
|
||||
|
||||
.ui.basic.primary.button {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.primary.button:hover {
|
||||
color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.ui.basic.primary.button:active {
|
||||
color: var(--color-primary-active);
|
||||
border-color: var(--color-primary-active);
|
||||
}
|
||||
|
||||
.ui.red.button,
|
||||
.ui.red.buttons .button {
|
||||
color: var(--color-white);
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.red.button:hover,
|
||||
.ui.red.buttons .button:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.red.button:active,
|
||||
.ui.red.buttons .button:active {
|
||||
background: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.red.button {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.red.button:hover {
|
||||
color: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.red.button:active {
|
||||
color: var(--color-red-dark-2);
|
||||
border-color: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
.ui.green.button {
|
||||
color: var(--color-white);
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.green.button:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.green.button:active {
|
||||
background: var(--color-green-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.green.button {
|
||||
color: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.green.button:hover {
|
||||
color: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.green.button:active {
|
||||
color: var(--color-green-dark-2);
|
||||
border-color: var(--color-green-dark-2);
|
||||
}
|
||||
|
||||
.ui.buttons {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
font-size: 0;
|
||||
vertical-align: baseline;
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
|
||||
|
||||
.btn {
|
||||
background: transparent;
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:active {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.btn,
|
||||
a.btn:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn.tiny {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
|
||||
And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
|
||||
It needs some tricks to tweak the left/right borders with active state */
|
||||
|
||||
.ui.buttons .button {
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ui.buttons .button:first-child {
|
||||
border-left: none;
|
||||
margin-left: 0;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
.ui.buttons .button:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.buttons .button:hover {
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.buttons .button:hover + .button {
|
||||
border-left: 1px solid var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
|
||||
.ui.buttons .button:first-child,
|
||||
.ui.buttons .button.tw-hidden:first-child + .button {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button:last-child,
|
||||
.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
|
||||
border-right: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button.active {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
border-right: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button.active + .button {
|
||||
border-left: none;
|
||||
}
|
||||
107
web_src/css/modules/card.css
Normal file
107
web_src/css/modules/card.css
Normal file
@@ -0,0 +1,107 @@
|
||||
/* Below styles are a subset of the full fomantic card styles which are */
|
||||
/* needed to get all current uses of fomantic cards working. */
|
||||
/* TODO: remove all these styles and use custom styling instead */
|
||||
|
||||
.ui.card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.card:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.cards > .card,
|
||||
.ui.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
width: 290px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
box-shadow: none;
|
||||
overflow-wrap: break-word;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.ui.cards {
|
||||
display: flex;
|
||||
margin: -0.875em -0.5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui.cards > .card {
|
||||
display: flex;
|
||||
margin: 0.875em 0.5em;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content,
|
||||
.ui.card > .content {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
max-width: 100%;
|
||||
padding: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header + .description,
|
||||
.ui.card > .content > .header + .description {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header:not(.ui),
|
||||
.ui.card > .content > .header:not(.ui) {
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 1.28571429em;
|
||||
margin-top: -.21425em;
|
||||
line-height: 1.28571429;
|
||||
}
|
||||
|
||||
.ui.card > .content:first-child {
|
||||
border-top: none;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
.ui.cards > .card > :last-child,
|
||||
.ui.card > :last-child {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.card > :only-child {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.ui.card > .extra,
|
||||
.ui.cards > .card > .extra a:not(.ui),
|
||||
.ui.card > .extra a:not(.ui) {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.card > .extra a:not(.ui):hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header,
|
||||
.ui.card > .content > .header {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .description,
|
||||
.ui.card > .content > .description {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards a.card:hover,
|
||||
a.ui.card:hover {
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-card);
|
||||
}
|
||||
|
||||
.ui.card > .extra {
|
||||
color: var(--color-text);
|
||||
border-top-color: var(--color-secondary-light-1) !important;
|
||||
}
|
||||
55
web_src/css/modules/charescape.css
Normal file
55
web_src/css/modules/charescape.css
Normal file
@@ -0,0 +1,55 @@
|
||||
/*
|
||||
Show the escaped and hide the real char:
|
||||
<span class="broken-code-point" data-escaped="␡"><span class="char">{real-char}</span></span>
|
||||
Only show the real-char:
|
||||
<span class="broken-code-point">{real-char}</span>
|
||||
*/
|
||||
.broken-code-point:not([data-escaped]) {
|
||||
border-radius: 4px;
|
||||
padding: 0 2px;
|
||||
border: 1px var(--color-yellow) solid;
|
||||
}
|
||||
|
||||
.broken-code-point[data-escaped] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.broken-code-point[data-escaped]::before {
|
||||
visibility: visible;
|
||||
content: attr(data-escaped);
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
border: 1px var(--color-yellow) solid;
|
||||
}
|
||||
|
||||
.broken-code-point[data-escaped] .char {
|
||||
/* keep the original character selectable/copyable while showing the escaped label via ::before */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Show the escaped and hide the real-char:
|
||||
<span class="unicode-escaped">
|
||||
<span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
|
||||
</span>
|
||||
Hide the escaped and show the real-char:
|
||||
<span>
|
||||
<span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
|
||||
</span>
|
||||
*/
|
||||
.unicode-escaped .escaped-code-point[data-escaped]::before {
|
||||
visibility: visible;
|
||||
content: attr(data-escaped);
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
.unicode-escaped .escaped-code-point .char {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.unicode-escaped .ambiguous-code-point {
|
||||
border: 1px var(--color-yellow) solid;
|
||||
}
|
||||
206
web_src/css/modules/checkbox.css
Normal file
206
web_src/css/modules/checkbox.css
Normal file
@@ -0,0 +1,206 @@
|
||||
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 50%;
|
||||
background: var(--color-input-background);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
background: var(--color-white);
|
||||
border: 4px solid var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
display: inline-grid;
|
||||
place-content: center;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 3px;
|
||||
background: var(--color-input-background);
|
||||
overflow: hidden;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
content: "";
|
||||
background: var(--color-white);
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
clip-path: inset(var(--checkbox-size) 0 0 0);
|
||||
mask-image: var(--checkbox-mask-checked);
|
||||
mask-size: 75%;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="checkbox"]:indeterminate {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
clip-path: inset(0);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled:checked,
|
||||
input[type="checkbox"]:disabled:indeterminate {
|
||||
background: var(--color-secondary-dark-4);
|
||||
border-color: var(--color-secondary-dark-4);
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled:checked {
|
||||
border-color: var(--color-secondary-dark-4);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:indeterminate::before {
|
||||
clip-path: inset(0);
|
||||
mask-image: var(--checkbox-mask-indeterminate);
|
||||
mask-size: 75%;
|
||||
}
|
||||
|
||||
.ui.checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
min-height: var(--checkbox-size);
|
||||
line-height: var(--checkbox-size);
|
||||
min-width: var(--checkbox-size);
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.ui.checkbox input[type="checkbox"],
|
||||
.ui.checkbox input[type="radio"] {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
.ui.checkbox label {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.checkbox label,
|
||||
.ui.radio.checkbox label {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.ui.checkbox + label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.disabled.checkbox input,
|
||||
.ui.disabled.checkbox label,
|
||||
.ui.checkbox input[disabled] ~ label {
|
||||
cursor: default !important;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.radio.checkbox {
|
||||
min-height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
/* "switch" styled checkbox */
|
||||
|
||||
.ui.toggle.checkbox {
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
.ui.toggle.checkbox input {
|
||||
width: 3.5rem;
|
||||
height: 21px;
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
.ui.toggle.checkbox label {
|
||||
min-height: 1.5rem;
|
||||
padding-left: 4.5rem;
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
.ui.toggle.checkbox label::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 49px;
|
||||
height: 21px;
|
||||
border-radius: 500rem;
|
||||
left: 0;
|
||||
}
|
||||
.ui.toggle.checkbox label::after {
|
||||
background: var(--color-white);
|
||||
box-shadow: 1px 1px 4px 1px var(--color-shadow);
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 1.5px;
|
||||
left: 1.5px;
|
||||
border-radius: 500rem;
|
||||
transition: background 0.3s ease, left 0.3s ease;
|
||||
}
|
||||
.ui.toggle.checkbox input ~ label::after {
|
||||
left: 1.5px;
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::after {
|
||||
left: 29px;
|
||||
}
|
||||
.ui.toggle.checkbox input:focus ~ label::before,
|
||||
.ui.toggle.checkbox label::before {
|
||||
background: var(--color-input-toggle-background);
|
||||
}
|
||||
.ui.toggle.checkbox label,
|
||||
.ui.toggle.checkbox input:checked ~ label,
|
||||
.ui.toggle.checkbox input:focus:checked ~ label {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::before,
|
||||
.ui.toggle.checkbox input:focus:checked ~ label::before {
|
||||
background: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="checkbox"]:indeterminate {
|
||||
background: CanvasText;
|
||||
border-color: CanvasText;
|
||||
}
|
||||
input[type="checkbox"]:disabled:checked,
|
||||
input[type="checkbox"]:disabled:indeterminate {
|
||||
background: GrayText;
|
||||
border-color: GrayText;
|
||||
}
|
||||
input[type="radio"]:disabled:checked {
|
||||
border-color: GrayText;
|
||||
}
|
||||
.ui.toggle.checkbox label::before {
|
||||
outline: 1px solid CanvasText;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.ui.toggle.checkbox label::after {
|
||||
background: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
label.gt-checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.ui.form .field > label.gt-checkbox {
|
||||
display: flex;
|
||||
}
|
||||
79
web_src/css/modules/chroma.css
Normal file
79
web_src/css/modules/chroma.css
Normal file
@@ -0,0 +1,79 @@
|
||||
/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
|
||||
|
||||
/* structural */
|
||||
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
||||
.chroma .hl { display: block; width: 100%; }
|
||||
.chroma .lnt { margin-right: 0.4em; padding: 0 0.4em; }
|
||||
.chroma .ln { margin-right: 0.4em; padding: 0 0.4em; }
|
||||
|
||||
/* tokens */
|
||||
.chroma .bp { color: var(--color-syntax-name-pseudo); } /* NameBuiltinPseudo */
|
||||
.chroma .c { color: var(--color-syntax-comment); } /* Comment */
|
||||
.chroma .c1 { color: var(--color-syntax-comment); } /* CommentSingle */
|
||||
.chroma .ch { color: var(--color-syntax-comment); } /* CommentHashbang */
|
||||
.chroma .cm { color: var(--color-syntax-comment); } /* CommentMultiline */
|
||||
.chroma .cp { color: var(--color-syntax-preproc); } /* CommentPreproc */
|
||||
.chroma .cpf { color: var(--color-syntax-preproc-file); } /* CommentPreprocFile */
|
||||
.chroma .cs { color: var(--color-syntax-comment-special); } /* CommentSpecial */
|
||||
.chroma .dl { color: var(--color-syntax-string); } /* LiteralStringDelimiter */
|
||||
.chroma .gd { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-deleted-bg); } /* GenericDeleted */
|
||||
.chroma .ge { color: var(--color-syntax-emph); } /* GenericEmph */
|
||||
.chroma .gh { color: var(--color-syntax-heading); } /* GenericHeading */
|
||||
.chroma .gi { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-inserted-bg); } /* GenericInserted */
|
||||
.chroma .gl { text-decoration: underline; } /* GenericUnderline */
|
||||
.chroma .go { color: var(--color-syntax-output); } /* GenericOutput */
|
||||
.chroma .gp { color: var(--color-syntax-prompt); } /* GenericPrompt */
|
||||
.chroma .gr { color: var(--color-syntax-invalid); } /* GenericError */
|
||||
.chroma .gs { color: var(--color-syntax-strong); font-weight: var(--font-weight-semibold); } /* GenericStrong */
|
||||
.chroma .gt { color: var(--color-syntax-traceback); } /* GenericTraceback */
|
||||
.chroma .gu { color: var(--color-syntax-subheading); } /* GenericSubheading */
|
||||
.chroma .il { color: var(--color-syntax-number); } /* LiteralNumberIntegerLong */
|
||||
.chroma .k { color: var(--color-syntax-keyword); } /* Keyword */
|
||||
.chroma .kc { color: var(--color-syntax-bool); } /* KeywordConstant */
|
||||
.chroma .kd { color: var(--color-syntax-keyword); } /* KeywordDeclaration */
|
||||
.chroma .kn { color: var(--color-syntax-control); } /* KeywordNamespace */
|
||||
.chroma .kp { color: var(--color-syntax-keyword); } /* KeywordPseudo */
|
||||
.chroma .kr { color: var(--color-syntax-keyword); } /* KeywordReserved */
|
||||
.chroma .kt { color: var(--color-syntax-type); } /* KeywordType */
|
||||
.chroma .m { color: var(--color-syntax-number); } /* LiteralNumber */
|
||||
.chroma .mb { color: var(--color-syntax-number); } /* LiteralNumberBin */
|
||||
.chroma .mf { color: var(--color-syntax-number); } /* LiteralNumberFloat */
|
||||
.chroma .mh { color: var(--color-syntax-number); } /* LiteralNumberHex */
|
||||
.chroma .mi { color: var(--color-syntax-number); } /* LiteralNumberInteger */
|
||||
.chroma .mo { color: var(--color-syntax-number); } /* LiteralNumberOct */
|
||||
.chroma .n { color: var(--color-syntax-text); } /* Name */
|
||||
.chroma .na { color: var(--color-syntax-attribute); } /* NameAttribute */
|
||||
.chroma .nb { color: var(--color-syntax-name); } /* NameBuiltin */
|
||||
.chroma .nc { color: var(--color-syntax-type); } /* NameClass */
|
||||
.chroma .nd { color: var(--color-syntax-decorator); } /* NameDecorator */
|
||||
.chroma .ne { color: var(--color-syntax-keyword); } /* NameException */
|
||||
.chroma .nf { color: var(--color-syntax-name); } /* NameFunction */
|
||||
.chroma .ni { color: var(--color-syntax-entity); } /* NameEntity */
|
||||
.chroma .nl { color: var(--color-syntax-keyword); } /* NameLabel */
|
||||
.chroma .nn { color: var(--color-syntax-namespace); } /* NameNamespace */
|
||||
.chroma .no { color: var(--color-syntax-variable); } /* NameConstant */
|
||||
.chroma .nt { color: var(--color-syntax-tag); } /* NameTag */
|
||||
.chroma .nv { color: var(--color-syntax-variable); } /* NameVariable */
|
||||
.chroma .nx { color: var(--color-syntax-text-alt); } /* NameOther */
|
||||
.chroma .o { color: var(--color-syntax-operator); } /* Operator */
|
||||
.chroma .ow { color: var(--color-syntax-operator); } /* OperatorWord */
|
||||
.chroma .p { color: var(--color-syntax-punctuation); } /* Punctuation */
|
||||
.chroma .s { color: var(--color-syntax-string); } /* LiteralString */
|
||||
.chroma .s1 { color: var(--color-syntax-string); } /* LiteralStringSingle */
|
||||
.chroma .s2 { color: var(--color-syntax-string); } /* LiteralStringDouble */
|
||||
.chroma .sa { color: var(--color-syntax-string-special); } /* LiteralStringAffix */
|
||||
.chroma .sb { color: var(--color-syntax-string); } /* LiteralStringBacktick */
|
||||
.chroma .sc { color: var(--color-syntax-string-special); } /* LiteralStringChar */
|
||||
.chroma .sd { color: var(--color-syntax-string); } /* LiteralStringDoc */
|
||||
.chroma .se { color: var(--color-syntax-escape); } /* LiteralStringEscape */
|
||||
.chroma .sh { color: var(--color-syntax-string); } /* LiteralStringHeredoc */
|
||||
.chroma .si { color: var(--color-syntax-string-special); } /* LiteralStringInterpol */
|
||||
.chroma .sr { color: var(--color-syntax-regexp); } /* LiteralStringRegex */
|
||||
.chroma .ss { color: var(--color-syntax-escape); } /* LiteralStringSymbol */
|
||||
.chroma .sx { color: var(--color-syntax-string); } /* LiteralStringOther */
|
||||
.chroma .vc { color: var(--color-syntax-variable); } /* NameVariableClass */
|
||||
.chroma .vg { color: var(--color-syntax-variable); } /* NameVariableGlobal */
|
||||
.chroma .vi { color: var(--color-syntax-variable); } /* NameVariableInstance */
|
||||
.chroma .w { color: var(--color-syntax-whitespace); } /* TextWhitespace */
|
||||
.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
|
||||
552
web_src/css/modules/codeeditor.css
Normal file
552
web_src/css/modules/codeeditor.css
Normal file
@@ -0,0 +1,552 @@
|
||||
.code-editor-options {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editor-loading {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-loading.is-loading {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.code-editor-container {
|
||||
position: relative; /* for command panel */
|
||||
background-color: var(--color-code-bg); /* fully colorize the container and editor */
|
||||
}
|
||||
|
||||
.ui.bottom.attached.segment .code-editor-container,
|
||||
.ui.bottom.attached.segment .code-editor-container .cm-scroller {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius); /* avoid overflow parent's border with radius */
|
||||
}
|
||||
|
||||
/* editor layout */
|
||||
.code-editor-container .cm-editor {
|
||||
color: var(--color-text);
|
||||
font-family: var(--fonts-monospace);
|
||||
font-size: 12px;
|
||||
/* it was written as "min-height: 90vh; max-height: 90vh", so maybe the author prefer to always use about 90vh.
|
||||
here, minus 80px to keep spaces for the top toolbar */
|
||||
height: max(200px, calc(95vh - 80px));
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused {
|
||||
outline: none; /* don't show the default focus outline when the editor gets focused */
|
||||
}
|
||||
|
||||
.code-editor-container .cm-content {
|
||||
caret-color: var(--color-caret);
|
||||
padding: 0; /* avoid the small top and bottom padding */
|
||||
}
|
||||
|
||||
.code-editor-container .cm-cursor,
|
||||
.code-editor-container .cm-dropCursor {
|
||||
border-left-color: var(--color-caret);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
|
||||
.code-editor-container .cm-selectionBackground {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panels {
|
||||
background-color: var(--color-body);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary);
|
||||
font-family: var(--fonts-regular);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search::after {
|
||||
content: "";
|
||||
flex-basis: 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search .cm-textfield {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search br + input.cm-textfield,
|
||||
.code-editor-container .cm-panel.cm-search br + input.cm-textfield ~ * {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search input,
|
||||
.code-editor-container .cm-panel.cm-search button,
|
||||
.code-editor-container .cm-panel.cm-search label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search .cm-button + label,
|
||||
.code-editor-container .cm-panel.cm-search label + label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor .cm-panel button[name="close"] {
|
||||
font-size: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--octicon-x);
|
||||
mask-size: cover;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search button[name="close"] {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor .cm-panel button[name="close"]:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-activeLine,
|
||||
.code-editor-container .cm-activeLineGutter {
|
||||
background-color: var(--color-editor-line-highlight);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters {
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-secondary-dark-6);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters .cm-lineNumbers .cm-gutterElement {
|
||||
min-width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldGutter .cm-gutterElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldGutter .cm-gutterElement svg {
|
||||
color: var(--color-text-light-2);
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters:hover .cm-foldGutter .cm-gutterElement svg {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldGutter .cm-gutterElement:hover svg {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters .cm-lineNumbers .cm-activeLineGutter {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor .cm-line ::selection,
|
||||
.code-editor-container .cm-editor .cm-line::selection {
|
||||
color: currentcolor;
|
||||
background-color: var(--color-editor-selection);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldPlaceholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-light-2);
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
padding: 0 1px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldPlaceholder:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-searchMatch {
|
||||
background-color: var(--color-highlight-bg);
|
||||
outline: 1px solid var(--color-highlight-fg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-searchMatch-selected {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-selectionMatch {
|
||||
background-color: var(--color-highlight-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip {
|
||||
background-color: var(--color-body);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-completionIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
padding-right: 4px;
|
||||
color: var(--color-text-light);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip-autocomplete ul li[aria-selected] {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-completionMatchedText {
|
||||
text-decoration: none;
|
||||
color: var(--color-primary-dark-1);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-placeholder {
|
||||
color: var(--color-placeholder-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-button {
|
||||
background-image: none;
|
||||
background-color: var(--color-button);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-button:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-textfield {
|
||||
background-color: var(--color-input-background);
|
||||
color: var(--color-input-text);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--border-radius);
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-textfield:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-specialChar {
|
||||
color: var(--color-syntax-invalid);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-trailingSpace {
|
||||
background-color: var(--color-error-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-activeLine .cm-trailingSpace {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.code-editor-container.cm-mod-held .cm-url {
|
||||
text-decoration: underline dotted var(--color-syntax-link);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused .cm-matchingBracket {
|
||||
background-color: var(--color-syntax-matching-bracket-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused .cm-nonmatchingBracket {
|
||||
background-color: var(--color-syntax-nonmatching-bracket-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panels-top {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panels-bottom {
|
||||
border-top-color: var(--color-secondary);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-snippetField {
|
||||
background-color: var(--color-primary-alpha-10);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-snippetFieldPosition {
|
||||
border-left-color: var(--color-text-light-3);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip-autocomplete-disabled ul li[aria-selected] {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* command palette */
|
||||
|
||||
.cm-command-palette {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 301;
|
||||
width: 400px;
|
||||
max-width: min(calc(100% - 16px), 90vw);
|
||||
background-color: var(--color-body);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
box-shadow: 0 4px 12px var(--color-shadow);
|
||||
font-family: var(--fonts-regular);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.cm-command-palette-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 6px !important;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-input-background);
|
||||
color: var(--color-input-text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cm-command-palette-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.cm-command-palette-list {
|
||||
position: relative;
|
||||
max-height: calc(8 * 24px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cm-command-palette-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-command-palette-item[aria-selected="true"] {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
}
|
||||
|
||||
.cm-command-palette-empty {
|
||||
color: var(--color-text-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cm-command-palette-label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cm-command-palette-label mark {
|
||||
background: none;
|
||||
color: var(--color-primary-dark-1);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.cm-command-palette-keys {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutter-lint {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutter-lint .cm-gutterElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lint-marker-error {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-red);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lint-marker-warning {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintRange-error {
|
||||
background-image: none;
|
||||
text-decoration: wavy underline var(--color-red);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintRange-warning {
|
||||
background-image: none;
|
||||
text-decoration: wavy underline var(--color-yellow);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintPoint-error::after {
|
||||
border-bottom-color: var(--color-red);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintPoint-warning::after {
|
||||
border-bottom-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip-lint {
|
||||
background-color: var(--color-body);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-panel-lint button[name="close"] {
|
||||
top: 4px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-panel-lint ul {
|
||||
max-height: 120px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-panel-lint [aria-selected] {
|
||||
background-color: var(--color-primary-alpha-30) !important;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-diagnostic.cm-diagnostic-error {
|
||||
border-left-color: var(--color-red);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-diagnostic.cm-diagnostic-warning {
|
||||
border-left-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
/* syntax highlighting classes from @lezer/highlight classHighlighter */
|
||||
.code-editor-container .tok-keyword,
|
||||
.code-editor-container .tok-atom { color: var(--color-syntax-keyword); }
|
||||
.code-editor-container .tok-bool { color: var(--color-syntax-bool); }
|
||||
.code-editor-container .tok-variableName { color: var(--color-syntax-variable); }
|
||||
.code-editor-container .tok-variableName2 { color: var(--color-syntax-keyword); }
|
||||
.code-editor-container .tok-propertyName { color: var(--color-syntax-property); }
|
||||
.code-editor-container .tok-typeName,
|
||||
.code-editor-container .tok-className { color: var(--color-syntax-type); }
|
||||
.code-editor-container .tok-namespace { color: var(--color-syntax-namespace); }
|
||||
.code-editor-container .tok-macroName { color: var(--color-syntax-name); }
|
||||
.code-editor-container .tok-labelName { color: var(--color-syntax-name); }
|
||||
.code-editor-container .tok-number { color: var(--color-syntax-number); }
|
||||
.code-editor-container .tok-string { color: var(--color-syntax-string); }
|
||||
.code-editor-container .tok-string2 { color: var(--color-syntax-regexp); }
|
||||
.code-editor-container .tok-operator { color: var(--color-syntax-operator); }
|
||||
.code-editor-container .tok-punctuation { color: var(--color-syntax-punctuation); }
|
||||
.code-editor-container .tok-comment { color: var(--color-syntax-comment); }
|
||||
.code-editor-container .tok-meta { color: var(--color-syntax-preproc); }
|
||||
.code-editor-container .tok-invalid { color: var(--color-syntax-invalid); }
|
||||
.code-editor-container .tok-link { color: var(--color-syntax-link); }
|
||||
.code-editor-container .tok-heading { color: var(--color-syntax-heading); }
|
||||
.code-editor-container .tok-emphasis { color: var(--color-syntax-emph); font-style: italic; }
|
||||
.code-editor-container .tok-strong { font-weight: var(--font-weight-bold); }
|
||||
.code-editor-container .tok-inserted { color: var(--color-syntax-string); }
|
||||
.code-editor-container .tok-deleted { color: var(--color-syntax-invalid); }
|
||||
|
||||
/* language-specific overrides */
|
||||
.code-editor-container[data-language="json"] .tok-propertyName,
|
||||
.code-editor-container[data-language="json5"] .tok-propertyName,
|
||||
.code-editor-container[data-language="yaml"] .tok-propertyName { color: var(--color-syntax-tag); }
|
||||
.code-editor-container[data-language="css"] .tok-propertyName { color: var(--color-syntax-name); }
|
||||
.code-editor-container[data-language="html"] .tok-propertyName,
|
||||
.code-editor-container[data-language="xml"] .tok-propertyName { color: var(--color-syntax-attribute); }
|
||||
|
||||
/* context menu — uses tippy "menu" theme for base styling */
|
||||
.cm-context-menu {
|
||||
min-width: 200px;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cm-context-menu .item {
|
||||
height: 24px !important;
|
||||
padding: 0 12px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-context-menu .item.disabled {
|
||||
color: var(--color-text-light-3);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cm-context-menu-keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: auto;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.cm-context-menu-separator {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 4px 0;
|
||||
}
|
||||
47
web_src/css/modules/comment.css
Normal file
47
web_src/css/modules/comment.css
Normal file
@@ -0,0 +1,47 @@
|
||||
/* These are the remnants of the fomantic comment module */
|
||||
/* TODO: remove all of these rules */
|
||||
|
||||
.ui.comments {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.ui.comments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.comments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: none;
|
||||
margin: 3px 0 0;
|
||||
padding: 0.5em 0 0;
|
||||
border: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.edit-content-zone .comment {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment .text {
|
||||
margin: 0.25em 0 0.5em;
|
||||
font-size: 1em;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.3;
|
||||
}
|
||||
39
web_src/css/modules/container.css
Normal file
39
web_src/css/modules/container.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.container {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - calc(2 * var(--page-margin-x)));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.container.medium-width {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.ui.message.site-banner-container {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#navbar + .ui.message.site-banner-container,
|
||||
.ui.message.site-banner-container + .ui.message.site-banner-container {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.message.site-banner-container > .site-banner-content {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - calc(2 * var(--page-margin-x)));
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.ui.message.site-banner-container > button.site-banner-close {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
}
|
||||
27
web_src/css/modules/dimmer.css
Normal file
27
web_src/css/modules/dimmer.css
Normal file
@@ -0,0 +1,27 @@
|
||||
/* These are the remnants of the fomantic dimmer module */
|
||||
|
||||
.ui.dimmer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
inset: 0;
|
||||
background: var(--color-overlay-backdrop);
|
||||
opacity: 0;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
animation-name: fadein;
|
||||
animation-duration: .2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui.active.dimmer {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.dimmer > .ui.modal {
|
||||
position: static;
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
46
web_src/css/modules/divider.css
Normal file
46
web_src/css/modules/divider.css
Normal file
@@ -0,0 +1,46 @@
|
||||
.divider {
|
||||
margin: 10px 0;
|
||||
height: 0;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h4.divider {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.divider:not(.divider-text) {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.divider.divider-text::before,
|
||||
.divider.divider-text::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text::before {
|
||||
margin-right: .75em;
|
||||
}
|
||||
|
||||
.divider.divider-text::after {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.inline-divider {
|
||||
display: inline-block;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
margin: 0 var(--gap-inline);
|
||||
}
|
||||
939
web_src/css/modules/dropdown.css
Normal file
939
web_src/css/modules/dropdown.css
Normal file
@@ -0,0 +1,939 @@
|
||||
/* These are the remnants of the fomantic dropdown module */
|
||||
|
||||
.ui.dropdown {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu {
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
display: none;
|
||||
outline: none;
|
||||
top: 100%;
|
||||
min-width: max-content;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--color-menu);
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
z-index: 11;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.dropdown > input:not(.search):first-child,
|
||||
.ui.dropdown > select {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.dropdown > .dropdown.icon {
|
||||
line-height: 1;
|
||||
height: 1em;
|
||||
width: auto;
|
||||
backface-visibility: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.labeled) > .dropdown.icon {
|
||||
position: relative;
|
||||
width: auto;
|
||||
font-size: 0.85714286em;
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.ui.dropdown > .text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border: none;
|
||||
height: auto;
|
||||
min-height: 2.57142857rem;
|
||||
text-align: left;
|
||||
border-top: none;
|
||||
line-height: var(--line-height-default);
|
||||
font-size: 1rem;
|
||||
color: var(--color-text);
|
||||
padding: 0.78571429rem 1.14285714rem !important;
|
||||
text-transform: none;
|
||||
font-weight: var(--font-weight-normal);
|
||||
box-shadow: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .hidden { /* for hidden items and dividers */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .header {
|
||||
margin: 1rem 0 0.75rem;
|
||||
padding: 0 1.14285714rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .header:not(.ui) {
|
||||
color: var(--color-text);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .divider {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
height: 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.ui.dropdown.dropdown .menu > .input {
|
||||
width: auto;
|
||||
display: flex;
|
||||
margin: 1.14285714rem 0.78571429rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .header + .input {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .input:not(.transparent) input {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .input:not(.transparent) .button,
|
||||
.ui.dropdown .menu > .input:not(.transparent) i.icon,
|
||||
.ui.dropdown .menu > .input:not(.transparent) .label {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.ui.dropdown > .text > .description,
|
||||
.ui.dropdown .menu > .item > .description {
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .message {
|
||||
padding: 0.78571429rem 1.14285714rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .message:not(.ui) {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
/* Remove Menu Item Divider */
|
||||
.ui.menu .ui.dropdown .menu > .item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Prevent Menu Item Border */
|
||||
.ui.menu .ui.dropdown .menu .active.item {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
/* Automatically float dropdown menu right on last menu item */
|
||||
.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.button.dropdown .menu {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
select.ui.dropdown {
|
||||
height: 38px;
|
||||
padding: 0.5em;
|
||||
border: 1px solid var(--color-input-border);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown {
|
||||
cursor: pointer;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1em;
|
||||
white-space: normal;
|
||||
outline: 0;
|
||||
transform: rotateZ(0deg);
|
||||
min-width: 14em;
|
||||
min-height: 2.71428571em;
|
||||
background: var(--color-input-background);
|
||||
display: inline-block;
|
||||
padding: 0.78571429em 3.2em 0.78571429em 1em;
|
||||
color: var(--color-input-text);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown.visible,
|
||||
.ui.selection.dropdown.active {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown > .dropdown.icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1.21428571em;
|
||||
top: 0.78571429em;
|
||||
right: 1em;
|
||||
z-index: 3;
|
||||
margin: -0.78571429em;
|
||||
padding: 0.91666667em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
border-top-width: 0 !important;
|
||||
outline: none;
|
||||
margin: 0 -1px;
|
||||
min-width: calc(100% + 2px);
|
||||
width: calc(100% + 2px);
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu::after,
|
||||
.ui.selection.dropdown .menu::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu > .message {
|
||||
padding: 0.78571429rem 1.14285714rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 8.01428571rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 10.68571429rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 16.02857143rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 21.37142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu > .item {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
padding: 0.78571429rem 1.14285714rem !important;
|
||||
white-space: normal;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu .item:first-of-type {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu > .hidden.addition.item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown .menu {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.dropdown:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown:focus .menu {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.visible.dropdown > .text:not(.default) {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown:hover .menu {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.active.selection.dropdown > .dropdown.icon,
|
||||
.ui.visible.selection.dropdown > .dropdown.icon {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.ui.active.empty.selection.dropdown {
|
||||
border-radius: 0.28571429rem !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.active.empty.selection.dropdown .menu {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.search.dropdown > input.search {
|
||||
background: none transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
cursor: text;
|
||||
top: 0;
|
||||
left: 1px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: inherit;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ui.search.dropdown > .text {
|
||||
cursor: text;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.ui.search.selection.dropdown > input.search {
|
||||
line-height: 1.21428571em;
|
||||
padding: 0.67857143em 3.2em 0.67857143em 1em;
|
||||
}
|
||||
|
||||
.ui.search.selection.dropdown > span.sizer {
|
||||
line-height: 1.21428571em;
|
||||
padding: 0.67857143em 3.2em 0.67857143em 1em;
|
||||
display: none;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.ui.search.dropdown.active > input.search,
|
||||
.ui.search.dropdown.visible > input.search {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.ui.search.dropdown.active > .text,
|
||||
.ui.search.dropdown.visible > .text {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.active.search.dropdown input.search:focus + .text i.icon {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.active.search.dropdown input.search:focus + .text {
|
||||
color: var(--color-placeholder-text) !important;
|
||||
}
|
||||
|
||||
.ui.search.dropdown .menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 8.01428571rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 10.68571429rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 16.02857143rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 21.37142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.dropdown > .remove.icon {
|
||||
cursor: pointer;
|
||||
font-size: 0.85714286em;
|
||||
margin: -0.78571429em;
|
||||
padding: 0.91666667em;
|
||||
right: 3em;
|
||||
top: 0.78571429em;
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.ui.clearable.dropdown .text,
|
||||
.ui.clearable.dropdown a:last-of-type {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.ui.dropdown select.noselection ~ .remove.icon,
|
||||
.ui.dropdown input[value=""] ~ .remove.icon,
|
||||
.ui.dropdown input:not([value]) ~ .remove.icon,
|
||||
.ui.dropdown.loading > .remove.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.ui.multiple.dropdown {
|
||||
padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown .menu {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label {
|
||||
white-space: normal;
|
||||
font-size: 1em;
|
||||
padding: 0.35714286em 0.78571429em;
|
||||
margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
|
||||
box-shadow: 0 0 0 1px var(--color-secondary) inset;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label img {
|
||||
width: auto;
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.ui.multiple.dropdown > .text {
|
||||
position: static;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
margin: 0.45238095em 0 0.45238095em 0.64285714em;
|
||||
line-height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .text.default {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label ~ input.search {
|
||||
margin-left: 0.14285714em !important;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label ~ .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown,
|
||||
.ui.multiple.search.dropdown > input.search {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown > .text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: inherit;
|
||||
margin: 0.45238095em 0 0.45238095em 0.64285714em;
|
||||
line-height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown > .label ~ .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown > input.search {
|
||||
position: static;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
margin: 0.45238095em 0 0.45238095em 0.64285714em;
|
||||
width: 2.2em;
|
||||
line-height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .active.item {
|
||||
background: var(--color-active);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text);
|
||||
box-shadow: none;
|
||||
z-index: 12;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
z-index: 13;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item:active {
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.button) > .default.text {
|
||||
color: var(--color-placeholder-text);
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.button) > input:focus ~ .default.text {
|
||||
color: var(--color-placeholder-text);
|
||||
}
|
||||
|
||||
.ui.loading.dropdown > i.icon {
|
||||
height: 1em !important;
|
||||
}
|
||||
|
||||
.ui.loading.selection.dropdown > i.icon {
|
||||
padding: 1.5em 1.28571429em !important;
|
||||
}
|
||||
|
||||
.ui.loading.dropdown > i.icon::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -0.64285714em 0 0 -0.64285714em;
|
||||
width: 1.28571429em;
|
||||
height: 1.28571429em;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.loading.dropdown > i.icon::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
margin: -0.64285714em 0 0 -0.64285714em;
|
||||
width: 1.28571429em;
|
||||
height: 1.28571429em;
|
||||
animation: loader 0.6s infinite linear;
|
||||
border: 0.2em solid var(--color-text-light-2);
|
||||
border-radius: 500rem;
|
||||
}
|
||||
|
||||
.ui.dropdown .loading.menu {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.ui.dropdown > .loading.menu {
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
.ui.dropdown > .menu .loading.menu {
|
||||
left: 100% !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .selected.item {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.dropdown > .filtered.text {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.dropdown .filtered.item {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.disabled.dropdown,
|
||||
.ui.dropdown .menu > .disabled.item {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.dropdown > .left.menu {
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.upward.dropdown > .menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.upward.selection.dropdown .menu {
|
||||
border-top-width: 1px !important;
|
||||
border-bottom-width: 0 !important;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.upward.selection.dropdown:hover {
|
||||
box-shadow: 0 0 2px 0 var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.active.upward.selection.dropdown {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.upward.selection.dropdown.visible {
|
||||
box-shadow: 0 0 3px 0 var(--color-shadow);
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.upward.active.selection.dropdown:hover {
|
||||
box-shadow: 0 0 3px 0 var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.upward.active.selection.dropdown:hover .menu {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
min-width: 100% !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.ui.dropdown .scrolling.menu {
|
||||
position: static;
|
||||
overflow-y: auto;
|
||||
border: none;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
min-width: 100% !important;
|
||||
width: auto !important;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu .item.item.item,
|
||||
.ui.dropdown .scrolling.menu > .item.item.item {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu .item:first-child,
|
||||
.ui.dropdown .scrolling.menu .item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.dropdown > .animating.menu .scrolling.menu,
|
||||
.ui.dropdown > .visible.menu .scrolling.menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 10.28571429rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 15.42857143rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 20.57142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 20.57142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.fluid.dropdown {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.fluid.dropdown > .dropdown.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ui.floating.dropdown .menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
box-shadow: 0 6px 18px var(--color-shadow) !important;
|
||||
border-radius: 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.floating.dropdown > .menu {
|
||||
border-radius: 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui:not(.upward).floating.dropdown > .menu {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.ui.upward.floating.dropdown > .menu {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.ui.pointing.dropdown > .menu {
|
||||
top: 100%;
|
||||
margin-top: 0.78571429rem;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.pointing.dropdown > .menu:not(.hidden)::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
visibility: visible;
|
||||
transform: rotate(45deg);
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
box-shadow: -1px -1px 0 0 var(--color-secondary);
|
||||
background: var(--color-menu);
|
||||
z-index: 2;
|
||||
top: -0.25em;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -0.25em;
|
||||
}
|
||||
|
||||
.ui.top.right.pointing.dropdown > .menu {
|
||||
inset: 100% 0 auto auto;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
.ui.top.pointing.dropdown > .left.menu::after,
|
||||
.ui.top.right.pointing.dropdown > .menu::after {
|
||||
top: -0.25em;
|
||||
left: auto !important;
|
||||
right: 1em !important;
|
||||
margin: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.ui.dropdown,
|
||||
.ui.dropdown .menu > .item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.mini.dropdown,
|
||||
.ui.mini.dropdown .menu > .item {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
|
||||
.ui.tiny.dropdown,
|
||||
.ui.tiny.dropdown .menu > .item {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
|
||||
.ui.small.dropdown,
|
||||
.ui.small.dropdown .menu > .item {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
/* This rule must come AFTER .ui.selection.dropdown because both have
|
||||
specificity (0,3,0) and source order determines the winner.
|
||||
In the original codebase this was in base.css which loaded after fomantic. */
|
||||
.ui.dropdown:not(.button) {
|
||||
line-height: var(--line-height-default);
|
||||
}
|
||||
|
||||
/* Icons / Flags / Labels / Image */
|
||||
.ui.dropdown > .text > img,
|
||||
.ui.dropdown .menu > .item > img {
|
||||
margin: -0.25rem 0.78571429rem -0.25rem 0;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item > svg {
|
||||
margin-right: 0.78rem;
|
||||
}
|
||||
|
||||
/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
|
||||
.ui.dropdown > .text > .img {
|
||||
margin-left: 0;
|
||||
float: none;
|
||||
margin-right: 0.78571429rem;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .item {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .item:first-of-type {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .item:last-of-type {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
|
||||
.ui.ui.dropdown > .icon.icon {
|
||||
position: initial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .icon.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.ui.button.dropdown > .icon.icon,
|
||||
.ui.ui.selection.dropdown > .icon.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .dropdown.icon {
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .remove.icon {
|
||||
right: 2em;
|
||||
}
|
||||
|
||||
.ui.dropdown.mini.button,
|
||||
.ui.dropdown.tiny.button {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.ui.dropdown.button {
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
||||
.ui.multiple.selection.dropdown {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown.selection {
|
||||
min-width: 14em;
|
||||
}
|
||||
|
||||
.ui.dropdown .ui.label .svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.dropdown > .ui.button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* popover box shadow for menu dropdown */
|
||||
.ui.menu .dropdown.item .menu {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu.context-user-switch .scrolling.menu {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
max-width: 80vw;
|
||||
}
|
||||
|
||||
.scrolling.menu .item.selected {
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
}
|
||||
|
||||
/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content
|
||||
the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */
|
||||
.ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: var(--gap-block);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu.flex-items-menu > .item img,
|
||||
.ui.dropdown .menu.flex-items-menu > .item svg {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu.items-width-limit .item {
|
||||
max-width: min(500px, calc(100vw - 2em));
|
||||
}
|
||||
|
||||
.ui.dropdown.ellipsis-text-items {
|
||||
/* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown.ellipsis-text-items > .text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 2.71;
|
||||
}
|
||||
|
||||
.ui.dropdown.ellipsis-text-items .menu > .item {
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
33
web_src/css/modules/flexcontainer.css
Normal file
33
web_src/css/modules/flexcontainer.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* container for full-page content with sidebar on left */
|
||||
|
||||
.flex-container {
|
||||
display: flex !important;
|
||||
gap: var(--page-spacing);
|
||||
margin-top: var(--page-spacing);
|
||||
}
|
||||
|
||||
/* small options menu on the left, used in settings/admin pages */
|
||||
.flex-container-nav {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
/* wide sidebar on the right, used in frontpage */
|
||||
.flex-container-sidebar {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.flex-container-main {
|
||||
flex: 1;
|
||||
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-container-nav,
|
||||
.flex-container-sidebar {
|
||||
order: -1;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
413
web_src/css/modules/form.css
Normal file
413
web_src/css/modules/form.css
Normal file
@@ -0,0 +1,413 @@
|
||||
.ui.form {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ui.form > p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.ui.form .field {
|
||||
clear: both;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.ui.form .fields .fields,
|
||||
.ui.form .field:last-child,
|
||||
.ui.form .fields:last-child .field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.form .fields .field {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.form .field > label {
|
||||
display: block;
|
||||
margin: 0 0 0.28571429rem;
|
||||
color: var(--color-text);
|
||||
font-size: 0.92857143em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.form textarea,
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]) {
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.form ::-webkit-datetime-edit,
|
||||
.ui.form ::-webkit-inner-spin-button {
|
||||
height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.search > .prompt {
|
||||
font-family: var(--fonts-regular);
|
||||
margin: 0;
|
||||
outline: none;
|
||||
line-height: 1.21428571;
|
||||
padding: 0.67857143em 1em;
|
||||
font-size: 1em;
|
||||
color: var(--color-text);
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.form textarea {
|
||||
margin: 0;
|
||||
padding: 0.78571429em 1em;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
border-radius: 0.28571429rem;
|
||||
font-size: 1em;
|
||||
font-family: var(--fonts-regular);
|
||||
line-height: 1.2857;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ui.form textarea:not([rows]) {
|
||||
height: var(--min-height-textarea);
|
||||
min-height: var(--min-height-textarea);
|
||||
max-height: 24em;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
textarea,
|
||||
.ui.input > input,
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.form select,
|
||||
.ui.form textarea,
|
||||
.ui.selection.dropdown,
|
||||
.ui.search > .prompt {
|
||||
background: var(--color-input-background);
|
||||
border: 1px solid var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]):focus,
|
||||
textarea:focus,
|
||||
.ui.input input:focus,
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]):focus,
|
||||
.ui.form select:focus,
|
||||
.ui.form textarea:focus,
|
||||
.ui.search > .prompt:focus {
|
||||
background: var(--color-input-background);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.form input:not([type="checkbox"], [type="radio"])[readonly],
|
||||
.ui.form textarea[readonly],
|
||||
.ui.form select[readonly],
|
||||
.ui.form .ui.selection.dropdown[readonly] {
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
|
||||
.ui.input {
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.form textarea,
|
||||
.ui.form input[type="checkbox"] {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
.ui.form .field > .selection.dropdown {
|
||||
min-width: 14em; /* matches the default min width */
|
||||
width: 100%;
|
||||
}
|
||||
.ui.form .field > .selection.dropdown > .dropdown.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ui.form .inline.field > .selection.dropdown {
|
||||
width: auto;
|
||||
}
|
||||
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ui.form .field .ui.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.form .inline.field .ui.input {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.form .field .ui.input input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ui.form .error.message,
|
||||
.ui.form .error.message:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.form .message:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.form .ui.action.input:not([class*="left action"]) input:focus {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui.form.error .error.message:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.form .field.error .error.message:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
.ui.form .field.error textarea,
|
||||
.ui.form .field.error select,
|
||||
.ui.form .field.error input {
|
||||
background-color: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
.ui.form .field.error textarea:focus,
|
||||
.ui.form .field.error select:focus,
|
||||
.ui.form .field.error input:focus {
|
||||
background-color: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.form .field.error select {
|
||||
appearance: menulist-button;
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown {
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
.ui.form .field.error .ui.dropdown:hover {
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown .menu .item:hover {
|
||||
background-color: var(--color-error-bg-hover);
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown .menu .active.item {
|
||||
background-color: var(--color-error-bg-active) !important;
|
||||
}
|
||||
|
||||
.ui.form .disabled.fields .field,
|
||||
.ui.form .disabled.field,
|
||||
.ui.form .field :disabled {
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
.ui.form .field.disabled > label {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
.ui.form .field.disabled :disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.form .required.field > label::after,
|
||||
.ui.form .required.field > .checkbox::after,
|
||||
.ui.form label.required::after {
|
||||
margin: -0.2em 0 0 0.2em;
|
||||
content: "*";
|
||||
color: var(--color-red);
|
||||
}
|
||||
.ui.form .required.field > label::after,
|
||||
.ui.form label.required::after {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.form .required.field > .checkbox::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.ui.form .grouped.fields {
|
||||
display: block;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.ui.form .grouped.fields:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.form .grouped.fields .field {
|
||||
display: block;
|
||||
margin: 0.5em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.form .fields {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 -0.5em 1em;
|
||||
}
|
||||
.ui.form .fields > .field {
|
||||
flex: 0 1 auto;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.form .fields > .field:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.form .fields {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.form .fields > .fields,
|
||||
.ui.form .fields > .field {
|
||||
width: 100%;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.form .inline.fields {
|
||||
margin: 0 0 1em;
|
||||
align-items: center;
|
||||
}
|
||||
.ui.form .inline.fields .field {
|
||||
margin: 0;
|
||||
padding: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.ui.form .inline.fields > label,
|
||||
.ui.form .inline.field > label,
|
||||
.ui.form .inline.field > p {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: baseline;
|
||||
font-size: 0.92857143em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.form .inline.fields > label {
|
||||
margin: 0.035714em 1em 0 0;
|
||||
}
|
||||
|
||||
.ui.form .inline.field > input,
|
||||
.ui.form .inline.field > select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.form .inline.fields .field > :first-child,
|
||||
.ui.form .inline.field > :first-child {
|
||||
margin: 0 0.85714286em 0 0;
|
||||
}
|
||||
.ui.form .inline.fields .field > :only-child,
|
||||
.ui.form .inline.field > :only-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.form,
|
||||
.ui.form .field .dropdown,
|
||||
.ui.form .field .dropdown .menu > .item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* previously from web_src/css/form.css */
|
||||
|
||||
.ui .form .autofill-dummy {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -10000;
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown,
|
||||
.ui.form .field.error .ui.dropdown:hover {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.form .field.error .dropdown .menu {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important;
|
||||
border-color: var(--color-primary-light-4) !important;
|
||||
}
|
||||
|
||||
.form .help {
|
||||
color: var(--color-secondary-dark-5);
|
||||
margin-top: 0.25em;
|
||||
padding-bottom: 0.6em;
|
||||
display: inline-block;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.form .help code {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.form .help pre.command-block {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
margin: 0.25em 0 0.25em 1em;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field > label {
|
||||
text-align: right;
|
||||
width: 250px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field > .help {
|
||||
display: block;
|
||||
margin-left: calc(250px + 15px);
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.form.left-right-form .inline.field .ui.dropdown,
|
||||
.ui.form.left-right-form .inline.field textarea {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field .ui.dropdown input.search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field .inline-right {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.form.left-right-form .inline.field > label {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.ui.form.left-right-form .inline.field > .help {
|
||||
margin: 0;
|
||||
}
|
||||
.ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.form.left-right-form .inline.field .ui.dropdown,
|
||||
.ui.form.left-right-form .inline.field textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
226
web_src/css/modules/grid.css
Normal file
226
web_src/css/modules/grid.css
Normal file
@@ -0,0 +1,226 @@
|
||||
/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.ui[class*="very relaxed"].grid {
|
||||
margin-left: -2.5rem;
|
||||
margin-right: -2.5rem;
|
||||
}
|
||||
|
||||
.ui.grid + .grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .column:not(.row),
|
||||
.ui.grid > .row > .column {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 6.25%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.grid > * {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: inherit;
|
||||
align-items: stretch;
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .column:not(.row) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.ui.grid > .row > .column {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.grid > .row > .column > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ui.grid > .column:last-child > .horizontal.segment {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 23%;
|
||||
padding-right: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.grid > .column:only-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui[class*="two column"].grid > .column:not(.row) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.ui.grid > [class*="two column"].row > .column {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.ui.grid > .column.row > [class*="one wide"].column,
|
||||
.ui.grid > [class*="one wide"].column,
|
||||
.ui.column.grid > [class*="one wide"].column {
|
||||
width: 6.25% !important;
|
||||
}
|
||||
.ui.grid > .column.row > [class*="two wide"].column,
|
||||
.ui.grid > [class*="two wide"].column,
|
||||
.ui.column.grid > [class*="two wide"].column {
|
||||
width: 12.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="three wide"].column {
|
||||
width: 18.75% !important;
|
||||
}
|
||||
.ui.grid > [class*="four wide"].column {
|
||||
width: 25% !important;
|
||||
}
|
||||
.ui.grid > [class*="five wide"].column {
|
||||
width: 31.25% !important;
|
||||
}
|
||||
.ui.grid > [class*="six wide"].column {
|
||||
width: 37.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="seven wide"].column {
|
||||
width: 43.75% !important;
|
||||
}
|
||||
.ui.grid > [class*="eight wide"].column {
|
||||
width: 50% !important;
|
||||
}
|
||||
.ui.grid > [class*="ten wide"].column {
|
||||
width: 62.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="eleven wide"].column {
|
||||
width: 68.75% !important;
|
||||
}
|
||||
.ui.grid > [class*="twelve wide"].column {
|
||||
width: 75% !important;
|
||||
}
|
||||
.ui.grid > [class*="thirteen wide"].column {
|
||||
width: 81.25% !important;
|
||||
}
|
||||
.ui.grid > [class*="fourteen wide"].column {
|
||||
width: 87.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="sixteen wide"].column {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui.centered.grid {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row) {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.grid > .centered.column {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui[class*="very relaxed"].grid > .column:not(.row) {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.ui.grid [class*="very relaxed"].row + .ui.divider {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui[class*="mobile reversed"].grid {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.ui.stackable[class*="mobile reversed"] {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.stackable.grid {
|
||||
width: auto;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.grid > .wide.column,
|
||||
.ui.stackable.grid > .column:not(.row) {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
box-shadow: none !important;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.ui.container > .ui.stackable.grid > .column {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.grid .ui.stackable.grid {
|
||||
margin-left: -1rem !important;
|
||||
margin-right: -1rem !important;
|
||||
}
|
||||
}
|
||||
143
web_src/css/modules/header.css
Normal file
143
web_src/css/modules/header.css
Normal file
@@ -0,0 +1,143 @@
|
||||
/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.header {
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
||||
padding: 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.28571429;
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: -0.14285714em;
|
||||
}
|
||||
|
||||
.ui.header:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.header .ui.label {
|
||||
margin-left: 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.header + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2.ui.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
h2.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
h4.ui.header {
|
||||
font-size: 1.07142857rem;
|
||||
}
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: 0.14285714rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
|
||||
.ui.icon.header svg {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
float: none;
|
||||
display: block;
|
||||
line-height: var(--line-height-default);
|
||||
padding: 0;
|
||||
margin: 0 auto 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
position: relative;
|
||||
background: var(--color-box-header);
|
||||
padding: 0.78571429rem 1rem;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px); /* the same as "ui attached segment" */
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.top.attached.header {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* fix misaligned right buttons on box headers */
|
||||
.ui.attached.header > .ui.right {
|
||||
position: absolute;
|
||||
right: 0.78571429rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
|
||||
.ui.attached.header > .ui.right .ui.tiny.button {
|
||||
padding: 6px 10px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
/* if a .top.attached.header is followed by a .segment, add some margin */
|
||||
.ui.segments + .ui.top.attached.header,
|
||||
.ui.attached.segment + .ui.top.attached.header {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
}
|
||||
|
||||
.ui.error.header {
|
||||
background: var(--color-error-bg) !important;
|
||||
color: var(--color-error-text) !important;
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.header {
|
||||
background: var(--color-warning-bg) !important;
|
||||
color: var(--color-warning-text) !important;
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
|
||||
.attention-header {
|
||||
padding: 0.5em 0.75em !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
167
web_src/css/modules/input.css
Normal file
167
web_src/css/modules/input.css
Normal file
@@ -0,0 +1,167 @@
|
||||
/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.input {
|
||||
position: relative;
|
||||
font-weight: var(--font-weight-normal);
|
||||
display: inline-flex;
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
.ui.input > input {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
flex: 1 0 auto;
|
||||
outline: none;
|
||||
font-family: var(--fonts-regular);
|
||||
padding: 0.67857143em 1em;
|
||||
border: 1px solid var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
border-radius: 0.28571429rem;
|
||||
line-height: var(--line-height-default);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ui.input:not(.disabled) input[disabled] {
|
||||
opacity: var(--opacity-disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.input > input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.input.error > input {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 2.67142857em;
|
||||
opacity: 0.5;
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
pointer-events: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon.is-loading {
|
||||
position: absolute !important;
|
||||
height: 28px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon.is-loading > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.ui.ui.ui.icon.input > input {
|
||||
padding-right: 2.67142857em;
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input > i.icon {
|
||||
right: auto;
|
||||
left: 1px;
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.ui.ui.ui[class*="left icon"].input > input {
|
||||
padding-left: 2.67142857em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.ui.icon.input > input:focus ~ .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.action.input.error > .ui.button {
|
||||
border-top: 1px solid var(--color-error-border);
|
||||
border-bottom: 1px solid var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.action.input > .button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
padding-top: 0.78571429em;
|
||||
padding-bottom: 0.78571429em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.action.input:not([class*="left action"]) > input,
|
||||
.ui.action.input:not([class*="left action"]) > .ui.input > input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.ui.action.input > .dropdown:first-child,
|
||||
.ui.action.input > .button:first-child {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.action.input > .dropdown:not(:first-child),
|
||||
.ui.action.input > .button:not(:first-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.action.input > .dropdown:last-child,
|
||||
.ui.action.input > .button:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
|
||||
.ui.fluid.input {
|
||||
display: flex;
|
||||
}
|
||||
.ui.fluid.input > input {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.ui.tiny.input {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.small.input {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
|
||||
.ui.action.input .ui.ui.button {
|
||||
border-color: var(--color-input-border);
|
||||
padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* currently used for search bar dropdowns in repo search and explore code */
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
|
||||
min-width: 10em;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
|
||||
border-right: none;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
|
||||
border-color: var(--color-input-border);
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input,
|
||||
.ui.action.input:not([class*="left action"]) > input:hover {
|
||||
border-right: none;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .button,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button:hover {
|
||||
border-left-color: var(--color-primary);
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input:focus {
|
||||
border-right-color: var(--color-primary);
|
||||
}
|
||||
294
web_src/css/modules/label.css
Normal file
294
web_src/css/modules/label.css
Normal file
@@ -0,0 +1,294 @@
|
||||
/* based on Fomantic UI label module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
gap: var(--gap-inline);
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
padding: 2px 6px;
|
||||
font-size: var(--font-size-label);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: 0 solid transparent;
|
||||
border-radius: var(--border-radius);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a.ui.label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.label > .icon {
|
||||
width: auto;
|
||||
margin: 0 0.75em 0 0;
|
||||
}
|
||||
|
||||
.ui.label > .detail {
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-left: 0.5em; /* our .ui.label already provides flex gap, so the margin here shouldn't be too large */
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ui.label > .delete.icon {
|
||||
cursor: pointer;
|
||||
font-size: 0.92857143em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ui.label > .delete.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.label:not(.icon) > .delete.icon {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
|
||||
a.ui.label:hover {
|
||||
background: var(--color-label-hover-bg);
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
.ui.basic.label {
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
a.ui.basic.label:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.ui.ui.primary.label {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary-dark-2);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
a.ui.ui.ui.primary.label:hover {
|
||||
background: var(--color-primary-dark-3);
|
||||
border-color: var(--color-primary-dark-3);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
.ui.ui.ui.basic.primary.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
a.ui.ui.ui.basic.primary.label:hover {
|
||||
background: var(--color-hover);
|
||||
border-color: var(--color-primary-dark-1);
|
||||
color: var(--color-primary-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.red.label {
|
||||
background: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.red.label:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.red.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-red);
|
||||
color: var(--color-red);
|
||||
}
|
||||
a.ui.ui.ui.basic.red.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-red-dark-1);
|
||||
color: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.orange.label {
|
||||
background: var(--color-orange);
|
||||
border-color: var(--color-orange);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.orange.label:hover {
|
||||
background: var(--color-orange-dark-1);
|
||||
border-color: var(--color-orange-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.orange.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-orange);
|
||||
color: var(--color-orange);
|
||||
}
|
||||
a.ui.ui.ui.basic.orange.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-orange-dark-1);
|
||||
color: var(--color-orange-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.yellow.label {
|
||||
background: var(--color-yellow);
|
||||
border-color: var(--color-yellow);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.yellow.label:hover {
|
||||
background: var(--color-yellow-dark-1);
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.yellow.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-yellow);
|
||||
color: var(--color-yellow);
|
||||
}
|
||||
a.ui.ui.ui.basic.yellow.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
color: var(--color-yellow-dark-1);
|
||||
}
|
||||
.ui.ui.ui.green.label {
|
||||
background: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.green.label:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.green.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-green);
|
||||
color: var(--color-green);
|
||||
}
|
||||
a.ui.ui.ui.basic.green.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-green-dark-1);
|
||||
color: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.purple.label {
|
||||
background: var(--color-purple);
|
||||
border-color: var(--color-purple);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.purple.label:hover {
|
||||
background: var(--color-purple-dark-1);
|
||||
border-color: var(--color-purple-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.ui.ui.ui.grey.label {
|
||||
background: var(--color-label-bg);
|
||||
border-color: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
a.ui.ui.ui.grey.label:hover {
|
||||
background: var(--color-label-hover-bg);
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* "horizontal label" is actually "fat label" which has enough padding spaces to be used standalone in headers */
|
||||
.ui.horizontal.label {
|
||||
margin: 0 0.5em 0 0;
|
||||
padding: 0.4em 0.833em;
|
||||
min-width: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.circular.label {
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
padding: 0.5em !important;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
border-radius: 500rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ui.mini.label {
|
||||
font-size: 0.64285714rem;
|
||||
}
|
||||
.ui.tiny.label {
|
||||
font-size: 0.71428571rem;
|
||||
}
|
||||
.ui.small.label {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.large.label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* labels-list layout: span.labels-list > a.item > span.ui.label,
|
||||
by default, the labels list is rendered as "display: inline",
|
||||
it can also be rendered as flex by adding flex-related classes (the general ".item" selector also applies) */
|
||||
.labels-list {
|
||||
max-width: 100%; /* for ellipsis */
|
||||
font-size: var(--font-size-label); /* must match the label font size, otherwise the height mismatches */
|
||||
}
|
||||
|
||||
.labels-list > .item {
|
||||
max-width: 100%; /* for ellipsis */
|
||||
}
|
||||
|
||||
.labels-list a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.labels-list .ui.label {
|
||||
min-height: 20px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* to align with different font sizes, these styles need to be written separately */
|
||||
#issue-list .labels-list > .item {
|
||||
margin-right: 4px; /* margin-right (not margin-left) keeps wrapped labels left-aligned */
|
||||
vertical-align: 2.5px; /* compensates inline-flex baseline so labels center with text */
|
||||
}
|
||||
|
||||
.timeline-item .labels-list > .item {
|
||||
margin-right: 4px;
|
||||
vertical-align: 1.5px;
|
||||
}
|
||||
|
||||
/* Scoped labels with different colors on left and right */
|
||||
.ui.label.scope-parent {
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.ui.label.scope-parent > .ui.label {
|
||||
margin: 0 !important; /* scoped label's margin is handled by the parent */
|
||||
}
|
||||
|
||||
.ui.label.scope-left {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.scope-middle {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.scope-right {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.archived-label {
|
||||
filter: grayscale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.ui.label {
|
||||
outline: 1px solid CanvasText;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
161
web_src/css/modules/list.css
Normal file
161
web_src/css/modules/list.css
Normal file
@@ -0,0 +1,161 @@
|
||||
/* based on Fomantic UI list module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.list {
|
||||
list-style-type: none;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.list:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.list:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.list > .item,
|
||||
.ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.ui.list .list:not(.icon) {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0.75em 0 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.ui.list .list > .item {
|
||||
padding: 0.14285714em 0;
|
||||
}
|
||||
|
||||
.ui.list > .item > i.icon {
|
||||
display: table-cell;
|
||||
min-width: 1.55em;
|
||||
padding-top: 0;
|
||||
transition: color 0.1s ease;
|
||||
padding-right: 0.28571429em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list > .item > i.icon:only-child {
|
||||
display: inline-block;
|
||||
min-width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.list > .item > .image {
|
||||
display: table-cell;
|
||||
background-color: transparent;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list > .item > .image:not(:only-child):not(img) {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.list > .item > .image img {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > .image:only-child,
|
||||
.ui.list > .item > img.image,
|
||||
.ui.list > .item > .image:only-child {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.list .list > .item > .content,
|
||||
.ui.list > .item > .content {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.list > .item > i.icon + .content {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
padding: 0 0 0 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list > .item > img.image + .content {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.ui.list > .item > .content > .list {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ui.list .list > .item .header,
|
||||
.ui.list > .item .header {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.list .list > .item .description,
|
||||
.ui.list > .item .description {
|
||||
display: block;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.list > .item a,
|
||||
.ui.list .list > .item a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.menu .ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
background-color: transparent;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
padding: 0.21428571em 0;
|
||||
}
|
||||
.ui.menu .ui.list > .item::before {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.ui.menu .ui.list > .item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.ui.menu .ui.list > .item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.list .list > .disabled.item,
|
||||
.ui.list > .disabled.item {
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.list > a.item:hover > .icons,
|
||||
.ui.list .list > a.item:hover > i.icon,
|
||||
.ui.list > a.item:hover > i.icon {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.divided.list > .item {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.divided.list .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .item .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .list > .item:first-child,
|
||||
.ui.divided.list > .item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .list > .item:first-child {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.ui.relaxed.list > .item:not(:first-child) {
|
||||
padding-top: 0.42857143em;
|
||||
}
|
||||
.ui.relaxed.list > .item:not(:last-child) {
|
||||
padding-bottom: 0.42857143em;
|
||||
}
|
||||
594
web_src/css/modules/menu.css
Normal file
594
web_src/css/modules/menu.css
Normal file
@@ -0,0 +1,594 @@
|
||||
.ui.menu {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
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;
|
||||
gap: var(--gap-inline);
|
||||
}
|
||||
|
||||
.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) {
|
||||
line-height: 1.3;
|
||||
}
|
||||
.ui.menu .item > p:last-child {
|
||||
margin-bottom: 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 > .container {
|
||||
display: flex;
|
||||
align-items: inherit;
|
||||
flex-direction: inherit;
|
||||
}
|
||||
|
||||
.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.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.secondary.menu .dropdown.item > .menu {
|
||||
border-radius: 0.28571429rem;
|
||||
margin-top: 0.35714286em;
|
||||
}
|
||||
|
||||
.ui.menu .item > .label {
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
@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.ui.menu .item.disabled {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .left.menu {
|
||||
display: flex;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .right.menu {
|
||||
display: flex;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.ui.menu .right.menu > .item::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.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::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 {
|
||||
background: var(--color-active);
|
||||
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.tabular.menu {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: none transparent;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
.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);
|
||||
color: var(--color-text-dark);
|
||||
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.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 .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.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 .dropdown.item:hover,
|
||||
.ui.secondary.menu a.item:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.secondary.menu .active.item {
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .active.item,
|
||||
.ui.secondary.menu .active.item:hover {
|
||||
color: var(--color-text-dark);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.secondary.vertical.menu > .item {
|
||||
border: none;
|
||||
margin: 0 0 0.35714286em;
|
||||
border-radius: 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-bottom: 2px solid var(--color-secondary);
|
||||
}
|
||||
.ui.secondary.pointing.menu .item {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
align-self: flex-end;
|
||||
margin: 0 0 -2px;
|
||||
padding: 0.85714286em 1.14285714em;
|
||||
}
|
||||
.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 .item::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu a.item:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu a.item:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
@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 {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .right.menu {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .right.menu,
|
||||
.ui.stackable.menu .left.menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.borderless.menu .item::before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.ui.compact.menu {
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.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.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.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 .active.item::after {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.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[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.tabular.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.mini.menu {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.menu {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.menu,
|
||||
.ui.small.menu .dropdown,
|
||||
.ui.small.menu .dropdown .menu > .item {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
.ui.segment .ui.tabular.menu .active.item,
|
||||
.ui.segment .ui.tabular.menu .active.item:hover {
|
||||
background: var(--color-box-body);
|
||||
}
|
||||
|
||||
.small-menu-items {
|
||||
min-height: 35.4px !important; /* match .small.button in height */
|
||||
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.small-menu-items .item {
|
||||
background: var(--color-menu) !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item:hover {
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item.active {
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
100
web_src/css/modules/message.css
Normal file
100
web_src/css/modules/message.css
Normal file
@@ -0,0 +1,100 @@
|
||||
/* based on Fomantic UI message module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.message {
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
position: relative;
|
||||
min-height: 1em;
|
||||
margin: 1em 0;
|
||||
padding: 1em 1.5em;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
details.ui.message {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details.ui.message summary {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
|
||||
details.ui.message pre {
|
||||
margin: -1.25em 0 0;
|
||||
padding: 0.5em 1.5em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
details.ui.message:not(:has(pre)) summary {
|
||||
list-style: none;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ui.message.flash-message pre {
|
||||
white-space: pre-line;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.message:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.message:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.attached.message {
|
||||
margin-bottom: -1px;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
|
||||
margin-top: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.message .header {
|
||||
color: inherit;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.ui.info.message,
|
||||
.ui.attached.info.message,
|
||||
.ui.blue.message,
|
||||
.ui.attached.blue.message {
|
||||
background: var(--color-info-bg);
|
||||
border-color: var(--color-info-border);
|
||||
}
|
||||
|
||||
.ui.success.message,
|
||||
.ui.positive.message {
|
||||
background: var(--color-success-bg);
|
||||
border-color: var(--color-success-border);
|
||||
}
|
||||
|
||||
.ui.error.message,
|
||||
.ui.red.message,
|
||||
.ui.negative.message {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.warning.message {
|
||||
background: var(--color-warning-bg);
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
|
||||
.ui.message > .close.icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.ui.message > .close.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
305
web_src/css/modules/modal.css
Normal file
305
web_src/css/modules/modal.css
Normal file
@@ -0,0 +1,305 @@
|
||||
/* These are the remnants of the fomantic modal module */
|
||||
|
||||
.ui.modal {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: var(--z-index-modal);
|
||||
text-align: left;
|
||||
background: var(--color-body);
|
||||
border: none;
|
||||
box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
|
||||
transform-origin: 50% 25%;
|
||||
flex: 0 0 auto;
|
||||
border-radius: var(--border-radius);
|
||||
user-select: text;
|
||||
will-change: top, left, margin, transform, opacity;
|
||||
}
|
||||
|
||||
.ui.modal > :first-child:not(.icon) {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > :last-child {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > .close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -2.5rem;
|
||||
right: -2.5rem;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
font-size: 1.25em;
|
||||
color: var(--color-white);
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0.625rem 0 0;
|
||||
}
|
||||
|
||||
.ui.modal > .close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.modal > .header {
|
||||
display: block;
|
||||
font-family: var(--fonts-regular);
|
||||
background: var(--color-body);
|
||||
margin: 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: none;
|
||||
color: var(--color-text-dark);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > .header:not(.ui) {
|
||||
font-size: 1.42857143rem;
|
||||
line-height: 1.28571429em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.ui.modal > .header .svg {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.modal > .content,
|
||||
.ui.modal form > .content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
padding: 1.5em;
|
||||
background: var(--color-body);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > .actions,
|
||||
.ui.modal .content + .actions,
|
||||
.ui.modal .content + form > .actions {
|
||||
background: var(--color-secondary-bg);
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
text-align: right;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal .actions > .button {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.modal {
|
||||
width: 88%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.modal {
|
||||
width: 850px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.modal {
|
||||
width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.modal {
|
||||
width: 950px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991.98px) {
|
||||
.ui.modal > .header {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: 1.0535rem;
|
||||
right: 1rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.modal > .header {
|
||||
padding: 0.75rem 1rem !important;
|
||||
padding-right: 2.25rem !important;
|
||||
}
|
||||
.ui.modal > .content {
|
||||
display: block;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: 0.5rem !important;
|
||||
right: 0.5rem !important;
|
||||
}
|
||||
.ui.modal > .actions {
|
||||
padding: 1rem 1rem 0 !important;
|
||||
}
|
||||
.ui.modal .actions > .button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.active.modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.modal > .close.inside + .header {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
.ui.modal > .close.inside {
|
||||
top: 1.0535rem;
|
||||
right: 1rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui.modal > .close.icon[height="16"] {
|
||||
top: 0.7em;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.mini.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.mini.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.mini.modal {
|
||||
width: 35.2%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.mini.modal {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.mini.modal {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.mini.modal {
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.tiny.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.tiny.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.tiny.modal {
|
||||
width: 52.8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.tiny.modal {
|
||||
width: 510px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.tiny.modal {
|
||||
width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.tiny.modal {
|
||||
width: 570px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.small.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.small.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.small.modal {
|
||||
width: 70.4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.small.modal {
|
||||
width: 680px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.small.modal {
|
||||
width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.small.modal {
|
||||
width: 760px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.modal.g-modal-confirm {
|
||||
max-width: min(800px, 90vw);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.ui.modal .content > form > .actions,
|
||||
.ui.modal .content > .actions {
|
||||
padding-top: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button.danger {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button .svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
151
web_src/css/modules/navbar.css
Normal file
151
web_src/css/modules/navbar.css
Normal file
@@ -0,0 +1,151 @@
|
||||
#navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-nav-bg);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#navbar .navbar-left,
|
||||
#navbar .navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 49px; /* +1px border-bottom */
|
||||
}
|
||||
|
||||
.navbar-left > .item,
|
||||
.navbar-right > .item,
|
||||
.navbar-mobile-right > .item {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-nav-text);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
padding: 3px 13px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#navbar .item.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
#navbar a.item:hover,
|
||||
#navbar button.item:hover {
|
||||
background: var(--color-nav-hover-bg);
|
||||
}
|
||||
|
||||
#navbar .item.ui.dropdown {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#navbar {
|
||||
align-items: stretch;
|
||||
}
|
||||
/* hide all items */
|
||||
#navbar .navbar-left > .item,
|
||||
#navbar .navbar-right > .item {
|
||||
display: none;
|
||||
}
|
||||
#navbar #navbar-logo {
|
||||
display: flex;
|
||||
}
|
||||
/* show the first navbar item (logo and its mobile right items) */
|
||||
#navbar .navbar-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#navbar .navbar-mobile-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
#navbar .navbar-mobile-right > .item {
|
||||
display: flex;
|
||||
width: auto;
|
||||
}
|
||||
/* show items if the navbar is open */
|
||||
#navbar.navbar-menu-open {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
#navbar.navbar-menu-open,
|
||||
#navbar.navbar-menu-open .navbar-right {
|
||||
flex-direction: column;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left > .item,
|
||||
#navbar.navbar-menu-open .navbar-right > .item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left #navbar-logo {
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
|
||||
justify-content: flex-end;
|
||||
min-height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar a.item:hover .notification_count,
|
||||
#navbar a.item:hover .header-stopwatch-dot,
|
||||
#navbar .item.active .navbar-admin-badge {
|
||||
border-color: var(--color-nav-hover-bg);
|
||||
}
|
||||
|
||||
#navbar a.item .notification_count,
|
||||
#navbar a.item .header-stopwatch-dot,
|
||||
#navbar .item .navbar-admin-badge {
|
||||
color: var(--color-nav-bg);
|
||||
padding: 0 3.75px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
background: var(--color-primary);
|
||||
border: 2px solid var(--color-nav-bg);
|
||||
position: absolute;
|
||||
left: calc(100% - 9px);
|
||||
bottom: calc(100% - 9px);
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1; /* prevent menu button background from overlaying icon */
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navbar-avatar {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#navbar .item .navbar-admin-badge {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: -7px;
|
||||
bottom: -5px;
|
||||
padding: 1.5px;
|
||||
}
|
||||
|
||||
.secondary-nav {
|
||||
background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
|
||||
}
|
||||
|
||||
.issue-navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
204
web_src/css/modules/normalize.css
vendored
Normal file
204
web_src/css/modules/normalize.css
vendored
Normal file
@@ -0,0 +1,204 @@
|
||||
/*
|
||||
This is copy of modern-normalize with these changes done:
|
||||
|
||||
- Remove html font-family, we set our own
|
||||
- Remove html tab-size, we set our own
|
||||
- Remove b,strong font-weight, we set our own
|
||||
- Remove b,code,samp,pre font-size, we set our own
|
||||
- Keep the browser's default line-height on html, it is font-dependent and roughly 1.2
|
||||
- Keep the hr color that v3 dropped, it keeps the separator colored like the surrounding text
|
||||
- Keep the :-moz-focusring outline that v3 dropped, checkboxes and radios have no other focus style
|
||||
*/
|
||||
|
||||
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
/*
|
||||
Document
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Use a better box model (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: normal;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- no unprefixed support in Safari or Firefox */
|
||||
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
|
||||
}
|
||||
|
||||
/*
|
||||
Sections
|
||||
========
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0; /* Remove the margin in all browsers. */
|
||||
}
|
||||
|
||||
/*
|
||||
Grouping content
|
||||
================
|
||||
*/
|
||||
|
||||
hr {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Text-level semantics
|
||||
====================
|
||||
*/
|
||||
|
||||
/**
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabular data
|
||||
============
|
||||
*/
|
||||
|
||||
/**
|
||||
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
*/
|
||||
|
||||
table {
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
=====
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to 'inherit' in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Interactive
|
||||
===========
|
||||
*/
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
86
web_src/css/modules/search.css
Normal file
86
web_src/css/modules/search.css
Normal file
@@ -0,0 +1,86 @@
|
||||
/* These are the remnants of the fomantic search module */
|
||||
|
||||
.ui.search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui.search > .results {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
background: var(--color-body);
|
||||
margin-top: 0.5em;
|
||||
width: 18em;
|
||||
border-radius: 0.28571429rem;
|
||||
box-shadow: 0 2px 4px 0 var(--color-shadow), 0 2px 10px 0 var(--color-shadow);
|
||||
border: 1px solid var(--color-secondary);
|
||||
z-index: 998;
|
||||
transform-origin: center top;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.ui.search > .results > :first-child {
|
||||
border-top-left-radius: 0.28571429rem;
|
||||
border-top-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.search > .results > :last-child {
|
||||
border-bottom-left-radius: 0.28571429rem;
|
||||
border-bottom-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.search > .results .result {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0.85714286em 1.14285714em;
|
||||
color: var(--color-text);
|
||||
line-height: 1.33;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
background: var(--color-body);
|
||||
}
|
||||
|
||||
.ui.search > .results .result:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ui.search > .results .result .image {
|
||||
overflow: hidden;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.ui.search > .results .result .image img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui.search > .results .result .title {
|
||||
margin: -0.14285714em 0 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.search > .results .result .description {
|
||||
font-size: 0.92857143em;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.search > .results .result:hover,
|
||||
.ui.search > .results .result.active {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.fluid.search .results {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.search .results {
|
||||
max-width: calc(100vw - 2rem);
|
||||
}
|
||||
}
|
||||
180
web_src/css/modules/segment.css
Normal file
180
web_src/css/modules/segment.css
Normal file
@@ -0,0 +1,180 @@
|
||||
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.segment {
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
padding: 1em;
|
||||
border-radius: 0.28571429rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.segment:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.segment:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.grid.segment {
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segment.tab:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.segments {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.segments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.segments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.segments > .segment {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.segments:not(.horizontal) > .segment:first-child {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-top: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.segments:not(.horizontal) > .segment:last-child {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segments:not(.horizontal) > .segment:only-child,
|
||||
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.horizontal.segments {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.28571429rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.horizontal.segments > .segment {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.horizontal.segments:not(.stackable) > .segment:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.horizontal.segments > .segment:first-child {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.horizontal.segments > .segment:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
|
||||
.ui.clearing.segment::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ui.secondary.segment {
|
||||
background: var(--color-secondary-bg);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.ui.attached.segment {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.attached.segment:last-child,
|
||||
.ui.attached.segment:has(+ :not(.ui.attached.segment)) {
|
||||
border-bottom-left-radius: 0.28571429rem;
|
||||
border-bottom-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui[class*="top attached"].segment {
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.segment[class*="top attached"]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui[class*="top attached"].segment:last-child {
|
||||
border-top-left-radius: 0.28571429rem;
|
||||
border-top-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui.segment[class*="bottom attached"]:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.fitted.segment {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.segments .segment,
|
||||
.ui.segment {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.error.segment {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.segment {
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
26
web_src/css/modules/shortcut.css
Normal file
26
web_src/css/modules/shortcut.css
Normal file
@@ -0,0 +1,26 @@
|
||||
.global-shortcut-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
padding: 2px 4px;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
color: var(--color-text-light-2);
|
||||
background-color: var(--color-box-body);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow-kbd);
|
||||
}
|
||||
|
||||
.global-shortcut-wrapper > kbd {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
54
web_src/css/modules/svg.css
Normal file
54
web_src/css/modules/svg.css
Normal file
@@ -0,0 +1,54 @@
|
||||
/* some material icons have "fill=none" (e.g.: ".txt -> document"), so the CSS styles shouldn't overwrite it,
|
||||
and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */
|
||||
.svg:not(.git-entry-icon) {
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* middle is the best choice for different font sizes from 1px to 36px when no flex */
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
/* some browsers like Chrome have a bug: when a SVG is in a "display: none" container and referenced
|
||||
somewhere else by `<use href="#id">`, it won't be rendered correctly. e.g.: ".kts -> kotlin" */
|
||||
.svg-icon-container {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes
|
||||
here are cherry-picked for our use cases, feel free to add more. after
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is
|
||||
supported in browsers, use `attr(width px)` instead for a generic
|
||||
solution. */
|
||||
|
||||
.svg[height="12"] { min-height: 12px; }
|
||||
.svg[height="13"] { min-height: 13px; }
|
||||
.svg[height="14"] { min-height: 14px; }
|
||||
.svg[height="15"] { min-height: 15px; }
|
||||
.svg[height="16"] { min-height: 16px; }
|
||||
.svg[height="18"] { min-height: 18px; }
|
||||
.svg[height="20"] { min-height: 20px; }
|
||||
.svg[height="22"] { min-height: 22px; }
|
||||
.svg[height="24"] { min-height: 24px; }
|
||||
.svg[height="36"] { min-height: 36px; }
|
||||
.svg[height="48"] { min-height: 48px; }
|
||||
.svg[height="56"] { min-height: 56px; }
|
||||
|
||||
.svg[width="12"] { min-width: 12px; }
|
||||
.svg[width="13"] { min-width: 13px; }
|
||||
.svg[width="14"] { min-width: 14px; }
|
||||
.svg[width="15"] { min-width: 15px; }
|
||||
.svg[width="16"] { min-width: 16px; }
|
||||
.svg[width="18"] { min-width: 18px; }
|
||||
.svg[width="20"] { min-width: 20px; }
|
||||
.svg[width="22"] { min-width: 22px; }
|
||||
.svg[width="24"] { min-width: 24px; }
|
||||
.svg[width="36"] { min-width: 36px; }
|
||||
.svg[width="48"] { min-width: 48px; }
|
||||
.svg[width="56"] { min-width: 56px; }
|
||||
|
||||
/* when the svg is used in menu or item, it's certain that we don't want it to be shrunk */
|
||||
.menu .svg,
|
||||
.item .svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
7
web_src/css/modules/tab.css
Normal file
7
web_src/css/modules/tab.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.tab.active {
|
||||
display: block;
|
||||
}
|
||||
272
web_src/css/modules/table.css
Normal file
272
web_src/css/modules/table.css
Normal file
@@ -0,0 +1,272 @@
|
||||
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.table {
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
vertical-align: middle;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
color: var(--color-text);
|
||||
background: var(--color-box-body);
|
||||
border-color: var(--color-secondary);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ui.table:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.table:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.table > thead,
|
||||
.ui.table > tbody {
|
||||
text-align: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.ui.table > thead > tr > th {
|
||||
background: var(--color-box-header);
|
||||
text-align: inherit;
|
||||
color: var(--color-text);
|
||||
padding: 6px 5px;
|
||||
vertical-align: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > thead > tr > th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:first-child {
|
||||
border-radius: 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:last-child {
|
||||
border-radius: 0 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:only-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.table > tfoot > tr > th {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
text-align: inherit;
|
||||
color: var(--color-text);
|
||||
padding: 0.78571429em;
|
||||
vertical-align: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.ui.table > tfoot > tr > th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > tfoot > tr:first-child > th:first-child {
|
||||
border-radius: 0 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.table > tfoot > tr:first-child > th:last-child {
|
||||
border-radius: 0 0 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.table > tr > td,
|
||||
.ui.table > tbody > tr > td {
|
||||
border-top: 1px solid var(--color-secondary-alpha-50);
|
||||
padding: 6px 5px;
|
||||
text-align: inherit;
|
||||
}
|
||||
.ui.table > tr:first-child > td,
|
||||
.ui.table > tbody > tr:first-child > td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.table.segment {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.table:not(.unstackable) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.table:not(.unstackable) > thead,
|
||||
.ui.table:not(.unstackable) > thead > tr,
|
||||
.ui.table:not(.unstackable) > tbody,
|
||||
.ui.table:not(.unstackable) > tr,
|
||||
.ui.table:not(.unstackable) > tbody > tr,
|
||||
.ui.table:not(.unstackable) > tr > th,
|
||||
.ui.table:not(.unstackable) > thead > tr > th,
|
||||
.ui.table:not(.unstackable) > tbody > tr > th,
|
||||
.ui.table:not(.unstackable) > tr > td,
|
||||
.ui.table:not(.unstackable) > tbody > tr > td {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
}
|
||||
.ui.table:not(.unstackable) > thead {
|
||||
display: block;
|
||||
}
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr > td,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25em 0.75em;
|
||||
}
|
||||
.ui.table:not(.unstackable) > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > thead > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > tbody > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > tr > td:first-child,
|
||||
.ui.table:not(.unstackable) > tbody > tr > td:first-child {
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.ui.table th.collapsing,
|
||||
.ui.table td.collapsing {
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.fixed.table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.ui.selectable.table > tbody > tr:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.attached.table {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.attached + .ui.attached.table:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui[class*="bottom attached"].table {
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui[class*="bottom attached"].table:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.table[class*="single line"],
|
||||
.ui.table [class*="single line"] {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Column Width */
|
||||
.ui.table th.one.wide,
|
||||
.ui.table td.one.wide {
|
||||
width: 6.25%;
|
||||
}
|
||||
.ui.table th.two.wide,
|
||||
.ui.table td.two.wide {
|
||||
width: 12.5%;
|
||||
}
|
||||
.ui.table th.three.wide,
|
||||
.ui.table td.three.wide {
|
||||
width: 18.75%;
|
||||
}
|
||||
.ui.table th.four.wide,
|
||||
.ui.table td.four.wide {
|
||||
width: 25%;
|
||||
}
|
||||
.ui.table th.five.wide,
|
||||
.ui.table td.five.wide {
|
||||
width: 31.25%;
|
||||
}
|
||||
.ui.table th.six.wide,
|
||||
.ui.table td.six.wide {
|
||||
width: 37.5%;
|
||||
}
|
||||
.ui.table th.eight.wide,
|
||||
.ui.table td.eight.wide {
|
||||
width: 50%;
|
||||
}
|
||||
.ui.table th.ten.wide,
|
||||
.ui.table td.ten.wide {
|
||||
width: 62.5%;
|
||||
}
|
||||
.ui.table th.eleven.wide,
|
||||
.ui.table td.eleven.wide {
|
||||
width: 68.75%;
|
||||
}
|
||||
|
||||
.ui.basic.table {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.basic.table > thead > tr > th,
|
||||
.ui.basic.table > tbody > tr > th,
|
||||
.ui.basic.table > tr > th {
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
}
|
||||
.ui.basic.table > tbody > tr {
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.basic.table > tbody > tr > td,
|
||||
.ui.basic.table > tr > td {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui[class*="very basic"].table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui.celled.table > tr > th,
|
||||
.ui.celled.table > thead > tr > th,
|
||||
.ui.celled.table > tbody > tr > th,
|
||||
.ui.celled.table > tr > td,
|
||||
.ui.celled.table > tbody > tr > td {
|
||||
border-left: 1px solid var(--color-secondary-alpha-50);
|
||||
}
|
||||
.ui.celled.table > tr > th:first-child,
|
||||
.ui.celled.table > thead > tr > th:first-child,
|
||||
.ui.celled.table > tbody > tr > th:first-child,
|
||||
.ui.celled.table > tr > td:first-child,
|
||||
.ui.celled.table > tbody > tr > td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.compact.table > tr > th,
|
||||
.ui.compact.table > thead > tr > th,
|
||||
.ui.compact.table > tbody > tr > th {
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.7em;
|
||||
}
|
||||
.ui.compact.table > tr > td,
|
||||
.ui.compact.table > tbody > tr > td {
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
/* use more horizontal padding on first and last items for visuals */
|
||||
.ui.table > thead > tr > th:first-of-type,
|
||||
.ui.table > tbody > tr > td:first-of-type,
|
||||
.ui.table > tr > td:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.ui.table > thead > tr > th:last-of-type,
|
||||
.ui.table > tbody > tr > td:last-of-type,
|
||||
.ui.table > tr > td:last-of-type {
|
||||
padding-right: 10px;
|
||||
}
|
||||
195
web_src/css/modules/tippy.css
Normal file
195
web_src/css/modules/tippy.css
Normal file
@@ -0,0 +1,195 @@
|
||||
/* styles are based on node_modules/tippy.js/dist/tippy.css */
|
||||
|
||||
/* class to hide tippy target elements on page load */
|
||||
.tippy-target {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* show target element once it's been moved by tippy.js */
|
||||
.tippy-content .tippy-target {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
[data-tippy-root] {
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
/* opt-in via createTippy's "limitSizeToViewport" */
|
||||
[data-tippy-limit-size] .tippy-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: var(--tippy-max-width, none);
|
||||
max-height: var(--tippy-max-height, none);
|
||||
}
|
||||
|
||||
[data-tippy-limit-size] .tippy-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tippy-box {
|
||||
position: relative;
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="default"] {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
/* bare theme, no styling at all, except box-shadow */
|
||||
.tippy-box[data-theme="bare"] {
|
||||
border: none;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="bare"] .tippy-content {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* tooltip theme for text tooltips */
|
||||
|
||||
.tippy-box[data-theme="tooltip"] {
|
||||
background-color: var(--color-tooltip-bg);
|
||||
color: var(--color-tooltip-text);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="tooltip"] .tippy-content {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
|
||||
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
|
||||
fill: var(--color-tooltip-bg);
|
||||
}
|
||||
|
||||
/* menu theme for .ui.menu */
|
||||
|
||||
.tippy-box[data-theme="menu"] {
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .tippy-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-menu);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px 18px;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
text-decoration: none;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item:focus-visible {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .divider {
|
||||
margin: 4px 0; /* fit the menu's vertical padding */
|
||||
}
|
||||
|
||||
/* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
|
||||
|
||||
.tippy-box[data-theme="box-with-header"] {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"] .tippy-content {
|
||||
background: var(--color-box-body);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"][data-placement^="top"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-box-body);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"][data-placement^="bottom"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-box-header);
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
|
||||
top: 16px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
|
||||
transform: rotate(90deg);
|
||||
top: calc(50% - 3px);
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
|
||||
transform: rotate(-90deg);
|
||||
top: calc(50% - 3px);
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow,
|
||||
.tippy-svg-arrow > svg {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow-outer {
|
||||
fill: var(--color-secondary);
|
||||
}
|
||||
|
||||
.tippy-svg-arrow-inner {
|
||||
fill: var(--color-menu);
|
||||
}
|
||||
121
web_src/css/modules/toast.css
Normal file
121
web_src/css/modules/toast.css
Normal file
@@ -0,0 +1,121 @@
|
||||
.toastify {
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
transition: all .2s ease;
|
||||
z-index: var(--z-index-toast);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 8px 24px var(--color-shadow);
|
||||
display: flex;
|
||||
max-width: 50vw;
|
||||
min-width: 300px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.toastify.on {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background: var(--color-success-bg);
|
||||
border-color: var(--color-success-border);
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background: var(--color-info-bg);
|
||||
border-color: var(--color-info-border);
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background: var(--color-warning-bg);
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.toast-success .toast-icon { color: var(--color-success-text); }
|
||||
.toast-info .toast-icon { color: var(--color-info-text); }
|
||||
.toast-warning .toast-icon { color: var(--color-warning-text); }
|
||||
.toast-error .toast-icon { color: var(--color-error-text); }
|
||||
|
||||
.toast-body {
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.toast-body pre {
|
||||
white-space: pre-wrap; /* online editor, when git hook fails, the rendered message uses "pre" */
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
border-radius: var(--border-radius);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
display: inline-flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-duplicate-number::before {
|
||||
content: "(";
|
||||
}
|
||||
.toast-duplicate-number {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
.toast-duplicate-number::after {
|
||||
content: ")";
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.toast-close:active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.toastify-right {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.toastify-left {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.toastify-top {
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
.toastify-bottom {
|
||||
bottom: -150px;
|
||||
}
|
||||
|
||||
.toastify-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.toastify-right, .toastify-left {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: fit-content;
|
||||
}
|
||||
}
|
||||
23
web_src/css/modules/transition.css
Normal file
23
web_src/css/modules/transition.css
Normal file
@@ -0,0 +1,23 @@
|
||||
/* styles for Fomantic transition (toggle): dimmer, modal, dropdown menu */
|
||||
|
||||
/* this is the only place using "hidden" and "visible" classes, it can safely work with tailwind without prefix in the future */
|
||||
.ui.modal.transition.hidden,
|
||||
.ui.dropdown > .menu.transition.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.modal.transition.visible,
|
||||
.ui.dropdown > .menu.transition.visible {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* dimmer uses "active" but not "hidden/visible" classes, no special classes for it here */
|
||||
|
||||
/* only modal and dimmer need animation, dropdown menu doesn't */
|
||||
.ui.modal.transition {
|
||||
animation-name: fadein;
|
||||
animation-duration: 100ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
Reference in New Issue
Block a user