created: 20200507002727378 modified: 20220719132112414 tags: $:/tags/Stylesheet title: $:/_tw5.com-styles type: text/vnd.tiddlywiki \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock .tc-hero-heading a.tc-tiddlylink { font-weight: bold; } .tc-double-spaced-list li { padding-bottom: .5em; padding-top: .5em; } .tc-link-info-item { border: 1px solid #ebefcd; padding: 5px 10px; margin-bottom: 10px; background: <>; font-size: 0.8em; line-height: 1.2; } .tc-link-info-item h1 { font-weight: 500; font-size: 16px; } .tc-scrollable-demo { border: 1px solid <>; background-color: <>; padding: 1em; height: 400px; position: relative; overflow: auto; } .tc-improvement-banner { font-size: 0.7em; background: #fcc; padding-left: 5px; margin-top: 6px; margin-bottom: 12px; <> } @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .tc-improvement-banner { } } @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .tc-improvement-banner { margin-right: -53px; margin-left: -53px; } .tc-improvement-banner:before { display: block; position: absolute; width: 0; height: 0; content: " "; margin-left: -5px; margin-top: -10px; border-top: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid #C07E7E; border-bottom: 5px solid #C07E7E; } } .tc-improvement-banner svg { width: 1em; height: 1em; } .tc-wrapper-flex { display: flex; } .tc-saving-sidebar { margin: 0; padding: 0; min-width: 200px; overflow: auto; } .tc-saving-sidebar a { display: block; } @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .tc-wrapper-flex { flex-direction: column; } .tc-saving-sidebar { width: 100%; height: auto; } .tc-saving-sidebar a { float: left; } } .tc-saving-sidebar-category { margin-bottom: 10px; } .tc-saving-sidebar-category-title { font-weight: bold; margin-bottom: 5px; font-size: 16px; } .tc-saving-sidebar-category-item { margin-left: 10px; } .tc-saving-introduction { display: flex; justify-content: center; text-align: center; align-items: center; padding: 4em; font-style: italic; } .tc-cards { display: flex; flex-wrap: wrap; justify-content: space-evenly; width: 100%; padding: 0.5em; background: <>; border-color: rgba(34,36,38,.15); box-shadow: 0 2px 25px 0 rgb(34 36 38 / 5%) inset; gap: 1em; } .tc-cards.tc-action-card { text-align: center; background: none; } .tc-cards.tc-action-card .tc-card-button { border: 1px solid <>; background: <>; margin: 0.5em; border-radius: 6px; padding: 0.5em; color: <>; fill: <>; } .tc-cards.tc-action-card .tc-card-button svg { width: 0.65em; height: 0.65em; vertical-align: middle; } .tc-tiddlylink.tc-card { font-weight: normal; max-width: 100%; position: relative; background: <>; color: <>; width: 200px; min-height: 0; border: none; border-radius: 8px; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; transition: box-shadow 0.3s ease,transform .3s ease; } .tc-cards.tc-cards-vertical .tc-tiddlylink.tc-card { width: 100%; } @media (max-width: 500px) { .tc-cards { padding: 0; } .tc-tiddlylink.tc-card { margin: 0.25em; width: 45%; } } .tc-tiddlylink.tc-card.tc-card-quote { width: 320px; box-shadow: none; background-color: #effdff; } .tc-card-accent { height: 100%; display: flex; align-items: stretch; flex-direction: column; justify-content: stretch; border-radius: 8px; } .tc-cards.tc-cards-vertical .tc-card-accent { flex-direction: row; align-items: center; } .tc-tiddlylink.tc-card:hover { color: <>; background: <>; text-decoration: none; cursor: pointer; box-shadow: 0 1px 5px 0 #bcbdbd, 0 0 0 1px #d4d4d5; transform: translateY(-3px); } .tc-card-ribbon-wrapper { line-height: 0; width: 75px; height: 75px; position: absolute; right: 0; overflow: hidden; top: 0; z-index: 849; pointer-events: none; } .tc-card-ribbon { transition: top 0.3s ease-in-out; top: 15px; right: -77px; position: absolute; transform: rotate(45deg); background-color: red; box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 50%); } .tc-tiddlylink.tc-card:hover .tc-card-ribbon { top: -77px; } .tc-card-ribbon-inner { font-size: 10px; line-height: 13px; font-weight: 700; color: white; text-decoration: none; text-shadow: 0 -1px rgb(0 0 0 / 50%); width: 200px; display: inline-block; padding: 2px 0; text-align: center; } .tc-card-image { border-top-left-radius: 8px; border-top-right-radius: 8px; line-height: 0; overflow: hidden; } .tc-card-image img { border-top-left-radius: 8px; border-top-right-radius: 8px; width: 100%; transition: transform 0.3s ease-in-out; } .tc-tiddlylink.tc-card:hover .tc-card-image img { transform: scale(1.05); } .tc-card-title { font-size: 1.2em; line-height: 1.2; font-weight: 600; transition: color 0.3s ease-in-out; padding: 0 10px; margin: 0.5em 0 0.25em 0; } .tc-cards.tc-cards-vertical .tc-card-title { font-size: 1em; min-width: 10em; text-align: right; } .tc-cards.tc-cards-vertical .tc-card-title svg { width: 1em; height: 1em; vertical-align: text-bottom; } .tc-card-subtitle, .tc-card-author { font-size: 0.8em; line-height: 1.2; color: <>; padding: 0 10px; margin: 0.5em 0; font-style: italic; } .tc-card-body { font-size: 0.9em; line-height: 1.2; padding: 0.25em 10px; margin: 0; } .tc-cards.tc-cards-vertical .tc-card-body { font-size: 1em; } .tc-card-body-wrapper { position: relative; flex-grow: 1; } .tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:before { font-family: Georgia, serif; color: <>; content: open-quote; font-size: 5em; line-height: 1; float: left; } .tc-tiddlylink.tc-card.tc-card-quote .tc-card-body:after { font-family: Georgia, serif; color: <>; content: close-quote; font-size: 5em; line-height: 1; float: right; } .tc-tiddlylink.tc-card .tc-card-body-clear { clear: both; } .tc-card-body > p { margin: 0.25em 0; } .tc-card a:active, .tc-card a:focus, .tc-btn-download:active, .tc-btn-download:focus{ outline: none; } .tc-btn-download { padding: 10px 30px; border-radius: 5px; background: <>; border: none; box-shadow: 1px 2px 2px 0 <>; overflow: hidden; cursor: pointer; font-size: 1.2em; line-height: 1.4em; color: #fff; fill: #fff; } .tc-btn-download:active { box-shadow: none; } /* WikiText rules */ .multi-columns, .fourcolumns { display: block; column-count: 4; column-gap: 1em; -moz-column-count: 4; -moz-column-gap: 1em; -webkit-column-count: 4; -webkit-column-gap: 1em; } @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { .multi-columns { column-count: 2; } }