@ -1,97 +1,127 @@
/* DocuWare-naher Dark-Style – identische Palette wie die Optionsseite. */
: root {
--bg : # 11151b ;
--surface : # 1a1f27 ;
--surface-2 : # 222a34 ;
--border : # 2b3340 ;
--border-strong : # 38424f ;
--text : # e8edf2 ;
--muted : # 8c97a4 ;
--accent : # 2aa4df ;
--accent-hover : # 3cb6f0 ;
--accent-weak : rgba ( 42 , 164 , 223 , . 14 ) ;
--ok : # 46c98a ;
--err : # ec6b75 ;
color-scheme : dark ; /* native Datepicker/Scrollbars/Checkboxen im Dark-Mode */
}
* { box-sizing : border-box ; }
body {
font : 13px / 1 . 45 "Segoe UI" , system-ui , sans-serif ;
margin : 0 ; color : # 1a1a1a ; background : # fff ;
font : 13px / 1 . 45 "Segoe UI" , "Helvetica Neue" , system-ui , sans-serif ;
margin : 0 ; color : var ( --text ) ; background : var ( --bg ) ;
display : flex ; flex-direction : column ; height : 100vh ;
-webkit-font-smoothing : antialiased ;
}
/* Titel-Leiste wie im Connect-to-Outlook-Dialog */
/* Titel-Leiste */
. titlebar {
background : # 2b3a44 ; color : # fff ;
padding : 8px 14px ; font-weight : 600 ; font-size : 13px ;
background : # 0f1318 ; color : var ( --text ) ;
padding : 9px 16px ; font-weight : 600 ; font-size : 13px ; letter-spacing : . 2px ;
border-bottom : 1px solid var ( --border ) ;
box-shadow : 0 1px 0 rgba ( 42 , 164 , 223 , . 35 ) ;
flex-shrink : 0 ;
}
header { padding : 12 px 18 px 6 px ; border-bottom : 1 px solid #e5e7eb ; flex-shrink : 0 ; }
header h1 { font-size : 16 px ; font-weight : 600 ; margin : 0 0 10 px ; }
header { padding : 1 4px 18 px 8 px ; border-bottom : 1 px solid var ( - - border ) ; flex-shrink : 0 ; }
header h1 { font-size : 16 px ; font-weight : 6 5 0; margin : 0 0 10 px ; }
. toolbar { display : flex ; align-items : center ; gap : 14 px ; }
. toolbar . spacer { flex : 1 ; }
button { font : inherit ; cursor : pointer ; }
button . link {
background : none ; border : 0 ; color : # 1f2937 ; cursor : pointer ;
font: inherit ; padding: 4px 2px ; display : inline-flex ; align-items : center ; gap : 5px ;
background : none ; border : 0 ; color : var ( --muted ) ;
padding: 4px 2px ; display : inline-flex ; align-items : center ; gap : 5px ;
}
button . link : hover { color : #2563eb ; }
button . link : hover { color : var ( - - accent ) ; }
button . primary {
background : # f4b400 ; color : # 1a1a1a ; border : 0 ; border-radius : 3px ;
padding : 7px 22px ; font-weight : 600 ; cursor : pointer ;
border : 0 ; border-radius : 8px ; padding : 8px 22px ; font-weight : 650 ; color : # 04222f ;
background : linear-gradient ( 180deg , var ( --accent-hover ) , var ( --accent ) ) ;
box-shadow : 0 4px 14px rgba ( 42 , 164 , 223 , . 3 ) ;
}
button . primary : hover { background: #e0a500 ; }
button : disabled { opacity : .5 ; cursor : default ; }
button . primary : hover { filter: brightness ( 1.06 ) ; }
button : disabled { opacity : .5 ; cursor : default ; filter : none ; }
main { flex : 1 ; overflow-y : auto ; padding : 1 4 px 18 px ; }
main { flex : 1 ; overflow-y : auto ; padding : 1 6 px 18 px ; }
. target { display : grid ; grid-template-columns : 150 px 1 fr ; align-items : center ; gap : 10 px ; margin-bottom : 12 px ; }
. target > label { text-align : right ; color : #374151 ; font-weight : 500 ; }
. target > label { text-align : right ; color : var ( - - muted ) ; font-weight : 500 ; }
/* Indexfelder: rechtsbündiges Label links, Eingabe rechts */
. fields { display : flex ; flex-direction : column ; gap : 8 px ; }
. fields { display : flex ; flex-direction : column ; gap : 9 px ; }
. field { display : grid ; grid-template-columns : 150 px 1 fr ; align-items : center ; gap : 10 px ; }
. field > label { text-align : right ; color : #374151 ; font-weight : 500 ; padding-top : 2 px ; }
. field > label { text-align : right ; color : var ( - - muted ) ; font-weight : 500 ; padding-top : 2 px ; }
. field . full { grid-template-columns : 150 px 1 fr ; align-items : start ; }
. field . req { color : #b91c1c ; }
. field . req { color : var ( - - err ) ; }
select , input [ type = "text" ] , input [ type = "number" ] , input [ type = "date" ] , textarea {
width : 100 % ; padding : 6px 9px ; border : 1px solid # b9c0c8 ; border-radius : 3px ; font : inherit ; background : # fff ;
select , input [ type = "text" ] , input [ type = "number" ] , input [ type = "date" ] , input [ type = "password" ] , textarea {
width : 100 % ; padding : 8px 10px ; color : var ( --text ) ;
background : var ( --surface-2 ) ; border : 1px solid var ( --border-strong ) ;
border-radius : 8px ; font : inherit ; outline : none ;
transition : border-color . 15s , box-shadow . 15s ;
}
select : focus , input : focus , textarea : focus { outline : none ; border-color : #2563eb ; box-shadow : 0 0 0 2 px #2563eb 33 ; }
textarea { resize : vertical ; min-height : 56 px ; }
select { appearance : none ; padding-right : 30 px ;
background-image : url ( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238c97a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>" ) ;
background-repeat : no-repeat ; background-position : right 11px center ;
}
select : focus , input : focus , textarea : focus { border-color : var ( - - accent ) ; box-shadow : 0 0 0 3 px var ( - - accent - weak ) ; }
input :: placeholder { color : #5f6b78 ; }
textarea { resize : vertical ; min-height : 60 px ; }
/* Vorbefüllte (aus der Mail übernommene) Felder dezent kennzeichnen */
. field . prefilled input , . field . prefilled textarea { background : #f3f4f6 ; color : #4b5563 ; }
. field . prefilled input , . field . prefilled textarea , . field . prefilled select {
background : rgba ( 42 , 164 , 223 , . 08 ) ; color : # bcc8d3 ;
}
. options { margin : 0 ; }
. format { display : flex ; align-items : center ; gap : 14 px ; flex-wrap : wrap ; margin : 5 px 0 ; }
. format-label { font-weight : 5 0 0; }
. format { display : flex ; align-items : center ; gap : 14 px ; flex-wrap : wrap ; margin : 6 px 0 ; }
. format-label { font-weight : 5 5 0; }
. format . radio { margin : 0 ; }
. radio , . check { display : flex ; align-items : center ; gap : 8 px ; margin : 5 px 0 ; font-weight : 400 ; }
. radio input , . check input { accent-color : #2563eb ; }
. radio , . check { display : flex ; align-items : center ; gap : 8 px ; margin : 6 px 0 ; font-weight : 400 ; }
. radio input , . check input { width : 16 px ; height : 16 px ; accent-color : var ( - - accent ) ; flex : none ; }
. att-list { list-style : none ; margin : 6 px 0 0 26 px ; padding : 0 ; max-height : 110 px ; overflow-y : auto ; }
. att-list li { display : flex ; align-items : center ; gap : 8 px ; font-size : 12 px ; padding : 2 px 0 ; color : #374151 ; }
. att-list li { display : flex ; align-items : center ; gap : 8 px ; font-size : 12 px ; padding : 2 px 0 ; color : var ( - - muted ) ; }
/* Footer bleibt fix sichtbar, nur der Felderbereich (main) scrollt. */
footer { border-top : 1 px solid #e5e7eb ; padding : 10 px 18 px ; background : #fafafa ; flex-shrink : 0 ; }
. muted { color : #6b7280 ; font-size : 12 px ; }
. err { color : #b91c1c ; } . ok { color : #15803d ; }
. field . invalid input , . field . invalid textarea , . field . invalid select { border-color : #b91c1c ; }
footer { border-top : 1 px solid var ( - - border ) ; padding : 11 px 18 px ; background : var ( - - surface ) ; flex-shrink : 0 ; }
. muted { color : var ( - - muted ) ; font-size : 12 px ; }
. err { color : var ( - - err ) ; } . ok { color : var ( - - ok ) ; }
. field . invalid input , . field . invalid textarea , . field . invalid select { border-color : var ( - - err ) ; }
/* „Bereits abgelegt"-Banner */
. banner {
display : flex ; align-items : center ; gap : 10px ;
background : # ecfdf5 ; border : 1px solid # 6ee7b7 ; color : # 065f46 ;
border-radius : 4px; padding : 7px 10 px; margin-bottom : 10px ; font-size : 12px ;
background : rgba ( 70 , 201 , 138 , . 12 ) ; border : 1px solid rgba ( 70 , 201 , 138 , . 4 ) ; color : # 8be0b4 ;
border-radius : 8px; padding : 8px 11 px; margin-bottom : 10px ; font-size : 12px ;
}
. banner [ hidden ] { display : none ; }
. banner . banner-text { flex : 1 ; }
. banner . link { color : #065f46 ; text-decoration : underline ; }
. banner . link { color : #8be0b4 ; text-decoration : underline ; }
. banner . link : hover { color : var ( - - ok ) ; }
/* Passwort-Abfrage (Sitzungs-Login, nicht gespeichert) */
/* Overlays: Passwort-Abfrage / Dubletten-Hinweis */
. overlay {
position : fixed ; inset : 0 ; background : rgba ( 0 , 0 , 0 , . 3 5) ;
position : fixed ; inset : 0 ; background : rgba ( 0 , 0 , 0 , . 5 5) ;
display : flex ; align-items : center ; justify-content : center ; z-index : 50 ;
backdrop-filter : blur ( 2px ) ;
}
. overlay [ hidden ] { display : none ; }
. overlay-box {
background : # fff ; border-radius : 6px ; padding : 18px 20px ; width : 340px ;
box-shadow : 0 8px 30px rgba ( 0 , 0 , 0 , . 25 ) ;
background : var ( --surface ) ; border : 1px solid var ( --border ) ; border-radius : 12px ;
padding : 20px 22px ; width : 350px ;
box-shadow : 0 18px 50px rgba ( 0 , 0 , 0 , . 5 ) ;
}
. overlay-box h2 { font-size : 15 px ; font-weight : 600 ; margin : 0 0 8 px ; }
. overlay-box input [ type = "password" ] {
width : 100 % ; padding : 7px 9px ; border : 1px solid # b9c0c8 ; border-radius : 3px ;
font : inherit ; margin-top : 8px ;
}
. overlay-box input [ type = "password" ] : focus { outline : none ; border-color : #2563eb ; box-shadow : 0 0 0 2 px #2563eb 33 ; }
. overlay-box h2 { font-size : 15 px ; font-weight : 650 ; margin : 0 0 8 px ; }
. overlay-box input [ type = "password" ] { margin-top : 8 px ; }
. overlay-box . err { min-height : 1 em ; margin-top : 6 px ; }
. overlay-actions { display : flex ; justify-content : flex-end ; align-items : center ; gap : 12 px ; margin-top : 1 0 px ; }
. overlay-actions { display : flex ; justify-content : flex-end ; align-items : center ; gap : 12 px ; margin-top : 12 px ; }
. overlay-box . pw-note { margin-top : 10 px ; }