SeemGen/wwwroot/admin.css

481 lines
10 KiB
CSS

/*@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700,300');*/
article {
padding: 0px !important;
}
.admin-body {
background-color: #060816;
min-height: 100vh;
color: #fff;
--rz-base-800: #36244c !important;
--rz-base-background-color: #36244c !important;
}
.admin-body p {
font-size: 0.9rem;
}
.admin-body .btn {
font-size: 0.9rem;
}
.admin-body .btn:hover {
color: #000 !important;
background-color: aliceblue;
border-color: var(--bs-btn-hover-border-color) transparent;
}
.rz-panel {
background-color: transparent !important;
color: #fff !important;
--rz-text-h6-color: #fff !important;
--rz-text-body1-color: #fff !important;
}
.rz-card {
background: transparent !important;
border: unset !important;
color: #fff !important;
--rz-text-h6-color: #fff !important;
--rz-text-body1-color: #fff !important;
}
.admin-rz-card {
background: linear-gradient(to bottom, #63358d, #7d3d7b) !important;
border: unset !important;
border-radius: 20px !important;
}
.rz-text-h6 {
}
.rz-text-body {
}
.rz-sidebar {
background-color: #36244c !important;
}
label {
display: unset !important;
color: #fff !important;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #87b1d6 #ffffff00;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
background: #ffffff;
}
*::-webkit-scrollbar-thumb {
background-color: #3e9fa3;
border-radius: 10px;
border: 3px solid #ffffff;
}
.reference-button {
display: flex;
justify-content: space-between;
align-items: center;
/*background: linear-gradient(to bottom, #533e7e, #3c3666);*/
border-radius: 20px;
padding: 16px;
width: 100%;
color: #e0e0f0;
/*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);*/
/*margin-bottom: 15px;*/
}
.text-content h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
.text-content p {
margin: 4px 0 0 0;
font-size: 13px;
color: #ccccdd;
}
.icon-buttons {
display: flex;
gap: 8px; /* spacing between the icons */
}
.icon-circle {
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #6782c0, #3c4c8a);
color: #ffffff;
font-size: 18px;
font-weight: bold;
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.bg-transparent {
background: transparent !important;
}
.bg-panel {
background-color: rgba(0,0,0,0.2);
}
.bg-panel-gradient {
background: linear-gradient(to bottom, #533e7e, #3c3666) !important;
}
.bg.bg-panel-gradient:hover {
background: linear-gradient(to bottom, #63358d, #7d3d7b) !important;
}
.bg-panel-gradient-highlight {
background: linear-gradient(to bottom, #63358d, #7d3d7b) !important;
}
.pointer {
cursor: pointer !important;
}
.rz-dialog-mask {
background-color: transparent !important;
}
.rz-dialog-wrapper {
z-index: 10008 !important;
border-radius: 20px;
}
.rz-dialog-confirm {
z-index: 10010 !important;
}
.rz-dialog-title {
color: #b0daff !important;
}
.rz-dialog {
border-radius: 20px !important;
background-color: #0c2533 !important;
/*background: linear-gradient(153deg,rgba(12, 37, 51, 0.83) 0%, rgba(87, 188, 199, 0.81) 50%, rgba(237, 83, 196, 0.84) 100%);*/
background: linear-gradient(307deg, rgba(12, 37, 51, 0.83) 7%, rgb(152 87 199 / 73%) 96%);
box-shadow: 8px 6px 8px 2px rgba(0, 0, 0, 0.4);
--rz-dialog-title-background-color: transparent;
--rz-primary: #87b1d6;
}
.rz-dialog .rz-button {
border-radius: 20px !important;
color: #000;
}
.rz-dialog h3 {
color: #b0daff !important;
}
.rz-dialog .text-muted {
--bs-text-opacity: 1;
color: #608AAD !important;
}
.bg-panel .list-group {
--bs-list-group-color: unset !important;
--bs-list-group-bg: unset !important;
}
.bg-panel .list-group-item {
background-color: unset !important;
border: unset !important;
}
.bg-panel .list-group-item .btn {
margin: 5px;
}
.bg-panel .content-item-list {
max-height: 300px;
overflow-y: scroll;
}
.rz-dialog-confirm-buttons .rz-base {
background-color: #87B1D6 !important;
}
.rz-dialog-confirm-buttons .rz-primary {
background-color: red !important;
}
.draggable-popup-dialog {
z-index: 10008 !important;
}
.draggable-popup-dialog .form-control {
border-radius: 20px !important;
background-color: #ffffff38 !important;
/* background: linear-gradient(153deg, rgba(12, 37, 51, 0.83) 0%, rgba(87, 188, 199, 0.81) 50%, rgba(237, 83, 196, 0.84) 100%); */
/* background
Shorthand property for setting most background properties at the same place in the style sheet.
Learn more
Don't show
: linear-gradient(307deg, rgba(12, 37, 51, 0.83) 7%, rgb(152 87 199 / 73%) 96%); */
border-style: unset;
color: #fff;
}
.draggable-popup-dialog-wrapper {
/*background-color: rgba(0,0,0,0.3);*/
/*backdrop-filter: blur(6px);*/
z-index: 10008 !important;
}
.editor-button {
position: fixed;
z-index: 10008 !important;
top: 100px;
left: 0px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
}
.editor-window {
position: fixed;
background-color: #0c2533 !important;
/*background: linear-gradient(153deg,rgba(12, 37, 51, 0.83) 0%, rgba(87, 188, 199, 0.81) 50%, rgba(237, 83, 196, 0.84) 100%);*/
background: linear-gradient(307deg, rgba(12, 37, 51, 0.83) 7%, rgb(152 87 199 / 73%) 96%);
backdrop-filter: blur(6px);
color: #b0daff;
z-index: 10008 !important;
top: 200px;
border-radius: 20px;
min-width: 200px;
max-width: 200px;
height: fit-content;
margin-left: 10px;
padding: 10px;
box-shadow: 8px 6px 8px 2px rgba(0, 0, 0, 0.4);
--rz-primary: #87b1d6;
/*overflow-y: scroll;*/
}
.editor-window .btn {
margin: 5px;
border-radius: 20px;
background-color: var(--rz-primary);
color: var(--rz-on-primary);
}
.editor-window strong {
color: #63f0f9;
}
.editor-window span {
color: #fff;
}
.editor-window small {
color: #fff;
}
.editor-button .text-muted {
color: #b2b2b2 !important;
}
.top-panel-outer {
position: fixed;
z-index: 10010 !important;
top: 0px;
left: 0px;
width: 100%;
height: fit-content;
}
.top-panel {
position: relative;
background-color: #0c2533 !important;
/*background: linear-gradient(153deg,rgba(12, 37, 51, 0.83) 0%, rgba(87, 188, 199, 0.81) 50%, rgba(237, 83, 196, 0.84) 100%);*/
background: linear-gradient(307deg, rgba(12, 37, 51, 0.83) 7%, rgb(152 87 199 / 73%) 96%);
backdrop-filter: blur(6px);
color: #b0daff;
z-index: 10010 !important;
top: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 70px;
min-width: 500px;
width: 800px;
margin-left: 10px;
box-shadow: 8px 6px 8px 2px rgba(0, 0, 0, 0.4);
--rz-primary: #87b1d6;
font-size: 0.9rem;
}
.radzen-popup {
display: none;
position: absolute;
overflow: hidden;
height: 360px;
width: 600px;
border: var(--rz-panel-border);
background-color: var(--rz-panel-background-color);
box-shadow: var(--rz-panel-shadow);
border-radius: var(--rz-border-radius);
background-color: #0a4261;
/*background-color: #396586;*/
/*background-color: #608aad;*/
color: #87b1d6;
/*background-color: #b0daff;*/
}
.radzen-popup p {
color: #fff
}
.rz-panel {
--rz-panel-padding: 0.6rem !important;
}
.upload-image-container .img-fluid {
border-radius: 0px;
}
.admin-accordion {
--rz-accordion-item-background-color: transparent;
--rz-accordion-item-color: #fff;
}
.rz-html-editor {
background-color: transparent !important;
border: unset !important;
}
.rz-html-editor:focus-within {
border: unset !important;
outline: unset !important;
}
.rz-html-editor-toolbar {
background-color: transparent !important;
}
.rz-html-editor-content {
background-color: transparent !important;
color: #fff;
}
.rz-textarea {
background-color: transparent !important;
color: #fff !important;
background-image: linear-gradient(#62448e 50%, #5a4083 50%);
background-size: 100% 3rem;
font-size: 0.8rem;
border: 1px solid #CCC;
width: 100%;
/* height: 400px; */
line-height: 1.5rem !important;
margin: 0 auto;
padding: 4px 8px !important;
background-attachment: local;
}
.rz-textarea:focus {
background-color: transparent !important;
}
.rz-html-editor-content {
color: #fff !important;
}
.rz-accordion > .rz-expander {
background-color: transparent !important;
}
.rz-accordion-content {
background-color: transparent !important;
}
.rz-accordion-header {
background-color: #36244c !important;
}
.rounded {
border-radius: 20px !important;
}
.step-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #5c4f83;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 0 auto;
transition: background-color 0.3s;
}
.step-circle.current {
background-color: #87b1d6;
color: black;
}
.step-circle.completed {
background: linear-gradient(to bottom, #63358d, #7d3d7b) !important;
}
.progress-line {
height: 3px;
background-color: #555;
margin-top: 8px;
width: 100%;
}
.form-control {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
.btn {
background: #87b1d6;
border: 0 !important;
color: #000000;
width: fit-content !important;
font-weight: bold !important;
transition: all 0.2s ease !important;
margin: 15px !important;
border-radius: 20px !important;
}
.btn:focus {
border-width: 0 !important;
font-weight: bold !important;
transition: all 0.2s ease !important;
}
.btn:focus-visible {
border-width: 0 !important;
font-weight: bold !important;
transition: all 0.2s ease !important;
}