feat: vendor gitea 1.16.2
This commit is contained in:
@@ -28,7 +28,7 @@
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: isloadingspin 1000ms infinite linear;
|
||||
border-width: 4px;
|
||||
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);
|
||||
@@ -82,15 +82,6 @@ code.language-math.is-loading::after {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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% {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
.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;
|
||||
@@ -100,11 +102,13 @@
|
||||
|
||||
/* 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 */
|
||||
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: 0.42em /* around 8px */ 1.07em /* around 15px */;
|
||||
min-height: 32px;
|
||||
}
|
||||
@@ -118,6 +122,7 @@
|
||||
.ui.mini.buttons .dropdown .menu > .item,
|
||||
.ui.mini.buttons .button,
|
||||
.ui.ui.ui.ui.mini.button {
|
||||
gap: var(--gap-inline);
|
||||
font-size: 11px;
|
||||
min-height: 30px;
|
||||
}
|
||||
@@ -130,6 +135,7 @@
|
||||
.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;
|
||||
}
|
||||
@@ -208,7 +214,6 @@
|
||||
|
||||
.ui.fluid.button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,10 +1,75 @@
|
||||
/* 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="checkbox"],
|
||||
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);
|
||||
-webkit-mask-image: var(--checkbox-mask-checked);
|
||||
mask-size: 75%;
|
||||
-webkit-mask-size: 75%;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
-webkit-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);
|
||||
-webkit-mask-image: var(--checkbox-mask-indeterminate);
|
||||
mask-size: 75%;
|
||||
-webkit-mask-size: 75%;
|
||||
}
|
||||
|
||||
.ui.checkbox {
|
||||
@@ -26,17 +91,9 @@ input[type="radio"] {
|
||||
height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
.ui.checkbox input[type="checkbox"]:enabled,
|
||||
.ui.checkbox input[type="radio"]:enabled,
|
||||
.ui.checkbox label:enabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.checkbox label {
|
||||
cursor: auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui.checkbox label,
|
||||
|
||||
@@ -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 */
|
||||
@@ -0,0 +1,569 @@
|
||||
.code-editor-options {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editor-loading {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-loading.is-loading {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.edit.githook .code-editor-container {
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
/* editor layout */
|
||||
.code-editor-container .cm-editor {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-code-bg);
|
||||
font-family: var(--fonts-monospace);
|
||||
font-size: 12px;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor,
|
||||
.code-editor-container .cm-editor .cm-scroller {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-content,
|
||||
.code-editor-container .cm-gutter {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-scroller {
|
||||
overflow: auto;
|
||||
line-height: var(--line-height-code);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-content * {
|
||||
caret-color: inherit;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-cursor,
|
||||
.code-editor-container .cm-dropCursor {
|
||||
border-left-color: var(--color-caret);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
-webkit-mask-image: var(--octicon-x);
|
||||
-webkit-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 */
|
||||
.code-editor-container {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -56,15 +56,6 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment .author {
|
||||
font-size: 1em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.ui.comments .comment a.author {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.comments .comment .metadata {
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
|
||||
@@ -14,3 +14,21 @@
|
||||
.ui.container.medium-width {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.ui.message.web-banner-container {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.message.web-banner-container > .web-banner-content {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - calc(2 * var(--page-margin-x)));
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.ui.message.web-banner-container > button.dismiss-banner {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
@@ -36,8 +36,3 @@ h4.divider {
|
||||
.divider.divider-text::after {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .divider {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,954 @@
|
||||
/* 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 > .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.dropdown .ui.menu > .item::before,
|
||||
.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.menu .right.menu .dropdown:last-child > .menu:not(.left),
|
||||
.ui.menu .right.dropdown.item > .menu:not(.left),
|
||||
.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 > .search.icon,
|
||||
.ui.selection.dropdown > .delete.icon,
|
||||
.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;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
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;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@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 {
|
||||
display: inline-block;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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,
|
||||
.ui.default.dropdown:not(.button) > .text {
|
||||
color: var(--color-placeholder-text);
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.button) > input:focus ~ .default.text,
|
||||
.ui.default.dropdown:not(.button) > input:focus ~ .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.selected,
|
||||
.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.dropdown .upward.menu {
|
||||
top: auto !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
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 > .text > .image,
|
||||
.ui.dropdown .menu > .item > .image,
|
||||
.ui.dropdown .menu > .item > img {
|
||||
margin-left: 0;
|
||||
float: none;
|
||||
margin-right: 0.78571429rem;
|
||||
}
|
||||
|
||||
.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 > .text > img,
|
||||
.ui.dropdown > .text > .image:not(.icon),
|
||||
.ui.dropdown .menu > .item > .image:not(.icon),
|
||||
.ui.dropdown .menu > .item > img {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
margin-top: -0.25rem;
|
||||
margin-bottom: -0.25rem;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
.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.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;
|
||||
}
|
||||
@@ -0,0 +1,483 @@
|
||||
.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.input textarea,
|
||||
.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.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
|
||||
margin-top: 2.41428571em;
|
||||
}
|
||||
.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
|
||||
margin-top: 2.21428571em;
|
||||
}
|
||||
.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
|
||||
margin-top: 2.61428571em;
|
||||
}
|
||||
.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
.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.fields .field > .selection.dropdown,
|
||||
.ui.form .inline.field > .selection.dropdown {
|
||||
width: auto;
|
||||
}
|
||||
.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
|
||||
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ui.form .field .ui.input,
|
||||
.ui.form .fields .field .ui.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.form .inline.fields .field .ui.input,
|
||||
.ui.form .inline.field .ui.input {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.form .fields .field .ui.input input,
|
||||
.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 .ui[class*="left action"].input input {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.ui.form.error .error.message:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.form .fields.error .error.message:not(:empty),
|
||||
.ui.form .field.error .error.message:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
.ui.form .fields.error .field textarea,
|
||||
.ui.form .fields.error .field select,
|
||||
.ui.form .fields.error .field input,
|
||||
.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 .fields.error .field .ui.dropdown,
|
||||
.ui.form .field.error .ui.dropdown {
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
.ui.form .fields.error .field .ui.dropdown:hover,
|
||||
.ui.form .field.error .ui.dropdown:hover {
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
|
||||
.ui.form .field.error .ui.dropdown .menu .item:hover {
|
||||
background-color: var(--color-error-bg-hover);
|
||||
}
|
||||
|
||||
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
|
||||
.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,
|
||||
.ui.form .fields.disabled > label {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
.ui.form .field.disabled :disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.form .required.fields:not(.grouped) > .field > label::after,
|
||||
.ui.form .required.fields.grouped > label::after,
|
||||
.ui.form .required.field > label::after,
|
||||
.ui.form .required.fields:not(.grouped) > .field > .checkbox::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.fields:not(.grouped) > .field > label::after,
|
||||
.ui.form .required.fields.grouped > label::after,
|
||||
.ui.form .required.field > label::after,
|
||||
.ui.form label.required::after {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
|
||||
.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 > label {
|
||||
margin: 0 0 0.28571429rem;
|
||||
color: var(--color-text);
|
||||
font-size: 0.92857143em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
}
|
||||
.ui.form .grouped.fields .field,
|
||||
.ui.form .grouped.inline.fields .field {
|
||||
display: block;
|
||||
margin: 0.5em 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.form .grouped.inline.fields .ui.checkbox {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.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.fields .field > label,
|
||||
.ui.form .inline.fields .field > p,
|
||||
.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.fields .field > input,
|
||||
.ui.form .inline.fields .field > select,
|
||||
.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 .sub.field {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.ui.form .fields.error .field .ui.dropdown,
|
||||
.ui.form .field.error .ui.dropdown,
|
||||
.ui.form .fields.error .field .ui.dropdown:hover,
|
||||
.ui.form .field.error .ui.dropdown:hover {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.form .fields.error .dropdown .menu,
|
||||
.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-background-clip: text;
|
||||
-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;
|
||||
}
|
||||
|
||||
.ui.form .field.muted {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
@@ -38,7 +38,7 @@
|
||||
.ui.input.error > input {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-error-text);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon {
|
||||
@@ -124,7 +124,8 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.action.input:not([class*="left action"]) > input {
|
||||
.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;
|
||||
|
||||
@@ -292,6 +292,7 @@ If the labels-list itself needs some layouts, use extra classes or "tw" helpers.
|
||||
}
|
||||
|
||||
.labels-list a {
|
||||
display: inline-flex;
|
||||
max-width: 100%; /* for ellipsis */
|
||||
}
|
||||
|
||||
|
||||
@@ -25,15 +25,6 @@
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.ui.list > .list > .item::after,
|
||||
.ui.list > .item::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.list .list:not(.icon) {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
|
||||
@@ -41,9 +41,9 @@
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.ui.info.message .header,
|
||||
.ui.blue.message .header {
|
||||
color: var(--color-blue);
|
||||
.ui.message .header {
|
||||
color: inherit;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.ui.info.message,
|
||||
@@ -51,31 +51,17 @@
|
||||
.ui.blue.message,
|
||||
.ui.attached.blue.message {
|
||||
background: var(--color-info-bg);
|
||||
color: var(--color-info-text);
|
||||
border-color: var(--color-info-border);
|
||||
}
|
||||
|
||||
.ui.success.message .header,
|
||||
.ui.positive.message .header,
|
||||
.ui.green.message .header {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.success.message,
|
||||
.ui.attached.success.message,
|
||||
.ui.positive.message,
|
||||
.ui.attached.positive.message {
|
||||
background: var(--color-success-bg);
|
||||
color: var(--color-success-text);
|
||||
border-color: var(--color-success-border);
|
||||
}
|
||||
|
||||
.ui.error.message .header,
|
||||
.ui.negative.message .header,
|
||||
.ui.red.message .header {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.error.message,
|
||||
.ui.attached.error.message,
|
||||
.ui.red.message,
|
||||
@@ -83,21 +69,14 @@
|
||||
.ui.negative.message,
|
||||
.ui.attached.negative.message {
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error-text);
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.warning.message .header,
|
||||
.ui.yellow.message .header {
|
||||
color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.ui.warning.message,
|
||||
.ui.attached.warning.message,
|
||||
.ui.yellow.message,
|
||||
.ui.attached.yellow.message {
|
||||
background: var(--color-warning-bg);
|
||||
color: var(--color-warning-text);
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,290 @@
|
||||
/* 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 > .buttons,
|
||||
.ui.modal .actions > .button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.active.modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scrolling.dimmable > .dimmer {
|
||||
justify-content: flex-start;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.modals.dimmer .ui.scrolling.modal {
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -10,70 +297,12 @@
|
||||
top: 1.2em;
|
||||
}
|
||||
|
||||
.ui.modal > .close.inside {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui.modal > .close.icon[height="16"] {
|
||||
top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.modal > .header {
|
||||
/* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
|
||||
color: var(--color-text-dark);
|
||||
background: var(--color-body);
|
||||
border-color: var(--color-secondary);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.modal > .header .svg {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.modal {
|
||||
background: var(--color-body);
|
||||
box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly
|
||||
Fomantic UI only supports the layout: <div .modal><div .content/><div .actions/></div>
|
||||
However, Gitea uses the following layouts:
|
||||
* <div .modal><div .content><div .actions/></div></div>
|
||||
* <div .modal><form><div .content/><div .actions/></form></div>
|
||||
* <div .modal><div .content><form><div .actions/></form></div></div>
|
||||
* <div .modal><div .content></div><form><div .actions/></form></div>
|
||||
* ...
|
||||
These inconsistent layouts should be refactored to simple ones.
|
||||
*/
|
||||
|
||||
.ui.modal > .content,
|
||||
.ui.modal form > .content {
|
||||
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);
|
||||
border-color: var(--color-secondary);
|
||||
padding: 1rem;
|
||||
text-align: right;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal .content > form > .actions,
|
||||
.ui.modal .content > .actions {
|
||||
padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
|
||||
padding-top: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* positive/negative action buttons */
|
||||
.ui.modal .actions > .ui.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -7,6 +7,11 @@
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* When notification message is present after navbar, hide border to avoid double border */
|
||||
#navbar:has(+ .ui.message) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#navbar .navbar-left,
|
||||
#navbar .navbar-right {
|
||||
display: flex;
|
||||
@@ -63,6 +68,7 @@
|
||||
}
|
||||
#navbar .navbar-mobile-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
@@ -92,7 +98,6 @@
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
|
||||
justify-content: flex-end;
|
||||
width: 50%;
|
||||
min-height: 49px;
|
||||
}
|
||||
#navbar #mobile-stopwatch-icon,
|
||||
@@ -102,12 +107,14 @@
|
||||
}
|
||||
|
||||
#navbar a.item:hover .notification_count,
|
||||
#navbar a.item:hover .header-stopwatch-dot {
|
||||
#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 a.item .header-stopwatch-dot,
|
||||
#navbar .item .navbar-admin-badge {
|
||||
color: var(--color-nav-bg);
|
||||
padding: 0 3.75px;
|
||||
font-size: 12px;
|
||||
@@ -127,6 +134,19 @@
|
||||
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;
|
||||
bottom: calc(100% - 29px);
|
||||
left: calc(100% - 18px);
|
||||
padding: 1.5px;
|
||||
}
|
||||
|
||||
.secondary-nav {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -196,11 +196,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.striped.table > tr:nth-child(2n),
|
||||
.ui.striped.table > tbody > tr:nth-child(2n) {
|
||||
background: var(--color-light);
|
||||
}
|
||||
|
||||
.ui.table[class*="single line"],
|
||||
.ui.table [class*="single line"] {
|
||||
white-space: nowrap;
|
||||
@@ -291,37 +286,10 @@
|
||||
.ui.basic.table > tr > td {
|
||||
background: transparent;
|
||||
}
|
||||
.ui.basic.striped.table > tbody > tr:nth-child(2n) {
|
||||
background: var(--color-light);
|
||||
}
|
||||
.ui.basic.striped.selectable.table > tbody > tr:nth-child(2n):hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui[class*="very basic"].table {
|
||||
border: none;
|
||||
}
|
||||
.ui[class*="very basic"].table:not(.striped) > tr > th:first-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > thead > tr > th:first-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tbody > tr > th:first-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:first-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tr > td:first-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tbody > tr > td:first-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.ui[class*="very basic"].table:not(.striped) > tr > th:last-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > thead > tr > th:last-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tbody > tr > th:last-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:last-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tr > td:last-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tbody > tr > td:last-child,
|
||||
.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.ui[class*="very basic"].table:not(.striped) > thead > tr:first-child > th {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.celled.table > tr > th,
|
||||
.ui.celled.table > thead > tr > th,
|
||||
|
||||
Reference in New Issue
Block a user