This commit is contained in:
@@ -13,6 +13,7 @@
|
||||
}
|
||||
|
||||
.btn.is-loading > *,
|
||||
.btn-octicon.is-loading > *,
|
||||
.button.is-loading > * {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -23,7 +24,7 @@
|
||||
display: block;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: min(4em, 66.6%);
|
||||
height: var(--loading-size, min(4em, 66.6%));
|
||||
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -100,13 +101,6 @@ code.language-math.is-loading::after {
|
||||
animation: pulse-1p5 200ms linear;
|
||||
}
|
||||
|
||||
.ui.modal,
|
||||
.ui.dimmer.transition {
|
||||
animation-name: fadein;
|
||||
animation-duration: 100ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.rotate-clockwise {
|
||||
animation: rotate-clockwise-keyframes 1s linear infinite;
|
||||
}
|
||||
|
||||
@@ -21,10 +21,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.button:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px currentcolor;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.button {
|
||||
white-space: normal;
|
||||
@@ -330,11 +326,6 @@
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
.delete-button,
|
||||
.delete-button:hover {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
|
||||
|
||||
.btn {
|
||||
|
||||
@@ -122,14 +122,3 @@ a.ui.card:hover {
|
||||
color: var(--color-text);
|
||||
border-top-color: var(--color-secondary-light-1) !important;
|
||||
}
|
||||
|
||||
.ui.three.cards {
|
||||
margin-left: -1em;
|
||||
margin-right: -1em;
|
||||
}
|
||||
|
||||
.ui.three.cards > .card {
|
||||
width: calc(33.33333333333333% - 2em);
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
@@ -35,13 +35,9 @@ input[type="checkbox"]::before {
|
||||
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,
|
||||
@@ -67,9 +63,7 @@ input[type="radio"]:disabled:checked {
|
||||
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 {
|
||||
@@ -105,6 +99,7 @@ input[type="checkbox"]:indeterminate::before {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.disabled.checkbox input,
|
||||
.ui.disabled.checkbox label,
|
||||
.ui.checkbox input[disabled] ~ label {
|
||||
cursor: default !important;
|
||||
|
||||
@@ -13,40 +13,33 @@
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.edit.githook .code-editor-container {
|
||||
border: 1px solid var(--color-secondary);
|
||||
.code-editor-container {
|
||||
position: relative; /* for command panel */
|
||||
background-color: var(--color-code-bg); /* fully colorize the container and editor */
|
||||
}
|
||||
|
||||
.ui.bottom.attached.segment .code-editor-container,
|
||||
.ui.bottom.attached.segment .code-editor-container .cm-scroller {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius); /* avoid overflow parent's border with radius */
|
||||
}
|
||||
|
||||
/* editor layout */
|
||||
.code-editor-container .cm-editor {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-code-bg);
|
||||
font-family: var(--fonts-monospace);
|
||||
font-size: 12px;
|
||||
max-height: 90vh;
|
||||
/* it was written as "min-height: 90vh; max-height: 90vh", so maybe the author prefer to always use about 90vh.
|
||||
here, minus 80px to keep spaces for the top toolbar */
|
||||
height: max(200px, calc(95vh - 80px));
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor,
|
||||
.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-editor.cm-focused {
|
||||
outline: none; /* don't show the default focus outline when the editor gets focused */
|
||||
}
|
||||
|
||||
.code-editor-container .cm-content {
|
||||
padding: 0;
|
||||
caret-color: var(--color-caret);
|
||||
padding: 0; /* avoid the small top and bottom padding */
|
||||
}
|
||||
|
||||
.code-editor-container .cm-cursor,
|
||||
@@ -54,10 +47,6 @@
|
||||
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);
|
||||
@@ -127,8 +116,6 @@
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -338,10 +325,6 @@
|
||||
}
|
||||
|
||||
/* command palette */
|
||||
.code-editor-container {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.cm-command-palette {
|
||||
position: absolute;
|
||||
|
||||
@@ -32,23 +32,6 @@
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .comments {
|
||||
margin: 0 0 0.5em 0.5em;
|
||||
padding: 1em 0 1em 1em;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .comments::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .comments .comment {
|
||||
border: none;
|
||||
border-top: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -56,21 +39,6 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment .metadata {
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.ui.comments .comment .metadata > * {
|
||||
display: inline-block;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment .metadata > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment .text {
|
||||
margin: 0.25em 0 0.5em;
|
||||
font-size: 1em;
|
||||
|
||||
@@ -36,3 +36,11 @@ h4.divider {
|
||||
.divider.divider-text::after {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.inline-divider {
|
||||
display: inline-block;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
margin: 0 var(--gap-inline);
|
||||
}
|
||||
|
||||
@@ -80,6 +80,10 @@
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .hidden { /* for hidden items and dividers */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .header {
|
||||
margin: 1rem 0 0.75rem;
|
||||
padding: 0 1.14285714rem;
|
||||
@@ -209,7 +213,6 @@ select.ui.dropdown {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border-top-width: 0 !important;
|
||||
outline: none;
|
||||
margin: 0 -1px;
|
||||
@@ -379,7 +382,6 @@ select.ui.dropdown {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
@@ -439,7 +441,6 @@ select.ui.dropdown {
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label {
|
||||
display: inline-block;
|
||||
white-space: normal;
|
||||
font-size: 1em;
|
||||
padding: 0.35714286em 0.78571429em;
|
||||
@@ -447,6 +448,11 @@ select.ui.dropdown {
|
||||
box-shadow: 0 0 0 1px var(--color-secondary) inset;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label img {
|
||||
width: auto;
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.ui.multiple.dropdown > .text {
|
||||
position: static;
|
||||
@@ -653,7 +659,6 @@ select.ui.dropdown {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
min-width: 100% !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
@@ -124,18 +124,12 @@ textarea:focus,
|
||||
.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 */
|
||||
@@ -289,15 +283,11 @@ textarea:focus,
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
}
|
||||
.ui.form .grouped.fields .field,
|
||||
.ui.form .grouped.inline.fields .field {
|
||||
.ui.form .grouped.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;
|
||||
|
||||
@@ -10,10 +10,6 @@
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.ui.relaxed.grid {
|
||||
margin-left: -1.5rem;
|
||||
margin-right: -1.5rem;
|
||||
}
|
||||
.ui[class*="very relaxed"].grid {
|
||||
margin-left: -2.5rem;
|
||||
margin-right: -2.5rem;
|
||||
@@ -71,18 +67,10 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
|
||||
.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.grid .row + .ui.divider {
|
||||
flex-grow: 1;
|
||||
margin: 1rem;
|
||||
}
|
||||
.ui.grid .column + .ui.vertical.divider {
|
||||
height: calc(50% - 1rem);
|
||||
}
|
||||
|
||||
.ui.grid > .row > .column:last-child > .horizontal.segment,
|
||||
.ui.grid > .column:last-child > .horizontal.segment {
|
||||
@@ -140,119 +128,14 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui[class*="one column"].grid > .row > .column,
|
||||
.ui[class*="one column"].grid > .column:not(.row) {
|
||||
width: 100%;
|
||||
}
|
||||
.ui[class*="two column"].grid > .row > .column,
|
||||
.ui[class*="two column"].grid > .column:not(.row) {
|
||||
width: 50%;
|
||||
}
|
||||
.ui[class*="three column"].grid > .row > .column,
|
||||
.ui[class*="three column"].grid > .column:not(.row) {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.ui[class*="four column"].grid > .row > .column,
|
||||
.ui[class*="four column"].grid > .column:not(.row) {
|
||||
width: 25%;
|
||||
}
|
||||
.ui[class*="five column"].grid > .row > .column,
|
||||
.ui[class*="five column"].grid > .column:not(.row) {
|
||||
width: 20%;
|
||||
}
|
||||
.ui[class*="six column"].grid > .row > .column,
|
||||
.ui[class*="six column"].grid > .column:not(.row) {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.ui[class*="seven column"].grid > .row > .column,
|
||||
.ui[class*="seven column"].grid > .column:not(.row) {
|
||||
width: 14.28571429%;
|
||||
}
|
||||
.ui[class*="eight column"].grid > .row > .column,
|
||||
.ui[class*="eight column"].grid > .column:not(.row) {
|
||||
width: 12.5%;
|
||||
}
|
||||
.ui[class*="nine column"].grid > .row > .column,
|
||||
.ui[class*="nine column"].grid > .column:not(.row) {
|
||||
width: 11.11111111%;
|
||||
}
|
||||
.ui[class*="ten column"].grid > .row > .column,
|
||||
.ui[class*="ten column"].grid > .column:not(.row) {
|
||||
width: 10%;
|
||||
}
|
||||
.ui[class*="eleven column"].grid > .row > .column,
|
||||
.ui[class*="eleven column"].grid > .column:not(.row) {
|
||||
width: 9.09090909%;
|
||||
}
|
||||
.ui[class*="twelve column"].grid > .row > .column,
|
||||
.ui[class*="twelve column"].grid > .column:not(.row) {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.ui[class*="thirteen column"].grid > .row > .column,
|
||||
.ui[class*="thirteen column"].grid > .column:not(.row) {
|
||||
width: 7.69230769%;
|
||||
}
|
||||
.ui[class*="fourteen column"].grid > .row > .column,
|
||||
.ui[class*="fourteen column"].grid > .column:not(.row) {
|
||||
width: 7.14285714%;
|
||||
}
|
||||
.ui[class*="fifteen column"].grid > .row > .column,
|
||||
.ui[class*="fifteen column"].grid > .column:not(.row) {
|
||||
width: 6.66666667%;
|
||||
}
|
||||
.ui[class*="sixteen column"].grid > .row > .column,
|
||||
.ui[class*="sixteen column"].grid > .column:not(.row) {
|
||||
width: 6.25%;
|
||||
}
|
||||
|
||||
.ui.grid > [class*="one column"].row > .column {
|
||||
width: 100% !important;
|
||||
}
|
||||
.ui.grid > [class*="two column"].row > .column {
|
||||
width: 50% !important;
|
||||
}
|
||||
.ui.grid > [class*="three column"].row > .column {
|
||||
width: 33.33333333% !important;
|
||||
}
|
||||
.ui.grid > [class*="four column"].row > .column {
|
||||
width: 25% !important;
|
||||
}
|
||||
.ui.grid > [class*="five column"].row > .column {
|
||||
width: 20% !important;
|
||||
}
|
||||
.ui.grid > [class*="six column"].row > .column {
|
||||
width: 16.66666667% !important;
|
||||
}
|
||||
.ui.grid > [class*="seven column"].row > .column {
|
||||
width: 14.28571429% !important;
|
||||
}
|
||||
.ui.grid > [class*="eight column"].row > .column {
|
||||
width: 12.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="nine column"].row > .column {
|
||||
width: 11.11111111% !important;
|
||||
}
|
||||
.ui.grid > [class*="ten column"].row > .column {
|
||||
width: 10% !important;
|
||||
}
|
||||
.ui.grid > [class*="eleven column"].row > .column {
|
||||
width: 9.09090909% !important;
|
||||
}
|
||||
.ui.grid > [class*="twelve column"].row > .column {
|
||||
width: 8.33333333% !important;
|
||||
}
|
||||
.ui.grid > [class*="thirteen column"].row > .column {
|
||||
width: 7.69230769% !important;
|
||||
}
|
||||
.ui.grid > [class*="fourteen column"].row > .column {
|
||||
width: 7.14285714% !important;
|
||||
}
|
||||
.ui.grid > [class*="fifteen column"].row > .column {
|
||||
width: 6.66666667% !important;
|
||||
}
|
||||
.ui.grid > [class*="sixteen column"].row > .column {
|
||||
width: 6.25% !important;
|
||||
}
|
||||
|
||||
.ui.grid > .row > [class*="one wide"].column,
|
||||
.ui.grid > .column.row > [class*="one wide"].column,
|
||||
@@ -302,12 +185,6 @@
|
||||
.ui.column.grid > [class*="eight wide"].column {
|
||||
width: 50% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="nine wide"].column,
|
||||
.ui.grid > .column.row > [class*="nine wide"].column,
|
||||
.ui.grid > [class*="nine wide"].column,
|
||||
.ui.column.grid > [class*="nine wide"].column {
|
||||
width: 56.25% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="ten wide"].column,
|
||||
.ui.grid > .column.row > [class*="ten wide"].column,
|
||||
.ui.grid > [class*="ten wide"].column,
|
||||
@@ -338,12 +215,6 @@
|
||||
.ui.column.grid > [class*="fourteen wide"].column {
|
||||
width: 87.5% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="fifteen wide"].column,
|
||||
.ui.grid > .column.row > [class*="fifteen wide"].column,
|
||||
.ui.grid > [class*="fifteen wide"].column,
|
||||
.ui.column.grid > [class*="fifteen wide"].column {
|
||||
width: 93.75% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="sixteen wide"].column,
|
||||
.ui.grid > .column.row > [class*="sixteen wide"].column,
|
||||
.ui.grid > [class*="sixteen wide"].column,
|
||||
@@ -352,14 +223,12 @@
|
||||
}
|
||||
|
||||
.ui.centered.grid,
|
||||
.ui.centered.grid > .row,
|
||||
.ui.grid > .centered.row {
|
||||
.ui.centered.grid > .row {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
|
||||
.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
|
||||
.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
|
||||
.ui.centered.grid > .row > .column:not(.aligned):not(.justified) {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.grid > .centered.column,
|
||||
@@ -369,12 +238,6 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.relaxed.grid > .column:not(.row),
|
||||
.ui.relaxed.grid > .row > .column,
|
||||
.ui.grid > .relaxed.row > .column {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
.ui[class*="very relaxed"].grid > .column:not(.row),
|
||||
.ui[class*="very relaxed"].grid > .row > .column,
|
||||
.ui.grid > [class*="very relaxed"].row > .column {
|
||||
@@ -382,11 +245,6 @@
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.ui.relaxed.grid .row + .ui.divider,
|
||||
.ui.grid .relaxed.row + .ui.divider {
|
||||
margin-left: 1.5rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
.ui[class*="very relaxed"].grid .row + .ui.divider,
|
||||
.ui.grid [class*="very relaxed"].row + .ui.divider {
|
||||
margin-left: 2.5rem;
|
||||
@@ -439,23 +297,3 @@
|
||||
margin-right: -1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.ui.ui.compact.grid > .column:not(.row),
|
||||
.ui.ui.ui.compact.grid > .row > .column {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.ui.ui.ui.compact.grid > * {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.ui.ui.ui.compact.grid > .row {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ui.ui.ui.compact.grid > .column:not(.row) {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -24,10 +24,6 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > .ui.label.compact {
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: var(--font-weight-normal);
|
||||
@@ -97,6 +93,8 @@ h4.ui.header .sub.header {
|
||||
background: var(--color-box-header);
|
||||
padding: 0.78571429rem 1rem;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px); /* the same as "ui attached segment" */
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
@@ -69,42 +69,24 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.ui.ui.ui.icon.input > textarea,
|
||||
.ui.ui.ui.ui.icon.input > input {
|
||||
padding-right: 2.67142857em;
|
||||
}
|
||||
.ui.icon.input > i.link.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.icon.input > i.circular.icon {
|
||||
top: 0.35em;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input > i.icon {
|
||||
right: auto;
|
||||
left: 1px;
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui[class*="left icon"].input > i.circular.icon {
|
||||
right: auto;
|
||||
left: 0.5em;
|
||||
}
|
||||
.ui.ui.ui.ui[class*="left icon"].input > textarea,
|
||||
.ui.ui.ui.ui[class*="left icon"].input > input {
|
||||
padding-left: 2.67142857em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.ui.icon.input > textarea:focus ~ .icon,
|
||||
.ui.icon.input > input:focus ~ .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.icon.input > textarea ~ i.icon {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.ui.form .field.error > .ui.action.input > .ui.button,
|
||||
.ui.action.input.error > .ui.button {
|
||||
border-top: 1px solid var(--color-error-border);
|
||||
|
||||
@@ -33,31 +33,16 @@ a.ui.label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.label > img {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
height: 2.1666em;
|
||||
}
|
||||
|
||||
.ui.label > .color-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ui.label > .icon {
|
||||
width: auto;
|
||||
margin: 0 0.75em 0 0;
|
||||
}
|
||||
|
||||
.ui.label > .detail {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-left: 1em;
|
||||
margin-left: 0.5em; /* our .ui.label already provides flex gap, so the margin here shouldn't be too large */
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ui.label > .detail .icon {
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
.ui.label > .close.icon,
|
||||
.ui.label > .delete.icon {
|
||||
@@ -184,12 +169,6 @@ a.ui.ui.ui.basic.yellow.label:hover {
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
color: var(--color-yellow-dark-1);
|
||||
}
|
||||
.ui.ui.ui.olive.label {
|
||||
background: var(--color-olive);
|
||||
border-color: var(--color-olive);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.ui.ui.ui.green.label {
|
||||
background: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
@@ -221,16 +200,6 @@ a.ui.ui.ui.purple.label:hover {
|
||||
border-color: var(--color-purple-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.purple.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-purple);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
a.ui.ui.ui.basic.purple.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-purple-dark-1);
|
||||
color: var(--color-purple-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.grey.label {
|
||||
background: var(--color-label-bg);
|
||||
@@ -242,16 +211,6 @@ a.ui.ui.ui.grey.label:hover {
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.grey.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
a.ui.ui.ui.basic.grey.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-label-hover-bg);
|
||||
}
|
||||
|
||||
/* "horizontal label" is actually "fat label" which has enough padding spaces to be used standalone in headers */
|
||||
.ui.horizontal.label {
|
||||
@@ -284,30 +243,37 @@ a.ui.ui.ui.basic.grey.label:hover {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout.
|
||||
If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
|
||||
/* labels-list layout: span.labels-list > a.item > span.ui.label,
|
||||
by default, the labels list is rendered as "display: inline",
|
||||
it can also be rendered as flex by adding flex-related classes (the general ".item" selector also applies) */
|
||||
.labels-list {
|
||||
display: contents;
|
||||
font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
|
||||
max-width: 100%; /* for ellipsis */
|
||||
font-size: var(--font-size-label); /* must match the label font size, otherwise the height mismatches */
|
||||
}
|
||||
|
||||
.labels-list a {
|
||||
display: inline-flex;
|
||||
.labels-list > .item {
|
||||
max-width: 100%; /* for ellipsis */
|
||||
}
|
||||
|
||||
.labels-list a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.labels-list .ui.label {
|
||||
min-height: 20px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.with-labels-list-inline .labels-list .ui.label + .ui.label {
|
||||
margin-left: var(--gap-inline);
|
||||
/* to align with different font sizes, these styles need to be written separately */
|
||||
#issue-list .labels-list > .item {
|
||||
margin-right: 4px; /* margin-right (not margin-left) keeps wrapped labels left-aligned */
|
||||
vertical-align: 2.5px; /* compensates inline-flex baseline so labels center with text */
|
||||
}
|
||||
|
||||
.with-labels-list-inline .labels-list .ui.label {
|
||||
line-height: var(--line-height-default);
|
||||
.timeline-item .labels-list > .item {
|
||||
margin-right: 4px;
|
||||
vertical-align: 1.5px;
|
||||
}
|
||||
|
||||
/* Scoped labels with different colors on left and right */
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
.ui.menu:not(.vertical) .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap-inline);
|
||||
}
|
||||
|
||||
.ui.menu .item {
|
||||
@@ -173,24 +174,6 @@
|
||||
margin-top: 0.35714286em;
|
||||
}
|
||||
|
||||
.ui.menu .pointing.dropdown.item .menu {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.ui.menu .item > .label:not(.floating) {
|
||||
margin-left: 1em;
|
||||
padding: 0.3em 0.78571429em;
|
||||
}
|
||||
.ui.vertical.menu .item > .label {
|
||||
margin-top: -0.15em;
|
||||
margin-bottom: -0.15em;
|
||||
padding: 0.3em 0.78571429em;
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.ui.menu .item > .floating.label {
|
||||
padding: 0.3em 0.78571429em;
|
||||
}
|
||||
.ui.menu .item > .label {
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
@@ -266,22 +249,12 @@
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .center.item {
|
||||
display: flex;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ui.menu .right.item::before,
|
||||
.ui.menu .right.menu > .item::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.menu .center.item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.vertical.menu {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
@@ -302,16 +275,6 @@
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item > i.icon {
|
||||
width: 1.18em;
|
||||
float: right;
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
.ui.vertical.menu .item > .label + i.icon {
|
||||
float: none;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
@@ -328,6 +291,7 @@
|
||||
.ui.vertical.menu .item > .menu {
|
||||
margin: 0.5em -1.14285714em 0;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .menu .item {
|
||||
background: none;
|
||||
padding: 0.5em 1.33333333em;
|
||||
@@ -381,9 +345,6 @@
|
||||
background: none transparent;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.tabular.fluid.menu {
|
||||
width: calc(100% + 2px) !important;
|
||||
}
|
||||
.ui.tabular.menu .item {
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
@@ -523,14 +484,6 @@
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.secondary.item.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui.secondary.item.menu .item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
|
||||
margin: 0 -0.92857143em;
|
||||
}
|
||||
@@ -624,10 +577,6 @@
|
||||
.ui.stackable.menu .right.item {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .center.item {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .right.menu,
|
||||
.ui.stackable.menu .left.menu {
|
||||
flex-direction: column;
|
||||
@@ -635,8 +584,7 @@
|
||||
}
|
||||
|
||||
.ui.borderless.menu .item::before,
|
||||
.ui.borderless.menu .item .menu .item::before,
|
||||
.ui.menu .borderless.item::before {
|
||||
.ui.borderless.menu .item .menu .item::before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
@@ -646,19 +594,12 @@
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ui.compact.vertical.menu {
|
||||
display: inline-block;
|
||||
width: auto !important;
|
||||
}
|
||||
.ui.compact.menu:not(.secondary) .item:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
.ui.compact.menu .item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
.ui.compact.vertical.menu .item:last-child::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.menu.fluid,
|
||||
.ui.vertical.menu.fluid {
|
||||
@@ -675,9 +616,6 @@
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui.attached.item.menu:not(.tabular) {
|
||||
margin: 0 -1px !important;
|
||||
}
|
||||
.ui.item.menu .item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,30 @@
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
details.ui.message {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details.ui.message summary {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
|
||||
details.ui.message pre {
|
||||
margin: -1.25em 0 0;
|
||||
padding: 0.5em 1.5em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
details.ui.message:not(:has(pre)) summary {
|
||||
list-style: none;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ui.message.flash-message pre {
|
||||
white-space: pre-line;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.message:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -65,7 +89,6 @@
|
||||
.ui.error.message,
|
||||
.ui.attached.error.message,
|
||||
.ui.red.message,
|
||||
.ui.attached.red.message,
|
||||
.ui.negative.message,
|
||||
.ui.attached.negative.message {
|
||||
background: var(--color-error-bg);
|
||||
@@ -73,9 +96,7 @@
|
||||
}
|
||||
|
||||
.ui.warning.message,
|
||||
.ui.attached.warning.message,
|
||||
.ui.yellow.message,
|
||||
.ui.attached.yellow.message {
|
||||
.ui.attached.warning.message {
|
||||
background: var(--color-warning-bg);
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
|
||||
@@ -179,13 +179,8 @@
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.fitted.segment:not(.horizontally) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.ui.fitted.segment:not(.vertically) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
.ui.fitted.segment {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.segments .segment,
|
||||
|
||||
@@ -2,14 +2,10 @@
|
||||
and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */
|
||||
.svg:not(.git-entry-icon) {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
vertical-align: middle; /* middle is the best choice for different font sizes from 1px to 36px when no flex */
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.middle .svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* some browsers like Chrome have a bug: when a SVG is in a "display: none" container and referenced
|
||||
somewhere else by `<use href="#id">`, it won't be rendered correctly. e.g.: ".kts -> kotlin" */
|
||||
.svg-icon-container {
|
||||
@@ -50,3 +46,9 @@
|
||||
.svg[width="36"] { min-width: 36px; }
|
||||
.svg[width="48"] { min-width: 48px; }
|
||||
.svg[width="56"] { min-width: 56px; }
|
||||
|
||||
/* when the svg is used in menu or item, it's certain that we don't want it to be shrunk */
|
||||
.menu .svg,
|
||||
.item .svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -161,11 +161,6 @@
|
||||
.ui.fixed.table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
.ui.fixed.table th,
|
||||
.ui.fixed.table td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ui.selectable.table > tbody > tr:hover,
|
||||
.ui.table tbody tr td.selectable:hover {
|
||||
@@ -226,18 +221,10 @@
|
||||
.ui.table td.six.wide {
|
||||
width: 37.5%;
|
||||
}
|
||||
.ui.table th.seven.wide,
|
||||
.ui.table td.seven.wide {
|
||||
width: 43.75%;
|
||||
}
|
||||
.ui.table th.eight.wide,
|
||||
.ui.table td.eight.wide {
|
||||
width: 50%;
|
||||
}
|
||||
.ui.table th.nine.wide,
|
||||
.ui.table td.nine.wide {
|
||||
width: 56.25%;
|
||||
}
|
||||
.ui.table th.ten.wide,
|
||||
.ui.table td.ten.wide {
|
||||
width: 62.5%;
|
||||
@@ -246,26 +233,6 @@
|
||||
.ui.table td.eleven.wide {
|
||||
width: 68.75%;
|
||||
}
|
||||
.ui.table th.twelve.wide,
|
||||
.ui.table td.twelve.wide {
|
||||
width: 75%;
|
||||
}
|
||||
.ui.table th.thirteen.wide,
|
||||
.ui.table td.thirteen.wide {
|
||||
width: 81.25%;
|
||||
}
|
||||
.ui.table th.fourteen.wide,
|
||||
.ui.table td.fourteen.wide {
|
||||
width: 87.5%;
|
||||
}
|
||||
.ui.table th.fifteen.wide,
|
||||
.ui.table td.fifteen.wide {
|
||||
width: 93.75%;
|
||||
}
|
||||
.ui.table th.sixteen.wide,
|
||||
.ui.table td.sixteen.wide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.basic.table {
|
||||
background: transparent;
|
||||
|
||||
@@ -22,6 +22,10 @@
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.toast-body pre {
|
||||
white-space: pre-wrap; /* online editor, when git hook fails, the rendered message uses "pre" */
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
border-radius: var(--border-radius);
|
||||
width: 30px;
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
/* styles for Fomantic transition (toggle): dimmer, modal, dropdown menu */
|
||||
|
||||
/* this is the only place using "hidden" and "visible" classes, it can safely work with tailwind without prefix in the future */
|
||||
.ui.modal.transition.hidden,
|
||||
.ui.dropdown > .menu.transition.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.modal.transition.visible,
|
||||
.ui.dropdown > .menu.transition.visible {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* dimmer uses "active" but not "hidden/visible" classes, no special classes for it here */
|
||||
|
||||
/* only modal and dimmer need animation, dropdown menu doesn't */
|
||||
.ui.modal.transition,
|
||||
.ui.dimmer.transition {
|
||||
animation-name: fadein;
|
||||
animation-duration: 100ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
Reference in New Issue
Block a user