modify layout

lib/views/layout-kibela/base/layout.html

@@ -1,14 +1,24 @@
-{% extends '../../layout/layout.html' %} {% block layout_main %}
-<div class="container-fluid">
+{% extends '../../layout/layout.html' %}
 
-  <div class="row body m-0 p-0">
+{% block layout_main %}
+<div class="container-fluid">
 
-    <div id="main" class="main col-md-7 kibela-block bg-white m-t-30 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
 
 
+  <div class="row body m-0 p-0">
 
-      {% block content_main_before %} {% endblock %} {% block content_main %} {% endblock content_main %} {% block content_main_after
-      %} {% endblock %}
+    <div id="main" class="main col-md-7 kibela-block bg-white m-t-30 round-corner {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+        <div class="row bg-title">
+            <div class="col-xs-12">
+              {% block content_header %}
+              {% endblock %}
+            </div>
+          </div><!-- /.bg-title -->
+      {% block content_main_before %}
+      {% endblock %} {% block content_main %}
+      {% endblock content_main %}
+      {% block content_main_after%}
+      {% endblock %}
     </div>
 
   </div>

lib/views/layout-kibela/page_list.html

@@ -1,29 +1,27 @@
-{% extends 'base/layout.html' %} {% block content_header %} {% include 'widget/header.html' %} {% endblock %} {% block content_main_before
-%} {% endblock %} {% block content_main %}
-<div class="row page-content">
+{% extends 'base/layout.html' %}
 
+{% block content_header %}
+ {% include 'widget/header.html' %}
+ {% endblock %}
 
 
-    <div class="row bg-title">
-        <div class="col-xs-12">
-          {% block content_header %} {% endblock %}
-        </div>
-      </div>
-      <!-- /.bg-title -->
+ {% block content_main_before%}
+ {% endblock %}
+
+
+ {% block content_main %}
+<div class="page-content">
+
 
 
 
-  <div class="m-t-30">
+
+  <div class="col-xs-12">
 
     {% include '../widget/page_content.html' %}
 
   </div>
 
-    <div class="row page-list bg-white {% if isPortal %}m-t-30{% endif %}">
-      <div class="col-md-10">
-        {% include '../widget/page_list_and_timeline.html' %}
-      </div>
-    </div>
 
   {# force remove #revision-toc from #content_main of parent #}
   <script>
@@ -33,19 +31,37 @@
 
 </div> {# /.col- #}
 
+    {# relocate #revision-toc #}
+    <div class="col-lg-10 col-md-8 revision-toc-container hidden-sm hidden-xs position-absolute">
+      <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="80">
+        <div id="revision-toc-content" class="revision-toc-content"></div>
+      </div>
+    </div> {# /.col- #}
+
 
-{# relocate #revision-toc #}
-<div class="col-lg-10 col-md-8 revision-toc-container hidden-sm hidden-xs position-absolute">
-  <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="80">
-    <div id="revision-toc-content" class="revision-toc-content"></div>
+  <div class="row page-list bg-white {% if isPortal %}m-t-30{% endif %}">
+    <div class="col-md-10">
+      {% include '../widget/page_list_and_timeline.html' %}
+    </div>
   </div>
-</div> {# /.col- #} {% endblock %} {% block content_footer %} {% if page %} {% include '../widget/page_attachments.html' %} {% endif
-%} {% endblock %} {% block body_end %}
+{% endblock %}
+
+
+{% block content_footer %}
+  {% if page %}
+    {% include '../widget/page_attachments.html' %}
+  {% endif%}
+{% endblock %}
+
+
+{% block body_end %}
 <div id="presentation-layer" class="fullscreen-layer">
   <div id="presentation-container"></div>
 </div>
 <div id="crowi-modals">
-  {% include '../widget/page_modals.html' %} {% include '../modal/what_is_portal.html' %} {% include '../modal/unportalize.html'
+  {% include '../widget/page_modals.html' %}
+  {% include '../modal/what_is_portal.html' %}
+  {% include '../modal/unportalize.html'
   %}
 </div>
 {% endblock %}

resource/styles/scss/_layout_kibela.scss

@@ -1,13 +1,49 @@
 .kibela {
 
-  html, body, #page-wrapper {
+  p, h1, h2, h3, h4, h5, h6, li, span, i {
+    color: #3c4a60;
+  }
+  body, html {
+    background-color: gray;
+  }
+  .container-fluid {
+    width: 100%;
+  }
+  .logo-mark {
+    background-color: white;
+    height: 50px;
+  }
+  .group1 {
+   background-color: #5584E1;
+  }
+  .navbar-header {
+    background: white;
+    margin: none !important;
+    padding: none !important;
+  }
+
+  #page-wrapper {
     background-color: #F4F5F6 !important;
 
   }
+  .header-wrap {
+    margin: none !important;
+    padding: none !important;
 
+    svg {
+      display: none;
+    }
+  }
+  .round-corner {
+    border-radius: 0.5em;
+    border-top: solid 0.4em #5584E1;
+    z-index: absolute;
+  }
+  .d-flex {
+    position: relative;
+  }
   .kibela-block {
-    border-top-left-radius: 0.7em;
-    border-top-right-radius: 0.7em;
+
     position: absolute;
     top: 0px;
     right: 0px;
@@ -19,19 +55,16 @@
     margin: none !important;
     padding: none !important;
     background: transparent;
-    width: 100%;
-  }
-  .page-content {
-    padding: 15px;
-    margin: auto;
-  }
-
+    border: none;
+   }
 }
 .kibela.main-container {
   .content-main {
     padding: 0;
+    border-radius: 0.3em;
+    border-top: solid 0.2em #5584E1;
+    z-index: absolute;
   }
-
   .revision-toc {
     &.affix {
       right: 6rem;