-
Notifications
You must be signed in to change notification settings - Fork 1
/
style.css
1 lines (1 loc) · 4.5 KB
/
style.css
1
*{position:relative;box-sizing:border-box}::selection{background:gray;color:#fff}body,html{color:#222;line-height:1;margin:0;padding:0}body,button,input,textarea{color:#222;font-family:Helvetica Neue,sans-serif;font-size:16px;font-weight:400}h1{font-size:28px;font-weight:600}h1,h2{margin:0}h2{font-size:16px}p{margin:0}.dialog{background:salmon;border:1px solid darkred;border-radius:3px;box-shadow:0 0 15px rgba(0,0,0,.25);color:#222;display:none;padding:.75em;text-align:center;position:absolute;top:80px;right:28px;z-index:2;width:250px}.dialog p{font-size:14px;line-height:1.25;margin-bottom:.75em}button{background-image:linear-gradient(180deg,#fafafa,#eee);border:1px solid #ccc;border-radius:3px;color:#888;cursor:pointer;font-size:12px;margin:0;padding:2px 2px 2px 6px;text-align:center;outline:0}button img{opacity:.5;margin-left:3px;vertical-align:-6px;width:20px}button:hover{background:linear-gradient(180deg,#eee,#ddd);border:1px solid #888;color:#666}button:active{background:linear-gradient(180deg,#ddd,#eee);color:#666}button.no,button.yes{padding:6px 8px}button.yes{float:right;border-color:#888;color:#666;font-weight:600;padding-top:5px}button.no{float:left}.container,body,html{height:100%}.container{margin:0 auto;max-width:800px;flex-direction:column}.choose-month-and-year,.container{display:flex}.choose-month-and-year #months,.choose-month-and-year #years{flex-grow:1}.items-field-and-generated-month{display:flex;flex:1}.items-field-and-generated-month .input{display:flex;flex:1;flex-direction:column}.items-field-and-generated-month .input textarea{flex:1}.items-field-and-generated-month .output{display:flex;flex:1;flex-direction:column}.items-field-and-generated-month .output textarea{flex:1}header{letter-spacing:-1px;margin:.75em 0 1em;text-align:center}header a{color:inherit;text-decoration:none}.choose-month-and-year{background:#f1f1f1;padding:0;border-radius:3px;margin:.25em 1em}.choose-month-and-year #months{padding-right:2em;text-align:right}.choose-month-and-year input{display:none}.choose-month-and-year label{color:#09f;cursor:pointer;display:inline-block;margin-right:0;padding:.2em .4em .24em}.choose-month-and-year label:hover{background:#eee}.choose-month-and-year input:checked+label{background:#09f;color:#fff}.choose-month-and-year input.current-month+label:after,.choose-month-and-year input.current-year+label:after{content:"";position:absolute;left:50%;bottom:0;margin-left:-3px;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:3px solid #aaa}.choose-month-and-year input.current-month:checked+label:after,.choose-month-and-year input.current-year:checked+label:after{content:"";position:absolute;left:50%;bottom:0;margin-left:-3px;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:3px solid #09f}.items-field-and-generated-month h2{font-weight:600}.items-field-and-generated-month p.directions{color:#aaa;font-size:12px;margin:1em 0}.items-field-and-generated-month p.directions kbd{font:11px SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;display:inline-block;padding:2px 3px 1px;font-size:11px;line-height:1;color:#444d56;vertical-align:middle;background-color:#fafbfc;border:1px solid #c6cbd1;border-bottom-color:#959da5;border-radius:3px;box-shadow:inset 0 -1px 0 #959da5;transform:translateY(-5px);margin-bottom:-8px}#restore-default-items-button,#restore-user-text-button{cursor:pointer;text-decoration:underline}#restore-default-items-button:hover,#restore-user-text-button:hover{color:#09f}#empty-items-button{font-size:12px;position:absolute;top:35px;right:16px;z-index:1}.items-field-and-generated-month textarea{border-radius:3px;outline:0;padding:10px;margin:0;resize:none}.input{padding:1em}.input textarea{font-size:14px;background:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 2px rgba(0,0,0,.075)}.input textarea:focus{border-color:#09f;box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(#0099ff,.5)}.output{padding:1em}.output textarea{font-size:14px;background:#f4f4f4;border:1px solid #ddd;font-family:Helvetica,sans-serif;line-height:1.3;margin:0;resize:none}#copy-button{font-size:12px;padding:2px 2px 2px 6px;text-align:left;position:absolute;top:35px;right:16px;z-index:1}#copy-button.zeroclipboard-is-hover{background:linear-gradient(180deg,#eee,#ddd);border:1px solid #888;color:#666;img{opacity:1}}#copy-button.zeroclipboard-is-active{background:linear-gradient(180deg,#ddd,#eee);color:#666}footer{color:#aaa;padding:0 1em 1em;text-align:center}footer p{font-size:12px;line-height:1.8}footer a{color:#999}footer a:hover{color:#222}