From 29aafc12c236ccf465ad2b43e7a1e270d4d55664 Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Sun, 24 Jan 2021 15:44:44 +0530
Subject: [PATCH 1/7] Fix validation errors on lists page

---
 openlibrary/templates/lists/home.html | 2 +-
 static/css/page-user.less             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/openlibrary/templates/lists/home.html b/openlibrary/templates/lists/home.html
index be9054316a5..7f79dff2d16 100644
--- a/openlibrary/templates/lists/home.html
+++ b/openlibrary/templates/lists/home.html
@@ -26,7 +26,7 @@ <h2>$_('Create a list of any Subjects, Authors, Works or specific Editions.')</h
     <div class="head">
         <h2>$_('Active Lists')</h2>
     </div>
-    <div id="lists">
+    <div id="user-lists">
     <!-- FOR EACH LIST -->
     $for list in lists:
         <div class="listEntry">
diff --git a/static/css/page-user.less b/static/css/page-user.less
index 7e0f693207c..8453949101e 100644
--- a/static/css/page-user.less
+++ b/static/css/page-user.less
@@ -104,7 +104,7 @@ div#subjectsPage{
   }
 }
 
-div#lists{
+div#user-lists{
   display: flex;
   flex-wrap: wrap;
 }

From edf1b63582a9df02408f212a2252b839ff30eb14 Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Mon, 25 Jan 2021 09:06:04 +0530
Subject: [PATCH 2/7] Removed body id

---
 openlibrary/templates/lists/home.html | 2 +-
 openlibrary/templates/site/body.html  | 2 +-
 static/css/page-user.less             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/openlibrary/templates/lists/home.html b/openlibrary/templates/lists/home.html
index 7f79dff2d16..393594918d7 100644
--- a/openlibrary/templates/lists/home.html
+++ b/openlibrary/templates/lists/home.html
@@ -26,7 +26,7 @@ <h2>$_('Create a list of any Subjects, Authors, Works or specific Editions.')</h
     <div class="head">
         <h2>$_('Active Lists')</h2>
     </div>
-    <div id="user-lists">
+    <div class="lists">
     <!-- FOR EACH LIST -->
     $for list in lists:
         <div class="listEntry">
diff --git a/openlibrary/templates/site/body.html b/openlibrary/templates/site/body.html
index ecd0ad598c5..47d524bc6a2 100644
--- a/openlibrary/templates/site/body.html
+++ b/openlibrary/templates/site/body.html
@@ -5,7 +5,7 @@
 $ show_banners = bodyid != 'form'
 $ bodyattrs = ctx.get('bodyattrs', [])
 
-<body id="$bodyid" class="$(' '.join(bodyclass))" $:(' '.join(bodyattrs))>
+<body class="$(' '.join(bodyclass))" $:(' '.join(bodyattrs))>
   <script>
       // Provide a signal that JS will load
       document.body.className += ' client-js';
diff --git a/static/css/page-user.less b/static/css/page-user.less
index 8453949101e..75e60c51c8f 100644
--- a/static/css/page-user.less
+++ b/static/css/page-user.less
@@ -104,7 +104,7 @@ div#subjectsPage{
   }
 }
 
-div#user-lists{
+div.lists{
   display: flex;
   flex-wrap: wrap;
 }

From e5a5d4c7cbc6007262da171818f829ebc4ed8e7b Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Tue, 26 Jan 2021 10:53:42 +0530
Subject: [PATCH 3/7] Removed body# selectors

---
 openlibrary/templates/borrow_admin.html      |   8 +-
 static/css/legacy-borrowTable-adminUser.less |  43 ++-
 static/css/page-admin.less                   |  64 ++--
 static/css/page-book.less                    |   2 +-
 static/css/page-edit.less                    | 224 +++++++------
 static/css/page-form.less                    | 216 ++++++-------
 static/css/page-home.less                    |   2 +-
 static/css/page-plain.less                   | 322 +++++++++----------
 static/css/page-user.less                    | 102 +++---
 9 files changed, 487 insertions(+), 496 deletions(-)

diff --git a/openlibrary/templates/borrow_admin.html b/openlibrary/templates/borrow_admin.html
index 4dc6e691bcf..1d74f43883b 100644
--- a/openlibrary/templates/borrow_admin.html
+++ b/openlibrary/templates/borrow_admin.html
@@ -344,9 +344,9 @@ <h4>Waiting List JSON</h4>
 
 
 <style type="text/css">
-body#plain #borrowTable {margin: 30px 0 25px;}
-body#plain #borrowTable table {width:100%;font-family:"Lucida Grande","Arial",sans-serif;}
-body#plain #borrowTable table th {
+#borrowTable {margin: 30px 0 25px;}
+#borrowTable table {width:100%;font-family:"Lucida Grande","Arial",sans-serif;}
+#borrowTable table th {
     border-bottom: 1px solid #c7c3b3;
     vertical-align: bottom;
     padding-bottom:10px;
@@ -407,7 +407,7 @@ <h4>Waiting List JSON</h4>
     margin: 1em 0em 0.5em 0em;
 }
 
-body#plain div#alert0 {
+div#alert0 {
     background-color: #eeecad !important;
     border: 1px solid #d2ac95;
 }
diff --git a/static/css/legacy-borrowTable-adminUser.less b/static/css/legacy-borrowTable-adminUser.less
index 087d964cf08..e5452f4446e 100644
--- a/static/css/legacy-borrowTable-adminUser.less
+++ b/static/css/legacy-borrowTable-adminUser.less
@@ -5,30 +5,27 @@
  */
 @import (less) "less/font-families.less";
 
