|
|
| Line 1: |
Line 1: |
| /* Infobox button */ | | /* Simple Button */ |
| .infobox-button { | | .infobox-button { |
| position: relative;
| | display: inline-block; |
| | margin: 5px 0; |
| } | | } |
|
| |
|
| .infobox-extlink-button { | | .infobox-extlink-button { |
| display: block;
| | display: inline-block; |
| padding: 10px 20px;
| | padding: 10px 20px; |
| background: var( --color-progressive );
| | background-color: #4CAF50; /* Green background */ |
| border-radius: 0 0 12px 12px;
| | color: white; |
| color: #fff;
| | text-decoration: none; |
| | border-radius: 5px; |
| | font-weight: bold; |
| | transition: background-color 0.3s; |
| } | | } |
|
| |
|
| .infobox-extlink-button-icon { | | .infobox-extlink-button:hover { |
| margin-right: 8px;
| | background-color: #45a049; /* Darker green */ |
| filter: invert( 1 );
| |
| }
| |
| | |
| /* Popup card */
| |
| .infobox-extlink-list {
| |
| position: absolute;
| |
| z-index: -1;
| |
| overflow: hidden;
| |
| width: 100%;
| |
| padding-top: var( --space-md );
| |
| padding-bottom: var( --space-xs );
| |
| background: var( --color-surface-1 );
| |
| border-radius: var( --border-radius-medium );
| |
| box-shadow: var( --box-shadow-drop-xx-large );
| |
| opacity: 0;
| |
| text-align: left;
| |
| transition: transform 250ms ease, opacity 250ms ease;
| |
| visibility: hidden;
| |
| transform: translateY( -20px );
| |
| }
| |
| | |
| .infobox-extlink-list p {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .infobox-button:hover .infobox-extlink-list {
| |
| z-index: 10;
| |
| opacity: 1;
| |
| visibility: visible;
| |
| transform: none;
| |
| }
| |
| | |
| .infobox-extlink-title {
| |
| display: block;
| |
| padding: 0 15px;
| |
| margin: 5px 0;
| |
| color: var( --color-subtle );
| |
| font-size: 0.8125rem; | |
| font-weight: normal;
| |
| letter-spacing: 0.75px;
| |
| }
| |
| | |
| .infobox-extlink-list ul {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| padding: 0 5px;
| |
| margin: 0 0 10px 0;
| |
| list-style: none;
| |
| }
| |
| | |
| .infobox-extlink a.external {
| |
| display: block;
| |
| /* Override external link and file icons */
| |
| padding: 5px 10px;
| |
| background-image: none;
| |
| border-radius: 4px;
| |
| transition: background 0.2s ease, color 0.2s ease;
| |
| }
| |
| | |
| .infobox-extlink a:hover {
| |
| background-color: var( --background-color-button-quiet--hover );
| |
| }
| |
| | |
| .infobox-extlink a:active {
| |
| background-color: var( --background-color-button-quiet--active );
| |
| }
| |
| | |
| .infobox-extlink-title:before {
| |
| position: absolute;
| |
| z-index: -1;
| |
| right: 20px;
| |
| display: block;
| |
| width: 120px;
| |
| height: 120px;
| |
| margin-top: 5px;
| |
| background-position: top right;
| |
| background-repeat: no-repeat;
| |
| background-size: contain;
| |
| opacity: 0.1;
| |
| }
| |
| | |
| /* Dark mode */ | |
| html.skin-citizen-dark .infobox-extlink-title:before {
| |
| filter: invert( 1 );
| |
| } | | } |
