Skillnad mellan versioner av "MediaWiki:Common.css"
Från Sydarkiveras Wiki
Magnus (diskussion | bidrag) |
Magnus (diskussion | bidrag) |
||
(370 mellanliggande versioner av 2 användare visas inte) | |||
Rad 2: | Rad 2: | ||
/* Inställningar för övergripande innehåll */ | /* Inställningar för övergripande innehåll */ | ||
+ | |||
body { | body { | ||
− | background: url("https://wiki.sydarkivera.se/images/d/ | + | background-color: #e8e8e8; |
− | background- | + | } |
− | + | ||
+ | a, a:hover { | ||
+ | transition: 0.2s; | ||
+ | } | ||
+ | |||
+ | a:visited { | ||
+ | color: #8e124a; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | border: none; | ||
+ | font-weight: bold; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | #container { | ||
+ | background: url("https://wiki.sydarkivera.se/images/d/d3/Bakgrund_2022.jpg"); | ||
+ | background-repeat: repeat-x; | ||
+ | min-height: 100vh; | ||
} | } | ||
#site-logo { | #site-logo { | ||
− | margin: 10px 10px; | + | margin: 10px 10px; |
+ | } | ||
+ | |||
+ | #site-logo img { | ||
+ | transition: transform 0.3s ease; | ||
+ | } | ||
+ | |||
+ | #site-logo img:hover { | ||
+ | transform: scale(1.05); | ||
+ | } | ||
+ | |||
+ | |||
+ | #header { | ||
+ | background-color: transparent; | ||
+ | background-image: linear-gradient(120deg, #dbdbdb 0%, #ffffff 100%); | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
+ | z-index: 11; | ||
+ | } | ||
+ | |||
+ | #wiki-login { | ||
+ | margin: 8px 0 0 0; | ||
+ | } | ||
+ | |||
+ | .mw-skin-nimbus-button { | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | #search-container { | ||
+ | background: #eaeaea; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | #login-message{ | ||
+ | color: #595959; | ||
} | } | ||
#body-container { | #body-container { | ||
− | width: | + | background-color: transparent; |
− | + | max-width: 1200px; | |
− | + | width: calc(100% - 450px); | |
− | + | min-width: 600px; | |
− | + | margin: 0 auto; | |
− | padding | + | margin-top: -140px; |
− | background: # | + | transition: 0.5s ease; |
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 1095px) { | ||
+ | #body-container { | ||
+ | max-width: auto; | ||
+ | min-width: auto; | ||
+ | width: auto; | ||
+ | margin: 80px 0 0 0; | ||
+ | transition: 0.5s ease; | ||
+ | } | ||
+ | #side-bar { | ||
+ | display: none; | ||
+ | } | ||
+ | #site-logo { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 840px) { | ||
+ | .ruta, .ruta-rubrik { | ||
+ | width: 98%; | ||
+ | max-width: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | #side-bar { | ||
+ | padding: 5px; | ||
+ | background: #eaeaea; | ||
+ | border-radius: 0px 5px 5px 0px; | ||
+ | left:0; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
} | } | ||
#navigation { | #navigation { | ||
− | + | border-radius: 3px; | |
+ | } | ||
+ | |||
+ | #navigation-title { | ||
+ | color: #333; | ||
+ | } | ||
+ | |||
+ | #navigation a { | ||
+ | color: #333; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | #navigation a:hover { | ||
+ | color: #e00d85; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #navigation-title { | ||
+ | display: none; | ||
} | } | ||
#menu { | #menu { | ||
− | background: | + | background: white; |
+ | border-radius: 3px 3px 0 0; | ||
} | } | ||
#footer-bottom { | #footer-bottom { | ||
− | font-family: sans-serif; | + | margin: 0; |
− | font-size: 14px; | + | padding: 20px; |
− | color: # | + | left: 0; |
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | #footer-bottom a { | ||
+ | display: box; | ||
+ | padding:10px; | ||
+ | border-radius: 5px; | ||
+ | font-family: sans-serif; | ||
+ | font-size: 14px; | ||
+ | background-color: #eaeaea; | ||
+ | color: #8e124a; | ||
+ | transition: 0.2s; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | #footer-bottom a:hover { | ||
+ | background-color: #e00d85; | ||
+ | color: white; | ||
+ | transition: 0.2s; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | |||
+ | #article { | ||
+ | border-radius: 10px; | ||
+ | box-shadow: 0px 2px 12px rgba(0,0,0,0.2); | ||
} | } | ||
− | + | #article-body { | |
− | + | padding: 20px; | |
+ | border: none; | ||
} | } | ||
− | + | #action-bar { | |
− | + | background: transparent; | |
− | |||
} | } | ||
+ | #toc { | ||
+ | background-image: radial-gradient(at top center, #FFFFFF 0%, #EEEEEE 100%); | ||
+ | border: 1px solid #d8d8d8; | ||
+ | border-radius: 5px; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.4); | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | #other-links a:hover { | ||
+ | background-color: #cecece; | ||
+ | border-radius: 4px; | ||
+ | padding-left: 2px; | ||
+ | } | ||
− | + | .thumb { | |
− | + | box-shadow: 0px 2px 3px rgba(0,0,0,0.4); | |
− | |||
} | } | ||
− | + | #wpTextbox1 { | |
− | + | height: 80vh; | |
} | } | ||
+ | /* Dölj delar av en sida för icke registrerade */ | ||
+ | .visa-reg { | ||
+ | display: none; | ||
+ | } | ||
+ | .visa-admin { | ||
+ | display: none; | ||
+ | } | ||
/* Inställningar för länkar i artiklar */ | /* Inställningar för länkar i artiklar */ | ||
.mw-body-content a { | .mw-body-content a { | ||
− | padding: 4px; | + | padding: 4px; |
− | margin: 0px -4px; | + | margin: 0px -4px; |
} | } | ||
.mw-body-content a:hover { | .mw-body-content a:hover { | ||
− | background-color: #cecece; | + | background-color: #cecece; |
− | border-radius: 4px; | + | border-radius: 4px; |
− | color: black; | + | color: black; |
− | text-decoration: none; | + | text-decoration: none; |
− | padding: 4px; | + | padding: 4px; |
− | margin: 0px -4px; | + | margin: 0px -4px; |
} | } | ||
+ | .mw-collapsible { | ||
+ | overflow:auto; | ||
+ | } | ||
+ | |||
+ | pre { | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Fix för magnifikationsikoner på tumnaglar */ | ||
+ | div.magnify a { | ||
+ | padding: 0; | ||
+ | } | ||
/* Sydarkivera-specifika klasser */ | /* Sydarkivera-specifika klasser */ | ||
+ | |||
+ | |||
+ | .handbok:hover { | ||
+ | right: 0; | ||
+ | transition: 0.8s; | ||
+ | box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.42); | ||
+ | } | ||
+ | |||
.handbok { | .handbok { | ||
− | + | min-width: 300px; | |
− | + | padding: 44px 10px 30px 10px; | |
− | top: | + | border-left: 3px solid #931756; |
− | + | margin-left: 20px; | |
− | padding: | + | position: fixed; |
− | + | right: -418px; | |
− | border-radius: | + | top: 0; |
− | + | background-color: white; | |
+ | transition: 0.8s; | ||
+ | overflow: visible !important; | ||
+ | overflow-y: scroll; | ||
+ | height: 94%; | ||
+ | z-index: 20; | ||
+ | } | ||
+ | |||
+ | .handbok-hover { | ||
+ | color: white; | ||
+ | padding: 12px; | ||
+ | background-color: #931756; | ||
+ | position: absolute; | ||
+ | border-radius: 10px 10px 0px 0px; | ||
+ | left: -124px; | ||
+ | top: 158px; | ||
+ | transform: rotate(-90deg); | ||
+ | letter-spacing: 2px; | ||
+ | box-shadow: 0px 2px 12px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | .page-Huvudsida .handbok-hover b { | ||
+ | display: inline-block; | ||
+ | animation: spin 10s infinite; | ||
} | } | ||
− | + | @keyframes spin { | |
− | + | 0% { | |
− | + | transform: rotateX(0deg); | |
− | + | } | |
+ | 10% { | ||
+ | transform: rotateX(180deg); | ||
+ | } | ||
+ | 20% { | ||
+ | transform: rotateX(360deg); | ||
+ | } | ||
+ | 100% { | ||
+ | transform: rotateX(360deg); | ||
+ | } | ||
} | } | ||
+ | |||
+ | |||
.ruta-rubrik { | .ruta-rubrik { | ||
− | border: 1px solid #d8d8d8; | + | border: 1px solid #d8d8d8; |
− | background: # | + | background-image: radial-gradient(at top center, #FFFFFF 0%, #EEEEEE 100%); |
− | padding: | + | padding: 5px; |
− | border-radius: 3px; | + | border-radius: 3px; |
+ | display:inline-box; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
} | } | ||
.ruta { | .ruta { | ||
− | border: 1px solid #d8d8d8; | + | border: 1px solid #d8d8d8; |
− | border-radius: | + | border-radius: 5px; |
− | padding: 10px; | + | padding: 10px; |
− | overflow: auto; | + | overflow: auto; |
+ | min-width:200px; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.4); | ||
+ | } | ||
+ | |||
+ | .flex { | ||
+ | display: flex; | ||
+ | flex-flow: row wrap; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | .flex-col { | ||
+ | flex-basis: 50%; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 1095px) { | ||
+ | .flex-col{ | ||
+ | flex-basis: 25%; | ||
+ | } | ||
} | } | ||
blockquote { | blockquote { | ||
− | margin: | + | margin: 20px 0px 20px 0px; |
− | border: 1px solid #ddd; | + | border: 1px solid #ddd; |
− | border-left: 3px solid #87084b; | + | border-left: 3px solid #87084b; |
− | border-radius: | + | border-radius: 5px; |
− | padding: | + | padding: 10px 10px 10px 20px; |
− | max-width: 600px; | + | max-width: 600px; |
} | } | ||
.wip { | .wip { | ||
− | width: 640px; | + | width: 640px; |
− | height: 100px; | + | height: 100px; |
− | padding: 4px; | + | padding: 4px; |
− | border: 1px solid #d8d8d8; | + | border: 1px solid #d8d8d8; |
− | background-color: #eaeaea; | + | background-color: #eaeaea; |
− | margin-bottom: 20px; | + | margin-bottom: 20px; |
− | font-size: 14px; | + | font-size: 14px; |
+ | } | ||
+ | |||
+ | .rescale img { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .knapp a, .ikonkort a, .undersida-link a, knapp a.external{ | ||
+ | padding: 10px !important; | ||
+ | display: block; | ||
+ | max-width: 300px; | ||
+ | background-color: #931756 !important; | ||
+ | background-image: none !important; | ||
+ | border-radius: 3px; | ||
+ | margin: 12px 8px !important; | ||
+ | color: white !important; | ||
+ | transition: 0.5s; | ||
+ | text-align: center; | ||
+ | text-decoration: none !important; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.4); | ||
+ | } | ||
+ | |||
+ | .knapp a:hover, .ikonkort a:hover, .undersida-link a:hover { | ||
+ | display: block; | ||
+ | padding: 10px !important; | ||
+ | margin: 12px 8px !important; | ||
+ | background-color: #e00d85 !important; | ||
+ | box-shadow: 0px 2px 5px rgba(179,179,179,1); | ||
+ | text-decoration: none !important; | ||
} | } | ||
− | . | + | .knappLoggaIn a { |
− | overflow: | + | float:right; |
+ | padding: 10px !important; | ||
+ | display: block; | ||
+ | background-color: #931756; | ||
+ | border-radius: 5px; | ||
+ | max-width: 230px; | ||
+ | min-width: 200px; | ||
+ | min-height: 60px; | ||
+ | margin: 8px !important; | ||
+ | color: white !important; | ||
+ | transition: 0.5s; | ||
+ | text-align: center; | ||
+ | text-decoration: none !important; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.4); | ||
+ | font-size: 22px; | ||
+ | font-weight: 460; | ||
+ | height: 60px; | ||
+ | line-height: 60px; | ||
+ | } | ||
+ | |||
+ | .knappLoggaIn a:hover { | ||
+ | float:right; | ||
+ | display: block; | ||
+ | padding: 10px !important; | ||
+ | margin: 8px !important; | ||
+ | background-color: #e00d85; | ||
+ | box-shadow: 0px 2px 5px rgba(179,179,179,1); | ||
+ | text-decoration: none !important; | ||
+ | } | ||
+ | |||
+ | .ikonkort div { | ||
+ | flex-basis: 50%; | ||
+ | padding: 10px !important; | ||
+ | display: block; | ||
+ | width:250px; | ||
+ | min-height:120px; | ||
+ | background-image: radial-gradient(at top center, #FFFFFF 0%, #CECECE 100%); | ||
+ | border-radius: 5px; | ||
+ | margin: 10px !important; | ||
+ | transition: 0.5s; | ||
+ | text-align: center; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.4); | ||
+ | } | ||
+ | |||
+ | .ikonkort img { | ||
+ | display:block; | ||
+ | height: 100px; | ||
+ | width: auto; | ||
+ | margin:auto; | ||
+ | } | ||
+ | |||
+ | .nowrap { | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | .expand-button { | ||
+ | background: #f2f2f2; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
+ | cursor: pointer; | ||
+ | padding: 18px; | ||
+ | max-width: 1000px; | ||
+ | min-width: 200px; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | transition: 0.5s ease-out; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .active, .expand-button:hover { | ||
+ | background: #eaeaea; | ||
+ | color: black !important; | ||
+ | border-radius: 5px 5px 0px 0px; | ||
+ | transition: 0.5s ease-out; | ||
+ | } | ||
+ | |||
+ | .expand-text { | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
+ | padding: 0 18px; | ||
+ | max-width: 1000px; | ||
+ | min-width: 200px; | ||
+ | max-height: 0; | ||
+ | overflow: hidden; | ||
+ | transition: 0.5s ease-out; | ||
+ | background-color: #fafafa; | ||
+ | border-radius: 0px 0px 5px 5px; | ||
+ | } | ||
+ | |||
+ | #filterInput { | ||
+ | width: 426px; | ||
+ | height: 40px; | ||
+ | border-radius: 3px 0px 0px 3px; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | #termTable tr { | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | |||
+ | td h5 { | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | .sticky { | ||
+ | position: fixed !important; | ||
+ | top: 0 !important; | ||
+ | } | ||
+ | |||
+ | .oo-ui-menuSelectWidget { | ||
+ | z-index: 400; | ||
+ | } | ||
+ | |||
+ | #accesscontrol { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .acbox { | ||
+ | float: right; | ||
+ | font-size: 12px; | ||
+ | padding: 4px; | ||
+ | background-image: radial-gradient(at top center, #FFFFFF 0%, #EEEEEE 100%); | ||
+ | border: 1px solid #d8d8d8; | ||
+ | border-radius: 5px; | ||
+ | margin: 0px 0px 10px 20px; | ||
+ | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | .undersida { | ||
+ | width: 100%; | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .undersida-link { | ||
+ | float: right; | ||
+ | width: 250px; | ||
+ | } | ||
+ | |||
+ | #handbok-hint { | ||
+ | position: fixed; | ||
+ | top: 500px; | ||
+ | right: 300px; | ||
+ | background-color: #931756; | ||
+ | color: white; | ||
+ | padding: 10px; | ||
+ | box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | ||
+ | opacity: 0; | ||
+ | animation: fade-in 1s ease-in-out 1s forwards; | ||
} | } | ||
− | + | @keyframes fade-in { | |
− | + | 0% { | |
− | + | opacity: 0; | |
+ | transform: translateX(50px); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 1; | ||
+ | transform: translateX(0); | ||
+ | } | ||
} | } | ||
− | . | + | .handbok-hint-text { |
− | + | display: inline-block; | |
− | display: block; | + | margin-right: 10px; |
− | |||
− | |||
− | |||
− | margin | ||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | .handbok-pil { |
− | display: block; | + | display: inline-block; |
− | + | width: 0; | |
− | + | height: 0; | |
− | + | border-top: 5px solid transparent; | |
− | + | border-bottom: 5px solid transparent; | |
− | + | border-left: 5px solid white; | |
} | } |
Nuvarande version från 11 december 2023 kl. 10.26
/* CSS som skrivs här påverkar alla utseenden */ /* Inställningar för övergripande innehåll */ body { background-color: #e8e8e8; } a, a:hover { transition: 0.2s; } a:visited { color: #8e124a; } h2 { border: none; font-weight: bold; margin-top: 20px; } #container { background: url("https://wiki.sydarkivera.se/images/d/d3/Bakgrund_2022.jpg"); background-repeat: repeat-x; min-height: 100vh; } #site-logo { margin: 10px 10px; } #site-logo img { transition: transform 0.3s ease; } #site-logo img:hover { transform: scale(1.05); } #header { background-color: transparent; background-image: linear-gradient(120deg, #dbdbdb 0%, #ffffff 100%); box-shadow: 0px 2px 3px rgba(0,0,0,0.2); z-index: 11; } #wiki-login { margin: 8px 0 0 0; } .mw-skin-nimbus-button { border-radius: 3px; } #search-container { background: #eaeaea; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); } #login-message{ color: #595959; } #body-container { background-color: transparent; max-width: 1200px; width: calc(100% - 450px); min-width: 600px; margin: 0 auto; margin-top: -140px; transition: 0.5s ease; } @media only screen and (max-width: 1095px) { #body-container { max-width: auto; min-width: auto; width: auto; margin: 80px 0 0 0; transition: 0.5s ease; } #side-bar { display: none; } #site-logo { display: none; } } @media only screen and (max-width: 840px) { .ruta, .ruta-rubrik { width: 98%; max-width: auto; } } #side-bar { padding: 5px; background: #eaeaea; border-radius: 0px 5px 5px 0px; left:0; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); } #navigation { border-radius: 3px; } #navigation-title { color: #333; } #navigation a { color: #333; font-size: 14px; } #navigation a:hover { color: #e00d85; text-decoration: none; } #navigation-title { display: none; } #menu { background: white; border-radius: 3px 3px 0 0; } #footer-bottom { margin: 0; padding: 20px; left: 0; right: 0; } #footer-bottom a { display: box; padding:10px; border-radius: 5px; font-family: sans-serif; font-size: 14px; background-color: #eaeaea; color: #8e124a; transition: 0.2s; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); } #footer-bottom a:hover { background-color: #e00d85; color: white; transition: 0.2s; box-shadow: none; } #article { border-radius: 10px; box-shadow: 0px 2px 12px rgba(0,0,0,0.2); } #article-body { padding: 20px; border: none; } #action-bar { background: transparent; } #toc { background-image: radial-gradient(at top center, #FFFFFF 0%, #EEEEEE 100%); border: 1px solid #d8d8d8; border-radius: 5px; box-shadow: 0px 2px 3px rgba(0,0,0,0.4); margin-bottom: 30px; } #other-links a:hover { background-color: #cecece; border-radius: 4px; padding-left: 2px; } .thumb { box-shadow: 0px 2px 3px rgba(0,0,0,0.4); } #wpTextbox1 { height: 80vh; } /* Dölj delar av en sida för icke registrerade */ .visa-reg { display: none; } .visa-admin { display: none; } /* Inställningar för länkar i artiklar */ .mw-body-content a { padding: 4px; margin: 0px -4px; } .mw-body-content a:hover { background-color: #cecece; border-radius: 4px; color: black; text-decoration: none; padding: 4px; margin: 0px -4px; } .mw-collapsible { overflow:auto; } pre { border-radius: 3px; } /* Fix för magnifikationsikoner på tumnaglar */ div.magnify a { padding: 0; } /* Sydarkivera-specifika klasser */ .handbok:hover { right: 0; transition: 0.8s; box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.42); } .handbok { min-width: 300px; padding: 44px 10px 30px 10px; border-left: 3px solid #931756; margin-left: 20px; position: fixed; right: -418px; top: 0; background-color: white; transition: 0.8s; overflow: visible !important; overflow-y: scroll; height: 94%; z-index: 20; } .handbok-hover { color: white; padding: 12px; background-color: #931756; position: absolute; border-radius: 10px 10px 0px 0px; left: -124px; top: 158px; transform: rotate(-90deg); letter-spacing: 2px; box-shadow: 0px 2px 12px rgba(0,0,0,0.2); } .page-Huvudsida .handbok-hover b { display: inline-block; animation: spin 10s infinite; } @keyframes spin { 0% { transform: rotateX(0deg); } 10% { transform: rotateX(180deg); } 20% { transform: rotateX(360deg); } 100% { transform: rotateX(360deg); } } .ruta-rubrik { border: 1px solid #d8d8d8; background-image: radial-gradient(at top center, #FFFFFF 0%, #EEEEEE 100%); padding: 5px; border-radius: 3px; display:inline-box; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); } .ruta { border: 1px solid #d8d8d8; border-radius: 5px; padding: 10px; overflow: auto; min-width:200px; box-shadow: 0px 2px 3px rgba(0,0,0,0.4); } .flex { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; } .flex-col { flex-basis: 50%; align-items: center; justify-content: center; } @media only screen and (min-width: 1095px) { .flex-col{ flex-basis: 25%; } } blockquote { margin: 20px 0px 20px 0px; border: 1px solid #ddd; border-left: 3px solid #87084b; border-radius: 5px; padding: 10px 10px 10px 20px; max-width: 600px; } .wip { width: 640px; height: 100px; padding: 4px; border: 1px solid #d8d8d8; background-color: #eaeaea; margin-bottom: 20px; font-size: 14px; } .rescale img { width: 100%; height: auto; } .knapp a, .ikonkort a, .undersida-link a, knapp a.external{ padding: 10px !important; display: block; max-width: 300px; background-color: #931756 !important; background-image: none !important; border-radius: 3px; margin: 12px 8px !important; color: white !important; transition: 0.5s; text-align: center; text-decoration: none !important; box-shadow: 0px 2px 3px rgba(0,0,0,0.4); } .knapp a:hover, .ikonkort a:hover, .undersida-link a:hover { display: block; padding: 10px !important; margin: 12px 8px !important; background-color: #e00d85 !important; box-shadow: 0px 2px 5px rgba(179,179,179,1); text-decoration: none !important; } .knappLoggaIn a { float:right; padding: 10px !important; display: block; background-color: #931756; border-radius: 5px; max-width: 230px; min-width: 200px; min-height: 60px; margin: 8px !important; color: white !important; transition: 0.5s; text-align: center; text-decoration: none !important; box-shadow: 0px 2px 3px rgba(0,0,0,0.4); font-size: 22px; font-weight: 460; height: 60px; line-height: 60px; } .knappLoggaIn a:hover { float:right; display: block; padding: 10px !important; margin: 8px !important; background-color: #e00d85; box-shadow: 0px 2px 5px rgba(179,179,179,1); text-decoration: none !important; } .ikonkort div { flex-basis: 50%; padding: 10px !important; display: block; width:250px; min-height:120px; background-image: radial-gradient(at top center, #FFFFFF 0%, #CECECE 100%); border-radius: 5px; margin: 10px !important; transition: 0.5s; text-align: center; box-shadow: 0px 2px 3px rgba(0,0,0,0.4); } .ikonkort img { display:block; height: 100px; width: auto; margin:auto; } .nowrap { white-space: nowrap; } .expand-button { background: #f2f2f2; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); cursor: pointer; padding: 18px; max-width: 1000px; min-width: 200px; border: none; outline: none; transition: 0.5s ease-out; overflow: hidden; } .active, .expand-button:hover { background: #eaeaea; color: black !important; border-radius: 5px 5px 0px 0px; transition: 0.5s ease-out; } .expand-text { box-shadow: 0px 2px 3px rgba(0,0,0,0.2); padding: 0 18px; max-width: 1000px; min-width: 200px; max-height: 0; overflow: hidden; transition: 0.5s ease-out; background-color: #fafafa; border-radius: 0px 0px 5px 5px; } #filterInput { width: 426px; height: 40px; border-radius: 3px 0px 0px 3px; font-size: 16px; } #termTable tr { vertical-align:top; } td h5 { white-space: nowrap; } .sticky { position: fixed !important; top: 0 !important; } .oo-ui-menuSelectWidget { z-index: 400; } #accesscontrol { display:none; } .acbox { float: right; font-size: 12px; padding: 4px; background-image: radial-gradient(at top center, #FFFFFF 0%, #EEEEEE 100%); border: 1px solid #d8d8d8; border-radius: 5px; margin: 0px 0px 10px 20px; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); } .undersida { width: 100%; padding-top: 10px; padding-bottom: 10px; } .undersida-link { float: right; width: 250px; } #handbok-hint { position: fixed; top: 500px; right: 300px; background-color: #931756; color: white; padding: 10px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); opacity: 0; animation: fade-in 1s ease-in-out 1s forwards; } @keyframes fade-in { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } .handbok-hint-text { display: inline-block; margin-right: 10px; } .handbok-pil { display: inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid white; }