refactor: Umschlag nav-menu bearbeiten. minfied card.css
This commit is contained in:
Developer 02
parent
73eb270237
commit
fb366d3e0b
@ -18,53 +18,11 @@
|
||||
var document = Model.Envelope?.Documents?.FirstOrDefault();
|
||||
var sender = Model.Envelope?.User;
|
||||
var pages = document?.Elements?.Select(e => e.Page) ?? Array.Empty<int>();
|
||||
int? signatureCount = document?.Elements?.Count();
|
||||
var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1))
|
||||
+ (pages.Count() > 1 ? $" {_localizer[WebKey.and].TrySanitize(_sanitizer)} " : "") + pages.LastOrDefault();
|
||||
}
|
||||
<div class="d-flex flex-column min-vh-100">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="container">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="material-symbols-outlined">
|
||||
more_vert
|
||||
</span>
|
||||
</button>
|
||||
<div class="envelope-message">
|
||||
<span class="icon material-symbols-outlined">history_edu</span>
|
||||
<span class="message navbar-brand">@($"{_localizer[WebKey.Hello]} {Model.Name}, {@envelope?.Message}".TrySanitize(_sanitizer))</span>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img class="@logo.ShowPageClass" src="@logo.Src" alt="logo">
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="collapse show bg-light " id="navbarToggleExternalContent" data-bs-theme="light">
|
||||
<div class="card sender-card p-1 mb-3">
|
||||
<div class="row g-0">
|
||||
<div class="col p-0 m-0">
|
||||
<div class="card-body p-0 m-0 ms-4">
|
||||
<h5 class="card-title p-0 m-0">
|
||||
<span class="signature-process-title">@($"{_localizer[WebKey.SigningProcessTitle]}: ".TrySanitize(_sanitizer))</span>
|
||||
<span class="signature-process-name">@($"{envelope?.Title}".TrySanitize(_sanitizer))</span>
|
||||
</h5>
|
||||
<p class="card-text p-0 m-0">@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo1], pages.Count(), stPageIndexes).TrySanitize(_hlSanitizer))</p>
|
||||
<p class="card-text p-0 m-0">
|
||||
<small class="text-body-secondary">
|
||||
@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo2], /* sanitize separately but don't sanitize the URI */
|
||||
envelope?.AddedWhen.ToString(userCulture?.Info?.DateTimeFormat).TrySanitize(_sanitizer),
|
||||
$"{sender?.Prename} {sender?.Name}".TrySanitize(_sanitizer),
|
||||
sender?.Email.TrySanitize(_sanitizer),
|
||||
envelope?.Title.TrySanitize(_sanitizer),
|
||||
sender?.Prename.TrySanitize(_sanitizer),
|
||||
sender?.Name.TrySanitize(_sanitizer),
|
||||
sender?.Email.TrySanitize(_sanitizer)))
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="envelope-view">
|
||||
<div id="flex-action-panel" class="btn-group btn_group position-fixed bottom-0 end-0 d-flex align-items-center" role="group" aria-label="Basic mixed styles example">
|
||||
<button class="btn_complete btn btn-primary" type="button">
|
||||
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
|
||||
@ -86,7 +44,43 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id='app' class="flex-grow-1"></div>
|
||||
|
||||
<div class="dd-cards-container">
|
||||
<div class="dd-card">
|
||||
<div class="dd-card-preview">
|
||||
<h6 class="uppercase">Digital Data</h6>
|
||||
<h2>signFlow</h2>
|
||||
<a href="https://digitaldata.works/"><i class="fas fa-chevron-right">Erfahren Sie mehr</i></a>
|
||||
</div>
|
||||
<div class="dd-card-info">
|
||||
<div class="logo">
|
||||
<img class="@logo.ShowPageClass" src="@logo.Src" alt="logo">
|
||||
</div>
|
||||
<h2>@($"{envelope?.Title}".TrySanitize(_sanitizer))</h2>
|
||||
<h6>@($"{@envelope?.Message}".TrySanitize(_sanitizer))</h6>
|
||||
<p>
|
||||
<small class="text-body-secondary">
|
||||
@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo2], /* sanitize separately but don't sanitize the URI */
|
||||
envelope?.AddedWhen.ToString(userCulture?.Info?.DateTimeFormat).TrySanitize(_sanitizer),
|
||||
$"{sender?.Prename} {sender?.Name}".TrySanitize(_sanitizer),
|
||||
sender?.Email.TrySanitize(_sanitizer),
|
||||
envelope?.Title.TrySanitize(_sanitizer),
|
||||
sender?.Prename.TrySanitize(_sanitizer),
|
||||
sender?.Name.TrySanitize(_sanitizer),
|
||||
sender?.Email.TrySanitize(_sanitizer)))
|
||||
</small>
|
||||
</p>
|
||||
<div class="progress-container">
|
||||
<div class="progress"></div>
|
||||
<span class="progress-text">
|
||||
<span class="nOfSigned">0</span>/@signatureCount Unterschriften
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='app'></div>
|
||||
</div>
|
||||
<script nonce="@nonce">
|
||||
const collapseNav = () => {
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
<link rel="stylesheet" href="~/lib/sweetalert2/sweetalert2.min.css" />
|
||||
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/css/logo.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/css/card.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/EnvelopeGenerator.Web.styles.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/lib/flag-icons-main/css/flag-icons.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/lib/alertifyjs/css/alertify.min.css" />
|
||||
@ -61,6 +62,9 @@
|
||||
</main>
|
||||
<script src="~/js/event-binder.min.js" asp-append-version="true"></script>
|
||||
@Html.AntiForgeryToken()
|
||||
<footer>© SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></footer>
|
||||
<footer>
|
||||
<span>© SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></span>
|
||||
<a href="https://localhost:7202/privacy-policy.de-DE.html">Datenschutz</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -76,5 +76,11 @@
|
||||
"inputFiles": [
|
||||
"wwwroot/css/privacy-policy.css"
|
||||
]
|
||||
},
|
||||
{
|
||||
"outputFileName": "wwwroot/css/card.min.css",
|
||||
"inputFiles": [
|
||||
"wwwroot/css/card.css"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
274
EnvelopeGenerator.Web/wwwroot/css/card.css
Normal file
274
EnvelopeGenerator.Web/wwwroot/css/card.css
Normal file
@ -0,0 +1,274 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dd-cards-container {
|
||||
font-family: 'Muli', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.dd-card {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dd-card h6 {
|
||||
opacity: 0.6;
|
||||
margin: 0;
|
||||
letter-spacing: 0.0625rem;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dd-card h2 {
|
||||
letter-spacing: 0.0625rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dd-card-preview {
|
||||
background-color: #2A265F;
|
||||
color: #fff;
|
||||
padding: 1.875rem;
|
||||
max-width: 15.625rem;
|
||||
}
|
||||
|
||||
.dd-card-preview a {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.6;
|
||||
margin-top: 1.875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dd-card-info {
|
||||
padding: 1rem 0 0 1.875rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dd-card-info p {
|
||||
opacity: 0.6;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.6;
|
||||
margin-top: .875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
text-align: right;
|
||||
width: 9.375rem;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
background-color: #ddd;
|
||||
border-radius: 0.1875rem;
|
||||
height: 0.3125rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.progress::after {
|
||||
background-color: #2A265F;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 0.3125rem;
|
||||
width:1%;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.625rem;
|
||||
opacity: 0.6;
|
||||
letter-spacing: 0.0625rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dd-card-btn {
|
||||
background-color: #2A265F;
|
||||
border: 0;
|
||||
border-radius: 3.125rem;
|
||||
box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.5625rem;
|
||||
position: absolute;
|
||||
bottom: 1.875rem;
|
||||
right: 1.875rem;
|
||||
letter-spacing: 0.0625rem;
|
||||
}
|
||||
|
||||
/* SOCIAL PANEL CSS */
|
||||
.social-panel-container {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 5rem;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.social-panel-container.visible {
|
||||
transform: translateX(-0.625rem);
|
||||
}
|
||||
|
||||
.social-panel {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
|
||||
border: 5px solid #001F61;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Muli';
|
||||
position: relative;
|
||||
height: 169px;
|
||||
width: 370px;
|
||||
max-width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.social-panel button.close-btn {
|
||||
border: 0;
|
||||
color: #97A5CE;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.social-panel button.close-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.social-panel p {
|
||||
background-color: #001F61;
|
||||
border-radius: 0 0 10px 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 2px 17px 6px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
width: 235px;
|
||||
}
|
||||
|
||||
.social-panel p i {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.social-panel p a {
|
||||
color: #FF7500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-panel h4 {
|
||||
margin: 20px 0;
|
||||
color: #97A5CE;
|
||||
font-family: 'Muli';
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.social-panel ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.social-panel ul li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.social-panel ul li a {
|
||||
border: 1px solid #DCE1F2;
|
||||
border-radius: 50%;
|
||||
color: #001F61;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-panel ul li a:hover {
|
||||
border-color: #FF6A00;
|
||||
box-shadow: 0 9px 12px -9px #FF6A00;
|
||||
}
|
||||
|
||||
.floating-btn {
|
||||
border-radius: 26.5px;
|
||||
background-color: #001F61;
|
||||
border: 1px solid #001F61;
|
||||
box-shadow: 0 16px 22px -17px #03153B;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding: 12px 20px;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.floating-btn:hover {
|
||||
background-color: #ffffff;
|
||||
color: #001F61;
|
||||
}
|
||||
|
||||
.floating-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.floating-text {
|
||||
background-color: #001F61;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: #fff;
|
||||
font-family: 'Muli';
|
||||
padding: 7px 15px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.floating-text a {
|
||||
color: #FF7500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
.social-panel-container.visible {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
.floating-btn {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
1
EnvelopeGenerator.Web/wwwroot/css/card.min.css
vendored
Normal file
1
EnvelopeGenerator.Web/wwwroot/css/card.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:1%}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}}
|
||||
@ -5,6 +5,11 @@
|
||||
|
||||
.dd-show-logo {
|
||||
width: 9rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0 2rem 0 0;
|
||||
padding: 0;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.cursor-locked-logo {
|
||||
|
||||
@ -1 +1 @@
|
||||
.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}}
|
||||
.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}}
|
||||
@ -4,11 +4,6 @@
|
||||
*/
|
||||
|
||||
/* Toolbar Buttons */
|
||||
#app {
|
||||
background: gray;
|
||||
width: 100vw;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
@ -19,7 +14,6 @@
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
|
||||
.btn_refresh, .btn_reject, .btn_complete {
|
||||
height:2.5rem;
|
||||
}
|
||||
@ -69,8 +63,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #bbb;
|
||||
|
||||
background: #f8fcfc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
@ -78,16 +71,51 @@ body {
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display:flex;
|
||||
margin: 0 0 0.5vh 0;
|
||||
}
|
||||
|
||||
.envelope-view {
|
||||
display: flex; /* d-flex */
|
||||
flex-direction: column; /* flex-column */
|
||||
width: 100vw;
|
||||
height: 95.9vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
background: gray;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
height: 4vh;
|
||||
background-color: #001F61;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: #fff;
|
||||
font-family: 'Muli';
|
||||
padding: 0.5vh 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 998;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
footer * {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 0 6rem 0 1rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #FF7500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 3rem;
|
||||
|
||||
@ -1 +1 @@
|
||||
#app{background:#808080;width:100vw;height:50vh}.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background-color:#bbb;display:flex;flex-direction:column;height:100vh;margin:0}main{flex:1}footer{background:#333;color:#fff;text-align:center;padding:10px 0}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{margin-left:5rem}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}}
|
||||
.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background:#f8fcfc;display:flex;flex-direction:column;height:100vh;margin:0}main{display:flex;margin:0 0 .5vh 0}.envelope-view{display:flex;flex-direction:column;width:100vw;height:95.9vh}#app{background:#808080;width:100vw;height:100%;flex-grow:1;border-width:0}footer{height:4vh;background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:.5vh 0;position:fixed;bottom:0;width:100%;z-index:998;border-width:0}footer *{margin-left:1rem}footer>*{margin:0 6rem 0 1rem}footer a{color:#ff7500;text-decoration:none}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{margin-left:5rem}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}}
|
||||
Loading…
x
Reference in New Issue
Block a user