Skip to content

Commit

Permalink
style toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@pchr-srf
pchr-srf committed Jan 11, 2024
1 parent b5c3918 commit 72d5414
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 7 deletions.
40 changes: 39 additions & 1 deletion src/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,44 @@ header h1 {
width: 1rem;
}

.content-id__icon svg * {
.content-id__icon * {
stroke: var(--text-color);
}

.show-environment {
position: relative;
}

.show-environment__input {
display: none;
}

.show-environment__icon {
position: absolute;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
}

.show-environment__icon * {
fill: var(--text-color);
}

.show-environment__icon ellipse {
opacity: 0.5;
transition: opacity 0.2s;
}

.show-environment__label {
cursor: pointer;
padding-left: 30px;
display: block;
}

.show-environment__input:checked + .show-environment__icon {
transform: translateY(-50%) rotate(180deg);
}

.show-environment__input:checked + .show-environment__icon ellipse {
opacity: 1;
}
16 changes: 10 additions & 6 deletions src/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,21 @@ <h2 class="section__title">Content-Info</h2>

<div class="section__content">
<div class="section__row">
<input type="checkbox" id="showEnvironment" name="showEnvironment">
<label for="showEnvironment">Banner mit Umgebungsinfo anzeigen</label>
<div class="show-environment">
<input class="show-environment__input" type="checkbox" id="showEnvironment" name="showEnvironment">
<svg class="show-environment__icon" height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M 280.244 -240 C 213.577 -240 156.911 -263.333 110.244 -310 C 63.577 -356.667 40.244 -413.333 40.244 -480 C 40.244 -546.667 63.577 -603.333 110.244 -650 C 156.911 -696.667 213.577 -720 280.244 -720 L 680.244 -720 C 746.911 -720 803.577 -696.667 850.244 -650 C 896.911 -603.333 920.244 -546.667 920.244 -480 C 920.244 -413.333 896.911 -356.667 850.244 -310 C 803.577 -263.333 746.911 -240 680.244 -240 L 280.244 -240 Z M 280.244 -320 L 680.244 -320 C 724.244 -320 761.911 -335.667 793.244 -367 C 824.577 -398.333 840.244 -436 840.244 -480 C 840.244 -524 824.577 -561.667 793.244 -593 C 761.911 -624.333 724.244 -640 680.244 -640 L 280.244 -640 C 236.244 -640 198.577 -624.333 167.244 -593 C 135.911 -561.667 120.244 -524 120.244 -480 C 120.244 -436 135.911 -398.333 167.244 -367 C 198.577 -335.667 236.244 -320 280.244 -320 Z M 480.244 -480 Z"></path>
<ellipse cx="276.311" cy="-481.21" rx="121.951" ry="121.951"></ellipse>
</svg>
<label class="show-environment__label" for="showEnvironment">Banner mit Umgebungsinfo anzeigen</label>
</div>
</div>

<div class="section__row js-contentid-container">
<label class="content-id js-copy-content-id">
<div class="content-id__label">ID</div>
<div class="content-id__label">ID:</div>
<input class="content-id__input" id="contentIdInput" value="">
<div class="content-id__icon">
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><g stroke-linecap="round" stroke-width="1.5" stroke="#000" fill="none" stroke-linejoin="round"><path d="M20.25,8.249v-3v0c0,-0.828427 -0.671573,-1.5 -1.5,-1.5h-4"></path><path d="M6.25,3.749h-4l-6.55671e-08,3.55271e-15c-0.828427,3.62117e-08 -1.5,0.671573 -1.5,1.5c0,0 0,3.55271e-15 0,3.55271e-15v16.5l1.68754e-14,-2.26494e-07c-1.25089e-07,0.828427 0.671573,1.5 1.5,1.5h6"></path><path d="M14.421,4.736l1.70847e-08,-5.11314e-08c-0.102346,0.306301 -0.389052,0.512875 -0.712,0.513h-6.418l-2.03548e-08,-7.85949e-12c-0.322947,-0.00012471 -0.609654,-0.206699 -0.712,-0.513l-1,-3l9.45021e-09,2.81987e-08c-0.131445,-0.392222 0.0799563,-0.816737 0.472178,-0.948182c0.0772955,-0.025904 0.158302,-0.0390156 0.239822,-0.0388176h8.418l-2.6737e-08,6.4961e-11c0.41366,-0.00100505 0.749813,0.333518 0.750818,0.747178c0.000198066,0.0815204 -0.0129136,0.162526 -0.0388176,0.239822Z"></path><path d="M12.75,23.249c-0.82842,0 -1.5,-0.67158 -1.5,-1.5v-9c0,-0.82842 0.67158,-1.5 1.5,-1.5h9c0.82842,0 1.5,0.67158 1.5,1.5v9c0,0.82842 -0.67158,1.5 -1.5,1.5Z"></path><path d="M14.25,14.25h6"></path><path d="M14.25,17.25h6"></path><path d="M14.25,20.25h2.25"></path></g></svg>
</div>
<svg class="content-id__icon" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><g stroke-linecap="round" stroke-width="1.5" stroke="#000" fill="none" stroke-linejoin="round"><path d="M20.25,8.249v-3v0c0,-0.828427 -0.671573,-1.5 -1.5,-1.5h-4"></path><path d="M6.25,3.749h-4l-6.55671e-08,3.55271e-15c-0.828427,3.62117e-08 -1.5,0.671573 -1.5,1.5c0,0 0,3.55271e-15 0,3.55271e-15v16.5l1.68754e-14,-2.26494e-07c-1.25089e-07,0.828427 0.671573,1.5 1.5,1.5h6"></path><path d="M14.421,4.736l1.70847e-08,-5.11314e-08c-0.102346,0.306301 -0.389052,0.512875 -0.712,0.513h-6.418l-2.03548e-08,-7.85949e-12c-0.322947,-0.00012471 -0.609654,-0.206699 -0.712,-0.513l-1,-3l9.45021e-09,2.81987e-08c-0.131445,-0.392222 0.0799563,-0.816737 0.472178,-0.948182c0.0772955,-0.025904 0.158302,-0.0390156 0.239822,-0.0388176h8.418l-2.6737e-08,6.4961e-11c0.41366,-0.00100505 0.749813,0.333518 0.750818,0.747178c0.000198066,0.0815204 -0.0129136,0.162526 -0.0388176,0.239822Z"></path><path d="M12.75,23.249c-0.82842,0 -1.5,-0.67158 -1.5,-1.5v-9c0,-0.82842 0.67158,-1.5 1.5,-1.5h9c0.82842,0 1.5,0.67158 1.5,1.5v9c0,0.82842 -0.67158,1.5 -1.5,1.5Z"></path><path d="M14.25,14.25h6"></path><path d="M14.25,17.25h6"></path><path d="M14.25,20.25h2.25"></path></g></svg>
</label>
</div>
</div>
Expand Down

0 comments on commit 72d5414

Please sign in to comment.