mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-08-08 07:36:28 +02:00
Code Issues Releases Wiki Activity

ui enhancements for color picker and report abuse (#972, #943) (#1024)

Browse Source
This commit is contained in:
Clemens Bastian
2022-01-17 18:48:33 +01:00
committed by GitHub
parent bf1b229875
commit 8dc9eb4465
2 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/assets/css/style.css
View File

@@ -327,37 +327,33 @@ header {
font-size: 1rem; font-size: 1rem;
background-color: var(--primaryColor); background-color: var(--primaryColor);
border-radius: 0.2em; border-radius: 0.2em;
border: 2px solid var(--grey); border: 1px solid var(--grey);
transform: translate(0, -30%); transform: translate(0, -30%);
padding: 0.5em; padding: 1em;
padding-top: 0;
margin-left: 1em; margin-left: 1em;
font-weight: normal; font-weight: normal;
z-index: 1; z-index: 1;
display: none; display: none;
} -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
.colorPickerMenuCloseBtn {
color: red;
font-weight: bold;
margin-top: 0;
margin-right: 0.25em;
display: flex;
flex-direction: row-reverse;
} }
.colorPickerMenuCloseBtn > span:hover { .colorPickerMenuCloseBtn > span:hover {
cursor: pointer; cursor: pointer;
} }
.colorPickerResetBtn { .colorPickerBtn {
margin: auto; margin: auto;
margin-top: 0.5em; margin-top: 0.5em;
display: block;
width: min-content; width: min-content;
background-color: var(--primaryColor); background-color: var(--primaryColor);
border-radius: 1em; border-radius: 1em;
border: 1px solid var(--grey); border: 1px solid var(--grey);
display: inline-block;
}
.colorPickerBtn:hover {
background-color: var(--grey);
} }
.checkerboardInput { .checkerboardInput {

18
docs/index.html
View File

@@ -67,16 +67,16 @@
<span> <span>
<img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('fontColorPickerMenu')"> <img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">
<span class='colorPickerMenu' id='fontColorPickerMenu'> <span class='colorPickerMenu' id='fontColorPickerMenu'>
<div class='colorPickerMenuCloseBtn'><span ng-click="toggleColorPickerMenu('fontColorPickerMenu')">X</span></div>
<div> <div>
<input type='color' value='#60be86' ng-model="fontBackground"> <input type='color' value='#60be86' ng-model="fontBackground">
Background Color Background Color
</div> </div>
<div> <div>
<input type='checkbox' class='checkerboardInput' ng-model="fontDisplayCheckerboard"> <input type='checkbox' id='checkboardInputFont' class='checkerboardInput' ng-model="fontDisplayCheckerboard">
<label for='checkboardInput' >Checkerboard</label> <label for='checkboardInputFont' >Checkerboard</label>
</div> </div>
<button class='colorPickerResetBtn' ng-click="fontBackground = DEFAULT_BACKGROUND">Reset</button> <button class='colorPickerBtn' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">Close</button>
<button class='colorPickerBtn' ng-click="fontBackground = DEFAULT_BACKGROUND; fontDisplayCheckerboard=0; toggleColorPickerMenu('fontColorPickerMenu')">Reset</button>
</span> </span>
</span> </span>
</h4> </h4>
@@ -121,16 +121,16 @@
<span> <span>
<img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('svgColorPickerMenu')"> <img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('svgColorPickerMenu')">
<span class='colorPickerMenu' id='svgColorPickerMenu'> <span class='colorPickerMenu' id='svgColorPickerMenu'>
<div class='colorPickerMenuCloseBtn'><span ng-click="toggleColorPickerMenu('svgColorPickerMenu')">X</span></div>
<div> <div>
<input type='color' value='#60be86' ng-model="svgBackground"> <input type='color' value='#60be86' ng-model="svgBackground">
Background Color Background Color
</div> </div>
<div> <div>
<input type='checkbox' class='checkerboardInput' ng-model="svgDisplayCheckerboard"> <input type='checkbox' id='checkboardInputSvg' class='checkerboardInput' ng-model="svgDisplayCheckerboard">
<label for='checkboardInput' >Checkerboard</label> <label for='checkboardInputSvg' >Checkerboard</label>
</div> </div>
<button class='colorPickerResetBtn' ng-click="svgBackground = DEFAULT_BACKGROUND">Reset</button> <button class='colorPickerBtn' ng-click="toggleColorPickerMenu('svgColorPickerMenu')">Close</button>
<button class='colorPickerBtn' ng-click="svgBackground = DEFAULT_BACKGROUND; svgDisplayCheckerboard=0; toggleColorPickerMenu('svgColorPickerMenu')">Reset</button>
</span> </span>
</span> </span>
</h4> </h4>
@@ -186,7 +186,7 @@
</p> </p>
<h3>Contact</h3> <h3>Contact</h3>
<h5>If you have any legal concerns regarding copyrights, please reach out to us at <b><a>info@devicon.dev</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5> <h5>If you have any legal concerns regarding copyrights or want to report an abuse, please reach out to us at <b><a href="mailto:info@devicon.dev">info@devicon.dev</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>
<footer> <footer>
Originally created by <a href="https://github.com/konpa">Konpa</a> (under <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br /> Originally created by <a href="https://github.com/konpa">Konpa</a> (under <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br />