blog.css (3678B)
1 @charset "UTF-8"; 2 @import url(/static/theme.css); 3 4 .notice { 5 border-radius: 1em; 6 background: var(--quote-background-colour); 7 border-left: 0.3em solid var(--demo-common-dark-blue); 8 padding-left: 1em; 9 padding-right: 1em; 10 padding-top: 0.5em; 11 padding-bottom: 0.5em; 12 margin-top: 2em; 13 margin-bottom: 2em; 14 position: relative; 15 left: 0; 16 } 17 18 #main a:link, 19 #main a:visited, 20 #main a:hover, 21 #main a:active { 22 color: var(--link-colour, var(--default-link-colour, black)); 23 } 24 25 /* Licensing Information */ 26 .essay-shop-title { 27 display: inline-block; 28 } 29 .fsfs-license { 30 /* by default, hide it until users interact with it */ 31 display: none; 32 /* when shown, it should stay at a fixed position on screen */ 33 position: fixed; 34 /* Center it on screen */ 35 top: 50vh; 36 left: 50vw; 37 transform: translate(-50%,-50%); 38 /* Set Minimum Size Requirements */ 39 min-width: 50vw; 40 min-height: 20vh; 41 /* Padding */ 42 padding: 25px 25px; 43 /* Border Rounding */ 44 border-radius: 25px; 45 /* Always On-Top */ 46 z-index: 500000; 47 /* Background */ 48 color: #ffffff; 49 background: #1a1a1a66; 50 backdrop-filter: blur(8px) brightness(0.5); 51 /* Cursor */ 52 cursor: text; 53 /* Interactions */ 54 pointer-events: visibleStroke; 55 } 56 .info-icon::before { 57 content: ' '; 58 /* Size & Positioning */ 59 display: inline-block; 60 width: 1.2em; 61 height: 1.2em; 62 margin-right: 5px; 63 /* Set Icon */ 64 background-image: url(/static/noun-info-2691045.svg); 65 /* Ensure Icon is rendered correctly */ 66 background-size: contain; 67 background-position: center center; 68 background-repeat: no-repeat; 69 /* Invert it by default unless otherwise specified */ 70 filter: var(--license-info-icon-filter, invert()); 71 /* Use Pointer Cursor */ 72 cursor: pointer; 73 } 74 .info-icon:active > .fsfs-license, 75 .info-icon:focus > .fsfs-license, 76 .info-icon:focus-within > .fsfs-license, 77 .fsfs-license:focus, 78 .fsfs-license:focus-within { 79 display: block; 80 } 81 82 /* Pay Icon */ 83 .payLink > .icon::before { 84 content: ''; /* Blank = CSS Won't render, which is why we put a Zero-Width-Space */ 85 /* Size & Positioning */ 86 display: inline-block; 87 width: 1.2em; 88 margin-right: 5px; 89 /* Set Icon */ 90 background-image: url(/static/noun-shopping-cart-5195508.svg); 91 /* Ensure Icon is rendered correctly */ 92 background-size: contain; 93 background-position: center center; 94 background-repeat: no-repeat; 95 /* Invert it by default unless otherwise specified */ 96 filter: var(--paylink-icon-filter, invert()); 97 } 98 /* Pay Button */ 99 .payLink { 100 /* Variables */ 101 --link-colour: var(--button-confirm-foreground); 102 --background: var(--button-confirm-background); 103 --bottom-line: 6px; 104 /* General */ 105 display: block; 106 border-radius: 10px; 107 color: var(--link-colour); 108 background: var(--background); 109 text-decoration: none; 110 /* Size */ 111 max-width: max-content; 112 padding: 10px 10px; 113 /* Positioning */ 114 margin-top: 10px; 115 margin-bottom: 0; 116 /* Transitions */ 117 transition: background 1s, box-shadow 1s, transform 1s; 118 /* Border */ 119 box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue); 120 -webkit-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue); 121 -moz-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue); 122 /* Transformations */ 123 transform: none; 124 } 125 126 /* Hover */ 127 .payLink:hover { 128 --background: var(--button-confirm-hovering-background); 129 --link-colour: var(--button-confirm-hovering-foreground); 130 --bottom-line: 0; 131 transform: translateY(6px); 132 } 133 134 /* Active */ 135 .payLink:active, 136 .payLink:focus, 137 .payLink:focus-within, 138 .payLink:focus-visible { 139 --background: var(--button-confirm-active-background); 140 --link-colour: var(--button-confirm-active-foreground); 141 }