-body#admin,
-body#user {
-  /* stylelint-disable selector-max-specificity */
-  #borrowTable {
-    margin: 30px 0 25px;
-    table {
-      width: 100%;
-      font-family: @lucida_sans_serif-7;
-      th {
-        border-bottom: 1px solid @beige-three;
-        vertical-align: bottom;
-        padding-bottom: 10px;
-        font-family: @lucida_sans_serif-1;
-        color: @brown;
-        font-weight: 600;
-        font-size: .6875em;
-        text-transform: uppercase;
-        white-space: nowrap;
-        text-align: center;
-        &.titles {
-          text-align: left;
-        }
+/* stylelint-disable selector-max-specificity */
+#borrowTable {
+  margin: 30px 0 25px;
+  table {
+    width: 100%;
+    font-family: @lucida_sans_serif-7;
+    th {
+      border-bottom: 1px solid @beige-three;
+      vertical-align: bottom;
+      padding-bottom: 10px;
+      font-family: @lucida_sans_serif-1;
+      color: @brown;
+      font-weight: 600;
+      font-size: .6875em;
+      text-transform: uppercase;
+      white-space: nowrap;
+      text-align: center;
+      &.titles {
+        text-align: left;
       }
     }
   }
-  /* stylelint-enable selector-max-specificity */
 }
+/* stylelint-enable selector-max-specificity */
diff --git a/static/css/page-admin.less b/static/css/page-admin.less
index 016ea281c5f..d76eada1aa1 100644
--- a/static/css/page-admin.less
+++ b/static/css/page-admin.less
@@ -1,5 +1,5 @@
 /**
- * Stylesheet entry point for pages with body#admin
+ * Stylesheet entry point for pages with body-admin
  * See
  * - openlibrary/templates/admin/people/view.html
  * - openlibrary/templates/admin/ip/index.html
@@ -123,39 +123,39 @@ div.measurements {
   }
 }
 
-body#admin {
+body {
   background-color: desaturate(@admin-table-border, 100);
-  /* stylelint-disable selector-max-specificity */
-  div#background {
-    width: 100%;
-    background-color: desaturate(@beige, 100);
-    padding-bottom: 15px;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#content {
-    font-family: @lucida_sans_serif-1;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#bottom {
-    background-color: transparent;
-  }
-  /* stylelint-enable selector-max-specificity */
-  div.siteSearch.darker {
-    background-color: @mid-grey;
-  }
-  /* stylelint-disable selector-max-specificity */
-  div#headerNav ul.links li {
-    border-top: 1px solid @mid-grey;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#contentHead {
-    padding-bottom: 30px;
-  }
-  /* stylelint-enable selector-max-specificity */
 }
+/* stylelint-disable selector-max-specificity */
+div#background {
+  width: 100%;
+  background-color: desaturate(@beige, 100);
+  padding-bottom: 15px;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#content {
+  font-family: @lucida_sans_serif-1;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#bottom {
+  background-color: transparent;
+}
+/* stylelint-enable selector-max-specificity */
+div.siteSearch.darker {
+  background-color: @mid-grey;
+}
+/* stylelint-disable selector-max-specificity */
+div#headerNav ul.links li {
+  border-top: 1px solid @mid-grey;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#contentHead {
+  padding-bottom: 30px;
+}
+/* stylelint-enable selector-max-specificity */
 
 // openlibrary/templates/admin/index.html
 .canvas-graph {
diff --git a/static/css/page-book.less b/static/css/page-book.less
index 9b1a60840ea..9bbe844ba16 100644
--- a/static/css/page-book.less
+++ b/static/css/page-book.less
@@ -1,5 +1,5 @@
 /**
- * Stylesheet entry point for pages with body#book
+ * Stylesheet entry point for pages with body-book
  *
  * This applies to works and books pages
  * e.g.
diff --git a/static/css/page-edit.less b/static/css/page-edit.less
index 8b11edacd8d..3169ab73a4a 100644
--- a/static/css/page-edit.less
+++ b/static/css/page-edit.less
@@ -1,5 +1,5 @@
 /**
- * Stylesheet entry point for pages with body#edit
+ * Stylesheet entry point for pages with body-edit
 
  * Used in templates:
  * - openlibrary/templates/type/about/edit.html
@@ -24,122 +24,120 @@
 @import (less) "less/font-families.less";
 
 /* stylelint-disable selector-max-specificity */
-body#edit,
-body#edit div#content {
+body,
+div#content {
   background-color: @beige;
 }
 /* stylelint-enable selector-max-specificity */
 
