candela97
commented
1 year ago Nice work! You can create code blocks on Github using triple backticks like this:
/*
* Workshop: Subscribe Button Colours
* -------------------------------------------------
*/
/*
Reference:
https://community.akamai.steamstatic.com/public/shared/css/buttons.css
Button classes:
*/
/* "Subscribe" (Inactive) (green:btn_green_white_innerfade) (not yet subcribed) */
#SubscribeItemBtn:not(.toggled) {}
#SubscribeItemBtn:not(.toggled) > span {}
#SubscribeItemBtn:not(.toggled):hover {}
#SubscribeItemBtn:not(.toggled):hover > span {}
/* "Subscribed (Active)" */
#SubscribeItemBtn.toggled {
/* (blue:btn_blue_white_innerfade) */
border-radius: 2px;
border: none;
padding: 1px;
display: inline-block;
cursor: pointer;
text-decoration: none !important;
color: #fff !important;
background: #aaceff;
background: -webkit-linear-gradient( top, #aaceff 5%, #3c6091 95%);
background: linear-gradient( to bottom, #aaceff 5%, #3c6091 95%);
}
#SubscribeItemBtn.toggled > span {
/* (blue:btn_blue_white_innerfade) */
border-radius: 2px;
display: block;
background: #82a6d7;
background: -webkit-linear-gradient( top, #82a6d7 5%, #3c6091 95%);
background: linear-gradient( to bottom, #82a6d7 5%, #3c6091 95%);
}
/* Unsubscribe (Hover) (red:btn_darkred_white_innerfade) */
#SubscribeItemBtn.toggled:hover {
/* (red:btn_darkred_white_innerfade) */
border-radius: 2px;
border: none;
color: #ffffff !important;
background: rgba(244,92,102,1);
background: -webkit-linear-gradient( top, rgba(244,92,102,1) 5%, rgba(188,67,47,1) 95%);
background: linear-gradient( to bottom, rgba(244,92,102,1) 5%, rgba(188,67,47,1) 95%);
}
#SubscribeItemBtn.toggled:hover > span {
/* (red:btn_darkred_white_innerfade) */
border-radius: 2px;
display: block;
background: rgba(138,51,33,1);
background: -webkit-linear-gradient( top, rgba(138,51,33,1) 5%, rgba(92,37,23,1) 95%);
background: linear-gradient( to bottom, rgba(138,51,33,1) 5%, rgba(92,37,23,1) 95%);
}
Current Behavior (if any)
Atm when you visit a workshop item page (example), the Subscribe button is green, regardless of if you're subscribed or not.
Desired Behavior
It would be better if the button changed colour depending on your subscribed state: Keep green if you're not subscribed (because green means the action of subscribing), make it blue if you're subscribed, and add a red hover to unsubscribe.
Here's the CSS I used to achieve the results below: subscribe-btn-colors-css.zip. I used Steam's own button colours (the URL is mentioned in the CSS), they look a bit dated this way but it retains the sites own colour scheme.
Motivation / Use Case for Changing the Behavior
It looks nicer, but it's also gives you immediate visual feedback on whether you're subscribed or not.