atom样式设置 (文件) 设置右侧滚动条的背景颜色样式 - 开发工具

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke; //左侧文件树的背景颜色 OK
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
   color: white; //文件中的纯文本(如括号)变为该颜色 OK
  // background-color: hsl(180, 24%, 12%);

}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
// atom-text-editor::shadow .cursor {
//    border-color: red;
// }


.scrollbars-visible-always { //这是左侧树的样式 http://www.it1352.com/879295.html
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        //background-color:#262626;
      }

      ::-webkit-scrollbar-track,
      ::-webkit-scrollbar-corner {
        //background: red;
      }  ::-webkit-scrollbar-thumb {
        background: #909090;
        border-radius: 5px;
        box-shadow: 0 0 1px black inset;
      }
}

// .scrollbars-visible-always {
//   ::-webkit-scrollbar {
//     background-color: red;//#262626;
//
//     &-track {}
//
//     &-thumb {
//       //background-color: #908070 !important; //仅左侧树的滚动条有效果! OK
//       background-color: grey !important;
//       &:window-inactive {
//         background-color: rgba(213, 213, 213, 0.4) !important;
//       }
//     }
//
//     &-corner {
//       background-color: #262626;
//     }
//   }
// }
// for new opened files
.vertical-scrollbar {  //*** 在v1.38版本以后的软件中可以设置右侧滚动条的底背景的宽度 OK (在低版本软件中: 可能不生效,只有左侧滚动条生效,右侧不生效)
    width: 11px !important; 
    background-color: rgba(213, 213, 213, 0.1) !important;
}

// .scrollbar(@color, @background-color) {
//   ::-webkit-scrollbar-track,
//   ::-webkit-scrollbar-corner {
//     background-color: red;//@background-color;
//   }
//
//   ::-webkit-scrollbar-thumb {
//     background-color: red;
//   }
// }

//---------
// .tree-view-resizer, atom-text-editor::shadow  {
//   ::-webkit-scrollbar {
//     background-color: #262626;
//
//     &-track {}
//
//     &-thumb {
//       background-color: #404040;
//
//       &:window-inactive {
//         background-color: rgb(116, 115, 105);
//       }
//     }
//
//     &-corner {
//       background-color: #262626;
//     }
//   }
// }

// ::-webkit-scrollbar {
//     //display: none; //不显示左侧文件树上的滚动条 OK
//   }