ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2026-01-24 20:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

add dark theme support and some basic styles

Browse Source
This commit is contained in:
Andres
2022-06-21 12:10:49 +02:00
parent 2f0c8e8bc8
commit e1642e5f26
5 changed files with 158 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
View File

@@ -1,38 +1,37 @@
.select {
width: 100px;
padding: 5px;
padding-right: 30px;
cursor: pointer;
appearance: none;
background-color: #003300; /*---------------------------------------------------------------------------------------------------------------------------------------------------fill---------99ff99*/
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2399FF99%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
border: 2px inset rgb(118, 118, 118);
color: #99ff99;
width: 100px;
padding: 5px;
cursor: pointer;
appearance: none;
background-color: var(--primary);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1px + 50%),
calc(100% - 16px) calc(1px + 50%);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
border-radius: 2px;
border: 2px solid var(--primary);
color: var(--primary-content);
}
.select:focus {
outline: none;
border: #99ff99 solid 2px;
outline: none;
}
.option {
/*padding: 30px;*/
color: #003300;
background: #99ff99;
/*padding: 30px;*/
color: var(--primary-content);
background: var(--primary);
}
.option:checked {
background: #003300;
color: #99ff99;
color: var(--secondary-content);
background: var(--primary);
}
.option:hover{
box-shadow: 0 0 10px 100px #FED20F inset;
transition: all .2s ease-in-out;
background: red;
}
.option:hover {
box-shadow: 0 0 10px 100px #fed20f inset;
transition: all 0.2s ease-in-out;
background: red;
}