76 lines
1.9 KiB
CSS
76 lines
1.9 KiB
CSS
|
||
/* Table of contents
|
||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||
|
||
- Rounded user avatars
|
||
- Buttons
|
||
- Brand Styles
|
||
|
||
*/
|
||
|
||
|
||
/* Rounded avatars
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
/* Disable this if you don't want rounded avatars for users */
|
||
.rounded-avatar {
|
||
border-radius: 50%;
|
||
-webkit-box-shadow: 0px 0px 0px 3px #ffffff;
|
||
box-shadow: 0px 0px 0px 3px #ffffff;
|
||
background-color: #ffffff !important;
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
|
||
|
||
/* Buttons
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
:root {
|
||
/* violet */
|
||
--primary-color: 111, 76, 255;
|
||
|
||
/* white */
|
||
--text-color: 256, 256, 256;
|
||
}
|
||
|
||
.button {
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 18px;
|
||
padding: 12px 32px;
|
||
margin: 1rem;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
border-radius: 50px;
|
||
color: rgba(var(--text-color));
|
||
border: 2px double transparent;
|
||
background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
|
||
background-origin: border-box;
|
||
background-clip: padding-box, border-box;
|
||
max-width: 300px;
|
||
width: 70%;
|
||
}
|
||
|
||
.button:hover {
|
||
transition: all 0.3s ease;
|
||
box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
|
||
color: rgba(var(--text-color));
|
||
opacity: 0.85;
|
||
}
|
||
|
||
|
||
/* Brand Icons
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
.icon {
|
||
padding: 0px 8px 3.5px 0px;
|
||
/* position: absolute;
|
||
left: 20px;
|
||
top: 15px; */
|
||
vertical-align: middle;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|