2022-11-07 02:55:54 +01:00
@ import 'editMenu.css' ; @ import 'dialogue.css' ; : root { --color-bg-normal : #FFF ; --color-bg-raised : #EEE ; --color-bg-raised2 : #FAFAFA ; --color-fg-normal : #000 ; --color-fg-less : #212121 ; --color-borders : #D6D6D6 ; --color-borders-dark : #646464 ; --color-accent-normal : #FFCCBC ; --color-accent-hover : #CB9B8C }
2022-11-07 04:06:08 +01:00
@ media ( prefers-color-scheme : dark ) { : root { --color-bg-normal : #000 ; --color-bg-raised : #273000 ; --color-bg-raised2 : #121212 ; --color-fg-normal : #FFF ; --color-fg-less : #EEE ; --color-borders : #37474F ; --color-borders-dark : #BDBDBD ; --color-accent-normal : #FFC107 ; --color-accent-hover : #FFA000 } }
2022-11-07 02:55:54 +01:00
@ font-face { font-family : sourceSansPro ; src : local ( 'Source-Sans-Pro' ) , local ( 'Source Sans Pro' ) , url ( . . / fonts / SourceSansPro-Regular . woff2 ) format ( 'woff2' ) , url ( . . / fonts / SourceSansPro-Regular . ttf ) format ( 'truetype' ) ; font-display : swap } * { box-sizing : border-box ; z-index : 1 }
2022-11-07 04:06:08 +01:00
body { margin : 2 em ; background : var ( - - color - bg - normal ) ; color : var ( - - color - fg - normal ) ; font-family : sourceSansPro , Arial , Helvetica , Times ; font-size : 1.2 em ; line-height : 1.5 em }
2020-07-03 17:13:37 +02:00
a { text-decoration : none ; color : inherit }
2022-11-07 03:55:07 +01:00
h1 { display : block ; max-width : 600 px ; margin : 0 auto 1.5 em auto ; line-height : 1.2 em }
2022-11-07 02:55:54 +01:00
h1 > * { display : inline-block ; vertical-align : middle ; color : var ( - - color - fg - less ) }
h1 img { height : 2 em ; margin-right : .5 em ; border-radius : .1 em ; opacity : .7 ; transition : opacity .4 s }
2020-07-03 17:13:37 +02:00
h1 img : hover { opacity : 1 }
2022-11-07 02:55:54 +01:00
main , body > div , body > form { display : block ; max-width : 90 vw ; margin : 0 auto 3 em auto ; padding-bottom : 3 em }
2020-07-03 17:13:37 +02:00
form > div { margin-bottom : 1 em }
2022-11-07 02:55:54 +01:00
label { display : block ; font-weight : bold ; margin-bottom : .5 em } . invisible { display : none !important ; opacity : 0 } . buttonLike , select , button , textarea , input { display : block ; width : 100 % ; padding : .5 em .5 em ; border : 2.5 px solid var ( - - color - bg - raised ) ; background : inherit ; color : var ( - - color - fg - less ) ; font-family : roboto ; font-size : 1 em ; border-radius : .2 em ; transition : border .2 s } . buttonLike { display : inline-block ; text-align : center }
input [ type = "submit" ] , button { padding : .5 em .8 em } . buttonLike , input [ type = "submit" ] , button { background : var ( - - color - accent - normal ) ; color : var ( - - color - fg - less ) ; border : none ; font-weight : bold ; text-transform : uppercase ; transition : background .2 s , color .2 s }
2020-07-03 17:13:37 +02:00
textarea { line-height : 1.2 em }
2022-11-07 02:55:54 +01:00
select : hover , textarea : hover , input : hover { border-color : #888 } . buttonLike : focus , input [ type = "submit" ] : focus , button : focus , . buttonLike : hover , input [ type = "submit" ] : hover , button : hover { background : var ( - - color - accent - hover ) ; color : #000 }
2020-07-03 17:13:37 +02:00
aside . buttonLike + . buttonLike , aside button + button { margin-top : .5 em }
aside > h4 : first-child { margin-top : 0 }
2022-11-07 02:55:54 +01:00
select : focus , textarea : focus , input : focus { border-color : var ( - - color - accent - hover ) ; box-shadow : none }
2020-07-03 17:13:37 +02:00
textarea : invalid , input : invalid { box-shadow : none }
textarea : invalid : focus , input : invalid : focus { border-right-width : 1 em }
textarea { min-height : 30 vh }
table { width : 100 % ; max-height : 60 vh ; margin : 2 em 0 ; border-collapse : collapse ; overflow : auto }
2022-11-07 02:55:54 +01:00
th { padding : .3 em .5 em ; text-align : left ; border-bottom : 2 px solid var ( - - color - fg - less ) }
tbody > tr : nth-child ( 2n + 1 ) { background : var ( - - color - bg - raised2 ) }
td { padding : .3 em .5 em ; border-bottom : 1 px solid var ( - - color - borders ) }
body > div . uploader { background : var ( - - color - bg - raised2 ) ; border : 2 px solid var ( - - color - bg - raised ) ; padding : 1 em 1 em }
2020-07-03 17:13:37 +02:00
ul . fieldList { display : block ; margin : .5 em 0 ; padding : 0 0 ; list-style : none }
2022-11-07 04:06:08 +01:00
ul . fieldList > li { display : inline-block ; margin : .1 em ; padding : .3 em ; border : 1 px solid var ( - - color - borders ) ; background : var ( - - color - bg - raised2 ) ; color : var ( - - color - fg - normal ) ; cursor : pointer ; transition : background .4 s , border .4 s , box-shadow .4 s }
2022-11-07 02:55:54 +01:00
ul . fieldList > li : hover { background : var ( - - color - bg - normal ) ; border-color : var ( - - color - fg - less ) }
2020-07-03 17:13:37 +02:00
ul . fieldList > li . requiredField : before { display : inline-block ; content : " \002612 " ; margin-right : .5 em }
2022-11-07 03:55:07 +01:00
ul . fieldList > li . humanTLToggled { border-color : var ( - - color - accent - hover ) ; background : var ( - - color - accent - hover ) ; box-shadow : 0 8 px 6 px -6 px black } . options > . buttonLike { display : inline-block ; width : auto ; margin : .15 em 0 ; padding : .4 em .5 em ; text-transform : inherit ; cursor : pointer ; background : initial ; border : 2 px solid var ( - - color - borders ) ; opacity : 1 ; transition : background .4 s , opacity .4 s } . options > . buttonLike : hover { background : var ( - - color - borders ) } . actionList { margin : 1 em 0 1 em 1 em ; padding : .5 em 0 } . actionList > li a { display : inline-block ; padding : .3 em ; border-radius : .3 em ; transition : background .4 s } . actionList > li a : hover { background : var ( - - color - accent - hover ) } . loading : before , . loading : after { content : " " ; display : block ; position : absolute ; left : 50 % ; top : 50 % ; transform : translate ( -50 % , -50 % ) ; height : 64 px ; width : 64 px ; margin : 0 ; padding : 0 ; border-radius : 50 % ; border : 8 px solid var ( - - color - accent - hover ) ; border-color : var ( - - color - accent - hover ) transparent transparent transparent ; z-index : 100 ; animation : rotating 1.2 s cubic-bezier ( 0.5 , 0 , 0.5 , 1 ) infinite ; animation-delay : -0.15 s } . loading : after { animation-delay : -0.45 s }
2022-11-07 02:55:54 +01:00
@ keyframes rotating { from { transform : rotate ( 0 deg ) }
to { transform : rotate ( 360 deg ) } }
2022-11-07 03:55:07 +01:00
@ media screen and ( max-width : 75em ) { body { font-size : 1.08 em }
2022-11-07 04:06:08 +01:00
h1 img { display : none } }