Change button style

This commit is contained in:
cuom1999 2022-08-20 11:18:28 -05:00
parent af670f7437
commit f5234dde56
12 changed files with 189 additions and 163 deletions

View file

@ -452,6 +452,7 @@ noscript #noscript {
.toggle {
font-weight: bold;
cursor: pointer;
.fa {
transition: transform 0.4s;

View file

@ -185,18 +185,12 @@
form.contest-join-pseudotab {
display: inline;
padding: 6px 8px !important;
line-height: 1.7em;
margin-left: 0.5em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-left: auto;
input {
display: inline;
border: none;
padding: 0;
background: none;
font-weight: 600;
padding-left: 5px !important;
padding-right: 5px !important;
}
}

View file

@ -60,7 +60,6 @@
a {
margin-right: 5px;
display: inline-block;
padding: 3px 10px;
vertical-align: middle;
}
@ -308,6 +307,7 @@ ul.problem-list {
border-radius: 5px;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
}
.problem-feed-option-item {

View file

@ -28,47 +28,93 @@
// Bootstrap-y buttons
.button, button, input[type=submit] {
color: white !important;
text-decoration: none !important;
align-items: center;
background-clip: padding-box;
background-color: #fa6400;
border: 1px solid transparent;
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: #fff !important;
cursor: pointer;
vertical-align: middle;
white-space: nowrap;
font-weight: 400;
line-height: 1.4;
background: rgb(51, 122, 183) none repeat scroll 0 (0% / auto) padding-box border-box;
background: -webkit-linear-gradient(top, #337ab7 0, #265a88 100%) repeat-x;
background: linear-gradient(to bottom, #337ab7 0, #265a88 100%) repeat-x;
border-radius: $widget_border_radius;
padding: 6px 12px;
display: block;
border: 1px solid #245580;
font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
text-align: center;
// 4k hack
font-size: $base_font_size;
&:hover {
background: #265a88;
}
width: auto;
&.disabled {
background: linear-gradient(to bottom, darkgray 0, gray 100%) repeat-x !important;
border-color: grey !important;
cursor: not-allowed;
}
&.small {
min-height: auto;
padding: calc(.5rem - 1px) calc(1rem - 1px);
}
&.btn-gray {
background: gray;
}
&.btn-green {
background: green;
&:hover {
background: #2c974b;
}
}
&.btn-darkred {
background: darkred;
&:hover {
background: brown;
}
}
&.btn-midnightblue {
background: midnightblue;
&:hover {
background: darkblue;
}
}
}
.button.full, input[type=submit].full, button.full {
padding: 6px 0;
}
button:hover, button:hover, input[type=submit]:hover {
background: #265a88;
.button:hover, button:hover, input[type=submit]:hover {
background-color: #fb8332;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
transform: translateY(-1px);
}
.button:focus, button:focus, input[type=submit]:focus {
background-color: #fb8332;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
.button:active, button:active, input[type=submit]:hover {
border-color: #245580;
background: #265a88;
background-color: #c85000;
box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
transform: translateY(0);
}
.inline-button {
@ -538,4 +584,4 @@ ul.select2-selection__rendered {
.control-button:hover {
background: gray;
}
}