Merge pull request #2073 from weseek/support/apply-bootstrap4

Support/apply bootstrap4

resource/locales/en-US/sandbox-bootstrap3.md

@@ -14,47 +14,68 @@
 <div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
 <div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
 
-# Panels
+# Cards
 
-<div class="panel panel-default">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-primary">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-light">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-success">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-secondary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-info">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-dark text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-warning">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-primary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-danger">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-success text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-info text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-warning text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-danger text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
@@ -86,8 +107,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Alignment classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-left">Left aligned text.</p>
     <p class="text-center">Center aligned text.</p>
     <p class="text-right">Right aligned text.</p>
@@ -98,8 +119,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Transformation classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-lowercase">Lowercased text.</p>
     <p class="text-uppercase">Uppercased text.</p>
     <p class="text-capitalize">Capitalized text.</p>
@@ -111,9 +132,12 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual colors
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="text-secondary">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="text-dark">Ut vel lorem aliquet, rhoncus libero at, condimentum mi. Fusce pellentesque quam nec magna maximus porta.</p>
     <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
     <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@@ -124,12 +148,15 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual backgrounds
 
-<div class="panel panel-default">
-  <div class="panel-body">
-    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<div class="card">
+  <div class="card-body">
+    <p class="bg-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="bg-secondary text-white">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="bg-dark text-white">Ut vel lorem aliquet, rhoncus libero at, condimentum mi.</p>
+    <p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
   </div>
 </div>

resource/locales/en-US/sandbox.md

@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
 
 # 目次
 

resource/locales/ja/sandbox-bootstrap3.md

@@ -14,47 +14,68 @@
 <div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
 <div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
 
-# Panels
+# Cards
 
-<div class="panel panel-default">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-primary">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-light">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-success">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-secondary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-info">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-dark text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-warning">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-primary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-danger">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-success text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-info text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-warning text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-danger text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
@@ -86,8 +107,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Alignment classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-left">Left aligned text.</p>
     <p class="text-center">Center aligned text.</p>
     <p class="text-right">Right aligned text.</p>
@@ -98,8 +119,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Transformation classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-lowercase">Lowercased text.</p>
     <p class="text-uppercase">Uppercased text.</p>
     <p class="text-capitalize">Capitalized text.</p>
@@ -111,9 +132,12 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual colors
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="text-secondary">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="text-dark">Ut vel lorem aliquet, rhoncus libero at, condimentum mi. Fusce pellentesque quam nec magna maximus porta.</p>
     <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
     <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@@ -124,12 +148,15 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual backgrounds
 
-<div class="panel panel-default">
-  <div class="panel-body">
-    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<div class="card">
+  <div class="card-body">
+    <p class="bg-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="bg-secondary text-white">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="bg-dark text-white">Ut vel lorem aliquet, rhoncus libero at, condimentum mi.</p>
+    <p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
   </div>
-</div>
+</div>

resource/locales/ja/sandbox.md

@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
 
 # 目次
 
@@ -37,7 +37,7 @@
 
 ## Block 段落
 
