1.floating-bar { background-color: @theme_base_color; border-width: 1px; border-style: solid solid none; border-color: @borders; border-radius: 3px 3px 0 0; } 2 3.floating-bar.left { border-left-style: none; border-top-left-radius: 0; } 4 5.floating-bar.right { border-right-style: none; border-top-right-radius: 0; } 6 7.floating-bar:backdrop { background-color: @theme_unfocused_base_color; border-color: @unfocused_borders; } 8 9#title-box-container { transition: background 200ms ease-out; } 10 11.incognito-mode #title-box-container { background: -gtk-icontheme("user-not-tracked-symbolic") 16px 0/64px 64px no-repeat; } 12 13.incognito-mode #title-box-container:backdrop { background-image: cross-fade(50% -gtk-icontheme("user-not-tracked-symbolic"), image(transparent)); } 14 15.automation-mode headerbar { background-color: #ff9600; color: rgba(0, 0, 0, 0.35); } 16 17.entry_icon_box { margin-left: 2px; margin-right: 5px; } 18 19.entry_icon_box:dir(rtl) { margin-left: 5px; margin-right: 2px; } 20 21.entry_icon_box > button { box-shadow: none; border: transparent; background: transparent; padding: 0px; -gtk-icon-shadow: none; outline-offset: -1px; } 22 23.entry_icon_box > button:hover:not(:backdrop) .entry_icon { opacity: 1; } 24 25.entry_icon { color: @theme_fg_color; margin: 0 4px; opacity: .8; } 26 27.entry_icon:active { color: @theme_selected_bg_color; } 28 29.entry_icon:backdrop { color: @theme_unfocused_fg_color; } 30 31.entry_icon.selected { color: @theme_selected_bg_color; } 32 33.entry_icon.starred { color: orange; } 34 35.bookmarks-row button { opacity: 0.25; } 36 37.bookmarks-row:hover button { opacity: 1; } 38 39.bookmark-tag-widget { padding-left: 8px; background-color: rgba(0, 0, 0, 0.1); border-radius: 3px; } 40 41.bookmark-tag-widget label { padding-left: 8px; padding-right: 8px; } 42 43.bookmark-tag-widget image, .bookmark-tag-widget label, .bookmark-tag-widget button:hover image { color: @theme_fg_color; } 44 45.bookmark-tag-widget-selected { background-color: @theme_selected_bg_color; } 46 47.bookmark-tag-widget-selected image, .bookmark-tag-widget-selected label, .bookmark-tag-widget-selected button:hover image { color: @theme_selected_fg_color; } 48 49#fullscreen-popup { padding: 12px; border-radius: 18px; background: rgba(0, 0, 0, 0.65); color: white; } 50 51.url_progress { border: none; background-color: transparent; background-image: none; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 6px; } 52 53.url_progress progress { background-color: @theme_selected_bg_color; background-image: none; border: none; min-height: 2px; } 54 55.url_progress trough { border: none; background-color: transparent; background-image: none; } 56 57.tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)); background-size: 6px 6px; background-repeat: no-repeat; background-position: center bottom; } 58 59.tab-arrow-up-attention arrow.up { background-color: @theme_selected_bg_color; } 60 61.tab-arrow-down-attention arrow.down { background-color: @theme_selected_bg_color; } 62 63.page-menu-contents { margin-left: 12px; margin-right: 12px; margin-bottom: 12px; } 64 65.search-entry-occurrences-tag { background: none; color: alpha(@theme_fg_color,0.5); box-shadow: none; border: none; margin: 2px; padding: 2px; } 66 67.search-entry-occurrences-tag:backdrop { color: alpha(@theme_unfocused_fg_color,0.5); } 68 69dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid { margin-left: 3px; } 70 71dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .title, dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid .subtitle { margin-left: 6px; } 72 73.download_progress progress { min-height: 2px; } 74 75.download_progress trough { min-width: 14px; } 76 77.pages-list { background: none; } 78 79.draggable.drag-icon { background: white; border: 1px solid black; } 80 81.draggable.drag-row { color: gray; background: alpha(gray,0.2); } 82 83fullscreenbox > flap > dimming, fullscreenbox > flap > outline, fullscreenbox > flap > border { min-height: 0; min-width: 0; background: none; } 84 85fullscreenbox > flap > shadow { min-height: 9px; min-width: 9px; background: linear-gradient(to bottom, alpha(black,0.1), alpha(black,0)); } 86 87.incognito-mode { /*************************** Check and Radio buttons * */ } 88 89.incognito-mode headerbar { background: #101520 linear-gradient(to top, #171d2e, #1a2235); box-shadow: inset 0 1px rgba(231, 234, 243, 0.07); border-color: #36456b; } 90 91.incognito-mode headerbar > clamp { color: #eef0f6; } 92 93.incognito-mode headerbar:backdrop { background-image: image(#212b42); border-color: #171d2e; box-shadow: inset 0 1px rgba(231, 234, 243, 0.07); } 94 95.incognito-mode headerbar:backdrop > clamp { color: #868d9e; } 96 97.incognito-mode actionbar { background: #212b42; } 98 99.incognito-mode actionbar > revealer > box { border-color: #475b8d; } 100 101.incognito-mode actionbar:backdrop { background: #252f49; } 102 103.incognito-mode actionbar:backdrop > revealer > box { border-color: #171d2e; } 104 105.incognito-mode headerbar > *, .incognito-mode actionbar > * { color: #eef0f6; } 106 107.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop { color: #868d9e; } 108 109.incognito-mode headerbar button, .incognito-mode actionbar button { color: #eef0f6; outline-color: rgba(238, 240, 246, 0.3); border-color: #475b8d; border-bottom-color: #36456b; background-image: linear-gradient(to top, #1f283f 2px, #212b42); text-shadow: 0 -1px rgba(0, 0, 0, 0.844235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.844235); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); } 110 111.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.flat, .incognito-mode actionbar button.titlebutton { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } 112 113.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.844235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.844235); } 114 115.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover { color: #eef0f6; outline-color: rgba(238, 240, 246, 0.3); border-color: #475b8d; border-bottom-color: #36456b; background-image: linear-gradient(to top, #1f283f, #232d46 1px); text-shadow: 0 -1px rgba(0, 0, 0, 0.796235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.796235); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); } 116 117.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar button:active, .incognito-mode actionbar button:checked { color: #eef0f6; outline-color: rgba(238, 240, 246, 0.3); border-color: #475b8d; background-image: image(#121724); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } 118 119.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled { color: #878d9c; border-color: #3f517e; background-image: image(#222c45); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 120 121.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop { color: #868d9e; border-color: #171d2e; background-image: image(#252f49); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 122 123.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active { color: #868d9e; border-color: #171d2e; background-image: image(#1b2235); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 124 125.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled { color: #3e507c; border-color: #171d2e; background-image: image(#222c45); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 126 127.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked { background: image(#121724); border-color: #415483; border-top-color: #394972; } 128 129.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop { color: #868d9e; border-color: #171d2e; background-image: image(#1b2235); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 130 131.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, .incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } 132 133.incognito-mode headerbar entry, .incognito-mode actionbar entry { border-color: #475b8d; } 134 135.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus { border-color: #030c17; box-shadow: inset 0 0 0 1px #15539e; } 136 137.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop { box-shadow: none; border-color: #171d2e; } 138 139.incognito-mode tabbar .box { background: #121724; border-bottom: 1px solid #36456b; } 140 141.incognito-mode tabbar .box:backdrop { background-color: #151b2a; border-color: #171d2e; } 142 143.incognito-mode tabbar scrolledwindow.pinned undershoot { border-color: #36456b; } 144 145.incognito-mode tabbar scrolledwindow.pinned:backdrop undershoot { border-color: #171d2e; } 146 147.incognito-mode tabbar scrolledwindow.pinned tabbox:dir(ltr) { box-shadow: inset -1px 0 #36456b; } 148 149.incognito-mode tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { box-shadow: inset -1px 0 #171d2e; } 150 151.incognito-mode tabbar scrolledwindow.pinned tabbox:dir(rtl) { box-shadow: inset 1px 0 #36456b; } 152 153.incognito-mode tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #171d2e; } 154 155.incognito-mode tabbar tab { border-color: #36456b; background-color: #171d2e; } 156 157.incognito-mode tabbar tab:checked { background-color: #212b42; } 158 159.incognito-mode tabbar tab:checked:hover { background-color: #26314c; } 160 161.incognito-mode tabbar tab:hover { background-color: #1c2438; } 162 163.incognito-mode tabbar tab:backdrop { border-color: #171d2e; background-color: #1a2235; } 164 165.incognito-mode tabbar tab:backdrop:checked { background-color: #252f49; } 166 167.incognito-mode tabbar tab .tab-close-button:hover, .incognito-mode tabbar tab .tab-indicator.clickable:hover { background: alpha(#eef0f6,0.15); } 168 169.incognito-mode tabbar tab .tab-close-button:active, .incognito-mode tabbar tab .tab-indicator.clickable:active { background: alpha(black,0.2); } 170 171.incognito-mode tabbar .start-action, .incognito-mode tabbar .end-action { background: #171d2e; border-color: #36456b; } 172 173.incognito-mode tabbar .start-action:backdrop, .incognito-mode tabbar .end-action:backdrop { border-color: #171d2e; background-color: #1a2235; } 174 175.automation-mode { /*************************** Check and Radio buttons * */ } 176 177.automation-mode headerbar { background: #db8100 linear-gradient(to top, #f08d00, #fa9300); box-shadow: inset 0 1px rgba(255, 240, 219, 0.07); border-color: #ffb64d; } 178 179.automation-mode headerbar > clamp { color: #fff4e5; } 180 181.automation-mode headerbar:backdrop { background-image: image(#ff9c0f); border-color: #eb8c05; box-shadow: inset 0 1px rgba(255, 240, 219, 0.07); } 182 183.automation-mode headerbar:backdrop > clamp { color: #ffc87a; } 184 185.automation-mode actionbar { background: #ff9c0f; } 186 187.automation-mode actionbar > revealer > box { border-color: #ffcb80; } 188 189.automation-mode actionbar:backdrop { background: #ffa11a; } 190 191.automation-mode actionbar:backdrop > revealer > box { border-color: #eb8c05; } 192 193.automation-mode headerbar > *, .automation-mode actionbar > * { color: #fff4e5; } 194 195.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop { color: #ffc87a; } 196 197.automation-mode headerbar button, .automation-mode actionbar button { color: #fff4e5; outline-color: rgba(255, 244, 229, 0.3); border-color: #ffcb80; border-bottom-color: #ffb64d; background-image: linear-gradient(to top, #ff9a0a 2px, #ff9c0f); text-shadow: 0 -1px rgba(0, 0, 0, 0.576); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.576); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } 198 199.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode actionbar button.flat, .automation-mode actionbar button.titlebutton { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } 200 201.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.576); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.576); } 202 203.automation-mode headerbar button:hover, .automation-mode actionbar button:hover { color: #fff4e5; outline-color: rgba(255, 244, 229, 0.3); border-color: #ffcb80; border-bottom-color: #ffb64d; background-image: linear-gradient(to top, #ff9a0a, #ff9e14 1px); text-shadow: 0 -1px rgba(0, 0, 0, 0.528); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.528); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); } 204 205.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode actionbar button:active, .automation-mode actionbar button:checked { color: #fff4e5; outline-color: rgba(255, 244, 229, 0.3); border-color: #ffcb80; background-image: image(#e08400); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } 206 207.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled { color: #ffc87a; border-color: #ffc169; background-image: image(#ff9e13); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 208 209.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop { color: #ffc87a; border-color: #eb8c05; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 210 211.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active { color: #ffc87a; border-color: #eb8c05; background-image: image(#fc9400); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 212 213.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled { color: #ffc066; border-color: #eb8c05; background-image: image(#ff9e13); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 214 215.automation-mode headerbar button:checked, .automation-mode actionbar button:checked { background: image(#e08400); border-color: #ffc470; border-top-color: #ffba57; } 216 217.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop { color: #ffc87a; border-color: #eb8c05; background-image: image(#fc9400); box-shadow: inset 0 1px rgba(255, 255, 255, 0); } 218 219.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, .automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } 220 221.automation-mode headerbar entry, .automation-mode actionbar entry { border-color: #ffcb80; } 222 223.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus { border-color: #030c17; box-shadow: inset 0 0 0 1px #15539e; } 224 225.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop { box-shadow: none; border-color: #eb8c05; } 226 227.automation-mode tabbar .box { background: #e08400; border-bottom: 1px solid #ffb64d; } 228 229.automation-mode tabbar .box:backdrop { background-color: #eb8a00; border-color: #eb8c05; } 230 231.automation-mode tabbar scrolledwindow.pinned undershoot { border-color: #ffb64d; } 232 233.automation-mode tabbar scrolledwindow.pinned:backdrop undershoot { border-color: #eb8c05; } 234 235.automation-mode tabbar scrolledwindow.pinned tabbox:dir(ltr) { box-shadow: inset -1px 0 #ffb64d; } 236 237.automation-mode tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { box-shadow: inset -1px 0 #eb8c05; } 238 239.automation-mode tabbar scrolledwindow.pinned tabbox:dir(rtl) { box-shadow: inset 1px 0 #ffb64d; } 240 241.automation-mode tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #eb8c05; } 242 243.automation-mode tabbar tab { border-color: #ffb64d; background-color: #f08d00; } 244 245.automation-mode tabbar tab:checked { background-color: #ff9c0f; } 246 247.automation-mode tabbar tab:checked:hover { background-color: #ffa31f; } 248 249.automation-mode tabbar tab:hover { background-color: #ff9600; } 250 251.automation-mode tabbar tab:backdrop { border-color: #eb8c05; background-color: #fa9300; } 252 253.automation-mode tabbar tab:backdrop:checked { background-color: #ffa11a; } 254 255.automation-mode tabbar tab .tab-close-button:hover, .automation-mode tabbar tab .tab-indicator.clickable:hover { background: alpha(#fff4e5,0.15); } 256 257.automation-mode tabbar tab .tab-close-button:active, .automation-mode tabbar tab .tab-indicator.clickable:active { background: alpha(black,0.2); } 258 259.automation-mode tabbar .start-action, .automation-mode tabbar .end-action { background: #f08d00; border-color: #ffb64d; } 260 261.automation-mode tabbar .start-action:backdrop, .automation-mode tabbar .end-action:backdrop { border-color: #eb8c05; background-color: #fa9300; } 262 263/*************************** Check and Radio buttons * */ 264.bookmark-tag-widget { border-radius: 5px; } 265 266.bookmark-tag-widget button { background: none; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; min-width: 24px; min-height: 24px; border-radius: 99px; color: inherit; padding: 0; margin: 2px; } 267 268.bookmark-tag-widget button:hover { background: alpha(#eeeeec,0.15); } 269 270.bookmark-tag-widget button:hover:active { background: alpha(black,0.2); } 271 272.bookmark-tag-widget-selected button { background: none; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; min-width: 24px; min-height: 24px; border-radius: 99px; color: inherit; padding: 0; margin: 2px; } 273 274.bookmark-tag-widget-selected button:hover { background: alpha(#ffffff,0.15); } 275 276.bookmark-tag-widget-selected button:hover:active { background: alpha(black,0.2); } 277 278@keyframes needs_attention_keyframes { 0% { background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); 279 border-color: @borders; } 280 /* can't do animation-direction, so holding the color on two keyframes */ 281 30% { background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, @theme_base_color); 282 border-color: @theme_fg_color; } 283 90% { background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, @theme_base_color); 284 border-color: @theme_fg_color; } 285 100% { background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); 286 border-color: @borders; } } 287 288.epiphany-downloads-button-needs-attention { animation: needs_attention_keyframes 2s ease-in-out; } 289 290.epiphany-downloads-button-needs-attention-multiple { animation: needs_attention_keyframes 3s ease-in-out; animation-iteration-count: 3; } 291 292#title-box-container { color: alpha(@theme_fg_color,0.2); } 293 294#title-box-container > clamp { color: @theme_fg_color; } 295 296#title-box-container > clamp:backdrop { color: @theme_unfocused_fg_color; } 297 298.pages-list { margin: 5px; } 299 300.pages-list row { min-height: 30px; padding: 3px; border-radius: 5px; -gtk-outline-radius: 5px; border: none; color: #eeeeec; transition: none; box-shadow: none; } 301 302.pages-list row:not(:last-child) { margin-bottom: 2px; } 303 304.pages-list row:selected { background: #1b1b1b; } 305 306.pages-list row:hover { background: #0f0f0f; } 307 308.pages-list row .close-button { background: none; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; min-width: 24px; min-height: 24px; border-radius: 99px; color: inherit; padding: 0; margin: 2px; } 309 310.pages-list row .close-button:hover { background: alpha(#eeeeec,0.15); } 311 312.pages-list row .close-button:hover:active { background: alpha(black,0.2); } 313 314#pages-view .pages-list row .close-button { min-width: 36px; min-height: 36px; } 315