Kaynağa Gözat

adjust .btn-open-dropzone styles

Yuki Takei 7 yıl önce
ebeveyn
işleme
f1f83b5db5

+ 21 - 1
src/client/styles/scss/_editor-attachment.scss

@@ -1,6 +1,7 @@
 @import 'editor-overlay';
 @import 'editor-overlay';
 
 
 .editor-container {
 .editor-container {
+
   // for Dropzone
   // for Dropzone
   .dropzone {
   .dropzone {
     @mixin insertSimpleLineIcons($code) {
     @mixin insertSimpleLineIcons($code) {
@@ -26,6 +27,7 @@
         }
         }
       }
       }
     }
     }
+
     // uploading
     // uploading
     &.dropzone-uploading {
     &.dropzone-uploading {
       @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
       @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
@@ -37,14 +39,17 @@
         .overlay-content {
         .overlay-content {
           // insert content
           // insert content
           @include insertSimpleLineIcons('\e617'); // icon-exclamation
           @include insertSimpleLineIcons('\e617'); // icon-exclamation
+
           &:after {
           &:after {
             content: 'File uploading is disabled';
             content: 'File uploading is disabled';
           }
           }
         }
         }
       }
       }
     }
     }
+
     // uploadable
     // uploadable
     &.dropzone-uploadable {
     &.dropzone-uploadable {
+
       // accepted
       // accepted
       &.dropzone-accepted:not(.dropzone-rejected) {
       &.dropzone-accepted:not(.dropzone-rejected) {
         .overlay.overlay-dropzone-active {
         .overlay.overlay-dropzone-active {
@@ -53,33 +58,39 @@
           .overlay-content {
           .overlay-content {
             // insert content
             // insert content
             @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
             @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
+
             &:after {
             &:after {
               content: 'Drop here to upload';
               content: 'Drop here to upload';
             }
             }
+
             // style
             // style
             color: #666;
             color: #666;
             background: rgba(200, 200, 200, 0.8);
             background: rgba(200, 200, 200, 0.8);
           }
           }
         }
         }
       }
       }
+
       // file type mismatch
       // file type mismatch
       &.dropzone-rejected:not(.dropzone-uploadablefile) {
       &.dropzone-rejected:not(.dropzone-uploadablefile) {
         .overlay.overlay-dropzone-active {
         .overlay.overlay-dropzone-active {
           .overlay-content {
           .overlay-content {
             // insert content
             // insert content
             @include insertSimpleLineIcons('\e032'); // icon-picture
             @include insertSimpleLineIcons('\e032'); // icon-picture
+
             &:after {
             &:after {
               content: 'Only an image file is allowed';
               content: 'Only an image file is allowed';
             }
             }
           }
           }
         }
         }
       }
       }
+
       // multiple files
       // multiple files
       &.dropzone-accepted.dropzone-rejected {
       &.dropzone-accepted.dropzone-rejected {
         .overlay.overlay-dropzone-active {
         .overlay.overlay-dropzone-active {
           .overlay-content {
           .overlay-content {
             // insert content
             // insert content
             @include insertSimpleLineIcons('\e617'); // icon-exclamation
             @include insertSimpleLineIcons('\e617'); // icon-exclamation
+
             &:after {
             &:after {
               content: 'Only 1 file is allowed';
               content: 'Only 1 file is allowed';
             }
             }
@@ -87,7 +98,9 @@
         }
         }
       }
       }
     }
     }
-  } // end of.dropzone
+
+    /* end of.dropzone */
+  }
 
 
   .btn-open-dropzone {
   .btn-open-dropzone {
     z-index: 2;
     z-index: 2;
@@ -96,10 +109,17 @@
     font-size: small;
     font-size: small;
     border: none;
     border: none;
     border-top: 1px dotted #ccc;
     border-top: 1px dotted #ccc;
+    border-bottom: none;
     border-radius: 0;
     border-radius: 0;
+
     &:active {
     &:active {
       box-shadow: none;
       box-shadow: none;
     }
     }
+
+    &:hover,
+    &:focus {
+      border-bottom: none;
+    }
   }
   }
 }
 }
 
 

