|
|
| Zeile 1: |
Zeile 1: |
| /* Button.css */
| |
|
| |
|
| .tpl-button {
| |
|
| |
| display: inline-block;
| |
|
| |
| position:relative;
| |
|
| |
| padding: 4px 10px;
| |
|
| |
| width:100%;
| |
|
| |
| height:40px;
| |
|
| |
| border-radius: 8px;
| |
|
| |
| font-weight: bold;
| |
|
| |
| cursor: pointer;
| |
|
| |
| line-height:1;
| |
|
| |
| text-decoration:none;
| |
|
| |
| text-align:center;
| |
|
| |
| }
| |
|
| |
| .tpl-button p{
| |
|
| |
| margin: 0;
| |
|
| |
| position: absolute;
| |
|
| |
| top: 50%;
| |
|
| |
| left: 50%;
| |
|
| |
| transform: translate(-50%, -50%);
| |
|
| |
| }
| |
|
| |
| .tpl-button-center > a, .tpl-button-left > a, .tpl-button-right > a{
| |
|
| |
| height:40px;
| |
|
| |
| width:100%;
| |
|
| |
| }
| |
|
| |
| .tpl-button-center > a,.tpl-button-left > a,.tpl-button-right > a{
| |
|
| |
| height:100%;
| |
|
| |
| }
| |
|
| |
| /* Choose where to align the button (left, right, center) */
| |
|
| |
| .tpl-button-left{
| |
|
| |
| display: flex;
| |
|
| |
| justify-content: flex-start;
| |
|
| |
| }
| |
|
| |
| .tpl-button-center{
| |
|
| |
| display: flex;
| |
|
| |
| justify-content: center;
| |
|
| |
| }
| |
|
| |
| .tpl-button-right{
| |
|
| |
| display: flex;
| |
|
| |
| justify-content: flex-end;
| |
|
| |
| }
| |
|
| |
| /*available colors*/
| |
|
| |
| .tpl-button-red {
| |
|
| |
| background-color:#b50014; /* taken from Citizen.css : --color-red-3*/
| |
|
| |
| color:#fff;
| |
|
| |
| }
| |
|
| |
| .tpl-button-red:hover{
| |
|
| |
| background-color:#c33242; /* --color-red-light-3 from Citizen.css */
| |
|
| |
| }
| |
|
| |
| .tpl-button-blue {
| |
|
| |
| background-color: #143fbf;
| |
|
| |
| color:#fff;
| |
|
| |
| }
| |
|
| |
| .tpl-button-green {
| |
|
| |
| background-color: #52CF44;
| |
|
| |
| color:#333;
| |
|
| |
| }
| |
|
| |
| .tpl-button-yellow {
| |
|
| |
| background-color: #FFDA1F;
| |
|
| |
| color:#333;
| |
|
| |
| }
| |
|
| |
| .tpl-button:hover{ /*colors other than red, which we use for Citizen, are automatically recalculated on a filter value*/
| |
|
| |
| filter:brightness(110%) saturate(100%);
| |
|
| |
| }
| |
|
| |
| @media screen and (max-width:768px){
| |
|
| |
| .tpl-button{
| |
|
| |
| width:75%!important;
| |
|
| |
| }
| |
|
| |
| .tpl-button-left,.tpl-button-center,.tpl-button-right{
| |
|
| |
| display: flex;
| |
|
| |
| justify-content: center;
| |
|
| |
| }
| |
|
| |
| }
| |
