From 51e4e147469178f093645d88242f594df2558650 Mon Sep 17 00:00:00 2001
From: Rich Lott / Artful Robot <code.commits@artfulrobot.uk>
Date: Mon, 4 Dec 2023 15:12:00 +0000
Subject: [PATCH] standalone: clean up styling on login/reset password

---
 css/civicrm.css                               |  17 ++
 ext/standaloneusers/ang/crmResetPassword.js   |   1 +
 .../crmResetPassword/crmResetPassword.html    |  55 ++--
 ext/standaloneusers/css/standalone.css        |  52 ++++
 ext/standaloneusers/standaloneusers.php       |  10 +
 .../CRM/Standaloneusers/Page/Login.tpl        | 114 +++-----
 .../Standaloneusers/Page/ResetPassword.tpl    |  17 +-
 .../CRM/Standaloneusers/Page/_contentFoot.tpl |   3 -
 .../CRM/Standaloneusers/Page/_contentHead.tpl | 272 ------------------
 templates/CRM/common/standalone.tpl           |   9 +-
 10 files changed, 164 insertions(+), 386 deletions(-)
 create mode 100644 ext/standaloneusers/css/standalone.css
 delete mode 100644 ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl
 delete mode 100644 ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl

diff --git a/css/civicrm.css b/css/civicrm.css
index 65b934fbf3..430a55fd90 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3962,3 +3962,20 @@ span.crm-status-icon {
 .dedupe-rules-dialog label > * {
   margin-left: 30px;
 }
+
+/* Standalone-only styles. A minimal set to make it usable out-of-the-box. */
+html.crm-standalone body {
+  --sa-font-family: sans-serif;
+  --roundness: 3px;
+  --error-colour: #a00;
+  --warning-colour: #fbb862;
+  --success-colour: #86c66c;
+  --label-colour: #464354;
+  --background-colour: rgb(242,242,237);
+  --box-padding: 1.6rem;
+  --box-background: #fff;
+  margin: 0;
+  padding: 0;
+  font-family: var(--sa-font-family);
+  background-color: var(--background-colour);
+}
diff --git a/ext/standaloneusers/ang/crmResetPassword.js b/ext/standaloneusers/ang/crmResetPassword.js
index 2d5db04fd4..017c6c6ff2 100644
--- a/ext/standaloneusers/ang/crmResetPassword.js
+++ b/ext/standaloneusers/ang/crmResetPassword.js
@@ -62,6 +62,7 @@
           return;
         }
         if (ctrl.newPassword != ctrl.newPasswordAgain) {
+          updateAngular('formSubmitted', false);
           alert(ts("Passwords do not match"));
           return;
         }
diff --git a/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html b/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html
index 88a9ae8a6c..f7e692d0a6 100644
--- a/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html
+++ b/ext/standaloneusers/ang/crmResetPassword/crmResetPassword.html
@@ -1,21 +1,25 @@
 <div>
-  <h1>Request Password Reset Link</h1>
   <!-- without a token, we offer for them to generate one. -->
   <form name="requestLink" crm-ui-id-scope
     ng-if="!$ctrl.formSubmitted && !$ctrl.token">
 
-    <label crm-ui-for="identifier">{{ts('Enter the username or email on your account')}}</label>
-    <input
-        crm-ui-id="identifier"
-        name="identifier"
-        ng-model="$ctrl.identifier"
-        class="crm-form-text"
-        type=text
-        />
+    <h1>Request Password Reset Link</h1>
 
-    <button class=btn ng-click="$ctrl.sendPasswordReset()" >{{ts('Send Password Reset')}}</button>
+    <div class="input-wrapper">
+      <label crm-ui-for="identifier">{{ts('Enter the username or email on your account')}}</label>
+      <input
+          crm-ui-id="identifier"
+          name="identifier"
+          ng-model="$ctrl.identifier"
+          class="crm-form-text form-control"
+          type=text
+          />
+    </div>
+
+    <button class=crm-button ng-click="$ctrl.sendPasswordReset()" >{{ts('Send Password Reset')}}</button>
   </form>
