modify border and radius

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

@@ -5,8 +5,8 @@
 
   <div class="row body m-0 p-0">
 
-    <div id="main" class="main col-md-7 col-xs-12 kibela-block bg-white m-t-30 round-corner-top {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
-        <div class="row bg-title">
+    <div id="main" class="main col-md-7 col-xs-12 kibela-block bg-white m-t-30 round-corner round-corner-top {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
+        <div class="row bg-title m-t-10">
             <div class="col-xs-12">
               {% block content_header %}
               {% endblock %}

lib/views/layout-kibela/page.html

@@ -12,9 +12,10 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="col-lg-12 bg-white round-corner">
 
-      {% include '../widget/page_content.html' %}
+    <div class="col-xs-12 bg-white round-corner">
+
+     {% include '../widget/page_content.html' %}
 
       {# force remove #revision-toc from #content_main of parent #}
       <script>
@@ -33,9 +34,9 @@
   </div>
 
   {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
-  <div class="row page-list m-t-30 p-10 p-t-20 p-b-20 bg-white">
+  <div class="row page-list m-t-30 round-corner">
     <div class="col-md-10">
-      {% include '../widget/page_list_and_timeline_kibela.html' %}
+      {% include '../widget/page_list_and_timeline.html' %}
     </div>
   </div>
   {% endif %}

lib/views/layout-kibela/page_list.html

@@ -13,7 +13,7 @@
 <div class="row page-content">
 
 
-  <div class="col-xs-12">
+  <div class="col-xs-12 bg-white">
 
     {% include '../widget/page_content.html' %}
 
@@ -21,21 +21,21 @@
 
 
   {# force remove #revision-toc from #content_main of parent #}
-  <script>
-    $('#revision-toc').remove();
+      <script>
+        $('#revision-toc').remove();
+      </script>
 
-  </script>
-
-</div> {# /.col- #}
+    </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-lg-10 col-md-8 revision-toc-container hidden-sm hidden-xs position-absolute">
+    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       <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- #}
 
 
+
   <div class="row page-list bg-white round-corner m-20 {% if isPortal %}m-t-30{% endif %}">
     <div class="col-md-10 col-xs-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}

lib/views/layout/layout.html

@@ -178,7 +178,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
         {% if user %}
         <li class="nav-item-create-page">
-          <a href="#" data-target="#create-page" data-toggle="modal">
+          <a href="#" data-target="#create-page" data-toggle="modal" class="create-page">
             <i class="icon-pencil"></i><span>{{ t('New') }}</span>
           </a>
         </li>

resource/styles/scss/_layout_kibela.scss

@@ -36,25 +36,29 @@
     background: white;
     color: #3c4a60;
     border: none;
-    height: 58px;
-    padding: 6.5px 8px 5px 8px;
+    height: 60px;
+    padding: 5px 8px 5px 8px;
 
 
     .navbar-right {
-      height: 45px;
       a {
-        padding-right: 1em;
-        padding-left: 1em;
-        margin-right: 1em;
-        margin-left: 1em;
+        margin-right: 1.5em;
       }
 
     }
-    .nav-item-create-page {
+    .navbar-top-links > li > a{
+    border-radius: 0.35em;
+    height: 40px !important;
+    }
+    .create-page {
       background: #5584E1;
-      border-radius: 0.3em;
-      height: 45px;
+      border-radius: 0.35em;
 
+      width: 110px;
+      text-align: center;
+      &:hover{
+        background:rgb(124, 168, 255);
+    }
       span, i {
       color: white;
       }
@@ -87,10 +91,10 @@
     background-color: #F4F5F6 !important;
   }
   .round-corner {
-    border-radius: 0.3em;
+    border-radius: 0.35em;
   }
   .round-corner-top {
-    border-radius: 0.3em;
+    border-radius: 0.35em;
     border-top: solid 0.4em #5584E1;
     z-index: absolute;
   }
@@ -101,7 +105,7 @@
     bottom: 0px;
     left: 0px;
     margin: auto;
-    height: 10em;
+    height: 11em;
   }
   .bg-title {
     position: relative;
@@ -214,7 +218,7 @@
       .page-comment-main {
         @extend %comment-section;
         background: #D8E2EB;
-        border-radius: 0.3em;
+        border-radius: 0.35em;
       }
 
       // コメント本文
@@ -241,12 +245,11 @@
 
     // display cheatsheet for comment form only
     .comment-form {
+      border: none;
       .editor-cheatsheet {
           display: none;
       }
 
-
-
       position: relative;
       margin-top: 2em;
       // user icon
@@ -258,7 +261,7 @@
       .comment-form-main {
         @extend %comment-section;
         background: #D8E2EB;
-        border-radius: 0.3em;
+        border-radius: 0.35em;
       }
 
       // textarea
@@ -315,20 +318,31 @@
 
 
 /* edit */
-.CodeMirror {
-  border: solid 2px lightgray;
-}
+
+  .CodeMirror {
+    border-radius: 0.35em;
+    border-top: solid 0.3em #5584E1;
+    border-left: solid 1.2px lightgray;
+    border-right: solid 1.2px lightgray;
+    border-bottom: solid 1.2px lightgray;
+    border-radius: 0.35em;
+  }
   .tab-content {
     padding: 1em;
   }
   .tab-pane {
 
     .page-editor-editor-container {
-      padding: 0px;
+      margin: 0px;
+      border: none !important;
     }
 
   }
-
+  .page-editor-preview-container {
+    background: white !important;
+    padding-right: 0px !important;
+    padding-left: 2em;
+  }