FOSS/remove-youtube-suggestions
1
0
Fork 0
mirror of https://github.com/lawrencehook/remove-youtube-suggestions.git synced 2026-07-25 06:54:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use flexbox in header

Browse Source
This commit is contained in:
Lawrence Hook
2022-09-05 20:16:17 -04:00
parent 7a06617752
commit d07ffcf457
2 changed files with 76 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/options/header.css
+70 -56
View File
@@ -9,62 +9,7 @@
html[global_enable="true"] #header-toggle-circle { cx: 11px }
html[global_enable="true"] #header-toggle-outer-path { fill: green }
/* Dark mode styling */
html[dark_mode='true'] #header-dark { display: none }
html[dark_mode='false'] #header-light { display: none }
#header-contents {
position: relative;
height: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
#header-logo {
position: absolute;
height: 95%;
/* center vertically */
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#header-logo:hover {
height: 98%;
}
#header-text {
top: 3px;
position: relative;
margin-left: 35px;
font-size: 20px;
color: var(--label-color);
}
#header-light, #header-dark {
cursor: pointer;
left: calc(100% - 57px);
height: 92%;
/* center vertically */
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#header-toggle {
cursor: pointer;
position: absolute;
left: calc(100% - 25px);
height: 75%;
/* center vertically */
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Visual cues for dark mode */
html[dark_mode='false'] #header-toggle path {
fill: #464646;
}
@@ -72,6 +17,75 @@ html[dark_mode='true'] #header-toggle path {
fill: var(--label-color);
}
/* Dark mode styling */
html[dark_mode='true'] #header-dark { display: none }
html[dark_mode='false'] #header-light { display: none }
#header {
height: 30px;
padding: 5px;
display: flex;
justify-content: space-between;
--icon-dim: 30px;
}
#header-left {
width: 80%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
#header-left a {
display: flex;
align-items: center;
}
#header-logo {
height: var(--icon-dim);
max-height: var(--icon-dim);
max-width: var(--icon-dim);
}
#header-text {
font-size: 20px;
color: var(--label-color);
}
#header-right {
width: 20%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
}
#dark_mode {
display: flex;
align-items: center;
}
#dark_mode a {
display: flex;
align-items: center;
}
#header-light, #header-dark {
cursor: pointer;
height: var(--icon-dim);
max-height: var(--icon-dim);
max-width: var(--icon-dim);
}
#global_enable {
display: flex;
align-items: center;
}
#header-toggle {
cursor: pointer;
height: calc(var(--icon-dim) - 3px);
max-height: var(--icon-dim);
max-width: var(--icon-dim);
}
#search_bar {
display: flex;
justify-content: center;
src/options.html
+6 -2
View File
@@ -18,13 +18,16 @@
<body>
<div id='header'>
<div id='header-contents'>
<div id='header-left'>
<a href='https://lawrencehook.com/rys' target='_blank'>
<img id='header-logo' src="images/rys.svg"></img>
<img id='header-logo' src="images/rys.svg">
</a>
<div id='header-text'>Remove Youtube Suggestions</div>
</div>
<div id='header-right'>
<div id='dark_mode'>
<a title='Dark Mode'>
<svg id='header-light' class='dark_mode' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -52,6 +55,7 @@
</svg>
</a>
</div>
</div>
<div id='search_bar'>