1094 lines
No EOL
31 KiB
CSS
1094 lines
No EOL
31 KiB
CSS
/* φ Phi (/faɪ/)
|
||
* The ultimate vertical experience theme for Vivaldi, made with attention to details.
|
||
* Version 2025_11_23.0
|
||
*
|
||
* Last Linux test : Phi current on Vivaldi v7.8.3925.70
|
||
* Last Windows test : Phi 2025_05_09.0 on Vivaldi v7.3.3635.12
|
||
* Last Mac test : Phi 2025_05_09.0 on Vivaldi v7.3.3635.4
|
||
*
|
||
* (C) 2025 — KaKi87
|
||
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||
* THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||
*
|
||
* https://git.kaki87.net/KaKi87/phi-for-vivaldi
|
||
*/
|
||
|
||
/*┌──────────────────┐
|
||
│User customization│
|
||
└──────────────────┘*/
|
||
|
||
:root
|
||
{
|
||
--phi--sidebar-width: 210;
|
||
--phi--compact-sidebar-width: 50;
|
||
--phi--is-auto-compact-mode: 0;
|
||
--phi--is-phi-menu-icon: 1;
|
||
--phi--toolbar-column-count: 5;
|
||
--phi--address-bar-focused-width-increase: 200;
|
||
--phi--address-bar-font-size-decrease: 1;
|
||
--phi--is-address-bar-focused-height-increase: 1;
|
||
--phi--is-address-bar-unfocused-partial: 0;
|
||
--phi--is-address-bar-unfocused-hide-icons: 1;
|
||
--phi--is-address-bar-focused-hide-icons: 0;
|
||
--phi--pinned-column-count: 4;
|
||
--phi--webview-border: 0;
|
||
--phi--webview-border-radius: 0;
|
||
--phi--webview-shadow-size: 0;
|
||
--phi--webview-shadow-color: 0, 0, 0, 0.25;
|
||
--phi--is-individual-tiled-tab-header: 0;
|
||
--phi--is-hide-window-controls: 0;
|
||
--phi--is-hide-content-blocker: 1;
|
||
}
|
||
|
||
/*
|
||
* You may copy the above settings in a separate 'phi-custom.css'
|
||
* while replacing ':root' with 'body' to persist your customizations when updating.
|
||
* See the README for detailed instructions.
|
||
*/
|
||
@import './phi-settings.css';
|
||
|
||
/*┌───────────┐
|
||
│Source code│
|
||
└───────────┘*/
|
||
|
||
.minimal-ui
|
||
{
|
||
.toolbar-mainbar[aria-label],
|
||
#panels-container,
|
||
&.linux #header,
|
||
&.win #header
|
||
{
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
#app:has(#browser:not(.inner, .minimal-ui, .popup, .tabs-top, .tabs-bottom, .break-mode, .tabs-off))
|
||
{
|
||
&:has(#panel_switch) { --phi___is-compact-mode: 1; }
|
||
&:has(.toolbar-panel .button-toolbar.active) { --phi___is-panel-open: 1; }
|
||
&:not(:has(.panel-collapse-guard)), &:has(.panel-collapse-guard[aria-hidden="true"]) { --phi___is-panel-closed: 1; }
|
||
&:has(.auto-hide) { --phi__is-auto-hide: 1; }
|
||
&:has(.auto-hide-visible), &:has(.auto-hide-wrapper:hover) { --phi__is-auto-hide-visible: 1; }
|
||
|
||
.separator-wsbutton,
|
||
.is-pinned .title,
|
||
.tab-group .title:not(:has(.tab-title-edit)),
|
||
#tabs-tabbar-container .SlideBar,
|
||
#panel_switch
|
||
{
|
||
display: none !important;
|
||
}
|
||
|
||
@container style(--phi--is-auto-compact-mode: 1)
|
||
{
|
||
--phi___is-compact-mode: 1;
|
||
|
||
&:has(
|
||
[name="WorkspaceButton"]:hover,
|
||
.toolbar-mainbar[aria-label]:hover,
|
||
#tabs-container:hover,
|
||
.toolbar-panel:hover
|
||
)
|
||
{
|
||
--phi___is-compact-mode: 0;
|
||
}
|
||
}
|
||
|
||
@container style(--phi--is-hide-content-blocker: 1)
|
||
{
|
||
.ContentBlocker-Control
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
#main,
|
||
#titlebar,
|
||
.tabbar-wrapper,
|
||
#tabs-tabbar-container,
|
||
.workspace-popup,
|
||
.mainbar,
|
||
.mainbar > div,
|
||
#panels,
|
||
#switch,
|
||
.tab-position,
|
||
#main > .inner,
|
||
.auto-hide,
|
||
.auto-hide-wrapper,
|
||
.auto-hide-wrapper:before
|
||
{
|
||
display: contents !important;
|
||
}
|
||
|
||
#browser
|
||
{
|
||
display: grid;
|
||
grid-template-rows: auto auto 1fr auto;
|
||
}
|
||
|
||
#browser.tabs-left
|
||
{
|
||
grid-template-columns: calc(var(--phi--sidebar-width) * 1px) auto;
|
||
--phi__sidebar-order: 1;
|
||
--phi__page-order: 2;
|
||
|
||
&:has(.auto-hide-wrapper):not(.auto-hide-visible):not(:has(.auto-hide-wrapper:hover))
|
||
{
|
||
grid-template-columns: 0 auto;
|
||
}
|
||
}
|
||
|
||
#browser.tabs-right
|
||
{
|
||
grid-template-columns: auto calc(var(--phi--sidebar-width) * 1px);
|
||
--phi__sidebar-order: 2;
|
||
--phi__page-order: 1;
|
||
|
||
&:has(.auto-hide-wrapper):not(.auto-hide-visible):not(:has(.auto-hide-wrapper:hover))
|
||
{
|
||
grid-template-columns: auto 0;
|
||
}
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
#browser.tabs-left
|
||
{
|
||
grid-template-columns: calc(var(--phi--compact-sidebar-width) * 1px) auto;
|
||
}
|
||
|
||
#browser.tabs-right
|
||
{
|
||
grid-template-columns: auto calc(var(--phi--compact-sidebar-width) * 1px);
|
||
}
|
||
}
|
||
|
||
#webview-container
|
||
{
|
||
grid-column: var(--phi__page-order) / span 1;
|
||
}
|
||
|
||
[name="WorkspaceButton"],
|
||
.toolbar-mainbar[aria-label],
|
||
#tabs-container,
|
||
.toolbar-panel
|
||
{
|
||
grid-column: var(--phi__sidebar-order) / span 1;
|
||
}
|
||
|
||
&:has(.auto-hide):not(:has(.auto-hide-visible)):not(:has(.auto-hide-wrapper:hover))
|
||
{
|
||
[name="WorkspaceButton"],
|
||
.toolbar-mainbar[aria-label],
|
||
#tabs-container,
|
||
.toolbar-panel
|
||
{
|
||
opacity: 0;
|
||
max-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
#webview-container { grid-row: 1 / -1; }
|
||
.toolbar-mainbar[aria-label] { grid-row: 1 / span 1; }
|
||
[name="WorkspaceButton"] { grid-row: 2 / span 1; }
|
||
#tabs-container { grid-row: 3 / span 1; }
|
||
.toolbar-panel { grid-row: 4 / span 1; }
|
||
|
||
.window-buttongroup
|
||
{
|
||
position: relative !important;
|
||
left: unset !important;
|
||
right: unset !important;
|
||
grid-row: 1 / 2;
|
||
grid-column: 1 / -1;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.vivaldi
|
||
{
|
||
position: relative;
|
||
top: unset !important;
|
||
margin-left: 5px !important;
|
||
margin-right: 0 !important;
|
||
padding: 0;
|
||
justify-self: center;
|
||
}
|
||
|
||
@container style(--phi--is-phi-menu-icon: 1)
|
||
{
|
||
.vivaldi-v svg
|
||
{
|
||
display: none;
|
||
}
|
||
.vivaldi-v
|
||
{
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='238 238 24 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='7.482' x2='18.941' y1='4.223' y2='24.076' gradientTransform='translate(238 238)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='.2'/%3E%3Cstop offset='.79' stop-opacity='.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23EF3939' d='M250 262c5.258 0 8.181 0 10.09-1.91C262 258.181 262 255.259 262 250c0-5.259 0-8.181-1.91-10.09C258.181 238 255.258 238 250 238c-5.259 0-8.185 0-10.09 1.91-1.906 1.909-1.91 4.831-1.91 10.09 0 5.259 0 8.181 1.91 10.09C241.819 262 244.741 262 250 262Z' pointer-events='none'/%3E%3Cpath fill='url(%23a)' d='M257.802 245.559c-.579-1.044-1.576-1.899-2.514-2.639-.938-.739-1.859-1.185-3.01-1.504-1.151-.32-2.328-.314-3.513-.164s-2.205.421-3.24 1.017c-1.035.597-1.839 1.327-2.562 2.278-.724.95-1.205 1.893-1.505 3.049-.301 1.156-.41 2.437-.239 3.619.17 1.182.376 2.307.99 3.332l.051.087 4.227 7.328c.702.019 1.461.027 2.278.025h1.201a56.21 56.21 0 0 0 5.746-.17c1.913-.21 3.287-.68 4.339-1.739 1.548-1.547 1.841-3.76 1.895-7.339l-4.144-7.18Z' pointer-events='none'/%3E%3Cpath fill='%23fff' d='M258.313 246.553a9.003 9.003 0 0 1 0 6.894 8.987 8.987 0 0 1-1.956 2.92 9 9 0 0 1-9.805 1.947A8.995 8.995 0 0 1 241 250a8.995 8.995 0 0 1 5.552-8.314 8.998 8.998 0 0 1 11.761 4.867Zm-9.991-2.476a4.826 4.826 0 0 0-1.928 1.28 4.867 4.867 0 0 0-1.186 2.333 5.442 5.442 0 0 0-.089 1.124 4.835 4.835 0 0 0 1.223 3.036c.028.037.069.072.099.111.485.51 1.079.92 1.735 1.175.129.052.263.096.393.14.048.632.136 1.261.275 1.879.041.168.081.339.144.501a.852.852 0 0 0 .307.393.777.777 0 0 0 .566.104.823.823 0 0 0 .456-.263.79.79 0 0 0 .179-.501c-.014-.219-.099-.424-.141-.637a10.952 10.952 0 0 1-.204-1.271l.011-.009a4.778 4.778 0 0 0 2.389-.746 5.006 5.006 0 0 0 1.493-1.477 4.99 4.99 0 0 0 .525-1.067c.062-.189.128-.376.181-.568.072-.248.112-.504.126-.765 0-.056.001-.113.009-.169v-.326c-.009-.052-.009-.105-.012-.16a3.23 3.23 0 0 0-.101-.646 4.903 4.903 0 0 0-.541-1.328 2.939 2.939 0 0 0-.334-.451 2.273 2.273 0 0 0-.741-.549 2.584 2.584 0 0 0-.956-.214 2.36 2.36 0 0 0-.984.194 2.775 2.775 0 0 0-.928.665 3.844 3.844 0 0 0-.544.729c-.297.515-.507 1.079-.674 1.649-.299 1.037-.453 2.11-.511 3.185-.009.055-.003.111-.016.165a3.195 3.195 0 0 1-.705-.455 3.32 3.32 0 0 1-1.021-1.554 2.984 2.984 0 0 1-.126-.791 4.648 4.648 0 0 1 .002-.457 3.274 3.274 0 0 1 1.573-2.511c-.005.058-.003.116-.003.173a.808.808 0 0 0 .288.545.77.77 0 0 0 .712.145.867.867 0 0 0 .313-.19 1.7 1.7 0 0 0 .153-.153c.181-.199.355-.407.502-.631.1-.157.19-.32.251-.496.081-.227.112-.478.036-.708a.98.98 0 0 0-.407-.521 1.23 1.23 0 0 0-.669-.157c-.074.005-.149.006-.222.017a4.638 4.638 0 0 0-.898.228Zm3.756 2.491c.119 0 .243-.012.351.041l.02.008a.151.151 0 0 0 .036.018c.013.009.026.014.038.02a.858.858 0 0 1 .271.219c.066.076.118.164.17.249.04.076.075.15.113.227.022.052.042.106.067.158.065.189.112.385.135.584.05.363.033.734-.046 1.091-.019.107-.053.212-.082.318-.014.039-.023.074-.035.113-.019.032-.028.069-.039.104a.135.135 0 0 0-.019.045 1.139 1.139 0 0 0-.045.112c-.022.042-.042.08-.057.123a.154.154 0 0 0-.02.038.255.255 0 0 0-.019.037c0 .003-.007.012-.009.018a3.503 3.503 0 0 1-.465.685c-.031.044-.073.077-.105.119-.055.064-.12.119-.182.176-.18.163-.376.302-.586.424-.106.055-.211.111-.319.156-.065.029-.132.052-.196.078-.037.012-.076.023-.113.038-.076.019-.152.045-.23.061a4.806 4.806 0 0 1-.607.091c-.004-.103.011-.206.009-.311.008-.056.008-.111.012-.167.008-.054.002-.114.012-.168.035-.474.077-.946.158-1.412.075-.443.178-.883.309-1.314l.101-.309c.016-.034.025-.069.036-.103l.13-.317c.022-.042.043-.081.057-.122.005-.007.008-.016.01-.021a.251.251 0 0 1 .011-.017.138.138 0 0 1 .008-.02c.003-.005.008-.013.01-.019l.009-.018c.002-.004.008-.014.008-.019.1-.186.209-.371.342-.536.102-.123.217-.239.349-.326.066-.044.139-.077.209-.111a.438.438 0 0 1 .193-.041Z'/%3E%3C/svg%3E") center right/calc(100% - 5px) no-repeat;
|
||
}
|
||
}
|
||
|
||
.toolbar-mainbar[aria-label],
|
||
#tabs-container
|
||
{
|
||
padding: 0 5px !important;
|
||
}
|
||
|
||
.toolbar-mainbar[aria-label]
|
||
{
|
||
--phi__address-bar-row: 2;
|
||
--phi__extensions-row: 3;
|
||
&:has(.window-buttongroup)
|
||
{
|
||
--phi__address-bar-row: 3;
|
||
--phi__extensions-row: 4;
|
||
}
|
||
|
||
width: 100%;
|
||
height: auto !important;
|
||
display: grid;
|
||
grid-template-rows: 1fr 1fr auto;
|
||
grid-template-columns: repeat(var(--phi--toolbar-column-count), calc(100% / var(--phi--toolbar-column-count)));
|
||
|
||
-webkit-app-region: drag;
|
||
}
|
||
|
||
#tabs-container > .resize
|
||
{
|
||
max-height: 100% !important;
|
||
}
|
||
|
||
&:has(.window-buttongroup)
|
||
{
|
||
.toolbar-mainbar[aria-label]
|
||
{
|
||
--phi__window-controls-row-height: 1fr;
|
||
--phi__address-bar-row: 3;
|
||
--phi__extensions-row: 4;
|
||
grid-template-rows: var(--phi__window-controls-row-height) 1fr 1fr auto;
|
||
}
|
||
|
||
#browser.mac.tabs-left .toolbar-mainbar[aria-label]
|
||
{
|
||
--phi__window-controls-row-height: 40px;
|
||
}
|
||
|
||
#browser.mac.tabs-right .toolbar-mainbar[aria-label]
|
||
{
|
||
--phi__window-controls-row-height: 0;
|
||
}
|
||
}
|
||
|
||
#browser.mac .window-buttongroup
|
||
{
|
||
height: var(--phi__window-controls-row-height);
|
||
}
|
||
|
||
@container style(--phi--is-hide-window-controls: 1)
|
||
{
|
||
.window-buttongroup
|
||
{
|
||
visibility: hidden;
|
||
}
|
||
.toolbar-mainbar[aria-label]
|
||
{
|
||
--phi__window-controls-row-height: 0 !important;
|
||
}
|
||
}
|
||
|
||
#browser.mac.tabs-right:not(.native, .fullscreen)
|
||
{
|
||
&::after
|
||
{
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 19px;
|
||
left: 21px;
|
||
width: 52px;
|
||
height: 13px;
|
||
background: white;
|
||
border-radius: 6.5px;
|
||
outline: 5px solid white;
|
||
}
|
||
|
||
&.isblurred::after
|
||
{
|
||
opacity: 0.1;
|
||
}
|
||
}
|
||
|
||
#browser.mac.tabs-right .toolbar-mainbar[aria-label],
|
||
#browser.native .toolbar-mainbar[aria-label]
|
||
{
|
||
padding-top: 5px !important;
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
#browser:not(.mac) .toolbar-mainbar[aria-label]
|
||
{
|
||
display: none;
|
||
}
|
||
|
||
#browser.mac
|
||
{
|
||
.toolbar-mainbar[aria-label]
|
||
{
|
||
.button-toolbar,
|
||
.UrlBar-AddressField,
|
||
.toolbar-extensions
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&.tabs-right .toolbar-mainbar[aria-label]
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
@container not style(--phi--address-bar-focused-width-increase: 0)
|
||
{
|
||
.toolbar-mainbar[aria-label]
|
||
{
|
||
--phi__address-bar-expansion-width: calc(var(--phi--address-bar-focused-width-increase) * 1px);
|
||
--phi__toolbar-width: calc((100% - var(--phi__address-bar-expansion-width)) / var(--phi--toolbar-column-count));
|
||
--phi__toolbar-columns: repeat(var(--phi--toolbar-column-count), var(--phi__toolbar-width));
|
||
}
|
||
|
||
&:has(#urlFieldInput:focus)
|
||
{
|
||
.toolbar-mainbar[aria-label]
|
||
{
|
||
width: calc(100% + var(--phi__address-bar-expansion-width));
|
||
}
|
||
|
||
#browser.tabs-left .toolbar-mainbar[aria-label]
|
||
{
|
||
grid-template-columns: var(--phi__toolbar-columns) var(--phi__address-bar-expansion-width);
|
||
}
|
||
|
||
#browser.tabs-right
|
||
{
|
||
.toolbar-mainbar[aria-label]
|
||
{
|
||
left: unset;
|
||
right: calc(100% - 10px);
|
||
grid-template-columns: var(--phi__address-bar-expansion-width) var(--phi__toolbar-columns);
|
||
}
|
||
|
||
&.native .toolbar-mainbar[aria-label] > *:first-child,
|
||
&:not(.native) .toolbar-mainbar[aria-label] .window-buttongroup + *,
|
||
.toolbar-mainbar[aria-label] .window-buttongroup
|
||
{
|
||
grid-column-start: 2;
|
||
}
|
||
|
||
.toolbar-extensions
|
||
{
|
||
grid-column: 2 / span var(--phi--toolbar-column-count);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.UrlBar-AddressField,
|
||
.toolbar-extensions,
|
||
.UrlBar-PrivateWindowIndicator
|
||
{
|
||
grid-column: 1 / span var(--phi--toolbar-column-count);
|
||
}
|
||
|
||
.UrlBar-AddressField
|
||
{
|
||
grid-row-start: var(--phi__address-bar-row);
|
||
z-index: 2;
|
||
margin: 0;
|
||
font-size: calc(13px - calc(var(--phi--address-bar-font-size-decrease) * 1px));
|
||
}
|
||
|
||
.UrlBar-AddressField:has(#urlFieldInput:focus)
|
||
{
|
||
grid-column: 1 / -1;
|
||
height: 100% !important;
|
||
font-size: unset;
|
||
}
|
||
|
||
@container style(--phi--is-address-bar-focused-height-increase: 1)
|
||
{
|
||
.UrlBar-AddressField:has(#urlFieldInput:focus)
|
||
{
|
||
grid-row-end: span 2;
|
||
}
|
||
}
|
||
|
||
@container style(--phi--is-address-bar-unfocused-partial: 1)
|
||
{
|
||
.UrlFragment-LinkWrapper > .UrlFragment--Lowlight
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@container style(--phi--is-address-bar-unfocused-hide-icons: 1)
|
||
{
|
||
&:not(:has(.ContentBlocker, #urlFieldInput:focus)) .ContentBlocker-Control
|
||
{
|
||
display: none;
|
||
}
|
||
&:not(:has(.button-popup:not(.ToolbarButtonPopup-DefaultStyles))) .UrlBar-AddressField:has(#urlFieldInput:not(:focus)) .toolbar-insideinput:last-child
|
||
{
|
||
& > *:not(.UrlBar-UrlObfuscationWarning, [class^="pageload"], .BookmarkButton--Active),
|
||
&:has(.progressing) .UrlBar-UrlObfuscationWarning
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
@container style(--phi--is-address-bar-focused-hide-icons: 1)
|
||
{
|
||
.UrlBar-AddressField:has(#urlFieldInput:focus) .toolbar-insideinput:last-child > *:not(.UrlBar-UrlObfuscationWarning)
|
||
{
|
||
display: none;
|
||
}
|
||
.UrlBar-AddressField:has(#urlFieldInput:focus) .UrlBar-UrlObfuscationWarning
|
||
{
|
||
margin-right: 5px;
|
||
}
|
||
.UrlBar-UrlField
|
||
{
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
|
||
.pageload-ticker
|
||
{
|
||
padding: 0 4px 0 0 !important;
|
||
}
|
||
|
||
.OmniDropdown
|
||
{
|
||
top: 105%;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.toolbar-extensions
|
||
{
|
||
grid-row: var(--phi__extensions-row) / span 1;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.toolbar-extensions:empty
|
||
{
|
||
display: block;
|
||
}
|
||
|
||
.toolbar-extensions:empty:after
|
||
{
|
||
width: 100%;
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
content: '🧩 No extensions installed';
|
||
opacity: 0.5;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.toolbar-extensions button
|
||
{
|
||
min-width: unset !important;
|
||
width: 30px;
|
||
height: 30px !important;
|
||
}
|
||
|
||
[name="WorkspaceButton"]
|
||
{
|
||
margin: 0 5px 5px 5px !important;
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
[name="WorkspaceButton"]
|
||
{
|
||
margin-top: 5px !important;
|
||
}
|
||
|
||
[name="WorkspaceButton"] .button-title
|
||
{
|
||
display: none;
|
||
}
|
||
|
||
.toolbar-panel
|
||
{
|
||
.toolbar-divider,
|
||
.toolbar-spacer
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
@container style(--phi___is-panel-open: 1)
|
||
{
|
||
#panels-container
|
||
{
|
||
position: absolute !important;
|
||
z-index: 4 !important;
|
||
}
|
||
|
||
#browser.mac.tabs-left #panels-container
|
||
{
|
||
padding-top: 50px;
|
||
}
|
||
|
||
#browser.mac.tabs-left .panel-group
|
||
{
|
||
padding-top: 40px;
|
||
}
|
||
|
||
.toolbar-panel::after
|
||
{
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
backdrop-filter: var(--backgroundBlur);
|
||
z-index: -1;
|
||
}
|
||
|
||
.toolbar-panel
|
||
{
|
||
.toolbar-divider,
|
||
.toolbar-spacer
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
@container style(--phi___is-panel-open: 1) and style(--phi__is-auto-hide-visible: 1)
|
||
{
|
||
.panel-group
|
||
{
|
||
pointer-events: none;
|
||
}
|
||
.toolbar-panel
|
||
{
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
@container style(--phi___is-panel-closed: 1)
|
||
{
|
||
#panels-container
|
||
{
|
||
display: contents;
|
||
}
|
||
|
||
.toolbar-panel
|
||
{
|
||
margin: 0;
|
||
flex-direction: row !important;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.toolbar-panel::before
|
||
{
|
||
content: '';
|
||
width: 100%;
|
||
border: 1px solid var(--colorAccentFg);
|
||
opacity: 0.15;
|
||
margin: 5px;
|
||
}
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1) and style(--phi___is-panel-closed: 1)
|
||
{
|
||
.toolbar-panel
|
||
{
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.tab-strip
|
||
{
|
||
overflow: hidden auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(var(--phi--pinned-column-count), minmax(0, 1fr));
|
||
grid-auto-rows: min-content;
|
||
gap: 5px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tab-wrapper,
|
||
.tab-strip .separator,
|
||
.newtab
|
||
{
|
||
grid-column: 1 / span var(--phi--pinned-column-count);
|
||
}
|
||
|
||
.tab-wrapper,
|
||
.tab-strip .separator
|
||
{
|
||
position: relative;
|
||
transform: none;
|
||
}
|
||
|
||
.tab-wrapper
|
||
{
|
||
margin: 0;
|
||
padding: 0;
|
||
max-height: unset;
|
||
}
|
||
|
||
.tab-strip .separator
|
||
{
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-strip .separator hr
|
||
{
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.tab-group-indicator
|
||
{
|
||
position: relative;
|
||
top: unset !important;
|
||
padding: 0;
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
.tab-group-indicator
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.svg-tab-selection
|
||
{
|
||
height: 100%;
|
||
max-height: unset !important;
|
||
}
|
||
|
||
.tab .title
|
||
{
|
||
padding-left: 10px !important;
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
.tab .favicon
|
||
{
|
||
margin: 0;
|
||
display: flex;
|
||
}
|
||
|
||
.tab .title,
|
||
.tab .close
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.tab-indicator
|
||
{
|
||
border: 0;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.tab-indicator:first-child
|
||
{
|
||
border-top-left-radius: var(--currentRadius);
|
||
}
|
||
|
||
.tab-indicator:last-child
|
||
{
|
||
border-top-right-radius: var(--currentRadius);
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
.tab-header
|
||
{
|
||
padding-left: 0;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
@container not style(--phi___is-compact-mode: 1)
|
||
{
|
||
.is-pinned
|
||
{
|
||
.tab-wrapper
|
||
{
|
||
align-self: end;
|
||
grid-column: span 1;
|
||
aspect-ratio: 1;
|
||
flex-direction: column-reverse;
|
||
background-color: var(--colorAccentBgAlphaHeavy);
|
||
}
|
||
|
||
.group
|
||
{
|
||
display: grid;
|
||
}
|
||
|
||
.tab,
|
||
.tab-group-indicator
|
||
{
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.tab
|
||
{
|
||
max-height: unset;
|
||
height: 100%;
|
||
grid-row: 1 / 3;
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-group-indicator
|
||
{
|
||
grid-row: 1 / 2;
|
||
column-gap: 2px;
|
||
}
|
||
|
||
.tab-header
|
||
{
|
||
flex: 1 !important;
|
||
padding: 0;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.button-badge
|
||
{
|
||
top: unset !important;
|
||
right: 2px !important;
|
||
bottom: 2px !important;
|
||
left: unset !important;
|
||
}
|
||
|
||
.tab-indicator:not(.active):not(:hover)
|
||
{
|
||
background-color: var(--colorHighlightFgAlpha) !important;
|
||
}
|
||
|
||
.tab-indicator.active
|
||
{
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-position:not(.is-pinned)
|
||
{
|
||
.group
|
||
{
|
||
margin-top: 0 !important;
|
||
border: 1px solid transparent;
|
||
height: 31px;
|
||
}
|
||
|
||
.group:hover
|
||
{
|
||
border-color: var(--colorAccentBgAlpha);
|
||
}
|
||
|
||
.group:has(.tab.active)
|
||
{
|
||
border-color: var(--colorBg);
|
||
}
|
||
|
||
.tab-group,
|
||
.tab-indicator
|
||
{
|
||
height: 30px !important;
|
||
}
|
||
|
||
.tab-group
|
||
{
|
||
flex: 0 0 28px;
|
||
border-top-right-radius: 0 !important;
|
||
border-bottom-right-radius: 0 !important;
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
.tab-group
|
||
{
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.tab-indicator:first-child
|
||
{
|
||
border-top-left-radius: 0;
|
||
}
|
||
|
||
.tab-indicator:last-child
|
||
{
|
||
border-top-right-radius: var(--currentRadius);
|
||
border-bottom-right-radius: var(--currentRadius);
|
||
}
|
||
|
||
.tab-indicator:not(:last-child)
|
||
{
|
||
border-right: 1px solid var(--colorAccentBgAlpha);
|
||
}
|
||
|
||
.group:has(.tab.active) .tab-indicator:not(:last-child)
|
||
{
|
||
border-right: 1px solid var(--colorBg);
|
||
}
|
||
|
||
.tab-group.active:has(.close):hover
|
||
{
|
||
.tab-header
|
||
{
|
||
padding-left: 0;
|
||
justify-content: center;
|
||
}
|
||
|
||
@container not style(--phi___is-compact-mode: 1)
|
||
{
|
||
.favicon
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.close
|
||
{
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
|
||
.tab-indicator::before
|
||
{
|
||
content: attr(title);
|
||
font-size: 12px;
|
||
color: var(--colorAccentFg);
|
||
padding-left: 5px;
|
||
position: absolute;
|
||
width: calc(100% - 6px);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tab-wrapper:not(.active) .tab-indicator:hover,
|
||
.tab-indicator:not(.active):hover,
|
||
.group:has(.tab-group:hover) .tab-indicator.active
|
||
{
|
||
background-color: var(--colorAccentBgAlpha) !important;
|
||
}
|
||
}
|
||
|
||
#browser:not(.ui-transparent-tabs) .tab-position:not(.is-pinned)
|
||
{
|
||
.group:not(.active, :hover) .tab-indicator:not(:hover),
|
||
.tab-indicator:not(.active):not(:hover)
|
||
{
|
||
background-color: var(--colorAccentBgAlphaHeavy) !important;
|
||
}
|
||
}
|
||
|
||
#browser.ui-transparent-tabs .tab-position:not(.is-pinned)
|
||
{
|
||
.group:not(.active, :hover) .tab-indicator:not(:hover),
|
||
.tab-indicator:not(.active):not(:hover)
|
||
{
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
|
||
.tab-position:not(.is-pinned) .tab-indicator.active::before,
|
||
#browser.isblurred .tab-position:not(.is-pinned) .tab-indicator::before
|
||
{
|
||
color: var(--colorFg);
|
||
}
|
||
|
||
.toolbar-tabbar-after
|
||
{
|
||
flex: 1 1 35px;
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
.toolbar-tabbar-after
|
||
{
|
||
flex: 1 1 80px;
|
||
}
|
||
}
|
||
|
||
.toolbar-tabbar-after .toolbar-spacer-flexible
|
||
{
|
||
display: none;
|
||
}
|
||
|
||
.newtab
|
||
{
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
}
|
||
|
||
@container style(--phi___is-compact-mode: 1)
|
||
{
|
||
.sync-and-trash-container
|
||
{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
#webview-container
|
||
{
|
||
--colorBgDarker: transparent;
|
||
--colorBorder: transparent;
|
||
--colorBorderIntense: transparent;
|
||
}
|
||
|
||
#webpage-stack > .tiled
|
||
{
|
||
padding: 5px !important;
|
||
}
|
||
|
||
.tiled
|
||
{
|
||
gap: 6px;
|
||
}
|
||
|
||
.tiled .tile
|
||
{
|
||
border: 0 !important;
|
||
}
|
||
|
||
@container not style(--phi--webview-border: 0)
|
||
{
|
||
#webview-container,
|
||
#webpage-stack > .tiled
|
||
{
|
||
--phi__border: calc(var(--phi--webview-border) * 1px);
|
||
--phi__border-left-minus: 0px;
|
||
--phi__border-right-minus: 0px;
|
||
--phi__border-vertical-minus: 0px;
|
||
border-style: solid;
|
||
border-color: transparent;
|
||
}
|
||
|
||
&:not(:has(.tiled.active)) #webview-container,
|
||
&:has(.tiled.active) #webpage-stack > .tiled
|
||
{
|
||
border-top-width: calc(var(--phi__border) - var(--phi__border-vertical-minus));
|
||
border-bottom-width: calc(var(--phi__border) - var(--phi__border-vertical-minus));
|
||
border-left-width: calc(var(--phi__border) - var(--phi__border-left-minus));
|
||
border-right-width: calc(var(--phi__border) - var(--phi__border-right-minus));
|
||
}
|
||
}
|
||
|
||
@container (not style(--phi--webview-border: 0)) and ((not style(--phi__is-auto-hide: 1)) or style(--phi__is-auto-hide-visible: 1))
|
||
{
|
||
&:not(:has(.tiled.active))
|
||
{
|
||
|
||
#browser.tabs-left #webview-container
|
||
{
|
||
--phi__border-left-minus: 5px;
|
||
}
|
||
|
||
#browser.tabs-right #webview-container
|
||
{
|
||
--phi__border-right-minus: 5px;
|
||
}
|
||
}
|
||
|
||
#webpage-stack > .tiled
|
||
{
|
||
--phi__border-vertical-minus: 5px;
|
||
}
|
||
|
||
#browser.tabs-left #webpage-stack > .tiled
|
||
{
|
||
--phi__border-left-minus: 10px;
|
||
--phi__border-right-minus: 5px;
|
||
}
|
||
|
||
#browser.tabs-right #webpage-stack > .tiled
|
||
{
|
||
--phi__border-left-minus: 5px;
|
||
--phi__border-right-minus: 10px;
|
||
}
|
||
}
|
||
|
||
@container (not style(--phi--webview-border: 0)) and style(--phi__is-auto-hide: 1)
|
||
{
|
||
#webpage-stack > .tiled
|
||
{
|
||
--phi__border-vertical-minus: 5px;
|
||
--phi__border-left-minus: 5px;
|
||
--phi__border-right-minus: 5px;
|
||
}
|
||
}
|
||
|
||
@container not style(--phi--webview-border-radius: 0)
|
||
{
|
||
#webpage-stack,
|
||
.tiled.webpageview
|
||
{
|
||
border-radius: calc(var(--phi--webview-border-radius) * 1px) !important;
|
||
}
|
||
}
|
||
|
||
@container not style(--phi--webview-shadow-size: 0)
|
||
{
|
||
#webpage-stack:not(:has(.tiled.active)),
|
||
.tiled.webpageview:not(.active)
|
||
{
|
||
box-shadow: 0 0 calc(var(--phi--webview-shadow-size) * 1px) rgba(var(--phi--webview-shadow-color));
|
||
}
|
||
}
|
||
|
||
@container style(--phi--is-individual-tiled-tab-header: 1)
|
||
{
|
||
.tiled .webpage webview[src]
|
||
{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
&::before
|
||
{
|
||
content: '🔗 ' attr(src);
|
||
padding: 0.25rem 0;
|
||
width: 80%;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.button-toolbar:has(> [name="UpdateButton"]) {
|
||
z-index: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
border: calc(var(--phi--webview-border) * 1px) solid var(--colorWindowBg);
|
||
box-shadow: none;
|
||
}
|
||
} |