Update bootstrap to v5.3.1 for backend static pages

This commit is contained in:
shamoon 2023-08-23 16:29:03 -07:00
parent ca1b8344fa
commit 95cd86a541
5 changed files with 61 additions and 142 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,99 +1,51 @@
html,
body {
height: 100%;
--bs-body-bg: #f5f5f5;
--bs-link-color-rgb: 23, 84, 31; /* #17541f */
--bs-link-hover-color-rgb: 15, 56, 20;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
.form-control {
--bs-body-bg: #fff;
}
.btn {
--bs-btn-bg: #17541f;
--bs-btn-border-color: #17541f;
--bs-btn-hover-bg: #0f3614;
--bs-btn-hover-border-color: #0c2c10;
--bs-btn-active-bg: #0c2c10;
--bs-btn-active-border-color: #09220d;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
#inputUsername {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
#inputPassword {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@media (prefers-color-scheme: dark) {
/*
From theme_dark.scss
$primary-dark-mode: #45973a;
$danger-dark-mode: #b71631;
$bg-dark-mode: #161618;
$bg-dark-mode-accent: #21262d;
$bg-light-dark-mode: #1c1c1f;
$text-color-dark-mode: #abb2bf;
$border-color-dark-mode: #47494f;
*/
/* From theme_dark.scss */
body {
background-color: #161618 !important;
color: #abb2bf;
--bs-body-bg: #161618;
--bs-body-color: #abb2bf;
--bs-body-color-rgb: 171, 178, 191;
--bs-border-color: #47494f;
}
.form-control, .form-floating {
--bs-body-bg: #1c1c1f;
}
svg.logo .text {
fill: #abb2bf!important;
}
.form-control:not(.is-invalid):not(.btn) {
border-color: #47494f;
}
.form-control:not(.btn) {
background-color: #161618;
color: #abb2bf;
}
.form-control:not(.btn)::placeholder {
color: #abb2bf;
}
.form-control:not(.btn):focus {
background-color: #1c1c1f !important;
color: #8e97a9 !important;
}
.btn-primary {
color: #fff;
background-color: #17541f;
border-color: #17541f;
}
.btn-primary:hover, .btn-primary:focus {
background-color: #0f3614;
border-color: #0c2c10;
}
.btn-primary:not(:disabled):not(.disabled):active {
background-color: #0c2c10;
border-color: #09220d;
fill: #abb2bf !important;
}
}

View File

@ -5,14 +5,15 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paperless-ngx</title>
<base href="{% url 'base' %}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Paperless-ngx</title>
<base href="{% url 'base' %}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="cookie_prefix" content="{{cookie_prefix}}">
<meta name="robots" content="noindex,nofollow">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="{% static webmanifest %}">
<meta name="author" content="The Paperless-ngx Team">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="{% static webmanifest %}">
<link rel="stylesheet" href="{% static styles_css %}">
<link rel="apple-touch-icon" href="{% static apple_touch_icon %}">
</head>
@ -33,7 +34,7 @@
height: 100%;
}
@-webkit-keyframes pulsate {
@keyframes pulsate {
0% {
opacity: 0.1;
}
@ -47,8 +48,8 @@
.app-loader svg, .app-loader h6 {
opacity: 0.1;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
animation: pulsate 2s ease-out;
animation-iteration-count: infinite;
}
svg.logo .leaf {

View File

@ -7,37 +7,18 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="description" content="Paperless-ngx Signed Out">
<meta name="author" content="The Paperless-ngx Team">
<meta name="robots" content="noindex,nofollow">
<title>{% translate "Paperless-ngx signed out" %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'signin.css' %}" rel="stylesheet">
</head>
<body class="text-center">
<div class="form-signin">
<div class="position-absolute top-50 start-50 translate-middle">
<svg xmlns="http://www.w3.org/2000/svg" width="300" class="logo mb-4" viewBox="0 0 2897.4 896.6">
<path class="leaf" d="M140,713.7c-3.4-16.4-10.3-49.1-11.2-49.1c-145.7-87.1-128.4-238-80.2-324.2C59,449,251.2,524,139.1,656.8 c-0.9,1.7,5.2,22.4,10.3,41.4c22.4-37.9,56-83.6,54.3-87.9C65.9,273.9,496.9,248.1,586.6,39.4c40.5,201.8-20.7,513.9-367.2,593.2 c-1.7,0.9-62.9,108.6-65.5,109.5c0-1.7-25.9-0.9-22.4-9.5C133.1,727.4,136.6,720.6,140,713.7L140,713.7z M135.7,632.6 c44-50.9-7.8-137.9-38.8-166.4C149.5,556.7,146,609.3,135.7,632.6L135.7,632.6z" transform="translate(0)" style="fill:#17541f"/>
<g class="text" style="fill:#000">

View File

@ -7,38 +7,18 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="description" content="Paperless-ngx Sign In">
<meta name="author" content="The Paperless-ngx Team">
<meta name="robots" content="noindex,nofollow">
<title>{% translate "Paperless-ngx sign in" %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="{% static 'signin.css' %}" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" method="post">
<form class="form-signin position-absolute top-50 start-50 translate-middle" method="post">
{% csrf_token %}
<svg xmlns="http://www.w3.org/2000/svg" width="300" class="logo mb-4" viewBox="0 0 2897.4 896.6">
<path class="leaf" d="M140,713.7c-3.4-16.4-10.3-49.1-11.2-49.1c-145.7-87.1-128.4-238-80.2-324.2C59,449,251.2,524,139.1,656.8 c-0.9,1.7,5.2,22.4,10.3,41.4c22.4-37.9,56-83.6,54.3-87.9C65.9,273.9,496.9,248.1,586.6,39.4c40.5,201.8-20.7,513.9-367.2,593.2 c-1.7,0.9-62.9,108.6-65.5,109.5c0-1.7-25.9-0.9-22.4-9.5C133.1,727.4,136.6,720.6,140,713.7L140,713.7z M135.7,632.6 c44-50.9-7.8-137.9-38.8-166.4C149.5,556.7,146,609.3,135.7,632.6L135.7,632.6z" transform="translate(0)" style="fill:#17541f"/>
@ -66,11 +46,17 @@
{% endif %}
{% translate "Username" as i18n_username %}
{% translate "Password" as i18n_password %}
<label for="inputUsername" class="sr-only">{{ i18n_username }}</label>
<input type="text" name="username" id="inputUsername" class="form-control" placeholder="{{ i18n_username }}" autocorrect="off" autocapitalize="none" required autofocus>
<label for="inputPassword" class="sr-only">{{ i18n_password }}</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="{{ i18n_password }}" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">{% translate "Sign in" %}</button>
<div class="form-floating">
<input type="text" name="username" id="inputUsername" placeholder="{{ i18n_username }}" class="form-control" autocorrect="off" autocapitalize="none" required autofocus>
<label for="inputUsername">{{ i18n_username }}</label>
</div>
<div class="form-floating">
<input type="password" name="password" id="inputPassword" placeholder="{{ i18n_password }}" class="form-control" required>
<label for="inputPassword">{{ i18n_password }}</label>
</div>
<div class="d-grid mt-3">
<button class="btn btn-lg btn-primary" type="submit">{% translate "Sign in" %}</button>
</div>
</form>
</body>
</html>