Cách thay đổi màu tab cửa sổ hiện đang hoạt động trong trình chỉnh sửa nguyên tử

Question

Tôi đang sử dụng trình chỉnh sửa nguyên tử phiên bản 1.0 ổn định trong ubuntu 14.04. câu hỏi của tôi là, Làm cách nào để thay đổi màu nền của tab cửa sổ hiện được chọn ... (có nghĩa là tab hiện tại ..) bằng cách chỉnh sửa style.less tệp?

tôi đã cố gắng,

.tab{ background-color:black; } 

để thay đổi màu sắc tab,

nhưng, mã này chỉ thay đổi tất cả màu sắc tab ngoại trừ màu sắc tab hiện tại.

vì vậy câu hỏi của tôi là, làm cách nào tôi có thể thay đổi màu của tab hiện tại trong trình chỉnh sửa nguyên tử bằng cách chỉnh sửa tệp style.less?

Answer 1

On lựa chọn các tab thêm một class = "active tab"

và dưới phong cách để tập style.less bạn

.tab.active { 
    background-color:black; 
} 

Answer 2

.tab-bar .tab[data-type="TextEditor"]::after { 
    background-color: rgba(20,28,30,0.8); 
} 

tôi tìm thấy giải pháp này bằng cách mở công cụ phát triển Ctrl + Shift + I và tìm phần tử bằng công cụ kính lúp.

Answer 3

Bạn phải sao chép mã này và dán vào tệp styles.less của mình, đúng vậy.

//My awesome tab 
.tab-bar .tab.active[data-type="TextEditor"]::after { 
background-color: black; 
border-bottom: whiTe; 
} 

.tab-bar .tab.active[data-type$="Editor"] .title { 
background-color: black; 
z-index: 2; 
} 

Answer 4

Thường thì tôi muốn mở nhiều ngăn và có tab trong tất cả chúng. Với nhiều ngăn có nhiều tab hoạt động. Các câu trả lời khác ở đây sẽ tạo kiểu cho tab "hoạt động" trong tất cả các ngăn và không nhắm mục tiêu cụ thể đến tab bạn đã chọn.

Sự cố là selector specificity.

Dưới đây là một cách để đặc biệt chỉ nhắm mục tiêu các tab mà bạn đã chọn, dù có bao nhiêu tấm bạn đã mở:

Mở bảng lệnh Atom của bạn (trên một sự thay đổi MAC + cmd + p) và tìm kiếm 'Phong cách'.

Chọn tùy chọn cho 'Ứng dụng: Mở biểu định kiểu của bạn'.

Thêm phong cách này:

.pane.active { 
    .tab.active { 
     background-color: #00BCD4; 
    } 
} 

Save the tờ style.less và thấy các thay đổi của bạn!

Lưu ý: Điều này đã được kiểm tra trong khi sử dụng Atom Material UI theme, mặc dù bạn không nên sử dụng chủ đề nào.

Answer 5

Không có cách nào trong số này phù hợp với tôi. Đây là giải pháp của tôi (Atom 1.22.1):

.tab-bar .tab.active[data-type$="Editor"] { 
background-color: #167373; 
} 

Answer 6

đó là giải pháp của tôi cho nguyên tử 1.23.1 Tệp> Stylesheed> styles.less

.texteditor.tab.sortable.active::before, .texteditor.tab.sortable.active, .texteditor.tab.sortable.active::after { 
     background-image: -webkit-linear-gradient(top, #35404a, #4A7FB2); 
} 

một màu xanh lam đẹp.