gitea source for verification 2026-05-22
This commit is contained in:
127
web_src/css/modules/animations.css
Normal file
127
web_src/css/modules/animations.css
Normal file
@@ -0,0 +1,127 @@
|
||||
@keyframes isloadingspin {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
pointer-events: none !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.is-loading > * {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.btn.is-loading > *,
|
||||
.button.is-loading > * {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.is-loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: min(4em, 66.6%);
|
||||
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: isloadingspin 1000ms infinite linear;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
|
||||
border-radius: var(--border-radius-full);
|
||||
}
|
||||
|
||||
.is-loading.loading-icon-2px::after {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.is-loading.loading-icon-3px::after {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
|
||||
form.single-button-form.is-loading > * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
form.single-button-form.is-loading .button {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.markup pre.is-loading,
|
||||
.editor-loading.is-loading {
|
||||
height: var(--height-loading);
|
||||
}
|
||||
|
||||
.markup .is-loading > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markup .is-loading {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* TODO: not needed, use "is-loading loading-icon-2px" instead */
|
||||
code.language-math.is-loading::after {
|
||||
padding: 0;
|
||||
border-width: 2px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@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% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* pulse animation for scale(1.5) in 200ms */
|
||||
.pulse-1p5-200 {
|
||||
animation: pulse-1p5 200ms linear;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@keyframes rotate-clockwise-keyframes {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
10
web_src/css/modules/breadcrumb.css
Normal file
10
web_src/css/modules/breadcrumb.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumb-divider {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
410
web_src/css/modules/button.css
Normal file
410
web_src/css/modules/button.css
Normal file
@@ -0,0 +1,410 @@
|
||||
.ui.button {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
outline: none;
|
||||
font-family: var(--fonts-regular);
|
||||
margin: 0 0.25em 0 0;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: var(--border-radius);
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
justify-content: center;
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.button:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px currentcolor;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.button {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.active.button,
|
||||
.ui.button:active,
|
||||
.ui.active.button:active,
|
||||
.ui.active.button:hover {
|
||||
background: var(--color-active);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.buttons .disabled.button:not(.basic),
|
||||
.ui.disabled.button,
|
||||
.ui.button:disabled,
|
||||
.ui.disabled.button:hover,
|
||||
.ui.disabled.active.button {
|
||||
cursor: default;
|
||||
opacity: var(--opacity-disabled) !important;
|
||||
background-image: none;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* there is no "ui labeled icon button" support" because it is not used */
|
||||
.ui.labeled.button:not(.icon) {
|
||||
flex-direction: row;
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
min-height: unset;
|
||||
}
|
||||
.ui.labeled.button > .button {
|
||||
margin: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.ui.labeled.button > .label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 -1px !important;
|
||||
font-size: 1em;
|
||||
border-color: var(--color-light-border);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.ui.labeled.button > .label:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
.ui.labeled.button > .button:hover + .label {
|
||||
border-left-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.button > .icon:not(.button) {
|
||||
height: auto;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
|
||||
.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
|
||||
margin: 0 0.42857143em 0 -0.21428571em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
|
||||
margin: 0 -0.21428571em 0 0.42857143em;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
min-height: 38px;
|
||||
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
|
||||
}
|
||||
.ui.compact.buttons .button,
|
||||
.ui.compact.button {
|
||||
padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.compact.icon.buttons .button,
|
||||
.ui.compact.icon.button {
|
||||
padding: 0.57em /* around 8px */;
|
||||
}
|
||||
|
||||
/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
|
||||
.ui.mini.buttons .dropdown,
|
||||
.ui.mini.buttons .dropdown .menu > .item,
|
||||
.ui.mini.buttons .button,
|
||||
.ui.ui.ui.ui.mini.button {
|
||||
font-size: 11px;
|
||||
min-height: 30px;
|
||||
}
|
||||
.ui.ui.ui.ui.mini.button.compact {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
|
||||
.ui.tiny.buttons .dropdown,
|
||||
.ui.tiny.buttons .dropdown .menu > .item,
|
||||
.ui.tiny.buttons .button,
|
||||
.ui.ui.ui.ui.tiny.button {
|
||||
font-size: 12px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.ui.ui.ui.tiny.button.compact {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
|
||||
.ui.small.buttons .dropdown,
|
||||
.ui.small.buttons .dropdown .menu > .item,
|
||||
.ui.small.buttons .button,
|
||||
.ui.ui.ui.ui.small.button {
|
||||
font-size: 13px;
|
||||
min-height: 34px;
|
||||
}
|
||||
.ui.ui.ui.ui.small.button.compact {
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.ui.icon.buttons .button,
|
||||
.ui.icon.button:not(.compact) {
|
||||
padding: 0.57em;
|
||||
}
|
||||
.ui.icon.buttons .button > .icon,
|
||||
.ui.icon.button > .icon {
|
||||
margin: 0 !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button,
|
||||
.ui.basic.button {
|
||||
border-radius: var(--border-radius);
|
||||
background: none;
|
||||
}
|
||||
.ui.basic.buttons {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
.ui.basic.buttons .button {
|
||||
border-radius: 0;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.labeled.button.disabled > .button,
|
||||
.ui.basic.buttons .button,
|
||||
.ui.basic.button {
|
||||
color: var(--color-text-light);
|
||||
background: var(--color-button);
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button:hover,
|
||||
.ui.basic.button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button:active,
|
||||
.ui.basic.button:active,
|
||||
.ui.basic.buttons .active.button,
|
||||
.ui.basic.active.button,
|
||||
.ui.basic.buttons .active.button:hover,
|
||||
.ui.basic.active.button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.button.toggle.active {
|
||||
background-color: var(--color-green);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.button.toggle.active:hover {
|
||||
background-color: var(--color-green-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.ui.fluid.button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.ui.primary.button:active,
|
||||
.ui.primary.buttons .button:active {
|
||||
background: var(--color-primary-active);
|
||||
}
|
||||
|
||||
.ui.basic.primary.buttons .button,
|
||||
.ui.basic.primary.button {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.primary.buttons .button:hover,
|
||||
.ui.basic.primary.button:hover {
|
||||
color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.ui.basic.primary.buttons .button:active,
|
||||
.ui.basic.primary.button:active {
|
||||
color: var(--color-primary-active);
|
||||
border-color: var(--color-primary-active);
|
||||
}
|
||||
|
||||
.ui.red.button,
|
||||
.ui.red.buttons .button {
|
||||
color: var(--color-white);
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.red.button:hover,
|
||||
.ui.red.buttons .button:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.red.button:active,
|
||||
.ui.red.buttons .button:active {
|
||||
background: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.red.buttons .button,
|
||||
.ui.basic.red.button {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.red.buttons .button:hover,
|
||||
.ui.basic.red.button:hover {
|
||||
color: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.red.buttons .button:active,
|
||||
.ui.basic.red.button:active {
|
||||
color: var(--color-red-dark-2);
|
||||
border-color: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
.ui.green.button,
|
||||
.ui.green.buttons .button {
|
||||
color: var(--color-white);
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.green.button:hover,
|
||||
.ui.green.buttons .button:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.green.button:active,
|
||||
.ui.green.buttons .button:active {
|
||||
background: var(--color-green-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.green.buttons .button,
|
||||
.ui.basic.green.button {
|
||||
color: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.green.buttons .button:hover,
|
||||
.ui.basic.green.button:hover {
|
||||
color: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.green.buttons .button:active,
|
||||
.ui.basic.green.button:active {
|
||||
color: var(--color-green-dark-2);
|
||||
border-color: var(--color-green-dark-2);
|
||||
}
|
||||
|
||||
.ui.buttons {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
font-size: 0;
|
||||
vertical-align: baseline;
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: transparent;
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:active {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.btn,
|
||||
a.btn:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn.tiny {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn.small {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
|
||||
And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
|
||||
It needs some tricks to tweak the left/right borders with active state */
|
||||
|
||||
.ui.buttons .button {
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ui.buttons .button:first-child {
|
||||
border-left: none;
|
||||
margin-left: 0;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
.ui.buttons .button:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.buttons .button:hover {
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.buttons .button:hover + .button {
|
||||
border-left: 1px solid var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
|
||||
.ui.buttons .button:first-child,
|
||||
.ui.buttons .button.tw-hidden:first-child + .button {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button:last-child,
|
||||
.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
|
||||
border-right: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button.active {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
border-right: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button.active + .button {
|
||||
border-left: none;
|
||||
}
|
||||
135
web_src/css/modules/card.css
Normal file
135
web_src/css/modules/card.css
Normal file
@@ -0,0 +1,135 @@
|
||||
/* Below styles are a subset of the full fomantic card styles which are */
|
||||
/* needed to get all current uses of fomantic cards working. */
|
||||
/* TODO: remove all these styles and use custom styling instead */
|
||||
|
||||
.ui.card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.card:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.cards > .card,
|
||||
.ui.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
width: 290px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
box-shadow: none;
|
||||
overflow-wrap: break-word;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.ui.cards {
|
||||
display: flex;
|
||||
margin: -0.875em -0.5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui.cards > .card {
|
||||
display: flex;
|
||||
margin: 0.875em 0.5em;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content,
|
||||
.ui.card > .content {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
max-width: 100%;
|
||||
padding: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .meta + .description,
|
||||
.ui.cards > .card > .content > .header + .description,
|
||||
.ui.card > .content > .meta + .description,
|
||||
.ui.card > .content > .header + .description {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header:not(.ui),
|
||||
.ui.card > .content > .header:not(.ui) {
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 1.28571429em;
|
||||
margin-top: -.21425em;
|
||||
line-height: 1.28571429;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content:first-child,
|
||||
.ui.card > .content:first-child {
|
||||
border-top: none;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
.ui.cards > .card > :last-child,
|
||||
.ui.card > :last-child {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.cards > .card > :only-child,
|
||||
.ui.card > :only-child {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .extra,
|
||||
.ui.card > .extra,
|
||||
.ui.cards > .card > .extra a:not(.ui),
|
||||
.ui.card > .extra a:not(.ui) {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .extra a:not(.ui):hover,
|
||||
.ui.card > .extra a:not(.ui):hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header,
|
||||
.ui.card > .content > .header {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .description,
|
||||
.ui.card > .content > .description {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards > .card .meta > a:not(.ui),
|
||||
.ui.card .meta > a:not(.ui) {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.cards > .card .meta > a:not(.ui):hover,
|
||||
.ui.card .meta > a:not(.ui):hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards a.card:hover,
|
||||
a.ui.card:hover {
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-card);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .extra,
|
||||
.ui.card > .extra {
|
||||
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;
|
||||
}
|
||||
131
web_src/css/modules/checkbox.css
Normal file
131
web_src/css/modules/checkbox.css
Normal file
@@ -0,0 +1,131 @@
|
||||
/* 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"] {
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
.ui.checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
min-height: var(--checkbox-size);
|
||||
line-height: var(--checkbox-size);
|
||||
min-width: var(--checkbox-size);
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.ui.checkbox input[type="checkbox"],
|
||||
.ui.checkbox input[type="radio"] {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
.ui.checkbox 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,
|
||||
.ui.radio.checkbox label {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.ui.checkbox + label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.disabled.checkbox label,
|
||||
.ui.checkbox input[disabled] ~ label {
|
||||
cursor: default !important;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.radio.checkbox {
|
||||
min-height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
/* "switch" styled checkbox */
|
||||
|
||||
.ui.toggle.checkbox {
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
.ui.toggle.checkbox input {
|
||||
width: 3.5rem;
|
||||
height: 21px;
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
.ui.toggle.checkbox label {
|
||||
min-height: 1.5rem;
|
||||
padding-left: 4.5rem;
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
.ui.toggle.checkbox label::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 49px;
|
||||
height: 21px;
|
||||
border-radius: 500rem;
|
||||
left: 0;
|
||||
}
|
||||
.ui.toggle.checkbox label::after {
|
||||
background: var(--color-white);
|
||||
box-shadow: 1px 1px 4px 1px var(--color-shadow);
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 1.5px;
|
||||
left: 1.5px;
|
||||
border-radius: 500rem;
|
||||
transition: background 0.3s ease, left 0.3s ease;
|
||||
}
|
||||
.ui.toggle.checkbox input ~ label::after {
|
||||
left: 1.5px;
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::after {
|
||||
left: 29px;
|
||||
}
|
||||
.ui.toggle.checkbox input:focus ~ label::before,
|
||||
.ui.toggle.checkbox label::before {
|
||||
background: var(--color-input-toggle-background);
|
||||
}
|
||||
.ui.toggle.checkbox label,
|
||||
.ui.toggle.checkbox input:checked ~ label,
|
||||
.ui.toggle.checkbox input:focus:checked ~ label {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::before,
|
||||
.ui.toggle.checkbox input:focus:checked ~ label::before {
|
||||
background: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
label.gt-checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.ui.form .field > label.gt-checkbox {
|
||||
display: flex;
|
||||
}
|
||||
88
web_src/css/modules/comment.css
Normal file
88
web_src/css/modules/comment.css
Normal file
@@ -0,0 +1,88 @@
|
||||
/* These are the remnants of the fomantic comment module */
|
||||
/* TODO: remove all of these rules */
|
||||
|
||||
.ui.comments {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.ui.comments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.comments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: none;
|
||||
margin: 3px 0 0;
|
||||
padding: 0.5em 0 0;
|
||||
border: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.edit-content-zone .comment {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .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;
|
||||
flex: 1;
|
||||
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;
|
||||
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;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.3;
|
||||
}
|
||||
16
web_src/css/modules/container.css
Normal file
16
web_src/css/modules/container.css
Normal file
@@ -0,0 +1,16 @@
|
||||
/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.container {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - calc(2 * var(--page-margin-x)));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.container.medium-width {
|
||||
width: 800px;
|
||||
}
|
||||
27
web_src/css/modules/dimmer.css
Normal file
27
web_src/css/modules/dimmer.css
Normal file
@@ -0,0 +1,27 @@
|
||||
/* These are the remnants of the fomantic dimmer module */
|
||||
|
||||
.ui.dimmer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
inset: 0;
|
||||
background: var(--color-overlay-backdrop);
|
||||
opacity: 0;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
animation-name: fadein;
|
||||
animation-duration: .2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui.active.dimmer {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.dimmer > .ui.modal {
|
||||
position: static;
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
43
web_src/css/modules/divider.css
Normal file
43
web_src/css/modules/divider.css
Normal file
@@ -0,0 +1,43 @@
|
||||
.divider {
|
||||
margin: 10px 0;
|
||||
height: 0;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h4.divider {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.divider:not(.divider-text) {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.divider.divider-text::before,
|
||||
.divider.divider-text::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text::before {
|
||||
margin-right: .75em;
|
||||
}
|
||||
|
||||
.divider.divider-text::after {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .divider {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 4px 0;
|
||||
}
|
||||
33
web_src/css/modules/flexcontainer.css
Normal file
33
web_src/css/modules/flexcontainer.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* container for full-page content with sidebar on left */
|
||||
|
||||
.flex-container {
|
||||
display: flex !important;
|
||||
gap: var(--page-spacing);
|
||||
margin-top: var(--page-spacing);
|
||||
}
|
||||
|
||||
/* small options menu on the left, used in settings/admin pages */
|
||||
.flex-container-nav {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
/* wide sidebar on the right, used in frontpage */
|
||||
.flex-container-sidebar {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.flex-container-main {
|
||||
flex: 1;
|
||||
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-container-nav,
|
||||
.flex-container-sidebar {
|
||||
order: -1;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
461
web_src/css/modules/grid.css
Normal file
461
web_src/css/modules/grid.css
Normal file
@@ -0,0 +1,461 @@
|
||||
/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.ui.relaxed.grid {
|
||||
margin-left: -1.5rem;
|
||||
margin-right: -1.5rem;
|
||||
}
|
||||
.ui[class*="very relaxed"].grid {
|
||||
margin-left: -2.5rem;
|
||||
margin-right: -2.5rem;
|
||||
}
|
||||
|
||||
.ui.grid + .grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .column:not(.row),
|
||||
.ui.grid > .row > .column {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 6.25%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.grid > * {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: inherit;
|
||||
align-items: stretch;
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .column:not(.row) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.ui.grid > .row > .column {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.grid > .row > img,
|
||||
.ui.grid > .row > .column > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ui.grid > .ui.grid:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.grid > .ui.grid:last-child {
|
||||
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 {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 23%;
|
||||
padding-right: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.grid > .column:only-child,
|
||||
.ui.grid > .row > .column:only-child {
|
||||
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,
|
||||
.ui.grid > [class*="one wide"].column,
|
||||
.ui.column.grid > [class*="one wide"].column {
|
||||
width: 6.25% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="two wide"].column,
|
||||
.ui.grid > .column.row > [class*="two wide"].column,
|
||||
.ui.grid > [class*="two wide"].column,
|
||||
.ui.column.grid > [class*="two wide"].column {
|
||||
width: 12.5% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="three wide"].column,
|
||||
.ui.grid > .column.row > [class*="three wide"].column,
|
||||
.ui.grid > [class*="three wide"].column,
|
||||
.ui.column.grid > [class*="three wide"].column {
|
||||
width: 18.75% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="four wide"].column,
|
||||
.ui.grid > .column.row > [class*="four wide"].column,
|
||||
.ui.grid > [class*="four wide"].column,
|
||||
.ui.column.grid > [class*="four wide"].column {
|
||||
width: 25% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="five wide"].column,
|
||||
.ui.grid > .column.row > [class*="five wide"].column,
|
||||
.ui.grid > [class*="five wide"].column,
|
||||
.ui.column.grid > [class*="five wide"].column {
|
||||
width: 31.25% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="six wide"].column,
|
||||
.ui.grid > .column.row > [class*="six wide"].column,
|
||||
.ui.grid > [class*="six wide"].column,
|
||||
.ui.column.grid > [class*="six wide"].column {
|
||||
width: 37.5% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="seven wide"].column,
|
||||
.ui.grid > .column.row > [class*="seven wide"].column,
|
||||
.ui.grid > [class*="seven wide"].column,
|
||||
.ui.column.grid > [class*="seven wide"].column {
|
||||
width: 43.75% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="eight wide"].column,
|
||||
.ui.grid > .column.row > [class*="eight wide"].column,
|
||||
.ui.grid > [class*="eight wide"].column,
|
||||
.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,
|
||||
.ui.column.grid > [class*="ten wide"].column {
|
||||
width: 62.5% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="eleven wide"].column,
|
||||
.ui.grid > .column.row > [class*="eleven wide"].column,
|
||||
.ui.grid > [class*="eleven wide"].column,
|
||||
.ui.column.grid > [class*="eleven wide"].column {
|
||||
width: 68.75% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="twelve wide"].column,
|
||||
.ui.grid > .column.row > [class*="twelve wide"].column,
|
||||
.ui.grid > [class*="twelve wide"].column,
|
||||
.ui.column.grid > [class*="twelve wide"].column {
|
||||
width: 75% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="thirteen wide"].column,
|
||||
.ui.grid > .column.row > [class*="thirteen wide"].column,
|
||||
.ui.grid > [class*="thirteen wide"].column,
|
||||
.ui.column.grid > [class*="thirteen wide"].column {
|
||||
width: 81.25% !important;
|
||||
}
|
||||
.ui.grid > .row > [class*="fourteen wide"].column,
|
||||
.ui.grid > .column.row > [class*="fourteen wide"].column,
|
||||
.ui.grid > [class*="fourteen wide"].column,
|
||||
.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,
|
||||
.ui.column.grid > [class*="sixteen wide"].column {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui.centered.grid,
|
||||
.ui.centered.grid > .row,
|
||||
.ui.grid > .centered.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) {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.grid > .centered.column,
|
||||
.ui.grid > .row > .centered.column {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
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 {
|
||||
padding-left: 2.5rem;
|
||||
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;
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui[class*="mobile reversed"].grid,
|
||||
.ui[class*="mobile reversed"].grid > .row,
|
||||
.ui.grid > [class*="mobile reversed"].row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.ui.stackable[class*="mobile reversed"] {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.stackable.grid {
|
||||
width: auto;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.grid > .row > .wide.column,
|
||||
.ui.stackable.grid > .wide.column,
|
||||
.ui.stackable.grid > .column.grid > .column,
|
||||
.ui.stackable.grid > .column.row > .column,
|
||||
.ui.stackable.grid > .row > .column,
|
||||
.ui.stackable.grid > .column:not(.row),
|
||||
.ui.grid > .stackable.stackable.stackable.row > .column {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
box-shadow: none !important;
|
||||
padding: 1rem;
|
||||
}
|
||||
.ui.stackable.grid:not(.vertically) > .row {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.container > .ui.stackable.grid > .column,
|
||||
.ui.container > .ui.stackable.grid > .row > .column {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.grid .ui.stackable.grid,
|
||||
.ui.segment:not(.vertical) .ui.stackable.page.grid {
|
||||
margin-left: -1rem !important;
|
||||
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;
|
||||
}
|
||||
170
web_src/css/modules/header.css
Normal file
170
web_src/css/modules/header.css
Normal file
@@ -0,0 +1,170 @@
|
||||
/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.header {
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
||||
padding: 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.28571429;
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: -0.14285714em;
|
||||
}
|
||||
|
||||
.ui.header:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.header .ui.label {
|
||||
margin-left: 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > .ui.label.compact {
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.header > i.icon {
|
||||
display: table-cell;
|
||||
opacity: 1;
|
||||
font-size: 1.5em;
|
||||
padding-top: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > i.icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.ui.header + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2.ui.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
h2.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
h4.ui.header {
|
||||
font-size: 1.07142857rem;
|
||||
}
|
||||
h4.ui.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: 0.14285714rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
|
||||
.ui.icon.header svg {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
float: none;
|
||||
display: block;
|
||||
line-height: var(--line-height-default);
|
||||
padding: 0;
|
||||
margin: 0 auto 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
position: relative;
|
||||
background: var(--color-box-header);
|
||||
padding: 0.78571429rem 1rem;
|
||||
margin: 0 -1px;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.top.attached.header {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.bottom.attached.header {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* fix misaligned right buttons on box headers */
|
||||
.ui.attached.header > .ui.right {
|
||||
position: absolute;
|
||||
right: 0.78571429rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
|
||||
.ui.attached.header > .ui.right .ui.tiny.button {
|
||||
padding: 6px 10px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
/* if a .top.attached.header is followed by a .segment, add some margin */
|
||||
.ui.segments + .ui.top.attached.header,
|
||||
.ui.attached.segment + .ui.top.attached.header {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header i.icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.error.header {
|
||||
background: var(--color-error-bg) !important;
|
||||
color: var(--color-error-text) !important;
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.header {
|
||||
background: var(--color-warning-bg) !important;
|
||||
color: var(--color-warning-text) !important;
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
|
||||
.attention-header {
|
||||
padding: 0.5em 0.75em !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
197
web_src/css/modules/input.css
Normal file
197
web_src/css/modules/input.css
Normal file
@@ -0,0 +1,197 @@
|
||||
/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.input {
|
||||
position: relative;
|
||||
font-weight: var(--font-weight-normal);
|
||||
display: inline-flex;
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
.ui.input > input {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
flex: 1 0 auto;
|
||||
outline: none;
|
||||
font-family: var(--fonts-regular);
|
||||
padding: 0.67857143em 1em;
|
||||
border: 1px solid var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
border-radius: 0.28571429rem;
|
||||
line-height: var(--line-height-default);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ui.disabled.input,
|
||||
.ui.input:not(.disabled) input[disabled] {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
.ui.disabled.input > input,
|
||||
.ui.input:not(.disabled) input[disabled] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.input.focus > input,
|
||||
.ui.input > input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.input.error > input {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-error-text);
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 2.67142857em;
|
||||
opacity: 0.5;
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
pointer-events: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon.is-loading {
|
||||
position: absolute !important;
|
||||
height: 28px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon.is-loading > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.ui.ui.ui.icon.input > 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);
|
||||
border-bottom: 1px solid var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.action.input > .button,
|
||||
.ui.action.input > .buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ui.action.input > .button,
|
||||
.ui.action.input > .buttons > .button {
|
||||
padding-top: 0.78571429em;
|
||||
padding-bottom: 0.78571429em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.action.input:not([class*="left action"]) > input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.ui.action.input > .dropdown:first-child,
|
||||
.ui.action.input > .button:first-child,
|
||||
.ui.action.input > .buttons:first-child > .button {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.action.input > .dropdown:not(:first-child),
|
||||
.ui.action.input > .button:not(:first-child),
|
||||
.ui.action.input > .buttons:not(:first-child) > .button {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.action.input > .dropdown:last-child,
|
||||
.ui.action.input > .button:last-child,
|
||||
.ui.action.input > .buttons:last-child > .button {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
|
||||
.ui.fluid.input {
|
||||
display: flex;
|
||||
}
|
||||
.ui.fluid.input > input {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.ui.tiny.input {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.small.input {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
|
||||
.ui.action.input .ui.ui.button {
|
||||
border-color: var(--color-input-border);
|
||||
padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* currently used for search bar dropdowns in repo search and explore code */
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
|
||||
min-width: 10em;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
|
||||
border-right: none;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
|
||||
border-color: var(--color-input-border);
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input,
|
||||
.ui.action.input:not([class*="left action"]) > input:hover {
|
||||
border-right: none;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .button,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button:hover {
|
||||
border-left-color: var(--color-primary);
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input:focus {
|
||||
border-right-color: var(--color-primary);
|
||||
}
|
||||
340
web_src/css/modules/label.css
Normal file
340
web_src/css/modules/label.css
Normal file
@@ -0,0 +1,340 @@
|
||||
/* based on Fomantic UI label module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
gap: var(--gap-inline);
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
padding: 2px 6px;
|
||||
font-size: var(--font-size-label);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: 0 solid transparent;
|
||||
border-radius: var(--border-radius);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a.ui.label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.label > a {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.ui.label > a:hover {
|
||||
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;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ui.label > .detail .icon {
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
.ui.label > .close.icon,
|
||||
.ui.label > .delete.icon {
|
||||
cursor: pointer;
|
||||
font-size: 0.92857143em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ui.label > .close.icon:hover,
|
||||
.ui.label > .delete.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.label.left.icon > .close.icon,
|
||||
.ui.label.left.icon > .delete.icon {
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
.ui.label:not(.icon) > .close.icon,
|
||||
.ui.label:not(.icon) > .delete.icon {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
|
||||
.ui.header > .ui.label {
|
||||
margin-top: -0.29165em;
|
||||
}
|
||||
|
||||
a.ui.label:hover {
|
||||
background: var(--color-label-hover-bg);
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
.ui.basic.label {
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
a.ui.basic.label:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.ui.ui.primary.label {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary-dark-2);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
a.ui.ui.ui.primary.label:hover {
|
||||
background: var(--color-primary-dark-3);
|
||||
border-color: var(--color-primary-dark-3);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
.ui.ui.ui.basic.primary.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
a.ui.ui.ui.basic.primary.label:hover {
|
||||
background: var(--color-hover);
|
||||
border-color: var(--color-primary-dark-1);
|
||||
color: var(--color-primary-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.red.label {
|
||||
background: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.red.label:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.red.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-red);
|
||||
color: var(--color-red);
|
||||
}
|
||||
a.ui.ui.ui.basic.red.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-red-dark-1);
|
||||
color: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.orange.label {
|
||||
background: var(--color-orange);
|
||||
border-color: var(--color-orange);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.orange.label:hover {
|
||||
background: var(--color-orange-dark-1);
|
||||
border-color: var(--color-orange-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.orange.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-orange);
|
||||
color: var(--color-orange);
|
||||
}
|
||||
a.ui.ui.ui.basic.orange.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-orange-dark-1);
|
||||
color: var(--color-orange-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.yellow.label {
|
||||
background: var(--color-yellow);
|
||||
border-color: var(--color-yellow);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.yellow.label:hover {
|
||||
background: var(--color-yellow-dark-1);
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.yellow.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-yellow);
|
||||
color: var(--color-yellow);
|
||||
}
|
||||
a.ui.ui.ui.basic.yellow.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
color: var(--color-yellow-dark-1);
|
||||
}
|
||||
.ui.ui.ui.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);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.green.label:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.green.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-green);
|
||||
color: var(--color-green);
|
||||
}
|
||||
a.ui.ui.ui.basic.green.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-green-dark-1);
|
||||
color: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.purple.label {
|
||||
background: var(--color-purple);
|
||||
border-color: var(--color-purple);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.purple.label:hover {
|
||||
background: var(--color-purple-dark-1);
|
||||
border-color: var(--color-purple-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.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);
|
||||
border-color: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
a.ui.ui.ui.grey.label:hover {
|
||||
background: var(--color-label-hover-bg);
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.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 {
|
||||
margin: 0 0.5em 0 0;
|
||||
padding: 0.4em 0.833em;
|
||||
min-width: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.circular.label {
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
padding: 0.5em !important;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
border-radius: 500rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ui.mini.label {
|
||||
font-size: 0.64285714rem;
|
||||
}
|
||||
.ui.tiny.label {
|
||||
font-size: 0.71428571rem;
|
||||
}
|
||||
.ui.small.label {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.large.label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
display: contents;
|
||||
font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
|
||||
}
|
||||
|
||||
.labels-list a {
|
||||
max-width: 100%; /* for ellipsis */
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.with-labels-list-inline .labels-list .ui.label {
|
||||
line-height: var(--line-height-default);
|
||||
}
|
||||
|
||||
/* Scoped labels with different colors on left and right */
|
||||
.ui.label.scope-parent {
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.ui.label.scope-parent > .ui.label {
|
||||
margin: 0 !important; /* scoped label's margin is handled by the parent */
|
||||
}
|
||||
|
||||
.ui.label.scope-left {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.scope-middle {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.scope-right {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.archived-label {
|
||||
filter: grayscale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
186
web_src/css/modules/list.css
Normal file
186
web_src/css/modules/list.css
Normal file
@@ -0,0 +1,186 @@
|
||||
/* based on Fomantic UI list module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.list {
|
||||
list-style-type: none;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.list:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.list:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.list > .item,
|
||||
.ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.ui.list > .list > .item::after,
|
||||
.ui.list > .item::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.list .list:not(.icon) {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0.75em 0 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.ui.list .list > .item {
|
||||
padding: 0.14285714em 0;
|
||||
}
|
||||
|
||||
.ui.list .list > .item > i.icon,
|
||||
.ui.list > .item > i.icon {
|
||||
display: table-cell;
|
||||
min-width: 1.55em;
|
||||
padding-top: 0;
|
||||
transition: color 0.1s ease;
|
||||
padding-right: 0.28571429em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > i.icon:only-child,
|
||||
.ui.list > .item > i.icon:only-child {
|
||||
display: inline-block;
|
||||
min-width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.list .list > .item > .image,
|
||||
.ui.list > .item > .image {
|
||||
display: table-cell;
|
||||
background-color: transparent;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > .image:not(:only-child):not(img),
|
||||
.ui.list > .item > .image:not(:only-child):not(img) {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.list .list > .item > .image img,
|
||||
.ui.list > .item > .image img {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > img.image,
|
||||
.ui.list .list > .item > .image:only-child,
|
||||
.ui.list > .item > img.image,
|
||||
.ui.list > .item > .image:only-child {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.list .list > .item > .content,
|
||||
.ui.list > .item > .content {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.list .list > .item > .image + .content,
|
||||
.ui.list .list > .item > i.icon + .content,
|
||||
.ui.list > .item > .image + .content,
|
||||
.ui.list > .item > i.icon + .content {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
padding: 0 0 0 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > img.image + .content,
|
||||
.ui.list > .item > img.image + .content {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.ui.list .list > .item > .content > .list,
|
||||
.ui.list > .item > .content > .list {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ui.list .list > .item .header,
|
||||
.ui.list > .item .header {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.list .list > .item .description,
|
||||
.ui.list > .item .description {
|
||||
display: block;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.list > .item a,
|
||||
.ui.list .list > .item a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.menu .ui.list > .item,
|
||||
.ui.menu .ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
background-color: transparent;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
padding: 0.21428571em 0;
|
||||
}
|
||||
.ui.menu .ui.list .list > .item::before,
|
||||
.ui.menu .ui.list > .item::before {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.ui.menu .ui.list .list > .item:first-child,
|
||||
.ui.menu .ui.list > .item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.ui.menu .ui.list .list > .item:last-child,
|
||||
.ui.menu .ui.list > .item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.list .list > .disabled.item,
|
||||
.ui.list > .disabled.item {
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.list .list > a.item:hover > .icons,
|
||||
.ui.list > a.item:hover > .icons,
|
||||
.ui.list .list > a.item:hover > i.icon,
|
||||
.ui.list > a.item:hover > i.icon {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.divided.list > .item {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.divided.list .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .item .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .list > .item:first-child,
|
||||
.ui.divided.list > .item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .list > .item:first-child {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.ui.relaxed.list > .item:not(:first-child) {
|
||||
padding-top: 0.42857143em;
|
||||
}
|
||||
.ui.relaxed.list > .item:not(:last-child) {
|
||||
padding-bottom: 0.42857143em;
|
||||
}
|
||||
813
web_src/css/modules/menu.css
Normal file
813
web_src/css/modules/menu.css
Normal file
@@ -0,0 +1,813 @@
|
||||
.ui.menu {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin: 1rem 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-normal);
|
||||
background: var(--color-menu);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
min-height: 2.85714286em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.menu:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.menu:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.menu .menu {
|
||||
margin: 0;
|
||||
}
|
||||
.ui.menu:not(.vertical) > .menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ui.menu .item {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
line-height: var(--line-height-default);
|
||||
text-decoration: none;
|
||||
flex: 0 0 auto;
|
||||
background: none;
|
||||
padding: 0.92857143em 1.14285714em;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.ui.menu > .item:first-child {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.menu .item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.menu .item > .svg {
|
||||
margin-right: 0.35em;
|
||||
}
|
||||
|
||||
.ui.menu .item > a:not(.ui),
|
||||
.ui.menu .item > p:only-child {
|
||||
line-height: 1.3;
|
||||
}
|
||||
.ui.menu .item > p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.menu .item > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.menu .item > i.icon {
|
||||
opacity: 0.9;
|
||||
float: none;
|
||||
margin: 0 0.35714286em 0 0;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .item > .button {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: -0.5em 0;
|
||||
padding: 0.58928571em 1.125em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.menu > .grid,
|
||||
.ui.menu > .container {
|
||||
display: flex;
|
||||
align-items: inherit;
|
||||
flex-direction: inherit;
|
||||
}
|
||||
|
||||
.ui.menu .item > .input {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.menu:not(.vertical) .item > .input {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: -0.5em 0;
|
||||
}
|
||||
.ui.menu .item > .input input {
|
||||
font-size: 1em;
|
||||
padding-top: 0.57142857em;
|
||||
padding-bottom: 0.57142857em;
|
||||
}
|
||||
|
||||
.ui.menu .header.item,
|
||||
.ui.vertical.menu .header.item {
|
||||
margin: 0;
|
||||
font-size: 1.1em;
|
||||
background: var(--color-box-header);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.ui.vertical.menu .item > .header:not(.ui) {
|
||||
margin: 0 0 0.5em;
|
||||
font-size: 1em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.ui.menu .item > i.dropdown.icon {
|
||||
padding: 0;
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.ui.menu .dropdown.item .menu {
|
||||
min-width: calc(100% - 1px);
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
background: var(--color-body);
|
||||
margin: 0;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown .menu > .item {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
font-size: 1em !important;
|
||||
padding: 0.78571429em 1.14285714em !important;
|
||||
background: transparent !important;
|
||||
color: var(--color-text) !important;
|
||||
font-weight: var(--font-weight-normal) !important;
|
||||
}
|
||||
.ui.menu .ui.dropdown .menu > .item:hover {
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
.ui.menu .ui.dropdown .menu > .selected.item {
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
.ui.menu .ui.dropdown .menu > .active.item {
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-active) !important;
|
||||
font-weight: var(--font-weight-medium) !important;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown.item .menu .item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
|
||||
display: block;
|
||||
}
|
||||
.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
|
||||
display: inline-block;
|
||||
font-size: 1em !important;
|
||||
float: none;
|
||||
margin: 0 0.75em 0 0 !important;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .dropdown.item > .menu {
|
||||
border-radius: 0.28571429rem;
|
||||
margin-top: 0.35714286em;
|
||||
}
|
||||
|
||||
.ui.menu .pointing.dropdown.item .menu {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.ui.menu .item > .label:not(.floating) {
|
||||
margin-left: 1em;
|
||||
padding: 0.3em 0.78571429em;
|
||||
}
|
||||
.ui.vertical.menu .item > .label {
|
||||
margin-top: -0.15em;
|
||||
margin-bottom: -0.15em;
|
||||
padding: 0.3em 0.78571429em;
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.ui.menu .item > .floating.label {
|
||||
padding: 0.3em 0.78571429em;
|
||||
}
|
||||
.ui.menu .item > .label {
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
.ui.menu .item > .image.label img {
|
||||
margin: -0.2833em 0.8em -0.2833em -0.8em;
|
||||
height: 1.5666em;
|
||||
}
|
||||
|
||||
.ui.menu .item > img:not(.ui) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: -0.3em 0;
|
||||
width: 2.5em;
|
||||
}
|
||||
.ui.vertical.menu .item > img:not(.ui):only-child {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ui.menu .list .item::before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.menu > .ui.container {
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.menu .dropdown.item:hover,
|
||||
.ui.menu a.item:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.menu a.item:active {
|
||||
color: var(--color-text);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.menu .active.item {
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.ui.menu .active.item > i.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.ui.menu .item.disabled {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .left.item,
|
||||
.ui.menu:not(.vertical) .left.menu {
|
||||
display: flex;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .right.item,
|
||||
.ui.menu:not(.vertical) .right.menu {
|
||||
display: flex;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
|
||||
.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .center.item {
|
||||
display: flex;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ui.menu .right.item::before,
|
||||
.ui.menu .right.menu > .item::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.menu .center.item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.vertical.menu {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
background: var(--color-menu);
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item {
|
||||
display: block;
|
||||
background: none;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
.ui.vertical.menu > .item:first-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.vertical.menu > .item:last-child {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item > i.icon {
|
||||
width: 1.18em;
|
||||
float: right;
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
.ui.vertical.menu .item > .label + i.icon {
|
||||
float: none;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
.ui.vertical.menu .item:first-child::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item > .menu {
|
||||
margin: 0.5em -1.14285714em 0;
|
||||
}
|
||||
.ui.vertical.menu .menu .item {
|
||||
background: none;
|
||||
padding: 0.5em 1.33333333em;
|
||||
font-size: 0.85714286em;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu .item {
|
||||
color: var(--color-text-light-2);
|
||||
text-indent: 16px;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu .item:hover,
|
||||
.ui.vertical.menu .item .menu a.item:hover {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu .active.item {
|
||||
background-color: transparent;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu a.item:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.vertical.menu .menu .item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .active.item {
|
||||
background: var(--color-active);
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.vertical.menu > .active.item:first-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.vertical.menu > .active.item:last-child {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui.vertical.menu > .active.item:only-child {
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
.ui.vertical.menu .active.item .menu .active.item {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.tabular.menu {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: none transparent;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.tabular.fluid.menu {
|
||||
width: calc(100% + 2px) !important;
|
||||
}
|
||||
.ui.tabular.menu .item {
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-top: 2px solid transparent;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
.ui.tabular.menu .item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.tabular.menu .active.item:hover {
|
||||
background: var(--color-body);
|
||||
border-top-width: 1px;
|
||||
border-color: var(--color-secondary);
|
||||
color: var(--color-text-dark);
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
|
||||
}
|
||||
|
||||
.ui.tabular.menu + .attached:not(.top).segment,
|
||||
.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
|
||||
border-top: none;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.tabular.menu .active.dropdown.item {
|
||||
margin-bottom: 0;
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ui.pagination.menu {
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.pagination.menu .item:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
.ui.compact.menu .item:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
.ui.pagination.menu .item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
.ui.pagination.menu .item {
|
||||
min-width: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
.ui.pagination.menu .icon.item i.icon {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.pagination.menu .active.item,
|
||||
.ui.pagination.menu .active.item:hover {
|
||||
border-top: none;
|
||||
padding-top: 0.92857143em;
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.pagination.menu .item:not(.active,.navigation),
|
||||
.ui.pagination.menu .item.navigation span.navigation_label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.pagination.menu.narrow .item {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
min-width: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.pagination.menu.narrow .item .icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.secondary.menu {
|
||||
background: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
gap: .35714286em;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .item {
|
||||
align-self: center;
|
||||
border: none;
|
||||
padding: 0.78571429em 0.92857143em;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .item::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .header.item {
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
background: none transparent;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .item > img:not(.ui) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .dropdown.item:hover,
|
||||
.ui.secondary.menu a.item:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.secondary.menu .active.item {
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .active.item,
|
||||
.ui.secondary.menu .active.item:hover {
|
||||
color: var(--color-text-dark);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.secondary.item.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.ui.secondary.item.menu .item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
|
||||
margin: 0 -0.92857143em;
|
||||
}
|
||||
.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
|
||||
margin: 0;
|
||||
padding: 0.5em 1.33333333em;
|
||||
}
|
||||
.ui.secondary.vertical.menu > .item {
|
||||
border: none;
|
||||
margin: 0 0 0.35714286em;
|
||||
border-radius: 0.28571429rem !important;
|
||||
}
|
||||
.ui.secondary.vertical.menu > .header.item {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.secondary.menu .item > .menu .item {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-bottom: 2px solid var(--color-secondary);
|
||||
}
|
||||
.ui.secondary.pointing.menu .item {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
align-self: flex-end;
|
||||
margin: 0 0 -2px;
|
||||
padding: 0.85714286em 1.14285714em;
|
||||
}
|
||||
.ui.secondary.pointing.menu .ui.dropdown .menu .item {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.ui.secondary.pointing.menu .item > .label:not(.floating) {
|
||||
margin-top: -0.3em;
|
||||
margin-bottom: -0.3em;
|
||||
}
|
||||
.ui.secondary.pointing.menu .item > .circular.label {
|
||||
margin-top: -0.5em;
|
||||
margin-bottom: -0.5em;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .header.item {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
.ui.secondary.pointing.menu .item::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .dropdown.item:hover,
|
||||
.ui.secondary.pointing.menu a.item:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .dropdown.item:active,
|
||||
.ui.secondary.pointing.menu a.item:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .active.item {
|
||||
background-color: transparent;
|
||||
border-color: currentcolor;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item:hover,
|
||||
.ui.secondary.pointing.menu .dropdown.item:hover {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .active.dropdown.item {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.stackable.menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
.ui.stackable.menu .item {
|
||||
width: 100% !important;
|
||||
}
|
||||
.ui.stackable.menu .left.menu,
|
||||
.ui.stackable.menu .left.item {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .right.menu,
|
||||
.ui.stackable.menu .right.item {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .center.item {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .right.menu,
|
||||
.ui.stackable.menu .left.menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.borderless.menu .item::before,
|
||||
.ui.borderless.menu .item .menu .item::before,
|
||||
.ui.menu .borderless.item::before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.ui.compact.menu {
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
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 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui.item.menu,
|
||||
.ui.item.menu .item {
|
||||
width: 100%;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui.attached.item.menu:not(.tabular) {
|
||||
margin: 0 -1px !important;
|
||||
}
|
||||
.ui.item.menu .item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
.ui.menu.two.item .item {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .item::after {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
background: none;
|
||||
margin: 0.5px 0 0;
|
||||
width: 0.57142857em;
|
||||
height: 0.57142857em;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-right: 1px solid var(--color-secondary);
|
||||
z-index: 2;
|
||||
}
|
||||
.ui.pointing.menu .ui.dropdown .menu .item::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .active.item::after {
|
||||
visibility: visible;
|
||||
}
|
||||
.ui.pointing.menu .active.dropdown.item::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .dropdown.active.item::after,
|
||||
.ui.pointing.menu .active.item .menu .active.item::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .active.item::after,
|
||||
.ui.pointing.menu .active.item:hover::after {
|
||||
background-color: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.attached.menu {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
}
|
||||
.ui.attached + .ui.attached.menu:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui[class*="top attached"].menu {
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.menu[class*="top attached"]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.top.attached.menu > .item:first-child {
|
||||
border-radius: 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.attached.menu:not(.tabular) {
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.attached.tabular.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.mini.menu,
|
||||
.ui.mini.menu .dropdown,
|
||||
.ui.mini.menu .dropdown .menu > .item {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.mini.vertical.menu:not(.icon) {
|
||||
width: 9rem;
|
||||
}
|
||||
.ui.tiny.menu,
|
||||
.ui.tiny.menu .dropdown,
|
||||
.ui.tiny.menu .dropdown .menu > .item {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.tiny.vertical.menu:not(.icon) {
|
||||
width: 11rem;
|
||||
}
|
||||
.ui.small.menu,
|
||||
.ui.small.menu .dropdown,
|
||||
.ui.small.menu .dropdown .menu > .item {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
.ui.small.vertical.menu:not(.icon) {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
.ui .menu:not(.vertical) .item > .button.small {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
.ui.segment .ui.tabular.menu .active.item,
|
||||
.ui.segment .ui.tabular.menu .active.item:hover {
|
||||
background: var(--color-box-body);
|
||||
}
|
||||
|
||||
.small-menu-items {
|
||||
min-height: 35.4px !important; /* match .small.button in height */
|
||||
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.small-menu-items .item {
|
||||
background: var(--color-menu) !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item:hover {
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item.active {
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
114
web_src/css/modules/message.css
Normal file
114
web_src/css/modules/message.css
Normal file
@@ -0,0 +1,114 @@
|
||||
/* based on Fomantic UI message module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.message {
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
position: relative;
|
||||
min-height: 1em;
|
||||
margin: 1em 0;
|
||||
padding: 1em 1.5em;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.message:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.message:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.attached.message {
|
||||
margin-bottom: -1px;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
|
||||
margin-top: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.bottom.attached.message {
|
||||
margin-top: -1px;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.bottom.attached.message:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.ui.info.message .header,
|
||||
.ui.blue.message .header {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.ui.info.message,
|
||||
.ui.attached.info.message,
|
||||
.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,
|
||||
.ui.attached.red.message,
|
||||
.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);
|
||||
}
|
||||
|
||||
.ui.message > .close.icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.ui.message > .close.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
93
web_src/css/modules/modal.css
Normal file
93
web_src/css/modules/modal.css
Normal file
@@ -0,0 +1,93 @@
|
||||
.ui.modal.g-modal-confirm {
|
||||
max-width: min(800px, 90vw);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.ui.modal.g-modal-confirm > .inside.close.icon {
|
||||
padding: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
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" */
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* positive/negative action buttons */
|
||||
.ui.modal .actions > .ui.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button.danger {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button .svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
139
web_src/css/modules/navbar.css
Normal file
139
web_src/css/modules/navbar.css
Normal file
@@ -0,0 +1,139 @@
|
||||
#navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-nav-bg);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#navbar .navbar-left,
|
||||
#navbar .navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 49px; /* +1px border-bottom */
|
||||
}
|
||||
|
||||
.navbar-left > .item,
|
||||
.navbar-right > .item,
|
||||
.navbar-mobile-right > .item {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-nav-text);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
padding: 3px 13px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#navbar .item.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
#navbar a.item:hover,
|
||||
#navbar button.item:hover {
|
||||
background: var(--color-nav-hover-bg);
|
||||
}
|
||||
|
||||
#navbar .item.ui.dropdown {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#navbar {
|
||||
align-items: stretch;
|
||||
}
|
||||
/* hide all items */
|
||||
#navbar .navbar-left > .item,
|
||||
#navbar .navbar-right > .item {
|
||||
display: none;
|
||||
}
|
||||
#navbar #navbar-logo {
|
||||
display: flex;
|
||||
}
|
||||
/* show the first navbar item (logo and its mobile right items) */
|
||||
#navbar .navbar-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#navbar .navbar-mobile-right {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
#navbar .navbar-mobile-right > .item {
|
||||
display: flex;
|
||||
width: auto;
|
||||
}
|
||||
/* show items if the navbar is open */
|
||||
#navbar.navbar-menu-open {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
#navbar.navbar-menu-open,
|
||||
#navbar.navbar-menu-open .navbar-right {
|
||||
flex-direction: column;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left > .item,
|
||||
#navbar.navbar-menu-open .navbar-right > .item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left #navbar-logo {
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
|
||||
justify-content: flex-end;
|
||||
width: 50%;
|
||||
min-height: 49px;
|
||||
}
|
||||
#navbar #mobile-stopwatch-icon,
|
||||
#navbar #mobile-notifications-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar a.item:hover .notification_count,
|
||||
#navbar a.item:hover .header-stopwatch-dot {
|
||||
border-color: var(--color-nav-hover-bg);
|
||||
}
|
||||
|
||||
#navbar a.item .notification_count,
|
||||
#navbar a.item .header-stopwatch-dot {
|
||||
color: var(--color-nav-bg);
|
||||
padding: 0 3.75px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
background: var(--color-primary);
|
||||
border: 2px solid var(--color-nav-bg);
|
||||
position: absolute;
|
||||
left: calc(100% - 9px);
|
||||
bottom: calc(100% - 9px);
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1; /* prevent menu button background from overlaying icon */
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.secondary-nav {
|
||||
background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
|
||||
}
|
||||
|
||||
.issue-navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
243
web_src/css/modules/normalize.css
vendored
Normal file
243
web_src/css/modules/normalize.css
vendored
Normal file
@@ -0,0 +1,243 @@
|
||||
/*
|
||||
This is copy of modern-normalize with these changes done:
|
||||
|
||||
- Remove html font-family, we set our own
|
||||
- Remove html tab-size, we set our own
|
||||
- Remove b,strong font-weight, we set our own
|
||||
- Remove b,code,samp,pre font-size, we set our own
|
||||
*/
|
||||
|
||||
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
/*
|
||||
Document
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Use a better box model (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: normal; /* 1. (not following the "modern-normalize") Do not change the browser's default line-height, the default value is font-dependent and roughly 1.2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
|
||||
}
|
||||
|
||||
/*
|
||||
Sections
|
||||
========
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0; /* Remove the margin in all browsers. */
|
||||
}
|
||||
|
||||
/*
|
||||
Grouping content
|
||||
================
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Text-level semantics
|
||||
====================
|
||||
*/
|
||||
|
||||
/**
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabular data
|
||||
============
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0; /* 1 */
|
||||
border-color: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
=====
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the additional ':invalid' styles in Firefox.
|
||||
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to 'inherit' in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Interactive
|
||||
===========
|
||||
*/
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
202
web_src/css/modules/segment.css
Normal file
202
web_src/css/modules/segment.css
Normal file
@@ -0,0 +1,202 @@
|
||||
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.segment {
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
padding: 1em;
|
||||
border-radius: 0.28571429rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.segment:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.segment:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.grid.segment {
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segment.tab:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.segments {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.segments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.segments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.segments > .segment {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.segments:not(.horizontal) > .segment:first-child {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-top: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.segments:not(.horizontal) > .segment:last-child {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segments:not(.horizontal) > .segment:only-child,
|
||||
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segments > .ui.segments {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 1rem;
|
||||
}
|
||||
.ui.segments > .segments:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.segments > .segment + .segments:not(.horizontal) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.horizontal.segments {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.28571429rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.horizontal.segments > .segment {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.segments > .horizontal.segments:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.horizontal.segments:not(.stackable) > .segment:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.horizontal.segments > .segment:first-child {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.horizontal.segments > .segment:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
|
||||
.ui.clearing.segment::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ui.secondary.segment {
|
||||
background: var(--color-secondary-bg);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.ui.attached.segment {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.attached.segment:has(+ .ui[class*="top attached"].header),
|
||||
.ui.attached.segment:has(+ .page.buttons),
|
||||
.ui.attached.segment:last-child,
|
||||
.ui.segment:has(+ .ui.segment:not(.attached)),
|
||||
.ui.attached.segment:has(+ .ui.modal) {
|
||||
border-bottom-left-radius: 0.28571429rem;
|
||||
border-bottom-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui[class*="top attached"].segment {
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.segment[class*="top attached"]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui[class*="top attached"].segment:last-child {
|
||||
border-top-left-radius: 0.28571429rem;
|
||||
border-top-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui.segment[class*="bottom attached"]:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.fitted.segment:not(.horizontally) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.ui.fitted.segment:not(.vertically) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.ui.segments .segment,
|
||||
.ui.segment {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.error.segment {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.segment {
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
45
web_src/css/modules/svg.css
Normal file
45
web_src/css/modules/svg.css
Normal file
@@ -0,0 +1,45 @@
|
||||
.svg {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.svg.git-entry-icon {
|
||||
fill: transparent; /* some material icons have dark background fill, so need to reset */
|
||||
}
|
||||
|
||||
.middle .svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes
|
||||
here are cherry-picked for our use cases, feel free to add more. after
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is
|
||||
supported in browsers, use `attr(width px)` instead for a generic
|
||||
solution. */
|
||||
|
||||
.svg[height="12"] { min-height: 12px; }
|
||||
.svg[height="13"] { min-height: 13px; }
|
||||
.svg[height="14"] { min-height: 14px; }
|
||||
.svg[height="15"] { min-height: 15px; }
|
||||
.svg[height="16"] { min-height: 16px; }
|
||||
.svg[height="18"] { min-height: 18px; }
|
||||
.svg[height="20"] { min-height: 20px; }
|
||||
.svg[height="22"] { min-height: 22px; }
|
||||
.svg[height="24"] { min-height: 24px; }
|
||||
.svg[height="36"] { min-height: 36px; }
|
||||
.svg[height="48"] { min-height: 48px; }
|
||||
.svg[height="56"] { min-height: 56px; }
|
||||
|
||||
.svg[width="12"] { min-width: 12px; }
|
||||
.svg[width="13"] { min-width: 13px; }
|
||||
.svg[width="14"] { min-width: 14px; }
|
||||
.svg[width="15"] { min-width: 15px; }
|
||||
.svg[width="16"] { min-width: 16px; }
|
||||
.svg[width="18"] { min-width: 18px; }
|
||||
.svg[width="20"] { min-width: 20px; }
|
||||
.svg[width="22"] { min-width: 22px; }
|
||||
.svg[width="24"] { min-width: 24px; }
|
||||
.svg[width="36"] { min-width: 36px; }
|
||||
.svg[width="48"] { min-width: 48px; }
|
||||
.svg[width="56"] { min-width: 56px; }
|
||||
7
web_src/css/modules/tab.css
Normal file
7
web_src/css/modules/tab.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.tab.active {
|
||||
display: block;
|
||||
}
|
||||
368
web_src/css/modules/table.css
Normal file
368
web_src/css/modules/table.css
Normal file
@@ -0,0 +1,368 @@
|
||||
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.table {
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
vertical-align: middle;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
color: var(--color-text);
|
||||
background: var(--color-box-body);
|
||||
border-color: var(--color-secondary);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ui.table:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.table:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.table > thead,
|
||||
.ui.table > tbody {
|
||||
text-align: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.ui.table > thead > tr > th {
|
||||
background: var(--color-box-header);
|
||||
text-align: inherit;
|
||||
color: var(--color-text);
|
||||
padding: 6px 5px;
|
||||
vertical-align: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > thead > tr > th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:first-child {
|
||||
border-radius: 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:last-child {
|
||||
border-radius: 0 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:only-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.table > tfoot > tr > th,
|
||||
.ui.table > tfoot > tr > td {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
text-align: inherit;
|
||||
color: var(--color-text);
|
||||
padding: 0.78571429em;
|
||||
vertical-align: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.ui.table > tfoot > tr > th:first-child,
|
||||
.ui.table > tfoot > tr > td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > tfoot > tr:first-child > th:first-child,
|
||||
.ui.table > tfoot > tr:first-child > td:first-child {
|
||||
border-radius: 0 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.table > tfoot > tr:first-child > th:last-child,
|
||||
.ui.table > tfoot > tr:first-child > td:last-child {
|
||||
border-radius: 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.table > tfoot > tr:first-child > th:only-child,
|
||||
.ui.table > tfoot > tr:first-child > td:only-child {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.table > tr > td,
|
||||
.ui.table > tbody > tr > td {
|
||||
border-top: 1px solid var(--color-secondary-alpha-50);
|
||||
padding: 6px 5px;
|
||||
text-align: inherit;
|
||||
}
|
||||
.ui.table > tr:first-child > td,
|
||||
.ui.table > tbody > tr:first-child > td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.table.segment {
|
||||
padding: 0;
|
||||
}
|
||||
.ui.table.segment::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.table:not(.unstackable) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.table:not(.unstackable) > thead,
|
||||
.ui.table:not(.unstackable) > thead > tr,
|
||||
.ui.table:not(.unstackable) > tfoot,
|
||||
.ui.table:not(.unstackable) > tfoot > tr,
|
||||
.ui.table:not(.unstackable) > tbody,
|
||||
.ui.table:not(.unstackable) > tr,
|
||||
.ui.table:not(.unstackable) > tbody > tr,
|
||||
.ui.table:not(.unstackable) > tr > th,
|
||||
.ui.table:not(.unstackable) > thead > tr > th,
|
||||
.ui.table:not(.unstackable) > tbody > tr > th,
|
||||
.ui.table:not(.unstackable) > tfoot > tr > th,
|
||||
.ui.table:not(.unstackable) > tr > td,
|
||||
.ui.table:not(.unstackable) > tbody > tr > td,
|
||||
.ui.table:not(.unstackable) > tfoot > tr > td {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
}
|
||||
.ui.table:not(.unstackable) > thead {
|
||||
display: block;
|
||||
}
|
||||
.ui.table:not(.unstackable) > tfoot {
|
||||
display: block;
|
||||
}
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr > td,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25em 0.75em;
|
||||
}
|
||||
.ui.table:not(.unstackable) > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > thead > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > tbody > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > tfoot > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > tr > td:first-child,
|
||||
.ui.table:not(.unstackable) > tbody > tr > td:first-child,
|
||||
.ui.table:not(.unstackable) > tfoot > tr > td:first-child {
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.ui.table th.collapsing,
|
||||
.ui.table td.collapsing {
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.fixed.table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
.ui.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 {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.attached.table {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.attached + .ui.attached.table:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui[class*="bottom attached"].table {
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui[class*="bottom attached"].table:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.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;
|
||||
}
|
||||
|
||||
/* Column Width */
|
||||
.ui.table th.one.wide,
|
||||
.ui.table td.one.wide {
|
||||
width: 6.25%;
|
||||
}
|
||||
.ui.table th.two.wide,
|
||||
.ui.table td.two.wide {
|
||||
width: 12.5%;
|
||||
}
|
||||
.ui.table th.three.wide,
|
||||
.ui.table td.three.wide {
|
||||
width: 18.75%;
|
||||
}
|
||||
.ui.table th.four.wide,
|
||||
.ui.table td.four.wide {
|
||||
width: 25%;
|
||||
}
|
||||
.ui.table th.five.wide,
|
||||
.ui.table td.five.wide {
|
||||
width: 31.25%;
|
||||
}
|
||||
.ui.table th.six.wide,
|
||||
.ui.table td.six.wide {
|
||||
width: 37.5%;
|
||||
}
|
||||
.ui.table th.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%;
|
||||
}
|
||||
.ui.table th.eleven.wide,
|
||||
.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;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.basic.table > thead > tr > th,
|
||||
.ui.basic.table > tbody > tr > th,
|
||||
.ui.basic.table > tfoot > tr > th,
|
||||
.ui.basic.table > tr > th {
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
}
|
||||
.ui.basic.table > tbody > tr {
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.basic.table > tbody > tr > td,
|
||||
.ui.basic.table > tfoot > tr > td,
|
||||
.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,
|
||||
.ui.celled.table > tbody > tr > th,
|
||||
.ui.celled.table > tfoot > tr > th,
|
||||
.ui.celled.table > tr > td,
|
||||
.ui.celled.table > tbody > tr > td,
|
||||
.ui.celled.table > tfoot > tr > td {
|
||||
border-left: 1px solid var(--color-secondary-alpha-50);
|
||||
}
|
||||
.ui.celled.table > tr > th:first-child,
|
||||
.ui.celled.table > thead > tr > th:first-child,
|
||||
.ui.celled.table > tbody > tr > th:first-child,
|
||||
.ui.celled.table > tfoot > tr > th:first-child,
|
||||
.ui.celled.table > tr > td:first-child,
|
||||
.ui.celled.table > tbody > tr > td:first-child,
|
||||
.ui.celled.table > tfoot > tr > td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.compact.table > tr > th,
|
||||
.ui.compact.table > thead > tr > th,
|
||||
.ui.compact.table > tbody > tr > th,
|
||||
.ui.compact.table > tfoot > tr > th {
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.7em;
|
||||
}
|
||||
.ui.compact.table > tr > td,
|
||||
.ui.compact.table > tbody > tr > td,
|
||||
.ui.compact.table > tfoot > tr > td {
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
/* use more horizontal padding on first and last items for visuals */
|
||||
.ui.table > thead > tr > th:first-of-type,
|
||||
.ui.table > tbody > tr > td:first-of-type,
|
||||
.ui.table > tr > td:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.ui.table > thead > tr > th:last-of-type,
|
||||
.ui.table > tbody > tr > td:last-of-type,
|
||||
.ui.table > tr > td:last-of-type {
|
||||
padding-right: 10px;
|
||||
}
|
||||
179
web_src/css/modules/tippy.css
Normal file
179
web_src/css/modules/tippy.css
Normal file
@@ -0,0 +1,179 @@
|
||||
/* styles are based on node_modules/tippy.js/dist/tippy.css */
|
||||
|
||||
/* class to hide tippy target elements on page load */
|
||||
.tippy-target {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* show target element once it's been moved by tippy.js */
|
||||
.tippy-content .tippy-target {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
[data-tippy-root] {
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.tippy-box {
|
||||
position: relative;
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="default"] {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
/* bare theme, no styling at all, except box-shadow */
|
||||
.tippy-box[data-theme="bare"] {
|
||||
border: none;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="bare"] .tippy-content {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* tooltip theme for text tooltips */
|
||||
|
||||
.tippy-box[data-theme="tooltip"] {
|
||||
background-color: var(--color-tooltip-bg);
|
||||
color: var(--color-tooltip-text);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="tooltip"] .tippy-content {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
|
||||
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
|
||||
fill: var(--color-tooltip-bg);
|
||||
}
|
||||
|
||||
/* menu theme for .ui.menu */
|
||||
|
||||
.tippy-box[data-theme="menu"] {
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .tippy-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-menu);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px 18px;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
text-decoration: none;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item:focus {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
/* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
|
||||
|
||||
.tippy-box[data-theme="box-with-header"] {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"] .tippy-content {
|
||||
background: var(--color-box-body);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"][data-placement^="top"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-box-body);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"][data-placement^="bottom"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-box-header);
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
|
||||
top: 16px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
|
||||
transform: rotate(90deg);
|
||||
top: calc(50% - 3px);
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
|
||||
transform: rotate(-90deg);
|
||||
top: calc(50% - 3px);
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow,
|
||||
.tippy-svg-arrow > svg {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow-outer {
|
||||
fill: var(--color-secondary);
|
||||
}
|
||||
|
||||
.tippy-svg-arrow-inner {
|
||||
fill: var(--color-menu);
|
||||
}
|
||||
91
web_src/css/modules/toast.css
Normal file
91
web_src/css/modules/toast.css
Normal file
@@ -0,0 +1,91 @@
|
||||
.toastify {
|
||||
color: var(--color-white);
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
transition: all .2s ease;
|
||||
z-index: var(--z-index-toast);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 8px 24px var(--color-shadow);
|
||||
display: flex;
|
||||
max-width: 50vw;
|
||||
min-width: 300px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.toastify.on {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
border-radius: var(--border-radius);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
display: inline-flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-duplicate-number::before {
|
||||
content: "(";
|
||||
}
|
||||
.toast-duplicate-number {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
.toast-duplicate-number::after {
|
||||
content: ")";
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.toast-close:active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.toastify-right {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.toastify-left {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.toastify-top {
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
.toastify-bottom {
|
||||
bottom: -150px;
|
||||
}
|
||||
|
||||
.toastify-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.toastify-right, .toastify-left {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: fit-content;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user