New
Aug 21, 2019 9:14 PM
#301
Valerio_Lyndon said: Clean is rather subjective. For my own purposes, I would consider clean to be code which has the least overwriting of code, where-as you or someone else may consider clean to be the most readable or modifyable. But it's certainly possible, although would take a little time to separate out what is changed and what isn't. Is there a specific reason you wish to separate it out, such as updating the theme? I would like to keep it separate in case any updates for the theme comes out so they won't break stuff. As far as I can remember I removed some color variables and replaced them with this instead: [data-query*="status\":7"] { --text-h: #ff8400; --header-border: #ff8400; --text-head-h: #ff8400; --text-h: #ff8400; --text-dim-h: #ff8400; --text-dark: #ff8400; --checkmark: #ff8400; --btn-head-bg-h: #ff8400; --bg-dark: #ff8400; --btn-text-h: #ffffff; } [data-query*="status\":1"] { --header-border: #2db039; --text-head-h: #2db039; --text-h: #2db039; --text-dim-h: #2db039; --text-dark: #2db039; --checkmark: #2db039; --btn-head-bg-h: #2db039; --bg-dark: #2db039; --btn-text-h: #ffffff; } [data-query*="status\":3"] { --header-border: #f9d457; --text-head-h: #f9d457; --text-h: #f9d457; --text-dim-h: #f9d457; --text-dark: #f9d457; --checkmark: #f9d457; --btn-head-bg-h: #f9d457; --bg-dark: #f9d457; --btn-text-h: #ffffff; } [data-query*="status\":4"] { --header-border: #a12f31; --text-head-h: #a12f31; --text-h: #a12f31; --text-dim-h: #a12f31; --text-dark: #a12f31; --checkmark: #a12f31; --btn-head-bg-h: #a12f31; --bg-dark: #a12f31; --btn-text-h: #ffffff; } [data-query*="status\":6"] { --header-border: #c3c3c3; --text-head-h: #c3c3c3; --text-h: #c3c3c3; --text-dim-h: #c3c3c3; --text-dark: #c3c3c3; --checkmark: #c3c3c3; --btn-head-bg-h: #c3c3c3; --bg-dark: #c3c3c3; --btn-text-h: #ffffff; } [data-query*="status\":2"] { --header-border: #26448f; --text-head-h: #26448f; --text-h: #26448f; --text-dim-h: #26448f; --text-dark: #26448f; --checkmark: #26448f; --btn-head-bg-h: #26448f; --bg-dark: #26448f; --btn-text-h: #ffffff; } Is there a way to make the highlight color different for each category as well? Figured it out myself, thanks! Last small thing is I couldn't get the All Anime category border to behave the same way as the others, is there a way to make it work without using --accent so the other colors stay untouched? |
LeguchAug 22, 2019 3:25 AM
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
Aug 22, 2019 2:51 AM
#302
@Valerio_Lyndon Perfect thanks. For the second code simply perfect. Perhaps you will have missed it while reading the messages but you can change the color of the sidebar based on the section (without hover and as the title of the anime but for the sidebar)? to be clear as Leguch has it. edit: i would like other things as well: you can make all the anime watchers watch, completed, hold, drop and watch to be divided and above each division appears watching etc depending on the division? the color of the currently watching text will be the same as that of the section, completed will it have the color like the completed section and so on? how can i add that black background effect and with the white hover (this feature the tags and studio buttons have) to the edit and more buttons next to airing? how can i change the color of the text [airing], aired, to, premier,progress,movie,tv,ona,ova and special? can you insert that black background effect with the white hover at the indicated season (example: Summer 2019)? you can insert in the left side of the avatar the text viewing profile like the shared anime button as you said you can do it? |
TaduinAug 22, 2019 3:14 PM
Aug 22, 2019 6:15 AM
#303
How do I add a banner photo that's saved to my PC? There's no way to copy the image's address when I access it in my files. |
Aug 22, 2019 8:35 AM
#304
PeaceofCake24 said: How do I add a banner photo that's saved to my PC? There's no way to copy the image's address when I access it in my files. @PeaceofCake24 It's simple, upload your banner to imgurr, copy this code :root { --banner: url(url image); } ps: enter the code below |
Aug 23, 2019 1:08 AM
#305
Leguch said: Hmm, well since you aren't using the imported code you aren't forced to update. But if you do wish to update, you can overwrite the current theme (or mod) code at any time using the direct installation links. I took a look through your CSS and it seems like the only things you changed from the main theme (other than the variables you mention above which are already separated out) are as such:I would like to keep it separate in case any updates for the theme comes out so they won't break stuff. As far as I can remember I removed some color variables and replaced them with this instead: [data-query*="status\":7"] { --text-h: #ff8400; --header-border: #ff8400; --text-head-h: #ff8400; --text-h: #ff8400; --text-dim-h: #ff8400; --text-dark: #ff8400; --checkmark: #ff8400; --btn-head-bg-h: #ff8400; --bg-dark: #ff8400; --btn-text-h: #ffffff; } [data-query*="status\":1"] { --header-border: #2db039; --text-head-h: #2db039; --text-h: #2db039; --text-dim-h: #2db039; --text-dark: #2db039; --checkmark: #2db039; --btn-head-bg-h: #2db039; --bg-dark: #2db039; --btn-text-h: #ffffff; } [data-query*="status\":3"] { --header-border: #f9d457; --text-head-h: #f9d457; --text-h: #f9d457; --text-dim-h: #f9d457; --text-dark: #f9d457; --checkmark: #f9d457; --btn-head-bg-h: #f9d457; --bg-dark: #f9d457; --btn-text-h: #ffffff; } [data-query*="status\":4"] { --header-border: #a12f31; --text-head-h: #a12f31; --text-h: #a12f31; --text-dim-h: #a12f31; --text-dark: #a12f31; --checkmark: #a12f31; --btn-head-bg-h: #a12f31; --bg-dark: #a12f31; --btn-text-h: #ffffff; } [data-query*="status\":6"] { --header-border: #c3c3c3; --text-head-h: #c3c3c3; --text-h: #c3c3c3; --text-dim-h: #c3c3c3; --text-dark: #c3c3c3; --checkmark: #c3c3c3; --btn-head-bg-h: #c3c3c3; --bg-dark: #c3c3c3; --btn-text-h: #ffffff; } [data-query*="status\":2"] { --header-border: #26448f; --text-head-h: #26448f; --text-h: #26448f; --text-dim-h: #26448f; --text-dark: #26448f; --checkmark: #26448f; --btn-head-bg-h: #26448f; --bg-dark: #26448f; --btn-text-h: #ffffff; } a, a:hover { color: var(--text-h); } .status-button.all_anime:after { background: var(--text-h) !important; } .data.status { width: 2px !important; } .list-table .list-table-data .title .link:hover { color: var(--text-h) !important; } .data.chapter input, .data.progress input, .data.tags textarea, .data.volume input { outline-color: var(--text-h) !important; } .more-info .td1 > div > a { border-bottom: 2px solid var(--text-h); } .list-table .more-info .more-content a:hover { color: var(--text-h) !important; } To check what was different, I ran the code through a beautifier and then input it to diffchecker.com. If you do decide to update or delete any of your code, I would advise making a temporary backup of everything in a text file on your computer, just in case something breaks and you need to revert any or all changes. Leguch said: I believe I follow you. This code will change the bottom bar of the "All Anime" button to it's own colour:Last small thing is I couldn't get the All Anime category border to behave the same way as the others, is there a way to make it work without using --accent so the other colors stay untouched? /* "All Anime" Category Bottom Bar */ .status-button.all_anime::after { background: #ff8400 !important; } |
Aug 23, 2019 1:38 AM
#306
Valerio_Lyndon said: Leguch said: Hmm, well since you aren't using the imported code you aren't forced to update. But if you do wish to update, you can overwrite the current theme (or mod) code at any time using the direct installation links. I took a look through your CSS and it seems like the only things you changed from the main theme (other than the variables you mention above which are already separated out) are as such:I would like to keep it separate in case any updates for the theme comes out so they won't break stuff. As far as I can remember I removed some color variables and replaced them with this instead: [data-query*="status\":7"] { --text-h: #ff8400; --header-border: #ff8400; --text-head-h: #ff8400; --text-h: #ff8400; --text-dim-h: #ff8400; --text-dark: #ff8400; --checkmark: #ff8400; --btn-head-bg-h: #ff8400; --bg-dark: #ff8400; --btn-text-h: #ffffff; } [data-query*="status\":1"] { --header-border: #2db039; --text-head-h: #2db039; --text-h: #2db039; --text-dim-h: #2db039; --text-dark: #2db039; --checkmark: #2db039; --btn-head-bg-h: #2db039; --bg-dark: #2db039; --btn-text-h: #ffffff; } [data-query*="status\":3"] { --header-border: #f9d457; --text-head-h: #f9d457; --text-h: #f9d457; --text-dim-h: #f9d457; --text-dark: #f9d457; --checkmark: #f9d457; --btn-head-bg-h: #f9d457; --bg-dark: #f9d457; --btn-text-h: #ffffff; } [data-query*="status\":4"] { --header-border: #a12f31; --text-head-h: #a12f31; --text-h: #a12f31; --text-dim-h: #a12f31; --text-dark: #a12f31; --checkmark: #a12f31; --btn-head-bg-h: #a12f31; --bg-dark: #a12f31; --btn-text-h: #ffffff; } [data-query*="status\":6"] { --header-border: #c3c3c3; --text-head-h: #c3c3c3; --text-h: #c3c3c3; --text-dim-h: #c3c3c3; --text-dark: #c3c3c3; --checkmark: #c3c3c3; --btn-head-bg-h: #c3c3c3; --bg-dark: #c3c3c3; --btn-text-h: #ffffff; } [data-query*="status\":2"] { --header-border: #26448f; --text-head-h: #26448f; --text-h: #26448f; --text-dim-h: #26448f; --text-dark: #26448f; --checkmark: #26448f; --btn-head-bg-h: #26448f; --bg-dark: #26448f; --btn-text-h: #ffffff; } a, a:hover { color: var(--text-h); } .status-button.all_anime:after { background: var(--text-h) !important; } .data.status { width: 2px !important; } .list-table .list-table-data .title .link:hover { color: var(--text-h) !important; } .data.chapter input, .data.progress input, .data.tags textarea, .data.volume input { outline-color: var(--text-h) !important; } .more-info .td1 > div > a { border-bottom: 2px solid var(--text-h); } .list-table .more-info .more-content a:hover { color: var(--text-h) !important; } To check what was different, I ran the code through a beautifier and then input it to diffchecker.com. If you do decide to update or delete any of your code, I would advise making a temporary backup of everything in a text file on your computer, just in case something breaks and you need to revert any or all changes. Leguch said: I believe I follow you. This code will change the bottom bar of the "All Anime" button to it's own colour:Last small thing is I couldn't get the All Anime category border to behave the same way as the others, is there a way to make it work without using --accent so the other colors stay untouched? /* "All Anime" Category Bottom Bar */ .status-button.all_anime::after { background: #ff8400 !important; } Alright, thanks a lot and keep up the good work! :) |
🌺 Anime List 🌺 🌺 Cards Collection 🌺 |
Aug 23, 2019 2:14 AM
#307
Taduin said: The scrollbar?: [Image]Perhaps you will have missed it while reading the messages but you can change the color of the sidebar based on the section (without hover and as the title of the anime but for the sidebar)? to be clear as Leguch has it. If so, /* ================== RESTYLE SCROLLBARS */ /* Change Colours Here */ :root { --scrollbar-accent: var(--text); } [data-query*='status":7'] { --scrollbar-accent: var(--accent); } [data-query*='status":1'] { --scrollbar-accent: var(--watching); } [data-query*='status":2'] { --scrollbar-accent: var(--completed); } [data-query*='status":3'] { --scrollbar-accent: var(--onhold); } [data-query*='status":4'] { --scrollbar-accent: var(--dropped); } [data-query*='status":6'] { --scrollbar-accent: var(--plantowatch); } /* Firefox */ * { scrollbar-color: var(--scrollbar-accent) var(--bg); } /* Chrome */ *::-webkit-scrollbar { background: var(--bg); } *::-webkit-scrollbar-button:vertical { background: transparent center / 10px auto no-repeat; } *::-webkit-scrollbar-button:vertical:start { background-image: url(https://i.imgur.com/Cu2u9Hu.png); } *::-webkit-scrollbar-button:vertical:end { background-image: url(https://i.imgur.com/0YI7VxA.png); } *::-webkit-scrollbar-button:horizontal { background: transparent center / auto 10px no-repeat; } *::-webkit-scrollbar-button:horizontal:start { background-image: url(https://i.imgur.com/BArw1oI.png); } *::-webkit-scrollbar-button:horizontal:end { background-image: url(https://i.imgur.com/vqOtoms.png); } *::-webkit-scrollbar-corner { background: var(--bg); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-accent) content-box; border: 0 solid transparent; } *::-webkit-scrollbar-thumb:vertical { border-width: 0 2px; } *::-webkit-scrollbar-thumb:horizontal { border-width: 2px 0; } *::-webkit-scrollbar-track { width: 5px; } Taduin said: you can make all the anime watchers watch, completed, hold, drop and watch to be divided and above each division appears watching etc depending on the division? the color of the currently watching text will be the same as that of the section, completed will it have the color like the completed section and so on? Add this to the top of the CSS. @\import "https://malcat-gen.appspot.com/headers?template=[data-query*='\"status\":7']:not([data-query*='order']):not([data-query*='tag\"']):not([data-query*='\"s\"']) .list-item:nth-child($index){margin-top:48px;}[data-query*='\"status\":7']:not([data-query*='order']):not([data-query*='tag\"']):not([data-query*='\"s\"']) .list-item:nth-child($index) .status:before{content:'$content'}"; Add this to the bottom of the CSS. /* ========================= CATEGORY HEADERS - CUSTOM */ [data-query*='"status":7']:not([data-query*='order']):not([data-query*='order']):not([data-query*='tag"']):not([data-query*='"s"']) .list-item:nth-child(2) { margin-top: 32px; } [data-query*='"status":7'] .list-item .status::before { position: absolute; top: -40px; left: 0; display: block; width: 1060px; height: 32px; color: var(--text-head); font: 20px/32px Oswald; text-align: center; letter-spacing: 1px; text-transform: uppercase; pointer-events: none; } [data-query*='"status":7'] .list-item .watching::before, [data-query*='"status":7'] .list-item .reading::before { color: var(--watching); } [data-query*='"status":7'] .list-item .completed::before { color: var(--completed); } [data-query*='"status":7'] .list-item .onhold::before { color: var(--onhold); } [data-query*='"status":7'] .list-item .dropped::before { color: var(--dropped); } [data-query*='"status":7'] .list-item .plantowatch::before, [data-query*='"status":7'] .list-item .plantoread::before { color: var(--plantowatch); } Taduin said: how can i add that black background effect and with the white hover (this feature the tags and studio buttons have) to the edit and more buttons next to airing? /* ================================ Add/Edit/More Appearance Changes */ .list-table .list-table-data .title .add-edit-more a { display: inline-block; padding: 1px 4px; background: var(--btn-bg); border-radius: 8.5px; margin-left: 3px; color: var(--text) !important; text-align: center; line-height: 15px; } .list-table .list-table-data .title .add-edit-more a:hover { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } /* ================================ Add/Edit/More Appearance Changes */ .list-table .list-table-data .data.title .add-edit-more { font-size: 0; } .list-table .list-table-data .title .add-edit-more a { display: inline-block; padding: 1px 4px; background: var(--btn-bg); border-radius: 7.5px; margin-left: 3px; color: var(--text) !important; font-size: 10px; text-align: center; line-height: 13px; } .list-table .list-table-data .title .add-edit-more a:hover { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } .content-status::after, .rereading::after, .rewatching::after { content: "]"; } Taduin said: how can i change the color of the text [airing], aired, to, premier,progress,movie,tv,ona,ova and special? .list-item { --text-dim: red; --text-dim-h: green; } Taduin said: can you insert that black background effect with the white hover at the indicated season (example: Summer 2019)? /* ================================ Season Button Appearance Changes */ .list-table-data .data.season a { display: inline-block; padding: 1px 4px; background: var(--btn-bg); border-radius: 8.5px; margin-left: 3px; color: var(--text) !important; text-align: center; line-height: 15px; } .list-table-data .data.season a:hover { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } /* ================================ Season Button Appearance Changes */ .data.season::before { content: none; } .list-table-data .data.season a { display: block; width: 122px; padding: 1px; background: var(--btn-bg); border-radius: 8.5px; color: var(--text) !important; text-align: center; line-height: 15px; } .list-table-data .data.season a:hover { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } Taduin said: you can insert in the left side of the avatar the text viewing profile like the shared anime button as you said you can do it? /* ========================= Add Viewer Info To Avatar */ .btn-menu { position: absolute; left: 1px; top: -7px; width: 150px; height: 48px; padding: 51px 0; border-radius: 50%; color: #fff !important; line-height: 16px; font-weight: bold; text-shadow: 0 1px 3px #000; text-align: center !important; z-index: 36; cursor: default; } .header .header-menu .btn-menu > a { color: #fff; font-size: 12px !important; } .btn-menu a.username { top: 0; left: 0; height: 16px; padding: 67px 0; text-decoration: none !important; } .btn-menu a.username::after { content: "'s"; } .btn-menu #header-menu-button { display: block; pointer-events: none; } .btn-menu .fa { display: none; } /* Non-Owner */ .btn-menu::before { display: block; height: 15px; font-size: 12px; white-space: pre; } [data-owner=""] .btn-menu::before { content: "Viewing"; } .anime[data-owner="1"] .btn-menu::before { content: "Viewing\a Your\a Anime List"; } .manga[data-owner="1"] .btn-menu::before { content: "Viewing\a Your\a Manga List"; } This will prevent the avatar from linking to your profile. /* ========================= Add Viewer Info To Avatar */ .header .header-info { margin-right: 6px !important; } .btn-menu { display: inline-block; height: 26px; padding: 0 8px; background: var(--bg); border-radius: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.8); order: 3; color: var(--text) !important; font: normal 12px/26px Arial, Verdana, sans-serif !important; text-align: left; white-space: nowrap; cursor: text; } .btn-menu span.username { display: inline !important; } .btn-menu a.username { position: static; display: inline; width: auto; height: auto; color: var(--text) !important; font-size: inherit; text-decoration: none !important; transition: all .15s ease; cursor: pointer; } .btn-menu a.username:hover { color: var(--text-h) !important; } .btn-menu #header-menu-button { display: inline; color: inherit; font-weight: normal; pointer-events: none; } .btn-menu #header-menu-button .fa { display: none; } Thanks for answering PeaceofCake's question. :) |
Aug 23, 2019 2:39 AM
#308
@Valerio_Lyndon First of all thanks for the code but i have a small problem with this code CATEGORY HEADERS - CUSTOM * /, practically it works perfectly where i add the css but if i try to see it in the list to normal anime it doesn't appear and i don't understand why, once solved this problem i finished editing the theme finally. For PeaceofCake's answer no problem. PS: if it can help use chrome edit: the edit and more buttons as i render them as the tag edit button you made me add? to understand look at my list here https://myanimelist.net/animelist/Taduin?status=1&order=4&order2=0 edit 2: apparently on all anime it actually works but when i add a order no, can you fix it? edit 3: can you add that you also divide them into tags? not a problem if i have to manually add the tag name |
TaduinAug 23, 2019 4:57 AM
Aug 23, 2019 8:25 PM
#309
Taduin said: The limitations listed on the main page are still part of this version.@Valerio_Lyndon First of all thanks for the code but i have a small problem with this code CATEGORY HEADERS - CUSTOM * /, practically it works perfectly where i add the css but if i try to see it in the list to normal anime it doesn't appear and i don't understand why, once solved this problem i finished editing the theme finally. For PeaceofCake's answer no problem. edit 2: apparently on all anime it actually works but when i add a order no, can you fix it? Valerio_Lyndon said: I am unable to circumvent these limitations.Due to the limitations of third-party tools, there are a couple of things to note: • These headers will only display on the basic, unsorted all anime page. If you are sorting by a different order, searching by tag, or searching titles, the headers will be hidden. • The headers will appear out of order for a few hours after you add new titles to your list. Give it a bit of time and it should sort itself out. Taduin said: I don't see anything wrong. Do you wish for the buttons to share their styling?edit: the edit and more buttons as i render them as the tag edit button you made me add? to understand look at my list here https://myanimelist.net/animelist/Taduin?status=1&order=4&order2=0 Taduin said: If you want a custom sort order for the list, I'm sorry to say that's beyond my capabilities. Rearranging items beyond the default lists' features is not something I can do. Did you mean something else?edit 3: can you add that you also divide them into tags? not a problem if i have to manually add the tag name |
Aug 23, 2019 10:23 PM
#310
Is there a way to make Studio and Premiere Date on the left like tags? I could add tags for each, but that would take a lot of time. |
Aug 23, 2019 10:55 PM
#311
Having trouble getting my list with the dark theme, I add the @import dark mode code to the top and it doesn't change. Here is what I have so far: @\import "https://fonts.googleapis.com/css?family=Oswald"; @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css"; :root{--name:none;--avatar:none;--banner:url(https://serving.photos.photobox.com/75618325d2bb654de42109e492703f367d03d3c81c2ce284af2e75734017cb21101210fb.jpg);--character:url(none);--pbg:#efefef;--bg:#fff;--bg-dark:#ddd;--text:#323232;--text-h:#787878;--text-dim:#bababa;--text-dim-h:#646464;--text-dark:#111;--icon:#323232;--accent:#4065ba;--btn-bg:#ebebeb;--btn-bg-h:#323232;--btn-head-bg-h:#1d439b;--btn-text-h:#fff;--text-head:#9b9b9b;--text-head-h:#787878;--watching:#2db039;--completed:#26448f;--onhold:#f1c83e;--dropped:#a12f31;--plantowatch:#c3c3c3;--cover-bg:#323232;--edit-btn:#d9d9d9;--checkmark:#9696eb}#advanced-options .advanced-options-button a,#fancybox-close,#search-box,#search-box input,#search-box:after,.data.chapter,.data.image .link:after,.data.licensor a,.data.priority,.data.progress,.data.score a,.data.studio a,.data.tags a,.data.tags a.edit:after,.data.volume,.fixed .status-menu:after,.header .header-title:after,.icon-menu svg,.icon-menu.setting,.icon-menu.setting .text,.icon-menu.setting .text a,.icon-menu:after,.icon-menu:before,.list-table .list-table-header .header-title .link.sort,.list-table-header .header-title,.status-button:after,.status-menu-container.fixed .status-menu,.status-menu-container:not(.fixed) .status-menu,.status-menu:after{transition:all .3s ease!important}#advanced-options .advanced-options-header .description,#advanced-options .advanced-options-header .description:before,#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#search-button i,.header-info a,.list-table-data a,.more-info .td1>div>a{transition:all .15s ease!important}.header .header-title,.header-info,.icon-menu,.icon-menu.quick-add:before,.list-menu-float .icon-menu,.list-table>tbody:first-of-type:after,.stats a{display:inline-block;height:26px!important;width:26px!important;background:var(--bg)!important;border-radius:13px;color:var(--text)!important;font:normal 0/26px Arial,Verdana,sans-serif;text-indent:0;text-align:left;white-space:nowrap;vertical-align:top;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:all .3s ease!important}.header .header-title:hover,.icon-menu:hover,.list-menu-float .icon-menu:hover,.stats a:hover{width:100px!important;background:var(--btn-head-bg-h)!important;color:var(--btn-text-h)!important}html{position:relative;min-height:100%}body{padding-bottom:64px;background:var(--pbg) no-repeat center/cover fixed!important}.list-container{position:static;width:100%;background:0 0!important;border:none}.list-block{width:1060px;min-height:initial;margin:64px auto 0}.status-menu-container.fixed+.list-block{margin-top:128px!important}.list-unit{width:100%!important;margin:0}.list-table{border:none!important}a,a:hover{color:var(--accent)}.initialize-tutorial{display:none!important}.cover-block{position:absolute;top:0;left:0;z-index:-5;width:100%;min-width:1060px;height:318px;background:var(--cover-bg) var(--banner) no-repeat center center/cover scroll}.cover-block:before{content:"";position:absolute;bottom:0;left:0;display:block;width:100%;height:50px;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}#cover-image,.btn-list-setting{display:none!important}#list-container #cover-image-container{display:block!important;width:1060px;height:100%;padding:0;background:var(--character) no-repeat right center/contain;margin:0 auto}#cover-image-container:after{content:var(--name);position:absolute;top:55px;left:50%;margin-left:-475px;color:#fff;font:bold 60px/60px Oswald;text-align:left;letter-spacing:15px;text-shadow:1px 4px 7px rgba(0,0,0,.45);text-transform:uppercase;white-space:pre;transform:scale(.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);animation:name-slide 3s 1 .5s backwards}@keyframes name-slide{0%{top:12px;margin-left:-535px;opacity:0;letter-spacing:0;animation-timing-function:ease-out}90%{top:55px;margin-left:-475px}100%{letter-spacing:15px;opacity:1;animation-timing-function:cubic-bezier(0,0,.75,1)}}.header{display:flex;height:36px;margin-top:282px}.header .header-menu{position:static;display:flex;width:auto;height:26px;margin-left:6px;order:2}.btn-menu{height:0;font-size:0!important}.btn-menu #header-menu-button{display:none}.header .header-title{position:static;margin-left:155px;order:1;z-index:1}.header .header-title:before{content:"\f015";display:inline-block;width:26px;background:0 0!important;font-size:14px;font-family:FontAwesome;text-align:center!important}.header .header-title:hover:before{color:var(--btn-text-h)!important}.header .header-title:after{content:"Home";display:inline-block;height:26px!important;width:26px!important;font:14px/26px Arial,Verdana,sans-serif;color:var(--text)}.header .header-title:hover:after{color:var(--btn-text-h)}.header .header-menu .list-menu{position:static;order:1;display:inline-block;height:26px;border:none;background:0 0;box-shadow:none}.header .icon-menu.anime-list,.header .icon-menu.manga-list{position:static;padding:0;margin-right:6px;font-size:0!important;font-weight:400!important}.header .icon-menu.anime-list .text,.header .icon-menu.manga-list .text{position:static!important;font:14px/26px Arial,Verdana,sans-serif;vertical-align:top}.header .header-menu .list-menu .icon-menu svg.icon{position:static;max-width:14px;max-height:14px;padding:6px;fill:var(--text)}.header .header-menu .list-menu .icon-menu:hover svg.icon{fill:var(--btn-text-h)}.header-info{position:static;width:auto!important;padding:0 8px;margin:0!important;font-size:12px;order:2}.header-info a{color:var(--text)!important;text-decoration:none!important}.header-info a:hover{color:var(--text-h)!important}.btn-menu a.username{position:absolute;left:1px;top:-7px;display:block;width:150px;height:150px;background:0 0;border-radius:50%;font-size:0;z-index:36}.btn-menu span.username{display:none!important}.status-menu-container{position:relative;z-index:35!important;width:100%;min-width:1060px;height:64px;background:0 0;border:none!important}.status-menu-container.fixed{z-index:45!important}.status-menu-container:after,.status-menu-container:before{content:"";position:absolute;left:0;z-index:-1;display:block;width:100%}.status-menu-container:before{top:0;height:64px;background:var(--bg)}.status-menu-container:after{top:64px;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,0))}.status-menu{position:relative;display:block!important;width:1060px;padding:0 0 0 173px;margin:0 auto;box-sizing:border-box}.fixed .status-menu{padding:0 0 0 71px}.status-menu:after{content:"";position:absolute;top:-51px;left:-8px;width:150px;height:150px;background:var(--bg-dark) var(--avatar) no-repeat center top/cover;border:8px solid var(--bg);border-radius:50%;opacity:1;box-shadow:0 1px 2px rgba(0,0,0,.2)}.fixed .status-menu:after{top:0;width:48px;height:48px;box-shadow:none}.status-menu .status-button{display:inline-block!important;height:32px;padding:16px 0!important;margin:0 15px!important;color:var(--text-head)!important;font-size:17.6px!important;line-height:30px;white-space:nowrap;font-family:Oswald!important;text-transform:uppercase;letter-spacing:1px}.status-menu .status-button.on{color:var(--text-head-h)!important}.status-button.all_anime:after{background:var(--accent)!important}.status-button.reading:after,.status-button.watching:after{background:var(--watching)!important}.status-button.completed:after{background:var(--completed)!important}.status-button.onhold:after{background:var(--onhold)!important}.status-button.dropped:after{background:var(--dropped)!important}.status-button.plantoread:after,.status-button.plantowatch:after{background:var(--plantowatch)!important}.status-menu-container .search-container{top:19px;right:0}#search-box{padding-right:22px;border:2px solid transparent;border-radius:13px;margin-top:0!important}#search-box.open{width:150px!important;background:var(--btn-bg);border:2px solid var(--bg-dark)}#search-box input{background:0 0;border:none;border-radius:13px;outline:0;color:var(--text)}#search-box.open input{text-indent:7.5px;line-height:20px}.status-menu-container .search-container #search-button{position:absolute;right:0;top:0;width:26px;height:26px;border-radius:13px;margin-top:0;text-align:center}.open~#search-button{pointer-events:none}#search-button i{color:var(--text-head)!important;font-size:18px;line-height:26px}.open~#search-button i{font-size:14px;line-height:24px}#search-box:after{content:"";position:absolute;right:0;top:0;width:0;height:22px;padding-right:22px;background:linear-gradient(to right,var(--btn-bg) 2px,transparent 9.5px,transparent 142.5px,var(--btn-bg) 150px) content-box;border:2px solid transparent;border-radius:13px;pointer-events:none;opacity:0}#search-box.open:after{width:150px;opacity:1}.list-menu-float{position:relative;top:auto;display:block;width:904px;height:0;padding-left:155px;margin:0 auto;border:none;background:0 0;text-align:left;font-size:0;z-index:38}.icon-menu,.list-menu-float form{display:inline-block!important}.list-menu-float .icon-menu{top:74px;margin:0 6px 0 0}.list-menu-float .icon-menu .text{top:0!important;left:26px!important;display:inline-block;width:auto!important;height:26px;color:var(--text)!important;font-size:14px!important;opacity:1!important}.list-menu-float .icon-menu:hover .text{color:var(--btn-text-h)!important}.list-menu-float .icon-menu svg.icon{top:6px!important;left:6px!important;max-width:14px;max-height:14px;fill:var(--text)}.list-menu-float .icon-menu:hover svg.icon{fill:var(--btn-text-h)}[data-owner="1"] .list-menu-float .icon-menu.profile{position:absolute;left:1px;top:-43px;display:block!important;width:150px!important;height:150px!important;background:0 0!important;border-radius:50%;font-size:0;box-shadow:none}[data-owner=""] .icon-menu.profile{background-image:none!important}[data-owner=""] .icon-menu.profile:before{content:"\f007";position:absolute;top:0;left:0;display:block;width:26px;height:26px;font-size:14px;line-height:26px;text-align:center;color:var(--text);font-family:FontAwesome}[data-owner=""] .icon-menu.profile:hover:before{color:var(--btn-text-h)}[data-owner=""] .icon-menu.profile:after{content:"Profile";position:absolute;top:0;left:26px;display:inline-block;height:26px;font-size:14px;color:var(--text)}[data-owner=""] .icon-menu.profile:hover:after{color:var(--btn-text-h)}.icon-menu.quick-add svg{display:none}.icon-menu.quick-add:before{content:"\f067";background:0 0!important;font-size:14px;text-align:center;font-family:FontAwesome;box-shadow:none}.icon-menu.quick-add:hover:before{color:var(--btn-text-h)!important}.icon-menu.setting{overflow:visible}.icon-menu.setting:hover{width:26px!important}.icon-menu.setting .text{top:-2px!important;left:0!important;width:240px!important;height:26px!important;padding:2px 0;overflow:visible;font-size:0!important;opacity:1!important;pointer-events:none;z-index:-1}.icon-menu.setting:hover .text{pointer-events:auto}.icon-menu.setting .text a{position:absolute!important;top:2px!important;left:13px!important;width:0!important;height:26px!important;background:var(--btn-bg-h)!important;border:none!important;border-radius:0 13px 13px 0;overflow:hidden;color:var(--btn-text-h)!important;font:14px/26px Arial,Verdana,sans-serif!important;text-indent:9px;text-align:center;white-space:nowrap;opacity:0!important}.icon-menu.setting:hover .text a{width:120px!important;border-radius:0 13px 13px 0;opacity:1!important}.icon-menu.setting:hover .text .link-list-setting{left:120px!important}.icon-menu.setting .text a:hover{background:var(--btn-head-bg-h)!important}.list-status-title{width:1060px!important;height:64px!important;margin-top:-64px;background:0 0!important}.list-status-title .text{display:none!important}.list-status-title .stats{position:absolute;top:10px;right:32px!important;display:block;width:auto;height:26px!important;border-radius:0 0 26px 0;font-size:0;line-height:13px!important}.stats a{margin:0 0 0 6px!important;font:14px/26px Arial,Verdana,sans-serif}.stats a i{width:26px;text-align:center}.list-stats{position:absolute;top:416px;width:1060px!important;background:0 0!important;color:var(--text)!important;font-weight:700}.list-table>tbody:first-of-type{position:relative;top:-26px;margin-top:-30px;left:1032px;display:block;width:30px;height:30px;background:0 0!important;z-index:39}.list-table>tbody:first-of-type:after{content:"\f0dc";position:absolute;top:0;right:0;margin:2px;font-size:14px;font-family:FontAwesome;text-align:center}.list-table>tbody:first-of-type:hover:after{background:var(--btn-head-bg-h)!important;color:var(--btn-text-h)!important}.list-table-header{position:absolute;top:0;right:15px;display:block;width:auto;height:26px;padding:2px 0;font-size:0;white-space:nowrap;pointer-events:none;z-index:-1}.list-table>tbody:first-of-type:hover .list-table-header{pointer-events:auto}.list-table .list-table-header .header-title{position:relative;display:inline-block;width:auto!important;height:auto;padding:0!important;border:none;background:0 0;font-weight:400}.list-table>tbody:first-of-type:hover .header-title{opacity:1}.list-table .list-table-header .header-title .link.sort{display:block;width:13px;height:26px;background:var(--btn-bg-h);border-radius:13px 0 0 13px;margin-left:-13px;overflow:hidden;box-sizing:border-box;color:var(--btn-text-h)!important;font:11px/26px Verdana,Arial,sans-serif;text-align:center;text-indent:-9px;white-space:normal;opacity:0}.list-table tbody:first-of-type:hover .list-table-header .header-title .link.sort{width:80px;opacity:1}.list-table-header .header-title a.hover_info{display:none!important}.list-table .list-table-header .header-title .link.sort:hover{background:var(--btn-head-bg-h)}.list-table-header .header-title a .sort-icon{position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;color:inherit!important;font-size:10px;line-height:10px}.sort-icon.fa-sort-asc{top:2px}.sort-icon.fa-sort-desc{bottom:2px}.anime tbody:first-of-type:hover .header-title.finished a,.anime tbody:first-of-type:hover .header-title.started a{padding:0 13px}.manga tbody:first-of-type:hover .header-title.finished a,.manga tbody:first-of-type:hover .header-title.started a{width:100px!important}.header-title.title a{font-size:0!important}.header-title.title a:after{content:"Title";font-size:11px}.list-table-header .header-title.tags{display:none!important}.list-item{position:relative;display:block;width:100%;background:var(--bg)!important;border:none;margin-bottom:8px}.list-table-data{position:relative;display:flex;max-width:1060px;min-height:64px;align-items:center;font-size:0}.data{display:block!important;padding:0!important;border:none!important;flex:0 0 auto;color:var(--text);font-size:11px}.list-table .list-table-data .data a{color:var(--text)!important;text-decoration:none!important}.list-table .list-table-data a:not(.edit-disabled):hover{color:var(--text-h)!important}.list-unit .loading-space{margin:14px 0 22px}.list-unit .loading-space #loading-spinner{width:20px;height:20px;margin:0 auto;color:var(--text)}.list-table[data-items="[]"]:after{content:"No entries found. Try another category?";display:block;width:900px;background:var(--bg);border-radius:16px;margin:32px auto;color:var(--text);font:16px/32px Arial,Verdana,sans-serif;text-align:center}[data-owner="1"] .list-table[data-items="[]"]:after{content:"No entries found. Why not add some?"}[data-query*='"s":'] .list-table[data-items="[]"]:after{content:"No entries found. Perhaps your search terms are too restrictive?"}.data.status{position:absolute;top:0;left:0;width:1px!important;height:100%;padding:0!important}.status.reading,.status.watching{background:var(--watching)!important}.status.completed{background:var(--completed)!important}.status.onhold{background:var(--onhold)!important}.status.dropped{background:var(--dropped)!important}.status.plantoread,.status.plantowatch{background:var(--plantowatch)!important}.data.image{width:64px;height:64px;margin:4px 0 4px 8px;order:1}.data.image a{position:relative;display:block!important;border-radius:50%;overflow:hidden}.data.image img{width:64px!important;height:64px!important;border:none!important;object-fit:cover}.data.image a:after{content:"\f14c";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(0,0,0,.5);color:#fff;font:30px/64px FontAwesome;opacity:0}.data.image a:hover:after{opacity:1}.data.number{position:relative;top:-22px;width:20px;height:20px;background:var(--bg);border-radius:10px;margin:0 -28px 0 8px;order:1;line-height:20px;font-weight:700;z-index:1}.list-item:nth-child(n+101) .data.number{text-indent:-7px}.list-item:nth-child(n+1001) .data.number{width:27px;margin-right:-35px}.list-item:nth-child(n+10001) .data.number{width:34px;margin-right:-42px}.data.title{position:relative;width:142px;height:16px;padding:32px 0 0 8px!important;order:12;flex:1 0 auto;line-height:16px}.data.title .link.sort{position:absolute;top:16px;left:8px;display:inline-block;max-width:100%;padding-right:16px;overflow:hidden;box-sizing:border-box;line-height:16px;white-space:nowrap;text-overflow:ellipsis}.list-table .list-table-data .title .link:hover{color:var(--accent)!important}.content-status,.rereading,.rewatching{color:var(--text-dim)!important;font-size:10px!important}.content-status:before,.rereading:before,.rewatching:before{content:"["}.content-status:after,.rereading:after,.rewatching:after{content:"] - "}.add-edit-more{display:inline;float:none!important;color:var(--text-dim)}.list-table .list-table-data .title .add-edit-more a{color:var(--text-dim)!important}.list-table .list-table-data .title .add-edit-more a:hover{color:var(--text-dim-h)!important}.icon-watch{display:none!important}.data.type{position:relative;top:-16px;z-index:1;width:92px;height:16px;padding-left:8px!important;margin-right:-100px;order:11;text-align:left!important;color:var(--text-dim);line-height:16px;font-size:10px}.data.score{position:relative;width:26px;height:26px;order:13}.data.score a{display:block;width:26px;height:26px;background:var(--btn-bg);border-radius:13px;margin:0 0 0 auto;line-height:26px}.list-table .list-table-data .score a:not(.edit-disabled):hover{background:var(--btn-bg-h);color:var(--btn-text-h)!important}.data.score select{position:absolute;top:0;right:0;display:block;width:40px;height:26px;padding:0 9px;background:var(--btn-bg-h) url(https://i.imgur.com/KF8oOyC.png) no-repeat 20px center/16px auto;border:none;border-radius:13px;box-shadow:none!important;color:var(--btn-text-h);font:bold 1.1em/26px Verdana,Arial,sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}@-moz-document url-prefix(){.data.score select{padding:0 16px 0 0;text-align:center}}.data.score select:focus{outline:0!important;box-shadow:0 2px 2px rgba(0,0,0,.3)}.data.chapter,.data.progress,.data.volume{width:92px;order:15}.data.chapter{margin-top:-34px}.data.volume{margin:34px 0 0 -92px}.data.chapter span,.data.progress span,.data.volume span{color:var(--text)}.data.progress:before{content:"Progress:";color:var(--text-dim)}.data.chapter:before{content:"Chapters:";color:var(--text-dim)}.data.volume:before{content:"Volumes:";color:var(--text-dim)}.data.chapter span:only-of-type:after,.data.progress span:only-of-type:after,.data.volume span:only-of-type:after{content:" \f058";position:relative;top:1px;color:var(--checkmark);font-family:FontAwesome;font-size:13px}.data.chapter input,.data.progress input,.data.volume input{height:15px;padding:0 1px;background:var(--btn-bg);border:1px solid var(--bg-dark);outline-color:var(--accent)!important;box-sizing:border-box;color:var(--text-dark);font:11px Verdana,Arial,sans-serif}.data.priority{position:relative;width:92px;height:74px;background:var(--bg);margin-right:-92px;order:14;color:var(--text);line-height:74px;opacity:1;pointer-events:none;z-index:1}.status:not(.plantowatch):not(.plantoread)~.data.priority{display:none!important}.list-item:hover .data.priority{opacity:0}.data.priority:before{content:"\f0a2";font-family:FontAwesome}.data.magazine,.data.rated,.data.retail,.data.season,.data.storage{margin-right:4px;order:19;flex-shrink:1}.data.rated{width:40px}.data.magazine{width:90px}.data.retail,.data.storage{width:72px}.data.season{width:92px;order:20}.data.magazine:before,.data.rated:before,.data.retail:before,.data.season:before,.data.storage:before{display:block;color:var(--text-dim)}.data.rated:before{content:"Rated:"}.data.magazine:before{content:"Magazine:"}.data.retail:before,.data.storage:before{content:"Storage:"}.data.season:before{content:"Premiered:"}.data.season:empty:after{content:"Unknown";display:block;color:var(--text-dim)}.data.licensor,.data.studio,.data.tags{width:120px;padding:3px 0!important;margin-right:8px;order:21;flex-shrink:1}.data.licensor span,.data.studio span,.data.tags span{display:block;padding:1px 0;font-size:0!important;line-height:0}.data.licensor a,.data.studio a,.data.tags a:not(.edit){display:block;padding:1px;background:var(--btn-bg);border-radius:8.5px;color:var(--text)!important;font-size:11px!important;line-height:15px}.list-table .list-table-data .licensor span a:hover,.list-table .list-table-data .studio span a:hover,.list-table .list-table-data .tags span a:hover{background:var(--btn-bg-h);color:var(--btn-text-h)!important}.data.licensor:empty:before,.data.magazine:empty:before,.data.studio:empty:before{display:block;padding:1px;color:var(--text-dim);font-size:10px;line-height:15px;white-space:pre}.data.studio:empty:before{content:"Unknown\aStudio"}.data.licensor:empty:before{content:"Unknown\aLicensor"}.data.magazine:empty:before{content:"Unknown\aMagazine"}.data.tags textarea{position:absolute;top:50%;right:4px;z-index:5;width:530px!important;height:64px!important;background:var(--btn-bg);border:1px solid var(--bg-dark);outline-color:var(--accent)!important;margin-top:-32px;box-sizing:border-box;resize:none;color:var(--text)}.data.tags a.edit{position:absolute;top:0;right:0;width:5px!important;height:100%!important;background:var(--edit-btn);text-align:left!important;font-size:0!important;opacity:0;z-index:1}.list-item:hover .data.tags a.edit{opacity:.7}.list-item:hover .data.tags a.edit:hover{width:25px!important;opacity:1}.data.tags a.edit:after{content:"\f040";position:absolute;top:50%;right:0;width:100%;height:20px;margin-top:-10px;color:var(--text);font:0/20px FontAwesome;text-align:center;opacity:0}.data.tags a.edit:hover:after{font-size:14px;opacity:1}.data.airing-finished,.data.airing-started,.data.days,.data.finished,.data.started{position:relative;width:100px;height:14px;overflow:hidden;order:25;color:var(--text);font-size:9px;line-height:14px;text-align:left!important;text-overflow:ellipsis}.data.started{top:-20px}.data.finished{top:0;margin-left:-100px}.data.days{top:20px;margin-left:-100px}.data.airing-started{top:-10px}.data.airing-finished{top:10px;margin-left:-100px}.data.airing-finished:before,.data.airing-started:before,.data.days:before,.data.finished:before,.data.started:before{display:inline-block;width:29px;padding-right:4px;border-right:1px solid var(--text-dim);text-align:right;color:var(--text-dim)}.data.started:before{content:"Start"}.data.finished:before{content:"End"}.data.days:before{content:"Days"}.data.airing-started:before{content:"Aired"}.manga .data.airing-started:before{content:"Issued"}.data.airing-finished:before{content:"to"}.manga .data.airing-finished,.manga .data.airing-started{width:107px}.manga .data.airing-finished{margin-left:-107px}.manga .data.airing-finished:before,.manga .data.airing-started:before{width:36px}.more-info{border:none!important}.more-info .td1{position:relative;padding-top:23px;color:var(--text-dark)}.more-info .td1>div{margin:0}.more-info .td1>div>a{position:absolute;top:0;left:0;border-bottom:2px solid var(--accent)}.list-table .more-info .more-content a{color:var(--text-dark)!important}.list-table .more-info .more-content a:hover{color:var(--accent)!important}footer{position:absolute;bottom:0;left:0;width:100%}#footer-block{min-width:1060px;height:32px;padding:16px 0;background:var(--bg)}#footer-block:before{content:"";position:absolute;left:0;top:-2px;width:100%;min-width:1060px;height:2px;background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,0))}#copyright{padding:0;color:var(--text-head);line-height:16px}#copyright:after{content:"\aList design by Valerio Lyndon.";white-space:pre}#fancybox-overlay{background:#000!important;opacity:.2!important}#fancybox-outer [class^=fancy-]{display:none}#fancybox-outer{background:var(--bg)!important;box-shadow:0 0 32px rgba(0,0,0,.5)}#fancybox-outer #fancybox-close{top:-13px;right:-13px;width:16px;height:16px;padding:2px;background:var(--btn-bg);border:3px solid var(--btn-text-h);border-radius:13px;color:var(--text);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.2)}#fancybox-outer #fancybox-close:after{content:"\f00d";display:block;margin-top:-1px;font:16px/1 FontAwesome}#fancybox-outer #fancybox-close:hover{background:var(--text);color:var(--btn-text-h)}#advanced-options{top:64px;width:910px;padding:32px 0;background:var(--bg);border:none;box-shadow:0 0 32px rgba(0,0,0,.5);color:var(--text-dark)}#advanced-options .advanced-options-button,#advanced-options .advanced-options-header,#advanced-options [class*="-widget"]{width:100%;padding:0;border:none}#advanced-options .filter-widget:last-of-type,#advanced-options .sort-widget:last-of-type{padding-bottom:0}#advanced-options .filter,#advanced-options .sort{padding-bottom:32px}#advanced-options .advanced-options-header{font-size:0;line-height:26px;box-sizing:border-box}#advanced-options .advanced-options-header:before{display:inline-block;width:249px;height:100%;padding-bottom:7.5px;font-size:16px;line-height:26px;text-align:right}#advanced-options .filter .advanced-options-header:before{content:"Filter"}#advanced-options .sort .advanced-options-header:before{content:"Sort"}#advanced-options .advanced-options-header .description{display:inline-block;width:20px;margin:0;color:transparent;white-space:nowrap;vertical-align:top;transition:all .15s ease;pointer-events:none}#advanced-options .advanced-options-header .description:hover{color:inherit;pointer-events:auto}#advanced-options .advanced-options-header .description:before{content:"\f059";display:inline-block;width:20.5px;color:var(--icon);font:14px/26px FontAwesome;text-align:center;pointer-events:auto}#advanced-options .advanced-options-header .description:hover:before{color:var(--text-dim)}#advanced-options [class*="-widget"]{font-size:0;line-height:1;white-space:nowrap}#advanced-options [class*="-widget"]>*{font-size:12px;vertical-align:top}#advanced-options [class*="-widget"] .widget-header{width:250.5px;height:26px;padding:11px 7.5px 11px 0;border-right:2px solid var(--text-dim);margin-right:7.5px;line-height:26px;text-align:right}#advanced-options [class*="-widget"] span{line-height:26px}#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#advanced-options [class*="-widget"] span:not(.widget-header){height:26px;margin:11px 0;border-color:var(--text-dim)!important;border-radius:13px;box-sizing:border-box;color:var(--text-dark);font-size:12px}#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] select{padding:0 7.5px;background:0 0;outline:0}#advanced-options [class*="-widget"] select{padding-right:16px;background:transparent url(https://i.imgur.com/hFijppc.png) no-repeat right center/16px auto}#advanced-options [class*="-widget"] input:focus,#advanced-options [class*="-widget"] option,#advanced-options [class*="-widget"] select:focus{background-color:var(--btn-bg)!important}#advanced-options :disabled,#advanced-options input:disabled+label{opacity:.5;color:var(--text)!important}#advanced-options .title input{width:387.5px!important}#advanced-options .filter-widget[class*="-status"] select{width:197.5px!important}#advanced-options .magazine select,#advanced-options .producer select{width:387.5px!important}#advanced-options .filter-widget[class*="-date"] span:nth-of-type(n+2){display:inline-block;width:40px;padding:0 3px 0 7.5px;border:1px solid var(--text-dim);border-right:none;border-radius:13px 0 0 13px;margin-right:0!important;line-height:24px;font-style:italic}#advanced-options .filter-widget[class*="-date"] span:nth-of-type(3){margin-left:7.5px!important}#advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{border-radius:0;padding:0 16px 0 7.5px;border-left-width:0}#advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{border-right:none}#advanced-options .filter-widget[class*="-date"] .day{border-radius:0 13px 13px 0}#advanced-options .filter-widget[class*="-date"] .year{width:60px!important}#advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month{width:45px!important}#advanced-options .aired-season .year{width:60px!important}#advanced-options .aired-season .season{width:130px!important;margin-left:7.5px}#advanced-options .first select,#advanced-options .second select{width:190px!important}#advanced-options .sort-widget input[type=radio]+label{width:92.25px!important;border-radius:13px;margin-left:7.5px;background:0 0!important;color:var(--text-dark);line-height:14px;transition:all .15s ease}#advanced-options .sort-widget input[type=radio]:not(:disabled)+label:hover{background:var(--btn-bg)!important}#advanced-options .sort-widget input[type=radio]:not(:disabled):checked+label{background:var(--text-dim)!important;border:1px solid var(--text-dim);color:var(--bg)!important}#advanced-options .sort-widget input[type=radio]:not(:checked)+label i{color:var(--icon)}#advanced-options #fancybox-close,#advanced-options .advanced-options-button a{width:90px;height:26px;padding:0;background:var(--btn-bg);border-radius:13px;box-shadow:0 1px 2px rgba(0,0,0,.2);color:var(--text-dark);line-height:26px;text-align:center}#advanced-options #fancybox-close:hover,#advanced-options .advanced-options-button a:hover{background:var(--btn-bg-h);color:var(--btn-text-h)}#advanced-options .advanced-options-button .btn-apply{margin:0 0 0 -106px}#advanced-options .advanced-options-button .btn-clear{margin:0 0 0 8px}#advanced-options #fancybox-close{left:50%;top:auto;bottom:32px;border:none;margin-left:53px}#advanced-options .btn-apply:before{content:"\f00c ";font-family:FontAwesome}#advanced-options .btn-clear:before{content:"\f12d ";font-family:FontAwesome}#advanced-options #fancybox-close:after{content:"\f00d Close";font:12px/26px Arial,FontAwesome,sans-serif} :root { --avatar: url(https://cdn.myanimelist.net/images/characters/15/313197.jpg); } |
BlareyAug 23, 2019 11:00 PM
Aug 23, 2019 11:22 PM
#312
@Blarey Remove the import, then install to the bottom of CSS using the direct link: [Dark Mode]. Since you've installed the main theme directly, mods should also be installed using direct links. |
Aug 23, 2019 11:26 PM
#313
l0n3wanderer said: Yes, there are some ways to reposition them, but I'm not quite sure what you have in mind. Would you want to place them directly to the left of the horizontal list of tags? That could easily be done with the premier, although I do see an issue with the studio as the studio box has highly variable content (sometimes multiple studios) which would prevent me from cleanly inserting it as if it were a tag. When repositioning things such as this, I generally have to give it a fixed width or a safe place to "overflow" into for when it becomes too big, as there's no way for other items to dynamically move around it.Is there a way to make Studio and Premiere Date on the left like tags? I could add tags for each, but that would take a lot of time. |
Aug 23, 2019 11:57 PM
#314
Valerio_Lyndon said: @Blarey Remove the import, then install to the bottom of CSS using the direct link: [Dark Mode]. Since you've installed the main theme directly, mods should also be installed using direct links. Sorry, I'm just bad at this, I got the dark mode working and now I have a problem installing the mods, I'm supposed to follow the direct installation method right? For instance I tried adding the @import code "hover image on circle" to the top below other import codes: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; then I added the source code to the very bottom and nothing happens. Current CSS looks like this: @\import "https://fonts.googleapis.com/css?family=Oswald"; @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; :root{--name:none;--avatar:none;--banner:url(https://serving.photos.photobox.com/75618325d2bb654de42109e492703f367d03d3c81c2ce284af2e75734017cb21101210fb.jpg);--character:url(none);--pbg:#efefef;--bg:#fff;--bg-dark:#ddd;--text:#323232;--text-h:#787878;--text-dim:#bababa;--text-dim-h:#646464;--text-dark:#111;--icon:#323232;--accent:#4065ba;--btn-bg:#ebebeb;--btn-bg-h:#323232;--btn-head-bg-h:#1d439b;--btn-text-h:#fff;--text-head:#9b9b9b;--text-head-h:#787878;--watching:#2db039;--completed:#26448f;--onhold:#f1c83e;--dropped:#a12f31;--plantowatch:#c3c3c3;--cover-bg:#323232;--edit-btn:#d9d9d9;--checkmark:#9696eb}#advanced-options .advanced-options-button a,#fancybox-close,#search-box,#search-box input,#search-box:after,.data.chapter,.data.image .link:after,.data.licensor a,.data.priority,.data.progress,.data.score a,.data.studio a,.data.tags a,.data.tags a.edit:after,.data.volume,.fixed .status-menu:after,.header .header-title:after,.icon-menu svg,.icon-menu.setting,.icon-menu.setting .text,.icon-menu.setting .text a,.icon-menu:after,.icon-menu:before,.list-table .list-table-header .header-title .link.sort,.list-table-header .header-title,.status-button:after,.status-menu-container.fixed .status-menu,.status-menu-container:not(.fixed) .status-menu,.status-menu:after{transition:all .3s ease!important}#advanced-options .advanced-options-header .description,#advanced-options .advanced-options-header .description:before,#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#search-button i,.header-info a,.list-table-data a,.more-info .td1>div>a{transition:all .15s ease!important}.header .header-title,.header-info,.icon-menu,.icon-menu.quick-add:before,.list-menu-float .icon-menu,.list-table>tbody:first-of-type:after,.stats a{display:inline-block;height:26px!important;width:26px!important;background:var(--bg)!important;border-radius:13px;color:var(--text)!important;font:normal 0/26px Arial,Verdana,sans-serif;text-indent:0;text-align:left;white-space:nowrap;vertical-align:top;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:all .3s ease!important}.header .header-title:hover,.icon-menu:hover,.list-menu-float .icon-menu:hover,.stats a:hover{width:100px!important;background:var(--btn-head-bg-h)!important;color:var(--btn-text-h)!important}html{position:relative;min-height:100%}body{padding-bottom:64px;background:var(--pbg) no-repeat center/cover fixed!important}.list-container{position:static;width:100%;background:0 0!important;border:none}.list-block{width:1060px;min-height:initial;margin:64px auto 0}.status-menu-container.fixed+.list-block{margin-top:128px!important}.list-unit{width:100%!important;margin:0}.list-table{border:none!important}a,a:hover{color:var(--accent)}.initialize-tutorial{display:none!important}.cover-block{position:absolute;top:0;left:0;z-index:-5;width:100%;min-width:1060px;height:318px;background:var(--cover-bg) var(--banner) no-repeat center center/cover scroll}.cover-block:before{content:"";position:absolute;bottom:0;left:0;display:block;width:100%;height:50px;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}#cover-image,.btn-list-setting{display:none!important}#list-container #cover-image-container{display:block!important;width:1060px;height:100%;padding:0;background:var(--character) no-repeat right center/contain;margin:0 auto}#cover-image-container:after{content:var(--name);position:absolute;top:55px;left:50%;margin-left:-475px;color:#fff;font:bold 60px/60px Oswald;text-align:left;letter-spacing:15px;text-shadow:1px 4px 7px rgba(0,0,0,.45);text-transform:uppercase;white-space:pre;transform:scale(.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);animation:name-slide 3s 1 .5s backwards}@keyframes name-slide{0%{top:12px;margin-left:-535px;opacity:0;letter-spacing:0;animation-timing-function:ease-out}90%{top:55px;margin-left:-475px}100%{letter-spacing:15px;opacity:1;animation-timing-function:cubic-bezier(0,0,.75,1)}}.header{display:flex;height:36px;margin-top:282px}.header .header-menu{position:static;display:flex;width:auto;height:26px;margin-left:6px;order:2}.btn-menu{height:0;font-size:0!important}.btn-menu #header-menu-button{display:none}.header .header-title{position:static;margin-left:155px;order:1;z-index:1}.header .header-title:before{content:"\f015";display:inline-block;width:26px;background:0 0!important;font-size:14px;font-family:FontAwesome;text-align:center!important}.header .header-title:hover:before{color:var(--btn-text-h)!important}.header .header-title:after{content:"Home";display:inline-block;height:26px!important;width:26px!important;font:14px/26px Arial,Verdana,sans-serif;color:var(--text)}.header .header-title:hover:after{color:var(--btn-text-h)}.header .header-menu .list-menu{position:static;order:1;display:inline-block;height:26px;border:none;background:0 0;box-shadow:none}.header .icon-menu.anime-list,.header .icon-menu.manga-list{position:static;padding:0;margin-right:6px;font-size:0!important;font-weight:400!important}.header .icon-menu.anime-list .text,.header .icon-menu.manga-list .text{position:static!important;font:14px/26px Arial,Verdana,sans-serif;vertical-align:top}.header .header-menu .list-menu .icon-menu svg.icon{position:static;max-width:14px;max-height:14px;padding:6px;fill:var(--text)}.header .header-menu .list-menu .icon-menu:hover svg.icon{fill:var(--btn-text-h)}.header-info{position:static;width:auto!important;padding:0 8px;margin:0!important;font-size:12px;order:2}.header-info a{color:var(--text)!important;text-decoration:none!important}.header-info a:hover{color:var(--text-h)!important}.btn-menu a.username{position:absolute;left:1px;top:-7px;display:block;width:150px;height:150px;background:0 0;border-radius:50%;font-size:0;z-index:36}.btn-menu span.username{display:none!important}.status-menu-container{position:relative;z-index:35!important;width:100%;min-width:1060px;height:64px;background:0 0;border:none!important}.status-menu-container.fixed{z-index:45!important}.status-menu-container:after,.status-menu-container:before{content:"";position:absolute;left:0;z-index:-1;display:block;width:100%}.status-menu-container:before{top:0;height:64px;background:var(--bg)}.status-menu-container:after{top:64px;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,0))}.status-menu{position:relative;display:block!important;width:1060px;padding:0 0 0 173px;margin:0 auto;box-sizing:border-box}.fixed .status-menu{padding:0 0 0 71px}.status-menu:after{content:"";position:absolute;top:-51px;left:-8px;width:150px;height:150px;background:var(--bg-dark) var(--avatar) no-repeat center top/cover;border:8px solid var(--bg);border-radius:50%;opacity:1;box-shadow:0 1px 2px rgba(0,0,0,.2)}.fixed .status-menu:after{top:0;width:48px;height:48px;box-shadow:none}.status-menu .status-button{display:inline-block!important;height:32px;padding:16px 0!important;margin:0 15px!important;color:var(--text-head)!important;font-size:17.6px!important;line-height:30px;white-space:nowrap;font-family:Oswald!important;text-transform:uppercase;letter-spacing:1px}.status-menu .status-button.on{color:var(--text-head-h)!important}.status-button.all_anime:after{background:var(--accent)!important}.status-button.reading:after,.status-button.watching:after{background:var(--watching)!important}.status-button.completed:after{background:var(--completed)!important}.status-button.onhold:after{background:var(--onhold)!important}.status-button.dropped:after{background:var(--dropped)!important}.status-button.plantoread:after,.status-button.plantowatch:after{background:var(--plantowatch)!important}.status-menu-container .search-container{top:19px;right:0}#search-box{padding-right:22px;border:2px solid transparent;border-radius:13px;margin-top:0!important}#search-box.open{width:150px!important;background:var(--btn-bg);border:2px solid var(--bg-dark)}#search-box input{background:0 0;border:none;border-radius:13px;outline:0;color:var(--text)}#search-box.open input{text-indent:7.5px;line-height:20px}.status-menu-container .search-container #search-button{position:absolute;right:0;top:0;width:26px;height:26px;border-radius:13px;margin-top:0;text-align:center}.open~#search-button{pointer-events:none}#search-button i{color:var(--text-head)!important;font-size:18px;line-height:26px}.open~#search-button i{font-size:14px;line-height:24px}#search-box:after{content:"";position:absolute;right:0;top:0;width:0;height:22px;padding-right:22px;background:linear-gradient(to right,var(--btn-bg) 2px,transparent 9.5px,transparent 142.5px,var(--btn-bg) 150px) content-box;border:2px solid transparent;border-radius:13px;pointer-events:none;opacity:0}#search-box.open:after{width:150px;opacity:1}.list-menu-float{position:relative;top:auto;display:block;width:904px;height:0;padding-left:155px;margin:0 auto;border:none;background:0 0;text-align:left;font-size:0;z-index:38}.icon-menu,.list-menu-float form{display:inline-block!important}.list-menu-float .icon-menu{top:74px;margin:0 6px 0 0}.list-menu-float .icon-menu .text{top:0!important;left:26px!important;display:inline-block;width:auto!important;height:26px;color:var(--text)!important;font-size:14px!important;opacity:1!important}.list-menu-float .icon-menu:hover .text{color:var(--btn-text-h)!important}.list-menu-float .icon-menu svg.icon{top:6px!important;left:6px!important;max-width:14px;max-height:14px;fill:var(--text)}.list-menu-float .icon-menu:hover svg.icon{fill:var(--btn-text-h)}[data-owner="1"] .list-menu-float .icon-menu.profile{position:absolute;left:1px;top:-43px;display:block!important;width:150px!important;height:150px!important;background:0 0!important;border-radius:50%;font-size:0;box-shadow:none}[data-owner=""] .icon-menu.profile{background-image:none!important}[data-owner=""] .icon-menu.profile:before{content:"\f007";position:absolute;top:0;left:0;display:block;width:26px;height:26px;font-size:14px;line-height:26px;text-align:center;color:var(--text);font-family:FontAwesome}[data-owner=""] .icon-menu.profile:hover:before{color:var(--btn-text-h)}[data-owner=""] .icon-menu.profile:after{content:"Profile";position:absolute;top:0;left:26px;display:inline-block;height:26px;font-size:14px;color:var(--text)}[data-owner=""] .icon-menu.profile:hover:after{color:var(--btn-text-h)}.icon-menu.quick-add svg{display:none}.icon-menu.quick-add:before{content:"\f067";background:0 0!important;font-size:14px;text-align:center;font-family:FontAwesome;box-shadow:none}.icon-menu.quick-add:hover:before{color:var(--btn-text-h)!important}.icon-menu.setting{overflow:visible}.icon-menu.setting:hover{width:26px!important}.icon-menu.setting .text{top:-2px!important;left:0!important;width:240px!important;height:26px!important;padding:2px 0;overflow:visible;font-size:0!important;opacity:1!important;pointer-events:none;z-index:-1}.icon-menu.setting:hover .text{pointer-events:auto}.icon-menu.setting .text a{position:absolute!important;top:2px!important;left:13px!important;width:0!important;height:26px!important;background:var(--btn-bg-h)!important;border:none!important;border-radius:0 13px 13px 0;overflow:hidden;color:var(--btn-text-h)!important;font:14px/26px Arial,Verdana,sans-serif!important;text-indent:9px;text-align:center;white-space:nowrap;opacity:0!important}.icon-menu.setting:hover .text a{width:120px!important;border-radius:0 13px 13px 0;opacity:1!important}.icon-menu.setting:hover .text .link-list-setting{left:120px!important}.icon-menu.setting .text a:hover{background:var(--btn-head-bg-h)!important}.list-status-title{width:1060px!important;height:64px!important;margin-top:-64px;background:0 0!important}.list-status-title .text{display:none!important}.list-status-title .stats{position:absolute;top:10px;right:32px!important;display:block;width:auto;height:26px!important;border-radius:0 0 26px 0;font-size:0;line-height:13px!important}.stats a{margin:0 0 0 6px!important;font:14px/26px Arial,Verdana,sans-serif}.stats a i{width:26px;text-align:center}.list-stats{position:absolute;top:416px;width:1060px!important;background:0 0!important;color:var(--text)!important;font-weight:700}.list-table>tbody:first-of-type{position:relative;top:-26px;margin-top:-30px;left:1032px;display:block;width:30px;height:30px;background:0 0!important;z-index:39}.list-table>tbody:first-of-type:after{content:"\f0dc";position:absolute;top:0;right:0;margin:2px;font-size:14px;font-family:FontAwesome;text-align:center}.list-table>tbody:first-of-type:hover:after{background:var(--btn-head-bg-h)!important;color:var(--btn-text-h)!important}.list-table-header{position:absolute;top:0;right:15px;display:block;width:auto;height:26px;padding:2px 0;font-size:0;white-space:nowrap;pointer-events:none;z-index:-1}.list-table>tbody:first-of-type:hover .list-table-header{pointer-events:auto}.list-table .list-table-header .header-title{position:relative;display:inline-block;width:auto!important;height:auto;padding:0!important;border:none;background:0 0;font-weight:400}.list-table>tbody:first-of-type:hover .header-title{opacity:1}.list-table .list-table-header .header-title .link.sort{display:block;width:13px;height:26px;background:var(--btn-bg-h);border-radius:13px 0 0 13px;margin-left:-13px;overflow:hidden;box-sizing:border-box;color:var(--btn-text-h)!important;font:11px/26px Verdana,Arial,sans-serif;text-align:center;text-indent:-9px;white-space:normal;opacity:0}.list-table tbody:first-of-type:hover .list-table-header .header-title .link.sort{width:80px;opacity:1}.list-table-header .header-title a.hover_info{display:none!important}.list-table .list-table-header .header-title .link.sort:hover{background:var(--btn-head-bg-h)}.list-table-header .header-title a .sort-icon{position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;color:inherit!important;font-size:10px;line-height:10px}.sort-icon.fa-sort-asc{top:2px}.sort-icon.fa-sort-desc{bottom:2px}.anime tbody:first-of-type:hover .header-title.finished a,.anime tbody:first-of-type:hover .header-title.started a{padding:0 13px}.manga tbody:first-of-type:hover .header-title.finished a,.manga tbody:first-of-type:hover .header-title.started a{width:100px!important}.header-title.title a{font-size:0!important}.header-title.title a:after{content:"Title";font-size:11px}.list-table-header .header-title.tags{display:none!important}.list-item{position:relative;display:block;width:100%;background:var(--bg)!important;border:none;margin-bottom:8px}.list-table-data{position:relative;display:flex;max-width:1060px;min-height:64px;align-items:center;font-size:0}.data{display:block!important;padding:0!important;border:none!important;flex:0 0 auto;color:var(--text);font-size:11px}.list-table .list-table-data .data a{color:var(--text)!important;text-decoration:none!important}.list-table .list-table-data a:not(.edit-disabled):hover{color:var(--text-h)!important}.list-unit .loading-space{margin:14px 0 22px}.list-unit .loading-space #loading-spinner{width:20px;height:20px;margin:0 auto;color:var(--text)}.list-table[data-items="[]"]:after{content:"No entries found. Try another category?";display:block;width:900px;background:var(--bg);border-radius:16px;margin:32px auto;color:var(--text);font:16px/32px Arial,Verdana,sans-serif;text-align:center}[data-owner="1"] .list-table[data-items="[]"]:after{content:"No entries found. Why not add some?"}[data-query*='"s":'] .list-table[data-items="[]"]:after{content:"No entries found. Perhaps your search terms are too restrictive?"}.data.status{position:absolute;top:0;left:0;width:1px!important;height:100%;padding:0!important}.status.reading,.status.watching{background:var(--watching)!important}.status.completed{background:var(--completed)!important}.status.onhold{background:var(--onhold)!important}.status.dropped{background:var(--dropped)!important}.status.plantoread,.status.plantowatch{background:var(--plantowatch)!important}.data.image{width:64px;height:64px;margin:4px 0 4px 8px;order:1}.data.image a{position:relative;display:block!important;border-radius:50%;overflow:hidden}.data.image img{width:64px!important;height:64px!important;border:none!important;object-fit:cover}.data.image a:after{content:"\f14c";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(0,0,0,.5);color:#fff;font:30px/64px FontAwesome;opacity:0}.data.image a:hover:after{opacity:1}.data.number{position:relative;top:-22px;width:20px;height:20px;background:var(--bg);border-radius:10px;margin:0 -28px 0 8px;order:1;line-height:20px;font-weight:700;z-index:1}.list-item:nth-child(n+101) .data.number{text-indent:-7px}.list-item:nth-child(n+1001) .data.number{width:27px;margin-right:-35px}.list-item:nth-child(n+10001) .data.number{width:34px;margin-right:-42px}.data.title{position:relative;width:142px;height:16px;padding:32px 0 0 8px!important;order:12;flex:1 0 auto;line-height:16px}.data.title .link.sort{position:absolute;top:16px;left:8px;display:inline-block;max-width:100%;padding-right:16px;overflow:hidden;box-sizing:border-box;line-height:16px;white-space:nowrap;text-overflow:ellipsis}.list-table .list-table-data .title .link:hover{color:var(--accent)!important}.content-status,.rereading,.rewatching{color:var(--text-dim)!important;font-size:10px!important}.content-status:before,.rereading:before,.rewatching:before{content:"["}.content-status:after,.rereading:after,.rewatching:after{content:"] - "}.add-edit-more{display:inline;float:none!important;color:var(--text-dim)}.list-table .list-table-data .title .add-edit-more a{color:var(--text-dim)!important}.list-table .list-table-data .title .add-edit-more a:hover{color:var(--text-dim-h)!important}.icon-watch{display:none!important}.data.type{position:relative;top:-16px;z-index:1;width:92px;height:16px;padding-left:8px!important;margin-right:-100px;order:11;text-align:left!important;color:var(--text-dim);line-height:16px;font-size:10px}.data.score{position:relative;width:26px;height:26px;order:13}.data.score a{display:block;width:26px;height:26px;background:var(--btn-bg);border-radius:13px;margin:0 0 0 auto;line-height:26px}.list-table .list-table-data .score a:not(.edit-disabled):hover{background:var(--btn-bg-h);color:var(--btn-text-h)!important}.data.score select{position:absolute;top:0;right:0;display:block;width:40px;height:26px;padding:0 9px;background:var(--btn-bg-h) url(https://i.imgur.com/KF8oOyC.png) no-repeat 20px center/16px auto;border:none;border-radius:13px;box-shadow:none!important;color:var(--btn-text-h);font:bold 1.1em/26px Verdana,Arial,sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}@-moz-document url-prefix(){.data.score select{padding:0 16px 0 0;text-align:center}}.data.score select:focus{outline:0!important;box-shadow:0 2px 2px rgba(0,0,0,.3)}.data.chapter,.data.progress,.data.volume{width:92px;order:15}.data.chapter{margin-top:-34px}.data.volume{margin:34px 0 0 -92px}.data.chapter span,.data.progress span,.data.volume span{color:var(--text)}.data.progress:before{content:"Progress:";color:var(--text-dim)}.data.chapter:before{content:"Chapters:";color:var(--text-dim)}.data.volume:before{content:"Volumes:";color:var(--text-dim)}.data.chapter span:only-of-type:after,.data.progress span:only-of-type:after,.data.volume span:only-of-type:after{content:" \f058";position:relative;top:1px;color:var(--checkmark);font-family:FontAwesome;font-size:13px}.data.chapter input,.data.progress input,.data.volume input{height:15px;padding:0 1px;background:var(--btn-bg);border:1px solid var(--bg-dark);outline-color:var(--accent)!important;box-sizing:border-box;color:var(--text-dark);font:11px Verdana,Arial,sans-serif}.data.priority{position:relative;width:92px;height:74px;background:var(--bg);margin-right:-92px;order:14;color:var(--text);line-height:74px;opacity:1;pointer-events:none;z-index:1}.status:not(.plantowatch):not(.plantoread)~.data.priority{display:none!important}.list-item:hover .data.priority{opacity:0}.data.priority:before{content:"\f0a2";font-family:FontAwesome}.data.magazine,.data.rated,.data.retail,.data.season,.data.storage{margin-right:4px;order:19;flex-shrink:1}.data.rated{width:40px}.data.magazine{width:90px}.data.retail,.data.storage{width:72px}.data.season{width:92px;order:20}.data.magazine:before,.data.rated:before,.data.retail:before,.data.season:before,.data.storage:before{display:block;color:var(--text-dim)}.data.rated:before{content:"Rated:"}.data.magazine:before{content:"Magazine:"}.data.retail:before,.data.storage:before{content:"Storage:"}.data.season:before{content:"Premiered:"}.data.season:empty:after{content:"Unknown";display:block;color:var(--text-dim)}.data.licensor,.data.studio,.data.tags{width:120px;padding:3px 0!important;margin-right:8px;order:21;flex-shrink:1}.data.licensor span,.data.studio span,.data.tags span{display:block;padding:1px 0;font-size:0!important;line-height:0}.data.licensor a,.data.studio a,.data.tags a:not(.edit){display:block;padding:1px;background:var(--btn-bg);border-radius:8.5px;color:var(--text)!important;font-size:11px!important;line-height:15px}.list-table .list-table-data .licensor span a:hover,.list-table .list-table-data .studio span a:hover,.list-table .list-table-data .tags span a:hover{background:var(--btn-bg-h);color:var(--btn-text-h)!important}.data.licensor:empty:before,.data.magazine:empty:before,.data.studio:empty:before{display:block;padding:1px;color:var(--text-dim);font-size:10px;line-height:15px;white-space:pre}.data.studio:empty:before{content:"Unknown\aStudio"}.data.licensor:empty:before{content:"Unknown\aLicensor"}.data.magazine:empty:before{content:"Unknown\aMagazine"}.data.tags textarea{position:absolute;top:50%;right:4px;z-index:5;width:530px!important;height:64px!important;background:var(--btn-bg);border:1px solid var(--bg-dark);outline-color:var(--accent)!important;margin-top:-32px;box-sizing:border-box;resize:none;color:var(--text)}.data.tags a.edit{position:absolute;top:0;right:0;width:5px!important;height:100%!important;background:var(--edit-btn);text-align:left!important;font-size:0!important;opacity:0;z-index:1}.list-item:hover .data.tags a.edit{opacity:.7}.list-item:hover .data.tags a.edit:hover{width:25px!important;opacity:1}.data.tags a.edit:after{content:"\f040";position:absolute;top:50%;right:0;width:100%;height:20px;margin-top:-10px;color:var(--text);font:0/20px FontAwesome;text-align:center;opacity:0}.data.tags a.edit:hover:after{font-size:14px;opacity:1}.data.airing-finished,.data.airing-started,.data.days,.data.finished,.data.started{position:relative;width:100px;height:14px;overflow:hidden;order:25;color:var(--text);font-size:9px;line-height:14px;text-align:left!important;text-overflow:ellipsis}.data.started{top:-20px}.data.finished{top:0;margin-left:-100px}.data.days{top:20px;margin-left:-100px}.data.airing-started{top:-10px}.data.airing-finished{top:10px;margin-left:-100px}.data.airing-finished:before,.data.airing-started:before,.data.days:before,.data.finished:before,.data.started:before{display:inline-block;width:29px;padding-right:4px;border-right:1px solid var(--text-dim);text-align:right;color:var(--text-dim)}.data.started:before{content:"Start"}.data.finished:before{content:"End"}.data.days:before{content:"Days"}.data.airing-started:before{content:"Aired"}.manga .data.airing-started:before{content:"Issued"}.data.airing-finished:before{content:"to"}.manga .data.airing-finished,.manga .data.airing-started{width:107px}.manga .data.airing-finished{margin-left:-107px}.manga .data.airing-finished:before,.manga .data.airing-started:before{width:36px}.more-info{border:none!important}.more-info .td1{position:relative;padding-top:23px;color:var(--text-dark)}.more-info .td1>div{margin:0}.more-info .td1>div>a{position:absolute;top:0;left:0;border-bottom:2px solid var(--accent)}.list-table .more-info .more-content a{color:var(--text-dark)!important}.list-table .more-info .more-content a:hover{color:var(--accent)!important}footer{position:absolute;bottom:0;left:0;width:100%}#footer-block{min-width:1060px;height:32px;padding:16px 0;background:var(--bg)}#footer-block:before{content:"";position:absolute;left:0;top:-2px;width:100%;min-width:1060px;height:2px;background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,0))}#copyright{padding:0;color:var(--text-head);line-height:16px}#copyright:after{content:"\aList design by Valerio Lyndon.";white-space:pre}#fancybox-overlay{background:#000!important;opacity:.2!important}#fancybox-outer [class^=fancy-]{display:none}#fancybox-outer{background:var(--bg)!important;box-shadow:0 0 32px rgba(0,0,0,.5)}#fancybox-outer #fancybox-close{top:-13px;right:-13px;width:16px;height:16px;padding:2px;background:var(--btn-bg);border:3px solid var(--btn-text-h);border-radius:13px;color:var(--text);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.2)}#fancybox-outer #fancybox-close:after{content:"\f00d";display:block;margin-top:-1px;font:16px/1 FontAwesome}#fancybox-outer #fancybox-close:hover{background:var(--text);color:var(--btn-text-h)}#advanced-options{top:64px;width:910px;padding:32px 0;background:var(--bg);border:none;box-shadow:0 0 32px rgba(0,0,0,.5);color:var(--text-dark)}#advanced-options .advanced-options-button,#advanced-options .advanced-options-header,#advanced-options [class*="-widget"]{width:100%;padding:0;border:none}#advanced-options .filter-widget:last-of-type,#advanced-options .sort-widget:last-of-type{padding-bottom:0}#advanced-options .filter,#advanced-options .sort{padding-bottom:32px}#advanced-options .advanced-options-header{font-size:0;line-height:26px;box-sizing:border-box}#advanced-options .advanced-options-header:before{display:inline-block;width:249px;height:100%;padding-bottom:7.5px;font-size:16px;line-height:26px;text-align:right}#advanced-options .filter .advanced-options-header:before{content:"Filter"}#advanced-options .sort .advanced-options-header:before{content:"Sort"}#advanced-options .advanced-options-header .description{display:inline-block;width:20px;margin:0;color:transparent;white-space:nowrap;vertical-align:top;transition:all .15s ease;pointer-events:none}#advanced-options .advanced-options-header .description:hover{color:inherit;pointer-events:auto}#advanced-options .advanced-options-header .description:before{content:"\f059";display:inline-block;width:20.5px;color:var(--icon);font:14px/26px FontAwesome;text-align:center;pointer-events:auto}#advanced-options .advanced-options-header .description:hover:before{color:var(--text-dim)}#advanced-options [class*="-widget"]{font-size:0;line-height:1;white-space:nowrap}#advanced-options [class*="-widget"]>*{font-size:12px;vertical-align:top}#advanced-options [class*="-widget"] .widget-header{width:250.5px;height:26px;padding:11px 7.5px 11px 0;border-right:2px solid var(--text-dim);margin-right:7.5px;line-height:26px;text-align:right}#advanced-options [class*="-widget"] span{line-height:26px}#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#advanced-options [class*="-widget"] span:not(.widget-header){height:26px;margin:11px 0;border-color:var(--text-dim)!important;border-radius:13px;box-sizing:border-box;color:var(--text-dark);font-size:12px}#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] select{padding:0 7.5px;background:0 0;outline:0}#advanced-options [class*="-widget"] select{padding-right:16px;background:transparent url(https://i.imgur.com/hFijppc.png) no-repeat right center/16px auto}#advanced-options [class*="-widget"] input:focus,#advanced-options [class*="-widget"] option,#advanced-options [class*="-widget"] select:focus{background-color:var(--btn-bg)!important}#advanced-options :disabled,#advanced-options input:disabled+label{opacity:.5;color:var(--text)!important}#advanced-options .title input{width:387.5px!important}#advanced-options .filter-widget[class*="-status"] select{width:197.5px!important}#advanced-options .magazine select,#advanced-options .producer select{width:387.5px!important}#advanced-options .filter-widget[class*="-date"] span:nth-of-type(n+2){display:inline-block;width:40px;padding:0 3px 0 7.5px;border:1px solid var(--text-dim);border-right:none;border-radius:13px 0 0 13px;margin-right:0!important;line-height:24px;font-style:italic}#advanced-options .filter-widget[class*="-date"] span:nth-of-type(3){margin-left:7.5px!important}#advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{border-radius:0;padding:0 16px 0 7.5px;border-left-width:0}#advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{border-right:none}#advanced-options .filter-widget[class*="-date"] .day{border-radius:0 13px 13px 0}#advanced-options .filter-widget[class*="-date"] .year{width:60px!important}#advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month{width:45px!important}#advanced-options .aired-season .year{width:60px!important}#advanced-options .aired-season .season{width:130px!important;margin-left:7.5px}#advanced-options .first select,#advanced-options .second select{width:190px!important}#advanced-options .sort-widget input[type=radio]+label{width:92.25px!important;border-radius:13px;margin-left:7.5px;background:0 0!important;color:var(--text-dark);line-height:14px;transition:all .15s ease}#advanced-options .sort-widget input[type=radio]:not(:disabled)+label:hover{background:var(--btn-bg)!important}#advanced-options .sort-widget input[type=radio]:not(:disabled):checked+label{background:var(--text-dim)!important;border:1px solid var(--text-dim);color:var(--bg)!important}#advanced-options .sort-widget input[type=radio]:not(:checked)+label i{color:var(--icon)}#advanced-options #fancybox-close,#advanced-options .advanced-options-button a{width:90px;height:26px;padding:0;background:var(--btn-bg);border-radius:13px;box-shadow:0 1px 2px rgba(0,0,0,.2);color:var(--text-dark);line-height:26px;text-align:center}#advanced-options #fancybox-close:hover,#advanced-options .advanced-options-button a:hover{background:var(--btn-bg-h);color:var(--btn-text-h)}#advanced-options .advanced-options-button .btn-apply{margin:0 0 0 -106px}#advanced-options .advanced-options-button .btn-clear{margin:0 0 0 8px}#advanced-options #fancybox-close{left:50%;top:auto;bottom:32px;border:none;margin-left:53px}#advanced-options .btn-apply:before{content:"\f00c ";font-family:FontAwesome}#advanced-options .btn-clear:before{content:"\f12d ";font-family:FontAwesome}#advanced-options #fancybox-close:after{content:"\f00d Close";font:12px/26px Arial,FontAwesome,sans-serif} :root { --avatar: url(https://cdn.myanimelist.net/images/characters/15/313197.jpg); }/* "Clarity" by Valerio Lyndon / Dark Mode Modification / Revision 3.2 */ :root{--banner:url(https://serving.photos.photobox.com/75618325d2bb654de42109e492703f367d03d3c81c2ce284af2e75734017cb21101210fb.jpg);--pbg:#161616;--bg:#212121;--bg-dark:#444;--text:#ababab;--text-h:#416abe;--text-dim:#777;--text-dim-h:#999;--text-dark:#ababab;--icon:#959595;--accent:#416abe;--btn-bg:#191919;--btn-bg-h:#ababab;--btn-head-bg-h:#416abe;--btn-text-h:#212121;--text-head:#9b9b9b;--text-head-h:#ababab;--cover-bg:#090909;--edit-btn:#323232;--checkmark:#416abe}.cover-block:before{background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))}#cover-image-container:after{color:#f6f5ff;text-shadow:2px 2px 8px #e4bef4}.status-menu-container:after{background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0))}#footer-block:before{background:linear-gradient(to top,rgba(0,0,0,.3),rgba(0,0,0,0))}#advanced-options #fancybox-close,#advanced-options .advanced-options-button a,#fancybox-outer #fancybox-close,.header .header-title,.header-info,.icon-menu,.list-menu-float .icon-menu,.list-table>tbody:first-of-type:after,.stats a,.status-menu:after{box-shadow:0 1px 2px rgba(0,0,0,.8)}.data.score select{background-image:url(https://i.imgur.com/hFijppc.png)}#fancybox-overlay{opacity:.35!important}#advanced-options,#fancybox-outer{box-shadow:0 0 32px rgba(0,0,0,.75)}#fancybox-frame{-webkit-filter:invert(87.8%) hue-rotate(197deg);filter:invert(87.8%) hue-rotate(197deg)}#advanced-options [class*="-widget"] select{background-image:url(}/* "Clarity" Modification by Valerio Lyndon / Hover Image on Circle / Revision 0.3 */ .data.image a{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:var(--bg-dark) no-repeat center/cover;border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.data.image:hover a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%} |
BlareyAug 24, 2019 12:00 AM
Aug 24, 2019 12:22 AM
#315
@Blarey Looks like you accidentally deleted part of the dark mode code while pasting in the image hover code. You can see here that some of the code got removed somehow, causing an opening bracket to have no matching closing bracket, which caused the code to break. Here's a working version with the main theme, dark mode, image hover, and your avatar. I couldn't see if you had changed the banner so I didn't touch that. [Code] |
Aug 24, 2019 12:49 AM
#316
Valerio_Lyndon said: @Blarey Looks like you accidentally deleted part of the dark mode code while pasting in the image hover code. You can see here that some of the code got removed somehow, causing an opening bracket to have no matching closing bracket, which caused the code to break. Here's a working version with the main theme, dark mode, image hover, and your avatar. I couldn't see if you had changed the banner so I didn't touch that. [Code] Thanks so much, no problems adding other mods either. |
Aug 24, 2019 2:11 AM
#317
@Valerio_Lyndon 1) in practice i have to add an anime and wait? 2) yes i wish they share the same style (i remind you that you have to do it in edit and more those next to aering] 3) i meant that the anime are divided and the words currently watching etc. appear with the same color as the section 4) could you move [airing] next to the title of the anime? 5) could you raise Progress higher and move the edit and more buttons (those that are next to [ airing ] currently) below? 6) can you remove [ and ] next to airing? 7) can you insert the type of anime (tv, movies, special, ona, ova) to its original position (after the score) ? 8) how can i change the name of the edit button (the one next to airing)? 9) how can i make the anime type (tv, movies, ona, ova and special), the edit button next to airing, more, aired,to and airing change color based on the color of the section? 10) how can i change name to aired and to? 11) you can make sure that if a title of an anime is too long instead of ... the title continues below? obviously the things below go down below the title if you can't make the changes i said in case you need it, i managed to adapt a new style for [airing] under an image and code (i want to clarify that i took it from another theme i didn't do it myself) image code /* Special effect [ Airing ] */ .content-status, .rereading, .rewatching { text-shadow: 0 0 2px #e65c00, 0 0 1px #e65c00, 1px 1px 7px #e65c00, 0 0 0 #e65c00 !important; color: #fff !important; } |
TaduinAug 24, 2019 12:15 PM
Aug 24, 2019 9:15 AM
#318
Hey, I'm using your theme that's a mash between Brink and Clarity (which side note I think is beautiful and you should make more accessible, I found it by chance in a forum). The only problem is that when I try to add name text in the format :root { --name: "John\a Doe"; }, it doesn't work. The text doesn't show up and also, the profile image starts glitching a little bit sometimes. Is there a way to fix this and add the text? |
Aug 24, 2019 10:33 AM
#319
Valerio_Lyndon said: l0n3wanderer said: Yes, there are some ways to reposition them, but I'm not quite sure what you have in mind. Would you want to place them directly to the left of the horizontal list of tags? That could easily be done with the premier, although I do see an issue with the studio as the studio box has highly variable content (sometimes multiple studios) which would prevent me from cleanly inserting it as if it were a tag. When repositioning things such as this, I generally have to give it a fixed width or a safe place to "overflow" into for when it becomes too big, as there's no way for other items to dynamically move around it.Is there a way to make Studio and Premiere Date on the left like tags? I could add tags for each, but that would take a lot of time. I don't use tags at all. I was wondering if I could get the Premiered and Studio where the horizontal tags would go. I could put the Premiered date and Studio as tags and it works with them being horizontal, but I would have to add a tag for each for each anime on my list. Pretty much just trying to make them look like the horizontal tags. Don't know if it is doable, thanks though! Trying to get it to look like this, pretty much. https://i.imgur.com/VdKk8cm.jpg |
removed-userAug 24, 2019 10:37 AM
Aug 24, 2019 8:59 PM
#320
Taduin said: That is one of the unavoidable complications. The other is that it will not appear on lists that are sorted, or "ordered", or anything similar. The headers will only appear on the default, unsorted, completely untouched "All Anime" page.1) in practice i have to add an anime and wait? Taduin said: 2) yes i wish they share the same style (i remind you that you have to do it in edit and more those next to aering] .list-table .list-table-data .title .add-edit-more a { background: var(--edit-btn); color: #23B230 !important; } .list-table .list-table-data .tags .edit { width: 100% !important; background: var(--btn-bg); margin-left: 0; color: var(--text) !important; } .list-item:hover .data.tags a.edit:hover { width: 100% !important; } Taduin said: They should already do this.3) i meant that the anime are divided and the words currently watching etc. appear with the same color as the section Unless you meant something like this?.. /* ====================== Category-Coloured Tags */ .data.status.watching ~ .tags a, .data.status.reading ~ .tags a { color: var(--watching) !important; } .data.status.completed ~ .tags a { color: var(--completed) !important; } .data.status.onhold ~ .tags a { color: var(--onhold) !important; } .data.status.dropped ~ .tags a { color: var(--dropped) !important; } .data.status.plantowatch ~ .tags a, .data.status.plantoread ~ .tags a { color: var(--plantowatch) !important; } Taduin said: 4) could you move [airing] next to the title of the anime? Taduin said: 5) could you raise Progress higher and move the edit and more buttons (those that are next to [ airing ] currently) below? Taduin said: 11) you can make sure that if a title of an anime is too long instead of ... the title continues below? obviously the things below go down below the title if you can't make the changes i said Taduin said: 7) can you insert the type of anime (tv, movies, special, ona, ova) to its original position (after the score) ? /* ====================== Reposition Content Status Reposition Add-Edit-More Add Title Overflow */ .data.title { padding: 3px 8px !important; height: auto; } .data.title::after { content: none; } .data.title > * { margin-right: 3px; } .data.title .link.sort { position: static; display: inline; padding-right: 0; white-space: normal; } .list-table .list-table-data .data.title .add-edit-more { position: absolute; right: -118px; top: calc(50% + 19.5px - 7.5px); width: 92px; height: 15px; margin: 0; order: 2; text-align: center; } .data.progress { padding-bottom: 19.5px !important; } /* ================================ Revert Type to Original Location */ .data.type { position: static; width: 72px; padding: 0 !important; margin-right: 3px; order: 16; text-align: center !important; } Taduin said: 6) can you remove [ and ] next to airing? /* Remove Content Status Brackets */ .content-status::before, .rereading::before, .rewatching::before, .content-status::after, .rereading::after, .rewatching::after { content: none; } Taduin said: To change the name of the edit button, look at the top of this code. Change the "Edit" to anything you wish. Make sure to retain the quotes. Do not delete them, only change the text inbetween.8) how can i change the name of the edit button (the one next to airing)? /* ======================== Custom Edit Button Label */ .list-table .list-table-data .title .add-edit-more .edit a { font-size: 0 !important; line-height: 0; } .list-table .list-table-data .title .add-edit-more .edit a::before { /* Modify Label Here */ content: "Edit"; font-size: 11px !important; line-height: 15px; } Taduin said: 9) how can i make the anime type (tv, movies, ona, ova and special), the edit button next to airing, more, aired,to and airing change color based on the color of the section? /* ========================= Category-Coloured Text v0 */ .list-item { --category-colour: #ababab; } .watching ~ .data, .reading ~ .data { --category-colour: var(--watching); } .completed ~ .data { --category-colour: var(--completed); } .onhold ~ .data { --category-colour: var(--onhold); } .dropped ~ .data { --category-colour: var(--dropped); } .plantowatch ~ .data, .plantoread ~ .data { --category-colour: var(--plantowatch); } .content-status, .rereading, .rewatching { text-shadow: var(--category-colour) 0px 0px 2px, var(--category-colour) 0px 0px 1px, var(--category-colour) 1px 1px 7px, var(--category-colour) 0px 0px 0px !important; } .data.type { color: var(--category-colour); } .data.airing-finished::before, .data.airing-started::before, .data.season::before { color: var(--category-colour); border-right-color: var(--category-colour); } .list-table .list-table-data .title .add-edit-more a { color: var(--category-colour) !important; } /* ========================= Category-Coloured Text v0 */ .list-item { --category-colour: #ababab; } .watching ~ .data, .reading ~ .data { --category-colour: var(--watching); } .completed ~ .data { --category-colour: var(--completed); } .onhold ~ .data { --category-colour: var(--onhold); } .dropped ~ .data { --category-colour: var(--dropped); } .plantowatch ~ .data, .plantoread ~ .data { --category-colour: var(--plantowatch); } .data { --text-dim: var(--category-colour); } .content-status, .rereading, .rewatching { text-shadow: var(--category-colour) 0px 0px 2px, var(--category-colour) 0px 0px 1px, var(--category-colour) 1px 1px 7px, var(--category-colour) 0px 0px 0px !important; } .list-table .list-table-data .title .add-edit-more a { color: var(--category-colour) !important; } Taduin said: Change the text within the quote marks. If overflow or breakage occurs, raise the "40px" to something else. For instance, "50px". If you intend on extremely long label names, more code may be required.10) how can i change name to aired and to? /* ======================= Change Airing/To Labels */ .data.airing-finished::before, .data.airing-started::before, .data.season::before { /* Raise this number if overflow occurs */ width: 40px; } .data.airing-started::before { /* Started */ content: "Aired"; } .data.airing-finished::before { /* Finished */ content: "to"; } |
Aug 24, 2019 8:59 PM
#321
l0n3wanderer said: Ah, I see. How is this?Valerio_Lyndon said: I don't use tags at all. I was wondering if I could get the Premiered and Studio where the horizontal tags would go.What do you have in mind? … Trying to get it to look like this, pretty much. https://i.imgur.com/VdKk8cm.jpg It's in the opposite order from the image you sent, but that's so that the theme can safely display multiple studios, as I previously mentioned. And although you said you don't use tags, it's still worth mentioning: this won't work with horizontal tags, they'll overlap each other. Add to the bottom of your CSS. /* =========================== Horizontal Premier & Studio */ .list-table-data { padding-bottom: 11px; } /* Season */ .data.season { position: absolute; left: 80px; bottom: 4px; } .data.season::before { content: none; } .data.season a { display: block; padding: 1px; background: var(--btn-bg); border-radius: 8.5px; color: var(--text) !important; font-size: 11px !important; line-height: 15px; } .list-table-data .data.season a:hover { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } /* Studio */ .data.studio { position: absolute; bottom: 4px; left: 176px; width: auto; padding: 0 !important; overflow: hidden; max-width: 980px; white-space: nowrap; } .data.studio span { display: inline-block; padding: 0; } .data.studio span a { padding: 1px 8px !important; margin: 0 4px 0 0; white-space: nowrap; } |
Aug 24, 2019 8:59 PM
#322
CameronMZ said: I cannot reproduce this behaviour. Can you share the code while it is in a buggy state (as in, after you've added the name and glitches have begun)? You will probably have to use an external website such as Pastebin, as MAL forum posts have a character limit. It might also help to know what browser and browser version you are using.Hey, I'm using your theme that's a mash between Brink and Clarity (which side note I think is beautiful and you should make more accessible, I found it by chance in a forum). The only problem is that when I try to add name text in the format :root { --name: "John\a Doe"; }, it doesn't work. The text doesn't show up and also, the profile image starts glitching a little bit sometimes. Is there a way to fix this and add the text? If you're using Firefox, it would also be useful to know whether you have WebRender on or not. To check this, put "about:support" into your URL bar. Then, search for the word "Compositing" (you can use CTRL+F to bring up the Find menu). It should bring you here: Just let me know what it says to the right of "Compositing". |
Aug 25, 2019 1:18 AM
#323
@Valerio_Lyndon It's all right but i would like something in the code / * ========================= Category-Colored Text v0 * / you have to add progress i managed to add progress by myself, i used the inspect function of chrome and managed to insert it u.u edit: can you add a button equal to studio a unknown studio? I removed that changed the color to the tags and the colors to edit and more button because it bothered my eyes edit 2: do you know that when you go over the tags, in the edit buttons next to more, more,score, above the studio and the anime season (eg summer 2019) the button background turns white? can you make them change color based on the section? edit 3: can you add that button to unknown season? as long as it changes the color of the hover according to the section also how can i change its name? edit 4: do you know where i can change the number of episodes seen (i mean the one on the left of the +) and the + to increase by one? if you pass over it turns blue, can you change color based on the section? edit 5: can you move the type of the anime (ie tv, ova, ona, special and movie) after the score? if i don't ask too much you can make sure that the score is raised a little and below is inserted type (tv, special, ona, ova and movie) of the anime? so if i like it more i use this |
TaduinAug 25, 2019 5:44 AM
Aug 25, 2019 6:16 AM
#324
Valerio_Lyndon said: CameronMZ said: I cannot reproduce this behaviour. Can you share the code while it is in a buggy state (as in, after you've added the name and glitches have begun)? You will probably have to use an external website such as Pastebin, as MAL forum posts have a character limit. It might also help to know what browser and browser version you are using.Hey, I'm using your theme that's a mash between Brink and Clarity (which side note I think is beautiful and you should make more accessible, I found it by chance in a forum). The only problem is that when I try to add name text in the format :root { --name: "John\a Doe"; }, it doesn't work. The text doesn't show up and also, the profile image starts glitching a little bit sometimes. Is there a way to fix this and add the text? If you're using Firefox, it would also be useful to know whether you have WebRender on or not. To check this, put "about:support" into your URL bar. Then, search for the word "Compositing" (you can use CTRL+F to bring up the Find menu). It should bring you here: Just let me know what it says to the right of "Compositing". https://pastebin.com/5hDmS6rJ |
Aug 26, 2019 1:41 AM
#325
CameronMZ said: Alright, well after I tested on Firefox, Chrome, and Edge without issues, I borrowed a Mac and used Safari and finally managed to reproduce the problem, so I assume you're using Safari. I do not use Safari, nor a Mac, so this explains why I never noticed the issue as I don't test for it. I was not able to fix the issue while perfectly retaining the original visuals, but it looks close enough. First, try adding this code to the bottom of your CSS:Valerio_Lyndon said: https://pastebin.com/5hDmS6rJCameronMZ said: Hey, I'm using your theme that's a mash between Brink and Clarity (which side note I think is beautiful and you should make more accessible, I found it by chance in a forum). The only problem is that when I try to add name text in the format :root { --name: "John\a Doe"; }, it doesn't work. The text doesn't show up and also, the profile image starts glitching a little bit sometimes. Is there a way to fix this and add the text? If you're using Firefox, it would also be useful to know whether you have WebRender on or not. To check this, put "about:support" into your URL bar. Then, search for the word "Compositing" (you can use CTRL+F to bring up the Find menu). It should bring you here: Just let me know what it says to the right of "Compositing". #cover-image-container::after { transform: scale(0.9) perspective(350px) rotateZ(-3deg); } #cover-image-container::after { transform: none; } |
Valerio_LyndonAug 26, 2019 1:55 AM
Aug 26, 2019 2:55 AM
#326
Taduin said: It was in the second option I provided. But it's good that you managed to fix it.you have to add progress i managed to add progress by myself, i used the inspect function of chrome and managed to insert it u.u Taduin said: do you know that when you go over the tags, in the edit buttons next to more, more,score, above the studio and the anime season (eg summer 2019) the button background turns white? can you make them change color based on the section? /* ============================== Category-Coloured List Buttons */ .data { --btn-bg-h: var(--category-colour); } Taduin said: can you add a button equal to studio a unknown studio? Taduin said: Is this what you mean?can you add that button to unknown season? as long as it changes the color of the hover according to the section also how can i change its name? /* ============================== Change Empty Studio Appearance */ .data.licensor:empty::before, .data.magazine:empty::before, .data.studio:empty::before { display: block; padding: 1px; background: var(--btn-bg); border-radius: 8.5px; color: var(--text) !important; font-size: 11px !important; line-height: 15px; } .data.studio:empty:before { content: "Unknown Studio"; } .data.licensor:empty:before { content: "Unknown Licensor"; } .data.magazine:empty:before { content: "Unknown Magazine"; } /* ============================== Change Empty Studio Appearance */ .data.licensor:empty::before, .data.magazine:empty::before, .data.studio:empty::before { display: block; padding: 1px; background: var(--btn-bg); border-radius: 8.5px; color: var(--text) !important; font-size: 11px !important; line-height: 15px; transition: all 0.3s ease; } .data.studio:empty:before { content: "Unknown Studio"; } .data.licensor:empty:before { content: "Unknown Licensor"; } .data.magazine:empty:before { content: "Unknown Magazine"; } .data.licensor:empty:hover::before, .data.magazine:empty:hover::before, .data.studio:empty:hover::before { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } These will make it look like a button. Appearance-wise it will be the same, it will not add any new functionality. It will not be clickable. Taduin said: do you know where i can change the number of episodes seen (i mean the one on the left of the +) and the + to increase by one? if you pass over it turns blue, can you change color based on the section? /* ================================= List Hover Text - Category Colour */ .data { --text-h: var(--category-colour); } Taduin said: can you move the type of the anime (ie tv, ova, ona, special and movie) after the score? if i don't ask too much you can make sure that the score is raised a little and below is inserted type (tv, special, ona, ova and movie) of the anime? so if i like it more i use this /* ========================== Move Type Underneath Score */ .data.type { order: 12; margin-top: 26px; margin-left: -13px; margin-right: -49px; pointer-events: none; } .data.score { padding-bottom: 16px !important; margin-right: 10px; } /* Patch for Add-Edit-More Reposition */ .list-table .list-table-data .data.title .add-edit-more { right: -138px; } |
Aug 26, 2019 4:33 AM
#327
@Valerio_Lyndon First of all thank you very much, we have practically finished but unfortunately the unknow season does not work, i show you a screen also it does not even have the button strangely. Without this i have finished, thank you for helping me to make this perfect theme. edit: the code should be this .data.season:empty:after ,i tried to insert it but the text does not become central and the hover does not come out.Besides you could insert that if i try with ctrl + f unknown the text is displayed? a unknown is not displayed request 2: you can make the pointer-events: none; do you disable the anime type (tv, ona, ova, special, movie),progress, air and to? request 3: can you do that also the total number of anime episodes and - for those who do not know the date have the colored hover according to the category? also the start and end date of the anime if you can request 4: can you also make the hover of the home buttons, quick add, anime list, manga list, history, export, logout, style settings and list settings change according to the section? |
TaduinAug 26, 2019 8:12 AM
Aug 26, 2019 6:56 AM
#328
Valerio_Lyndon said: CameronMZ said: Alright, well after I tested on Firefox, Chrome, and Edge without issues, I borrowed a Mac and used Safari and finally managed to reproduce the problem, so I assume you're using Safari. I do not use Safari, nor a Mac, so this explains why I never noticed the issue as I don't test for it. I was not able to fix the issue while perfectly retaining the original visuals, but it looks close enough. First, try adding this code to the bottom of your CSS:Valerio_Lyndon said: CameronMZ said: I cannot reproduce this behaviour. Can you share the code while it is in a buggy state (as in, after you've added the name and glitches have begun)? You will probably have to use an external website such as Pastebin, as MAL forum posts have a character limit. It might also help to know what browser and browser version you are using.Hey, I'm using your theme that's a mash between Brink and Clarity (which side note I think is beautiful and you should make more accessible, I found it by chance in a forum). The only problem is that when I try to add name text in the format :root { --name: "John\a Doe"; }, it doesn't work. The text doesn't show up and also, the profile image starts glitching a little bit sometimes. Is there a way to fix this and add the text? If you're using Firefox, it would also be useful to know whether you have WebRender on or not. To check this, put "about:support" into your URL bar. Then, search for the word "Compositing" (you can use CTRL+F to bring up the Find menu). It should bring you here: Just let me know what it says to the right of "Compositing". #cover-image-container::after { transform: scale(0.9) perspective(350px) rotateZ(-3deg); } #cover-image-container::after { transform: none; } Thank you so much! I am using safari. The first one worked so I didn't bother trying the second one. One more thing, if you don't mind: How would I move the text, say, farther to the left? |
Aug 26, 2019 11:50 PM
#329
CameronMZ said: Add this code to the bottom:How would I move the text, say, farther to the left? #cover-image-container::after { margin-left: -475px; } |
Aug 27, 2019 2:54 PM
#330
Taduin said: Ah, I misread. I gave you studio code instead of season, that is my fault. Try this:@Valerio_Lyndon First of all thank you very much, we have practically finished but unfortunately the unknow season does not work, i show you a screen also it does not even have the button strangely. … the code should be this .data.season:empty:after ,i tried to insert it but the text does not become central and the hover does not come out. /* ============================== Change Empty Season Appearance */ .data.season:empty::after { display: block; width: 122px; padding: 1px; background: var(--btn-bg); border-radius: 8.5px; color: var(--text) !important; font-size: 11px !important; text-align: center; line-height: 15px; transition: all 0.3s ease; } .data.season:empty::after { content: "Unknown Season"; } .data.season:empty:hover::after { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } Taduin said: Unfortunately, that's not something I can do. The browser controls what is searchable.Besides you could insert that if i try with ctrl + f unknown the text is displayed? a unknown is not displayed Taduin said: So you're looking to change the cursor? Does this do what you want?you can make the pointer-events: none; do you disable the anime type (tv, ona, ova, special, movie),progress, air and to? /* ============================= Cursor Changes for List Items */ .data.progress, .data.score a.edit-disabled, .data.type, .data.airing-started, .data.airing-finished { cursor: default; } .data.progress a:not(.edit-disabled) { cursor: pointer; } Taduin said: Not 100% sure what your intent is. Are either of these correct?can you do that also the total number of anime episodes and - for those who do not know the date have the colored hover according to the category? also the start and end date of the anime if you can /* ========================== Change Progress Appearance */ .data.progress { margin-right: 8px; } .data.progress div, .data.volume div, .data.chapter div { display: block; padding: 1px; background: var(--btn-bg); border-radius: 8.5px; color: var(--text) !important; font-size: 11px !important; line-height: 15px; transition: all 0.3s ease; } .data.progress div:hover, .data.volume div:hover, .data.chapter div:hover { background: var(--btn-bg-h); color: var(--btn-text-h) !important; } .data.progress span, .data.chapter span, .data.volume span { transition: all 0.3s ease; } .data.progress span::after, .data.chapter span::after, .data.volume span::after { transition: all 0.3s ease; } .list-table .list-table-data .progress div:hover span, .list-table .list-table-data .volume div:hover span, .list-table .list-table-data .chapter div:hover span, .list-table .list-table-data .progress div:hover span::after, .list-table .list-table-data .volume div:hover span::after, .list-table .list-table-data .chapter div:hover span::after, .list-table .list-table-data .progress div:hover a, .list-table .list-table-data .volume div:hover a, .list-table .list-table-data .chapter div:hover a { color: var(--btn-text-h) !important; } /* ======================== Change Airing Appearance */ .data.airing-started, .data.airing-finished { z-index: 1; height: 17px; line-height: 17px; } .data.airing-started, .data.airing-finished, .data.airing-started::before, .data.airing-finished::before { color: var(--text) !important; border-right-color: var(--text); transition: all 0.3s ease; } .data.airing-started:hover, .data.airing-finished:hover, .data.airing-started:hover::before, .data.airing-finished:hover::before { color: var(--btn-text-h) !important; border-right-color: var(--btn-text-h); } .data.airing-started::after, .data.airing-finished::after { content: ''; position: absolute; top: 0; left: 0; z-index: -1; display: block; width: 124px; height: 17px; background: var(--btn-bg); border-radius: 8.5px; transition: all 0.3s ease; } .data.airing-started:hover::after, .data.airing-finished:hover::after { background: var(--btn-bg-h); } /* ========================== Category-Coloured Progress */ .data.progress span, .data.chapter span, .data.volume span, .list-table .list-table-data .progress a, .list-table .list-table-data .chapter a, .list-table .list-table-data .volume a { color: var(--category-colour) !important; } /* ======================== Category-Coloured Airing */ .data.airing-started, .data.airing-finished { color: var(--category-colour); } Taduin said: can you also make the hover of the home buttons, quick add, anime list, manga list, history, export, logout, style settings and list settings change according to the section? /* =============================== Category Colours Variable Setup */ body { --global-category-colour: #ababab; } [data-query*='status":7'] { --global-category-colour: var(--accent); } [data-query*='status":1'] { --global-category-colour: var(--watching); } [data-query*='status":2'] { --global-category-colour: var(--completed); } [data-query*='status":3'] { --global-category-colour: var(--onhold); } [data-query*='status":4'] { --global-category-colour: var(--dropped); } [data-query*='status":6'] { --global-category-colour: var(--plantowatch); } /* ========================= Category Coloured Buttons */ body { --btn-head-bg-h: var(--global-category-colour) !important; } /* ========================= Category Coloured Links */ body { --text-h: var(--global-category-colour) !important; } |
Aug 27, 2019 3:36 PM
#331
@Valerio_Lyndon Then: 1) for the unknow season code and perfect 2) i didn't mean the cursor, but it had a hover that changes color based on the section 3) the Category-Coloured Airing code is fine though with the hover 4) strangely does not work Without these little things i have finished. Edit: the code Category-Coloured Airing it doesn't even work the way you gave it |
TaduinAug 27, 2019 3:42 PM
Aug 28, 2019 6:27 PM
#332
Taduin said: I notice there's a missing closing bracket at the bottom of your CSS. Try placing a curly brace, "}", at the end.4) strangely does not work … the code Category-Coloured Airing it doesn't even work the way you gave it Once that's done, try the other snippets again. Hopefully that fixes it. Taduin said: Does this work?2) i didn't mean the cursor, but it had a hover that changes color based on the section /* ============================== Pointer Changes for List Items */ .data.progress, .data.score a.edit-disabled, .data.type, .data.airing-started, .data.airing-finished { pointer-events: none; } .data.progress a:not(.edit-disabled), .data.progress input { pointer-events: auto; } |
Aug 29, 2019 2:08 AM
#333
@Valerio_lyndon First of all i hadn't noticed the } now it works. For the episodes it was fine Category-Colored Progress however without progress and that change color only with the passage of the mouse over (i believe that you didn't understand it for the translation), Category-Colored Airing the same thing ie changing the text color according to the section and only if i pass over it with the mouse.We hope it translates well once and for all. Edit: apparently what i meant by Category-Colored Progress is already there but not everything, you just have to add the - and / (it adds to the anime that you don't know how many episodes come out like one piece) always changing the text color according to the section and only if i pass over it with the mouse.The request to modify Category-Colored Airing always does as i asked |
TaduinAug 29, 2019 2:40 AM
Aug 30, 2019 7:12 AM
#334
Hello again, it's the guy using the Brink+Clarity mash that won't stop bugging you (sorry!). I was just wondering if it's possible to change the character render/background/cover/ images so that they're different only when on the manga list. Also, thanks so much for all the help you've given me so far, seriously. You're awesome. |
Aug 30, 2019 1:33 PM
#335
CameronMZ said: Hello again, it's the guy using the Brink+Clarity mash that won't stop bugging you (sorry!). I was just wondering if it's possible to change the character render/background/cover/ images so that they're different only when on the manga list. Also, thanks so much for all the help you've given me so far, seriously. You're awesome. https://myanimelist.net/ownlist/style Click the bubble next to manga on a theme different from the one where you clicked the bubble next to anime. Then you save, and go to the theme where you clicked on manga. You add the CSS codes there and change them as you like. |
Aug 30, 2019 11:36 PM
#336
@Taduin So, text version? Or a button? The button version previously provided should work how you describe. See below for alternate text version./* ========================== Category-Coloured Progress */ .data.progress span, .data.chapter span, .data.volume span, .list-table .list-table-data .progress a, .list-table .list-table-data .chapter a, .list-table .list-table-data .volume a { transition: all 0.15s ease; } .data.progress div:hover span, .data.chapter div:hover span, .data.volume div:hover span, .list-table .list-table-data .progress div:hover a, .list-table .list-table-data .chapter div:hover a, .list-table .list-table-data .volume div:hover a { color: var(--category-colour) !important; } /* ========================== Category-Coloured Progress */ .data.progress:hover, .data.chapter:hover, .data.volume:hover { --text: var(--category-colour); } .data.progress::before, .data.chapter::before, .data.volume::before, .data.progress span, .data.chapter span, .data.volume span, .list-table .list-table-data .progress a, .list-table .list-table-data .chapter a, .list-table .list-table-data .volume a { transition: all 0.15s ease; color: var(--text) !important; } |
Aug 31, 2019 1:10 AM
#337
@Valerio_Lyndon As the first version is fine but you have forgotten the air date and end date. Without this we have finished.Besides this you know where i can find banners? Sometimes i try to change them but you see them vented edit: in the first change it is fine but I would like it not to highlight all three together that is if i go with the mouse on the 21 the hover appears only there, if i go on / it appears only there and if i go to 26 it appears only there ps: I did this example to make you understand your screenshot |
TaduinAug 31, 2019 1:49 AM
Aug 31, 2019 1:52 AM
#338
Taduin said: @Valerio_Lyndon As the first version is fine but you have forgotten the air date and end date. Without this we have finished.Besides this you know where i can find banners? Sometimes i try to change them but you see them vented /* ================================= Category-coloured Airing on Hover */ .data.airing-started, .data.airing-finished { transition: color 0.15s ease; } .data.airing-started:hover, .data.airing-finished:hover { color: var(--category-colour); } I like Danbooru for images and banners. Be aware it contains NSFW, lewd, or adult images. You may search something such as "landscape": Search Example Edit: Taduin said: edit: in the first change it is fine but I would like it not to highlight all three together that is if i go with the mouse on the 21 the hover appears only there, if i go on / it appears only there and if i go to 26 it appears only there This is the best that can be done: Due to how the webpage is constructed, the hover effect works in this way. /* ========================== Category-Coloured Progress */ .data.progress span, .data.chapter span, .data.volume span, .list-table .list-table-data .progress a, .list-table .list-table-data .chapter a, .list-table .list-table-data .volume a { transition: all 0.15s ease; } .data.progress span:hover, .data.chapter span:hover, .data.volume span:hover, .list-table .list-table-data .progress a:hover, .list-table .list-table-data .chapter a:hover, .list-table .list-table-data .volume a:hover { color: var(--category-colour) !important; } |
Valerio_LyndonAug 31, 2019 5:08 PM
Sep 1, 2019 1:52 AM
#339
@Valerio_Lyndon Ok, if you can't remove the / together with the current score it does nothing, but now that i think about it in the current score it's already set, you can't just put the total number of episodes and - ? another thing, can you do the same thing for the start date and the end date (only the numbers and the - around)? example: 09-01-11 and 25-03-12 (dates taken by the anime Beelzebub) |
Sep 2, 2019 12:33 AM
#340
@Taduin So you want the slash removed?../* ========================== Remove Slash from Progress */ .data.progress span:first-of-type:not(:only-of-type), .data.chapter span:first-of-type:not(:only-of-type), .data.volume span:first-of-type:not(:only-of-type) { font-size: 0; } .data.progress span a, .data.chapter span a, .data.volume span a { font-size: 11px; margin-right: 6px; } Unfortunately, I can't change the format of the 'airing' dates. The 'airing' date information is kept within a single "element" of the HTML, which forbids me from changing individual parts of it. Compared to 'airing', in which the different texts are to some level their own "elements". Hopefully that translates okay. |
Sep 2, 2019 2:02 AM
#341
@Valerio_Lyndon Apparently the translator made another bad joke and wasted your time .-. .I didn't ask to remove /, just that it didn't change color when i go over to the current episode and above /. For the date if i translated well it's part in the html codes and you can't do anything about it because it doesn't have a specific element, in this case thanks the same. PS: of course it leaves that when i pass over the episode count and above the - (where the number of episodes is known) if i pass over it changes color according to the section (do what changes the color based on the state on which and, for example on on hold it turns yellow, on currently watching green etc however also on all anime) but together but separated |
Sep 3, 2019 12:32 AM
#342
@Taduin So sort of like this? Replace the previous code: /* ========================== Category-Coloured Progress */ .data.progress span, .data.chapter span, .data.volume span, .list-table .list-table-data .progress a, .list-table .list-table-data .chapter a, .list-table .list-table-data .volume a { transition: all 0.15s ease; } .data.progress span:last-child:hover, .data.chapter span:last-child:hover, .data.volume span:last-child:hover, .list-table .list-table-data .progress a:hover, .list-table .list-table-data .chapter a:hover, .list-table .list-table-data .volume a:hover { color: var(--category-colour) !important; } |
Sep 3, 2019 1:49 AM
#343
@Valerio_Lyndon Exactly what i meant but you forgot to give me the code. Edit: can you make the edit and more buttons have the aesthetics of the other edit button? i'll show you a screenshot to see obviously do that changes color based on the section when you pass over it |
TaduinSep 3, 2019 9:50 AM
Sep 4, 2019 12:22 AM
#344
@Taduin I didn't phrase it correctly. The code is above. I will also repeat it here:/* ============================= Category-Coloured Progress v2 */ .data.progress span, .data.chapter span, .data.volume span, .list-table .list-table-data .progress a, .list-table .list-table-data .chapter a, .list-table .list-table-data .volume a { transition: all 0.15s ease; } .data.progress span:last-child:hover, .data.chapter span:last-child:hover, .data.volume span:last-child:hover, .list-table .list-table-data .progress a:hover, .list-table .list-table-data .chapter a:hover, .list-table .list-table-data .volume a:hover { color: var(--category-colour) !important; } Edit button code: /* ============================ Add-Edit-More Button Restyle */ .list-table .list-table-data .title .add-edit-more a { background: var(--edit-btn); color: #2db039 !important; } /* ==================== Edit Button Recolour */ .list-table .list-table-data .tags .edit { color: var(--text) !important; } /* ============================ Add-Edit-More Button Restyle */ .list-table .list-table-data .title .add-edit-more a { background: var(--edit-btn); color: var(--text) !important; } |
Sep 4, 2019 1:49 AM
#345
@Valerio_Lyndon The buttons were the second option and work great but the Category-Colored Progress v2 code does not work, does not change color to the total episodes and to - (practically and as if you had not entered the code) edit: how can i change the banner height? most of the themes i find are larger and don't fit well for height |
TaduinSep 4, 2019 11:26 AM
Sep 4, 2019 10:05 AM
#346
Probably the best layout I've ever saw, thank you so much ^^ |
❅Aoishi❅ ✿My Profile ✿MyAnimeList ✿MyMangaList |
Sep 5, 2019 2:25 AM
#347
@Taduin Apologies. Third time's the charm, perhaps. Try this./* ============================= Category-Coloured Progress v3 */ .data.progress span, .data.chapter span, .data.volume span, .list-table .list-table-data .progress a, .list-table .list-table-data .chapter a, .list-table .list-table-data .volume a { transition: all 0.15s ease; } .data.progress span:last-of-type:hover, .data.chapter span:last-of-type:hover, .data.volume span:last-of-type:hover, .list-table .list-table-data .progress a:hover, .list-table .list-table-data .chapter a:hover, .list-table .list-table-data .volume a:hover { color: var(--category-colour) !important; } Banner height code. To change the height, modify the top-most number (the "318px"). /* ==================== Change Banner Height */ :root { --banner-height: 318px; } .cover-block { height: var(--banner-height); } .header { margin-top: calc(var(--banner-height) - 36px); } .list-stats { top: calc(var(--banner-height) + 98px); } |
Sep 5, 2019 2:44 AM
#348
@Valerio_Lyndon Both codes work perfectly thanks! We would have finished only that i would like to make a final test of aesthetics, can you make the tag edit button fit the horizontal tags? you can do it even more calmly because it is not a priority, just a test. Also if you want you can do that the scrollbar that changes color based on the section when you go over it does not become gray but that simply slightly darkens the color of the section? the scrollbar code i currently have is this /* ================== RESTYLE SCROLLBARS */ /* Firefox */ * { scrollbar-color: var(--text) var(--bg); } /* Chrome */ *::-webkit-scrollbar { background: var(--bg); } *::-webkit-scrollbar-button:vertical { background: transparent center / 10px auto no-repeat; } *::-webkit-scrollbar-button:vertical:start { background-image: url(https://i.imgur.com/Cu2u9Hu.png); } *::-webkit-scrollbar-button:vertical:end { background-image: url(https://i.imgur.com/0YI7VxA.png); } *::-webkit-scrollbar-button:horizontal { background: transparent center / auto 10px no-repeat; } *::-webkit-scrollbar-button:horizontal:start { background-image: url(https://i.imgur.com/BArw1oI.png); } *::-webkit-scrollbar-button:horizontal:end { background-image: url(https://i.imgur.com/vqOtoms.png); } *::-webkit-scrollbar-corner { background: var(--bg); } *::-webkit-scrollbar-thumb { background: var(--text) content-box; border: 0 solid transparent; } *::-webkit-scrollbar-thumb:vertical { border-width: 0 2px; } *::-webkit-scrollbar-thumb:horizontal { border-width: 2px 0; } *::-webkit-scrollbar-thumb:hover { background-color: var(--text-dim); } *::-webkit-scrollbar-track { width: 5px; } /* ================== RESTYLE SCROLLBARS */ /* Change Colours Here */ :root { --scrollbar-accent: var(--text); } [data-query*='status":7'] { --scrollbar-accent: var(--accent); } [data-query*='status":1'] { --scrollbar-accent: var(--watching); } [data-query*='status":2'] { --scrollbar-accent: var(--completed); } [data-query*='status":3'] { --scrollbar-accent: var(--onhold); } [data-query*='status":4'] { --scrollbar-accent: var(--dropped); } [data-query*='status":6'] { --scrollbar-accent: var(--plantowatch); } /* Firefox */ * { scrollbar-color: var(--scrollbar-accent) var(--bg); } /* Chrome */ *::-webkit-scrollbar { background: var(--bg); } *::-webkit-scrollbar-button:vertical { background: transparent center / 10px auto no-repeat; } *::-webkit-scrollbar-button:vertical:start { background-image: url(https://i.imgur.com/Cu2u9Hu.png); } *::-webkit-scrollbar-button:vertical:end { background-image: url(https://i.imgur.com/0YI7VxA.png); } *::-webkit-scrollbar-button:horizontal { background: transparent center / auto 10px no-repeat; } *::-webkit-scrollbar-button:horizontal:start { background-image: url(https://i.imgur.com/BArw1oI.png); } *::-webkit-scrollbar-button:horizontal:end { background-image: url(https://i.imgur.com/vqOtoms.png); } *::-webkit-scrollbar-corner { background: var(--bg); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-accent) content-box; border: 0 solid transparent; } *::-webkit-scrollbar-thumb:vertical { border-width: 0 2px; } *::-webkit-scrollbar-thumb:horizontal { border-width: 2px 0; } *::-webkit-scrollbar-track { width: 5px; } edit: how can i change the font size of a tag description? I tried to insert font-size: 7px; in the part of the description (above content: "TAGDESC" of course) but nothing changes. I noticed another thing, the favorite code does not work properly, the circle is displayed but not the heart and if i step on it the circle turns green (i think it depends on the color of the section).I make screenshot to make you understand https://i.imgur.com/y2SYMCh.png and this with the hover https://i.imgur.com/yom1xsa.png also if possible the heart can be put at the end of the title of the anime? where it is practically airing if you need all the CSS code modified so far, here it is http://pasted.co/15e8b996 |
TaduinSep 5, 2019 12:40 PM
Sep 7, 2019 2:34 AM
#349
Taduin said: can you make the tag edit button fit the horizontal tags? /* ================== Edit Button Resize */ .data.tags a.edit, .list-item:hover .data.tags a.edit:hover { width: 100% !important; margin-left: 0; } Taduin said: Remove all scrollbar code you have (everything you listed). Replace with this:you can do that the scrollbar that changes color based on the section when you go over it does not become gray but that simply slightly darkens the color of the section? /* ===================== RESTYLE SCROLLBARS V2 */ /* Change Colours Here */ :root { --scrollbar-accent: var(--text); --scrollbar-accent-h: var(--text-dim); } [data-query*='status":7'] { --scrollbar-accent: var(--accent); --scrollbar-accent-h: #ca6900; } [data-query*='status":1'] { --scrollbar-accent: var(--watching); --scrollbar-accent-h: #1b8625; } [data-query*='status":2'] { --scrollbar-accent: var(--completed); --scrollbar-accent-h: #005cb9; } [data-query*='status":3'] { --scrollbar-accent: var(--onhold); --scrollbar-accent-h: #bf9c26; } [data-query*='status":4'] { --scrollbar-accent: var(--dropped); --scrollbar-accent-h: #AA0C2B; } [data-query*='status":6'] { --scrollbar-accent: var(--plantowatch); --scrollbar-accent-h: #8c8c8c; } /* Firefox */ * { scrollbar-color: var(--scrollbar-accent) var(--bg); } /* Chrome */ *::-webkit-scrollbar { background: var(--bg); } *::-webkit-scrollbar-button:vertical { background: transparent center / 10px auto no-repeat; } *::-webkit-scrollbar-button:vertical:start { background-image: url(https://i.imgur.com/Cu2u9Hu.png); } *::-webkit-scrollbar-button:vertical:end { background-image: url(https://i.imgur.com/0YI7VxA.png); } *::-webkit-scrollbar-button:horizontal { background: transparent center / auto 10px no-repeat; } *::-webkit-scrollbar-button:horizontal:start { background-image: url(https://i.imgur.com/BArw1oI.png); } *::-webkit-scrollbar-button:horizontal:end { background-image: url(https://i.imgur.com/vqOtoms.png); } *::-webkit-scrollbar-corner { background: var(--bg); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-accent) content-box; border: 0 solid transparent; } *::-webkit-scrollbar-thumb:vertical { border-width: 0 2px; } *::-webkit-scrollbar-thumb:horizontal { border-width: 2px 0; } *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-accent-h); } *::-webkit-scrollbar-track { width: 5px; } Taduin said: Use this code to change the size of every description:how can i change the font size of a tag description? I tried to insert font-size: 7px; in the part of the description (above content: "TAGDESC" of course) but nothing changes. .list-table-data .data.tags span a::after { font-size: 7px; } .data.tags a[href*="=Real%20score%3A%20.5"]::after { font-size: 7px !important; } Taduin said: You seem to have modified the "Tag Descriptions Basis - Vertical" section. Usually, it looks like this:I noticed another thing, the favorite code does not work properly, the circle is displayed but not the heart https://i.imgur.com/y2SYMCh.png .data.tags span a:not([href*="=Favo"]):after, .data.tags span a:not([href*="=Favo"]):before .data.tags span a:not([href*="=Real score: .5"]):after, .data.tags span a:not([href*="=Real score: .5"]):before This is the source of the issue. Reinstall the "Tag Descriptions Basis" section. That should fix the incompatibility. Taduin said: Is this unwanted behaviour? To change it back, use this code:and if i step on it the circle turns green (i think it depends on the color of the section). https://i.imgur.com/yom1xsa.png /* ========================== Favourite Tag Colour Patch */ .data.tags span a[href*="=Favourite"]:hover, .data.tags span a[href*="=Favorite"]:hover { background: #ababab !important; } Taduin said: Positioning it at the end of the title is not possible.also if possible the heart can be put at the end of the title of the anime? where it is practically airing |
Sep 7, 2019 4:46 AM
#350
@Valerio_Lyndon Then : for the horizontal edit button you don't understand it, i mean that the edit button that modifies the tags fits this code / * Horizontal Tags / Revision 0.2 * / in practice i ask that the tag edit button move to where the horizontal tags are for the perfect sidebar thank you! regarding the description and the favorites thanks! always for the favorites how can i change heart color? i wanted to distinguish between tv, movie etc i tried to change the color of this code color: #1a75ff! important; but it makes the heart disappear to the tag i insert edit: i noticed that the favorites in the css edit works but in the normal sections the heart appears inside the tag, i take a screenshot to make you understand I remembered one thing, how can i add the - to the edit center and more? (as was practically the beginning) i want it to always change color based on the section another thing, you know that when you click on more below Discuss Anime is there an orange line? can you change the color according to the section and when you switch over to Discuss Anime change the text color according to the section? edit: can you make round corners for each anime line? where there are the title of the anime etc to make you understand |
TaduinSep 9, 2019 2:54 AM
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |
|
» [CSS/BBCODE] ⭐️ How to view anyone's CSS or BBcodes (for lists, profiles, or clubs)!Shishio-kun - Feb 6, 2012 |
37 |
by sunnysummerday
»»
Jun 11, 7:44 PM |