+ 40 - 5
src/client/styles/scss/_layout_kibela.scss

@@ -1,4 +1,5 @@
 body.kibela {
 body.kibela {
+
   .icon-link,
   .icon-link,
   .CodeMirror-hint-active,
   .CodeMirror-hint-active,
   .nav-main-left-tab,
   .nav-main-left-tab,
@@ -6,59 +7,73 @@ body.kibela {
   .active {
   .active {
     color: #5882fa;
     color: #5882fa;
   }
   }
+
   .bg-white {
   .bg-white {
     background: #fefffe !important;
     background: #fefffe !important;
   }
   }
+
   .logo {
   .logo {
     background: transparent;
     background: transparent;
+
     .logo-mark {
     .logo-mark {
       height: 50px;
       height: 50px;
       background-color: white;
       background-color: white;
       box-shadow: none;
       box-shadow: none;
+
       svg {
       svg {
         width: 60px;
         width: 60px;
       }
       }
     }
     }
   }
   }
+
   /* header */
   /* header */
   .background-t {
   .background-t {
     background-color: transparent;
     background-color: transparent;
   }
   }
+
   .authors {
   .authors {
     padding-top: 10px;
     padding-top: 10px;
+
     li {
     li {
       list-style: none !important;
       list-style: none !important;
     }
     }
   }
   }
+
   .search-input-group,
   .search-input-group,
   .search-typeahead {
   .search-typeahead {
     .btn {
     .btn {
       background-color: transparent;
       background-color: transparent;
     }
     }
   }
   }
+
   .panel-heading {
   .panel-heading {
     border-radius: 0 !important;
     border-radius: 0 !important;
   }
   }
+
   .btn-open-dropzone {
   .btn-open-dropzone {
     background: rgb(243, 245, 247);
     background: rgb(243, 245, 247);
-    border-bottom: 0px !important;
   }
   }
+
   /* page list */
   /* page list */
   .page-list {
   .page-list {
     background: white;
     background: white;
   }
   }
+
   .page-attachments-row {
   .page-attachments-row {
     background-color: #e5ecf1 !important;
     background-color: #e5ecf1 !important;
     border: 0px;
     border: 0px;
   }
   }
+
   .round-corner {
   .round-corner {
     border-radius: 0.35em;
     border-radius: 0.35em;
   }
   }
+
   .round-corner-top {
   .round-corner-top {
     z-index: absolute;
     z-index: absolute;
     border-top: solid 0.4em #5584e1;
     border-top: solid 0.4em #5584e1;
     border-radius: 0.35em;
     border-radius: 0.35em;
   }
   }
+
   .kibela-block {
   .kibela-block {
     position: absolute;
     position: absolute;
     top: 0px;
     top: 0px;
@@ -71,17 +86,21 @@ body.kibela {
     border-top: solid 0.4em #5584e1;
     border-top: solid 0.4em #5584e1;
     border-radius: 0.35em;
     border-radius: 0.35em;
   }
   }
+
   .bg-title {
   .bg-title {
     position: relative;
     position: relative;
     background: transparent;
     background: transparent;
     border: none;
     border: none;
+
     svg {
     svg {
       display: none;
       display: none;
     }
     }
+
     @media screen and (max-width: 765px) {
     @media screen and (max-width: 765px) {
       padding-top: 30px;
       padding-top: 30px;
     }
     }
   }
   }
+
   .revision-toc {
   .revision-toc {
     &.affix {
     &.affix {
       top: calc(60px + 5px);
       top: calc(60px + 5px);
@@ -89,9 +108,11 @@ body.kibela {
       min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
       min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
       margin-top: 40px;
       margin-top: 40px;
     }
     }
+
     .revision-toc-content {
     .revision-toc-content {
       padding: 0;
       padding: 0;
     }
     }
+
     @media screen and (max-width: 1400px) {
     @media screen and (max-width: 1400px) {
       &.affix {
       &.affix {
         right: 0rem !important;
         right: 0rem !important;
@@ -99,15 +120,19 @@ body.kibela {
       }
       }
     }
     }
   }
   }
+
   /* search page */
   /* search page */
   .search-result-list,
   .search-result-list,
   .page-list-li {
   .page-list-li {
     background: #f4f5f6;
     background: #f4f5f6;
   }
   }
+
   /* Tabs */
   /* Tabs */
   .nav.nav-tabs {
   .nav.nav-tabs {
     border-bottom-color: #f4f5f6;
     border-bottom-color: #f4f5f6;
-    > li > a {
+
+    >li>a {
+
       &,
       &,
       &:hover,
       &:hover,
       &:focus {
       &:focus {
@@ -117,33 +142,39 @@ body.kibela {
         border-left: none;
         border-left: none;
       }
       }
     }
     }
-    > li.active > a {
+
+    >li.active>a {
       background: transparent !important;
       background: transparent !important;
       border-top: none;
       border-top: none;
       border-right: none;
       border-right: none;
       border-bottom: solid 2.7px #5584e1;
       border-bottom: solid 2.7px #5584e1;
       border-left: none;
       border-left: none;
     }
     }
+
     .wiki {
     .wiki {
       h1 {
       h1 {
         border-bottom: solid 2px #5584e1 !important;
         border-bottom: solid 2px #5584e1 !important;
       }
       }
+
       h2 {
       h2 {
         border-color: solid 1px #5584e1;
         border-color: solid 1px #5584e1;
       }
       }
     }
     }
   }
   }
+
   /* user page */
   /* user page */
   .header-wrap {
   .header-wrap {
     padding: 0px;
     padding: 0px;
     margin-left: 2em;
     margin-left: 2em;
   }
   }
+
   /* edit */
   /* edit */
   .CodeMirror {
   .CodeMirror {
     border: solid 1.2px #d8d8d8;
     border: solid 1.2px #d8d8d8;
     border-top: solid 0.3em #5584e1 !important;
     border-top: solid 0.3em #5584e1 !important;
     border-radius: 0.35em;
     border-radius: 0.35em;
   }
   }
+
   &.on-edit {
   &.on-edit {
     $header-plus-footer: 42px //  .nav height
     $header-plus-footer: 42px //  .nav height
       + 5.5px //                  .kibela-block border-top
       + 5.5px //                  .kibela-block border-top
@@ -154,8 +185,8 @@ body.kibela {
     @include expand-editor($header-plus-footer);
     @include expand-editor($header-plus-footer);
 
 
     .main {
     .main {
-      > .row.page-content {
-        > .col-xs-12 {
+      >.row.page-content {
+        >.col-xs-12 {
           width: 100%;
           width: 100%;
           padding: 0;
           padding: 0;
         }
         }
@@ -164,22 +195,26 @@ body.kibela {
 
 
     .tab-content {
     .tab-content {
       padding-top: 15px;
       padding-top: 15px;
+
       #edit {
       #edit {
         margin-right: 1em;
         margin-right: 1em;
         margin-left: 1em;
         margin-left: 1em;
       }
       }
     }
     }
+
     .tab-pane {
     .tab-pane {
       .page-editor-editor-container {
       .page-editor-editor-container {
         margin: 0px;
         margin: 0px;
         border: none !important;
         border: none !important;
       }
       }
     }
     }
+
     .page-editor-preview-container {
     .page-editor-preview-container {
       padding-right: 0px !important;
       padding-right: 0px !important;
       padding-left: 2em;
       padding-left: 2em;
       background: white !important;
       background: white !important;
     }
     }
+
     .page-editor-footer {
     .page-editor-footer {
       min-height: 60px;
       min-height: 60px;
       padding: 13px;
       padding: 13px;