You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
7.1 KiB
292 lines
7.1 KiB
@charset "utf-8"; |
|
// ***Auswahleigenschaften***. |
|
// *Brand colors* |
|
$purple: #8a4d76; |
|
$pink: #fa7c91; |
|
$brown: #757763; |
|
$beige-light: #d0d1cd; |
|
$beige-lighter: #eff0eb; |
|
$blue: #3333ff; |
|
$dklgrau:hsl(0, 0%, 21%); |
|
$memtext-blaugrau:#ECF0F3; |
|
$mittelgrau:hsl(0, 0%, 60%); |
|
$hellgrau:hsl(0, 0%, 71%); |
|
$grün:hsl(141, 71%, 48%); |
|
$gelb-orange:hsl(48, 100%, 67%); |
|
|
|
// ***SuperX-Default*** |
|
$navbar-dialogue-background: $memtext-blaugrau; |
|
$title-dialogue-color: $dklgrau; |
|
$input-container-background: $memtext-blaugrau; |
|
$sichtentreeCaret-color:#014A7B; |
|
$hr-background-color: whitesmoke; |
|
$select-border: thin solid $hellgrau; |
|
|
|
@mixin default-button-dialogue { |
|
border: thin solid $hellgrau; |
|
border-radius: 0.3em; |
|
background-color: white; |
|
color: black; |
|
padding: 8px; |
|
width: 11em; |
|
} |
|
|
|
@mixin default-input { |
|
border: thin solid $hellgrau; |
|
border-radius: 0.3em; |
|
background-color: white; |
|
color: black; |
|
line-height: 2.5em; |
|
} |
|
|
|
// ***Hochschul-Spezifika*** |
|
//$navbar-dialogue-background:#003c7aff; //UDE-Blau |
|
//$title-dialogue-color: white; //passend zum dunklen background |
|
//$input-container-background:#d9d9d9ff; //UDE-Grau |
|
|
|
@mixin hochschul-button-dialogue { |
|
border: thin solid black; |
|
background-color: #d9d9d9; //UDE-Grau |
|
color: black; |
|
padding: 8px; |
|
width: 11em; |
|
} |
|
|
|
@mixin hochschul-input { |
|
background-color: white; |
|
color: black; |
|
line-height: 2.5em; |
|
} |
|
|
|
// ***Aktuelle Konfiguration via mixins*** |
|
button.button-dialogue {@include default-button-dialogue;} |
|
//button.button-dialogue {@include hochschul-button-dialogue;} |
|
|
|
input.input {@include default-input;} |
|
//input.input {@include hochschul-input;} |
|
|
|
|
|
/*dateispezifische Basics*/ |
|
body { padding-top: 0px; /*202606 ergänzt die höhe der navbar*/} |
|
|
|
body, .label, .searchresult, .placeholder { /*Schrift für Kopf, Suchform.Teile, Suchergebnisse*/ |
|
font-family: sans serif; |
|
font-weight: normal; |
|
font-size: 15px; /*202604 geändert von ursprgl. 12px;*/ |
|
} |
|
|
|
hr { |
|
background-color: $hr-background-color; |
|
margin-top: -1rem; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
/*HS-spezifische Anpassungen*/ |
|
.navbar-dialogue { |
|
position: sticky; /* 202606 ergänzt:Kopfzeile bleibt beim Scrollen "kleben"*/ |
|
top:0; |
|
left: 0; |
|
width: 100%; |
|
height:105px; |
|
background: $navbar-dialogue-background; |
|
z-index: 1000; |
|
margin-top: -55px; |
|
} |
|
|
|
.title-dialogue.is-4:before { content:""; } |
|
.title-dialogue.is-4:after { content:" Filter"; } |
|
.title-dialogue.is-4 { |
|
color: $title-dialogue-color; |
|
font-weight: bold; |
|
font-size: 25px; |
|
} |
|
|
|
/**20260611 auskomm zum Test.button-dialogue { |
|
background-color: $button-dialogue-background; /*202604 für ok/reset/sbbruch-button*/ |
|
/* padding: 8px; |
|
border: thin solid black; |
|
width: 11em; |
|
}*/ |
|
|
|
.a-dialogue { |
|
color: black; |
|
font-family: sans-serif; |
|
font-weight: bold; |
|
font-size: 15px; |
|
} |
|
|
|
input[type="checkbox"] { |
|
vertical-align: bottom; |
|
line-height: 1.25; |
|
/*20260611 auskommentiert zum Test background: $input-background;*/ } |
|
|
|
.input::placeholder, .textarea::placeholder, .select select::placeholder { /*202604 eingefügt*/ |
|
/*20260611 auskomentiert zum Test color: $input-color; */ |
|
font-size: 15px; |
|
} |
|
|
|
.comboDiv-dialogue { /*202605 ergänzt*/ |
|
margin-left: 1.6rem;} |
|
|
|
/* Standarddarstellung für größere Viewports */ |
|
.comboDiv { |
|
display: flex; |
|
justify-content: left; } |
|
|
|
|
|
.input-container.sticky-filter { /*202606 neu: äußerer Container*/ |
|
position: sticky; /*202606 neu: bleibt beim Scrollen sichtbar*/ |
|
top: 105px; /* Höhe der Navbar > siehe oben */ |
|
z-index: 999; |
|
background: $input-container-background; |
|
padding: 0.5rem 0; |
|
} |
|
|
|
.input-container { |
|
display: flex; |
|
flex-direction: row; /* Ordnet Felder horizontal*/ |
|
margin-top: 0.2rem; |
|
background: $input-container-background; |
|
} |
|
|
|
.input-container > .label { |
|
margin-bottom: 1rem; /*202604 geänd. v urprgl. 0*/ |
|
margin-right: 0.5rem; /*202606 geänd v. 2.2rem*; 202604 geänd. v. 1.2em*/ |
|
text-align: right; /*202606 ergänzt*/ |
|
} |
|
|
|
.field is-grouped is-grouped-multiline { |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
gap: 1rem; } |
|
|
|
.field.is-grouped { |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: nowrap; |
|
margin-left: 0.5rem; |
|
gap: 1rem; } |
|
|
|
.field {align-items: flex-start; /*für gleiche vertik. Feldausrichtung*/ |
|
} |
|
|
|
.label { |
|
margin-top: 5px; |
|
width: 8em; /*202604 geänd. v urprgl. 2em*/ |
|
font-weight: bold; /*202604: ergänzt*/ |
|
} |
|
|
|
.select select, .input { /*für Auswahlfeldstyle*/ |
|
border: $select-border; |
|
border-radius: 0.3em; |
|
/*20260611 auskommentiert zum Test color: $input-color; */ /*202604 ergänzt*/ |
|
font-size: 16px; /*202604 ergänzt*/ |
|
padding-left: 5px; |
|
} |
|
|
|
/*Anpassungen für Viewports Mobile bis 768px=tablet-Hochformat */ |
|
@media screen and (min-width: 585px) and (max-width: 768px) { |
|
.input-container { |
|
flex-direction: row; |
|
gap: 1px; /* Fügt Abstand zwischen den Feldern hinzu */ |
|
} |
|
|
|
.input-container > .label { /*202605 ergänzt*/ |
|
margin-bottom: 0rem; |
|
text-align: right; /*202606 ergänzt*/ |
|
} |
|
|
|
.field.is-grouped { flex-direction: row; } |
|
.field {align-items: flex-start;} |
|
} |
|
|
|
/*Anpassung für kleine Viewports (Mobile)*/ |
|
@media screen and (max-width: 584px) { |
|
.input-container { |
|
flex-direction: column; /* Stapelt Felder*/ |
|
margin-top: 0rem; /*202604 geändert v ursprgl. 1rem*/ |
|
padding-bottom: 0.2rem; /*202604 eingefügt*/ |
|
} |
|
|
|
.input-container > .label { /*202605 ergänzt*/ |
|
margin-bottom: 0rem; |
|
text-align: left; /*202606 ergänzt*/ |
|
} |
|
|
|
.field.is-grouped { |
|
flex-direction: row; |
|
column-gap: 5px; /* Abstand label und Input/Select-Felder */ |
|
row-gap: 1px; /* Höhenabstand zwischen Feldern; ohne Angabe wird Abstand zu groß*/ |
|
} |
|
} |
|
|
|
/* Ergebnislisten von Sichten und gesuchten Elementen */ |
|
ul { list-style: none; } |
|
|
|
.sichtentreeUL { |
|
list-style-type: none; |
|
margin-left: 2em; |
|
padding: 0; |
|
} |
|
|
|
.sichtentreeCaret { |
|
cursor: pointer; |
|
-webkit-user-select: none; /* Safari 3.1 */ |
|
-moz-user-select: none; /* Firefox 2 */ |
|
-ms-user-select: none; /* IE 10 */ |
|
user-select: none; |
|
} |
|
|
|
.sichtentreeCaret::before { |
|
content: "\25B6"; |
|
color: $sichtentreeCaret-color; |
|
display: inline-block; |
|
margin-right: 0px; |
|
} |
|
|
|
.sichtentreeCaret-down::before { |
|
-ms-transform: rotate(90deg); /* IE 9 */ |
|
-webkit-transform: rotate(90deg); /* Safari */ |
|
transform: rotate(90deg); |
|
} |
|
|
|
.sichtentreePlaceholder { |
|
margin-left: 16px; |
|
} |
|
|
|
.sichtentreeNested { |
|
display: none; |
|
margin-right: 0px; |
|
padding-left: 13px; |
|
} |
|
|
|
.sichtentreeActive { |
|
display: block; |
|
margin-right: 0px; |
|
padding-left: 13px; |
|
} |
|
|
|
.sichtentreeSpacer { |
|
padding-left: 10px; /*wofür nötig?*/ |
|
} |
|
|
|
.sichtentreeLink { |
|
text-decoration: none; /* keine Unterstreichung für links */ |
|
} |
|
|
|
.sichtentreeLinkWithSpace { |
|
text-decoration: none; /* keine Unterstreichung für links */ |
|
margin-left:10px; |
|
box-decoration-break: clone; |
|
-webkit-box-decoration-break: clone; |
|
} |
|
|
|
ul.sichtentreeChildUL { |
|
margin: 0px; |
|
padding-left: 10px; |
|
list-style-type: none; |
|
list-style-position: inside; |
|
list-style-image: none; |
|
} |
|
|
|
|