style.css

Rama main · réplica de lectura del repositorio original.

:root {--main-bg:#383C43; --menu-bg:#282B2F; --menu-border:#000; --title:#A0ADBB; --text:#F0F0F0; --accent:#175CA2;}

body {font-family:"Segoe UI",Tahoma,Arial,sans-serif;color:var(--text);background-color:var(--main-bg);font-size:14px;line-height:18px;text-align:left;margin:0;padding:0;}
pre {font-family:"Segoe UI",Tahoma,Arial,sans-serif;}
div,span,pre,input,select,button,textarea {border:none;margin:0;padding:0;font-size:14px;}
button,select {cursor:pointer;}
a {color:var(--accent);text-decoration:none;}
h1 {display:inline-block;font-size:26px;line-height:30px;font-weight:bold;margin:0;vertical-align:top;}
h2 {display:block;font-size:16px;line-height:20px;font-weight:bold;margin:0;text-align:center;color:var(--text);padding:6px 8px;}

/* HEAD */
.head {height:32px;color:var(--title);background-color:var(--menu-bg);border-bottom:1px solid var(--menu-border);}
.menuBtn {background:none;padding:6px 10px;line-height:0;vertical-align:top;}
.menuBtn:hover {transform:scale(1.25);}
.menuBtn svg {height:20px;width:20px;stroke:var(--title);}
.head select {margin:5px 10px 0 12px;color:var(--text);background-color:#202226;padding:3px 8px;border-left:2px solid #33f;border-right:2px solid #b33;border-radius:18px;vertical-align:top;}
.head select:hover {border-color:var(--accent);}
.orientationBtn {float:right;padding:0 8px;background:none;}
.orientationBtn svg {display:block;stroke:var(--title);height:32px;width:32px;}
.orientationBtn:hover svg {stroke:var(--accent);}

/* MENU */
.menu {position:fixed;width:220px;padding-top:7px;overflow-y:auto;top:32px;bottom:0;left:0;word-break:break-all;text-align:center;z-index:1;background-color:var(--menu-bg);border-right:1px solid var(--menu-border);scrollbar-color:#0000 #0000 !important;transition:left ease .5s,scrollbar-color linear .5s;}
.menu button {width:78%;color:#999;line-height:19px;padding:4px;background-color:#222426;margin:4px 0;border-radius:12px;border-left:2px solid black;border-right:2px solid black;}
.menu button:hover {background-color:#1E2022;border-color:var(--accent);}
.menu a {display:block;color:#A0A0A0;padding:3px 4px 5px 4px;margin:8px;border-radius:14px;border-top:1px solid #515151;border-bottom:1px solid #000;}
.menu a:hover {background:#203040;}
.menu a.activeBoard {color:var(--accent);background:none;border-left:2px solid var(--accent);border-right:2px solid var(--accent);}

/* MAIN */
.main {display:flex;flex-flow:row nowrap;justify-content:start;align-items:start;align-content:start;position:absolute;gap:10px;top:33px;left:220px;right:0;bottom:0;padding:10px;background-size:cover;background-position:center;box-sizing:border-box;overflow-y:hidden;overflow-x:auto;scrollbar-width:thin;transition:left ease .5s;}
.main.multiRow {flex-wrap:wrap;overflow-y:auto;overflow-x:hidden;}
.main.columns {flex-flow:column wrap;}
.main.columns .list {flex-basis:unset;}
.dragster {position:absolute;pointer-events:none;contain:content;}

/* LISTS */
.list {display:flex;flex-flow:column nowrap;flex:0 0 284px;width:284px;max-height:100%;background-color:#101204;border-radius:9px;box-sizing:border-box;contain:content;}
.listTitle {display:flex;flex-flow:row nowrap;justify-content:start;align-items:start;margin:5px 8px 0 8px;}
.listTitle .listName {flex:1 1 50%;padding:0 0 0 2px;margin-right:5px;border-radius:6px;white-space:pre-wrap;}
.listTitle .listName:focus {outline:2px solid var(--accent);outline-offset:2px;}
.moveListBtn, .deleteListBtn {color:#bbb;background:none;font-size:18px;line-height:18px;}
.moveListBtn:hover {color:var(--accent);}
.deleteListBtn {display:none;color:#911;margin-left:4px;}
.listTitle .listName:focus ~ .moveListBtn {display:none;}
.listTitle .listName:focus ~ .deleteListBtn, .listTitle .deleteListBtn:hover {display:block;}
#newListName {margin:8px 0;padding:3px 5px;background:none;border:2px solid var(--accent);color:#ccc;border-radius:6px;}
#newListBtn {padding:3px 7px;background:none;border:2px solid var(--accent);border-radius:9px;color:#ccc;font-size:12px;}
#newListBtn:hover {background:#0002;}

/* CARDS */
.cardContainer {padding:0 8px;min-height:12px;overflow-y:auto;scrollbar-width:thin;}
.card {background-color:#22272B;border-radius:7px;margin:6px 0 0 0;padding:0 8px 6px 8px;box-sizing:border-box;white-space:pre-wrap;cursor:pointer;}
.addCardBtn {border-radius:7px;margin:4px 8px;padding:2px 6px;cursor:pointer;}
.card:hover, .addCardBtn:hover {background-color:#282e34;}
.hasDescription {border-left:4px solid var(--accent);}

/* POPUPS */
#popupBG {display:none;flex-flow:row nowrap;justify-content:center;align-items:center;position:fixed;inset:0;z-index:2;background-color:#80808060;content-visibility:auto;contain:strict;}
#newBoardBox, #editBoardBox, #importExportBox {display:none;overflow:hidden;border-radius:13px;background:linear-gradient(150deg,var(--main-bg),var(--accent),var(--main-bg),var(--accent));}
.popupBody {text-align:center;padding:6px 8px 0 8px;}
.popupBody input[type="text"] {background:#80808024;padding:4px 10px;color:#FFF;border-top:1px solid #000;border-bottom:1px solid #fff5;border-radius:16px;}
.popupBody input[type="text"]:focus {outline:none;background:none;}
/* bottom buttons */
.bottomBtnsBar {display:flex;flex-flow:row nowrap;gap:2px;margin-top:12px;padding-top:1px;background-color:#000;}
.bottomBtnsBar button {flex-grow:1;border:none;color:#000;padding:8px;text-align:center;}
.bottomBtnsBar button:first-child {background-color:#8060ff;}
.bottomBtnsBar button:last-child {background-color:#0BB;}
.bottomBtnsBar button:hover  {box-shadow: 3px 3px 8px -1px #000 inset;}
.bottomBtnsBar button:first-child:hover {box-shadow:-3px 3px 8px -1px #000 inset;}
#delBoardBtn {background-color:#911;}
#delChk {accent-color:#911;}

/* VIEW CARD DETAILS */
.viewCardBox {display:none;flex-flow:column nowrap;width:768px;max-width:90vw;max-height:97vh;max-height:97dvh;padding:6px 12px;background-color:#282E33;border-radius:9px;}
.cardTitle {font-size:16px;line-height:22px;margin:0 0 10px 0;padding:4px 4px 6px 4px;white-space:pre-wrap;border-radius:7px;}
.cardTitle:focus {background-color:#1a1e22;outline:1px solid var(--accent);}
.cardTitle div {font-size:inherit;}
.cardDescription {display:none;font-family:monospace;line-height:16px;min-height:130px;width:100%;padding:4px;color:var(--text);background:#343a3f;overflow-y:auto;border:1px solid #21272c;overflow-wrap:break-word;box-sizing:border-box;white-space:pre-wrap;}
.dates {float:right;color:#888;font-size:12px;}
#cdate, #mdate {font-size:inherit;}
.saveDescriptionBtns {display:none;}
#cardDescTA:focus {outline:2px solid var(--accent);}
#cardDescTA:focus + div .saveDescriptionBtns {display:inline-block;}
.saveDescriptionBtns {margin-top:6px;}
#sav {color:var(--accent);font-size:16px;line-height:18px;padding:5px 10px;margin-right:8px;border:2px solid var(--accent);border-radius:7px;background:none;}
#sav:hover {color:#000;background:var(--accent);}
#can {color:var(--title);font-size:16px;line-height:18px;padding:7px 10px;border-radius:7px;background:none;}
#can:hover {background:#383c40;}
#archiveBtn {float:right;padding:3px 8px;margin:10px 0 2px 8px;background:none;border:2px solid #911;color:#911;border-radius:7px;}
#archiveBtn:hover {background:#911;color:#000;border-color:#000;}
.cardDescription a:hover {text-decoration:underline;color:#2369B0;}

/* TAGS */
.tags {padding:2px 4px;line-height:0;pointer-events:none;}
.tags div {display:inline-block;width:60px;height:5px;margin:2px 0 1px 0;transform:skewX(135deg);}
#tagsBox {margin-top:2px;}
#tagsBox div, #tagsBox button {display:inline-block;position:relative;height:13px;width:48px;line-height:0;vertical-align:top;cursor:pointer;transform:skewX(135deg);}
#addTagBox {display:flex;flex-flow:row nowrap;height:0;margin-bottom:12px;}
#addTagBox div {flex:1 1 7.69%;cursor:pointer;transform:skewX(135deg);}
#cardTextColorPicker {float:right;height:13px;width:32px;cursor:pointer;transform:skewX(45deg);}
#cardTextColorPicker::-webkit-color-swatch-wrapper {padding:0;}
#cardTextColorPicker::-webkit-color-swatch {border:none;}
#cardTextColorPicker::-moz-color-swatch {border:none;}
#tagsBox div:hover, #tagsBox button:hover, #addTagBox div:hover, #cardTextColorPicker:hover {z-index:1;scale:1.25;}

/* MISC */
#loader {display:none;width:40px;height:40px;border-radius:50%;border-top:3px solid #FFF;border-right:3px solid transparent;animation:rotation 1s linear infinite;}
@keyframes rotation {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}

body.menu-closed .menu {left:-222px;}
body.menu-closed .main {left:0;}
@media (max-width:1000px) {
  .menu {left:-222px;}
  .main, body.menu-closed .menu {left:0;}
  .head select {display:none;}
}
@media (min-width:500px) {
  .saveDescriptionBtns:hover {display:inline-block;}
}

::selection {color:var(--accent);background-color:#000;}
:root {scrollbar-width:thin !important;scrollbar-color:#338 #0000 !important;}