remove .main-container

src/client/js/legacy/crowi.js

@@ -222,20 +222,20 @@ $(() => {
   $('[data-tooltip-stay]').tooltip('show');
 
   $('#toggle-crowi-sidebar').click((e) => {
-    const $mainContainer = $('.main-container');
-    if ($mainContainer.hasClass('aside-hidden')) {
-      $('.main-container').removeClass('aside-hidden');
+    const $body = $('body');
+    if ($body.hasClass('aside-hidden')) {
+      $body.removeClass('aside-hidden');
       $.cookie('aside-hidden', 0, { expires: 30, path: '/' });
     }
     else {
-      $mainContainer.addClass('aside-hidden');
+      $body.addClass('aside-hidden');
       $.cookie('aside-hidden', 1, { expires: 30, path: '/' });
     }
     return false;
   });
 
   if ($.cookie('aside-hidden') === 1) {
-    $('.main-container').addClass('aside-hidden');
+    $('body').addClass('aside-hidden');
   }
 
   $('.copy-link').on('click', function() {

src/client/js/services/AppContainer.js

@@ -35,7 +35,7 @@ export default class AppContainer extends Container {
     this.isAdmin = body.dataset.isAdmin === 'true';
     this.csrfToken = body.dataset.csrftoken;
     this.isPluginEnabled = body.dataset.pluginEnabled === 'true';
-    this.isLoggedin = document.querySelector('.main-container.nologin') == null;
+    this.isLoggedin = document.querySelector('body.nologin') == null;
 
     this.config = JSON.parse(document.getElementById('crowi-context-hydrate').textContent || '{}');
 

src/client/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -1,16 +1,19 @@
 .top-left-part {
-  .logo-mark, .logo-text {
+  .logo-mark,
+  .logo-text {
     fill: white;
   }
 }
 
-
 /*
  * Button
  */
 .btn-default {
-  &:hover, &:focus,
-  &.active, &.active:hover, &.active:focus {
+  &:hover,
+  &:focus,
+  &.active,
+  &.active:hover,
+  &.active:focus {
     color: white;
     background-color: lighten($bodycolor, 5%);
   }
@@ -19,15 +22,19 @@
 /*
   * Form
   */
-input.form-control, textarea.form-control {
+input.form-control,
+textarea.form-control {
   color: lighten($bodytext, 30%);
   background-color: darken($bodycolor, 5%);
   border: 1px solid darken($border, 30%);
 }
-.form-control[disabled], .form-control[readonly] {
+
+.form-control[disabled],
+.form-control[readonly] {
   color: lighten($bodytext, 10%);
   background-color: lighten($bodycolor, 5%);
 }
+
 .input-group .input-group-addon {
   color: $dark;
   background-color: rgba($topbar, 0.4);
@@ -61,8 +68,11 @@ input.form-control, textarea.form-control {
  * Panel
  */
 .panel {
-  &, &.panel-white, &.panel-default {
-    .panel-heading, .panel-body {
+  &,
+  &.panel-white,
+  &.panel-default {
+    .panel-heading,
+    .panel-body {
       color: $light;
     }
   }
@@ -71,33 +81,38 @@ input.form-control, textarea.form-control {
 /*
  * Table
  */
- .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
- .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
- .table > thead > tr > th, .table-bordered{
-     border-top: 1px solid $border;
- }
-
- .table-bordered > thead > tr > th,
- .table-bordered > tbody > tr > th,
- .table-bordered > tfoot > tr > th,
- .table-bordered > thead > tr > td,
- .table-bordered > tbody > tr > td,
- .table-bordered > tfoot > tr > td {
-   border: 1px solid $border;
- }
- .table > thead > tr > th {
-     border-bottom: 1px solid $border;
- }
-
- .table-bordered {
-     border: 1px solid $border;
- }
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td,
+.table > thead > tr > th,
+.table-bordered {
+  border-top: 1px solid $border;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid $border;
+}
 
+.table > thead > tr > th {
+  border-bottom: 1px solid $border;
+}
+
+.table-bordered {
+  border: 1px solid $border;
+}
 
 /*
  * GROWI header
  */
-.main-container header.affix {
+header.affix {
   .logo-mark {
     fill: white;
   }
@@ -142,6 +157,7 @@ input.form-control, textarea.form-control {
 legend {
   border-color: lighten($border, 10%);
 }
+
 .wiki {
   h1 {
     border-color: lighten($border, 10%);
@@ -157,8 +173,8 @@ legend {
 .admin-page {
   #themeOptions {
     .theme-option-container.active a {
-      background-color: darken($themecolor,15%);
-      border-color: darken($themecolor,15%);
+      background-color: darken($themecolor, 15%);
+      border-color: darken($themecolor, 15%);
     }
   }
 }

src/client/styles/agile-admin/inverse/colors/_apply-colors-light.scss

@@ -1,5 +1,6 @@
 .top-left-part {
-  .logo-mark, .logo-text {
+  .logo-mark,
+  .logo-text {
     fill: $themecolor;
   }
 }
@@ -10,7 +11,9 @@
 .form-control {
   background-color: $bodycolor;
 }
-.form-control[disabled], .form-control[readonly] {
+
+.form-control[disabled],
+.form-control[readonly] {
   color: lighten($bodytext, 10%);
   background-color: darken($bodycolor, 5%);
 }
@@ -18,7 +21,7 @@
 /*
  * GROWI header
  */
- .main-container header.affix {
+header.affix {
   .logo-mark {
     fill: $themecolor;
   }
@@ -39,14 +42,14 @@
 /*
  * GROWI page list
  */
- .page-list {
+.page-list {
   .page-list-ul {
     > li {
       > a strong {
         color: darken($bodytext, 20%);
       }
       > span.page-list-meta {
-        color: lighten($bodytext, 10%);;
+        color: lighten($bodytext, 10%);
       }
     }
   }
@@ -55,7 +58,7 @@
 /*
  * GROWI on-edit
  */
- .page-editor-footer {
+.page-editor-footer {
   #slack-mark-white {
     display: none;
   }
@@ -76,8 +79,8 @@
 .admin-page {
   #themeOptions {
     .theme-option-container.active a {
-      background-color: lighten($themecolor,20%);
-      border-color: lighten($themecolor,20%);
+      background-color: lighten($themecolor, 20%);
+      border-color: lighten($themecolor, 20%);
     }
   }
 }

src/client/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -1,10 +1,13 @@
-body{
-  background:$sidebar;
+body {
+  background: $sidebar;
 }
 
 /*Top Header Part*/
 
-.logo i{ color:$white;}
+.logo i {
+  color: $white;
+}
+
 .top-left-part {
   background-color: $sidebar;
 }
@@ -24,8 +27,12 @@ body{
           fill: $logo-mark-fill;
 
           &:hover {
-            .group1 { fill: $growi-green; }
-            .group2 { fill: $growi-blue; }
+            .group1 {
+              fill: $growi-green;
+            }
+            .group2 {
+              fill: $growi-blue;
+            }
           }
         }
       }
@@ -33,12 +40,14 @@ body{
   }
 }
 
-.navbar-header{
-  background:$topbar;
+.navbar-header {
+  background: $topbar;
 }
+
 .navbar-top-links > li > a {
-    color:$white;
+  color: $white;
 }
+
 .navbar-top-links .confidential {
   background-color: darken($topbar, 10%);
 }
@@ -51,104 +60,116 @@ body{
 }*/
 
 /*Right panel*/
-.right-sidebar .rpanel-title{
-  background:$themecolor;
+.right-sidebar .rpanel-title {
+  background: $themecolor;
 }
 
 /*Bread Crumb*/
-.bg-title .breadcrumb .active{
-    color:$themecolor;
+.bg-title .breadcrumb .active {
+  color: $themecolor;
 }
-.bg-title{
+
+.bg-title {
   background: darken($bodycolor, 2%);
 }
 
 /*Sidebar*/
 
 .sidebar {
-    background:$sidebar;
-    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
-  .label-custom{
-      background:$megna;
+  background: $sidebar;
+  box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
+  .label-custom {
+    background: $megna;
   }
 }
-#side-menu li a{
-    color:$sidebar-text;
+
+#side-menu li a {
+  color: $sidebar-text;
 }
-#side-menu li a{
-    color:$sidebar-text;
-  border-left:0px solid $sidebar;
+
+#side-menu li a {
+  color: $sidebar-text;
+  border-left: 0px solid $sidebar;
 }
 
 #side-menu > li > a {
-    &:hover, &:focus{
-        background:rgba(0, 0, 0, 0.03);
-    }
-   &.active {
-            border-left:3px solid $themecolor;
-            color:$dark;
-
-            font-weight:500;
-        i{
-          color:$themecolor;
-        }
-        }
+  &:hover,
+  &:focus {
+    background: rgba(0, 0, 0, 0.03);
+  }
+  &.active {
 
+    font-weight: 500;
+    color: $dark;
+    border-left: 3px solid $themecolor;
+    i {
+      color: $themecolor;
+    }
+  }
 }
-#side-menu ul > li > a {
-    &:hover{
-        color:$themecolor;
 
-    }
-    &.active{
-     color:$dark;
-     font-weight:500;
-    }
+#side-menu ul > li > a {
+  &:hover {
+    color: $themecolor;
+  }
+  &.active {
+    font-weight: 500;
+    color: $dark;
+  }
 }
-.sidebar #side-menu .user-pro{
-  .nav-second-level a:hover{
-          color:$themecolor;
-        }
+
+.sidebar #side-menu .user-pro {
+  .nav-second-level a:hover {
+    color: $themecolor;
   }
+}
 
 /*themecolor*/
 
 .bg-theme {
   background-color: $danger !important;
 }
+
 .bg-theme-dark {
   background-color: $megna !important;
 }
 
 /*Chat widget*/
-.chat-list .odd .chat-text{
-    background:$themecolor;
+.chat-list .odd .chat-text {
+  background: $themecolor;
 }
 /*Button*/
-.btn-custom{
-  background:$themecolor;
-  border:1px solid $themecolor;
-  color:$white;
-  &:hover{
-    background:$themecolor;
-    opacity:0.8;
-    color:$white;
-    border:1px solid $themecolor;
+.btn-custom {
+  color: $white;
+  background: $themecolor;
+  border: 1px solid $themecolor;
+  &:hover {
+    color: $white;
+    background: $themecolor;
+    border: 1px solid $themecolor;
+    opacity: 0.8;
   }
 }
 /*Custom tab*/
-.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
- border-bottom:2px solid $themecolor;
- color:$themecolor;
+.customtab li.active a,
+.customtab li.active a:hover,
+.customtab li.active a:focus {
+  color: $themecolor;
+  border-bottom: 2px solid $themecolor;
 }
-.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
-  background:$themecolor;
-  border-right:2px solid $themecolor;
+
+.tabs-vertical li.active a,
+.tabs-vertical li.active a:hover,
+.tabs-vertical li.active a:focus {
+  background: $themecolor;
+  border-right: 2px solid $themecolor;
 }
 /*Nav-pills*/
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
-  background:$themecolor;
-  color:$white;
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:focus,
+.nav-pills > li.active > a:hover {
+  color: $white;
+  background: $themecolor;
 }
 
 /*
@@ -159,7 +180,6 @@ body{
   background-color: $inline-code-bg;
 }
 
-
 /*
  * Legend
  */
@@ -173,7 +193,11 @@ legend {
 .modal {
   .modal-header {
     border-bottom-color: $border;
-    &.bg-primary, &.bg-info, &.bg-success, &.bg-warning, &.bg-danger {
+    &.bg-primary,
+    &.bg-info,
+    &.bg-success,
+    &.bg-warning,
+    &.bg-danger {
       color: white;
       .close {
         color: white;
@@ -215,13 +239,14 @@ legend {
  * Tabs
  */
 $active-nav-tabs-bgcolor: $bodycolor !default;
-.nav.nav-tabs {
 
+.nav.nav-tabs {
   border-bottom-color: $navbar-border;
 
   > li > a {
-    color:$linktext;
-    &:hover, &:focus {
+    color: $linktext;
+    &:hover,
+    &:focus {
       color: $linktext-hover;
       background: transparent;
     }
@@ -229,15 +254,16 @@ $active-nav-tabs-bgcolor: $bodycolor !default;
   > li.active > a {
     background: $active-nav-tabs-bgcolor;
     border-top-color: $navbar-border;
-    border-left-color: $navbar-border;
     border-right-color: $navbar-border;
+    border-left-color: $navbar-border;
   }
   > li:not(.active) > a {
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-top-color: $active-navbar-border;
-      border-left-color: $active-navbar-border;
       border-right-color: $active-navbar-border;
       border-bottom: transparent;
+      border-left-color: $active-navbar-border;
     }
   }
 }
@@ -252,15 +278,14 @@ $active-nav-tabs-bgcolor: $bodycolor !default;
       background-color: white;
     }
   }
-  input:checked+.slider {
+  input:checked + .slider {
     background-color: #007bff;
   }
-  input:focus+.slider {
+  input:focus + .slider {
     box-shadow: 0 0 1px #007bff;
   }
 }
 
-
 /*
  * Crowi sidebar
  */
@@ -294,12 +319,11 @@ $active-nav-tabs-bgcolor: $bodycolor !default;
   }
 }
 
-
 /*
  * GROWI header
  */
-.main-container header.affix {
-  background: rgba(darken($bodycolor, 2%), .9);
+header.affix {
+  background: rgba(darken($bodycolor, 2%), 0.9);
 }
 
 /*
@@ -312,8 +336,8 @@ body.on-edit {
     .page-editor-editor-container {
       border-right-color: $navbar-border;
       .navbar-editor {
+        background-color: $active-nav-tabs-bgcolor; // same color with active tab
         border-bottom-color: $border;
-        background-color: $active-nav-tabs-bgcolor;   // same color with active tab
       }
     }
     .page-editor-preview-container {
@@ -375,14 +399,14 @@ body.on-edit {
  * GROWI page attachments
  */
 .page-attachments-row {
-  border-top-color: $border;
   background-color: darken($bodycolor, 2%);
+  border-top-color: $border;
 }
 
 /*
  * GROWI admin page #themeOptions
  */
- .admin-page {
+.admin-page {
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {

src/client/styles/agile-admin/inverse/colors/antarctic.scss

@@ -53,7 +53,7 @@ ul > .text-muted {
 }
 
 // add background-image
-.main-container > #wrapper > #page-wrapper,
+#wrapper > #page-wrapper,
 .page-editor-preview-container {
   background-image: url('/images/themes/antarctic/bg.svg');
   background-attachment: fixed;
@@ -192,7 +192,7 @@ body:not(.on-edit) .nav.nav-tabs {
  *  Right space for readable
  */
 
-.growi.main-container {
+.growi {
   .revision-toc {
     max-width: 360px;
     background-color: $background-color;

src/client/styles/agile-admin/inverse/colors/christmas.scss

@@ -2,7 +2,7 @@
 
 $themecolor: #b3000c;
 $themelight: white;
-$subthemecolor:	#017e20;
+$subthemecolor: #017e20;
 $topbar: $themecolor;
 $sidebar: $themelight;
 $bodycolor: $themelight;
@@ -28,8 +28,8 @@ $active-nav-tabs-bgcolor: white;
 // change color of highlighted header in wiki (default: orange)
 .wiki {
   .code-line.revision-head.highlighted {
-    background-color: lighten($themecolor, 20%);
     color: $themelight;
+    background-color: lighten($themecolor, 20%);
 
     .icon-note,
     .icon-link {
@@ -38,7 +38,7 @@ $active-nav-tabs-bgcolor: white;
   }
 }
 
-.sidebar{
+.sidebar {
   background: $themecolor;
 }
 
@@ -46,11 +46,11 @@ $active-nav-tabs-bgcolor: white;
   background: $themelight;
 }
 
-.main-container > #wrapper > #page-wrapper,
+#wrapper > #page-wrapper,
 .page-editor-preview-container {
-  background-image: url("/images/themes/christmas/christmas.jpg");
-  background-size: cover;
+  background-image: url('/images/themes/christmas/christmas.jpg');
   background-attachment: fixed;
+  background-size: cover;
 }
 
 .grw-subnav {
@@ -58,7 +58,7 @@ $active-nav-tabs-bgcolor: white;
 }
 
 #wrapper > .navbar > .navbar-header {
-  background-image: url("/images/themes/christmas/christmas-navbar.jpg");
+  background-image: url('/images/themes/christmas/christmas-navbar.jpg');
   border-bottom: 4px solid $subthemecolor;
 }
 
@@ -70,7 +70,8 @@ body:not(.on-edit) .nav.nav-tabs {
     background: linear-gradient(
       rgba($active-nav-tabs-bgcolor, 0) 0%,
       rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%);         // overwrite only the bottom pixel
+      $active-nav-tabs-bgcolor 100%
+    ); // overwrite only the bottom pixel
   }
 }
 
@@ -86,7 +87,8 @@ body:not(.on-edit) .nav.nav-tabs {
   }
 
   &.login-page {
-    .login-header, .login-dialog {
+    .login-header,
+    .login-dialog {
       background-color: rgba(#ccc, 0.5);
     }
     .link-switch {
@@ -99,7 +101,7 @@ body:not(.on-edit) .nav.nav-tabs {
  * Modal
  */
 .modal-dialog .modal-header.bg-primary {
-  background-image: url("/images/themes/christmas/christmas-navbar.jpg");
+  background-image: url('/images/themes/christmas/christmas-navbar.jpg');
   border-bottom: 2px solid $subthemecolor;
 }
 
@@ -107,12 +109,13 @@ body:not(.on-edit) .nav.nav-tabs {
  * Panel
  */
 .panel {
-  &.panel-white, &.panel-default {
+  &.panel-white,
+  &.panel-default {
     border-color: $border-original;
     .panel-heading {
-        color: $dark;
-        background-color: $border-original;
-        border-bottom:1px solid $border-original;
+      color: $dark;
+      background-color: $border-original;
+      border-bottom: 1px solid $border-original;
     }
   }
 }
@@ -121,7 +124,7 @@ body:not(.on-edit) .nav.nav-tabs {
   border-color: #bd3425;
   .panel-heading {
     color: white;
-    background-image: url("/images/themes/christmas/christmas-navbar.jpg");
     background-color: $themecolor;
+    background-image: url('/images/themes/christmas/christmas-navbar.jpg');
   }
 }

src/client/styles/agile-admin/inverse/colors/future.scss

@@ -30,7 +30,7 @@ $inline-code-bg: darken($bodycolor, 5%);
 @import 'apply-colors';
 @import 'apply-colors-dark';
 
-.main-container:not(.on-edit) {
+body:not(.on-edit) {
   .grw-subnav {
     border-bottom: 1px solid rgb(131, 228, 215);
   }

src/client/styles/agile-admin/inverse/colors/halloween.scss

@@ -1,11 +1,11 @@
 @import '../variables';
 
-$basecolor:#0a010a;
+$basecolor: #0a010a;
 $themecolor: #aa4a04;
 $subthemecolor: #e9af2b;
 $linkcolor: #aa4a04;
 $topbar: $themecolor;
-$sidebar:#061f2f;
+$sidebar: #061f2f;
 $subthemecolor: #e9af2b;
 $bodycolor: #0f0101;
 $headingtext: #e9af2b;
@@ -13,7 +13,7 @@ $bodytext: #e9af2b;
 $linktext: $linkcolor;
 $linktext-hover: rgba($linktext, 0.8);
 $sidebar-text: $themecolor;
-$dark-themecolor:#4f5467;
+$dark-themecolor: #4f5467;
 $primary: $themecolor;
 $logo-mark-fill: lighten($subthemecolor, 20%);
 $wikilinktext: $linkcolor;
@@ -37,12 +37,11 @@ $inline-code-bg: #0a121b;
 }
 
 .panel {
-
   &,
   &.panel-white,
   &.panel-default {
-    border-color: $bodytext;
     background-color: lighten($basecolor, 5%);
+    border-color: $bodytext;
 
     .panel-heading {
       color: $basecolor;
@@ -55,18 +54,18 @@ $inline-code-bg: #0a121b;
   background: lighten($basecolor, 7%);
 }
 
-.nav-pills>li>a:hover {
-  background: #d3671a;
+.nav-pills > li > a:hover {
   color: $white;
+  background: #d3671a;
 }
 
 #wrapper > .navbar > .navbar-header {
-  background-image: url("/images/themes/halloween/halloween-navbar.jpg");
+  background-image: url('/images/themes/halloween/halloween-navbar.jpg');
 }
 
-.main-container > #wrapper > #page-wrapper,
+#wrapper > #page-wrapper,
 .page-editor-preview-container {
-  background-image: url("/images/themes/halloween/halloween.jpg");
+  background-image: url('/images/themes/halloween/halloween.jpg');
   background-attachment: fixed;
 }
 
@@ -82,6 +81,7 @@ body:not(.on-edit) .nav.nav-tabs {
     background: linear-gradient(
       rgba($active-nav-tabs-bgcolor, 0) 0%,
       rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%);         // overwrite only the bottom pixel
+      $active-nav-tabs-bgcolor 100%
+    ); // overwrite only the bottom pixel
   }
 }

src/client/styles/agile-admin/inverse/colors/island.scss

@@ -9,7 +9,7 @@ $themecolor: #97cbc3;
 $topbar: #0c2a44;
 $sidebar: $themelight;
 $bodycolor: lighten($themelight, 10%);
-$headingtext:#3c6d72;
+$headingtext: #3c6d72;
 $bodytext: #3c6d72;
 $linktext: $linkcolor;
 $linktext-hover: rgba($linktext, 0.8);
@@ -37,13 +37,12 @@ $inline-code-bg: darken($themelight, 3%);
 }
 
 .panel {
-
   &,
   &.panel-white,
   &.panel-default {
+    color: $themecolor;
     background-color: lighten($themecolor, 30%);
     border-color: white;
-    color: $themecolor;
 
     .panel-heading {
       color: $themecolor;
@@ -63,8 +62,8 @@ $inline-code-bg: darken($themelight, 3%);
 /* GROWI page list */
 .page-list {
   .page-list-ul {
-    >li {
-      >a strong {
+    > li {
+      > a strong {
         color: $linkcolor;
       }
     }
@@ -75,49 +74,55 @@ $inline-code-bg: darken($themelight, 3%);
   background: lighten($themelight, 5%);
 }
 
-.main-container > #wrapper > #page-wrapper,
+#wrapper > #page-wrapper,
 .page-editor-preview-container {
-  background-image: url("/images/themes/island/island.png");
+  background-image: url('/images/themes/island/island.png');
   background-attachment: fixed;
 }
 
 /*
  * Tabs
  */
- body:not(.on-edit) .nav.nav-tabs {
+body:not(.on-edit) .nav.nav-tabs {
   > li.active > a {
     background: linear-gradient(
       rgba($active-nav-tabs-bgcolor, 0) 0%,
       rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%);         // overwrite only the bottom pixel
+      $active-nav-tabs-bgcolor 100%
+    ); // overwrite only the bottom pixel
   }
 }
 
 /* Table */
- .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
- .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
- .table > thead > tr > th, .table-bordered{
-     border-top: 1px solid $border;
- }
-
- .table-bordered > thead > tr > th,
- .table-bordered > tbody > tr > th,
- .table-bordered > tfoot > tr > th,
- .table-bordered > thead > tr > td,
- .table-bordered > tbody > tr > td,
- .table-bordered > tfoot > tr > td {
-   border: 1px solid $border;
- }
- .table > thead > tr > th {
-     border-bottom: 1px solid $border;
- }
-
- .table-bordered {
-     border: 1px solid $border;
- }
-
-
- // login page
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td,
+.table > thead > tr > th,
+.table-bordered {
+  border-top: 1px solid $border;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid $border;
+}
+
+.table > thead > tr > th {
+  border-bottom: 1px solid $border;
+}
+
+.table-bordered {
+  border: 1px solid $border;
+}
+
+// login page
 .nologin {
   &.login-page {
     > #wrapper > #page-wrapper {

src/client/styles/agile-admin/inverse/colors/wood.scss

@@ -26,8 +26,8 @@ $active-nav-tabs-bgcolor: #fffffc;
 // change color of highlighted header in wiki (default: orange)
 .wiki {
   .code-line.revision-head.highlighted {
-    background-color: lighten($themecolor, 20%);
     color: $themelight;
+    background-color: lighten($themecolor, 20%);
 
     .icon-note,
     .icon-link {
@@ -40,9 +40,9 @@ $active-nav-tabs-bgcolor: #fffffc;
   background: $themelight;
 }
 
-.main-container > #wrapper > #page-wrapper,
+#wrapper > #page-wrapper,
 .page-editor-preview-container {
-  background-image: url("/images/themes/wood/wood.jpg");
+  background-image: url('/images/themes/wood/wood.jpg');
   background-attachment: fixed;
 }
 
@@ -51,7 +51,7 @@ $active-nav-tabs-bgcolor: #fffffc;
 }
 
 #wrapper > .navbar > .navbar-header {
-  background-image: url("/images/themes/wood/wood-navbar.jpg");
+  background-image: url('/images/themes/wood/wood-navbar.jpg');
 }
 
 /*
@@ -62,7 +62,8 @@ body:not(.on-edit) .nav.nav-tabs {
     background: linear-gradient(
       rgba($active-nav-tabs-bgcolor, 0) 0%,
       rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%);         // overwrite only the bottom pixel
+      $active-nav-tabs-bgcolor 100%
+    ); // overwrite only the bottom pixel
   }
 }
 
@@ -78,7 +79,8 @@ body:not(.on-edit) .nav.nav-tabs {
   }
 
   &.login-page {
-    .login-header, .login-dialog {
+    .login-header,
+    .login-dialog {
       background-color: rgba(#ccc, 0.5);
     }
     .link-switch {

src/client/styles/scss/_comment.scss

@@ -1,53 +1,49 @@
-.main-container {
-  .page-comment-main {
-    // delete button
-    .page-comment-control {
-      position: absolute;
-      top: 0;
-      right: 0;
-      display: none; // default hidden
-    }
+.page-comment-main {
+  // delete button
+  .page-comment-control {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none; // default hidden
   }
+}
 
-  // modal
-  .page-comment-delete-modal .modal-content {
-    .modal-body {
-      .comment-body {
-        max-height: 13em;
-        // scrollable
-        overflow-y: auto;
-      }
+// modal
+.page-comment-delete-modal .modal-content {
+  .modal-body {
+    .comment-body {
+      max-height: 13em;
+      // scrollable
+      overflow-y: auto;
     }
   }
 }
 
-.main-container {
-  .page-comments {
-    .page-comments-list-toggle-older {
-      display: inline-block;
-      font-size: 0.9em;
-    }
+.page-comments {
+  .page-comments-list-toggle-older {
+    display: inline-block;
+    font-size: 0.9em;
+  }
 
-    .page-comment {
-      // older comments
-      &.page-comment-older {
-      }
-      // newer comments
-      &.page-comment-newer {
-        opacity: 0.7;
+  .page-comment {
+    // older comments
+    &.page-comment-older {
+    }
+    // newer comments
+    &.page-comment-newer {
+      opacity: 0.7;
 
-        &:hover {
-          opacity: 1;
-        }
+      &:hover {
+        opacity: 1;
       }
+    }
 
-      .page-comment-meta {
-        display: flex;
-        justify-content: flex-end;
+    .page-comment-meta {
+      display: flex;
+      justify-content: flex-end;
 
-        font-size: 0.9em;
-        color: #999;
-      }
+      font-size: 0.9em;
+      color: #999;
     }
   }
 }

src/client/styles/scss/_comment_crowi.scss

@@ -1,4 +1,4 @@
-.crowi.main-container {
+.crowi {
   .page-comment-main {
     margin-bottom: 0.5em;
   }

src/client/styles/scss/_comment_growi.scss

@@ -1,4 +1,4 @@
-.growi.main-container {
+.growi {
   %comment-section {
     position: relative;
     padding: 1em;

src/client/styles/scss/_comment_kibela.scss

@@ -1,4 +1,4 @@
-.kibela.main-container {
+.kibela {
   /* Comment section */
   %comment-section {
     position: relative;

src/client/styles/scss/_layout.scss

@@ -10,146 +10,142 @@
   padding-top: 10px !important;
 }
 
-.main-container {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 500;
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+}
 
-  .navbar-top-links {
-    height: 30px;
-    border-radius: 40px;
-    .confidential {
-      a {
-        font-weight: bold;
-        cursor: default;
-      }
+.navbar-top-links {
+  height: 30px;
+  border-radius: 40px;
+  .confidential {
+    a {
+      font-weight: bold;
+      cursor: default;
     }
   }
+}
 
-  /*
-   * header
-   */
-  header {
-    line-height: 1em;
+/*
+  * header
+  */
+header {
+  line-height: 1em;
 
-    h1 {
-      @include variable-font-size(28px);
-      line-height: 1.1em;
-    }
+  h1 {
+    @include variable-font-size(28px);
+    line-height: 1.1em;
+  }
 
-    // affix
-    &.affix {
-      top: 0;
-      left: 0;
-      z-index: 15; // over the .sidebar
-      width: 100%;
-      padding: 2px 20px;
-      box-shadow: 0 0px 2px #999;
+  // affix
+  &.affix {
+    top: 0;
+    left: 0;
+    z-index: 15; // over the .sidebar
+    width: 100%;
+    padding: 2px 20px;
+    box-shadow: 0 0px 2px #999;
 
-      h1 {
-        @include variable-font-size(20px);
-      }
+    h1 {
+      @include variable-font-size(20px);
     }
   }
+}
 
-  .main {
-    .header-wrap {
-      min-height: 70px;
-      padding: 15px 15px 0 15px;
-    }
+.main {
+  .header-wrap {
+    min-height: 70px;
+    padding: 15px 15px 0 15px;
   }
+}
 
-  .layout-control {
-    position: fixed;
-    right: 25%;
-    bottom: 25px;
-    z-index: 1;
-    display: block;
-    padding: 5px 8px;
-    font-size: 0.8em;
-    text-align: center;
-    border: solid 1px #ccc;
-    border-right: none;
-    border-radius: 5px 0 0 5px;
-    transition: 0.3s ease;
-
-    &:hover {
-      text-decoration: none;
-      cursor: pointer;
-    }
+.layout-control {
+  position: fixed;
+  right: 25%;
+  bottom: 25px;
+  z-index: 1;
+  display: block;
+  padding: 5px 8px;
+  font-size: 0.8em;
+  text-align: center;
+  border: solid 1px #ccc;
+  border-right: none;
+  border-radius: 5px 0 0 5px;
+  transition: 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    cursor: pointer;
   }
+}
 
-  .revision-toc {
-    max-width: 250px;
-    overflow: hidden;
-    font-size: 0.9em;
+.revision-toc {
+  max-width: 250px;
+  overflow: hidden;
+  font-size: 0.9em;
 
-    .revision-toc-content {
-      padding: 10px;
+  .revision-toc-content {
+    padding: 10px;
 
-      > ul {
-        padding-left: 0;
-        ul {
-          padding-left: 1em;
-        }
+    > ul {
+      padding-left: 0;
+      ul {
+        padding-left: 1em;
       }
+    }
 
-      // first level of li
-      > ul > li {
-        padding: 5px;
-        margin: 4px 4px 4px 17px;
-      }
+    // first level of li
+    > ul > li {
+      padding: 5px;
+      margin: 4px 4px 4px 17px;
     }
   }
-} // }}}
+}
 
 // printable style
 @media print {
-  .main-container {
-    padding: 30px;
+  padding: 30px;
 
-    a:after {
-      display: none !important;
-    }
-    .main {
-      header {
-        border-bottom: solid 1px #666;
-        h1 {
-          font-size: 2em;
-          color: #000;
-        }
+  a:after {
+    display: none !important;
+  }
+  .main {
+    header {
+      border-bottom: solid 1px #666;
+      h1 {
+        font-size: 2em;
+        color: #000;
       }
+    }
 
-      .revision-toc {
+    .revision-toc {
+      float: none;
+      max-width: 100%;
+      margin-bottom: 20px;
+      font-size: 0.9em;
+      border: solid 1px #aaa;
+      border-radius: 5px;
+
+      .revision-toc-head {
+        display: inline-block;
         float: none;
-        max-width: 100%;
-        margin-bottom: 20px;
-        font-size: 0.9em;
-        border: solid 1px #aaa;
-        border-radius: 5px;
-
-        .revision-toc-head {
-          display: inline-block;
-          float: none;
-        }
-
-        .revision-toc-content.collapse {
-          display: block;
-          height: auto;
-        }
       }
 
-      .meta {
-        margin-top: 32px;
-        color: #666;
-        border-top: solid 1px #ccc;
+      .revision-toc-content.collapse {
+        display: block;
+        height: auto;
       }
     }
+
+    .meta {
+      margin-top: 32px;
+      color: #666;
+      border-top: solid 1px #ccc;
+    }
   }
 }
 

src/client/styles/scss/_layout_crowi.scss

@@ -1,4 +1,4 @@
-.crowi.main-container {
+.crowi {
   header {
     #search-listpage-form {
       .btn-sm {

src/client/styles/scss/_layout_growi.scss

@@ -1,7 +1,7 @@
 @import 'layout_variable';
 @import 'layout';
 
-.growi.main-container {
+.growi {
   .content-main {
     padding: 0;
   }

src/client/styles/scss/_page.scss

@@ -1,117 +1,113 @@
 // import diff2html styles
 @import '~diff2html/dist/diff2html.css';
 
-.main-container {
-  // padding controll of .header-wrap and .content-main are moved to _layout and _form
-
-  /*
-   * header
-   */
-  header {
-    // the container of h1
-    div.title-container {
-      padding-right: 5px;
-      padding-left: 5px;
-      margin-right: auto;
-    }
+/*
+  * header
+  */
+header {
+  // the container of h1
+  div.title-container {
+    padding-right: 5px;
+    padding-left: 5px;
+    margin-right: auto;
+  }
 
-    .btn-copy,
-    .btn-copy-link,
-    .btn-edit {
-      @extend .text-muted;
-      border: none;
-      opacity: 0.3;
+  .btn-copy,
+  .btn-copy-link,
+  .btn-edit {
+    @extend .text-muted;
+    border: none;
+    opacity: 0.3;
 
-      &:not(:hover) {
-        background-color: transparent;
-      }
+    &:not(:hover) {
+      background-color: transparent;
     }
+  }
 
-    .btn-edit-tags {
-      @extend .text-muted;
-      opacity: 0.5;
+  .btn-edit-tags {
+    @extend .text-muted;
+    opacity: 0.5;
 
-      &.no-tags {
-        opacity: 0.7;
-      }
+    &.no-tags {
+      opacity: 0.7;
     }
+  }
 
-    // change button opacity
-    &:hover {
-      .btn.btn-copy,
-      .btn-copy-link,
-      .btn.btn-edit,
-      .btn.btn-edit-tags {
-        opacity: unset;
-      }
+  // change button opacity
+  &:hover {
+    .btn.btn-copy,
+    .btn-copy-link,
+    .btn.btn-edit,
+    .btn.btn-edit-tags {
+      opacity: unset;
     }
+  }
 
-    .btn-like,
-    .btn-bookmark {
-      font-size: 1.2em;
-      line-height: 0.8em;
-      border: none;
+  .btn-like,
+  .btn-bookmark {
+    font-size: 1.2em;
+    line-height: 0.8em;
+    border: none;
 
-      &:not(:hover):not(.active) {
-        background-color: transparent;
-      }
+    &:not(:hover):not(.active) {
+      background-color: transparent;
     }
+  }
 
-    .btn-like {
-      &.active {
-        @extend .btn-info;
-      }
+  .btn-like {
+    &.active {
+      @extend .btn-info;
     }
+  }
 
-    .btn-bookmark {
-      &.active {
-        @extend .btn-warning;
-      }
+  .btn-bookmark {
+    &.active {
+      @extend .btn-warning;
     }
+  }
 
-    .url-line {
-      font-size: 1rem;
-      color: #999;
-    }
+  .url-line {
+    font-size: 1rem;
+    color: #999;
+  }
 
-    h1.title {
-      margin-top: 0;
-      margin-bottom: 0;
+  h1.title {
+    margin-top: 0;
+    margin-bottom: 0;
 
-      .d-flex {
-        flex-wrap: wrap; // for long page path
-      }
+    .d-flex {
+      flex-wrap: wrap; // for long page path
+    }
 
-      // crowi layout only
-      a.last-path {
-        color: #ccc;
+    // crowi layout only
+    a.last-path {
+      color: #ccc;
 
-        &:hover {
-          color: inherit;
-        }
+      &:hover {
+        color: inherit;
       }
     }
-
-    .tag-viewer.new-page {
-      display: none;
-    }
   }
 
-  // alert component settings
-  .alert-trash,
-  .alert-moved,
-  .alert-unlinked,
-  .alert-grant {
-    padding: 10px 15px;
+  .tag-viewer.new-page {
+    display: none;
   }
+}
 
-  // show PageStatusAlert in default
-  #page-status-alert .myadmin-alert {
-    display: block;
-  }
+// alert component settings
+.alert-trash,
+.alert-moved,
+.alert-unlinked,
+.alert-grant {
+  padding: 10px 15px;
+}
+
+// show PageStatusAlert in default
+#page-status-alert .myadmin-alert {
+  display: block;
 }
 
-.main-container .main .content-main .revision-history {
+.main .content-main .revision-history {
   .revision-history-list {
     .revision-history-outer {
       // add border-top except of first element

src/client/styles/scss/_page_growi.scss

@@ -1,4 +1,4 @@
-.growi.main-container {
+.growi {
   header {
     div.title-logo-container {
       display: none; // hide in default

src/client/styles/scss/_user.scss

@@ -1,91 +1,90 @@
-.main-container {
-  .user-page-header {
-    #revision-path {
-      margin-bottom: 0;
-    }
-
-    .users-meta {
-      margin-left: 30px;
-    }
+.user-page-header {
+  #revision-path {
+    margin-bottom: 0;
+  }
 
-    h1 {
-      margin: 0;
-      font-size: 2.5em;
-      color: #666;
-    }
+  .users-meta {
+    margin-left: 30px;
+  }
 
-    .picture {
-      width: 64px;
-      height: 64px;
-    }
+  h1 {
+    margin: 0;
+    font-size: 2.5em;
+    color: #666;
+  }
 
-    .user-page-meta {
-      color: #999;
+  .picture {
+    width: 64px;
+    height: 64px;
+  }
 
-      ul {
-        padding-left: 0;
+  .user-page-meta {
+    color: #999;
 
-        li {
-          list-style: none;
-        }
-      }
+    ul {
+      padding-left: 0;
 
-      .user-page-username {
-        font-weight: bold;
+      li {
+        list-style: none;
       }
+    }
 
-      .user-page-email {}
-
-      .user-page-introduction {}
+    .user-page-username {
+      font-weight: bold;
     }
 
-    .btn-like,
-    .btn-bookmark {
-      &.btn-lg {
-        padding: 8px;
-        font-size: 1.5em;
-      }
+    .user-page-email {
     }
-  }
 
-  // affix
-  .user-page-header.affix {
-    .users-meta {
-      margin-left: 15px;
+    .user-page-introduction {
     }
+  }
 
-    h1 {
+  .btn-like,
+  .btn-bookmark {
+    &.btn-lg {
+      padding: 8px;
       font-size: 1.5em;
-      line-height: 30px;
     }
+  }
+}
 
-    .picture {
-      width: 48px;
-      height: 48px;
-    }
+// affix
+.user-page-header.affix {
+  .users-meta {
+    margin-left: 15px;
   }
 
-  .user-page-content {
-    #user-draft-list {
-      #draft-list {
-        .panel-title {
-          width: 100%;
-
-          .label-draft {
-            padding: 1px 5px;
-            margin: 0 0 0 4px;
-            font-weight: normal;
-          }
-        }
+  h1 {
+    font-size: 1.5em;
+    line-height: 30px;
+  }
 
-        a {
+  .picture {
+    width: 48px;
+    height: 48px;
+  }
+}
+
+.user-page-content {
+  #user-draft-list {
+    #draft-list {
+      .panel-title {
+        width: 100%;
+
+        .label-draft {
+          padding: 1px 5px;
+          margin: 0 0 0 4px;
+          font-weight: normal;
+        }
+      }
 
-          .icon-copy,
-          .draft-delete,
-          .icon-edit {
-            margin: 0 0 0 4px;
-            cursor: pointer;
-          }
+      a {
+        .icon-copy,
+        .draft-delete,
+        .icon-edit {
+          margin: 0 0 0 4px;
+          cursor: pointer;
         }
       }
     }

src/client/styles/scss/_user_growi.scss

@@ -1,4 +1,4 @@
-.growi.main-container .user-page {
+.growi .user-page {
   // affix
   .user-page-header.affix {
     #revision-path {

src/client/styles/scss/_wiki.scss

@@ -230,7 +230,7 @@ div.body {
 }
 
 @include media-breakpoint-down(sm) {
-  .main-container .main .wiki {
+  .main .wiki {
     img {
       max-width: 100%;
     }

src/server/views/admin/customize.html

@@ -494,7 +494,7 @@ export  $initHighlight;</code></pre>
         </p>
         <p class="help-block">
           Examples:
-<pre class="hljs"><code>console.log($('.main-container'));
+<pre class="hljs"><code>console.log($('body'));
 
 window.addEventListener('load', (event) => {
   console.log('config: ', appContainer.config);

src/server/views/installer.html

@@ -37,7 +37,7 @@
 
 {% block html_body %}
 <body
-  class="main-container installer nologin growi"
+  class="installer nologin growi"
   {% block html_base_attr %}{% endblock %}
   data-csrftoken="{{ csrf() }}"
  >

src/server/views/layout/layout.html

@@ -61,7 +61,7 @@
 
 {% block html_body %}
 <body
-  class="main-container {% block html_base_css %}{% endblock %}
+  class="{% block html_base_css %}{% endblock %}
       {% if !getConfig('crowi', 'customize:layout') || 'crowi' === getConfig('crowi', 'customize:layout') %}crowi{% elseif !getConfig('crowi', 'customize:layout') || 'kibela' === getConfig('crowi', 'customize:layout') %}kibela{% else %}growi{% endif %}"
   data-me="{{ user._id.toString() }}"
   data-is-admin="{{ user.admin }}"