วิธีเปลี่ยนความสูงของแถบหัวเรื่องในแอป GTK มาตรฐานและที่มีแถบส่วนหัว / CSD ใน Gnome 3.20


32

ใน Gnome 3.18 มันเป็นไปได้ที่จะเปลี่ยนความสูงของแถบหัวเรื่องหน้าต่างทั้งหมดโดยการเปลี่ยน CSS ใน~/.config/gtk-3.0/gtk.cssเป็นต่อลดแถบชื่อเรื่องความสูงในคำพังเพย 3 / GTK + 3

.header-bar.default-decoration {
        padding-top: 0px;
        padding-bottom: 0px;
    }

.header-bar.default-decoration .button.titlebutton {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* No line below the title bar */
.ssd .titlebar {
    border-width: 0;
    box-shadow: none;
}

ใน Gnome 3.20 ดูเหมือนว่าจะไม่ใช้กับหน้าต่างที่มี headerbar / CSD (ปุ่มเฉพาะคำพังเพยในแถบชื่อเรื่อง) เช่น Nautilus (ไฟล์), การตั้งค่า, ภาพถ่าย, รายชื่อติดต่อ ฯลฯ การปรับแต่งยังลดความสูงของแถบหัวเรื่อง สำหรับแอปพลิเคชันอื่น ๆ เช่น gnome-terminal และ gVim ฉันจะลดความสูงของแถบหัวเรื่องในโปรแกรมคำพังเช่น Nautilus ใน Gnome 3.20 ได้อย่างไร


ปรับปรุง

ฉันได้ลองสิ่งที่แนะนำในเธรด Redditนี้ ฉันพยายามทั้งสองwindow.ssdและ.ssdเท่านั้นไม่มีลูกเต๋า ใช้งานได้ดูคำตอบที่ฉันโพสต์สำหรับรายละเอียดเพิ่มเติม

window.ssd headerbar.titlebar {
    padding-top: 1px;
    padding-bottom: 1px;
    min-height: 0;
}

window.ssd headerbar.titlebar button.titlebutton {
    padding-top: 1px;
    padding-bottom: 1px;
    min-height: 0;
}

และ

/* shrink headebars */
headerbar {
    min-height: 38px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
}

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 2px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 2px;
}

/* shrink ssd titlebars */
.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */ 
    padding: 2px
}

.default-decoration .titlebutton {
    min-height: 26px; /* tweak these two props to reduce button size */
    min-width: 26px;
}

fwiw นี่คือสิ่ง gtk ไม่ใช่คำพังเพย / nautilus / wm หนึ่ง
don_crissti

โซลูชันในการอัปเดตของคุณใช้งานได้ดีสำหรับฉันกับ Arch กับ Gnome 3.20 ต้องปรับค่าเล็กน้อยและจะไม่ขยายไปถึง GTK3 CSDs แต่สิ่งเหล่านั้นก็บ้าไปแล้ว ขอบคุณ!
SimonG

ดีใจที่มันมีประโยชน์! ฉันโพสต์ความคิดเห็นเล็ก ๆ น้อย ๆ เกี่ยวกับ CSDs / headerbars ในคำตอบของฉันด้านล่างลองใช้ดูว่ามีประโยชน์หรือไม่
joelostblom

@Mongrel โปรดอ่านสิ่งนี้: meta.stackexchange.com/questions/283468/…
Shadow The Princess Wizard

คำตอบ:


13
  1. สร้างไฟล์ ~ / .config / gtk-3.0 / gtk.css (เพิ่ม CSS ด้านล่าง)
  2. จากนั้นคุณจะต้องโหลด gnome-shell: ALT + F2และพิมพ์ใหม่r

ฉันสามารถลด Titlebar ของแอปใน Gnome 3.20 ด้วย CSS ต่อไปนี้:

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 0px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 0px;
}

headerbar {
    min-height: 24px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
    margin: 0px; /* same as headerbar side padding for nicer proportions */
    padding: 0px;
  }

3
alt+f2แล้วrปลายเป็นที่น่าตื่นตาตื่นใจ; ขอขอบคุณ!
berto

โปรดทราบว่า Alt + F2 ไม่สามารถใช้ได้กับเซสชัน Wayland
Frederick Nord