-body#edit {
-  /* stylelint-disable selector-max-specificity */
-  div#content {
-    font-family: @lucida_sans_serif-1;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#editTools {
-    padding: 20px;
-    max-width: 300px;
+/* stylelint-disable selector-max-specificity */
+div#content {
+  font-family: @lucida_sans_serif-1;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#editTools {
+  padding: 20px;
+  max-width: 300px;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#revertLink {
+  position: absolute;
+  top: 60px;
+  right: 20px;
+  font-size: .75em;
+  font-family: @lucida_sans_serif-1;
+}
+/* stylelint-enable selector-max-specificity */
+.formElement {
+  font-family: @lucida_sans_serif-2;
+  color: @darker-grey;
+}
+.label {
+  padding: 10px 0 5px;
+  label {
+    font-size: 1.0em;
+    font-family: @lucida_sans_serif-5;
+    font-weight: 700;
   }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#revertLink {
-    position: absolute;
-    top: 60px;
-    right: 20px;
+  span {
     font-size: .75em;
-    font-family: @lucida_sans_serif-1;
-  }
-  /* stylelint-enable selector-max-specificity */
-  .formElement {
-    font-family: @lucida_sans_serif-2;
-    color: @darker-grey;
+    font-family: @lucida_sans_serif-5;
   }
-  .label {
-    padding: 10px 0 5px;
-    label {
-      font-size: 1.0em;
-      font-family: @lucida_sans_serif-5;
-      font-weight: 700;
-    }
-    span {
-      font-size: .75em;
-      font-family: @lucida_sans_serif-5;
-    }
-  }
-  textarea {
+}
+textarea {
+  font-family: @lucida_console_monospace;
+  font-size: .875em;
+  padding: 5px;
+}
+.formElement input[type=text],
+.formElement select {
+  font-size: 1em;
+  font-family: @lucida_sans_serif-4;
+  color: @dark-grey;
+  padding: 5px;
+}
+table.code {
+  border: 1px solid @grey-e7e7e7;
+  width: 100%;
+  margin-right: 10px;
+  margin-bottom: 40px;
+  td {
+    background-color: @white;
+    vertical-align: top;
     font-family: @lucida_console_monospace;
     font-size: .875em;
     padding: 5px;
   }
-  .formElement input[type=text],
-  .formElement select {
-    font-size: 1em;
-    font-family: @lucida_sans_serif-4;
-    color: @dark-grey;
-    padding: 5px;
-  }
-  table.code {
-    border: 1px solid @grey-e7e7e7;
-    width: 100%;
-    margin-right: 10px;
-    margin-bottom: 40px;
-    td {
-      background-color: @white;
-      vertical-align: top;
-      font-family: @lucida_console_monospace;
-      font-size: .875em;
-      padding: 5px;
-    }
+}
+/* stylelint-disable selector-max-specificity */
+div#databar {
+  padding: 10px;
+  margin: 20px 20px 0;
+  background-color: @light-yellow;
+  a {
+    font-size: .75em;
   }
-  /* stylelint-disable selector-max-specificity */
-  div#databar {
-    padding: 10px;
-    margin: 20px 20px 0;
-    background-color: @light-yellow;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+#editHead {
+  background: url(/images/logo_OL-sm.png) 20px 15px no-repeat;
+  padding: 25px 0 45px 140px;
+  white-space: nowrap;
+  clear: left;
+  h2 {
+    margin: 0 0 5px;
     a {
-      font-size: .75em;
-    }
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  #editHead {
-    background: url(/images/logo_OL-sm.png) 20px 15px no-repeat;
-    padding: 25px 0 45px 140px;
-    white-space: nowrap;
-    clear: left;
-    h2 {
-      margin: 0 0 5px;
-      a {
-        font-family: @lucida_sans_serif-4;
-        color: @red;
-        font-size: 14px;
-        font-weight: normal;
-        text-decoration: underline;
-      }
-    }
-    p {
-      color: @brown;
+      font-family: @lucida_sans_serif-4;
+      color: @red;
       font-size: 14px;
-      margin: 0;
+      font-weight: normal;
+      text-decoration: underline;
     }
   }
-  /* stylelint-enable selector-max-specificity */
-
-  .formElement.pagetype,
-  .formElement.pagetype select {
-    width: 300px;
+  p {
+    color: @brown;
+    font-size: 14px;
+    margin: 0;
   }
-  /* stylelint-disable selector-max-specificity */
-  div#revertNotice,
-  div#header,
-  footer,
-  div#bottom,
-  .siteSearch {
-    display: none;
-  }
-  /* stylelint-enable selector-max-specificity */
 }
+/* stylelint-enable selector-max-specificity */
+
+.formElement.pagetype,
+.formElement.pagetype select {
+  width: 300px;
+}
+/* stylelint-disable selector-max-specificity */
+div#revertNotice,
+div#header,
+footer,
+div#bottom,
+.siteSearch {
+  display: none;
+}
+/* stylelint-enable selector-max-specificity */
 // Import all common components
 @import (less) "legacy.less";
 
@@ -151,21 +149,19 @@ div.adminDelete {
 }
 
 @media all and ( min-width: @width-breakpoint-desktop ) {
-  body#edit {
-    .formElement.title {
-      width: 618px;
-      float: left;
-      input {
-        width: 580px;
-      }
-    }
-    textarea {
-      width: 100%;
-      height: 500px;
-    }
-    .formElement.pagetype,
-    .formElement.pagetype select {
-      float: left;
+  .formElement.title {
+    width: 618px;
+    float: left;
+    input {
+      width: 580px;
     }
   }
+  textarea {
+    width: 100%;
+    height: 500px;
+  }
+  .formElement.pagetype,
+  .formElement.pagetype select {
+    float: left;
+  }
 }
diff --git a/static/css/page-form.less b/static/css/page-form.less
index 48aca8a5322..6cf23d8e661 100644
--- a/static/css/page-form.less
+++ b/static/css/page-form.less
@@ -1,5 +1,5 @@
 /**
- * Stylesheet entry point for pages with body#form
+ * Stylesheet entry point for pages with body-form
  * See
  * - openlibrary/templates/covers/saved.html
  * - openlibrary/templates/covers/manage.html
@@ -11,101 +11,101 @@
 @import (less) "less/breakpoints.less";
 @import (less) "less/mixins.less";
 
-body#form {
+body {
   text-align: left;
   background-color: @white;
   overflow: hidden;
+}
 
-  /* stylelint-disable selector-max-specificity */
-  div#revertNotice,
-  div#revertLink,
-  footer,
-  #bottom {
-    display: none;
-  }
-  /* stylelint-enable selector-max-specificity */
-  .formButtons {
-    position: absolute;
-    height: 50px;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-  }
-  .column {
-    min-height: 90px;
-    margin: 10px;
-    background-image: url(/images/back_sortable.png);
-    background-repeat: no-repeat;
-  }
-  .trashCan {
-    position: absolute;
-    top: 20px;
-    right: 32px;
-    width: 32px;
-    height: 42px;
-    background-image: url(/images/back_sort-trash.png);
-    background-repeat: no-repeat;
-    background-position: 0 0;
-  }
-  .trashPosition {
-    position: relative;
-    height: 90px;
-    &:hover .trashCan {
-      background-position: -32px 0;
-    }
-  }
-  .trash {
-    height: 90px;
-    overflow: hidden;
-    background-color: @light-yellow;
-    margin: 0 10px;
-    border-radius: 8px;
-    border: 1px solid @dark-yellow;
+/* stylelint-disable selector-max-specificity */
+div#revertNotice,
+div#revertLink,
+footer,
+#bottom {
+  display: none;
+}
+/* stylelint-enable selector-max-specificity */
+.formButtons {
+  position: absolute;
+  height: 50px;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+.column {
+  min-height: 90px;
+  margin: 10px;
+  background-image: url(/images/back_sortable.png);
+  background-repeat: no-repeat;
+}
+.trashCan {
+  position: absolute;
+  top: 20px;
+  right: 32px;
+  width: 32px;
+  height: 42px;
+  background-image: url(/images/back_sort-trash.png);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+}
+.trashPosition {
+  position: relative;
+  height: 90px;
+  &:hover .trashCan {
+    background-position: -32px 0;
   }
-  .portlet {
-    margin: 7px 13px 13px 7px;
-    float: left;
+}
+.trash {
+  height: 90px;
+  overflow: hidden;
+  background-color: @light-yellow;
+  margin: 0 10px;
+  border-radius: 8px;
+  border: 1px solid @dark-yellow;
+}
+.portlet {
+  margin: 7px 13px 13px 7px;
+  float: left;
+  width: 70px;
+  height: 70px;
+  overflow: hidden;
+  border: 1px solid @lighter-grey;
+  border-radius: 6px;
+  cursor: move;
+  td {
     width: 70px;
     height: 70px;
-    overflow: hidden;
-    border: 1px solid @lighter-grey;
-    border-radius: 6px;
-    cursor: move;
-    td {
-      width: 70px;
-      height: 70px;
-      text-align: center;
-      vertical-align: middle;
-      cursor: move;
-    }
-    img {
-      cursor: move;
-    }
-  }
-  .portlet-content {
-    padding: .4em;
-  }
-  .imagePost {
-    float: left;
-    width: 300px;
     text-align: center;
+    vertical-align: middle;
+    cursor: move;
   }
-  .imageSaved {
-    float: left;
-    width: 300px;
-    font-size: .75em;
-    color: @grey;
-  }
-  .saved {
-    background: url(/images/icons/icon_saved.png) no-repeat;
-    font-size: 1.5em;
-    font-weight: 700;
-    color: @black;
-    padding: 6px 0 0 40px;
-    min-height: 30px;
-    margin: 25px 0 15px;
+  img {
+    cursor: move;
   }
 }
+.portlet-content {
+  padding: .4em;
+}
+.imagePost {
+  float: left;
+  width: 300px;
+  text-align: center;
+}
+.imageSaved {
+  float: left;
+  width: 300px;
+  font-size: .75em;
+  color: @grey;
+}
+.saved {
+  background: url(/images/icons/icon_saved.png) no-repeat;
+  font-size: 1.5em;
+  font-weight: 700;
+  color: @black;
+  padding: 6px 0 0 40px;
+  min-height: 30px;
+  margin: 25px 0 15px;
+}
 
 // Import all common components
 // TODO: Only formElement and a few common styles are actually needed
@@ -113,30 +113,30 @@ body#form {
 @import (less) "legacy.less";
 
 @media all and ( min-width: @width-breakpoint-desktop ) {
-  body#form {
+  body {
+    width: 600px;
+    min-height: 440px;
+  }
+  /* stylelint-disable selector-max-specificity */
+  #placement,
+  #position,
+  #content {
     width: 600px;
     min-height: 440px;
-    /* stylelint-disable selector-max-specificity */
-    #placement,
-    #position,
-    #content {
-      width: 600px;
-      min-height: 440px;
-    }
-    /* stylelint-enable selector-max-specificity */
-    .formButtons {
-      width: 600px;
-    }
-    .column {
-      width: 560px;
-    }
-    .trashPosition {
-      width: 580px;
-      float: left;
-    }
-    .trash {
-      width: 560px;
-      float: left;
-    }
+  }
+  /* stylelint-enable selector-max-specificity */
+  .formButtons {
+    width: 600px;
+  }
+  .column {
+    width: 560px;
+  }
+  .trashPosition {
+    width: 580px;
+    float: left;
+  }
+  .trash {
+    width: 560px;
+    float: left;
   }
 }
diff --git a/static/css/page-home.less b/static/css/page-home.less
index e94ae6902be..e7cffc2de2e 100644
--- a/static/css/page-home.less
+++ b/static/css/page-home.less
@@ -1,5 +1,5 @@
 /**
- * Stylesheet entry point for pages with body#plain
+ * Stylesheet entry point for pages with body-plain
  * See
  * - openlibrary/templates/borrow_admin.html
  * - openlibrary/templates/borrow.html
diff --git a/static/css/page-plain.less b/static/css/page-plain.less
index a1880afd8b4..93cc87df5e9 100644
--- a/static/css/page-plain.less
+++ b/static/css/page-plain.less
@@ -1,5 +1,5 @@
 /**
- * Stylesheet entry point for pages with body#plain
+ * Stylesheet entry point for pages with body-plain
  * See
  * - openlibrary/templates/borrow_admin.html
  * - openlibrary/templates/borrow.html
@@ -12,187 +12,185 @@
 @import (less) "less/mixins.less";
 @import (less) "less/font-families.less";
 
-body#plain {
-  /* stylelint-disable selector-max-specificity */
-  div#header,
-  footer,
-  div#bottom,
-  .siteSearch {
-    display: none;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  #contentBody,
-  #contentHead {
-    padding: 0 134px;
+/* stylelint-disable selector-max-specificity */
+div#header,
+footer,
+div#bottom,
+.siteSearch {
+  display: none;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+#contentBody,
+#contentHead {
+  padding: 0 134px;
+  margin: 0;
+}
+/* stylelint-enable selector-max-specificity */
+div.contentOnethird {
+  width: 210px;
+}
+div.contentSpacer {
+  width: 30px;
+  height: 15px;
+}
+div.nav {
+  margin: 50px 0;
+  font-size: 14px;
+}
+div.message {
+  padding: 25px 25px 25px 55px;
+  margin-bottom: 50px;
+  background: @light-yellow url(/images/icons/icon_lock-msg.png) no-repeat 15px 50%;
+  h2 {
+    font-weight: normal;
+    font-size: 18px;
+    color: @black;
     margin: 0;
+    padding: 0;
   }
-  /* stylelint-enable selector-max-specificity */
-  div.contentOnethird {
-    width: 210px;
-  }
-  div.contentSpacer {
-    width: 30px;
-    height: 15px;
-  }
-  div.nav {
-    margin: 50px 0;
-    font-size: 14px;
-  }
-  div.message {
-    padding: 25px 25px 25px 55px;
-    margin-bottom: 50px;
-    background: @light-yellow url(/images/icons/icon_lock-msg.png) no-repeat 15px 50%;
-    h2 {
-      font-weight: normal;
-      font-size: 18px;
-      color: @black;
-      margin: 0;
-      padding: 0;
-    }
-    p {
-      font-size: .75em;
-      padding: 0;
-      margin: 0;
-    }
-  }
-  ul.link {
-    margin-bottom: 50px;
-    li {
-      font-size: 1.125em;
-    }
-  }
-  /* stylelint-disable selector-max-specificity */
-  #faq {
-    h4 {
-      font-size: .75em;
-      color: @black;
-      text-transform: uppercase;
-      margin-bottom: 0;
-    }
-    p {
-      font-size: .75em;
-      color: @dark-grey;
-    }
-  }
-  /* stylelint-enable selector-max-specificity */
-  p.help {
-    font-size: 14px;
-  }
-  div.alert {
-    background: @light-yellow url(/images/icons/icon_alert-gold.png) no-repeat 15px 50% !important;
-    margin-bottom: 10px;
-    margin-top: 20px;
-  }
-  div.stop {
-    background: @light-yellow url(/images/icons/icon_stop.png) no-repeat 15px 50% !important;
-    margin-bottom: 45px;
-    margin-top: 20px;
-  }
-  div.info {
-    background: @light-yellow url(/images/icons/icon_info.png) no-repeat 17px 50% !important;
-    margin-bottom: 45px;
-    margin-top: 20px;
+  p {
+    font-size: .75em;
+    padding: 0;
+    margin: 0;
   }
-  h1 {
-    font-size: 1.5em;
-    margin: 0 0 15px;
+}
+ul.link {
+  margin-bottom: 50px;
+  li {
+    font-size: 1.125em;
   }
-  div.navBorrow {
-    margin: 50px 0 10px;
+}
+/* stylelint-disable selector-max-specificity */
+#faq {
+  h4 {
     font-size: .75em;
+    color: @black;
+    text-transform: uppercase;
+    margin-bottom: 0;
   }
-  .panel {
-    background-color: @white;
-    border: 1px solid @beige-two;
-    padding: 30px 20px;
-    margin-bottom: 20px;
-  }
-  .formElement {
-    float: none;
+  p {
+    font-size: .75em;
+    color: @dark-grey;
   }
-  .panel h3 {
-    font-size: 1.875em;
+}
+/* stylelint-enable selector-max-specificity */
+p.help {
+  font-size: 14px;
+}
+div.alert {
+  background: @light-yellow url(/images/icons/icon_alert-gold.png) no-repeat 15px 50% !important;
+  margin-bottom: 10px;
+  margin-top: 20px;
+}
+div.stop {
+  background: @light-yellow url(/images/icons/icon_stop.png) no-repeat 15px 50% !important;
+  margin-bottom: 45px;
+  margin-top: 20px;
+}
+div.info {
+  background: @light-yellow url(/images/icons/icon_info.png) no-repeat 17px 50% !important;
+  margin-bottom: 45px;
+  margin-top: 20px;
+}
+h1 {
+  font-size: 1.5em;
+  margin: 0 0 15px;
+}
+div.navBorrow {
+  margin: 50px 0 10px;
+  font-size: .75em;
+}
+.panel {
+  background-color: @white;
+  border: 1px solid @beige-two;
+  padding: 30px 20px;
+  margin-bottom: 20px;
+}
+.formElement {
+  float: none;
+}
+.panel h3 {
+  font-size: 1.875em;
+}
+/* stylelint-disable selector-max-specificity */
+#borrowThis {
+  margin-bottom: 20px;
+}
+/* stylelint-enable selector-max-specificity */
+.borrow {
+  span.book {
+    font-size: 1em;
+    font-weight: 700;
+  }
+  span.author {
+    font-size: .875em;
+    color: @dark-grey;
+  }
+  span.publisher,
+  span.contributor {
+    color: @dark-grey;
+    font-size: .875em;
+  }
+  div.date {
+    font-size: .75em;
+    color: @grey;
   }
-  /* stylelint-disable selector-max-specificity */
-  #borrowThis {
-    margin-bottom: 20px;
+  span.expires {
+    font-size: 1em;
   }
-  /* stylelint-enable selector-max-specificity */
-  .borrow {
-    span.book {
-      font-size: 1em;
-      font-weight: 700;
-    }
-    span.author {
-      font-size: .875em;
-      color: @dark-grey;
-    }
-    span.publisher,
-    span.contributor {
-      color: @dark-grey;
-      font-size: .875em;
-    }
-    div.date {
-      font-size: .75em;
-      color: @grey;
-    }
-    span.expires {
-      font-size: 1em;
-    }
-    table {
-      border-bottom: none;
-    }
+  table {
+    border-bottom: none;
   }
-  // Specific to borrowTable component
-  /* stylelint-disable selector-max-specificity */
-  #borrowTable {
-    margin: 60px 0 25px;
+}
+// Specific to borrowTable component
+/* stylelint-disable selector-max-specificity */
+#borrowTable {
+  margin: 60px 0 25px;
 
-    p {
-      font-size: .875em;
-      margin: 0;
-      padding: 0;
-    }
+  p {
+    font-size: .875em;
+    margin: 0;
+    padding: 0;
+  }
 
-    table {
-      width: 690px;
-      margin-bottom: 20px;
+  table {
+    width: 690px;
+    margin-bottom: 20px;
 
-      th {
-        border-bottom: 1px solid @beige-three;
-        vertical-align: bottom;
-        padding-bottom: 10px;
+    th {
+      border-bottom: 1px solid @beige-three;
+      vertical-align: bottom;
+      padding-bottom: 10px;
 
-        &.expires {
-          font-family: @lucida_sans_serif-1;
-          color: @brown;
-          font-weight: 600;
-          font-size: .6875em;
-          text-transform: uppercase;
-          white-space: nowrap;
-        }
+      &.expires {
+        font-family: @lucida_sans_serif-1;
+        color: @brown;
+        font-weight: 600;
+        font-size: .6875em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
 
-        &.titles {
-          font-family: @lucida_sans_serif-1;
-          color: @teal;
-          font-weight: 600;
-          font-size: 1.125em;
-        }
+      &.titles {
+        font-family: @lucida_sans_serif-1;
+        color: @teal;
+        font-weight: 600;
+        font-size: 1.125em;
       }
     }
   }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#listsWork {
-    p {
-      font-size: .75em;
-      padding-left: 0;
-      margin-bottom: 5px !important;
-    }
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#listsWork {
+  p {
+    font-size: .75em;
+    padding-left: 0;
+    margin-bottom: 5px !important;
   }
-  /* stylelint-enable selector-max-specificity */
 }
+  /* stylelint-enable selector-max-specificity */
 
 // Import all common components
 @import (less) "legacy.less";
diff --git a/static/css/page-user.less b/static/css/page-user.less
index 75e60c51c8f..b1641fa7f83 100644
--- a/static/css/page-user.less
+++ b/static/css/page-user.less
@@ -1,5 +1,5 @@
 /**
- * Stylesheet entry point for pages with body#user
+ * Stylesheet entry point for pages with body-user
  * See:
  * - openlibrary/templates/history_framepage.html
  * - openlibrary/templates/history_framenav.html
@@ -40,59 +40,59 @@
 @import (less) "components/flash-messages.less";
 @import (less) "less/z-index.less";
 
-body#user {
+body {
   background-color: @beige;
-  /* stylelint-disable selector-max-specificity */
-  div#headerNav {
-    background-color: @beige;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#headerNav ul.links li {
-    border-top: 1px solid @beige-two;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  body#user div#headerLogo {
-    background-color: @beige;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#background {
-    width: 100%;
-    background-color: @beige;
-  }
-  /* stylelint-enable selector-max-specificity */
-  div.message {
-    float: left;
-    clear: both;
-    width: 100%;
-    margin-bottom: 15px;
-    background: @light-yellow;
-    p {
-      font-family: @lucida_sans_serif-7;
-    }
-  }
-  div.siteSearch {
-    -webkit-box-ordinal-group: 4;
-    -ms-flex-order: 3;
-    order: 3;
-  }
-  div.siteSearch.darker {
-    background-color: @grey-f3f3f3;
-    padding-right: 22px;
-  }
-  /* stylelint-disable selector-max-specificity */
-  div#revertLink,
-  div#editHistory {
-    display: none;
-  }
-  /* stylelint-enable selector-max-specificity */
-  /* stylelint-disable selector-max-specificity */
-  div#headerPlace {
-    background-color: @beige;
+}
+/* stylelint-disable selector-max-specificity */
+div#headerNav {
+  background-color: @beige;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#headerNav ul.links li {
+  border-top: 1px solid @beige-two;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#headerLogo {
+  background-color: @beige;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#background {
+  width: 100%;
+  background-color: @beige;
+}
+/* stylelint-enable selector-max-specificity */
+div.message {
+  float: left;
+  clear: both;
+  width: 100%;
+  margin-bottom: 15px;
+  background: @light-yellow;
+  p {
+    font-family: @lucida_sans_serif-7;
   }
 }
+div.siteSearch {
+  -webkit-box-ordinal-group: 4;
+  -ms-flex-order: 3;
+  order: 3;
+}
+div.siteSearch.darker {
+  background-color: @grey-f3f3f3;
+  padding-right: 22px;
+}
+/* stylelint-disable selector-max-specificity */
+div#revertLink,
+div#editHistory {
+  display: none;
+}
+/* stylelint-enable selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
+div#headerPlace {
+  background-color: @beige;
+}
 
 div#subjectsPage{
   columns: 2;

From 748596d7942c086b9955ac9c00dc7389c5c3d4ed Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Tue, 26 Jan 2021 11:00:57 +0530
Subject: [PATCH 4/7] minor fix

---
 static/css/page-plain.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/css/page-plain.less b/static/css/page-plain.less
index 93cc87df5e9..071cd133e32 100644
--- a/static/css/page-plain.less
+++ b/static/css/page-plain.less
@@ -190,7 +190,7 @@ div#listsWork {
     margin-bottom: 5px !important;
   }
 }
-  /* stylelint-enable selector-max-specificity */
+/* stylelint-enable selector-max-specificity */
 
 // Import all common components
 @import (less) "legacy.less";

From c1ffabf92f165cd6c9e10bf9e468347a7fc498e1 Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Tue, 26 Jan 2021 11:51:34 +0530
Subject: [PATCH 5/7] Removed Internal CSS from borrow_admin.html

---
 openlibrary/templates/borrow_admin.html      | 78 --------------------
 static/css/legacy-borrowTable-adminUser.less | 52 ++++++++++++-
 2 files changed, 51 insertions(+), 79 deletions(-)

diff --git a/openlibrary/templates/borrow_admin.html b/openlibrary/templates/borrow_admin.html
index 1d74f43883b..d34b569699f 100644
--- a/openlibrary/templates/borrow_admin.html
+++ b/openlibrary/templates/borrow_admin.html
@@ -29,12 +29,6 @@
         $else:
             <em>Unknown</em>
 
-<style type="text/css">
-ul.inner {
-    margin-bottom: 0px !important;
-}
-</style>
-
 <div id="contentHead">
     <div class="navBorrow">
         <a href="/" title="Return to home page"><img src="/images/logo_OL-sm.png" width="90" height="71" alt="Open Library logo" class="right"/></a>
@@ -341,75 +335,3 @@ <h4>Waiting List JSON</h4>
         <pre>$:json_encode([doc.dict() for doc in waitinglist], indent=True)</pre>
     </div>
 </div>
-
-
-<style type="text/css">
-#borrowTable {margin: 30px 0 25px;}
-#borrowTable table {width:100%;font-family:"Lucida Grande","Arial",sans-serif;}
-#borrowTable table th {
-    border-bottom: 1px solid #c7c3b3;
-    vertical-align: bottom;
-    padding-bottom:10px;
-    font-family:"News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
-    color:#615132;
-    font-weight:600;
-    font-size:0.6875em;
-    text-transform: uppercase;
-    white-space: nowrap;
-    text-align: center;
-}
-
-th.xtitles {
-    text-align: left !important;
-}
-
-tr.row-available .status-value {
-    color: darkgreen;
-}
-
-tr.row-available {
-    background: #eeecad !important;
-}
-
-
-td.status, th.status {
-    padding: 15px;
-    text-align: center;
-}
-
-td.serial {
-    padding: 15px 0px;
-    text-align: right;
-    width: 20px;
-}
-
-.current-loan tbody tr {
-     background: #bce2a5 !important;
-}
-
-.checkedout-elsewhere {
-    padding: 15px;
-    background: #e2bca5 !important;
-    border: 1px solid #d2ac95;
-}
-
-.available {
-    padding: 15px;
-    background: #bce2a5 !important;
-    border: 1px solid #acd295;
-}
-
-.section {
-    margin: 25px 0px;
-}
-
-.section h3 {
-    margin: 1em 0em 0.5em 0em;
-}
-
-div#alert0 {
-    background-color: #eeecad !important;
-    border: 1px solid #d2ac95;
-}
-
-</style>
diff --git a/static/css/legacy-borrowTable-adminUser.less b/static/css/legacy-borrowTable-adminUser.less
index e5452f4446e..d53f890b0cb 100644
--- a/static/css/legacy-borrowTable-adminUser.less
+++ b/static/css/legacy-borrowTable-adminUser.less
@@ -28,4 +28,54 @@
     }
   }
 }
