better download button style

This commit is contained in:
thomas girod
2024-07-30 19:57:56 +02:00
parent 91344741a5
commit 819e2b5f9f
6 changed files with 70 additions and 81 deletions

View File

@ -27,4 +27,6 @@ $twitblue: hsl(206, 82%, 63%);
$shadow-color: rgb(223, 223, 223);
$background-button-color: hsl(0, 0%, 95%);
$background-button-color: hsl(0, 0%, 95%);
$deepblue: #354a5f;

View File

@ -1,7 +1,8 @@
@import "colors";
$hovered-text-color: #c2c2c2;
$text-color: white;
$background-color: #354a5f;
$background-color-hovered: #283747;
$red-text-color: #eb2f06;
@ -9,7 +10,7 @@ $hovered-red-text-color: #ff4d4d;
.header {
box-sizing: border-box;
background-color: $background-color;
background-color: $deepblue;
box-shadow: 3px 3px 3px 0 #dfdfdf;
border-radius: 0;
width: 100%;
@ -98,7 +99,7 @@ $hovered-red-text-color: #ff4d4d;
border-radius: 0;
margin: 0;
box-sizing: border-box;
background-color: $background-color;
background-color: $deepblue;
width: 45px;
height: 25px;
padding: 0;
@ -213,7 +214,7 @@ $hovered-red-text-color: #ff4d4d;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: $background-color;
background-color: $deepblue;
}
>.options {

View File

@ -105,7 +105,7 @@ a:not(.button) {
.collapse-header {
color: white;
background-color: #354a5f;
background-color: $deepblue;
padding: 5px 10px;
display: flex;
align-items: center;
@ -206,34 +206,36 @@ a:not(.button) {
width: 90%;
margin: 20px auto 0;
/*---------------------------------NAV---------------------------------*/
.btn {
font-size: 15px;
font-weight: normal;
color: white;
min-width: 60px;
padding: 5px 10px;
padding: 9px 13px;
border: none;
text-decoration: none;
&.btn-blue {
background-color: #354a5f;
}
&.btn-blue:disabled {
background-color: rgba(70, 90, 126, 0.4);
}
&.btn-blue.clickable:not(:disabled):hover {
background-color: #2c3646;
background-color: $deepblue;
&:not(:disabled):hover {
background-color: darken($deepblue, 10%);
}
&:disabled {
background-color: rgba(70, 90, 126, 0.4);
}
}
&.btn-grey {
background-color: grey;
&:not(:disabled):hover {
background-color: darken(gray, 15%);
}
&:disabled {
background-color: lighten(gray, 15%);
}
}
&.btn-grey.clickable:not(:disabled):hover {
background-color: hsl(210, 5%, 30%);
i {
margin-right: 4px;
}
}
@ -977,7 +979,7 @@ thead td {
}
thead {
background-color: #354a5f;
background-color: $deepblue;
color: white;
}