Document

HTML+CSS+JS实现React简单的计算器实例_可切换颜色的计算器html csdn

2024-04-14 12:31:45
dfer
48
javascript html css CSDN

color: var(–accent);
transition: all var(–transition) var(–easing);
}

button:hover {
color: var(–accent-dk);
}

button.block {
width: 100%;
}

button.transparent {
background-color: transparent;
}

button.no-padding {
padding: 0;
}

button.long-text {
font-size: 1rem;
}

.react-calculator {
position: relative;
margin: 0 auto;
width: 320px;
box-shadow: 0 19px 38px var(–pure-black-alpha-light), 0 15px 12px var(–pure-black-alpha-transparent);
}

body::-webkit-scrollbar,
.editable-field::-webkit-scrollbar,
.memory-bank::-webkit-scrollbar {
width: .5rem;
}

body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar:horizontal {
height: .5rem;
}

body::-webkit-scrollbar-track,
body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar-track,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar-track,
.memory-bank::-webkit-scrollbar:horizontal {
background-color: var(–pure-black);
}

body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar-thumb,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar-thumb,
.memory-bank::-webkit-scrollbar:horizontal {
background-color: var(–primary);
}

s body:hover::-webkit-scrollbar-thumb,
s body:hover::-webkit-scrollbar:horizontal,
s .editable-field:hover::-webkit-scrollbar-thumb,
s .editable-field:hover::-webkit-scrollbar:horizontal,
s .memory-bank:hover::-webkit-scrollbar-thumb,
s .memory-bank:hover::-webkit-scrollbar:horizontal {
background-color: var(–primary-dk);
}

.editable-field {
position: relative;
width: 320px;
height: 80px;
z-index: 10;
outline: none;
box-shadow: 0 4px 2px -2px var(–pure-black-alpha);
padding: .5rem;
overflow-y: hidden;
overflow-x: scroll;
background-color: var(–pure-black-alpha);
font-size: 2rem;
line-height: 2;
color: var(–primary);
text-align: right;
direction: rtl;
white-space: nowrap;
}

.memory-bank {
position: absolute;
top: 80px;
left: 0;
z-index: 10;
width: 100%;
height: 0;
overflow: hidden;
padding: 0;
background-color: var(–pure-black-alpha);
color: var(–accent-dk);
transition: height 150ms var(–easing), overflow 1ms var(–easing) 200ms, padding 1ms var(–easing) 200ms;
}

.memory-bank .toggle-close {
position: absolute;
top: 5px;
right: 5px;
padding: 2px 5px;
}

.memory-bank .toggle-close .title {
display: inline-block;
transform: rotate(45deg);
}

.memory-bank.visible {
height: calc(100% - 80px);
padding: 10px;
overflow-y: auto;
transition: height 200ms var(–easing), padding 1ms var(–easing);
}

.button-set–functions,
.button-set–equations {
background-color: var(–black);
}

.button-set–functions button,
.button-set–equations button {
display: inline-block;
width: 80px;
height: 80px;
vertical-align: top;
text-transform: uppercase;
font-variant: small-caps;
color: var(–primary);
}

.button-set–functions button:hover,
.button-set–equations button:hover {
color: var(–primary-dk);
}

.button-set–numbers {
width: 240px;
float: left;
background-color: var(–black);
}

.button-set–numbers button {
display: block;
position: relative;
width: 80px;
height: 80px;
float: left;
background-color: var(–black);
transition: box-shadow var(–transition) var(–easing);
}

.button-set–numbers button:last-child {
width: 100%;
}

.button-set–functions {
clear: left;
float: left;
width: 240px;
}