-/* stylelint-enable selector-max-specificity */
+tr {
+  &.row-available {
+    background: #eeecad !important;
+    .status-value {
+      color: darkgreen;
+    }
+  }
+}
+
+td.status, th.status {
+    padding: 15px;
+    text-align: center;
+}
+
+td.serial {
+    padding: 15px 0px;
+    text-align: right;
+    width: 20px;
+}
+
+.current-loan tbody tr {
+     background: #bce2a5 !important;
+}
+
+.checkedout-elsewhere {
+    padding: 15px;
+    background: #e2bca5 !important;
+    border: 1px solid #d2ac95;
+}
+
+.available {
+    padding: 15px;
+    background: #bce2a5 !important;
+    border: 1px solid #acd295;
+}
+
+.section {
+    margin: 25px 0px;
+}
+
+.section h3 {
+    margin: 1em 0em 0.5em 0em;
+}
+
+div#alert0 {
+    background-color: #eeecad !important;
+    border: 1px solid #d2ac95;
+}
+ul.inner {
+  margin-bottom: 0px !important;
+}
\ No newline at end of file

From a434783591e20a17b0e41c6fe0b329ae94a6d302 Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Wed, 27 Jan 2021 08:50:21 +0530
Subject: [PATCH 6/7] lint fix

---
 static/css/legacy-borrowTable-adminUser.less | 40 ++++++++++----------
 static/css/less/colors.less                  |  6 +++
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/static/css/legacy-borrowTable-adminUser.less b/static/css/legacy-borrowTable-adminUser.less
index d53f890b0cb..91a04b91fdc 100644
--- a/static/css/legacy-borrowTable-adminUser.less
+++ b/static/css/legacy-borrowTable-adminUser.less
@@ -30,52 +30,52 @@
 }
 tr {
   &.row-available {
-    background: #eeecad !important;
+    background: @admin-row-background !important;
     .status-value {
-      color: darkgreen;
+      color: @dark-green-two;
     }
   }
 }
 
 td.status, th.status {
-    padding: 15px;
-    text-align: center;
+  padding: 15px;
+  text-align: center;
 }
 
 td.serial {
-    padding: 15px 0px;
-    text-align: right;
-    width: 20px;
+  padding: 15px 0;
+  text-align: right;
+  width: 20px;
 }
 
 .current-loan tbody tr {
-     background: #bce2a5 !important;
+  background: @soft-green !important;
 }
 
 .checkedout-elsewhere {
-    padding: 15px;
-    background: #e2bca5 !important;
-    border: 1px solid #d2ac95;
+  padding: 15px;
+  background: @orange-four !important;
+  border: 1px solid @orange-five;
 }
 
 .available {
-    padding: 15px;
-    background: #bce2a5 !important;
-    border: 1px solid #acd295;
+  padding: 15px;
+  background: @soft-green !important;
+  border: 1px solid @soft-green-two;
 }
 
 .section {
-    margin: 25px 0px;
+  margin: 25px 0;
 }
 
 .section h3 {
-    margin: 1em 0em 0.5em 0em;
+  margin: 1em 0 .5em;
 }
 
 div#alert0 {