-  <div ng-if="$ctrl.resetSuccessfullySubmitted" >
+
+  <div ng-if="$ctrl.resetSuccessfullySubmitted" class="help" >
     <p>{{ts('Thanks. If your username/email matched an active account, we will email you with a special link to provide a new password.')}}</p>
     <p>{{ts('The link must be used within an hour, and can only be used once.')}}</p>
   </div>
@@ -24,32 +28,33 @@
 
   <!-- without a token, we offer for them to generate one. -->
   <form ng-if="$ctrl.token && $ctrl.token !== 'invalid' && !$ctrl.formSubmitted" name="resetPassword" crm-ui-id-scope >
-    <div ng=if="$ctrl.token !== 'invalid'" >
-      <div crm-ui-field="{name: 'newPassword', title: ts('Enter a new password')}">
-        <input
+    <h1>Reset Password</h1>
+
+    <div class="input-wrapper">
+      <label crm-ui-for="newPassword">{{ts('Enter a new password')}}</label>
+      <input
           crm-ui-id="newPassword"
           name="newPassword"
           ng-model="$ctrl.newPassword"
-          class="crm-form-text"
+          class="crm-form-text form-control"
           type=password
           />
-      </div>
-
-      <div crm-ui-field="{name: 'newPasswordAgain', title: ts('Re-enter new password')}">
-        <input
+    </div>
+    <div class="input-wrapper">
+      <label crm-ui-for="newPasswordAgain">{{ts('Re-enter new password')}}</label>
+      <input
           crm-ui-id="newPasswordAgain"
           name="newPasswordAgain"
           ng-model="$ctrl.newPasswordAgain"
-          class="crm-form-text"
+          class="crm-form-text form-control"
           type=password
           />
-        <span class="crm-error" ng-show="$ctrl.newPasswordAgain && $ctrl.newPassword && $ctrl.newPassword !== $ctrl.newPasswordAgain">
+      <span class="crm-error" ng-show="$ctrl.newPasswordAgain && $ctrl.newPassword && $ctrl.newPassword !== $ctrl.newPasswordAgain">
           {{ts('Passwords do not match')}}
-        </span>
-      </div>
-
-      <button ng-click="$ctrl.attemptChange()" ng-disabled="$ctrl.formSubmitted">{{ts('Change Password')}}</button>
+      </span>
     </div>
+
+    <button class=crm-button ng-click="$event.preventDefault();$ctrl.attemptChange()" ng-disabled="$ctrl.formSubmitted">{{ts('Change Password')}}</button>
   </form>
 
   <div ng-if="$ctrl.token === 'invalid'" >
diff --git a/ext/standaloneusers/css/standalone.css b/ext/standaloneusers/css/standalone.css
new file mode 100644
index 0000000000..9093579fe7
--- /dev/null
+++ b/ext/standaloneusers/css/standalone.css
@@ -0,0 +1,52 @@
+html.crm-standalone body>.crm-container {
+  padding: 1px 3vw 1rem;
+}
+
+html.crm-standalone  nav.breadcrumb>ol {
+  padding-inline-start: 0;
+}
+
+.standalone-auth-form {
+  display: grid;
+  place-content: center;
+  width: 100%;
+  height: 100vh;
+}
+.standalone-auth-box {
+  box-sizing: border-box;
+  width: clamp(280px, 68vw, 45rem);
+  margin: 0;
+  background-color: white;
+  border: none;
+  border-radius: 3px;
+  padding: 1rem 3vw;;
+}
+.standalone-auth-form img.crm-logo {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto 2rem;
+  display: block;
+}
+.standalone-auth-form .input-wrapper {
+  margin-bottom: 1rem;
+}
+.standalone-auth-form label {
+  display: block;
+}
+.standalone-auth-form input {
+  box-sizing: border-box;
+  width: 100%;
+}
+.standalone-auth-form .login-or-forgot {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+}
+.standalone-auth-form .login-or-forgot>a {
+  grid-column: 1;
+}
+.standalone-auth-form .login-or-forgot>button {
+  grid-column: 2;
+  place-self: end;
+  margin-right: 0; /* override civicrm.css's 6px */
+}
diff --git a/ext/standaloneusers/standaloneusers.php b/ext/standaloneusers/standaloneusers.php
index fda5e61e72..a463b09f8d 100644
--- a/ext/standaloneusers/standaloneusers.php
+++ b/ext/standaloneusers/standaloneusers.php
@@ -10,6 +10,16 @@ require_once 'standaloneusers.civix.php';
 use CRM_Standaloneusers_ExtensionUtil as E;
 // phpcs:enable
 
