window, button, eventbox, box, progressbar, trough, undershoot { all: unset; } .powermenu { background-color: rgba(40, 42, 54, 0.8); color: #a5b6cf; padding: 10px; font-family: MesloLGS NF; /*font-family: Iosevka Nerd Font;*/ font-size: 70px; border-radius: 30px; border: 2px solid rgba(189, 147, 249, 0.8); } .powermenu label { min-width: 140px; min-height: 130px; } .powermenu button { margin-right: 10px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px; border-radius: 12px; min-width: 80px; transition: all ease .2s; } .powermenu button:hover { background-color: rgba(56, 44, 74, 0.8); } .powermenu button:active { background-color: rgba(56, 44, 74, 0.8); } .powermenu button .content { border-radius: 4px; padding: 0px 15px 0px 15px; } .powermenu .shutdown { color: #dd6777; } .powermenu .reboot { color: #c296eb; } .powermenu .logout { color: #ecd3a0; } .powermenu-clickhandler { background-color: black; } .osk-toggle, .tablet-toggle, .heart-toggle { font-size: 28px; min-height: 40px; min-width: 53px; } .notif-panel { font-size: 20px; border-radius: 80px; min-height: 37px; min-width: 105px; padding: 1px 0px 1px 5px; } .notif-panel .toggle-on { border-top-left-radius: 22px; border-top-right-radius: 22px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: 0px solid rgba(40, 42, 54, 0.8); } .quick-settings-toggle { font-size: 24px; min-height: 40px; min-width: 40px; padding-right: 4px; margin-left: -3px; } .toggle-off { background-color: rgba(40, 42, 54, 0.8); color: #CBA6F7; border-radius: 80px; border: 2px solid rgba(56, 44, 74, 0.8); transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } .toggle-on { background-color: rgba(40, 42, 54, 0.8); color: #CBA6F7; border-radius: 80px; border: 2px solid rgba(189, 147, 249, 0.8); transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } .toggle-on:hover, .toggle-off:hover { background-color: rgba(127, 132, 156, 0.4); transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } .clock { font-size: 20px; padding-left: 10px; padding-right: 10px; min-width: 230px; } .audio { padding: 0 10px 0 10px; font-size: 20px; } .battery { padding: 0 10px 0 10px; font-size: 20px; } .battery .battery-indicator.charging { color: green; } .battery .battery-indicator.low { color: red; } .battery .label { font-size: 20px; } .brightness trough { margin-right: -50px; } .brightness trough progress { margin-right: 50px; margin-top: -30px; border-radius: 80px; min-height: 36px; background: rgba(94, 73, 124, 0.8); } tooltip { background: rgba(0, 0, 0, 0.6); border-radius: 5px; } .workspaces { background-color: rgba(40, 42, 54, 0.8); border-radius: 80px; border: 2px solid rgba(56, 44, 74, 0.8); padding-top: 3px; padding-bottom: 3px; padding-left: 12px; padding-right: 12px; } .workspaces .button { margin: 2px; min-width: 20px; border-radius: 100%; } .workspaces .button * { color: transparent; } .workspaces .empty { border: none; transition: border-color 0.25s linear; } .workspaces .occupied { border: 2px solid rgba(40, 42, 54, 0.8); background: rgba(189, 147, 249, 0.8); transition: border-color 0.25s linear; } .workspaces .active { border: 2px solid #50fa7b; transition: border-color 0.25s linear; } .sys-tray { padding: 5px; background-color: rgba(40, 42, 54, 0.8); border-radius: 80px; border: 2px solid rgba(56, 44, 74, 0.8); transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } .sys-tray .tray-item { background-color: transparent; padding: 0px 2px 0px 2px; border-radius: 100%; transition: all 0.5s ease-in-out; } .sys-tray .tray-item image { color: #CBA6F7; } .sys-tray .tray-item:hover { border-radius: 100%; transition: all 0.5s ease-in-out; } .sys-tray .tray-item * { font-size: 25px; border-radius: 10px; } .sys-tray menubar { background-color: transparent; } .sys-tray menuitem:not(.tray-item) { padding: 5px; transition: all 0.2s ease-in-out; } .sys-tray menuitem:not(.tray-item):hover { background: #1b1b1b; } .notification-center { min-height: 700px; min-width: 524px; background: rgba(40, 42, 54, 0.8); border-radius: 30px; border-top-right-radius: 0px; border: 2px solid rgba(189, 147, 249, 0.8); padding: 0px; box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6); } .notification-center * { font-size: 16px; } .notification-center .header { padding: 10px; margin-top: 22px; margin-bottom: 9px; } .notification-center .header label { font-size: 22px; } .notification-center .header button { all: unset; transition: 200ms; border-radius: 9px; color: #eee; background-color: #664C90; box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); padding: 4.5px 9px; } .notification-center .header button:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-color: rgba(238, 238, 238, 0.154); color: #f1f1f1; } .notification-center .header button:disabled { box-shadow: none; background-color: rgba(102, 76, 144, 0.3); color: rgba(238, 238, 238, 0.3); } .notification-center .header button label { font-size: 1.2em; } .notification-center .notification-list-box { background: #282a36; padding: 0 12px 0 12px; border-radius: 30px; border-top: 2px solid rgba(189, 147, 249, 0.8); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); } .notification-center .notification-list-box scrollbar { all: unset; border-radius: 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .notification-center .notification-list-box scrollbar * { all: unset; } .notification-center .notification-list-box scrollbar:hover { border-radius: 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .notification-center .notification-list-box scrollbar.vertical { transition: 200ms; background-color: rgba(23, 23, 23, 0.3); } .notification-center .notification-list-box scrollbar.vertical:hover { background-color: rgba(23, 23, 23, 0.7); } .notification-center .notification-list-box scrollbar.vertical:hover slider { background-color: rgba(238, 238, 238, 0.7); min-width: .6em; } .notification-center .notification-list-box scrollbar.vertical slider { background-color: rgba(238, 238, 238, 0.5); border-radius: 9px; min-width: .4em; min-height: 2em; transition: 200ms; } .notification-center .placeholder { color: white; } .notification-center .placeholder image { font-size: 7em; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); } .notification-center .placeholder label { font-size: 1.2em; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); } .notification.critical > box { box-shadow: inset 0 0 0.5em 0 #e67090; } .notification > box { all: unset; box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4); margin: 9px 9px 0 9px; border: 2px solid rgba(189, 147, 249, 0.8); border-radius: 15px; background-color: rgba(40, 42, 54, 0.8); padding: 16.2px; } .notification > box * { font-size: 16px; } .notification:hover .close-button { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-color: rgba(238, 238, 238, 0.154); background-color: rgba(230, 112, 144, 0.5); } .notification .title { margin-right: 9px; font-size: 1.1em; } .notification .description { font-size: .9em; min-width: 350px; } .notification .icon { border-radius: 7.2px; margin-right: 9px; } .notification .icon.img { border: 1px solid rgba(238, 238, 238, 0.03); } .notification .actions button { all: unset; transition: all 500ms; border-radius: 9px; background-color: rgba(238, 238, 238, 0.06); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); border-radius: 7.2px; font-size: 1.2em; padding: 4.5px 9px; margin: 9px 4.5px 0; } .notification .actions button * { font-size: 16px; } .notification .actions button:focus { box-shadow: inset 0 0 0 1px #51a4e7; background-color: rgba(238, 238, 238, 0.154); } .notification .actions button:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-color: rgba(238, 238, 238, 0.154); } .notification .actions button:active { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; } .notification .actions button:active:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .notification .actions button:checked { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; } .notification .actions button:checked:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .notification .actions button:disabled { box-shadow: none; background-color: transparent; } .notification .actions button:first-child { margin-left: 0; } .notification .actions button:last-child { margin-right: 0; } .notification .actions button.on { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; } .notification .actions button.on:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .notification .actions button.active { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; } .notification .actions button.active:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .notification button.close-button { all: unset; transition: all 500ms; border-radius: 9px; background-color: transparent; background-image: none; box-shadow: none; margin-left: 9px; border-radius: 7.2px; min-width: 1.2em; min-height: 1.2em; } .notification button.close-button * { font-size: 16px; } .notification button.close-button:focus { box-shadow: inset 0 0 0 1px #51a4e7; background-color: rgba(238, 238, 238, 0.154); } .notification button.close-button:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-color: rgba(238, 238, 238, 0.154); background-color: rgba(230, 112, 144, 0.5); } .notification button.close-button:active { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; background-image: linear-gradient(#e67090, #e67090); } .notification button.close-button:active:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .notification button.close-button:checked { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; } .notification button.close-button:checked:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .notification button.close-button:disabled { box-shadow: none; background-color: transparent; } .notification button.close-button.on { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; } .notification button.close-button.on:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .notification button.close-button.active { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-color: #51a4e7; } .notification button.close-button.active:hover { box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } .date { background-color: rgba(40, 42, 54, 0.8); color: #a5b6cf; border-radius: 30px; border-top-right-radius: 0px; border: 2px solid rgba(189, 147, 249, 0.8); } .timebox { margin: 30px 0px; } .timebox .time-container .content { font-family: Product Sans; font-weight: bolder; font-size: 60px; } .timebox .time-container .divider { margin: 8px 15px; padding: 0px 1px; background: linear-gradient(#dd6777, #c296eb, #86aaec, #93cee9); } .timebox .date-container { font-family: Product Sans; margin-top: 2px; } .cal-box { font-family: Product Sans; border-radius: 30px; padding: 0 1rem .2rem; color: #a5b6cf; background-color: #282a36; border-bottom: 2px solid rgba(189, 147, 249, 0.8); border-top: 2px solid rgba(189, 147, 249, 0.8); margin: 0px 12px 18px 12px; } .cal-box .cal { font-size: 20px; background-color: inherit; padding: .5rem .10rem 0rem; margin-left: 10px; border-radius: 30px; } .cal-box .cal > * { border: solid 0px transparent; } .cal-box .cal.highlight { padding: 10rem; } calendar:selected { color: #93cee9; } calendar.header { color: #93cee9; font-weight: bold; } calendar.button { color: #93cee9; } calendar.highlight { color: #90ceaa; font-weight: bold; } calendar:indeterminate { color: #262831; } .quick-settings { font-size: 30px; min-width: 500px; padding: 0px 0px 0px 0px; background-color: rgba(40, 42, 54, 0.8); border-radius: 30px 0 30px 30px; border: 2px solid rgba(189, 147, 249, 0.8); } .title { font-size: 22px; margin-top: 30px; } .grid-label { font-size: 30px; margin-left: 15px; margin-right: 10px; min-width: 50px; } .sub-label { font-size: 14px; margin-top: -10px; margin-left: 31px; margin-bottom: 10px; padding: 3px; border: 2px solid rgba(189, 147, 249, 0.8); border-top-right-radius: 20px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 20px; min-width: 106px; background: #1b1b1b; } .sub-label:nth-child(1) { margin-left: 25px; } .grid-chev { margin-left: 0px; font-size: 40px; margin-right: 5px; } .button-grid { font-size: 10px; min-height: 160px; min-width: 470px; background-color: #282a36; border-top: 2px solid rgba(189, 147, 249, 0.8); border-bottom: 2px solid rgba(189, 147, 249, 0.8); border-radius: 15px; margin-top: 30px; } .button-row { min-height: 70px; min-width: 450px; margin-left: 20px; } .grid-button { min-height: 65px; min-width: 70px; margin: 5px; margin-left: 22px; } .grid-button:nth-child(1) { margin-left: 5px; } .left-part { background: #1b1b1b; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-left: 2px solid rgba(189, 147, 249, 0.8); border-top: 2px solid rgba(189, 147, 249, 0.8); border-bottom: 2px solid rgba(189, 147, 249, 0.8); transition: all 0.5s ease-in-out; } .right-part { background: #1b1b1b; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-right: 2px solid rgba(189, 147, 249, 0.8); border-top: 2px solid rgba(189, 147, 249, 0.8); border-bottom: 2px solid rgba(189, 147, 249, 0.8); transition: all 0.5s ease-in-out; } .right-part:hover, .right-part:active { color: rgba(189, 147, 249, 0.8); border: 2px solid rgba(189, 147, 249, 0.8); border-top-left-radius: 7px; border-bottom-left-radius: 7px; transition: all 0.5s ease-in-out; } .left-part:hover, .left-part:active { color: rgba(189, 147, 249, 0.8); border: 2px solid rgba(189, 147, 249, 0.8); border-top-right-radius: 7px; border-bottom-right-radius: 7px; transition: all 0.5s ease-in-out; } .player { margin-top: 6px; min-height: 220px; opacity: 0; } .slider-box { min-height: 100px; min-width: 470px; background-color: #282a36; border-top: 2px solid rgba(189, 147, 249, 0.8); border-bottom: 2px solid rgba(189, 147, 249, 0.8); border-radius: 15px; margin-top: 30px; margin-bottom: 20px; } .slider-box .slider-label { font-size: 30px; min-width: 30px; } .slider-box scale { min-height: 55px; min-width: 400px; margin-left: 18px; margin-right: 20px; } .slider-box scale highlight { margin: 0px; background-color: #79659f; border-radius: 2em; } .slider-box scale trough { background-color: #363847; border-radius: 2em; } .slider-box scale slider { margin: -4px; min-width: 20px; min-height: 20px; background: #3e4153; border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; transition: background-color 0.5s ease-in-out; } .slider-box scale slider:hover { background-color: #303240; transition: background-color 0.5s ease-in-out; } .arrow { transition: -gtk-icon-transform 0.3s ease-in-out; margin-bottom: 12px; } .media { margin-top: 9px; } .player { all: unset; padding: 10px; min-width: 400px; min-height: 200px; border-radius: 30px; border-top: 2px solid rgba(189, 147, 249, 0.8); border-bottom: 2px solid rgba(189, 147, 249, 0.8); transition: background 250ms; } .player .top { font-size: 23px; } .player .metadata .title { font-weight: 500; transition: text 250ms; } .player .metadata .artist { font-weight: 400; font-size: 15px; transition: text 250ms; } .player .bottom { font-size: 30px; } .player .pausebutton { transition: background-color ease .2s, color ease .2s; font-size: 15px; padding: 4px 4px 4px 7px; } .player .playing { transition: background-color ease .2s, color ease .2s; border-radius: 15px; } .player .stopped, .player .paused { transition: background-color ease .2s, color ease .2s; border-radius: 26px; padding: 4px 4px 4px 10px; } .player button label { min-width: 35px; } .position-indicator { min-width: 18px; margin: 7px; background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 5px 0px rgba(255, 255, 255, 0.3); border-radius: 100%; } .previous, .next, .shuffle, .loop { border-radius: 100%; transition: color 200ms; } .previous:hover, .next:hover, .shuffle:hover, .loop:hover { border-radius: 100%; background-color: rgba(127, 132, 156, 0.4); transition: color 200ms; } .loop label { padding-right: 8px; } .position-slider highlight { margin: 0px; border-radius: 2em; } .position-slider trough { margin: 0 8px; border-radius: 2em; } .position-slider slider { margin: -8px; min-height: 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; transition: background-color 0.5s ease-in-out; } .position-slider slider:hover { transition: background-color 0.5s ease-in-out; } .overview .workspace { padding: 4px 15px 4px 0px; border: 2px solid transparent; border-radius: 10px; } .overview .workspace.active { background-color: rgba(38, 38, 38, 0.8); border: 2px solid black; } .overview .workspace .window { background-color: #282a36; border-radius: 10px; margin: 0 10px; transition: min-width 0.2s ease-in-out, min-height 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out; } .overview .normal { margin-bottom: 5px; } .overview .normal .workspace .window { border: 2px solid #411C6C; } .overview .normal .workspace .window.active { border: 2px solid purple; } .overview .special .workspace .window { border: 2px solid #333333; } .overview .special .workspace .window.active { border: 2px solid purple; } .applauncher { all: unset; box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6); margin: 9px; border: 2px solid rgba(189, 147, 249, 0.8); border-radius: 25px; background-color: rgba(40, 42, 54, 0.8); color: #f8f8f2; padding: 16.2px; } .applauncher * { font-size: 16px; } .applauncher .header { margin: 16.2px; margin-bottom: 0; } .applauncher .header image, .applauncher .header entry { all: unset; border-radius: 9px; color: #f8f8f2; background-color: rgba(68, 71, 90, 0.6); border: 1px solid #44475a; padding: 4.5px; } .applauncher .header image { margin-right: 9px; -gtk-icon-transform: scale(0.8); font-size: 25.6px; } .applauncher scrolledwindow { padding: 16.2px; min-width: 700px; min-height: 450px; } .applauncher scrolledwindow scrollbar, .applauncher scrolledwindow scrollbar * { all: unset; } .applauncher scrolledwindow scrollbar.vertical { transition: 200ms; background-color: rgba(23, 23, 23, 0.3); } .applauncher scrolledwindow scrollbar.vertical:hover { background-color: rgba(23, 23, 23, 0.7); } .applauncher scrolledwindow scrollbar.vertical:hover slider { background-color: rgba(238, 238, 238, 0.7); min-width: .6em; } .applauncher scrolledwindow scrollbar.vertical slider { background-color: rgba(238, 238, 238, 0.5); border-radius: 9px; min-width: .4em; min-height: 2em; transition: 200ms; } .applauncher .placeholder { margin-top: 9px; color: #f8f8f2; font-size: 1.2em; } .applauncher .app { all: unset; transition: 200ms; padding: 9px; } .applauncher .app:active { background-color: rgba(189, 147, 249, 0.5); border-radius: 9px; box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03); } .applauncher .app:active .title { color: #f8f8f2; } .applauncher .app:hover .title, .applauncher .app:focus .title { color: rgba(189, 147, 249, 0.8); } .applauncher .app:hover image, .applauncher .app:focus image { -gtk-icon-shadow: 2px 2px rgba(189, 147, 249, 0.8); } .applauncher .app label { transition: 200ms; } .applauncher .app label.title { color: #f8f8f2; } .applauncher .app label.description { color: rgba(238, 238, 238, 0.7); } .applauncher .app image { transition: 200ms; margin-right: 9px; }