-    background-color: #eeecad !important;
-    border: 1px solid #d2ac95;
+  background-color: @admin-row-background !important;
+  border: 1px solid @orange-five;
 }
 ul.inner {
-  margin-bottom: 0px !important;
-}
\ No newline at end of file
+  margin-bottom: 0 !important;
+}
diff --git a/static/css/less/colors.less b/static/css/less/colors.less
index 52dda98486d..082f0f41630 100644
--- a/static/css/less/colors.less
+++ b/static/css/less/colors.less
@@ -29,6 +29,9 @@
 @mid-baby-green: hsl(120, 100%, 88%);
 @baby-green: hsl(120, 100%, 93%);
 @dark-green: hsl(113, 38%, 29%);
+@dark-green-two: hsl(120, 100%, 20%);
+@soft-green: hsl(97, 51%, 77%);
+@soft-green-two: hsl(97, 40%, 70%);
 @olive: hsl(77, 45%, 38%);
 @light-olive: hsl(77, 28%, 53%);
 @light-olive-2: hsl(78, 34%, 63%);
@@ -38,6 +41,8 @@
 @orange: hsl(32, 100%, 61%);
 @orange-two: hsl(32, 80%, 50%);
 @orange-three: hsl(32, 100%, 78%);
+@orange-four: hsl(23, 51%, 77%);
+@orange-five: hsl(23, 100%, 50%);
 
 // reds
 @red: hsl(8, 78%, 53%);
