1764 lines
34 KiB
Sass
1764 lines
34 KiB
Sass
// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
|
|
|
|
@use "common" as *
|
|
|
|
\:root
|
|
// THEME INDEPENDENT COLORS
|
|
--color-error: #8c0707
|
|
--color-error-dark: #500303
|
|
--color-warning: #fc9900
|
|
--color-warning-dark: #c27400
|
|
--color-success: #23d160
|
|
--color-success-dark: #1ca64c
|
|
--color-info: #c4c4c4
|
|
--color-info-dark: #919191
|
|
--color-nonactive: #efefef
|
|
--color-nonactive-dark: #9a989e
|
|
--color-lightblack: #1A2A36
|
|
--color-lightwhite: #fcfffa
|
|
--color-grey: #B1B5C0
|
|
--color-grey-light: #efefef
|
|
--color-grey-lighter: #f5f5f5
|
|
--color-grey-medium: #9A989E
|
|
--color-font: #34303a
|
|
--color-fontsec: #5b5861
|
|
|
|
// FONTS
|
|
--font-base: "Source Sans Pro", "Trebuchet MS", sans-serif
|
|
--font-logo: "Roboto", var(--font-base)
|
|
--font-monospace: "Source Code Pro", monospace
|
|
|
|
// DIMENSIONS
|
|
--header-height: 100px
|
|
--header-height-collapsed: 60px
|
|
|
|
*
|
|
box-sizing: border-box
|
|
padding: 0
|
|
margin: 0
|
|
-webkit-font-smoothing: antialiased
|
|
|
|
body
|
|
background-color: white
|
|
color: var(--color-font)
|
|
font-family: var(--font-base)
|
|
font-weight: 400
|
|
font-size: 16px
|
|
overflow-y: scroll
|
|
|
|
// THEMES
|
|
|
|
body
|
|
// DEFAULT LMU THEME
|
|
--color-lmu-green: #000091
|
|
--color-primary: var(--color-lmu-green)
|
|
--color-light: #8c96c8
|
|
--color-lighter: #cccce9
|
|
--color-dark: #6666bd
|
|
--color-darker: #3333a7
|
|
--color-link: var(--color-font)
|
|
--color-link-hover: var(--color-font)
|
|
--color-lmu-box-border: var(--color-lightwhite)
|
|
|
|
&.theme--lavender
|
|
--color-primary: #584c9c
|
|
--color-light: #5969b5
|
|
--color-lighter: #5f7dc2
|
|
--color-dark: #4c4279
|
|
--color-darker: #3c2765
|
|
--color-link: var(--color-dark)
|
|
--color-link-hover: var(--color-darker)
|
|
|
|
&.theme--neutral-blue
|
|
--color-primary: #3E606F
|
|
--color-light: rgb(189, 201, 219)
|
|
--color-lighter: rgb(145, 159, 170)
|
|
--color-dark: rgb(42, 74, 88)
|
|
--color-darker: #193441
|
|
|
|
&.theme--aberdeen-reds
|
|
--color-primary: #820333
|
|
--color-light: #C9283E
|
|
--color-lighter: #F0433A
|
|
--color-dark: #540032
|
|
--color-darker: #2E112D
|
|
|
|
&.theme--moss-green
|
|
--color-primary: #5C996B
|
|
--color-light: #7ACC8F
|
|
--color-lighter: #99FFB2
|
|
--color-dark: #3D6647
|
|
--color-darker: #1F3324
|
|
|
|
&.theme--sky-love
|
|
--color-primary: #87ABE5
|
|
--color-light: #A0C6F2
|
|
--color-lighter: #BAE2FF
|
|
--color-dark: #7A95DE
|
|
--color-darker: #6B7BC9
|
|
--color-link: var(--color-lightblack)
|
|
--color-link-hover: var(--color-darker)
|
|
|
|
// END THEMES
|
|
|
|
.emph
|
|
font-style: italic
|
|
|
|
a:not(.btn),
|
|
a:visited:not(.btn)
|
|
text-decoration: none
|
|
font-weight: 600
|
|
transition: color .2s ease, background-color .2s ease
|
|
|
|
a
|
|
color: var(--color-link)
|
|
|
|
a:hover
|
|
color: var(--color-link-hover)
|
|
|
|
ul, ol
|
|
margin-left: 20px
|
|
|
|
h1, h2, h3, .div-h3, h4, h5
|
|
font-weight: 600
|
|
|
|
h1
|
|
font-size: 32px
|
|
margin-bottom: 10px
|
|
|
|
h2
|
|
font-size: 24px
|
|
margin: 10px 0
|
|
|
|
&:first-child
|
|
margin-top: 0
|
|
|
|
h3, .div-h3
|
|
font-size: 20px
|
|
margin: 10px 0
|
|
|
|
&:first-child
|
|
margin-top: 0
|
|
|
|
h4
|
|
font-size: 16px
|
|
margin: 0
|
|
|
|
@media (max-width: 768px)
|
|
h1
|
|
font-size: 24px
|
|
|
|
h2
|
|
font-size: 20px
|
|
|
|
h3, .div-h3
|
|
font-size: 16px
|
|
|
|
// LAYOUT
|
|
.main
|
|
position: relative
|
|
|
|
.main__content
|
|
--current-header-height: var(--header-height-collapsed)
|
|
position: relative
|
|
background-color: white
|
|
transition: padding-left .2s ease-out, margin-top 0.2s ease
|
|
margin-top: var(--current-header-height)
|
|
margin-left: 0
|
|
|
|
:target:not(table, tr, .show-hide__toggle)::before
|
|
content: ""
|
|
display: block
|
|
height: var(--current-header-height)
|
|
margin: calc(-1 * var(--current-header-height)) 0 0
|
|
|
|
> .container
|
|
margin: 20px 0
|
|
|
|
.navbar__container-radio:checked ~ * &
|
|
margin-top: calc(var(--current-header-height) + 30px)
|
|
|
|
@media (min-width: 769px) and (min-height: 501px)
|
|
margin-top: calc(var(--current-header-height) + 44px)
|
|
|
|
.main__content, .modal__content
|
|
a
|
|
text-decoration: underline
|
|
|
|
p, form, .div-p
|
|
margin: 0.5rem 0
|
|
|
|
&:first-child
|
|
margin: 0 0 0.5rem 0
|
|
|
|
&:last-child
|
|
margin: 0.5rem 0 0 0
|
|
|
|
&:first-child
|
|
margin: 0
|
|
|
|
@media (min-width: 769px) and (min-height: 501px)
|
|
.main__content
|
|
--current-header-height: var(--header-height)
|
|
|
|
.main__content-body
|
|
padding: 13px
|
|
|
|
@media (min-width: 426px)
|
|
.main__content-body
|
|
padding: 13px 20px
|
|
.two-columns
|
|
column-count: 1
|
|
|
|
@media (min-width: 769px)
|
|
.main__content-body
|
|
padding: 20px 40px
|
|
.two-columns
|
|
column-count: 2
|
|
|
|
.pseudo-focus
|
|
outline: 5px auto var(--color-light)
|
|
outline: 5px auto -webkit-focus-ring-color
|
|
|
|
// CONTAINER
|
|
.container
|
|
+ .container
|
|
margin-top: 20px
|
|
|
|
// GENERAL BUTTON STYLES
|
|
input[type="submit"]:not(.btn-link),
|
|
input[type="button"]:not(.btn-link),
|
|
button:not(.btn-link),
|
|
.btn:not(.btn-link)
|
|
font-family: var(--font-base)
|
|
outline: 0
|
|
box-shadow: 0
|
|
background-color: var(--color-dark)
|
|
color: white
|
|
min-width: 100px
|
|
transition: all .1s
|
|
font-size: 16px
|
|
cursor: pointer
|
|
display: inline-block
|
|
text-decoration: none
|
|
|
|
&:not(.navbar__container-link)
|
|
padding: 10px 17px
|
|
border: 0
|
|
|
|
a:hover
|
|
color: white
|
|
|
|
&:focus
|
|
border-color: #3273dc
|
|
box-shadow: 0 0 0 0.25rem rgba(50, 115, 220, 0.25)
|
|
outline: 0
|
|
|
|
.buttongroup > &
|
|
min-width: 0
|
|
|
|
&.btn-danger
|
|
background-color: var(--color-error-dark)
|
|
|
|
.buttongroup
|
|
display: grid
|
|
grid: min-content / auto-flow max-content
|
|
|
|
> form
|
|
margin: 0 !important
|
|
|
|
.buttongroup--inline
|
|
display: inline-grid
|
|
|
|
input[type="submit"][disabled]:not(.btn-link),
|
|
input[type="button"][disabled]:not(.btn-link),
|
|
button[disabled]:not(.btn-link),
|
|
.btn[disabled]:not(.btn-link)
|
|
opacity: 0.3
|
|
background-color: var(--color-grey)
|
|
cursor: default
|
|
|
|
input[type="submit"]:not([disabled]):not(.btn-link):hover,
|
|
input[type="button"]:not([disabled]):not(.btn-link):hover,
|
|
button:not([disabled]):not(.btn-link):hover,
|
|
.btn:not([disabled]):not(.btn-link):hover
|
|
background-color: var(--color-light)
|
|
color: white
|
|
|
|
&.btn-danger
|
|
background-color: var(--color-error)
|
|
|
|
.btn-primary:not(.btn-link)
|
|
background-color: var(--color-primary)
|
|
|
|
.btn-info:not(.btn-link)
|
|
background-color: var(--color-info)
|
|
|
|
.btn--small:not(.btn-link)
|
|
padding: 4px 7px
|
|
background-color: var(--color-darker)
|
|
|
|
input[type="submit"].btn-info:not(.btn-link):hover,
|
|
input[type="button"].btn-info:not(.btn-link):hover,
|
|
.btn-info:not(.btn-link):hover
|
|
background-color: var(--color-grey)
|
|
|
|
.btn-link
|
|
font-family: var(--font-base)
|
|
outline: 0
|
|
border: 0
|
|
box-shadow: 0
|
|
background: none
|
|
color: inherit
|
|
padding: 0
|
|
min-width: unset
|
|
font-size: inherit
|
|
cursor: pointer
|
|
display: inline
|
|
text-decoration: underline
|
|
font-weight: 600
|
|
font-style: inherit
|
|
transition: color .2s ease, background-color .2s ease
|
|
|
|
&:not([disabled]):hover
|
|
color: var(--color-link-hover)
|
|
|
|
// STACK ICON STYLE
|
|
.icon--stacked
|
|
font-size: 0.5rem
|
|
|
|
// GENERAL TABLE STYLES
|
|
.table
|
|
margin: 21px 0
|
|
width: 100%
|
|
|
|
.table--narrow
|
|
width: unset
|
|
|
|
|
|
.table:first-child
|
|
margin-top: 0
|
|
|
|
.table:last-child
|
|
margin-bottom: 0
|
|
|
|
.table--striped
|
|
.table__row:not(.no-stripe):not(.table__row--sum):nth-child(even)
|
|
.table__td
|
|
background-color: rgba(0, 0, 0, 0.03)
|
|
|
|
.table--hover
|
|
.table__row:not(.no-hover):not(.table__row--sum):not(.table__row--head):not(.table__row--foot):hover
|
|
.table__td
|
|
background-color: rgba(0, 0, 0, 0.07)
|
|
|
|
.table__row--sum td.table__td::before
|
|
content: 'Σ'
|
|
font-weight: bold
|
|
margin-right: .25em
|
|
|
|
// SCROLLTABLE
|
|
.scrolltable
|
|
overflow: auto
|
|
|
|
.scrolltable--bordered
|
|
box-shadow: 0 0 1px 1px var(--color-grey-light)
|
|
|
|
@media (max-width: 425px)
|
|
.scrolltable
|
|
margin-left: -10px
|
|
padding-left: 10px
|
|
margin-right: -10px
|
|
padding-right: 10px
|
|
|
|
// TABLE DESIGN
|
|
.table__td, .table__th
|
|
padding-top: 14px
|
|
padding-bottom: 10px
|
|
padding-left: 10px
|
|
padding-right: 10px
|
|
max-width: 300px
|
|
|
|
&.table__td--unlimited
|
|
max-width: unset
|
|
|
|
&.table__td--wide
|
|
max-width: 600px
|
|
|
|
.table__td--number
|
|
width: min-content
|
|
padding-left: 0
|
|
|
|
.table--striped &, .table--hover &
|
|
vertical-align: middle
|
|
|
|
.table__td-content
|
|
text-align: right
|
|
font-size: 0.9rem
|
|
font-weight: 600
|
|
color: var(--color-fontsec)
|
|
|
|
.table__td--tooltip
|
|
width: 2em
|
|
|
|
.table__td
|
|
font-size: 16px
|
|
color: var(--color-font)
|
|
line-height: 1.4
|
|
vertical-align: top
|
|
|
|
&.table__td--bottom
|
|
vertical-align: bottom
|
|
|
|
&.table__td--middle
|
|
vertical-align: middle
|
|
|
|
.table__td--automatic
|
|
font-style: oblique
|
|
color: var(--color-fontsec)
|
|
|
|
.table__td--overriden
|
|
font-weight: bold
|
|
|
|
.table__td--center > .table__td-content
|
|
margin: auto
|
|
width: max-content
|
|
|
|
.table__th
|
|
position: relative
|
|
font-size: 16px
|
|
line-height: 1.4
|
|
padding-top: 10px
|
|
padding-bottom: 10px
|
|
font-weight: bold
|
|
text-align: left
|
|
vertical-align: middle
|
|
|
|
&:not(.table__th--bright)
|
|
background-color: var(--color-dark)
|
|
color: white
|
|
|
|
a
|
|
color: white
|
|
text-decoration: none
|
|
font-weight: bold
|
|
|
|
&:hover
|
|
color: inherit
|
|
|
|
&::before
|
|
@extend .fas
|
|
|
|
content: fa-content($fa-var-link)
|
|
margin-right: 0.25em
|
|
|
|
&.table__th-link::before
|
|
display: none
|
|
|
|
.table__th--number
|
|
padding: 0
|
|
|
|
@media (max-width: 1200px)
|
|
.table th
|
|
padding: 4px 6px
|
|
|
|
.table__td-content
|
|
max-height: 200px
|
|
overflow-y: auto
|
|
|
|
.table__td--unlimited &, .table__td--wide &
|
|
max-height: unset
|
|
overflow-y: unset
|
|
|
|
.table--vertical
|
|
th, .table__th
|
|
background-color: transparent
|
|
color: var(--color-font)
|
|
width: 170px
|
|
text-align: right
|
|
padding-right: 15px
|
|
font-weight: 400
|
|
|
|
a
|
|
color: var(--color-lin)
|
|
|
|
&:hover
|
|
color: var(--color-link-hover)
|
|
|
|
&::before
|
|
display: none
|
|
|
|
td, .table__td
|
|
font-weight: 600
|
|
color: var(--color-font)
|
|
|
|
.table--condensed
|
|
margin: 0
|
|
|
|
.table__th,
|
|
.table__td
|
|
padding: 4px 8px
|
|
|
|
// UNORDERED LIST
|
|
.list-ul__item
|
|
// padding: 4px 0;
|
|
line-height: 25px
|
|
|
|
// LIST MODIFIERS
|
|
.list--iconless
|
|
list-style-type: none
|
|
margin-left: 0
|
|
|
|
.list--inline
|
|
ul
|
|
display: inline-block
|
|
margin-left: 0
|
|
|
|
li
|
|
display: inline-block
|
|
|
|
ul.list--inline
|
|
display: inline-block
|
|
margin-left: 0
|
|
|
|
li
|
|
display: inline-block
|
|
|
|
.list--comma-separated li
|
|
&::after
|
|
content: ', '
|
|
white-space: pre
|
|
|
|
&:last-of-type::after
|
|
content: none
|
|
|
|
.list--space-separated li
|
|
&::after
|
|
content: ' '
|
|
white-space: pre
|
|
|
|
&:last-of-type::after
|
|
content: none
|
|
|
|
.list--icon-width li
|
|
width: 1rem
|
|
height: 1rem
|
|
|
|
// DEFINITION LIST
|
|
.deflist
|
|
display: grid
|
|
grid-template-columns: minmax(0,100%)
|
|
grid-row-gap: 7px
|
|
|
|
.deflist__dt,
|
|
.deflist__dd
|
|
padding: 2px 0
|
|
|
|
.deflist__dt
|
|
font-weight: 600
|
|
font-size: 1.12em
|
|
margin-bottom: .6em
|
|
|
|
.deflist__explanation
|
|
color: var(--color-fontsec)
|
|
font-size: 0.9em
|
|
|
|
.deflist__dd
|
|
> p, > .div-p
|
|
margin-top: 0
|
|
|
|
@media (min-width: 768px)
|
|
.deflist
|
|
grid-template-columns: fit-content(25vw) minmax(0,1fr)
|
|
|
|
.deflist
|
|
margin-top: -10px
|
|
margin-right: -15px
|
|
|
|
.deflist__dd
|
|
padding-right: 15px
|
|
|
|
.deflist__dt,
|
|
.deflist__dd
|
|
padding: .75em 0
|
|
margin: 0
|
|
font-size: unset
|
|
|
|
.explanation &
|
|
padding-top: 0
|
|
padding-bottom: 0
|
|
|
|
&:last-of-type
|
|
border: 0
|
|
|
|
.deflist__dt
|
|
padding-right: 50px
|
|
|
|
.deflist__dd
|
|
padding-right: 15px
|
|
|
|
section
|
|
padding-bottom: 30px
|
|
border-bottom: 1px solid #d3d3d3
|
|
|
|
& + section, & + .two-column-sections
|
|
margin-top: 20px
|
|
|
|
&:last-of-type
|
|
border-bottom: none
|
|
padding-bottom: 0px
|
|
|
|
.two-column-sections
|
|
padding-bottom: 30px
|
|
border-bottom: 1px solid #d3d3d3
|
|
|
|
& + section, & + .two-column-sections
|
|
margin-top: 20px
|
|
|
|
&:last-of-type
|
|
border-bottom: none
|
|
padding-bottom: 0px
|
|
|
|
@media (min-width: 768px)
|
|
display: flex
|
|
justify-content: space-between
|
|
|
|
& > section
|
|
padding: 0
|
|
border: none
|
|
|
|
margin: 0 auto
|
|
width: calc(50% - 7px)
|
|
|
|
.headline-one
|
|
margin-bottom: 10px
|
|
|
|
// Notification style used as requested by @hamanf in #298, but class was not globally available. Copied from dead-code. For @hamanf to clean up:
|
|
|
|
.notification
|
|
position: relative
|
|
border-radius: 3px
|
|
padding: 10px 20px 10px 100px
|
|
margin: 40px auto
|
|
box-shadow: 0 0 4px 2px inset currentColor
|
|
min-height: 100px
|
|
max-width: 700px
|
|
font-weight: 600
|
|
vertical-align: center
|
|
display: grid
|
|
grid-column: 2
|
|
|
|
h1 + &
|
|
margin: 0 auto 0.5rem
|
|
|
|
&::before
|
|
@extend .fas
|
|
|
|
position: absolute
|
|
display: flex
|
|
left: 0
|
|
top: 0
|
|
height: 100%
|
|
width: 100px
|
|
font-size: 50px
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
.notification__content
|
|
grid-column: 1
|
|
align-self: center
|
|
color: var(--color-font)
|
|
|
|
&.notification--broad
|
|
max-width: none
|
|
|
|
&:first-child
|
|
margin-top: 0
|
|
&:last-child
|
|
margin-bottom: 0
|
|
|
|
.form-section-notification
|
|
display: grid
|
|
grid-template-columns: 1fr 3fr
|
|
grid-gap: 5px
|
|
|
|
fieldset
|
|
display: grid
|
|
grid-template-columns: 1fr 3fr
|
|
grid-gap: 5px
|
|
grid-column: 1/3
|
|
|
|
.notification
|
|
margin: 0
|
|
|
|
+ .form-group, + .form-section-legend, + .form-section-notification
|
|
margin-top: 11px
|
|
|
|
+ .form-section-title
|
|
margin-top: 40px
|
|
|
|
@media (max-width: 768px)
|
|
.form-section-notification
|
|
grid-template-columns: 1fr
|
|
margin-top: 17px
|
|
|
|
fieldset
|
|
grid-template-columns: 1fr
|
|
grid-column: 1/2
|
|
|
|
.notification
|
|
grid-column: 1
|
|
max-width: none
|
|
padding-left: 40px
|
|
|
|
&::before
|
|
height: auto
|
|
width: 45px
|
|
font-size: 20px
|
|
top: 15px
|
|
|
|
.notification-error
|
|
color: var(--color-error)
|
|
|
|
.notification-warning
|
|
color: var(--color-warning)
|
|
|
|
.notification-info
|
|
color: var(--color-lightblack)
|
|
|
|
.notification-success
|
|
color: var(--color-success-dark)
|
|
|
|
.notification-nonactive
|
|
color: var(--color-nonactive)
|
|
|
|
// "Heated" element.
|
|
// Set custom property "--hotness" to a value from 0 to 1 to turn
|
|
// the element's background to a color on a gradient from green to red.
|
|
|
|
// TBD:
|
|
// - move to a proper place
|
|
// - think about font-weight...
|
|
|
|
// Example:
|
|
// <div .heated style="--hotness: 0.2">Lorem ipsum
|
|
|
|
.heated
|
|
--hotness: 0
|
|
|
|
$hue: calc(120 - var(--hotness) * 120)
|
|
$opacity: calc(var(--hotness) * var(--hotness) / 3 + 0.1)
|
|
|
|
background-color: hsla($hue, 75%, 50%, $opacity) !important
|
|
font-weight: calc(var(--hotness) * 200 + 400)
|
|
|
|
.dual-heated
|
|
--hotness: 0
|
|
|
|
$hue: calc(240 - var(--hotness) * 120)
|
|
$opacity: calc(((var(--hotness) - 1) * (var(--hotness) - 1)) / 3 + 0.1)
|
|
|
|
background-color: hsla($hue, 75%, 50%, $opacity) !important
|
|
font-weight: calc(((var(--hotness) - 1) * (var(--hotness) - 1)) * 200 + 400)
|
|
|
|
&.degenerate
|
|
$hue: calc(240 + var(--hotness) * 60)
|
|
|
|
background-color: hsla($hue, 75%, 50%, $opacity) !important
|
|
|
|
|
|
.uuid, .pseudonym, .ldap-primary-key, .email, .file-path, .metric-value, .metric-label, .workflow-payload--text, .cryptoid, .allocation-matching-fingerprint
|
|
font-family: var(--font-monospace)
|
|
|
|
.shown
|
|
font-family: var(--font-monospace)
|
|
white-space: pre-wrap
|
|
|
|
.token
|
|
font-family: var(--font-monospace)
|
|
white-space: pre-wrap
|
|
word-break: break-all
|
|
|
|
.form--inline
|
|
display: inline-block
|
|
|
|
.ribbon
|
|
position: fixed
|
|
top: calc(40px + var(--header-height))
|
|
transition: all 0.2s ease
|
|
right: -63px
|
|
transform: rotate(45deg)
|
|
width: 250px
|
|
background: var(--color-error)
|
|
text-align: center
|
|
color: var(--color-lightwhite)
|
|
font-weight: 600
|
|
font-size: 1.25rem
|
|
line-height: 2em
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)
|
|
z-index: 21
|
|
pointer-events: none
|
|
|
|
.navbar__container-radio:checked ~ &
|
|
top: calc(84px + var(--header-height))
|
|
|
|
@media (max-width: 768px), (max-height: 500px)
|
|
.ribbon
|
|
top: calc(20px + var(--header-height-collapsed))
|
|
right: -83px
|
|
transform: rotate(45deg) scale(0.6)
|
|
|
|
.navbar__container-radio:checked ~ &
|
|
top: calc(50px + var(--header-height-collapsed))
|
|
|
|
#admin-studyterms
|
|
select, option, input
|
|
min-width: 50px
|
|
|
|
.allocation__label, .allocation__explanation
|
|
color: var(--color-fontsec)
|
|
font-style: italic
|
|
|
|
.allocation__state
|
|
color: var(--color-font)
|
|
font-weight: 600
|
|
font-style: normal
|
|
|
|
.allocation__courses
|
|
margin: 20px 0 0 40px
|
|
|
|
.form-group__input > &
|
|
margin: 0
|
|
|
|
.allocation-course
|
|
display: grid
|
|
grid-template-columns: minmax(105px, 1fr) 9fr
|
|
grid-template-areas: 'name name' '. admin-info' '. registered' 'prio-label prio' 'instr-label instr' 'form-label form'
|
|
grid-gap: 5px 7px
|
|
margin: 12px 0
|
|
padding: 0 10px 12px 7px
|
|
border-left: 1px solid var(--color-grey)
|
|
|
|
// &:last-child {
|
|
padding: 12px 10px 0 10px;
|
|
}
|
|
|
|
& + .allocation-course {
|
|
border-top: 1px solid var(--color-grey);
|
|
}
|
|
|
|
&:nth-child(2n)
|
|
background-color: rgba(0, 0, 0, 0.015)
|
|
|
|
.allocation-course__registered
|
|
grid-area: registered
|
|
|
|
.allocation-course__priority
|
|
grid-area: prio
|
|
|
|
.allocation-course__priority-label
|
|
grid-area: prio-label
|
|
justify-self: end
|
|
align-self: center
|
|
text-align: right
|
|
|
|
.allocation-course__name
|
|
grid-area: name
|
|
align-self: center
|
|
font-size: 1.2rem
|
|
|
|
.allocation-course__instructions
|
|
grid-area: instr
|
|
|
|
.allocation-course__instructions-label
|
|
grid-area: instr-label
|
|
justify-self: end
|
|
text-align: right
|
|
|
|
.allocation-course__application
|
|
grid-area: form
|
|
|
|
.allocation-course__application-label
|
|
grid-area: form-label
|
|
justify-self: end
|
|
text-align: right
|
|
padding-top: 6px
|
|
|
|
.allocation-course__admin-info
|
|
@extend .explanation
|
|
grid-area: admin-info
|
|
|
|
.notification
|
|
margin-top: 0
|
|
|
|
@media (max-width: 426px)
|
|
.allocation-course
|
|
grid-template-columns: 1fr
|
|
grid-template-areas: 'name' 'admin-info' 'registered' 'prio-label' 'prio' 'instr-label' 'instr' 'form-label' 'form'
|
|
|
|
.allocation-course__application-label
|
|
padding-top: 0
|
|
|
|
.comment, .literal-error
|
|
white-space: pre-wrap
|
|
font-family: var(--font-monospace)
|
|
|
|
th
|
|
vertical-align: top
|
|
text-align: left
|
|
|
|
th, td
|
|
padding-bottom: 7px
|
|
|
|
.course-news
|
|
max-height: 50vh
|
|
overflow: auto
|
|
|
|
.course-news-item
|
|
padding: 12px 0
|
|
border-bottom: 1px solid #d3d3d3
|
|
|
|
&:last-child
|
|
padding-bottom: 0
|
|
border-bottom: none
|
|
|
|
&:first-child
|
|
padding-top: 0
|
|
|
|
.course-news-item__last-edit
|
|
color: var(--color-fontsec)
|
|
font-style: italic
|
|
|
|
.course-news-item__title .modal__trigger-label
|
|
font-style: normal
|
|
|
|
.course-news-item__summary .modal__trigger-label
|
|
font-weight: normal
|
|
font-style: normal
|
|
color: var(--color-font)
|
|
|
|
.course-event-note--hidden
|
|
display: none
|
|
|
|
.bound_explanation
|
|
color: var(--color-fontsec)
|
|
font-style: italic
|
|
|
|
.action
|
|
max-width: 800px
|
|
padding: 3px 0
|
|
|
|
&:not(:last-child)
|
|
margin-bottom: 7px
|
|
|
|
&:not(:first-child)
|
|
margin-top: 7px
|
|
|
|
.action__options
|
|
max-height: 450px
|
|
overflow-y: auto
|
|
|
|
.action__option
|
|
display: flex
|
|
|
|
&:not(:last-child)
|
|
margin-bottom: 10px
|
|
|
|
.action__label,
|
|
.action__option-label
|
|
margin-left: 15px
|
|
vertical-align: top
|
|
|
|
.action__fieldset
|
|
margin: 7px 0 5px 9px
|
|
padding: 5px 0 10px
|
|
border-left: 1px solid #bcbcbc
|
|
padding-left: 16px
|
|
position: relative
|
|
|
|
.action__toggle-all
|
|
display: flex
|
|
border-bottom: 1px solid #bcbcbc
|
|
padding-bottom: 8px
|
|
margin-bottom: 8px
|
|
|
|
.action__checked-counter
|
|
position: absolute
|
|
right: 5px
|
|
top: 5px
|
|
|
|
.occurrence--not-registered, .no-bonus, .allocation-course--excluded, .allocation-course--inactive, .occurrence--ignored, .allocation--no-allocation-user
|
|
text-decoration: line-through
|
|
|
|
.result
|
|
font-size: 3rem
|
|
margin: 30px 30px 0 !important
|
|
|
|
.glossary
|
|
dt, .dt
|
|
font-weight: 600
|
|
|
|
&.sec
|
|
font-style: italic
|
|
font-size: 0.9rem
|
|
font-weight: 600
|
|
color: var(--color-fontsec)
|
|
|
|
dd, .dd
|
|
margin-left: 12px
|
|
|
|
dd + dt, .dd + dt, dd + .dt, .dd + .dt
|
|
margin-top: 17px
|
|
|
|
.deflist--no-grid
|
|
dt, .dt
|
|
font-weight: 600
|
|
dd, .dd
|
|
margin-left: 12px
|
|
|
|
.note
|
|
font-size: 0.9rem
|
|
font-weight: 600
|
|
color: var(--color-fontsec)
|
|
|
|
.explanation
|
|
font-style: italic
|
|
@extend .note
|
|
|
|
emph
|
|
font-style: normal
|
|
|
|
// SORTABLE TABLE-HEADERS
|
|
.table__th.sortable
|
|
position: relative
|
|
padding-right: 24px
|
|
cursor: pointer
|
|
|
|
.table__th.presorted,
|
|
.table__th.presorted
|
|
position: relative
|
|
padding-right: 24px
|
|
|
|
.table__th.sortable::after,
|
|
.table__th.sortable::before
|
|
content: ''
|
|
position: absolute
|
|
top: 50%
|
|
right: 4px
|
|
width: 0
|
|
height: 0
|
|
border-left: 8px solid transparent
|
|
border-right: 8px solid transparent
|
|
border-bottom: 8px solid rgba(255, 255, 255, 0.4)
|
|
|
|
.table__th.sortable::before
|
|
// magic numbers to move arrow back in the right position after flipping it.
|
|
this allows us to use the same border for the up and the down arrow
|
|
transform: translateY(150%) scale(1, -1)
|
|
transform-origin: top
|
|
|
|
.table__th.sortable::after
|
|
transform: translateY(-150%)
|
|
|
|
.table__th.sortable:hover::before,
|
|
.table__th.sortable:hover::after
|
|
border-bottom-color: rgba(255, 255, 255, 0.7)
|
|
|
|
.table__th.sorted-asc::before,
|
|
.table__th.sorted-desc::after
|
|
border-bottom-color: white !important
|
|
|
|
.table__th.presorted::before,
|
|
.table__th.presorted::after
|
|
content: ''
|
|
position: absolute
|
|
top: 50%
|
|
right: 4px
|
|
width: 0
|
|
height: 0
|
|
border-left: 8px solid transparent
|
|
border-right: 8px solid transparent
|
|
border-bottom: 8px solid rgba(255, 255, 255, 0.2)
|
|
|
|
.table__th.presorted.sorted-asc::before,
|
|
.table__th.presorted.sorted-desc::after
|
|
border-bottom-color: white !important
|
|
|
|
.table__th.presorted::before
|
|
transform: translateY(150%) scale(1, -1)
|
|
transform-origin: top
|
|
.table__th.presorted::after
|
|
transform: translateY(-150%)
|
|
|
|
\:root
|
|
--color-grey-light: #efefef
|
|
--color-grey-lighter: #f5f5f5
|
|
--color-fontsec: #5b5861
|
|
--course-bg-color: var(--color-grey-lighter)
|
|
--course-expanded-bg-color: var(--color-grey-light)
|
|
|
|
.scrolltable
|
|
box-shadow: none !important
|
|
|
|
.course-header::after,
|
|
.course-header::before
|
|
content: ''
|
|
position: absolute
|
|
right: 10px
|
|
top: 20px
|
|
width: 0
|
|
height: 0
|
|
border-left: 8px solid transparent
|
|
border-right: 8px solid transparent
|
|
border-bottom: 8px solid rgba(255, 255, 255, 0.4)
|
|
|
|
.inactive-course-header::before,
|
|
.inactive-course-header::after
|
|
content: ''
|
|
position: absolute
|
|
right: 10px
|
|
top: 20px
|
|
width: 0
|
|
height: 0
|
|
border-left: 8px solid transparent
|
|
border-right: 8px solid transparent
|
|
border-bottom: 8px solid rgba(255,255,255, 0.2)
|
|
|
|
.inactive-course-header.sorted-asc::before,
|
|
.inactive-course-header.sorted-desc::after
|
|
border-bottom-color: white !important
|
|
|
|
.course-header::before
|
|
// magic numbers to move arrow back in the right position after flipping it.
|
|
this allows us to use the same border for the up and the down arrow
|
|
transform: translateY(150%) scale(1, -1)
|
|
transform-origin: top
|
|
|
|
.course-header::after
|
|
transform: translateY(-150%)
|
|
|
|
.inactive-course-header::before
|
|
transform: translateY(150%) scale(1, -1)
|
|
transform-origin: top
|
|
.inactive-course-header::after
|
|
transform: translateY(-150%)
|
|
|
|
.course-header:hover::before,
|
|
.course-header:hover::after
|
|
border-bottom-color: rgba(255, 255, 255, 0.7)
|
|
|
|
.sorted-asc::before,
|
|
.sorted-desc::after
|
|
border-bottom-color: white !important
|
|
|
|
.csv-export
|
|
margin-bottom: 13px
|
|
|
|
.csv-import
|
|
margin-bottom: 13px
|
|
|
|
.table-filter
|
|
margin-bottom: 13px
|
|
|
|
.table-filter__toggle
|
|
padding: 3px 7px
|
|
|
|
// TABLE HEADER
|
|
.table-header
|
|
display: flex
|
|
flex-flow: row-reverse
|
|
justify-content: space-between
|
|
margin-bottom: 15px
|
|
|
|
&:empty
|
|
margin: 0
|
|
|
|
// TABLE FOOTER
|
|
.table-footer
|
|
display: flex
|
|
flex-flow: row-reverse
|
|
justify-content: space-between
|
|
margin-top: 15px
|
|
|
|
&:empty
|
|
margin: 0
|
|
|
|
// PAGINATION
|
|
.pagination
|
|
margin-top: 20px
|
|
overflow: auto
|
|
|
|
.pages
|
|
text-align: center
|
|
white-space: nowrap
|
|
margin: 0
|
|
|
|
.page-link
|
|
margin-top: 7px
|
|
display: inline-block
|
|
background-color: var(--color-grey-medium)
|
|
|
|
+ .page-link
|
|
margin-left: 7px
|
|
|
|
a
|
|
color: var(--color-lightwhite)
|
|
padding: 7px 13px
|
|
display: inline-block
|
|
text-decoration: none
|
|
|
|
&:not(.current):hover
|
|
background-color: var(--color-primary)
|
|
|
|
a
|
|
color: var(--color-lightwhite)
|
|
|
|
&.current
|
|
pointer-events: none
|
|
background-color: var(--color-dark)
|
|
|
|
a
|
|
pointer-events: none
|
|
|
|
#changelog
|
|
max-height: 75vh
|
|
overflow: auto
|
|
|
|
#gitrev
|
|
font-size: 12px
|
|
white-space: pre-wrap
|
|
font-family: var(--font-monospace)
|
|
|
|
.breadcrumbs__container
|
|
position: relative
|
|
color: var(--color-lightwhite)
|
|
padding: 7px 13px
|
|
background-color: var(--color-dark)
|
|
|
|
a
|
|
color: var(--color-lightwhite)
|
|
|
|
@media (min-width: 426px)
|
|
.breadcrumbs__container
|
|
padding: 7px 20px
|
|
|
|
@media (min-width: 769px)
|
|
.breadcrumbs__container
|
|
padding: 7px 40px
|
|
|
|
ul.breadcrumbs__list
|
|
display: flex
|
|
align-items: center
|
|
height: 30px
|
|
margin: 0 -5px
|
|
|
|
& > li
|
|
display: block
|
|
|
|
.breadcrumbs__item
|
|
opacity: 0.8
|
|
margin: 0 5px
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
.breadcrumbs__item-separator
|
|
line-height: 0
|
|
opacity: 0.5
|
|
margin: 0 5px
|
|
margin-top: 1px
|
|
|
|
a.breadcrumbs__home
|
|
opacity: 0.5
|
|
margin-right: 7px
|
|
|
|
@media (min-width: 426px)
|
|
top: 8px
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
.breadcrumbs__last-item
|
|
font-weight: 600
|
|
opacity: 1
|
|
|
|
.recipient-categories
|
|
overflow: auto
|
|
max-height: 75vh
|
|
|
|
.recipient-category
|
|
max-width: 400px
|
|
padding: 3px 0
|
|
|
|
&:not(:last-child)
|
|
margin-bottom: 7px
|
|
|
|
&:not(:first-child)
|
|
margin-top: 7px
|
|
|
|
.recipient-category__options
|
|
max-height: 150px
|
|
overflow-y: auto
|
|
|
|
.recipient-category__option
|
|
display: flex
|
|
|
|
&:not(:last-child)
|
|
margin-bottom: 10px
|
|
|
|
.recipient-category__label,
|
|
.recipient-category__option-label
|
|
margin-left: 15px
|
|
vertical-align: top
|
|
|
|
.recipient-category__fieldset
|
|
margin: 7px 0 5px 9px
|
|
padding: 5px 0 10px
|
|
border-left: 1px solid #bcbcbc
|
|
padding-left: 16px
|
|
position: relative
|
|
|
|
.recipient-category__option-add
|
|
display: flex
|
|
|
|
.btn-mass-input-add
|
|
margin-left: 10px
|
|
padding: 10px 0
|
|
|
|
.recipient-category__options + .recipient-category__option-add
|
|
margin-top: 10px
|
|
|
|
.recipient-category__toggle-all
|
|
display: flex
|
|
border-bottom: 1px solid #bcbcbc
|
|
padding-bottom: 8px
|
|
margin-bottom: 8px
|
|
|
|
.recipient-category__checked-counter
|
|
position: absolute
|
|
right: 5px
|
|
top: 5px
|
|
|
|
.table__td--csv, .table__th--csv
|
|
font-family: var(--font-monospace)
|
|
|
|
.confirmationText
|
|
white-space: pre-wrap
|
|
font-size: 14px
|
|
font-family: var(--font-monospace)
|
|
|
|
.func-field__wrapper, .allocation-missing-prios, .allocation-users__accept, .corrections-overview__section
|
|
max-height: 75vh
|
|
overflow: auto
|
|
|
|
.footer
|
|
display: flex
|
|
flex-flow: row wrap
|
|
justify-content: center
|
|
align-items: baseline
|
|
align-content: flex-start
|
|
text-align: center
|
|
padding: 20px
|
|
position: relative
|
|
margin: 40px 0 0 0
|
|
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 10%
|
|
width: 80%
|
|
height: 2px
|
|
background-color: var(--color-grey-light)
|
|
|
|
.footer-links > *
|
|
margin-right: 0.5em
|
|
display: block
|
|
|
|
&:last
|
|
margin-right: 0
|
|
|
|
.table--grading-key
|
|
th, td
|
|
padding: 3px
|
|
|
|
.btn.btn-mass-input-delete,
|
|
.btn.btn-mass-input-add
|
|
background-color: #999
|
|
min-width: 50px
|
|
padding: 5px 15px
|
|
font-weight: 700
|
|
font-size: 1.3rem
|
|
|
|
.file-input__unpack
|
|
font-size: .9rem
|
|
display: flex
|
|
align-items: center
|
|
margin-top: 10px
|
|
|
|
.checkbox
|
|
display: inline-block
|
|
margin-left: 7px
|
|
|
|
.text--right
|
|
text-align: right
|
|
.text--center
|
|
text-align: center
|
|
|
|
.course__registration-status
|
|
margin-bottom: 12px
|
|
|
|
.csv-parse-error
|
|
white-space: pre-wrap
|
|
font-family: var(--font-monospace)
|
|
overflow: auto
|
|
max-height: 75vh
|
|
|
|
.labeled-checkbox
|
|
display: grid
|
|
grid-gap: 0 7px
|
|
grid-template-columns: 20px 1fr
|
|
grid-template-areas: "checkbox label"
|
|
|
|
&__checkbox
|
|
grid-area: checkbox
|
|
place-self: start center
|
|
line-height: 0
|
|
|
|
&__label
|
|
grid-area: label
|
|
|
|
.apidocs
|
|
pre
|
|
display: block
|
|
box-shadow: inset 0 0 4px 4px var(--color-grey-light)
|
|
white-space: pre-wrap
|
|
overflow-x: auto
|
|
tab-size: 2
|
|
padding: 10px
|
|
|
|
.news__system-messages
|
|
overflow-y: auto
|
|
max-height: 75vh
|
|
|
|
.news__system-message-detail
|
|
font-style: italic
|
|
font-size: 0.9rem
|
|
font-weight: 600
|
|
color: var(--color-fontsec)
|
|
|
|
.news__system-message-content + &
|
|
margin-top: 10px
|
|
|
|
.news__system-message
|
|
border-left: 3px solid var(--color-info)
|
|
padding-left: 17px
|
|
background-color: rgba(0,0,0,0.015)
|
|
|
|
& + .news__system-message
|
|
margin-top: 17px
|
|
|
|
&--info
|
|
border-left-color: var(--color-info)
|
|
|
|
&--error
|
|
border-left-color: var(--color-error)
|
|
|
|
&--warning
|
|
border-left-color: var(--color-warning)
|
|
|
|
&--success
|
|
border-left-color: var(--color-success)
|
|
|
|
&--disabled
|
|
border-left-color: var(--color-nonactive)
|
|
|
|
|
|
.active-allocations__wrapper
|
|
display: flex
|
|
margin: -7px
|
|
flex-wrap: wrap
|
|
|
|
.active-allocations__allocation
|
|
margin: 7px
|
|
display: grid
|
|
grid-template-columns: auto min-content
|
|
grid-template-areas: '. ident' 'name name' 'time time' 'data data'
|
|
border: 1px solid var(--color-grey)
|
|
padding: 7px
|
|
min-width: calc((100vw - 40px - 8 * 7px) / 4)
|
|
|
|
@media (min-width: 426px)
|
|
min-width: calc((100vw - 40px - 8 * 7px) / 4)
|
|
@media (min-width: 769px)
|
|
min-width: calc((100vw - 80px - 8 * 7px) / 4)
|
|
@media (min-width: 1200px)
|
|
min-width: calc((100vw - 80px - 8 * 7px) / 4)
|
|
|
|
a.active-allocations__allocation-ident
|
|
white-space: nowrap
|
|
text-decoration: none
|
|
color: var(--color-fontsec)
|
|
font-weight: 600
|
|
font-size: 0.9rem
|
|
text-align: right
|
|
grid-area: ident
|
|
|
|
.active-allocations__allocation-name
|
|
grid-area: name
|
|
text-align: center
|
|
|
|
.active-allocations__allocation-time
|
|
grid-area: time
|
|
|
|
.active-allocations__allocation-info
|
|
grid-area: data
|
|
margin: 0
|
|
|
|
tbody
|
|
th
|
|
text-align: right
|
|
padding-right: 14px
|
|
td
|
|
text-align: center
|
|
|
|
thead th
|
|
text-align: center
|
|
padding: 5px
|
|
|
|
td.active-allocations__allocation-info-item--old
|
|
font-style: italic
|
|
color: var(--color-fontsec)
|
|
|
|
th.active-allocations__allocation-info-item--old
|
|
color: var(--color-fontsec)
|
|
|
|
|
|
.faq__question
|
|
font-size: 18px
|
|
font-weight: 400
|
|
|
|
margin: 0
|
|
|
|
.faq__answer
|
|
margin-left: 17px
|
|
|
|
:not(.show-hide--collapsed) > .faq__answer
|
|
margin-top: 7px
|
|
|
|
.faq__section
|
|
padding-bottom: 10px
|
|
|
|
&:last-child, &.show-hide--collapsed
|
|
border-bottom: none
|
|
padding-bottom: 0
|
|
|
|
& + section:not(.faq__section)
|
|
border-top: 1px solid #d3d3d3
|
|
padding-top: 30px
|
|
|
|
.faq__section + .faq__section
|
|
margin-top: 10px
|
|
|
|
.faq__question-link
|
|
opacity: 0.2
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
.multi-user-invitation-field__wrapper
|
|
max-width: 25rem
|
|
|
|
.json, .yaml
|
|
white-space: pre-wrap
|
|
font-family: var(--font-monospace)
|
|
|
|
pre, tt, code
|
|
font-family: var(--font-monospace)
|
|
|
|
.workflow-instances
|
|
margin: 0
|
|
list-style: none
|
|
|
|
& > li
|
|
margin: 0 0 0.5rem
|
|
padding: 0 10px 12px 7px
|
|
border-left: 1px solid var(--color-grey)
|
|
|
|
&:nth-child(2n)
|
|
background-color: rgba(0, 0, 0, 0.015)
|
|
|
|
.workflow-instance--name, .workflow-instance--title
|
|
font-size: 1.2rem
|
|
font-weight: 600
|
|
|
|
.workflow-instance--name
|
|
font-family: var(--font-monospace)
|
|
|
|
.workflow-instance--actions
|
|
margin: 0 0 0.5rem 11px
|
|
|
|
.workflow-history-labels
|
|
display: flex
|
|
flex-direction: column
|
|
&__own
|
|
align-self: flex-end
|
|
text-align: right
|
|
&__others
|
|
align-self: flex-start
|
|
text-align: left
|
|
|
|
.workflow-history
|
|
@extend .list--iconless
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
position: relative
|
|
|
|
.workflow-history--item
|
|
border: 1px solid var(--color-grey)
|
|
align-self: flex-start
|
|
padding: 7px
|
|
margin: 12px 0
|
|
min-width: 45%
|
|
display: grid
|
|
grid-template-areas: 'user time' 'action-states action-states' 'payload payload'
|
|
margin-right: 10vw
|
|
|
|
&.workflow-history-item__self
|
|
align-self: flex-end
|
|
margin-left: 10vw
|
|
margin-right: 0
|
|
|
|
&:last-child
|
|
margin-bottom: 0
|
|
&:first-child
|
|
margin-bottom: 0
|
|
|
|
.workflow-history--item-user
|
|
grid-area: user
|
|
.workflow-history--item-time
|
|
grid-area: time
|
|
text-align: right
|
|
.workflow-history--item-action-states
|
|
grid-area: action-states
|
|
|
|
margin-top: 7px
|
|
|
|
.deflist__dt, .deflist__dd
|
|
padding-top: 0
|
|
padding-bottom: 0
|
|
.workflow-history--item-payload-changes
|
|
grid-area: payload
|
|
|
|
margin-top: 12px
|
|
border-top: 1px solid var(--color-grey)
|
|
padding-top: 12px
|
|
|
|
.workflow-history--item-payload-changes-label
|
|
font-size: 20px
|
|
font-weight: 600
|
|
|
|
|
|
.workflow-history--item-user-special, .workflow-history--item-action-special, .workflow-history--item-state-special
|
|
@extend .explanation
|
|
|
|
.workflow-state
|
|
margin-top: 7px
|
|
|
|
.deflist__dt, .deflist__dd
|
|
padding-top: 0
|
|
padding-bottom: 0
|
|
|
|
.workflow-payload
|
|
margin-top: 12px
|
|
|
|
.workflow-payload--label
|
|
font-size: 20px
|
|
font-weight: 600
|
|
|
|
video
|
|
max-width: 100%
|
|
max-height: calc(90vh - var(--current-header-height))
|
|
background: black
|
|
|
|
.video-container
|
|
display: flex
|
|
justify-content: center
|
|
width: 100%
|
|
|
|
& > video
|
|
object-fit: contain
|
|
flex-grow: 1
|
|
|
|
.hr
|
|
height: 1px
|
|
width: 90%
|
|
margin: 0.5em auto
|
|
background-color: var(--color-grey)
|
|
|
|
.authorship-statement
|
|
& > dt
|
|
font-weight: 600
|
|
color: var(--color-fontsec)
|
|
font-style: italic
|
|
font-size: .9rem
|
|
|
|
& > dd
|
|
margin-left: 1em
|
|
|
|
& + dt
|
|
margin-top: .5em
|
|
|
|
.authorship-statement-accept__accept
|
|
margin-top: 1em
|
|
display: grid
|
|
grid-template-columns: 25px 1fr
|
|
grid-template-areas: 'checkbox label'
|
|
|
|
.authorship-statement-accept__container
|
|
max-width: 600px
|
|
max-height: 25vh
|
|
overflow: auto
|
|
|
|
.authorship-statement-accept__accept-checkbox
|
|
align-self: center
|
|
grid-area: checkbox
|
|
|
|
.authorship-statement-accept__accept-label
|
|
grid-area: label
|
|
font-weight: 600
|
|
|
|
.authorship-statement__id
|
|
font-size: .5em
|
|
font-family: var(--font-monospace)
|
|
color: var(--color-fontsec)
|
|
|
|
.exam-office-label
|
|
--lbl-padding-vert: 5px
|
|
--lbl-padding-hori: 15px
|
|
padding: var(--lbl-padding-vert) var(--lbl-padding-hori)
|
|
border-radius: 20px 20px 20px 20px
|
|
font-weight: 600
|
|
text-align: center
|
|
width: fit-content
|
|
margin: 0 auto
|
|
&.success
|
|
background-color: var(--color-success-dark)
|
|
color: var(--color-lightwhite)
|
|
&.error
|
|
background-color: var(--color-error)
|
|
color: var(--color-lightwhite)
|
|
&.warning
|
|
background-color: var(--color-warning)
|
|
color: var(--color-lightwhite)
|
|
&.info
|
|
background-color: var(--color-lightblack)
|
|
color: var(--color-lightwhite)
|
|
&.nonactive
|
|
background-color: var(--color-nonactive)
|
|
color: var(--color-nonactive-dark)
|