Rewrite button stylesheet
This commit is contained in:
parent
fc9689e9a4
commit
26c6f75125
GPG Key ID:
F5D997A1BEF778ED
|
|
@ -1,124 +1,55 @@
|
|||
/* CSS for System64.dev buttons, by IDeletedSystem64. Under MIT License (v4.14.23) */
|
||||
/* Loosely based from 98css, Check it out here: https://jdan.github.io/98.css/ */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
|
||||
/* Import dem fonts */
|
||||
/* CSS for System64.dev v2, by IDeletedSystem64. Under MIT License (7.31.23) */
|
||||
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
|
||||
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
|
||||
/* Get those fonts */
|
||||
|
||||
/*
|
||||
CSS rule items are seperated depending on what they do around here,
|
||||
For example: Text/font related rules are grouped together
|
||||
while the height/width is in its own group, with white space
|
||||
seperating the groups; They are also seperated with comments.
|
||||
*/
|
||||
|
||||
/* Input / Buttons */
|
||||
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
background: #c3c3c3;
|
||||
box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;
|
||||
|
||||
min-width: 200px;
|
||||
top: -1px;
|
||||
min-width: 200px;
|
||||
min-height: 16px;
|
||||
|
||||
color: black;
|
||||
font-size: 17pt;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
}
|
||||
input.taskbar {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #c3c3c3;
|
||||
box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;
|
||||
|
||||
font-family: 'Share Tech Mono', 'monospace';
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
|
||||
height: 26px;
|
||||
min-width: 170px;
|
||||
max-width: 230px;
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
input.taskbar:active {
|
||||
background: #acacac;
|
||||
background-position: 2px;
|
||||
}
|
||||
|
||||
input.start {
|
||||
height: 28px;
|
||||
min-width: 130px;
|
||||
max-width: 230px;
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
|
||||
background: url(/img/taskbar/blueberry_pt.png) left no-repeat;
|
||||
padding-left: 25px;
|
||||
background-position: 3px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input.start:active {
|
||||
background-color: #acacac;
|
||||
background-image: url(/img/taskbar/blueberry_pt.png) left no-repeat;
|
||||
}
|
||||
|
||||
input:active {
|
||||
background: #acacac;
|
||||
box-shadow: inset 0em 0em
|
||||
background: #dadada;
|
||||
box-shadow: inset 0em 0em;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease-in-out;
|
||||
/* Inputs for Taskbar */
|
||||
|
||||
input.start {
|
||||
/* Yes, the home button is called the "Start" button inside, sue us, Microsoft! */
|
||||
height: 29px;
|
||||
min-width: 130px;
|
||||
max-width: 230px;
|
||||
|
||||
padding-left: 25px;
|
||||
|
||||
background: url(/img/taskbar/blueberry_pt.png) no-repeat, left;
|
||||
background-position: 3px;
|
||||
}
|
||||
|
||||
.button.button1 {
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
min-height: 23px;
|
||||
color: #000;
|
||||
padding: 0 2px 2px 0;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
border-right: 0.1px solid transparent;
|
||||
border-bottom: 1px solid #333333;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
background-color: #979797;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.button.button1 span {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #dad9d9;
|
||||
font-size: 170%;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
box-shadow: inset -0.05em -0.05em black;
|
||||
}
|
||||
|
||||
.button.button1 span:hover,
|
||||
.button.button1:hover + .button.button1 span {
|
||||
background-color: #ACACAC;
|
||||
border-top: 1px solid transparent;
|
||||
border-right: 0.1px solid #dad9d9;
|
||||
border-bottom: 1px solid #dad9d9;
|
||||
border-left: 1px solid transparent;
|
||||
box-shadow: inset -0.05em -0.05em transparent;}
|
||||
.button.button1:hover {
|
||||
background-color: #ACACAC;
|
||||
}
|
||||
/* *vomits* */
|
||||
|
||||
@media (max-width: 64em) {
|
||||
input {
|
||||
min-height: 70px;
|
||||
min-width: 250px;
|
||||
font-size: 32pt;
|
||||
}
|
||||
input.taskbar{
|
||||
height: 29px;
|
||||
min-width: 170px;
|
||||
max-width: 230px;
|
||||
}
|
||||
Loading…
Reference in New Issue