+
+function standaloneusers_civicrm_alterBundle(CRM_Core_Resources_Bundle $bundle) {
+  if ($bundle->name !== 'coreResources') {
+    return;
+  }
+  // This adds a few styles that only need apply to standalone, mainly
+  // providing a default style for login/password reset type pages.
+  $bundle->addStyleFile('standaloneusers', 'css/standalone.css');
+}
+
 /**
  * Hide the inherit CMS language on the Settings - Localization form.
  *
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl
index 573bc4a776..ac40561086 100644
--- a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl
+++ b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/Login.tpl
@@ -1,94 +1,66 @@
-{include file='CRM/Standaloneusers/Page/_contentHead.tpl'}
-    <div class="message info" style="display:none;" id="loggedOutNotice">{ts}You have been logged out.{/ts}</div>
-    <div class="message warning" style="display:none;" id="anonAccessDenied">{ts}You may need to login to access that.{/ts}</div>
+<div class="standalone-auth-form">
+  <div class="standalone-auth-box">
     <form>
-      {if $justLoggedOut}
-      <div class="help message info" >{ts}You have been logged out.{/ts}</div>
-      {/if}
-      {if $anonAccessDenied}
-      <div class="help message warning" >{ts}You do not have permission to access that, you may need to login.{/ts}</div>
-      {/if}
+      <img class="crm-logo" src="{$logoUrl}" alt="logo for CiviCRM, with an intersecting blue and green triangle">
+      {if $justLoggedOut}<div class="help message info">{ts}You have been logged out.{/ts}</div>{/if}
+      {if $anonAccessDenied}<div class="help message warning">{ts}You do not have permission to access that, you may
+        need to login.{/ts}</div>{/if}
       <div class="input-wrapper">
         <label for="usernameInput" name=username class="form-label">Username</label>
-        <input type="text" class="form-control" id="usernameInput" >
+        <input type="text" class="form-control" id="usernameInput">
       </div>
-      <div>
+      <div class="input-wrapper">
         <label for="passwordInput" class="form-label">Password</label>
         <input type="password" class="form-control" id="passwordInput">
       </div>
       <div id="error" style="display:none;" class="form-alert">Your username and password do not match</div>
-      <div class="flex">
+      <div class="login-or-forgot">
         <a href="{$forgottenPasswordURL}">Forgotten password?</a>
         <button id="loginSubmit" type="submit" class="btn btn-secondary crm-button">Submit</button>
       </div>
     </form>
-  {include file='CRM/Standaloneusers/Page/_contentFoot.tpl'}
+  </div>
+</div>
+
 {literal}
 <script>
-document.addEventListener('DOMContentLoaded', () => {
-
-  const submitBtn = document.getElementById('loginSubmit'),
-        username = document.getElementById('usernameInput'),
-        password = document.getElementById('passwordInput');
+  document.addEventListener('DOMContentLoaded', () => {
 
+    const submitBtn = document.getElementById('loginSubmit'),
+      username = document.getElementById('usernameInput'),
+      password = document.getElementById('passwordInput');
 
-  submitBtn.addEventListener('click', async e => {
-    e.preventDefault();
+    submitBtn.addEventListener('click', async e => {
+      e.preventDefault();
 
-    const response = await fetch(CRM.url("civicrm/authx/login"), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
-      },
-      //body: '_authx=Basic ' + btoa(encodeURIComponent(`${username.value}:${password.value}`))
-      body: '_authx=Basic ' + encodeURIComponent(btoa(`${username.value}:${password.value}`))
-    });
-    if (!response.ok) {
-      const contentType = response.headers.get("content-type");
-      let msg = 'Unexpected error';
-      if (!contentType || !contentType.includes("application/json")) {
-        // Non-JSON response; an error.
-        msg = await response.text();
-        // Example error string: 'HTTP 401 Invalid credential'
-        msg = msg.replace(/^HTTP \d{3} /,'');
+      const response = await fetch(CRM.url("civicrm/authx/login"), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        //body: '_authx=Basic ' + btoa(encodeURIComponent(`${username.value}:${password.value}`))
+        body: '_authx=Basic ' + encodeURIComponent(btoa(`${username.value}:${password.value}`))
+      });
+      if (!response.ok) {
+        const contentType = response.headers.get("content-type");
+        let msg = 'Unexpected error';
+        if (!contentType || !contentType.includes("application/json")) {
+          // Non-JSON response; an error.
+          msg = await response.text();
+          // Example error string: 'HTTP 401 Invalid credential'
+          msg = msg.replace(/^HTTP \d{3} /, '');
+        }
+        else {
+          let responseObj = await response.json();
+          console.log("responseObj with error", responseObj);
+        }
+        alert(`Sorry, that didn‘t work. ${msg}`);
       }
       else {
-        let responseObj = await response.json();
-        console.log("responseObj with error", responseObj);
+        // OK response (it includes contact_id and user_id in JSON, but we don't need those)
+        window.location = '/civicrm/';
       }
-      alert(`Sorry, that didn‘t work. ${msg}`);
-    }
-    else {
-      // OK response (it includes contact_id and user_id in JSON, but we don't need those)
-      window.location = '/civicrm/';
-    }
+    });
   });
-});
-/* (function($) { */
-/*     var request = new XMLHttpRequest(); */
-/*     request.open("POST", ); */
-/*     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); */
-/*     request.responseType = "json"; */
-/*     request.onreadystatechange = function() { */
-/*       console.log(request.response); */
-/*       if (request.readyState == 4) { */
-/*         if (request.status == 200) { */
-/*           if (request.response.user_id > 0) { */
-/*             window.location.href = "/civicrm?reset=1"; */
-/*           } else { */
-/*             // probably won't ever be here? */
-/*             alert("Success but fail because ???"); */
-/*             console.log(request.response); */
-/*           } */
-/*         } else { */
-/*           // todo - send errors back to the form via whatever forms framework we'll be using */
-/*           alert("Fail with status code " + request.status + " " + request.statusText); */
-/*           console.log(request.response); */
-/*         } */
-/*       } */
-/*     }; */
-/*     var data = '_authx=Basic ' + btoa(encodeURIComponent($('#username').val()) + ':' + $('#password').val()); */
-/*     request.send(data); */
-/*   }); */
 </script>
 {/literal}
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl
index 702641abe9..243d852fe6 100644
--- a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl
+++ b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/ResetPassword.tpl
@@ -1,7 +1,10 @@
-{include file='CRM/Standaloneusers/Page/_contentHead.tpl'}
-<crm-angular-js modules="crmResetPassword">
-  <crm-reset-password
-    hibp="{$hibp|escape}"
-    token="{$token|escape}" ></crm-reset-password>
-</crm-angular-js>
-{include file='CRM/Standaloneusers/Page/_contentFoot.tpl'}
+<div class="standalone-auth-form">
+  <div class="standalone-auth-box">
+    <img class="crm-logo" src="{$logoUrl}" alt="logo for CiviCRM, with an intersecting blue and green triangle">
+    <crm-angular-js modules="crmResetPassword">
+    <crm-reset-password
+        hibp="{$hibp|escape}"
+        token="{$token|escape}" ></crm-reset-password>
+    </crm-angular-js>
+  </div>
+</div>
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl
deleted file mode 100644
index 4a1592de2a..0000000000
--- a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentFoot.tpl
+++ /dev/null
@@ -1,3 +0,0 @@
-  </div>
-</div>
-
diff --git a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl b/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl
deleted file mode 100644
index 742cbcb61f..0000000000
--- a/ext/standaloneusers/templates/CRM/Standaloneusers/Page/_contentHead.tpl
+++ /dev/null
@@ -1,272 +0,0 @@
-<style>
-{literal}
-/***Structure****
-    Variables (comment out your subtheme)
-        - Finsbury Park
-        - Jerry Seinfeld
-        - Shoreditch (soon)
-        - Aah (soon)
-    Resets
-    Base
-****************/
-
-/***************
-    Variables
-****************/
-
-/* Finsbury Park
-
-:root {
-    --roundness: 0.25rem;
-    --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans, Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    --text-colour: #000;
-    --text-size: 0.9rem;
-    --error-colour: #aa0c0c;
-    --label-colour: #000;
-    --background-colour: #ededed;
-    --box-border: 1px #cdcdcd solid;
-    --box-padding: 2rem 1.75rem;
-    --box-shadow: none;
-    --box-roundness: 0.25rem;
-    --box-background: #fff;
-    --input-border: 1px solid #ccc;
-    --input-padding: 0.5rem;
-    --input-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-    --button-border: 1px solid #bbb;
-    --button-shadow: 0 1px 2px rgba(0,0,0,0.05);
-    --button-padding: 5px 15px;
-    --button-text-colour: #3e3e3e;
-    --button-background: #f0f0f0;
-}
-
-/* Shoreditch
-
-:root {
-    --roundness: 2px;
-    --font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-    --text-colour: #232429;
-    --text-size: 0.9rem;
-    --error-colour: #cf3458;
-    --label-colour: #464354;
-    --background-colour: #f3f6f7;
-    --box-border: 0 transparent solid;
-    --box-padding: 20px;
-    --box-shadow: 0 3px 18px 0 rgba(48,40,40,0.25);
-    --box-roundness: 2px;
-    --box-background: #fff;
-    --input-border: 1px solid #c2cfd8;
-    --input-padding: 5px 10px;
-    --input-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
-    --button-border: 0 solid transparent;
-    --button-shadow: none;
-    --button-padding: 8px 28px;
-    --button-text-colour: #fff;
-    --button-background: #0071bd;
-}
-
-/* Aah */
-
-:root {
-    --roundness: 3px;
-    --font-family: Lato,Helvetica,Arial,sans-serif;
-    --font-size-h1: 1.6rem;
-    --text-colour: #222;
-    --text-size: 0.9rem;
-    --error-colour: #a00;
-    --warning-colour: #fbb862;
-    --success-colour: #86c66c;
-    --label-colour: #464354;
-    --background-colour: rgb(242,242,237);
-    --box-border: 0 transparent solid;
-    --box-padding: 1.6rem;
-    --box-shadow: none;
-    --box-roundness: 0;
-    --box-background: #fff;
-    --input-border: 1px solid rgba(0,0,0,.2);
-    --input-padding: 5px 10px;
-    --input-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
-    --button-border: 0 solid transparent;
-    --button-shadow: 0 0 6px rgba(0,0,0,.2);
-    --button-padding: .4rem 1.6rem;
-    --button-text-colour: #fff;
-    --button-background: #2c98ed;
-    --button-text-shadow: none;
-}
-
-/* Ffresh
-
-:root {
-    --roundness: 2rem;
-    --font-family: Lato,Helvetica,Arial,sans-serif;
-    --text-colour: #222;
-    --text-size: 1rem;
-    --error-colour: #a00;
-    --label-colour: #464354;
-    --background-colour: #2c98ed;
-    --box-border: 0 transparent solid;
-    --box-padding: 1.6rem;
-    --box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
-    --box-roundness: 1.75rem;
-    --box-background: #fff;
-    --input-border: 2px solid #2c98ed;
-    --input-padding: 0.75rem;
-    --input-shadow: none;
-    --button-border: 0 solid transparent;
-    --button-shadow: none;
-    --button-padding: 0.75rem 2rem;
-    --button-text-colour: #fff;
-    --button-background: #2c98ed;
-}
-
-/***************
-    Base
-****************/
-
-body {
-    background-color: var(--background-colour);
-    font-family: var(--font-family);
-    color: var(--text-colour);
-    font-size: var(--text-size);
-    padding: 0;
-    margin: 0;
-}
-#crm-container.standalone-entry {
-    display: grid;
-    place-content: center;
-    width: 100%;
-    height: 100vh;
-}
-#crm-container.standalone-entry * {
-    box-sizing: border-box;
-}
-a {
-    text-decoration: none;
-    font-size: 90%;
-}
-a:hover, a:focus {
-    text-decoration: underline;
-}
-.flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-h1 {
-  font-family: var(--font-family);
-  font-size: var(--font-size-h1);
-}
-
-/***************
-    UI Elements
-****************/
-
-#crm-container.standalone-entry .mid-block {
-    width: clamp(280px, 68vw, 34rem);
-    margin: 0;
-    background-color: var(--box-background);
-    border: var(--box-border);
-    border-radius: var(--box-roundness);
-    padding: var(--box-padding);
-    box-shadow: var(--box-shadow);
-}
-#crm-container.standalone-entry img {
-    width: 100%;
-    max-width: 400px;
-    margin: 0 auto 2rem;
-    display: block;
-}
-#crm-container.standalone-entry label {
-    display: inline-block;
-    max-width: 100%;
-    margin-bottom: 5px;
-    font-weight: 700;
-    color: var(--label-colour);
-}
-#crm-container.standalone-entry input {
-    display: block;
-    width: 100%;
-    color: #555;
-    background-color: #fff;
-    background-image: none;
-    margin-bottom: 0.75rem;
-    padding: var(--input-padding);
-    font-size: var(--text-size);
-    border-radius: var(--roundness);
-    border: var(--input-border);
-    box-shadow: var(--input-shadow);
-}
-#crm-container.standalone-entry input:focus,
-#crm-container.standalone-entry input:focus-visible {
-    border: 1px solid #66afe9;
-}
-#crm-container.standalone-entry .btn {
-    display: inline-block;
-    margin:0;
-    text-align: center;
-    vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none;
-    font-size: var(--text-size);
-    background-color: var(--button-background);
-    color: var(--button-text-colour);
-    border: var(--button-border);
-    padding: var(--button-padding);
-    border-radius: var(--roundness);
-    font-family: var(--font-family);
-    box-shadow: var(--button-shadow);
-    text-shadow: var(--button-text-shadow);
-}
-#crm-container.standalone-entry .btn:hover,
-#crm-container.standalone-entry .btn:focus {
-    filter: brightness(80%);
-}
-#crm-container.standalone-entry .float-right {
-    float: right;
-    font-size: 90%;
-    margin-top: 0.2rem;
-}
-#crm-container.standalone-entry .form-alert {
-    color: var(--error-colour);
-    margin: 1rem 0;
-}
-
-
-#loggedOutNotice {
-  text-align: center;
-  font-weight: bold;
-  padding: var(--box-padding);
-  background-color: var(--success-colour);
-  margin: 1rem 0;
-  border-radius: var(--box-roundness);
-}
-#anonAccessDenied {
-  text-align: center;
-  font-weight: bold;
-  padding: var(--box-padding);
-  background-color: var(--warning-colour);
-  margin: 1rem 0;
-  border-radius: var(--box-roundness);
-}
-
-/*
-@media  (min-width: 768px) {
-    #crm-container.standalone-entry {
-        width: 60vw;
-        margin: 20vh auto 0;
-    }
-}
-@media  (min-width: 960px) {
-    #crm-container.standalone-entry {
-        width: 30vw;
-    }
-}
-*/
-{/literal}
-</style>
-
-<div id="crm-container" class="crm-container standalone-entry">
-  <div class="mid-block">
-    <img src="{$logoUrl}" alt="logo for CiviCRM, with an intersecting blue and green triangle">
-
diff --git a/templates/CRM/common/standalone.tpl b/templates/CRM/common/standalone.tpl
index 4dbbafd942..75f7382abd 100644
--- a/templates/CRM/common/standalone.tpl
+++ b/templates/CRM/common/standalone.tpl
@@ -1,5 +1,5 @@
 <!DOCTYPE html >
-<html lang="{$config->lcMessages|substr:0:2}">
+<html lang="{$config->lcMessages|substr:0:2}" class="crm-standalone" >
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -21,13 +21,6 @@
 {/if}
 
   <title>{if isset($docTitle)}{$docTitle}{else}CiviCRM{/if}</title>
-
-  <style>
-  {literal}
-  body { margin:0; padding:0; }
-  body>.crm-container { padding: 1rem; }
-  {/literal}
-  </style>
 </head>
 <body>
   {if $config->debug}
-- 
2.25.1