คุณสามารถหดตัวมันเล็ก ๆ น้อย ๆ มากขึ้นโดยการเพิ่มmin-height: 10px;ในheaderbar entry etcส่วนและการเปลี่ยนแปลงmin-height: 24px;ในheaderbarการ 16px;
michaelmoo

11

Headerbar / CSD

ที่จริงแล้วส่วนของรหัสที่ฉันพบผ่าน reddit และโพสต์ด้านบนคือ

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 2px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 2px;
}

ทำการแก้ไข headerbars / CSDs อย่างไรก็ตามผลกระทบนี้ไม่ได้เกิดขึ้นทันที แม้ว่าคุณจะโหลด gnome ซ้ำคุณอาจต้องปิดหน้าต่างทั้งหมดรอสักครู่หรือออกจากระบบแล้วกลับเข้าสู่ระบบอีกครั้งเพื่อดูผลกระทบ

ฉันยังไม่เห็นความแตกต่างใด ๆ ในแถบส่วนหัวเมื่อทำการปรับเปลี่ยนต่อไปนี้

headerbar {
    min-height: 38px;
    padding-left: 2px; /* same as children's vertical margins for nicer proportions */
    padding-right: 2px;
}

แถบชื่อเรื่องมาตรฐาน

สองส่วนสำหรับแถบหัวเรื่องหน้าต่างปกติทำงานตามที่คาดไว้

.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */
    padding: 2px
}

.default-decoration .titlebutton {
    min-height: 26px; /* tweak these two props to reduce button size */
    min-width: 26px;
}

ชายแดน Titlebar

คุณสามารถใช้สิ่งต่อไปนี้เพื่อลบเส้นขอบของแถบหัวเรื่องหากคุณใช้ธีม adwaita เริ่มต้น จากhttps://bbs.archlinux.org/viewtopic.php?id=211102

window.ssd headerbar.titlebar {
  border: none;
  background-image: linear-gradient(to bottom,
  shade(@theme_bg_color, 1.05),
  shade(@theme_bg_color, 0.99));
  box-shadow: inset 0 1px shade(@theme_bg_color, 1.4);
}

มีการเปลี่ยนแปลงที่แนะนำทั้งหมดเหล่านี้ใน "~ / .config / gtk-3.0 / gtk.css" หรือที่ไหนกันแน่?
ezra-s

@ ezra-s ใช่ส่วนใดส่วนหนึ่งข้างต้นจะถูกเพิ่มลงใน~/.config/gtk-3.0/gtk.css
joelostblom

1

คุณสามารถดาวน์โหลดส่วนขยายเชลล์สูงสุดเพื่อซ่อนแถบหัวเรื่องบนหน้าต่างที่ขยายใหญ่สุด การใช้ usecase ค่อนข้างมีประโยชน์

เข้ากันไม่ได้กับ Wayland เท่าที่ฉันรู้ แต่ไม่ได้ทดสอบ


1

อัปเดตของคุณ~/.config/gtk-3.0/gtk.cssด้วยเนื้อหาดังต่อไปนี้:

/* shrink headerbars (don't forget semicolons after each property) */
headerbar {
    min-height: 0px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
    background-color: #2d2d2d;
}

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 0px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 0px;
}

/* shrink ssd titlebars */
.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */
    padding: 0px;
    background-color: #2d2d2d;
}

.default-decoration .titlebutton {
    min-height: 0px; /* tweak these two props to reduce button size */
    min-width: 0px;
}

window.ssd headerbar.titlebar {
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 0;
}

window.ssd headerbar.titlebar button.titlebutton {
    padding-top: 3px;
    padding-bottom:3px;
    min-height: 0;
}

0

ฉันแก้ไขusr/share/themes/name-of-the-theme/gnome-shell/gnome-shell.cssไฟล์

เราต้องไปหา

 /* Panel */

   #panel {
   background-gradient-direction:none;
   background-color: rgba(0,0,0,0.5);
   /* border: 0px solid rgba(90,105,111,0.5);
   box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15);*/
   border: 1px solid rgba(90,105,111,0.5);
   box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
   border-top:0px;border-right:0px;border-left:0px;
   font-weight: bold;
   height: 24px;

เราต้องเปลี่ยนค่า "ความสูง" หลังจากนั้นเราต้องโหลดธีมอีกครั้ง ฉันใช้ส่วนขยาย "ตัวกำหนดค่ากิจกรรม" สำหรับพารามิเตอร์อื่น ๆ ของแถบด้านบน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.