Merge pull request #2942 from overleaf/jel-css-is-overleaf

Start removing is-overleaf from CSS

GitOrigin-RevId: fa37bedd857fc492f8d2e1df1758e2e5f924f000

services/web/app/views/project/editor/pdf.pug

@@ -113,7 +113,6 @@ div.full-size.pdf(ng-controller="PdfController")
 				tooltip-append-to-body="true"
 			)
 				i.fa.fa-expand
-				i.full-screen
 			a(
 				href,
 				ng-click="switchToSideBySideLayout('editor')"
@@ -123,8 +122,6 @@ div.full-size.pdf(ng-controller="PdfController")
 				tooltip-append-to-body="true"
 			)
 				i.fa.fa-compress
-				i.split-screen
-				i.split-screen
 	// end of toolbar
 
 	// logs view

services/web/frontend/stylesheets/app/base.less

@@ -9,7 +9,7 @@
   }
 }
 
-.system-message .close when (@is-overleaf = true) {
+.system-message .close {
   color: #fff;
   opacity: 1;
   text-shadow: none;

services/web/frontend/stylesheets/app/editor.less

@@ -29,7 +29,7 @@
   }
 }
 
-.editor-menu-icon when (@is-overleaf = true) {
+.editor-menu-icon {
   &.fa {
     width: 1em;
     background: @editor-header-logo-background;
@@ -350,30 +350,7 @@ CodeMirror
   height: 100%;
 }
 
-.ui-layout-resizer when (@is-overleaf = false) {
-  width: 6px;
-  background-color: @editor-resizer-bg-color;
-  border-left: 1px solid @editor-border-color;
-  border-right: 1px solid @editor-border-color;
-  .ui-layout-toggler {
-    color: #999;
-    font-family: FontAwesome;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-size: 16px !important;
-    line-height: 50px;
-    background-color: @editor-toggler-bg-color;
-    &:hover {
-      background-color: @editor-toggler-hover-bg-color;
-      color: #333;
-    }
-  }
-}
-
-.ui-layout-resizer when (@is-overleaf = true) {
+.ui-layout-resizer {
   width: @ui-resizer-size !important;
   background-color: @editor-resizer-bg-color;
   &.ui-layout-resizer-closed {
@@ -401,28 +378,11 @@ CodeMirror
   }
 }
 
-.ui-layout-resizer-west.ui-layout-resizer-open,
-.ui-layout-resizer-east.ui-layout-resizer-closed {
-  .ui-layout-toggler when (@is-overleaf = false) {
-    &:before {
-      content: '\f104';
-    }
-  }
-}
-.ui-layout-resizer-east.ui-layout-resizer-open,
-.ui-layout-resizer-west.ui-layout-resizer-closed {
-  .ui-layout-toggler when (@is-overleaf = false) {
-    &:before {
-      content: '\f105';
-    }
-  }
-}
-
-.ui-layout-toggler when (@is-overleaf = true) {
+.ui-layout-toggler {
   display: none !important;
 }
 
-.custom-toggler when (@is-overleaf = true) {
+.custom-toggler {
   position: absolute;
   display: flex;
   align-items: center;

services/web/frontend/stylesheets/app/editor/chat.less

@@ -41,10 +41,6 @@
         margin-bottom: @line-height-computed / 2;
         text-align: right;
       }
-      .date when (@is-overleaf = false) {
-        border-bottom: 1px solid @gray-lightest;
-        text-align: center;
-      }
       .message-wrapper {
         .name {
           font-size: 12px;
@@ -137,12 +133,3 @@
 .break-word {
   word-break: break-all;
 }
-
-.editor-dark when (@is-overleaf = false) {
-  .chat {
-    .new-message {
-      background-color: lighten(@editor-dark-background-color, 10%);
-      border-color: @editor-dark-toolbar-border-color;
-    }
-  }
-}

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -37,11 +37,6 @@
     margin: (@line-height-computed / 2);
   }
 
-  ul.file-tree-list when (@is-overleaf = false) {
-    font-size: 0.8rem;
-    padding: (@line-height-computed / 4) 0;
-  }
-
   &-history {
     .entity-name {
       padding-left: 6px;
@@ -59,16 +54,13 @@
     }
   }
 
-  li .entity-name.droppable-hover when (@is-overleaf = true) {
+  li .entity-name.droppable-hover {
     font-weight: bold;
     background-color: @file-tree-item-hover-bg;
     .fake-full-width-bg(@file-tree-item-hover-bg);
   }
-  li .entity-name.droppable-hover when (@is-overleaf-light = true) {
-    // color: @file-tree-item-selected-color;
-  }
 
-  ul.droppable-hover li div.entity-name:hover when (@is-overleaf = true) {
+  ul.droppable-hover li div.entity-name:hover {
     background-color: transparent;
     .fake-full-width-bg(transparent);
     &.droppable-hover {
@@ -105,7 +97,7 @@
         &:hover {
           background-color: @file-tree-item-hover-bg;
         }
-        &:hover when (@is-overleaf = true) {
+        &:hover {
           // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
           // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
           // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
@@ -115,21 +107,15 @@
         input {
           line-height: 1.6;
         }
-        &.droppable-hover when (@is-overleaf = false) {
-          background-color: fade(@file-tree-droppable-bg-color, 60%);
-        }
       }
 
       i.fa {
         color: @file-tree-item-icon-color;
         font-size: 14px;
         &.linked-file-highlight {
-          &when (@is-overleaf = true) {
+          & {
             color: white;
           }
-          &when (@is-overleaf = false) {
-            color: @blue;
-          }
           position: relative;
           top: 4px;
           left: -8px;
@@ -151,13 +137,7 @@
       }
 
       &.multi-selected {
-        > .entity > .entity-name when (@is-overleaf = false) {
-          background-color: @file-tree-multiselect-bg;
-          &:hover {
-            background-color: @file-tree-multiselect-hover-bg;
-          }
-        }
-        > .entity when (@is-overleaf = true) {
+        > .entity {
           > .entity-name {
             > div > i.fa,
             > i.fa,
@@ -209,21 +189,7 @@
 
   &:not(.multi-selected) {
     ul.file-tree-list li.selected {
-      > .entity > .entity-name when (@is-overleaf = false) {
-        color: @link-color;
-        border-right: 4px solid @link-color;
-        font-weight: bold;
-        padding-right: 32px;
-        i.fa-folder-open,
-        i.fa {
-          color: @link-color;
-        }
-        .entity-menu-toggle {
-          display: inline;
-        }
-      }
-
-      > .entity when (@is-overleaf = true) {
+      > .entity {
         > .entity-name {
           color: @file-tree-item-selected-color;
           > div > i.fa,
@@ -247,11 +213,7 @@
     }
   }
 
-  ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
-    background-color: fade(@file-tree-droppable-bg-color, 60%);
-  }
-
-  .ui-draggable-dragging when (@is-overleaf = true) {
+  .ui-draggable-dragging {
     background-color: fade(@file-tree-item-selected-bg, 60%);
     color: @file-tree-item-selected-color;
     width: 75%;
@@ -259,41 +221,6 @@
   }
 }
 
-// TODO check if the OL Beta theme is OK with darker themes.
-.editor-dark when (@is-overleaf = false) {
-  aside#file-tree {
-    // background-color: lighten(@editor-dark-background-color, 10%);
-
-    ul.file-tree-list {
-      .dropdown-toggle {
-        color: @editor-dark-highlight-color;
-      }
-
-      li {
-        .entity-name {
-          color: #aaaaaa;
-          &:hover {
-            background-color: black;
-          }
-        }
-        &.selected {
-          > .entity > .entity-name {
-            color: @editor-dark-highlight-color;
-            border-color: @editor-dark-highlight-color;
-            i.fa-folder-open,
-            i.fa-folder,
-            i.fa-file,
-            i.fa-image,
-            i.fa-file-pdf-o {
-              color: @editor-dark-highlight-color;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 .modal-new-file {
   padding: 0;
   table {

services/web/frontend/stylesheets/app/editor/history-v2.less

@@ -26,7 +26,7 @@
   padding: 0 10px;
 }
 
-.history-toolbar when (@is-overleaf = false) or (@is-overleaf-light) {
+.history-toolbar when (@is-overleaf-light) {
   border-bottom: @toolbar-border-bottom;
 }
 
@@ -321,10 +321,6 @@
   }
 }
 
-.history-file-tree-inner when (@is-overleaf = false) {
-  font-size: 0.8rem;
-}
-
 .history-file-entity-wrapper {
   color: #fff;
   margin-left: (@line-height-computed / 2);
@@ -344,7 +340,7 @@
     outline: none;
     text-decoration: none;
   }
-  &:hover when (@is-overleaf = true) {
+  &:hover {
     .fake-full-width-bg(@file-tree-item-hover-bg);
   }
 }
@@ -406,14 +402,3 @@
 .history-file-entity-name-removed {
   text-decoration: line-through;
 }
-
-.history-file-entity-link-selected when (@is-overleaf = false) {
-  color: @brand-primary;
-  &:hover,
-  &:focus {
-    color: @brand-primary;
-  }
-  .history-file-entity-icon {
-    color: @brand-primary;
-  }
-}

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -8,7 +8,7 @@
   }
 }
 
-.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
+.pdf .toolbar.toolbar-pdf {
   .toolbar-small-mixin;
   .toolbar-alt-mixin;
   padding-right: 5px;
@@ -29,23 +29,10 @@
   }
 }
 
-.pdf
-  .toolbar.toolbar-pdf
-  when
-  (@is-overleaf = true)
-  and
-  (@is-overleaf-light = false) {
+.pdf .toolbar.toolbar-pdf when (@is-overleaf-light = false) {
   border-bottom: 0;
 }
 
-.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
-  .toolbar-tall-mixin;
-  padding: 0 (@line-height-computed / 2);
-  .auto-compile-status {
-    display: none;
-  }
-}
-
 .pdf {
   background-color: @pdf-bg;
 }
@@ -71,7 +58,7 @@
   }
 }
 
-.btn-recompile-group when (@is-overleaf = true) {
+.btn-recompile-group {
   align-self: stretch;
   margin-right: 6px;
   .btn-recompile {
@@ -90,24 +77,6 @@
   }
 }
 
-.btn-recompile-group when (@is-overleaf = false) {
-  margin-right: (@line-height-computed / 2);
-  .btn-recompile {
-    .btn-info;
-  }
-}
-
-.btn-split-screen when (@is-overleaf = false) {
-  .fa {
-    display: none;
-  }
-}
-.btn-split-screen when (@is-overleaf = true) {
-  .fa {
-    display: none;
-  }
-}
-
 .pdf-viewer {
   iframe {
     width: 100%;
@@ -177,48 +146,6 @@
   }
 }
 
-.pdf .toolbar {
-  .toolbar-right {
-    a {
-      &:hover {
-        i when (@is-overleaf = false) {
-          box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-          border-color: @gray-dark;
-        }
-      }
-      i when (@is-overleaf = false) {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        border: 1px solid @gray-light;
-      }
-
-      i.full-screen {
-        border-top-width: 3px;
-        border-radius: 2px;
-      }
-
-      i.full-screen when (@is-overleaf = true) {
-        display: none;
-      }
-      i.split-screen {
-        width: 7px;
-        border-top-width: 3px;
-        border-radius: 2px;
-        margin-left: 2px;
-      }
-
-      i.split-screen when (@is-overleaf = true) {
-        display: none;
-      }
-
-      i.fa when (@is-overleaf = false) {
-        display: none;
-      }
-    }
-  }
-}
-
 .pdf-logs {
   overflow: auto;
   .alert {
@@ -285,18 +212,26 @@
 }
 
 .synctex-controls {
+  margin-right: -8px;
   position: absolute;
   z-index: @synctex-controls-z-index;
   padding: @synctex-controls-padding;
   top: 68px;
 }
 
-.synctex-controls when (@is-overleaf = true) {
-  margin-right: -8px;
-}
 .synctex-control {
-  display: block;
-  margin-bottom: 3px;
+  @ol-synctex-control-size: 24px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  font-size: 1em;
+  margin-bottom: @ol-synctex-control-size / 2;
+  width: @ol-synctex-control-size;
+  height: @ol-synctex-control-size;
+  border-radius: @ol-synctex-control-size / 2;
+  padding: 0 0 2px;
+  background-color: fade(@btn-default-bg, 80%);
+  transition: background 0.15s ease;
 
   > .synctex-control-icon {
     display: inline-block;
@@ -308,52 +243,19 @@
   }
 }
 
-.synctex-control when (@is-overleaf = true) {
-  @ol-synctex-control-size: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1em;
-  width: @ol-synctex-control-size;
-  height: @ol-synctex-control-size;
-  border-radius: @ol-synctex-control-size / 2;
-  padding: 0 0 2px;
-  background-color: fade(@btn-default-bg, 80%);
-  transition: background 0.15s ease;
-  margin-bottom: @ol-synctex-control-size / 2;
-}
-
-.synctex-control when (@is-overleaf = false) {
-  line-height: 1.3;
-  padding: 0 2px;
-}
-
-.synctex-control-goto-pdf > .synctex-control-icon when (@is-overleaf = true) {
+.synctex-control-goto-pdf > .synctex-control-icon {
   text-indent: 1px; // "Optical" adjustment.
   &::before {
     content: '\f061';
   }
 }
-.synctex-control-goto-code > .synctex-control-icon when (@is-overleaf = true) {
+.synctex-control-goto-code > .synctex-control-icon {
   text-indent: -1px; // "Optical" adjustment.
   &::before {
     content: '\f060';
   }
 }
 
-.synctex-control-goto-pdf
-  > .synctex-control-icon::before
-  when
-  (@is-overleaf = false) {
-  content: '\f178';
-}
-.synctex-control-goto-code
-  > .synctex-control-icon::before
-  when
-  (@is-overleaf = false) {
-  content: '\f177';
-}
-
 .editor-dark {
   .pdf-logs {
     background-color: lighten(@editor-dark-background-color, 10%);

services/web/frontend/stylesheets/app/editor/review-panel.less

@@ -972,30 +972,7 @@
   }
 }
 
-.review-icon when (@is-overleaf = false) {
-  display: inline-block;
-  background: url('/img/review-icon-sprite.png') top/30px no-repeat;
-  width: 30px;
-
-  &::before {
-    content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
-  }
-
-  .toolbar .btn-full-height:hover & {
-    background-position-y: -30px;
-  }
-
-  .toolbar .btn-full-height.active &,
-  .toolbar .btn-full-height:active & {
-    background-position-y: -60px;
-  }
-
-  @media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-    background-image: url('/img/review-icon-sprite@2x.png');
-  }
-}
-
-.review-icon when (@is-overleaf = true) {
+.review-icon {
   display: inline-block;
   background: url('/img/review-icon-sprite-ol.png') top/30px no-repeat;
   width: 30px;

services/web/frontend/stylesheets/app/error-pages.less

@@ -8,19 +8,15 @@
   align-items: center;
 }
 
-.error-container.full-height when (@is-overleaf = true) {
+.error-container.full-height {
   margin-top: -(@header-height + @content-margin-vertical) / 2;
 }
 
 .error-details {
-  flex: 0 1 50%;
+  flex: 1 1 50%;
   padding: @line-height-computed * 2;
 }
 
-.error-details when (@is-overleaf = true) {
-  flex-grow: 1;
-}
-
 .error-status {
   font-family: @font-family-serif;
   margin-bottom: (@line-height-computed / 4);
@@ -33,24 +29,8 @@
   color: @gray;
   margin-bottom: @line-height-computed * 2;
 }
-.error-btn when (@is-overleaf = false) {
-  color: @navbar-default-link-color;
-  border: 2px solid @navbar-default-link-color;
-  border-radius: @border-radius-base;
-  font-weight: 700;
-  line-height: 1;
-  padding: @padding-base-vertical @padding-base-horizontal;
 
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    color: #fff;
-    background-color: @navbar-default-link-hover-bg;
-    border: 2px solid @navbar-default-link-hover-color;
-  }
-}
-
-.error-btn when (@is-overleaf = true) {
+.error-btn {
   .btn;
   .btn-primary;
   display: block;

services/web/frontend/stylesheets/app/homepage.less

@@ -182,7 +182,7 @@
   }
 }
 
-.hp-login-btn when (@is-overleaf = true) {
+.hp-login-btn {
   .login-btn;
   min-width: 220px;
 

services/web/frontend/stylesheets/app/project-list.less

@@ -32,16 +32,12 @@
   }
 }
 
-.project-list-content when (@is-overleaf) {
+.project-list-content {
   margin: 0;
   height: 100%;
   overflow: hidden;
 }
 
-.project-list-content when (@is-overleaf = false) {
-  .container;
-}
-
 .project-list-empty {
   height: 100%;
   overflow-y: scroll;
@@ -56,19 +52,22 @@
   }
 }
 
-.sidebar-new-proj-btn when (@is-overleaf) {
+.sidebar-new-proj-btn {
   .btn-block;
 }
 
-.project-list-row when (@is-overleaf) {
+.project-list-row {
   height: 100%;
   min-height: calc(~'100vh -' (@header-height - @footer-height));
 }
-.project-list-container when (@is-overleaf) {
+.project-list-container {
   height: 100%;
 }
 .project-list-sidebar {
   background-color: @sidebar-bg;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
   padding-top: @content-margin-vertical;
   padding-bottom: @content-margin-vertical;
   color: @sidebar-color;
@@ -77,12 +76,6 @@
   }
 }
 
-.project-list-sidebar when (@is-overleaf) {
-  overflow-x: hidden;
-  overflow-y: auto;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
 .project-list-main {
   padding-top: @content-margin-vertical;
   padding-bottom: @content-margin-vertical;
@@ -313,9 +306,7 @@ ul.folders-menu {
         text-decoration: none;
       }
     }
-    > a when (@is-overleaf = false) {
-      font-size: 0.9rem;
-    }
+
     &.separator {
       padding: @folders-menu-item-v-padding @folders-menu-item-h-padding;
       cursor: auto;
@@ -480,14 +471,10 @@ ul.structured-list {
     a {
       color: @structured-list-link-color;
     }
-    .header when (@is-overleaf = true) {
+    .header {
       font-weight: 600;
     }
 
-    .header when (@is-overleaf = false) {
-      text-transform: uppercase;
-    }
-
     .select-item,
     .select-all {
       position: absolute;
@@ -505,32 +492,14 @@ ul.structured-list {
   }
 }
 
-.project-list-card when (@is-overleaf) {
+.project-list-card {
   padding: 0 (@line-height-computed / 4);
 }
 
 ul.project-list {
   li {
-    .last-modified when (@is-overleaf = false) {
-      font-size: 0.8rem;
-    }
-    .owner when (@is-overleaf = false) {
-      font-size: 0.8rem;
-    }
-    .owner when (@is-overleaf = false) {
-      margin-right: 0;
-    }
     .projectName {
       margin-right: @line-height-computed / 4;
-      padding: 0;
-      vertical-align: inherit;
-      white-space: normal;
-      text-align: left;
-    }
-
-    .action-btn {
-      padding: 0 0.3em;
-      margin-left: 0.2em;
     }
   }
   i.tablesort {

services/web/frontend/stylesheets/app/translations.less

@@ -5,9 +5,7 @@
     vertical-align: text-bottom;
     margin-bottom: -1px;
   }
-}
 
-.translations-message when (@is-overleaf = true) {
   .close {
     color: #fff;
     opacity: 1;

services/web/frontend/stylesheets/components/alerts.less

@@ -71,7 +71,7 @@
   .alert-variant(@alert-alt-bg; @alert-alt-border; @alert-alt-text);
 }
 
-.alert when (@is-overleaf = true) {
+.alert {
   a,
   .btn-inline-link {
     color: white;

services/web/frontend/stylesheets/components/footer.less

@@ -37,12 +37,9 @@ footer.site-footer {
   }
 }
 
-.site-footer-content when (@is-overleaf = true) {
+.site-footer-content {
   .container-fluid;
 }
-.site-footer-content when (@is-overleaf = false) {
-  .container;
-}
 
 .sprite-icon-lang {
   display: inline-block;

services/web/frontend/stylesheets/components/navbar.less

@@ -580,9 +580,7 @@
       color: @navbar-default-link-hover-color;
     }
   }
-}
 
-.navbar-default when (@is-overleaf = true) {
   @media (min-width: @grid-float-breakpoint) {
     padding: @navbar-default-padding-v 0;
   }

services/web/frontend/stylesheets/core/mixins.less

@@ -518,7 +518,7 @@
     color: darken(@text-color, 10%);
   }
 
-  .alert-link-as-btn when (@is-overleaf = true) {
+  .alert-link-as-btn {
     display: inline-block;
     font-weight: bold;
     text-decoration: none;
@@ -605,7 +605,7 @@
   background-color: @background;
   border-color: @border;
 
-  .alert & when (@is-overleaf = true) {
+  .alert & {
     background-color: darken(@background, 16%);
   }
 
@@ -618,7 +618,7 @@
     color: @color;
     background-color: darken(@background, 8%);
     border-color: darken(@border, 12%);
-    .alert & when (@is-overleaf = true) {
+    .alert & {
       background-color: darken(@background, 24%);
     }
   }
@@ -650,7 +650,7 @@
   background-color: transparent;
   border-color: @color;
 
-  .alert & when (@is-overleaf = true) {
+  .alert & {
     background-color: transparent;
   }
 
@@ -663,7 +663,7 @@
     color: @color;
     background-color: transparent;
     border-color: darken(@color, 12%);
-    .alert & when (@is-overleaf = true) {
+    .alert & {
       background-color: transparent;
     }
   }

services/web/frontend/stylesheets/ieee-style.less

@@ -1,7 +1,6 @@
 @import 'style.less';
 @import 'core/ol-ieee-variables.less';
 
-@is-overleaf : true;
 @is-overleaf-light: false;
 @show-rich-text : true;
 

services/web/frontend/stylesheets/light-style.less

@@ -1,6 +1,5 @@
 @import 'style.less';
 @import 'core/ol-light-variables.less';
 
-@is-overleaf : true;
 @is-overleaf-light : true;
 @show-rich-text : true;

services/web/frontend/stylesheets/style.less

@@ -1,7 +1,6 @@
 @import (less) '../fonts/lato.css';
 @import (less) '../fonts/merriweather.css';
 
-@is-overleaf : true;
 @is-overleaf-light : false;
 @show-rich-text : true;