package.simple-v1.min.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of simpledotcss Show documentation
Show all versions of simpledotcss Show documentation
Simple.css is a CSS template that allows you to make a good looking website really quickly.
The newest version!
:root{--sans-font:-apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,Noto,"Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;--mono-font:Consolas,Menlo,Monaco,"Andale Mono","Ubuntu Mono",monospace;--base-fontsize:1.15rem;--header-scale:1.25;--line-height:1.618;--bg:#fff;--accent-bg:#f5f7ff;--text:#212121;--text-light:#585858;--border:#d8dae1;--accent:#0d47a1;--accent-light:#90caf9;--code:#d81b60;--preformatted:#444;--marked:#fd3;--disabled:#efefef}@media (prefers-color-scheme:dark){:root{--bg:#212121;--accent-bg:#2b2b2b;--text:#dcdcdc;--text-light:#ababab;--border:#666;--accent:#ffb300;--accent-light:#ffecb3;--code:#f06292;--preformatted:#ccc;--disabled:#111}img,video{opacity:.6}}html{font-family:var(--sans-font)}body{color:var(--text);background:var(--bg);font-size:var(--base-fontsize);line-height:var(--line-height);word-break:break-word;overflow-wrap:break-word;flex-direction:column;flex:1;max-width:45rem;min-height:100vh;margin:0 auto;padding:0 .5rem;display:flex;overflow-x:hidden}header{background:var(--accent-bg);border-bottom:1px solid var(--border);text-align:center;box-sizing:border-box;width:100vw;margin-left:-50vw;margin-right:-50vw;padding:2rem .5rem;position:relative;left:50%;right:50%}header h1,header p{margin:0}main{padding-top:1.5rem}h1,h2,h3{line-height:1.1}nav{padding:1rem 0;font-size:1rem;line-height:2}nav a{border:1px solid var(--border);border-radius:5px;margin:1rem 1rem 0 0;padding:.1rem 1rem;text-decoration:none;transition:all .4s;display:inline-block;color:var(--text)!important}nav a:hover{border-color:var(--accent);color:var(--accent)!important}nav a.current:hover{text-decoration:none}footer{color:var(--text-light);text-align:center;border-top:1px solid var(--border);margin-top:4rem;padding:2rem 1rem 1.5rem;font-size:.9rem}h1{font-size:calc(var(--base-fontsize)*var(--header-scale)*var(--header-scale)*var(--header-scale)*var(--header-scale));margin-top:calc(var(--line-height)*1.5rem)}h2{font-size:calc(var(--base-fontsize)*var(--header-scale)*var(--header-scale)*var(--header-scale));margin-top:calc(var(--line-height)*1.5rem)}h3{font-size:calc(var(--base-fontsize)*var(--header-scale)*var(--header-scale));margin-top:calc(var(--line-height)*1.5rem)}h4{font-size:calc(var(--base-fontsize)*var(--header-scale));margin-top:calc(var(--line-height)*1.5rem)}h5{font-size:var(--base-fontsize);margin-top:calc(var(--line-height)*1.5rem)}h6{font-size:calc(var(--base-fontsize)/var(--header-scale));margin-top:calc(var(--line-height)*1.5rem)}a,a:visited{color:var(--accent)}a:hover{text-decoration:none}a button,button,[role=button],input[type=submit],input[type=reset],input[type=button]{background:var(--accent);color:var(--bg);border:none;border-radius:5px;margin:.5rem 0;padding:.7rem .9rem;font-size:1rem;transition:all .4s}a button[disabled],button[disabled],[role=button][aria-disabled=true],input[type=submit][disabled],input[type=reset][disabled],input[type=button][disabled],input[type=checkbox][disabled],input[type=radio][disabled],select[disabled]{cursor:default;opacity:.5;cursor:not-allowed}input:disabled,textarea:disabled,select:disabled{cursor:not-allowed;background-color:var(--disabled)}input[type=range]{padding:0}abbr{cursor:help}button:focus,button:enabled:hover,[role=button]:focus,[role=button]:not([aria-disabled=true]):hover,input[type=submit]:focus,input[type=submit]:enabled:hover,input[type=reset]:focus,input[type=reset]:enabled:hover,input[type=button]:focus,input[type=button]:enabled:hover,input[type=checkbox]:focus,input[type=checkbox]:enabled:hover,input[type=radio]:focus,input[type=radio]:enabled:hover{filter:brightness(1.4);cursor:pointer}details{background:var(--accent-bg);border:1px solid var(--border);border-radius:5px;margin-bottom:1rem}summary{cursor:pointer;padding:.6rem 1rem;font-weight:700}details[open]{padding:.6rem 1rem .75rem}details[open] summary{margin-bottom:.5rem;padding:0}details[open]>:last-child{margin-bottom:0}table{border-collapse:collapse;width:100%;margin:1.5rem 0}td,th{border:1px solid var(--border);text-align:left;padding:.5rem}th{background:var(--accent-bg);font-weight:700}tr:nth-child(2n){background:var(--accent-bg)}table caption{margin-bottom:.5rem;font-weight:700}ol,ul{padding-left:3rem}textarea,select,input{font-size:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);box-shadow:none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:5px;width:60%;margin-bottom:.5rem;padding:.5rem;font-family:inherit}select{background-image:linear-gradient(45deg,transparent 49%,var(--text)51%),linear-gradient(135deg,var(--text)51%,transparent 49%);background-position:calc(100% - 20px),calc(100% - 15px);background-repeat:no-repeat;background-size:5px 5px,5px 5px}select[multiple]{background-image:none!important}input[type=checkbox],input[type=radio]{vertical-align:bottom;position:relative}input[type=radio]{border-radius:100%}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--accent)}input[type=checkbox]:checked:after{content:" ";border-right:solid var(--bg).08em;border-bottom:solid var(--bg).08em;background:0 0;border-radius:0;width:.1em;height:.25em;font-size:1.8em;position:absolute;top:.05em;left:.18em;transform:rotate(45deg)}input[type=radio]:checked:after{content:" ";background:var(--bg);border-radius:100%;width:.25em;height:.25em;font-size:32px;position:absolute;top:.125em;left:.125em}textarea{width:80%}@media only screen and (width<=720px){textarea,select,input{width:100%}}input[type=checkbox],input[type=radio]{width:auto}input[type=file]{border:0}fieldset{border:0;margin:0;padding:0}hr{color:var(--border);border-top:1px;margin:1rem auto}mark{background:var(--marked);border-radius:4px;padding:2px 5px}main img,main video{border-radius:5px;max-width:100%;height:auto}figure{margin:0}figcaption{color:var(--text-light);text-align:center;margin-bottom:1rem;font-size:.9rem}blockquote{border-left:.35rem solid var(--accent);opacity:.8;margin:2rem 0 2rem 2rem;padding:.4rem .8rem;font-style:italic}cite{color:var(--text-light);font-size:.9rem;font-style:normal}code,pre,pre span,kbd,samp{font-size:1.075rem;font-family:var(--mono-font);color:var(--code)}kbd{color:var(--preformatted);border:1px solid var(--preformatted);border-bottom:3px solid var(--preformatted);border-radius:5px;padding:.1rem}pre{color:var(--preformatted);background:var(--accent-bg);border:1px solid var(--border);border-radius:5px;max-width:100%;padding:1rem 1.4rem;overflow:auto}pre code{color:var(--preformatted);background:0 0;margin:0;padding:0}