-空白行を挟むことで段落となります。aaaa
+空白行を挟むことで段落となります。
 
 ```
 段落1

resource/locales/ja/translation.json

@@ -381,7 +381,7 @@
     "discard_changes": "HackMD の変更を破棄する",
     "integration_failed": "HackMD の統合に失敗しました",
     "fail_to_connect": "GROWI クライアントが HackMD の GROWI agent に接続できませんでした。",
-    "check_configuration": "<a href='https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html'>こちらのマニュアル</a>から設定を確認してください",
+    "check_configuration": "<a href='https://docs.growi.org/ja/admin-guide/admin-cookbook/integrate-with-hackmd.html'>こちらのマニュアル</a>から設定を確認してください",
     "not_initialized": "HackMD コンポーネントは初期化されていません",
     "someone_editing": "このページは、HackMD で編集されています。",
     "this_page_has_draft": "このページは、HackMD のドラフトがあります。"

src/client/js/components/Admin/App/AppSetting.jsx

@@ -112,8 +112,6 @@ class AppSetting extends React.Component {
             </div>
 
             <p className="form-text text-muted">
-              {t('admin:app_setting.enable_files_except_image')}
-              <br />
               {t('admin:app_setting.attach_enable')}
             </p>
           </div>

src/client/js/components/Admin/Customize/CustomizeBehaviorSetting.jsx

@@ -42,7 +42,7 @@ class CustomizeBehaviorSetting extends React.Component {
           <div className="col-12">
             <h2 className="admin-setting-header">{t('admin:customize_setting.behavior')}</h2>
             <div className="row">
-              <div className="col-6">
+              <div className="col-md-6">
                 <CustomizeBehaviorOption
                   behaviorType="growi"
                   isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
@@ -57,7 +57,7 @@ class CustomizeBehaviorSetting extends React.Component {
                 </CustomizeBehaviorOption>
               </div>
 
-              <div className="col-6">
+              <div className="col-md-6">
                 <CustomizeBehaviorOption
                   behaviorType="crowi-plus"
                   isSelected={adminCustomizeContainer.state.currentBehavior === 'crowi-plus'}

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -60,7 +60,7 @@ class CustomizeBehaviorSetting extends React.Component {
 
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isEnabledTimeline"
                   label={t('admin:customize_setting.function_options.timeline')}
@@ -77,7 +77,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isSavedStatesOfTabChanges"
                   label={t('admin:customize_setting.function_options.tab_switch')}
@@ -93,7 +93,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isEnabledAttachTitleHeader"
                   label={t('admin:customize_setting.function_options.attach_title_header')}
@@ -108,7 +108,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0 w-100">
                   <label>{t('admin:customize_setting.function_options.recent_created__n_draft_num_desc')}</label>
                 </div>
@@ -135,7 +135,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isEnabledStaleNotification"
                   label={t('admin:customize_setting.function_options.stale_notification')}
@@ -150,7 +150,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isAllReplyShown"
                   label={t('admin:customize_setting.function_options.show_all_reply_comments')}

src/client/js/components/Admin/Customize/CustomizeHighlightSetting.jsx

@@ -93,7 +93,7 @@ class CustomizeHighlightSetting extends React.Component {
             <h2 className="admin-setting-header">{t('admin:customize_setting.code_highlight')}</h2>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0">
                   <label>{t('admin:customize_setting.theme')}</label>
                 </div>
@@ -113,7 +113,7 @@ class CustomizeHighlightSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     type="checkbox"

src/client/js/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -457,7 +457,7 @@ class ImportForm extends React.Component {
           </div>
         </form>
 
-        <div className="well well-sm small my-4">
+        <div className="card well small my-4">
           <ul>
             <li>{t('admin:importer_management.growi_settings.description_of_import_mode.about')}</li>
             <ul>

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -46,74 +46,76 @@ class PresentationForm extends React.Component {
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 
-        <div className="form-group form-check-inline col-12 my-3">
-          <div className="col-4 align-self-start">
-            <div className="custom-control custom-radio">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id="pageBreakOption1"
-                checked={pageBreakSeparator === 1}
-                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
-              />
-              <label className="custom-control-label" htmlFor="pageBreakOption1">
-                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_one_separator') }</p>
-                <div className="mt-3">
-                  { t('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
-                  <input
-                    className="form-control"
-                    type="text"
-                    value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
-                    readOnly
-                  />
-                </div>
-              </label>
+        <div className="form-group col-12 my-3">
+          <div className="row">
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="pageBreakOption1"
+                  checked={pageBreakSeparator === 1}
+                  onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
+                />
+                <label className="custom-control-label w-100" htmlFor="pageBreakOption1">
+                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_one_separator') }</p>
+                  <div className="mt-3">
+                    { t('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
+                      readOnly
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
-          </div>
 
-          <div className="col-4 align-self-start">
-            <div className="custom-control custom-radio">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id="pageBreakOption2"
-                checked={pageBreakSeparator === 2}
-                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
-              />
-              <label className="custom-control-label" htmlFor="pageBreakOption2">
-                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
-                <div className="mt-3">
-                  { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
-                  <input
-                    className="form-control"
-                    type="text"
-                    value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
-                    readOnly
-                  />
-                </div>
-              </label>
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="pageBreakOption2"
+                  checked={pageBreakSeparator === 2}
+                  onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
+                />
+                <label className="custom-control-label w-100" htmlFor="pageBreakOption2">
+                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
+                  <div className="mt-3">
+                    { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
+                      readOnly
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
-          </div>
-          <div className="col-4 align-self-start">
-            <div className="custom-control custom-radio">
-              <input
-                type="radio"
-                id="pageBreakOption3"
-                className="custom-control-input"
-                checked={pageBreakSeparator === 3}
-                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
-              />
-              <label className="custom-control-label" htmlFor="pageBreakOption3">
-                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.custom_separator') }</p>
-                <div className="mt-3">
-                  { t('admin:markdown_setting.presentation_options.custom_separator_desc') }
-                  <input
-                    className="form-control"
-                    defaultValue={pageBreakCustomSeparator}
-                    onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
-                  />
-                </div>
-              </label>
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  id="pageBreakOption3"
+                  className="custom-control-input"
+                  checked={pageBreakSeparator === 3}
+                  onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
+                />
+                <label className="custom-control-label w-100" htmlFor="pageBreakOption3">
+                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.custom_separator') }</p>
+                  <div className="mt-3">
+                    { t('admin:markdown_setting.presentation_options.custom_separator_desc') }
+                    <input
+                      className="form-control"
+                      defaultValue={pageBreakCustomSeparator}
+                      onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
           </div>
         </div>

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -42,82 +42,84 @@ class XssForm extends React.Component {
     const { xssOption } = adminMarkDownContainer.state;
 
     return (
-      <div className="form-group form-check-inline col-12 my-3">
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio ">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption1"
-              name="XssOption"
-              checked={xssOption === 1}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption1">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.ignore_all_tags') }</p>
-              <div className="mt-4">
-                {t('admin:markdown_setting.xss_options.ignore_all_tags_desc') }
-              </div>
-            </label>
+      <div className="form-group col-12 my-3">
+        <div className="row">
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio ">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption1"
+                name="XssOption"
+                checked={xssOption === 1}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption1">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.ignore_all_tags')}</p>
+                <div className="mt-4">
+                  {t('admin:markdown_setting.xss_options.ignore_all_tags_desc')}
+                </div>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption2"
-              name="XssOption"
-              checked={xssOption === 2}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption2">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
-              <div className="m-t-15">
-                <div className="d-flex justify-content-between">
-                  {t('admin:markdown_setting.xss_options.tag_names')}
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption2"
+                name="XssOption"
+                checked={xssOption === 2}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption2">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
+                <div className="m-t-15">
+                  <div className="d-flex justify-content-between">
+                    {t('admin:markdown_setting.xss_options.tag_names')}
+                  </div>
+                  <textarea
+                    className="form-control xss-list"
+                    name="recommendedTags"
+                    rows="6"
+                    cols="40"
+                    readOnly
+                    defaultValue={tags}
+                  />
                 </div>
-                <textarea
-                  className="form-control xss-list"
-                  name="recommendedTags"
-                  rows="6"
-                  cols="40"
-                  readOnly
-                  defaultValue={tags}
-                />
-              </div>
-              <div className="m-t-15">
-                <div className="d-flex justify-content-between">
-                  {t('admin:markdown_setting.xss_options.tag_attributes')}
+                <div className="m-t-15">
+                  <div className="d-flex justify-content-between">
+                    {t('admin:markdown_setting.xss_options.tag_attributes')}
+                  </div>
+                  <textarea
+                    className="form-control xss-list"
+                    name="recommendedAttrs"
+                    rows="6"
+                    cols="40"
+                    readOnly
+                    defaultValue={attrs}
+                  />
                 </div>
-                <textarea
-                  className="form-control xss-list"
-                  name="recommendedAttrs"
-                  rows="6"
-                  cols="40"
-                  readOnly
-                  defaultValue={attrs}
-                />
-              </div>
-            </label>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption3"
-              name="XssOption"
-              checked={xssOption === 3}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption3">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.custom_whitelist') }</p>
-              <WhiteListInput customizable />
-            </label>
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption3"
+                name="XssOption"
+                checked={xssOption === 3}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption3">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.custom_whitelist')}</p>
+                <WhiteListInput customizable />
+              </label>
+            </div>
           </div>
         </div>
       </div>
@@ -142,8 +144,8 @@ class XssForm extends React.Component {
                   checked={isEnabledXss}
                   onChange={adminMarkDownContainer.switchEnableXss}
                 />
-                <label className="custom-control-label" htmlFor="XssEnable">
-                  {t('admin:markdown_setting.xss_options.enable_xss_prevention') }
+                <label className="custom-control-label w-100" htmlFor="XssEnable">
+                  {t('admin:markdown_setting.xss_options.enable_xss_prevention')}
                 </label>
               </div>
             </div>

src/client/js/components/Admin/Notification/GlobalNotification.jsx

@@ -40,7 +40,7 @@ class GlobalNotification extends React.Component {
     return (
       <React.Fragment>
 
-        <h2 className="border-bottom">{t('notification_setting.valid_page')}</h2>
+        <h2 className="border-bottom my-4">{t('notification_setting.valid_page')}</h2>
 
         <p className="card well">
           {/* eslint-disable-next-line react/no-danger */}

src/client/js/components/Admin/Notification/UserTriggerNotification.jsx

@@ -82,7 +82,7 @@ class UserTriggerNotification extends React.Component {
 
     return (
       <React.Fragment>
-        <h2 className="border-bottom my-5">{t('notification_setting.user_trigger_notification_header')}</h2>
+        <h2 className="border-bottom my-4">{t('notification_setting.user_trigger_notification_header')}</h2>
 
         <table className="table table-bordered">
           <thead>

src/client/js/components/Admin/Security/BasicSecuritySetting.jsx

@@ -68,7 +68,7 @@ class BasicSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="col-6 offset-3">
+          <div className="col-md-6 offset-md-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isBasicEnabled"
@@ -95,7 +95,7 @@ class BasicSecurityManagement extends React.Component {
         {isBasicEnabled && (
         <React.Fragment>
           <div className="row mb-5">
-            <div className="offset-3 col-6">
+            <div className="offset-md-3 col-md-6">
               <div className="custom-control custom-checkbox custom-checkbox-success">
                 <input
                   id="bindByEmail-basic"

src/client/js/components/Admin/Security/GitHubSecuritySetting.jsx

@@ -69,7 +69,7 @@ class GitHubSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="offset-3 col-6 text-left">
+          <div className="col-12 offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGitHubEnabled"
@@ -88,8 +88,8 @@ class GitHubSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-12 col-md-6">
             <input
               className="form-control"
               type="text"

src/client/js/components/Admin/Security/GoogleSecuritySetting.jsx

@@ -68,8 +68,8 @@ class GoogleSecurityManagement extends React.Component {
           </div>
         )}
 
-        <div className="row mb-5">
-          <div className="offset-3 col-6">
+        <div className="row mb-5 mt-3">
+          <div className="col-12 offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGoogleEnabled"
@@ -88,8 +88,8 @@ class GoogleSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-12 col-md-6">
             <input
               className="form-control"
               type="text"

src/client/js/components/Admin/Security/LocalSecuritySetting.jsx

@@ -100,10 +100,10 @@ class LocalSecuritySetting extends React.Component {
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
             <div className="row">
-              <div className="col-3 text-right py-2">
+              <div className="col-12 col-md-3 text-left text-md-right py-2">
                 <strong>{t('Register limitation')}</strong>
               </div>
-              <div className="col-6">
+              <div className="col-12 col-md-6">
                 <div className="dropdown">
                   <button
                     className="btn btn-outline-secondary dropdown-toggle"
@@ -136,10 +136,10 @@ class LocalSecuritySetting extends React.Component {
               </div>
             </div>
             <div className="row">
-              <div className="col-3 text-right">
+              <div className="col-12 col-md-3 text-left text-md-right">
                 <strong dangerouslySetInnerHTML={{ __html: t('The whitelist of registration permission E-mail address') }} />
               </div>
-              <div className="col-6">
+              <div className="col-12 col-md-6">
                 <textarea
                   className="form-control"
                   type="textarea"

src/client/js/components/Admin/Security/SamlSecuritySetting.jsx

@@ -89,7 +89,7 @@ class SamlSecurityManagement extends React.Component {
           />
         )}
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <div className="col-6 offset-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
@@ -109,9 +109,9 @@ class SamlSecurityManagement extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+        <div className="row form-group mb-5">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.callback_URL')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -420,8 +420,8 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               Attribute Mapping Options
             </h3>
 
-            <div className="row mb-5">
-              <div className="offset-3 col-6 text-left">
+            <div className="row form-group mb-5">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserName-SAML"
@@ -442,8 +442,8 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="offset-3 col-6 text-left">
+            <div className="row form-group mb-5">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByEmail-SAML"

src/client/js/components/Admin/Security/TwitterSecuritySetting.jsx

@@ -69,7 +69,7 @@ class TwitterSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="offset-3 col-6">
+          <div className="offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isTwitterEnabled"
@@ -88,8 +88,8 @@ class TwitterSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-md-3 text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -116,8 +116,8 @@ class TwitterSecurityManagement extends React.Component {
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
             <div className="row mb-5">
-              <label htmlFor="TwitterConsumerId" className="col-3 text-right py-2">{t('security_setting.clientID')}</label>
-              <div className="col-6">
+              <label htmlFor="TwitterConsumerId" className="col-md-3 text-md-right py-2">{t('security_setting.clientID')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -132,8 +132,8 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="TwitterConsumerSecret" className="col-3 text-right py-2">{t('security_setting.client_secret')}</label>
-              <div className="col-6">
+              <label htmlFor="TwitterConsumerSecret" className="col-md-3 text-md-right py-2">{t('security_setting.client_secret')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -148,7 +148,7 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <div className="offset-3 col-6">
+              <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserNameTwitter"
@@ -170,7 +170,7 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row my-3">
-              <div className="offset-3 col-5">
+              <div className="offset-4 col-5">
                 <button
                   type="button"
                   className="btn btn-primary"

src/client/js/components/Admin/UserManagement.jsx

@@ -91,6 +91,25 @@ class UserManagement extends React.Component {
     this.props.adminUsersContainer.handleChangeSearchText(event.target.value);
   }
 
+  renderCheckbox(status, statusLabel, statusColor) {
+    return (
+      <div className={`custom-control custom-checkbox custom-checkbox-${statusColor} mr-2`}>
+        <input
+          className="custom-control-input"
+          type="checkbox"
+          id={`c_${status}`}
+          checked={this.props.adminUsersContainer.isSelected(status)}
+          onClick={() => { this.handleClick(status) }}
+        />
+        <label className="custom-control-label" htmlFor={`c_${status}`}>
+          <span className={`badge badge-pill badge-${statusColor} d-inline-block vt mt-1`}>
+            {statusLabel}
+          </span>
+        </label>
+      </div>
+    );
+  }
+
   render() {
     const { t, adminUsersContainer } = this.props;
 
@@ -138,11 +157,10 @@ class UserManagement extends React.Component {
         </p>
 
         <h2>{t('User_Management')}</h2>
-
         <div className="border-top border-bottom">
 
           <div className="d-flex justify-content-start align-items-center my-2">
-            <div>
+            <div className="d-flex align-items-baseline">
               <i className="icon-magnifier mr-1"></i>
               <span className="search-typeahead">
                 <input
@@ -154,70 +172,19 @@ class UserManagement extends React.Component {
               </span>
             </div>
 
-            <div className="mx-5 form-inline">
-              <div className="custom-control custom-checkbox custom-checkbox-primary mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c1"
-                  checked={adminUsersContainer.isSelected('all')}
-                  onClick={() => { this.handleClick('all') }}
-                />
-                <label className="custom-control-label" htmlFor="c1">
-                  <span className="badge badge-pill badge-primary d-inline-block vt mt-1">All</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-info mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c2"
-                  checked={adminUsersContainer.isSelected('registered')}
-                  onClick={() => { this.handleClick('registered') }}
-                />
-                <label className="custom-control-label" htmlFor="c2">
-                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Approval Pending</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-success mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c3"
-                  checked={adminUsersContainer.isSelected('active')}
-                  onClick={() => { this.handleClick('active') }}
-                />
-                <label className="custom-control-label" htmlFor="c3">
-                  <span className="badge badge-pill badge-success d-inline-block vt mt-1">Active</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-warning mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c4"
-                  checked={adminUsersContainer.isSelected('suspended')}
-                  onClick={() => { this.handleClick('suspended') }}
-                />
-                <label className="custom-control-label" htmlFor="c4">
-                  <span className="badge badge-pill badge-warning d-inline-block vt mt-1">Suspended</span>
-                </label>
+            <div className="mx-5">
+              <div className="form-inline">
+                {this.renderCheckbox('all', 'All', 'primary')}
+                {this.renderCheckbox('registered', 'Approval Pending', 'info')}
+                {this.renderCheckbox('active', 'Active', 'success')}
+                {this.renderCheckbox('suspended', 'Suspended', 'warning')}
+                {this.renderCheckbox('invited', 'Invited', 'info')}
               </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-info">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c5"
-                  checked={adminUsersContainer.isSelected('invited')}
-                  onClick={() => { this.handleClick('invited') }}
-                />
-                <label className="custom-control-label" htmlFor="c5">
-                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Invited</span>
-                </label>
+              <div>
+                {
+                  this.state.isNotifyCommentShow
+                  && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>
+                }
               </div>
             </div>
 
@@ -234,11 +201,6 @@ class UserManagement extends React.Component {
                 Reset
               </button>
             </div>
-
-            <div className="ml-4">
-              {this.state.isNotifyCommentShow && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>}
-            </div>
-
           </div>
         </div>
 

src/client/js/components/Me/ApiSettings.jsx

@@ -65,7 +65,7 @@ class ApiSettings extends React.Component {
 
 
         <div className="row">
-          <div className="offset-lg-1 col-lg-7">
+          <div className="offset-lg-2 col-lg-7">
 
             <p className="alert alert-warning">
               { t('page_me_apitoken.notice.update_token1') }<br />

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -44,11 +44,15 @@ const GrowiSubNavigation = (props) => {
   }
 
   const additionalClassNames = ['grw-subnavbar'];
-  if (isHeaderSticky) {
-    additionalClassNames.push('grw-subnavbar-sticky');
-  }
-  if (isSubnavCompact) {
-    additionalClassNames.push('grw-subnavbar-compact');
+  const layoutType = appContainer.getConfig().layoutType;
+
+  if (layoutType === 'growi') {
+    if (isHeaderSticky) {
+      additionalClassNames.push('grw-subnavbar-sticky');
+    }
+    if (isSubnavCompact) {
+      additionalClassNames.push('grw-subnavbar-compact');
+    }
   }
 
   return (

src/client/js/components/Navbar/GrowiSubNavigationForUserPage.jsx

@@ -16,14 +16,18 @@ const GrowiSubNavigationForUserPage = (props) => {
   const { pageId, isHeaderSticky, isSubnavCompact } = pageContainer.state;
 
   const additionalClassNames = ['grw-subnavbar', 'grw-subnavbar-user-page'];
-  if (isHeaderSticky) {
-    additionalClassNames.push('grw-subnavbar-sticky');
-  }
-  if (isSubnavCompact) {
-    additionalClassNames.push('py-2 grw-subnavbar-compact');
-  }
-  else {
-    additionalClassNames.push('py-3');
+  const layoutType = appContainer.getConfig().layoutType;
+
+  if (layoutType === 'growi') {
+    if (isHeaderSticky) {
+      additionalClassNames.push('grw-subnavbar-sticky');
+    }
+    if (isSubnavCompact) {
+      additionalClassNames.push('py-2 grw-subnavbar-compact');
+    }
+    else {
+      additionalClassNames.push('py-3');
+    }
   }
 
   return (

src/client/js/components/PageEditorByHackmd.jsx

@@ -376,10 +376,10 @@ class PageEditorByHackmd extends React.Component {
 
         { this.state.hasError && (
           <div className="hackmd-error position-absolute d-flex flex-column justify-content-center align-items-center">
-            <div className="white-box text-center">
+            <div className="bg-box p-5 text-center">
               <h2 className="text-warning"><i className="icon-fw icon-exclamation"></i> {t('hackmd.integration_failed')}</h2>
               <h4>{this.state.errorMessage}</h4>
-              <p className="well well-sm text-danger">
+              <p className="card well well-sm text-danger">
                 {this.state.errorReason}
               </p>
               {/* eslint-disable-next-line react/no-danger */}

src/client/styles/scss/_layout_kibela.scss

@@ -121,13 +121,8 @@ body.kibela {
 
     @include expand-editor($header-plus-footer);
 
-    .main {
-      > .row.page-content {
-        > .col-xs-12 {
-          width: 100%;
-          padding: 0;
-        }
-      }
+    .kibela-block {
+      max-width: unset;
     }
 
     .tab-content {

src/client/styles/scss/_on-edit.scss

@@ -47,6 +47,16 @@ body.on-edit {
     display: none;
   }
 
+  &.hackmd .grw-nav-item-edit {
+    display: none;
+  }
+
+  &.hackmd {
+    #page-editor-options-selector {
+      display: none !important;
+    }
+  }
+
   &:not(.hackmd) .nav-tab-hackmd {
     display: none;
   }

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -64,6 +64,17 @@ textarea.form-control {
 /*
  * Table
  */
+.table {
+  @extend .table-dark;
+}
+
+/*
+ * Card
+ */
+.card:not([class*='bg-']) {
+  @extend .bg-dark;
+}
+
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,

src/client/styles/scss/theme/_apply-colors-kibela.scss

@@ -25,11 +25,6 @@ body.kibela {
     background-color: $bgcolor-global;
   }
 
-  /* header*/
-  .background-t {
-    background-color: transparent;
-  }
-
   .search-input-group,
   .search-typeahead {
     .btn {
@@ -160,11 +155,6 @@ body.kibela {
     }
   }
 
-  /* subnavbar */
-  .grw-subnavbar {
-    background: transparent;
-  }
-
   /* navbar */
   .grw-navbar {
     .nav-item > .nav-link:hover {

src/client/styles/scss/theme/_apply-colors.scss

@@ -11,6 +11,7 @@ $link-hover-color: $color-link-hover;
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
+@import 'mixins-for-tables';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
@@ -40,6 +41,21 @@ $link-hover-color: $color-link-hover;
   }
 }
 
+// List Group
+.list-group {
+  .list-group-item {
+    color: $color-list;
+    background-color: $bgcolor-list;
+    &:hover {
+      background-color: $color-list-hover;
+    }
+    &.active {
+      color: $color-list-active;
+      background-color: $bgcolor-list-active;
+    }
+  }
+}
+
 // Form
 .form-control {
   @include form-control-focus();
@@ -102,6 +118,13 @@ $link-hover-color: $color-link-hover;
   }
 }
 
+/*
+ * Icon
+ */
+.editor-container .navbar-editor svg {
+  fill: $color-editor-icons;
+}
+
 /*
  * code color of inline-code
  */
@@ -136,10 +159,6 @@ $link-hover-color: $color-link-hover;
 /*
  * cards
  */
-.card-header {
-  border: 0;
-}
-
 .card.well {
   background-color: $bgcolor-card;
   border-color: $light;
@@ -167,18 +186,6 @@ $link-hover-color: $color-link-hover;
   }
 }
 
-/*
- * Crowi sidebar
- */
-.crowi-sidebar {
-  background-color: darken($bgcolor-global, 4%);
-  border-left: solid 1px $border-color;
-
-  .system-version {
-    background-color: darken($bgcolor-global, 4%);
-  }
-}
-
 /*
  * GROWI wiki
  */
@@ -308,3 +315,10 @@ mark.rbt-highlight-text {
     }
   }
 }
+
+/*
+ * HackMd
+ */
+.bg-box {
+  background-color: $bgcolor-global;
+}

src/client/styles/scss/theme/_mixins-for-tables.scss

@@ -0,0 +1,34 @@
+//== Table
+$table-variants: (
+  'light': $light,
+  'dark': $dark,
+);
+
+// remove when master version is released
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $table-hover-bg-factor: 0.075 !default;
+    $table-striped-bg-factor: 0.05 !default;
+    $body-bg: $white !default;
+    $table-active-bg-factor: 0.1 !default;
+    $table-border-factor: 0.1 !default;
+
+    $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
+    $color: gray;
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+    --bs-table-bg: #{$background};
+    --bs-table-striped-bg: #{$striped-bg};
+    --bs-table-striped-color: #{color-contrast($striped-bg)};
+    --bs-table-active-bg: #{$active-bg};
+    --bs-table-active-color: #{color-contrast($active-bg)};
+    --bs-table-hover-bg: #{$hover-bg};
+    --bs-table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor));
+  }
+}

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -63,3 +63,7 @@
     background: $color;
   }
 }
+
+@each $color, $value in $table-variants {
+  @include table-variant($color, $value);
+}

src/client/styles/scss/theme/antarctic.scss

@@ -63,10 +63,20 @@ html[light] {
   $color-link-nabvar: $color-reversal;
   $color-inline-code: #c7254e;
 
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: $bgcolor-global;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -109,10 +119,20 @@ html[dark] {
   $color-link-nabvar: $color-global;
   $color-inline-code: #c7254e;
 
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: $bgcolor-global;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Icon colors
+  $color-editor-icons: darken($accentcolor, 15%);
+
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
 

src/client/styles/scss/theme/default.scss

@@ -1,6 +1,5 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
-
 // == Define Bootstrap theme colors
 //
 
@@ -35,10 +34,20 @@ html[light] {
   $color-link-nabvar: $color-reversal;
   $color-inline-code: #c7254e;
 
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: $bgcolor-global;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -81,10 +90,20 @@ html[dark] {
   $color-link-nabvar: $color-global;
   $color-inline-code: #c7254e;
 
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: $bgcolor-global;
+  $color-list-active: $color-global;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
 

src/client/styles/scss/theme/kibela.scss

@@ -12,9 +12,8 @@ html[light] {
   $bgcolor-navbar: white;
   $bgcolor-navbar-active: $bgcolor-theme;
   $bgcolor-global: $themelight;
-  $bgcolor-card: $lightthemecolor;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
-
+  $bgcolor-card: $lightthemecolor;
   $color-header: $bgcolor-theme;
   $color-global: #3c4a60;
   $color-link: rgb(74, 109, 204);
@@ -25,10 +24,20 @@ html[light] {
   $primary: $bgcolor-theme;
   $info: lighten($bgcolor-theme, 20%);
 
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: $bgcolor-global;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
   // Logo colors
   $bgcolor-logo: transparent;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;
@@ -61,9 +70,8 @@ html[dark] {
   $bgcolor-navbar: transparent;
   $bgcolor-navbar-active: $bgcolor-theme;
   $bgcolor-global: $themelight;
-  $bgcolor-card: #e3e5e7;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
-
+  $bgcolor-card: #e3e5e7;
   $color-header: $bgcolor-theme;
   $color-global: #3c4a60;
   $color-link: rgb(74, 109, 204);
@@ -74,10 +82,20 @@ html[dark] {
   $primary: $bgcolor-theme;
   $info: lighten($bgcolor-theme, 20%);
 
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: $bgcolor-global;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
   // Logo colors
   $bgcolor-logo: red;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;

src/server/views/_form.html

@@ -12,7 +12,7 @@
 <div class="page-editor-footer d-flex flex-row align-items-center justify-content-between">
 
   <div>
-    <div id="page-editor-options-selector" class="d-none d-sm-block"></div>
+    <div id="page-editor-options-selector" class="d-none d-md-block"></div>
   </div>
 
   <div id="save-page-controls"

src/server/views/layout-kibela/widget/header.html

@@ -1,49 +1,7 @@
-<header id="page-header background-t">
-  <div class="d-flex align-items-center">
-    <div class="hidden-xs hidden-sm">
-      <a class="logo" href="/">
-        <div class="">{% include '../../widget/logo.html' %}</div>
-      </a>
-    </div>
-    <div class="title-container">
-      <h1 class="title" id="revision-path"></h1>
-      {% if not forbidden and not isTrashPage() %}
-        <div id="tag-label"></div>
-      {% endif %}
-    </div>
-    {% if page %}
+<div id="grw-subnav" class="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
 
-    <ul class="authors hidden-sm hidden-xs text-nowrap grw-pt-10px">
-      <li>
-        <div class="d-flex align-items-center b">
-          <a class="mr-2" href="{{ userPageRoot(page.creator) }}">
-            <img src="{{ page.creator|default(author)|picture }}" class="picture rounded-circle">
-          </a>
-          <div>
-            <div>Created by
-              <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a>
-            </div>
-            <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
-          </div>
-        </div>
-      </li>
-      <li class="mt-2">
-        <div class="d-flex align-items-center">
-          <a class="mr-2" href="{{ userPageRoot(author) }}">
-            <img src="{{ author|picture }}" class="picture rounded-circle">
-          </a>
-          <div>
-            <div>Updated by
-              <a href="{{ userPageRoot(author) }}">{{ author.name }}</a>
-            </div>
-            <div class="text-muted">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
-          </div>
-        </div>
-      </li>
-    </ul>
-    {% endif %} {% if not page and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage()
-    %} {% if '/' === path.slice(-1) %} {% include '../../widget/create_portal.html' %} {% endif %} {% endif %}
-
-  </div>
-
-</header>
+{% if not page and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage()　%}
+  {% if '/' === path.slice(-1) %}
+    {% include '../../widget/create_portal.html' %}
+  {% endif %}
+{% endif %}

src/server/views/layout/layout.html

@@ -131,7 +131,6 @@
   {% include '../modal/create_page.html' %}
   {% endblock  %} {# layout_head_nav #}
 
-  {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
 
   <div class="d-flex">
@@ -139,6 +138,7 @@
     <div id="grw-sidebar-wrapper"></div>
 
     <div id="page-wrapper" class="flex-grow-1">
+      {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
       {% block layout_main %}
       {% endblock %} {# layout_main #}
     </div>

src/server/views/modal/create_template.html

@@ -19,7 +19,7 @@
                   <p class="text-center"><code>_template</code></p>
                   <p class="form-text text-muted text-center"><small>{{ t('template.children.desc') }}</small></p>
                 </div>
-                <div class="card-footer text-center bg-white">
+                <div class="card-footer text-center">
                   <a href="{{templateParentPath}}_template#edit"
                       class="btn btn-sm btn-primary" id="template-button-children">
                       {{ t("Edit") }}
@@ -34,7 +34,7 @@
                   <p class="text-center"><code>__template</code></p>
                   <p class="form-text text-muted text-center"><small>{{ t('template.decendants.desc') }}</small></p>
                 </div>
-                <div class="card-footer text-center bg-white">
+                <div class="card-footer text-center">
                   <a href="{{templateParentPath}}__template#edit"
                       class="btn btn-sm btn-primary" id="template-button-decendants">
                       {{ t("Edit") }}