@@ -87,6 +92,7 @@
 @gray-d1cfd0: hsl(330, 2%, 82%);
 
 // outliers
+@admin-row-background: hsl(58, 66%, 81%);
 @admin-table-border: hsl(48, 26%, 73%);
 @heart-color: hsl(358, 100%, 74%);
 @blue: hsl(240, 100%, 50%);

From ba0e4ecc84868cdf28ec5e9de9c27479111f5661 Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Fri, 29 Jan 2021 08:37:43 +0530
Subject: [PATCH 7/7] Minor css changes

---
 static/css/legacy-borrowTable-adminUser.less | 86 ++++++++++----------
 static/css/less/colors.less                  |  1 -
 2 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/static/css/legacy-borrowTable-adminUser.less b/static/css/legacy-borrowTable-adminUser.less
index 91a04b91fdc..ffd87ca98a2 100644
--- a/static/css/legacy-borrowTable-adminUser.less
+++ b/static/css/legacy-borrowTable-adminUser.less
@@ -25,57 +25,61 @@
       &.titles {
         text-align: left;
       }
+      &.xtitles {
+        text-align: left !important;
+      }
     }
   }
-}
-tr {
-  &.row-available {
-    background: @admin-row-background !important;
-    .status-value {
-      color: @dark-green-two;
+
+  tr {
+    &.row-available {
+      background: @admin-row-background !important;
+      .status-value {
+        color: @dark-green;
+      }
     }
   }
-}
 
-td.status, th.status {
-  padding: 15px;
-  text-align: center;
-}
+  td.status, th.status {
+    padding: 15px;
+    text-align: center;
+  }
 
-td.serial {
-  padding: 15px 0;
-  text-align: right;
-  width: 20px;
-}
+  td.serial {
+    padding: 15px 0;
+    text-align: right;
+    width: 20px;
+  }
 
-.current-loan tbody tr {
-  background: @soft-green !important;
-}
+  .current-loan tbody tr {
+    background: @soft-green !important;
+  }
 
-.checkedout-elsewhere {
-  padding: 15px;
-  background: @orange-four !important;
-  border: 1px solid @orange-five;
-}
+  .checkedout-elsewhere {
+    padding: 15px;
+    background: @orange-four !important;
+    border: 1px solid @orange-five;
+  }
 
-.available {
-  padding: 15px;
-  background: @soft-green !important;
-  border: 1px solid @soft-green-two;
-}
+  .available {
+    padding: 15px;
+    background: @soft-green !important;
+    border: 1px solid @soft-green-two;
+  }
 
-.section {
-  margin: 25px 0;
-}
+  .section {
+    margin: 25px 0;
+  }
 
-.section h3 {
-  margin: 1em 0 .5em;
-}
+  .section h3 {
+    margin: 1em 0 .5em;
+  }
 
-div#alert0 {
-  background-color: @admin-row-background !important;
-  border: 1px solid @orange-five;
-}
-ul.inner {
-  margin-bottom: 0 !important;
+  div#alert0 {
+    background-color: @admin-row-background !important;
+    border: 1px solid @orange-five;
+  }
+  ul.inner {
+    margin-bottom: 0 !important;
+  }
 }
diff --git a/static/css/less/colors.less b/static/css/less/colors.less
index 082f0f41630..d26297096cc 100644
--- a/static/css/less/colors.less
+++ b/static/css/less/colors.less
@@ -29,7 +29,6 @@
 @mid-baby-green: hsl(120, 100%, 88%);
 @baby-green: hsl(120, 100%, 93%);
 @dark-green: hsl(113, 38%, 29%);
-@dark-green-two: hsl(120, 100%, 20%);
 @soft-green: hsl(97, 51%, 77%);
 @soft-green-two: hsl(97, 40%, 70%);
 @olive: hsl(77, 45%, 38%);
