mirror of
https://github.com/konpa/devicon.git
synced 2025-08-20 13:21:42 +02:00
Add styling for color picker
This commit is contained in:
Thomas Bui
@@ -2,6 +2,13 @@
|
||||
@import '//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css';
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Damion);
|
||||
:root {
|
||||
--primaryColor: #60be86;
|
||||
--primaryColorDark: #2D804E;
|
||||
--primaryColorLight: #65d693;
|
||||
--grey: #4c6857;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box; }
|
||||
|
||||
@@ -17,71 +24,6 @@ html {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.icon-brush:before {
|
||||
content: "\e600"; }
|
||||
|
||||
.icon-type:before {
|
||||
content: "\e601"; }
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e602"; }
|
||||
|
||||
.icon-github2:before {
|
||||
content: "\e603"; }
|
||||
|
||||
.icon-bucket:before {
|
||||
content: "\e605"; }
|
||||
|
||||
.icon-github3:before {
|
||||
content: "\e604"; }
|
||||
|
||||
.icon-bucket2:before {
|
||||
content: "\e606"; }
|
||||
|
||||
/* Cachons la case à cocher */
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
position: absolute;
|
||||
left: -9999px; }
|
||||
|
||||
/* on prépare le label */
|
||||
[type="checkbox"]:not(:checked) + label,
|
||||
[type="checkbox"]:checked + label {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
padding: 0.71429rem 1.07143rem;
|
||||
margin-left: 0.35714rem;
|
||||
font-family: "Lato", Calibri, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #60be86;
|
||||
background: #4f755e;
|
||||
box-shadow: 0px 6px 0px #4a5c51;
|
||||
border-radius: 5px; }
|
||||
|
||||
/* Aspect si "cochée" */
|
||||
[type="checkbox"]:checked + label {
|
||||
top: 6px;
|
||||
box-shadow: 0px 0px 0px #4a5c51; }
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
padding: 0.71429rem 1.07143rem;
|
||||
margin: 0 0.71429rem;
|
||||
font-family: "Lato", Calibri, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #60be86;
|
||||
background: #4c6857;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 6px 0px #4a5c51; }
|
||||
.button:active {
|
||||
top: 6px;
|
||||
box-shadow: 0px 0px 0px #4a5c51; }
|
||||
|
||||
/* General Blueprint Style */
|
||||
*,
|
||||
*:after,
|
||||
@@ -105,12 +47,11 @@ html {
|
||||
clear: both; }
|
||||
|
||||
body {
|
||||
color: #47a3da;
|
||||
font-family: 'Lato', Calibri, Arial, sans-serif; }
|
||||
|
||||
a {
|
||||
color: #f0f0f0;
|
||||
text-decoration: none; }
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000; }
|
||||
@@ -137,7 +78,7 @@ a:hover {
|
||||
.cbp-ig-grid li > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: #60be86;
|
||||
color: var(--primaryColor);
|
||||
-webkit-transition: background 0.2s;
|
||||
-moz-transition: background 0.2s;
|
||||
transition: background 0.2s;
|
||||
@@ -173,7 +114,7 @@ a:hover {
|
||||
.cbp-ig-grid .cbp-ig-title:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #60be86;
|
||||
background: var(--primaryColor);
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
top: 0;
|
||||
@@ -184,7 +125,7 @@ a:hover {
|
||||
transition: margin-top 0.2s; }
|
||||
|
||||
.cbp-ig-grid li > span:hover {
|
||||
background: #60be86; }
|
||||
background: var(--primaryColor); }
|
||||
|
||||
.cbp-ig-grid li > span:hover .cbp-ig-icon {
|
||||
-webkit-transform: translateY(10px);
|
||||
@@ -252,7 +193,7 @@ header {
|
||||
padding: 0 2rem;
|
||||
width: 480px;
|
||||
color: whitesmoke;
|
||||
background: #60be86; }
|
||||
background: var(--primaryColor); }
|
||||
header > h1,
|
||||
header > h3 {
|
||||
font-weight: 400;
|
||||
@@ -278,12 +219,13 @@ header {
|
||||
font-size: 3rem; }
|
||||
header .download a {
|
||||
padding: 1.3rem 1.8rem;
|
||||
border: 6px solid #60be86;
|
||||
color: #60be86;
|
||||
background: whitesmoke; }
|
||||
border: 6px solid var(--primaryColor);
|
||||
color: var(--primaryColor);
|
||||
background: whitesmoke;
|
||||
text-decoration: none;}
|
||||
header .download a:hover {
|
||||
border-color: whitesmoke;
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
header > h3 {
|
||||
margin: 4rem 0 0;
|
||||
font-size: 3rem;
|
||||
@@ -316,9 +258,9 @@ header {
|
||||
margin: .5rem .3rem;
|
||||
padding: .4rem;
|
||||
cursor: pointer;
|
||||
border: 5px solid #60be86; }
|
||||
border: 5px solid var(--primaryColor); }
|
||||
header .icons-list li:hover {
|
||||
border: 5px solid #65d693;
|
||||
border: 5px solid var(--primaryColorLight);
|
||||
border-radius: 5px; }
|
||||
header .icons-list li:hover::before {
|
||||
content: ' ';
|
||||
@@ -330,9 +272,9 @@ header {
|
||||
height: 0px;
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-top: 15px solid #65d693; }
|
||||
border-top: 15px solid var(--primaryColorLight); }
|
||||
header .icons-list li.selected-version {
|
||||
border: 5px solid #65d693;
|
||||
border: 5px solid var(--primaryColorLight);
|
||||
border-radius: 5px; }
|
||||
header .icons-list li.selected-version::before {
|
||||
position: absolute;
|
||||
@@ -341,7 +283,7 @@ header {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid #65d693;
|
||||
border-top: 15px solid var(--primaryColorLight);
|
||||
border-right: 15px solid transparent;
|
||||
border-left: 15px solid transparent;
|
||||
content: ' '; }
|
||||
@@ -351,12 +293,51 @@ header {
|
||||
max-width: 100%; }
|
||||
|
||||
|
||||
/** color picker */
|
||||
.colorPicker {
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
|
||||
.colorPickerMenu {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
background-color: var(--primaryColor);
|
||||
border-radius: 1em;
|
||||
border: 2px solid var(--grey);
|
||||
transform: translate(0, -30%);
|
||||
padding: 0.5em;
|
||||
margin-left: 1em;
|
||||
font-weight: normal;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.colorPickerResetBtn {
|
||||
margin: auto;
|
||||
margin-top: 0.5em;
|
||||
display: block;
|
||||
width: min-content;
|
||||
background-color: var(--primaryColor);
|
||||
border-radius: 1em;
|
||||
border: 1px solid var(--grey);
|
||||
}
|
||||
|
||||
.checkerboardInput {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
position: relative;
|
||||
top: 0.2em;
|
||||
}
|
||||
|
||||
input[type='color'] {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-left: 0.5em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/** Copy Btn */
|
||||
|
||||
.copyBtn {
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
@@ -371,12 +352,12 @@ input[type='color'] {
|
||||
|
||||
.copyBtn:hover {
|
||||
cursor: pointer;
|
||||
background-color: #2D804E;
|
||||
background-color: var(--primaryColorDark);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
visibility: hidden;
|
||||
background-color: #2D804E;
|
||||
background-color: var(--primaryColorDark);
|
||||
border-radius: 0.25em;
|
||||
padding: 0.25em;
|
||||
}
|
||||
@@ -388,7 +369,7 @@ input[type='color'] {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
border: 8px solid #60be86; }
|
||||
border: 8px solid var(--primaryColor); }
|
||||
|
||||
.main {
|
||||
margin: 0 0 0 480px; }
|
||||
@@ -400,32 +381,34 @@ input[type='color'] {
|
||||
margin: 4rem;
|
||||
padding: .5rem 1rem;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #60be86;
|
||||
color: #60be86;
|
||||
border-bottom: 2px solid var(--primaryColor);
|
||||
color: var(--primaryColor);
|
||||
background: none;
|
||||
font-size: 1.2rem;
|
||||
text-align: center; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
/* Code related CSS */
|
||||
|
||||
.cde {
|
||||
white-space: nowrap;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
color: #4c6857;
|
||||
background: #65d693;
|
||||
color: var(--grey);
|
||||
background: var(--primaryColorLight);
|
||||
font-size: .9rem;
|
||||
font-family: courier;
|
||||
overflow: auto; }
|
||||
@@ -434,7 +417,7 @@ input[type='color'] {
|
||||
padding: 0 0 0 .5rem; }
|
||||
|
||||
.cde-com {
|
||||
color: #4c6857;
|
||||
color: var(--grey);
|
||||
opacity: .5; }
|
||||
|
||||
.footer {
|
||||
|
||||
Reference in New Issue
Block a user